sort cameras by UI order in various components for consistent display

web/src/components/classification/wizard/Step2StateArea.tsx

@@ -64,7 +64,6 @@ export default function Step2StateArea({
 
     const selectedCameraNames = cameraAreas.map((ca) => ca.camera);
     return Object.entries(config.cameras)
-      .sort()
       .filter(
         ([name, cam]) =>
           cam.enabled &&
@@ -72,6 +71,7 @@ export default function Step2StateArea({
           !isReplayCamera(name) &&
           !selectedCameraNames.includes(name),
       )
+      .sort(([, a], [, b]) => a.ui.order - b.ui.order)
       .map(([name]) => ({
         name,
         displayName: resolveCameraName(config, name),

web/src/components/filter/ExportFilterGroup.tsx

@@ -29,9 +29,13 @@ export default function ExportFilterGroup({
 
   const filterValues = useMemo(
     () => ({
-      cameras: allowedCameras,
+      cameras: [...allowedCameras].sort(
+        (a, b) =>
+          (config?.cameras[a]?.ui?.order ?? 0) -
+          (config?.cameras[b]?.ui?.order ?? 0),
+      ),
     }),
-    [allowedCameras],
+    [config, allowedCameras],
   );
 
   const groups = useMemo(() => {

web/src/components/filter/SearchFilterGroup.tsx

@@ -127,12 +127,16 @@ export default function SearchFilterGroup({
 
   const filterValues = useMemo(
     () => ({
-      cameras: allowedCameras,
+      cameras: [...allowedCameras].sort(
+        (a, b) =>
+          (config?.cameras[a]?.ui?.order ?? 0) -
+          (config?.cameras[b]?.ui?.order ?? 0),
+      ),
       labels: Object.values(allLabels || {}),
       zones: Object.values(allZones || {}),
       search_type: ["thumbnail", "description"] as SearchSource[],
     }),
-    [allLabels, allZones, allowedCameras],
+    [config, allLabels, allZones, allowedCameras],
   );
 
   const availableSortTypes = useMemo(() => {

web/src/components/overlay/CreateRoleDialog.tsx

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

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(() => {

web/src/components/settings/CloneCameraDialog.tsx

@@ -96,7 +96,7 @@ export default function CloneCameraDialog({
     if (!config) return [];
     return Object.keys(config.cameras)
       .filter((c) => !isReplayCamera(c))
-      .sort();
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
   }, [config]);
 
   const formSchema = useMemo(() => {
@@ -176,7 +176,7 @@ export default function CloneCameraDialog({
     if (!config) return [];
     return Object.keys(config.cameras)
       .filter((c) => c !== sourceCamera && !isReplayCamera(c))
-      .sort();
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
   }, [config, sourceCamera]);
 
   const srcCfg = config?.cameras?.[sourceCamera];

web/src/components/ws/WsMessageFeed.tsx

@@ -169,7 +169,7 @@ export default function WsMessageFeed({
         const cam = config.cameras[name];
         return !isReplayCamera(name) && cam.enabled_in_config;
       })
-      .sort();
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
   }, [config]);
 
   const filteredMessages = useMemo(() => {

web/src/pages/Events.tsx

@@ -75,11 +75,13 @@ export default function Events() {
       return [] as string[];
     }
 
-    return Object.keys(config.cameras).filter(
+    return Object.values(config.cameras)
-      (cam) =>
+      .filter(
-        allowedCameras.includes(cam) &&
+        (conf) =>
-        config.cameras[cam]?.ui?.review !== false,
+          allowedCameras.includes(conf.name) && conf.ui?.review !== false,
-    );
+      )
+      .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order)
+      .map((conf) => conf.name);
   }, [allowedCameras, config?.cameras]);
 
   const selectedMotionSearchCamera = useMemo(() => {

web/src/pages/MotionSearch.tsx

@@ -30,9 +30,9 @@ export default function MotionSearch() {
 
   const cameras = useMemo(() => {
     if (!config?.cameras) return [];
-    return Object.keys(config.cameras).filter((cam) =>
+    return Object.keys(config.cameras)
-      allowedCameras.includes(cam),
+      .filter((cam) => allowedCameras.includes(cam))
-    );
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
   }, [config?.cameras, allowedCameras]);
 
   // Selected camera state

web/src/views/settings/CameraManagementView.tsx

@@ -208,7 +208,12 @@ export default function CameraManagementView({
             !config.cameras[camera].enabled_in_config &&
             !isReplayCamera(camera),
         )
-        .sort();
+        .sort((a, b) => {
+          const orderA = config.cameras[a].ui?.order ?? 0;
+          const orderB = config.cameras[b].ui?.order ?? 0;
+          if (orderA !== orderB) return orderA - orderB;
+          return a.localeCompare(b);
+        });
     }
     return [];
   }, [config]);
@@ -217,7 +222,12 @@ export default function CameraManagementView({
     if (config) {
       return Object.keys(config.cameras)
         .filter((camera) => !isReplayCamera(camera))
-        .sort();
+        .sort((a, b) => {
+          const orderA = config.cameras[a].ui?.order ?? 0;
+          const orderB = config.cameras[b].ui?.order ?? 0;
+          if (orderA !== orderB) return orderA - orderB;
+          return a.localeCompare(b);
+        });
     }
     return [];
   }, [config]);

web/src/views/settings/FrigatePlusSettingsView.tsx

@@ -140,6 +140,7 @@ export default function FrigatePlusSettingsView(_props: SettingsPageProps) {
                       <tbody>
                         {Object.entries(config.cameras)
                           .filter(([name]) => !isReplayCamera(name))
+                          .sort(([, a], [, b]) => a.ui.order - b.ui.order)
                           .map(([name, camera]) => (
                             <tr
                               key={name}

web/src/views/settings/ProfilesView.tsx

@@ -148,7 +148,7 @@ export default function ProfilesView({
     const data: Record<string, Record<string, string[]>> = {};
     const cameras = Object.keys(config.cameras)
       .filter((name) => !isReplayCamera(name))
-      .sort();
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
 
     for (const profile of allProfileNames) {
       data[profile] = {};
@@ -474,7 +474,11 @@ export default function ProfilesView({
             const color = getProfileColor(profile, allProfileNames);
             const isActive = activeProfile === profile;
             const cameraData = profileOverviewData[profile] ?? {};
-            const cameras = Object.keys(cameraData).sort();
+            const cameras = Object.keys(cameraData).sort(
+              (a, b) =>
+                (config?.cameras[a]?.ui?.order ?? 0) -
+                (config?.cameras[b]?.ui?.order ?? 0),
+            );
             const isExpanded = expandedProfiles.has(profile);
 
             return (

web/src/views/system/CameraMetrics.tsx

@@ -316,7 +316,9 @@ export default function CameraMetrics({
       </div>
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         {config &&
-          Object.values(config.cameras).map((camera) => {
+          Object.values(config.cameras)
+            .sort((a, b) => a.ui.order - b.ui.order)
+            .map((camera) => {
               if (camera.enabled && !isReplayCamera(camera.name)) {
                 return (
                   <Fragment key={camera.name}>
@@ -339,24 +341,22 @@ export default function CameraMetrics({
                             ] && (
                               <ConnectionQualityIndicator
                                 quality={
-                                statsHistory[statsHistory.length - 1]?.cameras[
+                                  statsHistory[statsHistory.length - 1]
-                                  camera.name
+                                    ?.cameras[camera.name]?.connection_quality
-                                ]?.connection_quality
                                 }
                                 expectedFps={
-                                statsHistory[statsHistory.length - 1]?.cameras[
+                                  statsHistory[statsHistory.length - 1]
-                                  camera.name
+                                    ?.cameras[camera.name]?.expected_fps || 0
-                                ]?.expected_fps || 0
                                 }
                                 reconnects={
-                                statsHistory[statsHistory.length - 1]?.cameras[
+                                  statsHistory[statsHistory.length - 1]
-                                  camera.name
+                                    ?.cameras[camera.name]
-                                ]?.reconnects_last_hour || 0
+                                    ?.reconnects_last_hour || 0
                                 }
                                 stalls={
-                                statsHistory[statsHistory.length - 1]?.cameras[
+                                  statsHistory[statsHistory.length - 1]
-                                  camera.name
+                                    ?.cameras[camera.name]?.stalls_last_hour ||
-                                ]?.stalls_last_hour || 0
+                                  0
                                 }
                               />
                             )}