mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-08-02 00:52:17 +03:00
Camera profile support (#22482)
* add CameraProfileConfig model for named config overrides * add profiles field to CameraConfig * add active_profile field to FrigateConfig Runtime-only field excluded from YAML serialization, tracks which profile is currently active. * add ProfileManager for profile activation and persistence Handles snapshotting base configs, applying profile overrides via deep_merge + apply_section_update, publishing ZMQ updates, and persisting active profile to /config/.active_profile. * add profile API endpoints (GET /profiles, GET/PUT /profile) * add MQTT and dispatcher integration for profiles - Subscribe to frigate/profile/set MQTT topic - Publish profile/state and profiles/available on connect - Add _on_profile_command handler to dispatcher - Broadcast active profile state on WebSocket connect * wire ProfileManager into app startup and FastAPI - Create ProfileManager after dispatcher init - Restore persisted profile on startup - Pass dispatcher and profile_manager to FastAPI app * add tests for invalid profile values and keys Tests that Pydantic rejects: invalid field values (fps: "not_a_number"), unknown section keys (ffmpeg in profile), invalid nested values, and invalid profiles in full config parsing. * formatting * fix CameraLiveConfig JSON serialization error on profile activation refactor _publish_updates to only publish ZMQ updates for sections that actually changed, not all sections on affected cameras. * consolidate * add enabled field to camera profiles for enabling/disabling cameras * add zones support to camera profiles * add frontend profile types, color utility, and config save support * add profile state management and save preview support * add profileName prop to BaseSection for profile-aware config editing * add profile section dropdown and wire into camera settings pages * add per-profile camera enable/disable to Camera Management view * add profiles summary page with card-based layout and fix backend zone comparison bug * add active profile badge to settings toolbar * i18n * add red dot for any pending changes including profiles * profile support for mask and zone editor * fix hidden field validation errors caused by lodash wildcard and schema gaps lodash unset does not support wildcard (*) segments, so hidden fields like filters.*.mask were never stripped from form data, leaving null raw_coordinates that fail RJSF anyOf validation. Add unsetWithWildcard helper and also strip hidden fields from the JSON schema itself as defense-in-depth. * add face_recognition and lpr to profile-eligible sections * move profile dropdown from section panes to settings header * add profiles enable toggle and improve empty state * formatting * tweaks * tweak colors and switch * fix profile save diff, masksAndZones delete, and config sync * ui tweaks * ensure profile manager gets updated config * rename profile settings to ui settings * refactor profilesview and add dots/border colors when overridden * implement an update_config method for profile manager * fix mask deletion * more unique colors * add top-level profiles config section with friendly names * implement profile friendly names and improve profile UI - Add ProfileDefinitionConfig type and profiles field to FrigateConfig - Use ProfilesApiResponse type with friendly_name support throughout - Replace Record<string, unknown> with proper JsonObject/JsonValue types - Add profile creation form matching zone pattern (Zod + NameAndIdFields) - Add pencil icon for renaming profile friendly names in ProfilesView - Move Profiles menu item to first under Camera Configuration - Add activity indicators on save/rename/delete buttons - Display friendly names in CameraManagementView profile selector - Fix duplicate colored dots in management profile dropdown - Fix i18n namespace for overridden base config tooltips - Move profile override deletion from dropdown trash icon to footer button with confirmation dialog, matching Reset to Global pattern - Remove Add Profile from section header dropdown to prevent saving camera overrides before top-level profile definition exists - Clean up newProfiles state after API profile deletion - Refresh profiles SWR cache after saving profile definitions * remove profile badge in settings and add profiles to main menu * use icon only on mobile * change color order * docs * show activity indicator on trash icon while deleting a profile * tweak language * immediately create profiles on backend instead of deferring to Save All * hide restart-required fields when editing a profile section fields that require a restart cannot take effect via profile switching, so they are merged into hiddenFields when profileName is set * show active profile indicator in desktop status bar * fix profile config inheritance bug where Pydantic defaults override base values The /config API was dumping profile overrides with model_dump() which included all Pydantic defaults. When the frontend merged these over the camera's base config, explicitly-set base values were lost. Now profile overrides are re-dumped with exclude_unset=True so only user-specified fields are returned. Also fixes the Save All path generating spurious deletion markers for restart-required fields that are hidden during profile editing but not excluded from the raw data sanitization in prepareSectionSavePayload. * docs tweaks * docs tweak * formatting * formatting * fix typing * fix test pollution test_maintainer was injecting MagicMock() into sys.modules["frigate.config.camera.updater"] at module load time and never restoring it. When the profile tests later imported CameraConfigUpdateEnum and CameraConfigUpdateTopic from that module, they got mock objects instead of the real dataclass/enum, so equality comparisons always failed * remove * fix settings showing profile-merged values when editing base config When a profile is active, the in-memory config contains effective (profile-merged) values. The settings UI was displaying these merged values even when the "Base Config" view was selected. Backend: snapshot pre-profile base configs in ProfileManager and expose them via a `base_config` key in the /api/config camera response when a profile is active. The top-level sections continue to reflect the effective running config. Frontend: read from `base_config` when available in BaseSection, useConfigOverride, useAllCameraOverrides, and prepareSectionSavePayload. Include formData labels in Object/Audio switches widgets so that labels added only by a profile override remain visible when editing that profile. * use rasterized_mask as field makes it easier to exclude from the schema with exclude=True prevents leaking of the field when using model_dump for profiles * fix zones - Fix zone colors not matching across profiles by falling back to base zone color when profile zone data lacks a color field - Use base_config for base-layer values in masks/zones view so profile-merged values don't pollute the base config editing view - Handle zones separately in profile manager snapshot/restore since ZoneConfig requires special serialization (color as private attr, contour generation) - Inherit base zone color and generate contours for profile zone overrides in profile manager * formatting * don't require restart for camera enabled change for profiles * publish camera state when changing profiles * formatting * remove available profiles from mqtt * improve typing
This commit is contained in:
Josh Hawkins
@@ -44,6 +44,7 @@ type MotionMaskEditPaneProps = {
|
||||
onCancel?: () => void;
|
||||
snapPoints: boolean;
|
||||
setSnapPoints: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
editingProfile?: string | null;
|
||||
};
|
||||
|
||||
export default function MotionMaskEditPane({
|
||||
@@ -58,6 +59,7 @@ export default function MotionMaskEditPane({
|
||||
onCancel,
|
||||
snapPoints,
|
||||
setSnapPoints,
|
||||
editingProfile,
|
||||
}: MotionMaskEditPaneProps) {
|
||||
const { t } = useTranslation(["views/settings"]);
|
||||
const { getLocaleDocUrl } = useDocDomain();
|
||||
@@ -192,16 +194,28 @@ export default function MotionMaskEditPane({
|
||||
coordinates: coordinates,
|
||||
};
|
||||
|
||||
// Build config path based on profile mode
|
||||
const motionMaskPath = editingProfile
|
||||
? {
|
||||
profiles: {
|
||||
[editingProfile]: {
|
||||
motion: { mask: { [maskId]: maskConfig } },
|
||||
},
|
||||
},
|
||||
}
|
||||
: { motion: { mask: { [maskId]: maskConfig } } };
|
||||
|
||||
// If renaming, we need to delete the old mask first
|
||||
if (renamingMask) {
|
||||
const deleteQueryPath = editingProfile
|
||||
? `cameras.${polygon.camera}.profiles.${editingProfile}.motion.mask.${polygon.name}`
|
||||
: `cameras.${polygon.camera}.motion.mask.${polygon.name}`;
|
||||
|
||||
try {
|
||||
await axios.put(
|
||||
`config/set?cameras.${polygon.camera}.motion.mask.${polygon.name}`,
|
||||
{
|
||||
requires_restart: 0,
|
||||
},
|
||||
);
|
||||
} catch (error) {
|
||||
await axios.put(`config/set?${deleteQueryPath}`, {
|
||||
requires_restart: 0,
|
||||
});
|
||||
} catch {
|
||||
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
|
||||
position: "top-center",
|
||||
});
|
||||
@@ -210,22 +224,20 @@ export default function MotionMaskEditPane({
|
||||
}
|
||||
}
|
||||
|
||||
const updateTopic = editingProfile
|
||||
? undefined
|
||||
: `config/cameras/${polygon.camera}/motion`;
|
||||
|
||||
// Save the new/updated mask using JSON body
|
||||
axios
|
||||
.put("config/set", {
|
||||
config_data: {
|
||||
cameras: {
|
||||
[polygon.camera]: {
|
||||
motion: {
|
||||
mask: {
|
||||
[maskId]: maskConfig,
|
||||
},
|
||||
},
|
||||
},
|
||||
[polygon.camera]: motionMaskPath,
|
||||
},
|
||||
},
|
||||
requires_restart: 0,
|
||||
update_topic: `config/cameras/${polygon.camera}/motion`,
|
||||
update_topic: updateTopic,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
@@ -238,8 +250,10 @@ export default function MotionMaskEditPane({
|
||||
},
|
||||
);
|
||||
updateConfig();
|
||||
// Publish the enabled state through websocket
|
||||
sendMotionMaskState(enabled ? "ON" : "OFF");
|
||||
// Only publish WS state for base config
|
||||
if (!editingProfile) {
|
||||
sendMotionMaskState(enabled ? "ON" : "OFF");
|
||||
}
|
||||
} else {
|
||||
toast.error(
|
||||
t("toast.save.error.title", {
|
||||
@@ -277,6 +291,7 @@ export default function MotionMaskEditPane({
|
||||
cameraConfig,
|
||||
t,
|
||||
sendMotionMaskState,
|
||||
editingProfile,
|
||||
],
|
||||
);
|
||||
|
||||
|
||||
@@ -51,6 +51,7 @@ type ObjectMaskEditPaneProps = {
|
||||
onCancel?: () => void;
|
||||
snapPoints: boolean;
|
||||
setSnapPoints: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
editingProfile?: string | null;
|
||||
};
|
||||
|
||||
export default function ObjectMaskEditPane({
|
||||
@@ -65,6 +66,7 @@ export default function ObjectMaskEditPane({
|
||||
onCancel,
|
||||
snapPoints,
|
||||
setSnapPoints,
|
||||
editingProfile,
|
||||
}: ObjectMaskEditPaneProps) {
|
||||
const { t } = useTranslation(["views/settings"]);
|
||||
const { data: config, mutate: updateConfig } =
|
||||
@@ -190,14 +192,22 @@ export default function ObjectMaskEditPane({
|
||||
// Determine if old mask was global or per-object
|
||||
const wasGlobal =
|
||||
polygon.objects.length === 0 || polygon.objects[0] === "all_labels";
|
||||
const oldPath = wasGlobal
|
||||
? `cameras.${polygon.camera}.objects.mask.${polygon.name}`
|
||||
: `cameras.${polygon.camera}.objects.filters.${polygon.objects[0]}.mask.${polygon.name}`;
|
||||
|
||||
let oldPath: string;
|
||||
if (editingProfile) {
|
||||
oldPath = wasGlobal
|
||||
? `cameras.${polygon.camera}.profiles.${editingProfile}.objects.mask.${polygon.name}`
|
||||
: `cameras.${polygon.camera}.profiles.${editingProfile}.objects.filters.${polygon.objects[0]}.mask.${polygon.name}`;
|
||||
} else {
|
||||
oldPath = wasGlobal
|
||||
? `cameras.${polygon.camera}.objects.mask.${polygon.name}`
|
||||
: `cameras.${polygon.camera}.objects.filters.${polygon.objects[0]}.mask.${polygon.name}`;
|
||||
}
|
||||
|
||||
await axios.put(`config/set?${oldPath}`, {
|
||||
requires_restart: 0,
|
||||
});
|
||||
} catch (error) {
|
||||
} catch {
|
||||
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
|
||||
position: "top-center",
|
||||
});
|
||||
@@ -206,45 +216,32 @@ export default function ObjectMaskEditPane({
|
||||
}
|
||||
}
|
||||
|
||||
// Build the config structure based on whether it's global or per-object
|
||||
let configBody;
|
||||
if (globalMask) {
|
||||
configBody = {
|
||||
config_data: {
|
||||
cameras: {
|
||||
[polygon.camera]: {
|
||||
objects: {
|
||||
mask: {
|
||||
[maskId]: maskConfig,
|
||||
},
|
||||
},
|
||||
},
|
||||
// Build config path based on profile mode
|
||||
const objectsSection = globalMask
|
||||
? { objects: { mask: { [maskId]: maskConfig } } }
|
||||
: {
|
||||
objects: {
|
||||
filters: { [form_objects]: { mask: { [maskId]: maskConfig } } },
|
||||
},
|
||||
};
|
||||
|
||||
const cameraData = editingProfile
|
||||
? { profiles: { [editingProfile]: objectsSection } }
|
||||
: objectsSection;
|
||||
|
||||
const updateTopic = editingProfile
|
||||
? undefined
|
||||
: `config/cameras/${polygon.camera}/objects`;
|
||||
|
||||
const configBody = {
|
||||
config_data: {
|
||||
cameras: {
|
||||
[polygon.camera]: cameraData,
|
||||
},
|
||||
requires_restart: 0,
|
||||
update_topic: `config/cameras/${polygon.camera}/objects`,
|
||||
};
|
||||
} else {
|
||||
configBody = {
|
||||
config_data: {
|
||||
cameras: {
|
||||
[polygon.camera]: {
|
||||
objects: {
|
||||
filters: {
|
||||
[form_objects]: {
|
||||
mask: {
|
||||
[maskId]: maskConfig,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
requires_restart: 0,
|
||||
update_topic: `config/cameras/${polygon.camera}/objects`,
|
||||
};
|
||||
}
|
||||
},
|
||||
requires_restart: 0,
|
||||
update_topic: updateTopic,
|
||||
};
|
||||
|
||||
axios
|
||||
.put("config/set", configBody)
|
||||
@@ -259,8 +256,10 @@ export default function ObjectMaskEditPane({
|
||||
},
|
||||
);
|
||||
updateConfig();
|
||||
// Publish the enabled state through websocket
|
||||
sendObjectMaskState(enabled ? "ON" : "OFF");
|
||||
// Only publish WS state for base config
|
||||
if (!editingProfile) {
|
||||
sendObjectMaskState(enabled ? "ON" : "OFF");
|
||||
}
|
||||
} else {
|
||||
toast.error(
|
||||
t("toast.save.error.title", {
|
||||
@@ -301,6 +300,7 @@ export default function ObjectMaskEditPane({
|
||||
cameraConfig,
|
||||
t,
|
||||
sendObjectMaskState,
|
||||
editingProfile,
|
||||
],
|
||||
);
|
||||
|
||||
|
||||
@@ -35,6 +35,7 @@ import { Trans, useTranslation } from "react-i18next";
|
||||
import ActivityIndicator from "../indicators/activity-indicator";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useMotionMaskState, useObjectMaskState, useZoneState } from "@/api/ws";
|
||||
import { getProfileColor } from "@/utils/profileColors";
|
||||
|
||||
type PolygonItemProps = {
|
||||
polygon: Polygon;
|
||||
@@ -48,6 +49,8 @@ type PolygonItemProps = {
|
||||
setIsLoading: (loading: boolean) => void;
|
||||
loadingPolygonIndex: number | undefined;
|
||||
setLoadingPolygonIndex: (index: number | undefined) => void;
|
||||
editingProfile?: string | null;
|
||||
allProfileNames?: string[];
|
||||
};
|
||||
|
||||
export default function PolygonItem({
|
||||
@@ -62,6 +65,8 @@ export default function PolygonItem({
|
||||
setIsLoading,
|
||||
loadingPolygonIndex,
|
||||
setLoadingPolygonIndex,
|
||||
editingProfile,
|
||||
allProfileNames,
|
||||
}: PolygonItemProps) {
|
||||
const { t } = useTranslation("views/settings");
|
||||
const { data: config, mutate: updateConfig } =
|
||||
@@ -107,6 +112,8 @@ export default function PolygonItem({
|
||||
|
||||
const PolygonItemIcon = polygon ? polygonTypeIcons[polygon.type] : undefined;
|
||||
|
||||
const isBasePolygon = !!editingProfile && polygon.polygonSource === "base";
|
||||
|
||||
const saveToConfig = useCallback(
|
||||
async (polygon: Polygon) => {
|
||||
if (!polygon || !cameraConfig) {
|
||||
@@ -122,25 +129,36 @@ export default function PolygonItem({
|
||||
? "objects"
|
||||
: polygon.type;
|
||||
|
||||
const updateTopic = editingProfile
|
||||
? undefined
|
||||
: `config/cameras/${polygon.camera}/${updateTopicType}`;
|
||||
|
||||
setIsLoading(true);
|
||||
setLoadingPolygonIndex(index);
|
||||
|
||||
if (polygon.type === "zone") {
|
||||
// Zones use query string format
|
||||
const { alertQueries, detectionQueries } = reviewQueries(
|
||||
polygon.name,
|
||||
false,
|
||||
false,
|
||||
polygon.camera,
|
||||
cameraConfig?.review.alerts.required_zones || [],
|
||||
cameraConfig?.review.detections.required_zones || [],
|
||||
);
|
||||
const url = `cameras.${polygon.camera}.zones.${polygon.name}${alertQueries}${detectionQueries}`;
|
||||
let url: string;
|
||||
|
||||
if (editingProfile) {
|
||||
// Profile mode: just delete the profile zone
|
||||
url = `cameras.${polygon.camera}.profiles.${editingProfile}.zones.${polygon.name}`;
|
||||
} else {
|
||||
// Base mode: handle review queries
|
||||
const { alertQueries, detectionQueries } = reviewQueries(
|
||||
polygon.name,
|
||||
false,
|
||||
false,
|
||||
polygon.camera,
|
||||
cameraConfig?.review.alerts.required_zones || [],
|
||||
cameraConfig?.review.detections.required_zones || [],
|
||||
);
|
||||
url = `cameras.${polygon.camera}.zones.${polygon.name}${alertQueries}${detectionQueries}`;
|
||||
}
|
||||
|
||||
await axios
|
||||
.put(`config/set?${url}`, {
|
||||
requires_restart: 0,
|
||||
update_topic: `config/cameras/${polygon.camera}/${updateTopicType}`,
|
||||
update_topic: updateTopic,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
@@ -178,64 +196,34 @@ export default function PolygonItem({
|
||||
}
|
||||
|
||||
// Motion masks and object masks use JSON body format
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let configUpdate: any = {};
|
||||
|
||||
if (polygon.type === "motion_mask") {
|
||||
// Delete mask from motion.mask dict by setting it to undefined
|
||||
configUpdate = {
|
||||
cameras: {
|
||||
[polygon.camera]: {
|
||||
motion: {
|
||||
mask: {
|
||||
[polygon.name]: null, // Setting to null will delete the key
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (polygon.type === "object_mask") {
|
||||
// Determine if this is a global mask or object-specific mask
|
||||
const isGlobalMask = !polygon.objects.length;
|
||||
|
||||
if (isGlobalMask) {
|
||||
configUpdate = {
|
||||
cameras: {
|
||||
[polygon.camera]: {
|
||||
objects: {
|
||||
mask: {
|
||||
[polygon.name]: null, // Setting to null will delete the key
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
configUpdate = {
|
||||
cameras: {
|
||||
[polygon.camera]: {
|
||||
const deleteSection =
|
||||
polygon.type === "motion_mask"
|
||||
? { motion: { mask: { [polygon.name]: null } } }
|
||||
: !polygon.objects.length
|
||||
? { objects: { mask: { [polygon.name]: null } } }
|
||||
: {
|
||||
objects: {
|
||||
filters: {
|
||||
[polygon.objects[0]]: {
|
||||
mask: {
|
||||
[polygon.name]: null, // Setting to null will delete the key
|
||||
},
|
||||
mask: { [polygon.name]: null },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const configUpdate = {
|
||||
cameras: {
|
||||
[polygon.camera]: editingProfile
|
||||
? { profiles: { [editingProfile]: deleteSection } }
|
||||
: deleteSection,
|
||||
},
|
||||
};
|
||||
|
||||
await axios
|
||||
.put("config/set", {
|
||||
config_data: configUpdate,
|
||||
requires_restart: 0,
|
||||
update_topic: `config/cameras/${polygon.camera}/${updateTopicType}`,
|
||||
update_topic: updateTopic,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
@@ -278,6 +266,7 @@ export default function PolygonItem({
|
||||
setIsLoading,
|
||||
index,
|
||||
setLoadingPolygonIndex,
|
||||
editingProfile,
|
||||
],
|
||||
);
|
||||
|
||||
@@ -289,14 +278,19 @@ export default function PolygonItem({
|
||||
const handleToggleEnabled = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
// Prevent toggling if disabled in config
|
||||
if (polygon.enabled_in_config === false) {
|
||||
// Prevent toggling if disabled in config or if this is a base polygon in profile mode
|
||||
if (polygon.enabled_in_config === false || isBasePolygon) {
|
||||
return;
|
||||
}
|
||||
if (!polygon) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Don't toggle via WS in profile mode
|
||||
if (editingProfile) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isEnabled = isPolygonEnabled;
|
||||
const nextState = isEnabled ? "OFF" : "ON";
|
||||
|
||||
@@ -320,6 +314,8 @@ export default function PolygonItem({
|
||||
sendZoneState,
|
||||
sendMotionMaskState,
|
||||
sendObjectMaskState,
|
||||
isBasePolygon,
|
||||
editingProfile,
|
||||
],
|
||||
);
|
||||
|
||||
@@ -358,7 +354,12 @@ export default function PolygonItem({
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleToggleEnabled}
|
||||
disabled={isLoading || polygon.enabled_in_config === false}
|
||||
disabled={
|
||||
isLoading ||
|
||||
polygon.enabled_in_config === false ||
|
||||
isBasePolygon ||
|
||||
!!editingProfile
|
||||
}
|
||||
className="mr-2 shrink-0 cursor-pointer border-none bg-transparent p-0 transition-opacity hover:opacity-70 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<PolygonItemIcon
|
||||
@@ -384,15 +385,37 @@ export default function PolygonItem({
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
))}
|
||||
{editingProfile &&
|
||||
(polygon.polygonSource === "profile" ||
|
||||
polygon.polygonSource === "override") &&
|
||||
allProfileNames && (
|
||||
<span
|
||||
className={cn(
|
||||
"mr-1.5 inline-block h-2 w-2 shrink-0 rounded-full",
|
||||
getProfileColor(editingProfile, allProfileNames).dot,
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<p
|
||||
className={cn(
|
||||
"cursor-default",
|
||||
!isPolygonEnabled && "opacity-60",
|
||||
polygon.enabled_in_config === false && "line-through",
|
||||
isBasePolygon && "opacity-50",
|
||||
)}
|
||||
>
|
||||
{polygon.friendly_name ?? polygon.name}
|
||||
{!isPolygonEnabled && " (disabled)"}
|
||||
{isBasePolygon && (
|
||||
<span className="ml-1 text-xs text-muted-foreground">
|
||||
{t("masksAndZones.profileBase", { ns: "views/settings" })}
|
||||
</span>
|
||||
)}
|
||||
{polygon.polygonSource === "override" && (
|
||||
<span className="ml-1 text-xs text-muted-foreground">
|
||||
{t("masksAndZones.profileOverride", { ns: "views/settings" })}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<AlertDialog
|
||||
@@ -459,7 +482,7 @@ export default function PolygonItem({
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
aria-label={t("button.delete", { ns: "common" })}
|
||||
disabled={isLoading}
|
||||
disabled={isLoading || isBasePolygon}
|
||||
onClick={() => setDeleteDialogOpen(true)}
|
||||
>
|
||||
{t("button.delete", { ns: "common" })}
|
||||
@@ -531,9 +554,12 @@ export default function PolygonItem({
|
||||
"size-[15px] cursor-pointer",
|
||||
hoveredPolygonIndex === index &&
|
||||
"fill-primary-variant text-primary-variant",
|
||||
isLoading && "cursor-not-allowed opacity-50",
|
||||
(isLoading || isBasePolygon) &&
|
||||
"cursor-not-allowed opacity-50",
|
||||
)}
|
||||
onClick={() => !isLoading && setDeleteDialogOpen(true)}
|
||||
onClick={() =>
|
||||
!isLoading && !isBasePolygon && setDeleteDialogOpen(true)
|
||||
}
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Check, ChevronDown } from "lucide-react";
|
||||
import { LuLayers } from "react-icons/lu";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getProfileColor } from "@/utils/profileColors";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type ProfileSectionDropdownProps = {
|
||||
allProfileNames: string[];
|
||||
profileFriendlyNames: Map<string, string>;
|
||||
editingProfile: string | null;
|
||||
hasProfileData: (profileName: string) => boolean;
|
||||
onSelectProfile: (profileName: string | null) => void;
|
||||
/** When true, show only an icon as the trigger (for mobile) */
|
||||
iconOnly?: boolean;
|
||||
};
|
||||
|
||||
export function ProfileSectionDropdown({
|
||||
allProfileNames,
|
||||
profileFriendlyNames,
|
||||
editingProfile,
|
||||
hasProfileData,
|
||||
onSelectProfile,
|
||||
iconOnly = false,
|
||||
}: ProfileSectionDropdownProps) {
|
||||
const { t } = useTranslation(["views/settings"]);
|
||||
|
||||
const activeColor = editingProfile
|
||||
? getProfileColor(editingProfile, allProfileNames)
|
||||
: null;
|
||||
|
||||
const editingFriendlyName = editingProfile
|
||||
? (profileFriendlyNames.get(editingProfile) ?? editingProfile)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
{iconOnly ? (
|
||||
<Button variant="outline" size="sm">
|
||||
<LuLayers className="size-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="outline" className="h-9 gap-2 font-normal">
|
||||
{editingProfile ? (
|
||||
<>
|
||||
<span
|
||||
className={cn(
|
||||
"h-2 w-2 shrink-0 rounded-full",
|
||||
activeColor?.dot,
|
||||
)}
|
||||
/>
|
||||
{editingFriendlyName}
|
||||
</>
|
||||
) : (
|
||||
t("profiles.baseConfig", { ns: "views/settings" })
|
||||
)}
|
||||
<ChevronDown className="h-3 w-3 opacity-50" />
|
||||
</Button>
|
||||
)}
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="min-w-[180px]">
|
||||
<DropdownMenuItem onClick={() => onSelectProfile(null)}>
|
||||
<div className="flex w-full items-center gap-2">
|
||||
{editingProfile === null && (
|
||||
<Check className="h-3.5 w-3.5 shrink-0" />
|
||||
)}
|
||||
<span className={editingProfile === null ? "" : "pl-[22px]"}>
|
||||
{t("profiles.baseConfig", { ns: "views/settings" })}
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
|
||||
{allProfileNames.length > 0 && <DropdownMenuSeparator />}
|
||||
|
||||
{allProfileNames.map((profile) => {
|
||||
const color = getProfileColor(profile, allProfileNames);
|
||||
const hasData = hasProfileData(profile);
|
||||
const isActive = editingProfile === profile;
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={profile}
|
||||
className="group flex items-start justify-between gap-2"
|
||||
onClick={() => onSelectProfile(profile)}
|
||||
>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="flex w-full flex-row items-center justify-start gap-2">
|
||||
{isActive && <Check className="h-3.5 w-3.5 shrink-0" />}
|
||||
<span
|
||||
className={cn(
|
||||
"h-2 w-2 shrink-0 rounded-full",
|
||||
color.dot,
|
||||
!isActive && "ml-[22px]",
|
||||
)}
|
||||
/>
|
||||
<span>{profileFriendlyNames.get(profile) ?? profile}</span>
|
||||
</div>
|
||||
{!hasData && (
|
||||
<span className="ml-[22px] text-xs text-muted-foreground">
|
||||
{t("profiles.noOverrides", { ns: "views/settings" })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
@@ -50,6 +50,7 @@ type ZoneEditPaneProps = {
|
||||
setActiveLine: React.Dispatch<React.SetStateAction<number | undefined>>;
|
||||
snapPoints: boolean;
|
||||
setSnapPoints: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
editingProfile?: string | null;
|
||||
};
|
||||
|
||||
export default function ZoneEditPane({
|
||||
@@ -65,6 +66,7 @@ export default function ZoneEditPane({
|
||||
setActiveLine,
|
||||
snapPoints,
|
||||
setSnapPoints,
|
||||
editingProfile,
|
||||
}: ZoneEditPaneProps) {
|
||||
const { t } = useTranslation(["views/settings"]);
|
||||
const { getLocaleDocUrl } = useDocDomain();
|
||||
@@ -101,15 +103,23 @@ export default function ZoneEditPane({
|
||||
}, [polygon, config]);
|
||||
|
||||
const [lineA, lineB, lineC, lineD] = useMemo(() => {
|
||||
const distances =
|
||||
polygon?.camera &&
|
||||
polygon?.name &&
|
||||
config?.cameras[polygon.camera]?.zones[polygon.name]?.distances;
|
||||
if (!polygon?.camera || !polygon?.name || !config) {
|
||||
return [undefined, undefined, undefined, undefined];
|
||||
}
|
||||
|
||||
// Check profile zone first, then base
|
||||
const profileZone = editingProfile
|
||||
? config.cameras[polygon.camera]?.profiles?.[editingProfile]?.zones?.[
|
||||
polygon.name
|
||||
]
|
||||
: undefined;
|
||||
const baseZone = config.cameras[polygon.camera]?.zones[polygon.name];
|
||||
const distances = profileZone?.distances ?? baseZone?.distances;
|
||||
|
||||
return Array.isArray(distances)
|
||||
? distances.map((value) => parseFloat(value) || 0)
|
||||
: [undefined, undefined, undefined, undefined];
|
||||
}, [polygon, config]);
|
||||
}, [polygon, config, editingProfile]);
|
||||
|
||||
const formSchema = z
|
||||
.object({
|
||||
@@ -272,6 +282,17 @@ export default function ZoneEditPane({
|
||||
},
|
||||
);
|
||||
|
||||
// Resolve zone data: profile zone takes priority over base
|
||||
const resolvedZoneData = useMemo(() => {
|
||||
if (!polygon?.camera || !polygon?.name || !config) return undefined;
|
||||
const cam = config.cameras[polygon.camera];
|
||||
if (!cam) return undefined;
|
||||
const profileZone = editingProfile
|
||||
? cam.profiles?.[editingProfile]?.zones?.[polygon.name]
|
||||
: undefined;
|
||||
return profileZone ?? cam.zones[polygon.name];
|
||||
}, [polygon, config, editingProfile]);
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
mode: "onBlur",
|
||||
@@ -279,20 +300,11 @@ export default function ZoneEditPane({
|
||||
name: polygon?.name ?? "",
|
||||
friendly_name: polygon?.friendly_name ?? polygon?.name ?? "",
|
||||
enabled:
|
||||
polygon?.camera &&
|
||||
polygon?.name &&
|
||||
config?.cameras[polygon.camera]?.zones[polygon.name]?.enabled !==
|
||||
undefined
|
||||
? config?.cameras[polygon.camera]?.zones[polygon.name]?.enabled
|
||||
resolvedZoneData?.enabled !== undefined
|
||||
? resolvedZoneData.enabled
|
||||
: (polygon?.enabled ?? true),
|
||||
inertia:
|
||||
polygon?.camera &&
|
||||
polygon?.name &&
|
||||
config?.cameras[polygon.camera]?.zones[polygon.name]?.inertia,
|
||||
loitering_time:
|
||||
polygon?.camera &&
|
||||
polygon?.name &&
|
||||
config?.cameras[polygon.camera]?.zones[polygon.name]?.loitering_time,
|
||||
inertia: resolvedZoneData?.inertia,
|
||||
loitering_time: resolvedZoneData?.loitering_time,
|
||||
isFinished: polygon?.isFinished ?? false,
|
||||
objects: polygon?.objects ?? [],
|
||||
speedEstimation: !!(lineA || lineB || lineC || lineD),
|
||||
@@ -300,10 +312,7 @@ export default function ZoneEditPane({
|
||||
lineB,
|
||||
lineC,
|
||||
lineD,
|
||||
speed_threshold:
|
||||
polygon?.camera &&
|
||||
polygon?.name &&
|
||||
config?.cameras[polygon.camera]?.zones[polygon.name]?.speed_threshold,
|
||||
speed_threshold: resolvedZoneData?.speed_threshold,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -341,6 +350,16 @@ export default function ZoneEditPane({
|
||||
if (!scaledWidth || !scaledHeight || !polygon) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine config path prefix based on profile mode
|
||||
const pathPrefix = editingProfile
|
||||
? `cameras.${polygon.camera}.profiles.${editingProfile}.zones.${zoneName}`
|
||||
: `cameras.${polygon.camera}.zones.${zoneName}`;
|
||||
|
||||
const oldPathPrefix = editingProfile
|
||||
? `cameras.${polygon.camera}.profiles.${editingProfile}.zones.${polygon.name}`
|
||||
: `cameras.${polygon.camera}.zones.${polygon.name}`;
|
||||
|
||||
let mutatedConfig = config;
|
||||
let alertQueries = "";
|
||||
let detectionQueries = "";
|
||||
@@ -349,55 +368,74 @@ export default function ZoneEditPane({
|
||||
|
||||
if (renamingZone) {
|
||||
// rename - delete old zone and replace with new
|
||||
const zoneInAlerts =
|
||||
cameraConfig?.review.alerts.required_zones.includes(polygon.name) ??
|
||||
false;
|
||||
const zoneInDetections =
|
||||
cameraConfig?.review.detections.required_zones.includes(
|
||||
let renameAlertQueries = "";
|
||||
let renameDetectionQueries = "";
|
||||
|
||||
// Only handle review queries for base config (not profiles)
|
||||
if (!editingProfile) {
|
||||
const zoneInAlerts =
|
||||
cameraConfig?.review.alerts.required_zones.includes(polygon.name) ??
|
||||
false;
|
||||
const zoneInDetections =
|
||||
cameraConfig?.review.detections.required_zones.includes(
|
||||
polygon.name,
|
||||
) ?? false;
|
||||
|
||||
({
|
||||
alertQueries: renameAlertQueries,
|
||||
detectionQueries: renameDetectionQueries,
|
||||
} = reviewQueries(
|
||||
polygon.name,
|
||||
) ?? false;
|
||||
false,
|
||||
false,
|
||||
polygon.camera,
|
||||
cameraConfig?.review.alerts.required_zones || [],
|
||||
cameraConfig?.review.detections.required_zones || [],
|
||||
));
|
||||
|
||||
const {
|
||||
alertQueries: renameAlertQueries,
|
||||
detectionQueries: renameDetectionQueries,
|
||||
} = reviewQueries(
|
||||
polygon.name,
|
||||
false,
|
||||
false,
|
||||
polygon.camera,
|
||||
cameraConfig?.review.alerts.required_zones || [],
|
||||
cameraConfig?.review.detections.required_zones || [],
|
||||
);
|
||||
try {
|
||||
await axios.put(
|
||||
`config/set?${oldPathPrefix}${renameAlertQueries}${renameDetectionQueries}`,
|
||||
{
|
||||
requires_restart: 0,
|
||||
update_topic: `config/cameras/${polygon.camera}/zones`,
|
||||
},
|
||||
);
|
||||
|
||||
try {
|
||||
await axios.put(
|
||||
`config/set?cameras.${polygon.camera}.zones.${polygon.name}${renameAlertQueries}${renameDetectionQueries}`,
|
||||
{
|
||||
// Wait for the config to be updated
|
||||
mutatedConfig = await updateConfig();
|
||||
} catch {
|
||||
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
|
||||
position: "top-center",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// make sure new zone name is readded to review
|
||||
({ alertQueries, detectionQueries } = reviewQueries(
|
||||
zoneName,
|
||||
zoneInAlerts,
|
||||
zoneInDetections,
|
||||
polygon.camera,
|
||||
mutatedConfig?.cameras[polygon.camera]?.review.alerts
|
||||
.required_zones || [],
|
||||
mutatedConfig?.cameras[polygon.camera]?.review.detections
|
||||
.required_zones || [],
|
||||
));
|
||||
} else {
|
||||
// Profile mode: just delete the old profile zone path
|
||||
try {
|
||||
await axios.put(`config/set?${oldPathPrefix}`, {
|
||||
requires_restart: 0,
|
||||
update_topic: `config/cameras/${polygon.camera}/zones`,
|
||||
},
|
||||
);
|
||||
|
||||
// Wait for the config to be updated
|
||||
mutatedConfig = await updateConfig();
|
||||
} catch (error) {
|
||||
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
|
||||
position: "top-center",
|
||||
});
|
||||
return;
|
||||
});
|
||||
mutatedConfig = await updateConfig();
|
||||
} catch {
|
||||
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
|
||||
position: "top-center",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// make sure new zone name is readded to review
|
||||
({ alertQueries, detectionQueries } = reviewQueries(
|
||||
zoneName,
|
||||
zoneInAlerts,
|
||||
zoneInDetections,
|
||||
polygon.camera,
|
||||
mutatedConfig?.cameras[polygon.camera]?.review.alerts
|
||||
.required_zones || [],
|
||||
mutatedConfig?.cameras[polygon.camera]?.review.detections
|
||||
.required_zones || [],
|
||||
));
|
||||
}
|
||||
|
||||
const coordinates = flattenPoints(
|
||||
@@ -405,10 +443,7 @@ export default function ZoneEditPane({
|
||||
).join(",");
|
||||
|
||||
let objectQueries = objects
|
||||
.map(
|
||||
(object) =>
|
||||
`&cameras.${polygon?.camera}.zones.${zoneName}.objects=${object}`,
|
||||
)
|
||||
.map((object) => `&${pathPrefix}.objects=${object}`)
|
||||
.join("");
|
||||
|
||||
const same_objects =
|
||||
@@ -419,55 +454,55 @@ export default function ZoneEditPane({
|
||||
|
||||
// deleting objects
|
||||
if (!objectQueries && !same_objects && !renamingZone) {
|
||||
objectQueries = `&cameras.${polygon?.camera}.zones.${zoneName}.objects`;
|
||||
objectQueries = `&${pathPrefix}.objects`;
|
||||
}
|
||||
|
||||
let inertiaQuery = "";
|
||||
if (inertia) {
|
||||
inertiaQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.inertia=${inertia}`;
|
||||
inertiaQuery = `&${pathPrefix}.inertia=${inertia}`;
|
||||
}
|
||||
|
||||
let loiteringTimeQuery = "";
|
||||
if (loitering_time >= 0) {
|
||||
loiteringTimeQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.loitering_time=${loitering_time}`;
|
||||
loiteringTimeQuery = `&${pathPrefix}.loitering_time=${loitering_time}`;
|
||||
}
|
||||
|
||||
let distancesQuery = "";
|
||||
const distances = [lineA, lineB, lineC, lineD].filter(Boolean).join(",");
|
||||
if (speedEstimation) {
|
||||
distancesQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.distances=${distances}`;
|
||||
distancesQuery = `&${pathPrefix}.distances=${distances}`;
|
||||
} else {
|
||||
if (distances != "") {
|
||||
distancesQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.distances`;
|
||||
distancesQuery = `&${pathPrefix}.distances`;
|
||||
}
|
||||
}
|
||||
|
||||
let speedThresholdQuery = "";
|
||||
if (speed_threshold >= 0 && speedEstimation) {
|
||||
speedThresholdQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.speed_threshold=${speed_threshold}`;
|
||||
speedThresholdQuery = `&${pathPrefix}.speed_threshold=${speed_threshold}`;
|
||||
} else {
|
||||
if (
|
||||
polygon?.camera &&
|
||||
polygon?.name &&
|
||||
config?.cameras[polygon.camera]?.zones[polygon.name]?.speed_threshold
|
||||
) {
|
||||
speedThresholdQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.speed_threshold`;
|
||||
if (resolvedZoneData?.speed_threshold) {
|
||||
speedThresholdQuery = `&${pathPrefix}.speed_threshold`;
|
||||
}
|
||||
}
|
||||
|
||||
let friendlyNameQuery = "";
|
||||
if (friendly_name && friendly_name !== zoneName) {
|
||||
friendlyNameQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.friendly_name=${encodeURIComponent(friendly_name)}`;
|
||||
friendlyNameQuery = `&${pathPrefix}.friendly_name=${encodeURIComponent(friendly_name)}`;
|
||||
}
|
||||
|
||||
const enabledQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.enabled=${enabled ? "True" : "False"}`;
|
||||
const enabledQuery = `&${pathPrefix}.enabled=${enabled ? "True" : "False"}`;
|
||||
|
||||
const updateTopic = editingProfile
|
||||
? undefined
|
||||
: `config/cameras/${polygon.camera}/zones`;
|
||||
|
||||
axios
|
||||
.put(
|
||||
`config/set?cameras.${polygon?.camera}.zones.${zoneName}.coordinates=${coordinates}${enabledQuery}${inertiaQuery}${loiteringTimeQuery}${speedThresholdQuery}${distancesQuery}${objectQueries}${friendlyNameQuery}${alertQueries}${detectionQueries}`,
|
||||
`config/set?${pathPrefix}.coordinates=${coordinates}${enabledQuery}${inertiaQuery}${loiteringTimeQuery}${speedThresholdQuery}${distancesQuery}${objectQueries}${friendlyNameQuery}${alertQueries}${detectionQueries}`,
|
||||
{
|
||||
requires_restart: 0,
|
||||
update_topic: `config/cameras/${polygon.camera}/zones`,
|
||||
update_topic: updateTopic,
|
||||
},
|
||||
)
|
||||
.then((res) => {
|
||||
@@ -481,8 +516,10 @@ export default function ZoneEditPane({
|
||||
},
|
||||
);
|
||||
updateConfig();
|
||||
// Publish the enabled state through websocket
|
||||
sendZoneState(enabled ? "ON" : "OFF");
|
||||
// Only publish WS state for base config (not profiles)
|
||||
if (!editingProfile) {
|
||||
sendZoneState(enabled ? "ON" : "OFF");
|
||||
}
|
||||
} else {
|
||||
toast.error(
|
||||
t("toast.save.error.title", {
|
||||
@@ -524,6 +561,8 @@ export default function ZoneEditPane({
|
||||
cameraConfig,
|
||||
t,
|
||||
sendZoneState,
|
||||
editingProfile,
|
||||
resolvedZoneData,
|
||||
],
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user