Update event filters naming and add sub label filter (#3194)

* Use default names so filters are more clear

* Add endpoint to get list of sub labels inside DB

* Fix crash on no internet

* Cleanups for sub_label http

* Add sub label selector to events UI

* Add event filtering for sub label

* Formatting files

* Reduce size of filters to fit on one line

* Add handler for tests

* Remove unused imports

* Only show the sub labels filter when there are sub labels in the DB

* Fix tests

* Use distinct instead of group_by

* Formatting

* Cleanup event logic

web/config/handlers.js

@@ -72,4 +72,13 @@ export const handlers = [
       )
     );
   }),
+  rest.get(`${API_HOST}api/sub_labels`, (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json([
+        'one',
+        'two',
+      ])
+    );
+  }),
 ];

web/src/routes/Events.jsx

@@ -44,6 +44,7 @@ export default function Events({ path, ...props }) {
     camera: props.camera ?? 'all',
     label: props.label ?? 'all',
     zone: props.zone ?? 'all',
+    sub_label: props.sub_label ?? 'all',
   });
   const [state, setState] = useState({
     showDownloadMenu: false,
@@ -86,6 +87,8 @@ export default function Events({ path, ...props }) {
 
   const { data: config } = useSWR('config');
 
+  const { data: allSubLabels } = useSWR('sub_labels')
+
   const filterValues = useMemo(
     () => ({
       cameras: Object.keys(config?.cameras || {}),
@@ -101,8 +104,9 @@ export default function Events({ path, ...props }) {
           return memo;
         }, config?.objects?.track || [])
         .filter((value, i, self) => self.indexOf(value) === i),
+      sub_labels: Object.values(allSubLabels || []),
     }),
-    [config]
+    [config, allSubLabels]
   );
 
   const onSave = async (e, eventId, save) => {
@@ -240,11 +244,11 @@ export default function Events({ path, ...props }) {
       <Heading>Events</Heading>
       <div className="flex flex-wrap gap-2 items-center">
         <select
-          className="basis-1/4 cursor-pointer rounded dark:bg-slate-800"
+          className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
           value={searchParams.camera}
           onChange={(e) => onFilter('camera', e.target.value)}
         >
-          <option value="all">all</option>
+          <option value="all">all cameras</option>
           {filterValues.cameras.map((item) => (
             <option key={item} value={item}>
               {item}
@@ -252,11 +256,11 @@ export default function Events({ path, ...props }) {
           ))}
         </select>
         <select
-          className="basis-1/4 cursor-pointer rounded dark:bg-slate-800"
+          className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
           value={searchParams.label}
           onChange={(e) => onFilter('label', e.target.value)}
         >
-          <option value="all">all</option>
+          <option value="all">all labels</option>
           {filterValues.labels.map((item) => (
             <option key={item} value={item}>
               {item}
@@ -264,17 +268,32 @@ export default function Events({ path, ...props }) {
           ))}
         </select>
         <select
-          className="basis-1/4 cursor-pointer rounded dark:bg-slate-800"
+          className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
           value={searchParams.zone}
           onChange={(e) => onFilter('zone', e.target.value)}
         >
-          <option value="all">all</option>
+          <option value="all">all zones</option>
           {filterValues.zones.map((item) => (
             <option key={item} value={item}>
               {item}
             </option>
           ))}
         </select>
+        {
+          filterValues.sub_labels.length > 0 && (
+            <select
+              className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
+              value={searchParams.sub_label}
+              onChange={(e) => onFilter('sub_label', e.target.value)}
+            >
+              <option value="all">all sub labels</option>
+              {filterValues.sub_labels.map((item) => (
+                <option key={item} value={item}>
+                  {item}
+                </option>
+              ))}
+            </select>
+          )}
         <div ref={datePicker} className="ml-auto">
           <CalendarIcon
             className="h-8 w-8 cursor-pointer"