Load labels dynamically for event filters (#6896)

* Load labels dynamically to include custom events and audio, do not include attribute labels

* Formatting

* Fix sorting

* Also filter tracked object list on camera page

* isort

* Don't fail before load

web/src/routes/Camera.jsx

@@ -22,6 +22,7 @@ const emptyObject = Object.freeze({});
 
 export default function Camera({ camera }) {
   const { data: config } = useSWR('config');
+  const { data: trackedLabels } = useSWR(['labels', { camera }]);
   const apiHost = useApiHost();
   const [showSettings, setShowSettings] = useState(false);
   const [viewMode, setViewMode] = useState('live');
@@ -121,7 +122,9 @@ export default function Camera({ camera }) {
             <div className="max-w-5xl">
               <video-stream
                 mode="mse"
-                src={new URL(`${baseUrl.replace(/^http/, 'ws')}live/webrtc/api/ws?src=${cameraConfig.live.stream_name}`)}
+                src={
+                  new URL(`${baseUrl.replace(/^http/, 'ws')}live/webrtc/api/ws?src=${cameraConfig.live.stream_name}`)
+                }
               />
             </div>
           </Fragment>
@@ -203,7 +206,7 @@ export default function Camera({ camera }) {
       <div className="space-y-4">
         <Heading size="sm">Tracked objects</Heading>
         <div className="flex flex-wrap justify-start">
-          {cameraConfig.objects.track.map((objectType) => (
+          {(trackedLabels || []).map((objectType) => (
             <Card
               className="mb-4 mr-4"
               key={objectType}

web/src/routes/Events.jsx

@@ -106,6 +106,7 @@ export default function Events({ path, ...props }) {
 
   const { data: config } = useSWR('config');
 
+  const { data: allLabels } = useSWR(['labels']);
   const { data: allSubLabels } = useSWR(['sub_labels', { split_joined: 1 }]);
 
   const filterValues = useMemo(
@@ -120,15 +121,10 @@ export default function Events({ path, ...props }) {
           .filter((value, i, self) => self.indexOf(value) === i),
         'None',
       ],
-      labels: Object.values(config?.cameras || {})
-        .reduce((memo, camera) => {
-          memo = memo.concat(camera?.objects?.track || []);
-          return memo;
-        }, config?.objects?.track || [])
-        .filter((value, i, self) => self.indexOf(value) === i),
+      labels: Object.values(allLabels || {}),
       sub_labels: (allSubLabels || []).length > 0 ? [...Object.values(allSubLabels), 'None'] : [],
     }),
-    [config, allSubLabels]
+    [config, allLabels, allSubLabels]
   );
 
   const onSave = async (e, eventId, save) => {