Support storage page in new ui (#8948)

* Add table and oveview components

* Add toooltips for cards

* Add storage

* Undo

web-new/package-lock.json

@@ -23,6 +23,7 @@
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-tooltip": "^1.0.7",
         "axios": "^1.6.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
@@ -1628,6 +1629,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
+      "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",

web-new/package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "axios": "^1.6.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

web-new/src/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

web-new/src/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

web-new/src/pages/Storage.tsx

@@ -1,9 +1,243 @@
+import { useWs } from "@/api/ws";
+import ActivityIndicator from "@/components/ui/activity-indicator";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import Heading from "@/components/ui/heading";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useMemo } from "react";
+import { LuAlertCircle } from "react-icons/lu";
+import useSWR from "swr";
+
+type CameraStorage = {
+  [key: string]: {
+    bandwidth: number;
+    usage: number;
+    usage_percent: number;
+  };
+};
+
+const emptyObject = Object.freeze({});
 
 function Storage() {
+  const { data: storage } = useSWR<CameraStorage>("recordings/storage");
+
+  const {
+    value: { payload: stats },
+  } = useWs("stats", "");
+  const { data: initialStats } = useSWR("stats");
+
+  const { service } = stats || initialStats || emptyObject;
+
+  const hasSeparateMedia = useMemo(() => {
+    return (
+      service &&
+      service["storage"]["/media/frigate/recordings"]["total"] !=
+        service["storage"]["/media/frigate/clips"]["total"]
+    );
+  }, service);
+
+  const getUnitSize = (MB: number) => {
+    if (isNaN(MB) || MB < 0) return "Invalid number";
+    if (MB < 1024) return `${MB} MiB`;
+    if (MB < 1048576) return `${(MB / 1024).toFixed(2)} GiB`;
+
+    return `${(MB / 1048576).toFixed(2)} TiB`;
+  };
+
+  if (!service || !storage) {
+    return <ActivityIndicator />;
+  }
+
   return (
     <>
       <Heading as="h2">Storage</Heading>
+
+      <Heading className="my-4" as="h3">
+        Overview
+      </Heading>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card>
+          <CardHeader>
+            <div className="flex bg-center snap-center text-center items-center">
+              <CardTitle>Data</CardTitle>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button size="icon" variant="ghost">
+                      <LuAlertCircle />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>
+                      Overview of total used storage and total capacity of the
+                      drives that hold the recordings and snapshots directories.
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Location</TableHead>
+                  <TableHead>Used</TableHead>
+                  <TableHead>Total</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>
+                    {hasSeparateMedia ? "Recordings" : "Recordings & Snapshots"}
+                  </TableCell>
+                  <TableCell>
+                    {getUnitSize(
+                      service["storage"]["/media/frigate/recordings"]["used"]
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {getUnitSize(
+                      service["storage"]["/media/frigate/recordings"]["total"]
+                    )}
+                  </TableCell>
+                </TableRow>
+                {hasSeparateMedia && (
+                  <TableRow>
+                    <TableCell>Snapshots</TableCell>
+                    <TableCell>
+                      {getUnitSize(
+                        service["storage"]["/media/frigate/clips"]["used"]
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {getUnitSize(
+                        service["storage"]["/media/frigate/clips"]["total"]
+                      )}
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <div className="flex bg-center snap-center text-center items-center">
+              <CardTitle>Memory</CardTitle>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button size="icon" variant="ghost">
+                      <LuAlertCircle />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Overview of used and total memory in frigate process.</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Location</TableHead>
+                  <TableHead>Used</TableHead>
+                  <TableHead>Total</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>/dev/shm</TableCell>
+                  <TableCell>
+                    {getUnitSize(service["storage"]["/dev/shm"]["used"])}
+                  </TableCell>
+                  <TableCell>
+                    {getUnitSize(service["storage"]["/dev/shm"]["total"])}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>/tmp/cache</TableCell>
+                  <TableCell>
+                    {getUnitSize(service["storage"]["/tmp/cache"]["used"])}
+                  </TableCell>
+                  <TableCell>
+                    {getUnitSize(service["storage"]["/tmp/cache"]["total"])}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="flex bg-center snap-center text-center items-center my-4">
+        <Heading as="h4">Cameras</Heading>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="ghost">
+                <LuAlertCircle />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Overview of per-camera storage usage and bandwidth.</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
+        {Object.entries(storage).map(([name, camera]) => (
+          <Card key={name}>
+            <div className="capitalize text-lg flex justify-between">
+              <Button variant="link">
+                <a className="capitalize" href={`/cameras/${name}`}>
+                  {name.replaceAll("_", " ")}
+                </a>
+              </Button>
+            </div>
+            <div className="p-2">
+              <Table className="w-full">
+                <TableHeader>
+                  <TableRow>
+                    <TableCell>Usage</TableCell>
+                    <TableCell>Stream Bandwidth</TableCell>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell>
+                      {Math.round(camera["usage_percent"] ?? 0)}%
+                    </TableCell>
+                    <TableCell>
+                      {camera["bandwidth"]
+                        ? `${getUnitSize(camera["bandwidth"])}/hr`
+                        : "Calculating..."}
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </div>
+          </Card>
+        ))}
+      </div>
     </>
   );
 }