administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-19 02:11:15 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

sort cameras by UI order in various components for consistent display

Browse Source
This commit is contained in:
Josh Hawkins 2026-07-06 16:47:51 -05:00
parent 105d1e8885
commit 0cb3c720ca
13 changed files with 158 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/classification/wizard/Step2StateArea.tsx
View File

@ -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),

8
web/src/components/filter/ExportFilterGroup.tsx
View File

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

8
web/src/components/filter/SearchFilterGroup.tsx
View File

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

8
web/src/components/overlay/CreateRoleDialog.tsx
View File

@ -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(
(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 || {});

8
web/src/components/overlay/EditRoleCamerasDialog.tsx
View File

@ -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(
(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({

4
web/src/components/overlay/detail/ObjectPathPlotter.tsx
View File

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

4
web/src/components/settings/CloneCameraDialog.tsx
View File

@ -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];

2
web/src/components/ws/WsMessageFeed.tsx
View File

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

6
web/src/pages/MotionSearch.tsx
View File

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

14
web/src/views/settings/CameraManagementView.tsx
View File

@ -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]);

1
web/src/views/settings/FrigatePlusSettingsView.tsx
View File

@ -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}

8
web/src/views/settings/ProfilesView.tsx
View File

@ -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 (

26
web/src/views/system/CameraMetrics.tsx
View File

@ -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[
camera.name
]?.connection_quality
statsHistory[statsHistory.length - 1]
?.cameras[camera.name]?.connection_quality
}
expectedFps={
statsHistory[statsHistory.length - 1]?.cameras[
camera.name
]?.expected_fps || 0
statsHistory[statsHistory.length - 1]
?.cameras[camera.name]?.expected_fps || 0
}
reconnects={
statsHistory[statsHistory.length - 1]?.cameras[
camera.name
]?.reconnects_last_hour || 0
statsHistory[statsHistory.length - 1]
?.cameras[camera.name]
?.reconnects_last_hour || 0
}
stalls={
statsHistory[statsHistory.length - 1]?.cameras[
camera.name
]?.stalls_last_hour || 0
statsHistory[statsHistory.length - 1]
?.cameras[camera.name]?.stalls_last_hour ||
0
}
/>
)}