Review summary (#10196)

* Create review summary api to get information about reviewed and unreviewed events on each day

* remove unused

* Fix tests

* Format tests

* Fix

web/src/hooks/use-date-utils.ts

@@ -1,3 +1,4 @@
+import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useMemo } from "react";
 
@@ -10,3 +11,15 @@ export function useFormattedTimestamp(timestamp: number, format: string) {
 
   return formattedTimestamp;
 }
+
+export function useTimezone(config: FrigateConfig | undefined) {
+  return useMemo(() => {
+    if (!config) {
+      return undefined;
+    }
+
+    return (
+      config.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone
+    );
+  }, [config]);
+}

web/src/pages/Events.tsx

@@ -1,5 +1,8 @@
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import useApiFilter from "@/hooks/use-api-filter";
+import { useTimezone } from "@/hooks/use-date-utils";
 import useOverlayState from "@/hooks/use-overlay-state";
+import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
 import DesktopRecordingView from "@/views/events/DesktopRecordingView";
@@ -12,6 +15,9 @@ import useSWRInfinite from "swr/infinite";
 const API_LIMIT = 100;
 
 export default function Events() {
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const timezone = useTimezone(config);
+
   // recordings viewer
 
   const [severity, setSeverity] = useState<ReviewSeverity>("alert");
@@ -100,6 +106,14 @@ export default function Events() {
 
   const reloadData = useCallback(() => setBeforeTs(Date.now() / 1000), []);
 
+  // review summary
+
+  const { data: reviewSummary } = useSWR([
+    "review/summary",
+    { timezone: timezone },
+    { revalidateOnFocus: false },
+  ]);
+
   // preview videos
 
   const previewTimes = useMemo(() => {
@@ -200,6 +214,10 @@ export default function Events() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedReviewId, reviewPages]);
 
+  if (!timezone) {
+    return <ActivityIndicator />;
+  }
+
   if (selectedData) {
     return (
       <DesktopRecordingView
@@ -212,6 +230,7 @@ export default function Events() {
     return (
       <EventView
         reviewPages={reviewPages}
+        reviewSummary={reviewSummary}
         relevantPreviews={allPreviews}
         timeRange={selectedTimeRange}
         reachedEnd={isDone}

web/src/types/review.ts

@@ -27,3 +27,13 @@ export type ReviewFilter = {
   after?: number;
   showReviewed?: 0 | 1;
 };
+
+export type ReviewSummary = {
+  day: string;
+  reviewed_alert: number;
+  reviewed_detection: number;
+  reviewed_motion: number;
+  total_alert: number;
+  total_detection: number;
+  total_motion: number;
+};

web/src/views/events/EventView.tsx

@@ -10,7 +10,12 @@ import { useEventUtils } from "@/hooks/use-event-utils";
 import { useScrollLockout } from "@/hooks/use-mouse-listener";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
-import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
+import {
+  ReviewFilter,
+  ReviewSegment,
+  ReviewSeverity,
+  ReviewSummary,
+} from "@/types/review";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isDesktop, isMobile } from "react-device-detect";
@@ -20,6 +25,7 @@ import useSWR from "swr";
 
 type EventViewProps = {
   reviewPages?: ReviewSegment[][];
+  reviewSummary?: ReviewSummary[];
   relevantPreviews?: Preview[];
   timeRange: { before: number; after: number };
   reachedEnd: boolean;
@@ -35,6 +41,7 @@ type EventViewProps = {
 };
 export default function EventView({
   reviewPages,
+  reviewSummary,
   relevantPreviews,
   timeRange,
   reachedEnd,
@@ -52,6 +59,35 @@ export default function EventView({
   const contentRef = useRef<HTMLDivElement | null>(null);
   const segmentDuration = 60;
 
+  // review counts
+
+  const reviewCounts = useMemo(() => {
+    if (!reviewSummary) {
+      return { alert: 0, detection: 0, significant_motion: 0 };
+    }
+
+    let summary;
+    if (filter?.before == undefined) {
+      summary = reviewSummary[0];
+    } else {
+      summary = reviewSummary[0];
+    }
+
+    if (filter?.showReviewed == 1) {
+      return {
+        alert: summary.total_alert,
+        detection: summary.total_detection,
+        significant_motion: summary.total_motion,
+      };
+    } else {
+      return {
+        alert: summary.total_alert - summary.reviewed_alert,
+        detection: summary.total_detection - summary.reviewed_detection,
+        significant_motion: summary.total_motion - summary.reviewed_motion,
+      };
+    }
+  }, [filter, reviewSummary]);
+
   // review paging
 
   const reviewItems = useMemo(() => {
@@ -264,7 +300,7 @@ export default function EventView({
             aria-label="Select alerts"
           >
             <MdCircle className="size-2 md:mr-[10px] text-severity_alert" />
-            <div className="hidden md:block">Alerts</div>
+            <div className="hidden md:block">Alerts ∙ {reviewCounts.alert}</div>
           </ToggleGroupItem>
           <ToggleGroupItem
             className={`${severity == "detection" ? "" : "text-gray-500"}`}
@@ -272,7 +308,9 @@ export default function EventView({
             aria-label="Select detections"
           >
             <MdCircle className="size-2 md:mr-[10px] text-severity_detection" />
-            <div className="hidden md:block">Detections</div>
+            <div className="hidden md:block">
+              Detections ∙ {reviewCounts.detection}
+            </div>
           </ToggleGroupItem>
           <ToggleGroupItem
             className={`px-3 py-4 rounded-2xl ${
@@ -282,7 +320,9 @@ export default function EventView({
             aria-label="Select motion"
           >
             <MdCircle className="size-2 md:mr-[10px] text-severity_motion" />
-            <div className="hidden md:block">Motion</div>
+            <div className="hidden md:block">
+              Motion ∙ {reviewCounts.significant_motion}
+            </div>
           </ToggleGroupItem>
         </ToggleGroup>