mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-04-19 23:08:08 +02:00
Full UI configuration (#22151)
* use react-jsonschema-form for UI config * don't use properties wrapper when generating config i18n json * configure for full i18n support * section fields * add descriptions to all fields for i18n * motion i18n * fix nullable fields * sanitize internal fields * add switches widgets and use friendly names * fix nullable schema entries * ensure update_topic is added to api calls this needs further backend implementation to work correctly * add global sections, camera config overrides, and reset button * i18n * add reset logic to global config view * tweaks * fix sections and live validation * fix validation for schema objects that can be null * generic and custom per-field validation * improve generic error validation messages * remove show advanced fields switch * tweaks * use shadcn theme * fix array field template * i18n tweaks * remove collapsible around root section * deep merge schema for advanced fields * add array field item template and fix ffmpeg section * add missing i18n keys * tweaks * comment out api call for testing * add config groups as a separate i18n namespace * add descriptions to all pydantic fields * make titles more concise * new titles as i18n * update i18n config generation script to use json schema * tweaks * tweaks * rebase * clean up * form tweaks * add wildcards and fix object filter fields * add field template for additionalproperties schema objects * improve typing * add section description from schema and clarify global vs camera level descriptions * separate and consolidate global and camera i18n namespaces * clean up now obsolete namespaces * tweaks * refactor sections and overrides * add ability to render components before and after fields * fix titles * chore(sections): remove legacy single-section components replaced by template * refactor configs to use individual files with a template * fix review description * apply hidden fields after ui schema * move util * remove unused i18n * clean up error messages * fix fast refresh * add custom validation and use it for ffmpeg input roles * update nav tree * remove unused * re-add override and modified indicators * mark pending changes and add confirmation dialog for resets * fix red unsaved dot * tweaks * add docs links, readonly keys, and restart required per field * add special case and comments for global motion section * add section form special cases * combine review sections * tweaks * add audio labels endpoint * add audio label switches and input to filter list * fix type * remove key from config when resetting to default/global * don't show description for new key/val fields * tweaks * spacing tweaks * add activity indicator and scrollbar tweaks * add docs to filter fields * wording changes * fix global ffmpeg section * add review classification zones to review form * add backend endpoint and frontend widget for ffmpeg presets and manual args * improve wording * hide descriptions for additional properties arrays * add warning log about incorrectly nested model config * spacing and language tweaks * fix i18n keys * networking section docs and description * small wording tweaks * add layout grid field * refactor with shared utilities * field order * add individual detectors to schema add detector titles and descriptions (docstrings in pydantic are used for descriptions) and add i18n keys to globals * clean up detectors section and i18n * don't save model config back to yaml when saving detectors * add full detectors config to api model dump works around the way we use detector plugins so we can have the full detector config for the frontend * add restart button to toast when restart is required * add ui option to remove inner cards * fix buttons * section tweaks * don't zoom into text on mobile * make buttons sticky at bottom of sections * small tweaks * highlight label of changed fields * add null to enum list when unwrapping * refactor to shared utils and add save all button * add undo all button * add RJSF to dictionary * consolidate utils * preserve form data when changing cameras * add mono fonts * add popover to show what fields will be saved * fix mobile menu not re-rendering with unsaved dots * tweaks * fix logger and env vars config section saving use escaped periods in keys to retain them in the config file (eg "frigate.embeddings") * add timezone widget * role map field with validation * fix validation for model section * add another hidden field * add footer message for required restart * use rjsf for notifications view * fix config saving * add replace rules field * default column layout and add field sizing * clean up field template * refactor profile settings to match rjsf forms * tweaks * refactor frigate+ view and make tweaks to sections * show frigate+ model info in detection model settings when using a frigate+ model * update restartRequired for all fields * fix restart fields * tweaks and add ability enable disabled cameras more backend changes required * require restart when enabling camera that is disabled in config * disable save when form is invalid * refactor ffmpeg section for readability * change label * clean up camera inputs fields * misc tweaks to ffmpeg section - add raw paths endpoint to ensure credentials get saved - restart required tooltip * maintenance settings tweaks * don't mutate with lodash * fix description re-rendering for nullable object fields * hide reindex field * update rjsf * add frigate+ description to settings pane * disable save all when any section is invalid * show translated field name in validation error pane * clean up * remove unused * fix genai merge * fix genai
This commit is contained in:
Josh Hawkins
GitHub
279
web/src/hooks/use-config-override.ts
Normal file
279
web/src/hooks/use-config-override.ts
Normal file
@@ -0,0 +1,279 @@
|
||||
// Hook to detect when camera config overrides global defaults
|
||||
import { useMemo } from "react";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import get from "lodash/get";
|
||||
import set from "lodash/set";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { JsonObject, JsonValue } from "@/types/configForm";
|
||||
import { isJsonObject } from "@/lib/utils";
|
||||
|
||||
const INTERNAL_FIELD_SUFFIXES = ["enabled_in_config", "raw_mask"];
|
||||
|
||||
function stripInternalFields(value: JsonValue): JsonValue {
|
||||
if (Array.isArray(value)) {
|
||||
return value.map(stripInternalFields);
|
||||
}
|
||||
|
||||
if (isJsonObject(value)) {
|
||||
const obj = value;
|
||||
const cleaned: JsonObject = {};
|
||||
for (const [key, val] of Object.entries(obj)) {
|
||||
if (INTERNAL_FIELD_SUFFIXES.some((suffix) => key.endsWith(suffix))) {
|
||||
continue;
|
||||
}
|
||||
cleaned[key] = stripInternalFields(val as JsonValue);
|
||||
}
|
||||
return cleaned;
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
export function normalizeConfigValue(value: unknown): JsonValue {
|
||||
return stripInternalFields(value as JsonValue);
|
||||
}
|
||||
|
||||
export interface OverrideStatus {
|
||||
/** Whether the field is overridden from global */
|
||||
isOverridden: boolean;
|
||||
/** The global default value */
|
||||
globalValue: unknown;
|
||||
/** The camera-specific value */
|
||||
cameraValue: unknown;
|
||||
}
|
||||
|
||||
export interface UseConfigOverrideOptions {
|
||||
/** Full Frigate config */
|
||||
config: FrigateConfig | undefined;
|
||||
/** Camera name for per-camera settings */
|
||||
cameraName?: string;
|
||||
/** Config section path (e.g., "detect", "record.events") */
|
||||
sectionPath: string;
|
||||
/** Optional list of field paths to compare for overrides */
|
||||
compareFields?: string[];
|
||||
}
|
||||
|
||||
function pickFields(value: unknown, fields: string[]): JsonObject {
|
||||
if (!fields || fields.length === 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const result: JsonObject = {};
|
||||
fields.forEach((path) => {
|
||||
if (!path) return;
|
||||
const fieldValue = get(value as JsonObject, path);
|
||||
if (fieldValue !== undefined) {
|
||||
set(result, path, fieldValue);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to detect config overrides between global and camera level
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* const { isOverridden, getFieldOverride } = useConfigOverride({
|
||||
* config,
|
||||
* cameraName: "front_door",
|
||||
* sectionPath: "detect"
|
||||
* });
|
||||
*
|
||||
* // Check if entire section is overridden
|
||||
* if (isOverridden) {
|
||||
* // Show override indicator
|
||||
* }
|
||||
*
|
||||
* // Check specific field
|
||||
* const fpsOverride = getFieldOverride("fps");
|
||||
* ```
|
||||
*/
|
||||
export function useConfigOverride({
|
||||
config,
|
||||
cameraName,
|
||||
sectionPath,
|
||||
compareFields,
|
||||
}: UseConfigOverrideOptions) {
|
||||
return useMemo(() => {
|
||||
if (!config) {
|
||||
return {
|
||||
isOverridden: false,
|
||||
globalValue: undefined,
|
||||
cameraValue: undefined,
|
||||
getFieldOverride: () => ({
|
||||
isOverridden: false,
|
||||
globalValue: undefined,
|
||||
cameraValue: undefined,
|
||||
}),
|
||||
resetToGlobal: () => undefined,
|
||||
};
|
||||
}
|
||||
|
||||
// Get global value for the section
|
||||
const globalValue = get(config, sectionPath);
|
||||
|
||||
// If no camera specified, return global value info
|
||||
if (!cameraName) {
|
||||
return {
|
||||
isOverridden: false,
|
||||
globalValue,
|
||||
cameraValue: globalValue,
|
||||
getFieldOverride: (fieldPath: string): OverrideStatus => ({
|
||||
isOverridden: false,
|
||||
globalValue: get(globalValue, fieldPath),
|
||||
cameraValue: get(globalValue, fieldPath),
|
||||
}),
|
||||
resetToGlobal: () => globalValue,
|
||||
};
|
||||
}
|
||||
|
||||
// Get camera-specific value
|
||||
const cameraConfig = config.cameras?.[cameraName];
|
||||
if (!cameraConfig) {
|
||||
return {
|
||||
isOverridden: false,
|
||||
globalValue,
|
||||
cameraValue: undefined,
|
||||
getFieldOverride: () => ({
|
||||
isOverridden: false,
|
||||
globalValue: undefined,
|
||||
cameraValue: undefined,
|
||||
}),
|
||||
resetToGlobal: () => globalValue,
|
||||
};
|
||||
}
|
||||
|
||||
const cameraValue = get(cameraConfig, sectionPath);
|
||||
|
||||
const normalizedGlobalValue = normalizeConfigValue(globalValue);
|
||||
const normalizedCameraValue = normalizeConfigValue(cameraValue);
|
||||
|
||||
const comparisonGlobal = compareFields
|
||||
? pickFields(normalizedGlobalValue, compareFields)
|
||||
: normalizedGlobalValue;
|
||||
const comparisonCamera = compareFields
|
||||
? pickFields(normalizedCameraValue, compareFields)
|
||||
: normalizedCameraValue;
|
||||
|
||||
// Check if the entire section is overridden
|
||||
const isOverridden = compareFields
|
||||
? compareFields.length > 0 && !isEqual(comparisonGlobal, comparisonCamera)
|
||||
: !isEqual(comparisonGlobal, comparisonCamera);
|
||||
|
||||
/**
|
||||
* Get override status for a specific field within the section
|
||||
*/
|
||||
const getFieldOverride = (fieldPath: string): OverrideStatus => {
|
||||
const globalFieldValue = get(normalizedGlobalValue, fieldPath);
|
||||
const cameraFieldValue = get(normalizedCameraValue, fieldPath);
|
||||
|
||||
return {
|
||||
isOverridden: !isEqual(globalFieldValue, cameraFieldValue),
|
||||
globalValue: globalFieldValue,
|
||||
cameraValue: cameraFieldValue,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the global value to reset camera override
|
||||
*/
|
||||
const resetToGlobal = (fieldPath?: string) => {
|
||||
if (fieldPath) {
|
||||
return get(normalizedGlobalValue, fieldPath);
|
||||
}
|
||||
return normalizedGlobalValue;
|
||||
};
|
||||
|
||||
return {
|
||||
isOverridden,
|
||||
globalValue: normalizedGlobalValue,
|
||||
cameraValue: normalizedCameraValue,
|
||||
getFieldOverride,
|
||||
resetToGlobal,
|
||||
};
|
||||
}, [config, cameraName, sectionPath, compareFields]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to get all overridden fields for a camera
|
||||
*/
|
||||
export function useAllCameraOverrides(
|
||||
config: FrigateConfig | undefined,
|
||||
cameraName: string | undefined,
|
||||
) {
|
||||
return useMemo(() => {
|
||||
if (!config || !cameraName) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const cameraConfig = config.cameras?.[cameraName];
|
||||
if (!cameraConfig) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const overriddenSections: string[] = [];
|
||||
|
||||
// Check each section that can be overridden
|
||||
const sectionsToCheck: Array<{
|
||||
key: string;
|
||||
compareFields?: string[];
|
||||
}> = [
|
||||
{ key: "detect" },
|
||||
{ key: "record" },
|
||||
{ key: "snapshots" },
|
||||
{ key: "motion" },
|
||||
{ key: "objects" },
|
||||
{ key: "review" },
|
||||
{ key: "audio" },
|
||||
{ key: "notifications" },
|
||||
{ key: "live" },
|
||||
{ key: "timestamp_style" },
|
||||
{
|
||||
key: "audio_transcription",
|
||||
compareFields: ["enabled", "live_enabled"],
|
||||
},
|
||||
{ key: "birdseye", compareFields: ["enabled", "mode"] },
|
||||
{ key: "face_recognition", compareFields: ["enabled", "min_area"] },
|
||||
{
|
||||
key: "ffmpeg",
|
||||
compareFields: [
|
||||
"path",
|
||||
"global_args",
|
||||
"hwaccel_args",
|
||||
"input_args",
|
||||
"output_args",
|
||||
"retry_interval",
|
||||
"apple_compatibility",
|
||||
"gpu",
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "lpr",
|
||||
compareFields: ["enabled", "min_area", "enhancement"],
|
||||
},
|
||||
];
|
||||
|
||||
for (const { key, compareFields } of sectionsToCheck) {
|
||||
const globalValue = normalizeConfigValue(get(config, key));
|
||||
const cameraValue = normalizeConfigValue(get(cameraConfig, key));
|
||||
|
||||
const comparisonGlobal = compareFields
|
||||
? pickFields(globalValue, compareFields)
|
||||
: globalValue;
|
||||
const comparisonCamera = compareFields
|
||||
? pickFields(cameraValue, compareFields)
|
||||
: cameraValue;
|
||||
|
||||
if (
|
||||
compareFields && compareFields.length === 0
|
||||
? false
|
||||
: !isEqual(comparisonGlobal, comparisonCamera)
|
||||
) {
|
||||
overriddenSections.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
return overriddenSections;
|
||||
}, [config, cameraName]);
|
||||
}
|
||||
132
web/src/hooks/use-config-schema.ts
Normal file
132
web/src/hooks/use-config-schema.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
// Hook for efficiently working with config schemas
|
||||
// Caches resolved section schemas to avoid repeated expensive resolution
|
||||
|
||||
import { useMemo } from "react";
|
||||
import useSWR from "swr";
|
||||
import { RJSFSchema } from "@rjsf/utils";
|
||||
import { resolveAndCleanSchema } from "@/lib/config-schema";
|
||||
|
||||
// Cache for resolved section schemas - keyed by schema reference + section key
|
||||
const sectionSchemaCache = new WeakMap<RJSFSchema, Map<string, RJSFSchema>>();
|
||||
|
||||
type SchemaWithDefinitions = RJSFSchema & {
|
||||
$defs?: Record<string, RJSFSchema>;
|
||||
definitions?: Record<string, RJSFSchema>;
|
||||
properties?: Record<string, RJSFSchema>;
|
||||
};
|
||||
|
||||
const getSchemaDefinitions = (schema: RJSFSchema): Record<string, RJSFSchema> =>
|
||||
(schema as SchemaWithDefinitions).$defs ||
|
||||
(schema as SchemaWithDefinitions).definitions ||
|
||||
{};
|
||||
|
||||
/**
|
||||
* Extracts and resolves a section schema from the full config schema
|
||||
* Uses caching to avoid repeated expensive resolution
|
||||
*/
|
||||
function extractSectionSchema(
|
||||
schema: RJSFSchema,
|
||||
sectionPath: string,
|
||||
level: "global" | "camera",
|
||||
): RJSFSchema | null {
|
||||
// Create cache key
|
||||
const cacheKey = `${level}:${sectionPath}`;
|
||||
|
||||
// Check cache first (using WeakMap with schema as key for proper garbage collection)
|
||||
let schemaCache = sectionSchemaCache.get(schema);
|
||||
if (!schemaCache) {
|
||||
schemaCache = new Map<string, RJSFSchema>();
|
||||
sectionSchemaCache.set(schema, schemaCache);
|
||||
}
|
||||
|
||||
if (schemaCache.has(cacheKey)) {
|
||||
return schemaCache.get(cacheKey)!;
|
||||
}
|
||||
|
||||
const defs = getSchemaDefinitions(schema);
|
||||
const schemaObj = schema as SchemaWithDefinitions;
|
||||
|
||||
let sectionDef: RJSFSchema | null = null;
|
||||
|
||||
// For camera level, get section from CameraConfig in $defs
|
||||
if (level === "camera") {
|
||||
const cameraConfigDef = defs.CameraConfig;
|
||||
if (cameraConfigDef?.properties) {
|
||||
const props = cameraConfigDef.properties;
|
||||
const sectionProp = props[sectionPath];
|
||||
|
||||
if (sectionProp && typeof sectionProp === "object") {
|
||||
if ("$ref" in sectionProp && typeof sectionProp.$ref === "string") {
|
||||
const refPath = sectionProp.$ref
|
||||
.replace(/^#\/\$defs\//, "")
|
||||
.replace(/^#\/definitions\//, "");
|
||||
sectionDef = defs[refPath] || null;
|
||||
} else {
|
||||
sectionDef = sectionProp;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// For global level, get from root properties
|
||||
if (schemaObj.properties) {
|
||||
const props = schemaObj.properties;
|
||||
const sectionProp = props[sectionPath];
|
||||
|
||||
if (sectionProp && typeof sectionProp === "object") {
|
||||
if ("$ref" in sectionProp && typeof sectionProp.$ref === "string") {
|
||||
const refPath = sectionProp.$ref
|
||||
.replace(/^#\/\$defs\//, "")
|
||||
.replace(/^#\/definitions\//, "");
|
||||
sectionDef = defs[refPath] || null;
|
||||
} else {
|
||||
sectionDef = sectionProp;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!sectionDef) return null;
|
||||
|
||||
// Include $defs for nested references and resolve them
|
||||
const schemaWithDefs: RJSFSchema = {
|
||||
...sectionDef,
|
||||
$defs: defs,
|
||||
};
|
||||
|
||||
// Resolve all references and strip $defs from result
|
||||
const resolved = resolveAndCleanSchema(schemaWithDefs);
|
||||
|
||||
// Cache the result
|
||||
schemaCache.set(cacheKey, resolved);
|
||||
|
||||
return resolved;
|
||||
}
|
||||
|
||||
/**
|
||||
* Note: Cache is automatically cleared when schema changes since we use WeakMap
|
||||
* with the schema object as key. No manual clearing needed.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Hook to get a resolved section schema
|
||||
* Efficiently caches resolved schemas to avoid repeated expensive operations
|
||||
*/
|
||||
export function useSectionSchema(
|
||||
sectionPath: string,
|
||||
level: "global" | "camera",
|
||||
): RJSFSchema | null {
|
||||
const { data: schema } = useSWR<RJSFSchema>("config/schema.json");
|
||||
|
||||
return useMemo(() => {
|
||||
if (!schema) return null;
|
||||
return extractSectionSchema(schema, sectionPath, level);
|
||||
}, [schema, sectionPath, level]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to get the raw config schema
|
||||
*/
|
||||
export function useConfigSchema(): RJSFSchema | undefined {
|
||||
const { data: schema } = useSWR<RJSFSchema>("config/schema.json");
|
||||
return schema;
|
||||
}
|
||||
Reference in New Issue
Block a user