Implement general page of system graphs (#10815)

* Reorganize stats and show graphs in system metrics

* Break apart all cpu / mem graphs

* Auto update stats

* Show camera graphs

* Get system graphs working for inference time

* Update stats every 10 seconds, keeping the last 10 minutes

* Use types for thresholds

* Use keys api

* Break system metrics into different pages

* Add dialog for viewing and copying vainfo

* remove unused for now

* Formatting

* Make tooltip match theme

* Make betters color in light mode

* Include gpu

* Make scaling consistent

* Fix name

* address feedback

web/src/components/graph/SystemGraph.tsx

@@ -0,0 +1,126 @@
+import { useTheme } from "@/context/theme-provider";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { Threshold } from "@/types/graph";
+import { useCallback, useEffect, useMemo } from "react";
+import Chart from "react-apexcharts";
+import useSWR from "swr";
+
+type SystemGraphProps = {
+  graphId: string;
+  name: string;
+  unit: string;
+  threshold: Threshold;
+  updateTimes: number[];
+  data: ApexAxisChartSeries;
+};
+export default function SystemGraph({
+  graphId,
+  name,
+  unit,
+  threshold,
+  updateTimes,
+  data,
+}: SystemGraphProps) {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
+  const lastValue = useMemo<number>(
+    // @ts-expect-error y is valid
+    () => data[0].data[data[0].data.length - 1]?.y ?? 0,
+    [data],
+  );
+
+  const { theme, systemTheme } = useTheme();
+
+  const formatTime = useCallback(
+    (val: unknown) => {
+      const date = new Date(updateTimes[Math.round(val as number)] * 1000);
+      return date.toLocaleTimeString([], {
+        hour12: config?.ui.time_format != "24hour",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    },
+    [config, updateTimes],
+  );
+
+  const options = useMemo(() => {
+    return {
+      chart: {
+        id: graphId,
+        selection: {
+          enabled: false,
+        },
+        toolbar: {
+          show: false,
+        },
+        zoom: {
+          enabled: false,
+        },
+      },
+      colors: [
+        ({ value }: { value: number }) => {
+          if (value >= threshold.error) {
+            return "#FA5252";
+          } else if (value >= threshold.warning) {
+            return "#FF9966";
+          } else {
+            return (systemTheme || theme) == "dark" ? "#404040" : "#E5E5E5";
+          }
+        },
+      ],
+      grid: {
+        show: false,
+      },
+      legend: {
+        show: false,
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      plotOptions: {
+        bar: {
+          distributed: true,
+        },
+      },
+      tooltip: {
+        theme: systemTheme || theme,
+      },
+      xaxis: {
+        tickAmount: 6,
+        labels: {
+          formatter: formatTime,
+        },
+        axisBorder: {
+          show: false,
+        },
+        axisTicks: {
+          show: false,
+        },
+      },
+      yaxis: {
+        show: false,
+        min: 0,
+        max: threshold.warning + 10,
+      },
+    };
+  }, [graphId, threshold, systemTheme, theme, formatTime]);
+
+  useEffect(() => {
+    ApexCharts.exec(graphId, "updateOptions", options, true, true);
+  }, [graphId, options]);
+
+  return (
+    <div className="w-full flex flex-col">
+      <div className="flex items-center gap-1">
+        <div className="text-xs text-muted-foreground">{name}</div>
+        <div className="text-xs text-primary-foreground">
+          {lastValue}
+          {unit}
+        </div>
+      </div>
+      <Chart type="bar" options={options} series={data} height="120" />
+    </div>
+  );
+}

web/src/components/navigation/Bottombar.tsx

@@ -57,7 +57,10 @@ function StatusAlertNav() {
       <DrawerContent className="max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden">
         <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
           {potentialProblems.map((prob) => (
-            <div className="w-full flex items-center text-xs gap-2 capitalize">
+            <div
+              key={prob.text}
+              className="w-full flex items-center text-xs gap-2 capitalize"
+            >
               <IoIosWarning className={`size-5 ${prob.color}`} />
               {prob.text}
             </div>

web/src/components/overlay/VainfoDialog.tsx

@@ -0,0 +1,57 @@
+import useSWR from "swr";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { Vainfo } from "@/types/stats";
+import { Button } from "../ui/button";
+import copy from "copy-to-clipboard";
+
+type VainfoDialogProps = {
+  showVainfo: boolean;
+  setShowVainfo: (show: boolean) => void;
+};
+export default function VainfoDialog({
+  showVainfo,
+  setShowVainfo,
+}: VainfoDialogProps) {
+  const { data: vainfo } = useSWR<Vainfo>(showVainfo ? "vainfo" : null);
+
+  const onCopyVainfo = async () => {
+    copy(JSON.stringify(vainfo).replace(/[\\\s]+/gi, ""));
+    setShowVainfo(false);
+  };
+
+  return (
+    <Dialog open={showVainfo} onOpenChange={setShowVainfo}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Vainfo Output</DialogTitle>
+        </DialogHeader>
+        {vainfo ? (
+          <div className="mb-2 max-h-96 whitespace-pre-line overflow-y-scroll">
+            <div>Return Code: {vainfo.return_code}</div>
+            <br />
+            <div>Process {vainfo.return_code == 0 ? "Output" : "Error"}:</div>
+            <br />
+            <div>{vainfo.return_code == 0 ? vainfo.stdout : vainfo.stderr}</div>
+          </div>
+        ) : (
+          <ActivityIndicator />
+        )}
+        <DialogFooter>
+          <Button variant="secondary" onClick={() => setShowVainfo(false)}>
+            Close
+          </Button>
+          <Button variant="select" onClick={() => onCopyVainfo()}>
+            Copy
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}