mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-09-28 02:28:59 +03: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
@@ -0,0 +1,37 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const FIELD_SIZE_CLASS_MAP = {
|
||||
xs: "max-w-xs",
|
||||
sm: "max-w-sm",
|
||||
md: "max-w-md",
|
||||
lg: "max-w-2xl",
|
||||
full: "max-w-full",
|
||||
} as const;
|
||||
|
||||
export type FieldSizeOption = keyof typeof FIELD_SIZE_CLASS_MAP;
|
||||
|
||||
type FieldSizingOptions = {
|
||||
size?: FieldSizeOption;
|
||||
maxWidthClassName?: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function getSizedFieldClassName(
|
||||
options: unknown,
|
||||
defaultSize: FieldSizeOption = "lg",
|
||||
) {
|
||||
const sizingOptions =
|
||||
typeof options === "object" && options !== null
|
||||
? (options as FieldSizingOptions)
|
||||
: undefined;
|
||||
|
||||
const sizeClass =
|
||||
FIELD_SIZE_CLASS_MAP[sizingOptions?.size ?? defaultSize] ??
|
||||
FIELD_SIZE_CLASS_MAP[defaultSize];
|
||||
|
||||
return cn(
|
||||
"w-full",
|
||||
sizingOptions?.maxWidthClassName ?? sizeClass,
|
||||
sizingOptions?.className,
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
/**
|
||||
* Shared i18n utilities for config form templates and fields.
|
||||
*
|
||||
* These functions handle translation key path building and label normalization
|
||||
* for RJSF form fields.
|
||||
*/
|
||||
|
||||
import type { ConfigFormContext } from "@/types/configForm";
|
||||
|
||||
const isRecord = (value: unknown): value is Record<string, unknown> =>
|
||||
typeof value === "object" && value !== null;
|
||||
|
||||
const resolveDetectorType = (
|
||||
detectorConfig: unknown,
|
||||
detectorKey?: string,
|
||||
): string | undefined => {
|
||||
if (!detectorKey || !isRecord(detectorConfig)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const entry = detectorConfig[detectorKey];
|
||||
if (!isRecord(entry)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const typeValue = entry.type;
|
||||
return typeof typeValue === "string" && typeValue.length > 0
|
||||
? typeValue
|
||||
: undefined;
|
||||
};
|
||||
|
||||
const resolveDetectorTypeFromContext = (
|
||||
formContext: ConfigFormContext | undefined,
|
||||
detectorKey?: string,
|
||||
): string | undefined => {
|
||||
const formData = formContext?.formData;
|
||||
if (!detectorKey || !isRecord(formData)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const detectorConfig = isRecord(formData.detectors)
|
||||
? formData.detectors
|
||||
: formData;
|
||||
|
||||
return resolveDetectorType(detectorConfig, detectorKey);
|
||||
};
|
||||
|
||||
/**
|
||||
* Build the i18n translation key path for nested fields using the field path
|
||||
* provided by RJSF. This avoids ambiguity with underscores in field names and
|
||||
* normalizes dynamic segments like filter object names or detector names.
|
||||
*
|
||||
* @param segments Array of path segments (strings and/or numbers)
|
||||
* @param sectionI18nPrefix Optional section prefix for specialized sections
|
||||
* @param formContext Optional form context for resolving detector types
|
||||
* @returns Normalized translation key path as a dot-separated string
|
||||
*
|
||||
* @example
|
||||
* buildTranslationPath(["filters", "person", "threshold"]) => "filters.threshold"
|
||||
* buildTranslationPath(["detectors", "ov1", "type"]) => "detectors.openvino.type"
|
||||
* buildTranslationPath(["ov1", "type"], "detectors") => "openvino.type"
|
||||
*/
|
||||
export function buildTranslationPath(
|
||||
segments: Array<string | number>,
|
||||
sectionI18nPrefix?: string,
|
||||
formContext?: ConfigFormContext,
|
||||
): string {
|
||||
// Filter out numeric indices to get string segments only
|
||||
const stringSegments = segments.filter(
|
||||
(segment): segment is string => typeof segment === "string",
|
||||
);
|
||||
|
||||
// Handle filters section - skip the dynamic filter object name
|
||||
// Example: filters.person.threshold -> filters.threshold
|
||||
const filtersIndex = stringSegments.indexOf("filters");
|
||||
if (filtersIndex !== -1 && stringSegments.length > filtersIndex + 2) {
|
||||
const normalized = [
|
||||
...stringSegments.slice(0, filtersIndex + 1),
|
||||
...stringSegments.slice(filtersIndex + 2),
|
||||
];
|
||||
return normalized.join(".");
|
||||
}
|
||||
|
||||
// Handle detectors section - resolve the detector type when available
|
||||
// Example: detectors.ov1.type -> detectors.openvino.type
|
||||
const detectorsIndex = stringSegments.indexOf("detectors");
|
||||
if (detectorsIndex !== -1 && stringSegments.length > detectorsIndex + 2) {
|
||||
const detectorKey = stringSegments[detectorsIndex + 1];
|
||||
const detectorType = resolveDetectorTypeFromContext(
|
||||
formContext,
|
||||
detectorKey,
|
||||
);
|
||||
if (detectorType) {
|
||||
const normalized = [
|
||||
...stringSegments.slice(0, detectorsIndex + 1),
|
||||
detectorType,
|
||||
...stringSegments.slice(detectorsIndex + 2),
|
||||
];
|
||||
return normalized.join(".");
|
||||
}
|
||||
|
||||
const normalized = [
|
||||
...stringSegments.slice(0, detectorsIndex + 1),
|
||||
...stringSegments.slice(detectorsIndex + 2),
|
||||
];
|
||||
return normalized.join(".");
|
||||
}
|
||||
|
||||
// Handle specialized sections like detectors where the first segment is dynamic
|
||||
// Example: (sectionI18nPrefix="detectors") "ov1.type" -> "openvino.type"
|
||||
if (sectionI18nPrefix === "detectors" && stringSegments.length > 1) {
|
||||
const detectorKey = stringSegments[0];
|
||||
const detectorType = resolveDetectorTypeFromContext(
|
||||
formContext,
|
||||
detectorKey,
|
||||
);
|
||||
if (detectorType) {
|
||||
return [detectorType, ...stringSegments.slice(1)].join(".");
|
||||
}
|
||||
|
||||
return stringSegments.slice(1).join(".");
|
||||
}
|
||||
|
||||
return stringSegments.join(".");
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the filter object label from a path containing "filters" segment.
|
||||
* Returns the segment immediately after "filters".
|
||||
*
|
||||
* @param pathSegments Array of path segments
|
||||
* @returns The filter object label or undefined if not found
|
||||
*
|
||||
* @example
|
||||
* getFilterObjectLabel(["filters", "person", "threshold"]) => "person"
|
||||
* getFilterObjectLabel(["detect", "enabled"]) => undefined
|
||||
*/
|
||||
export function getFilterObjectLabel(
|
||||
pathSegments: Array<string | number>,
|
||||
): string | undefined {
|
||||
const filtersIndex = pathSegments.indexOf("filters");
|
||||
if (filtersIndex === -1 || pathSegments.length <= filtersIndex + 1) {
|
||||
return undefined;
|
||||
}
|
||||
const objectLabel = pathSegments[filtersIndex + 1];
|
||||
return typeof objectLabel === "string" && objectLabel.length > 0
|
||||
? objectLabel
|
||||
: undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert snake_case string to Title Case with spaces.
|
||||
* Useful for generating human-readable labels from schema property names.
|
||||
*
|
||||
* @param value The snake_case string to convert
|
||||
* @returns Title Case string
|
||||
*
|
||||
* @example
|
||||
* humanizeKey("detect_fps") => "Detect Fps"
|
||||
* humanizeKey("min_initialized") => "Min Initialized"
|
||||
*/
|
||||
export function humanizeKey(value: string): string {
|
||||
return value
|
||||
.replace(/_/g, " ")
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract domain name from an i18n namespace string.
|
||||
* Handles config/* namespace format by stripping the prefix.
|
||||
*
|
||||
* @param ns The i18n namespace (e.g., "config/audio", "config/global")
|
||||
* @returns The domain portion (e.g., "audio", "global") or empty string
|
||||
*
|
||||
* @example
|
||||
* getDomainFromNamespace("config/audio") => "audio"
|
||||
* getDomainFromNamespace("common") => ""
|
||||
*/
|
||||
export function getDomainFromNamespace(ns?: string): string {
|
||||
if (!ns || !ns.startsWith("config/")) return "";
|
||||
return ns.replace("config/", "");
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Config form theme utilities
|
||||
*/
|
||||
|
||||
export {
|
||||
buildTranslationPath,
|
||||
getFilterObjectLabel,
|
||||
humanizeKey,
|
||||
getDomainFromNamespace,
|
||||
} from "./i18n";
|
||||
|
||||
export { getOverrideAtPath, hasOverrideAtPath } from "./overrides";
|
||||
export {
|
||||
deepNormalizeValue,
|
||||
normalizeFieldValue,
|
||||
isSubtreeModified,
|
||||
} from "./overrides";
|
||||
export { getSizedFieldClassName } from "./fieldSizing";
|
||||
@@ -0,0 +1,128 @@
|
||||
import get from "lodash/get";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import { isJsonObject } from "@/lib/utils";
|
||||
import type { JsonValue } from "@/types/configForm";
|
||||
|
||||
export const getOverrideAtPath = (
|
||||
overrides: JsonValue | undefined,
|
||||
path: Array<string | number>,
|
||||
) => {
|
||||
if (overrides === undefined || overrides === null) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (isJsonObject(overrides) || Array.isArray(overrides)) {
|
||||
return get(overrides, path);
|
||||
}
|
||||
|
||||
return path.length === 0 ? overrides : undefined;
|
||||
};
|
||||
|
||||
export const normalizeOverridePath = (
|
||||
path: Array<string | number>,
|
||||
data: JsonValue | undefined,
|
||||
) => {
|
||||
if (data === undefined || data === null) {
|
||||
return path;
|
||||
}
|
||||
|
||||
const normalized: Array<string | number> = [];
|
||||
let cursor: JsonValue | undefined = data;
|
||||
|
||||
for (const segment of path) {
|
||||
if (typeof segment === "number") {
|
||||
if (Array.isArray(cursor)) {
|
||||
normalized.push(segment);
|
||||
cursor = cursor[segment] as JsonValue | undefined;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
normalized.push(segment);
|
||||
|
||||
if (isJsonObject(cursor) || Array.isArray(cursor)) {
|
||||
cursor = (cursor as Record<string, JsonValue>)[segment];
|
||||
} else {
|
||||
cursor = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
return normalized;
|
||||
};
|
||||
|
||||
export const hasOverrideAtPath = (
|
||||
overrides: JsonValue | undefined,
|
||||
path: Array<string | number>,
|
||||
contextData?: JsonValue,
|
||||
) => {
|
||||
const normalizedPath = contextData
|
||||
? normalizeOverridePath(path, contextData)
|
||||
: path;
|
||||
const value = getOverrideAtPath(overrides, normalizedPath);
|
||||
if (value !== undefined) {
|
||||
return true;
|
||||
}
|
||||
const shouldFallback =
|
||||
normalizedPath.length !== path.length ||
|
||||
normalizedPath.some((segment, index) => segment !== path[index]);
|
||||
if (!shouldFallback) {
|
||||
return false;
|
||||
}
|
||||
return getOverrideAtPath(overrides, path) !== undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* Deep normalization for form data comparison. Strips null, undefined,
|
||||
* and empty-string values from objects and arrays so that RJSF-injected
|
||||
* schema defaults (e.g., `mask: null`) don't cause false positives
|
||||
* against a baseline that lacks those keys.
|
||||
*/
|
||||
export const deepNormalizeValue = (value: unknown): unknown => {
|
||||
if (value === null || value === undefined || value === "") return undefined;
|
||||
if (Array.isArray(value)) return value.map(deepNormalizeValue);
|
||||
if (typeof value === "object" && value !== null) {
|
||||
const result: Record<string, unknown> = {};
|
||||
for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
|
||||
const normalized = deepNormalizeValue(v);
|
||||
if (normalized !== undefined) {
|
||||
result[k] = normalized;
|
||||
}
|
||||
}
|
||||
return Object.keys(result).length > 0 ? result : undefined;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
/**
|
||||
* Shallow normalization for individual field values.
|
||||
* Treats null and empty-string as equivalent to undefined.
|
||||
*/
|
||||
export const normalizeFieldValue = (value: unknown): unknown =>
|
||||
value === null || value === "" ? undefined : value;
|
||||
|
||||
/**
|
||||
* Check whether a subtree of form data has been modified relative to
|
||||
* the baseline. Uses deep normalization to ignore RJSF-injected null/empty
|
||||
* schema defaults.
|
||||
*
|
||||
* @param currentData - The current value at the subtree (from props.formData)
|
||||
* @param baselineData - The baseline value at the subtree (from formContext.baselineFormData)
|
||||
* @param overrides - Fallback: the overrides object from formContext
|
||||
* @param path - The full field path for the fallback override check
|
||||
* @param contextData - The full form data for normalizing the override path
|
||||
*/
|
||||
export const isSubtreeModified = (
|
||||
currentData: unknown,
|
||||
baselineData: unknown,
|
||||
overrides: JsonValue | undefined,
|
||||
path: Array<string | number>,
|
||||
contextData?: JsonValue,
|
||||
): boolean => {
|
||||
if (baselineData !== undefined || currentData !== undefined) {
|
||||
return !isEqual(
|
||||
deepNormalizeValue(currentData),
|
||||
deepNormalizeValue(baselineData),
|
||||
);
|
||||
}
|
||||
return hasOverrideAtPath(overrides, path, contextData);
|
||||
};
|
||||
Reference in New Issue
Block a user