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
2026-07-30 07:39:01 +03:00 · 2026-02-27 08:55:36 -07:00
parent eeefbf2bb5
commit e7250f24cb
206 changed files with 22200 additions and 4435 deletions
@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { ConfigSection } from "./BaseSection";
+import type { BaseSectionProps, SectionConfig } from "./BaseSection";
+import { getSectionConfig } from "@/utils/configUtil";
+
+export type ConfigSectionTemplateProps = BaseSectionProps & {
+  sectionKey: string;
+  sectionConfig?: SectionConfig;
+};
+
+export function ConfigSectionTemplate({
+  sectionKey,
+  level,
+  sectionConfig,
+  ...rest
+}: ConfigSectionTemplateProps) {
+  const defaultConfig = useMemo(
+    () => getSectionConfig(sectionKey, level),
+    [sectionKey, level],
+  );
+
+  return (
+    <ConfigSection
+      sectionPath={sectionKey}
+      defaultConfig={defaultConfig}
+      level={level}
+      sectionConfig={sectionConfig ?? defaultConfig}
+      {...rest}
+    />
+  );
+}
+
+export default ConfigSectionTemplate;
@@ -0,0 +1,14 @@
+// Config Form Section Components
+// Reusable components for both global and camera-level settings
+
+export {
+  ConfigSection,
+  type BaseSectionProps,
+  type SectionConfig,
+  type CreateSectionOptions,
+  type ConfigSectionProps,
+} from "./BaseSection";
+export {
+  ConfigSectionTemplate,
+  type ConfigSectionTemplateProps,
+} from "./ConfigSectionTemplate";
@@ -0,0 +1,203 @@
+/**
+ * Special case handling for config sections with schema/default issues.
+ *
+ * Some sections have schema patterns that cause false "Modified" indicators
+ * when navigating to them due to how defaults are applied. This utility
+ * centralizes the logic for detecting and handling these cases.
+ */
+
+import { RJSFSchema } from "@rjsf/utils";
+import { applySchemaDefaults } from "@/lib/config-schema";
+import { isJsonObject } from "@/lib/utils";
+import { JsonObject, JsonValue } from "@/types/configForm";
+
+/**
+ * Sections that require special handling at the global level.
+ * Add new section paths here as needed.
+ */
+const SPECIAL_CASE_SECTIONS = ["motion", "detectors"] as const;
+
+/**
+ * Check if a section requires special case handling.
+ */
+export function isSpecialCaseSection(
+  sectionPath: string,
+  level: string,
+): boolean {
+  return (
+    level === "global" &&
+    SPECIAL_CASE_SECTIONS.includes(
+      sectionPath as (typeof SPECIAL_CASE_SECTIONS)[number],
+    )
+  );
+}
+
+/**
+ * Modify schema for sections that need defaults stripped or other modifications.
+ *
+ * - detectors: Strip the "default" field to prevent RJSF from merging the
+ *   default {"cpu": {"type": "cpu"}} with stored detector keys.
+ */
+export function modifySchemaForSection(
+  sectionPath: string,
+  level: string,
+  schema: RJSFSchema | undefined,
+): RJSFSchema | undefined {
+  if (!schema || !isSpecialCaseSection(sectionPath, level)) {
+    return schema;
+  }
+
+  // detectors: Remove default to prevent merging with stored keys
+  if (sectionPath === "detectors" && "default" in schema) {
+    const { default: _, ...schemaWithoutDefault } = schema;
+    return schemaWithoutDefault;
+  }
+
+  return schema;
+}
+
+/**
+ * Get effective defaults for sections with special schema patterns.
+ *
+ * - motion: Has anyOf schema with [null, MotionConfig]. When stored value is
+ *   null, derive defaults from the non-null anyOf branch to avoid showing
+ *   changes when navigating to the page.
+ * - detectors: Return empty object since the schema default would add unwanted
+ *   keys to the stored configuration.
+ */
+export function getEffectiveDefaultsForSection(
+  sectionPath: string,
+  level: string,
+  schema: RJSFSchema | undefined,
+  schemaDefaults: unknown,
+): unknown {
+  if (!isSpecialCaseSection(sectionPath, level) || !schema) {
+    return schemaDefaults;
+  }
+
+  // motion: Derive defaults from non-null anyOf branch
+  if (sectionPath === "motion") {
+    const anyOfSchemas = (schema as { anyOf?: unknown[] }).anyOf;
+    if (!anyOfSchemas || !Array.isArray(anyOfSchemas)) {
+      return schemaDefaults;
+    }
+
+    // Find the non-null motion config schema
+    const motionSchema = anyOfSchemas.find(
+      (s) =>
+        typeof s === "object" &&
+        s !== null &&
+        (s as { type?: string }).type !== "null",
+    );
+
+    if (!motionSchema) {
+      return schemaDefaults;
+    }
+
+    return applySchemaDefaults(motionSchema as RJSFSchema, {});
+  }
+
+  // detectors: Return empty object to avoid adding default keys
+  if (sectionPath === "detectors") {
+    return {};
+  }
+
+  return schemaDefaults;
+}
+
+/**
+ * Sanitize overrides payloads for section-specific quirks.
+ */
+export function sanitizeOverridesForSection(
+  sectionPath: string,
+  level: string,
+  overrides: unknown,
+): unknown {
+  if (!overrides || !isJsonObject(overrides)) {
+    return overrides;
+  }
+
+  if (sectionPath === "ffmpeg" && level === "camera") {
+    const overridesObj = overrides as JsonObject;
+    const inputs = overridesObj.inputs;
+    if (!Array.isArray(inputs)) {
+      return overrides;
+    }
+
+    const cleanedInputs = inputs.map((input) => {
+      if (!isJsonObject(input)) {
+        return input;
+      }
+
+      const cleanedInput = { ...input } as JsonObject;
+      ["global_args", "hwaccel_args", "input_args"].forEach((key) => {
+        const value = cleanedInput[key];
+        if (Array.isArray(value) && value.length === 0) {
+          delete cleanedInput[key];
+        }
+      });
+
+      return cleanedInput;
+    });
+
+    return {
+      ...overridesObj,
+      inputs: cleanedInputs,
+    };
+  }
+
+  const flattenRecordWithDots = (
+    value: JsonObject,
+    prefix: string = "",
+  ): JsonObject => {
+    const flattened: JsonObject = {};
+    Object.entries(value).forEach(([key, entry]) => {
+      const nextKey = prefix ? `${prefix}.${key}` : key;
+      if (isJsonObject(entry)) {
+        Object.assign(flattened, flattenRecordWithDots(entry, nextKey));
+      } else {
+        flattened[nextKey] = entry as JsonValue;
+      }
+    });
+    return flattened;
+  };
+
+  // detectors: Strip readonly model fields that are generated on startup
+  // and should never be persisted back to the config file.
+  if (sectionPath === "detectors") {
+    const overridesObj = overrides as JsonObject;
+    const cleaned: JsonObject = {};
+
+    Object.entries(overridesObj).forEach(([key, value]) => {
+      if (!isJsonObject(value)) {
+        cleaned[key] = value;
+        return;
+      }
+
+      const cleanedValue = { ...value } as JsonObject;
+      delete cleanedValue.model;
+      delete cleanedValue.model_path;
+      cleaned[key] = cleanedValue;
+    });
+
+    return cleaned;
+  }
+
+  if (sectionPath === "logger") {
+    const overridesObj = overrides as JsonObject;
+    const logs = overridesObj.logs;
+    if (isJsonObject(logs)) {
+      return {
+        ...overridesObj,
+        logs: flattenRecordWithDots(logs),
+      };
+    }
+  }
+
+  if (sectionPath === "environment_vars") {
+    const overridesObj = overrides as JsonObject;
+    return flattenRecordWithDots(overridesObj);
+  }
+
+  return overrides;
+}