Miscellaneous fixes (#23648)

* sort preview cameras in history by ui order

* sort cameras by UI order in various components for consistent display

* add no recordings faq

* fix link

* recording cache faq

* add link

* improve anchor naming in object detector docs

rather than #configuration-1, #configuration-2, etc

* use yaml instead of json for object detector docs

* fix anchor

web/src/components/overlay/CreateRoleDialog.tsx

@@ -53,9 +53,13 @@ export default function CreateRoleDialog({
   const { t } = useTranslation(["views/settings"]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const cameras = Object.keys(config.cameras || {}).filter(
-    (name) => !isReplayCamera(name),
-  );
+  const cameras = Object.keys(config.cameras || {})
+    .filter((name) => !isReplayCamera(name))
+    .sort(
+      (a, b) =>
+        (config.cameras[a]?.ui?.order ?? 0) -
+        (config.cameras[b]?.ui?.order ?? 0),
+    );
 
   const existingRoles = Object.keys(config.auth?.roles || {});
 

web/src/components/overlay/EditRoleCamerasDialog.tsx

@@ -47,9 +47,13 @@ export default function EditRoleCamerasDialog({
   const { t } = useTranslation(["views/settings"]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const cameras = Object.keys(config.cameras || {}).filter(
-    (name) => !isReplayCamera(name),
-  );
+  const cameras = Object.keys(config.cameras || {})
+    .filter((name) => !isReplayCamera(name))
+    .sort(
+      (a, b) =>
+        (config.cameras[a]?.ui?.order ?? 0) -
+        (config.cameras[b]?.ui?.order ?? 0),
+    );
 
   const formSchema = z.object({
     cameras: z

web/src/components/overlay/detail/ObjectPathPlotter.tsx

@@ -39,7 +39,9 @@ export default function ObjectPathPlotter() {
 
   const cameraNames = useMemo(() => {
     if (!config) return [];
-    return Object.keys(config.cameras).filter((name) => !isReplayCamera(name));
+    return Object.keys(config.cameras)
+      .filter((name) => !isReplayCamera(name))
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
   }, [config]);
 
   useEffect(() => {