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/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>
+  );
+}