Add hoverable disk info

ui/src/resources/server/table/stats.tsx

@@ -1,7 +1,7 @@
 import { useSelectedResources } from "@/lib/hooks";
 import ResourceLink from "@/resources/link";
 import { DataTable, SortableHeader } from "@/ui/data-table";
-import { BoxProps, Group, Text } from "@mantine/core";
+import { BoxProps, Group, Stack, Text } from "@mantine/core";
 import { Types } from "komodo_client";
 import { useServerStats, useServerThresholds } from "@/resources/server/hooks";
 import StatCell from "@/ui/stat-cell";
@@ -102,7 +102,38 @@ function DiskCell({ id }: { id: string }) {
     useServerThresholds(id);
   const intent: "Good" | "Warning" | "Critical" =
     perc < warning ? "Good" : perc < critical ? "Warning" : "Critical";
-  return <StatCell value={stats ? perc : undefined} intent={intent} />;
+  return (
+    <StatCell
+      value={stats ? perc : undefined}
+      intent={intent}
+      infoDisabled={!stats}
+      info={
+        <Stack>
+          {stats?.disks.map((disk) => (
+            <Group
+              key={disk.mount}
+              justify="space-between"
+              className="bordered-light"
+              p="sm"
+              bdrs="sm"
+            >
+              <Group>
+                <Text c="dimmed">Mount:</Text>{" "}
+                <Text ff="monospace" bg="accent.6" px="xs" bdrs="sm">
+                  {disk.mount}
+                </Text>
+              </Group>
+              <Text>-</Text>
+              <Text>
+                {disk.used_gb.toFixed(1)} GB out of {disk.total_gb.toFixed(1)}{" "}
+                GB ({((100 * disk.used_gb) / disk.total_gb).toFixed(1)} %)
+              </Text>
+            </Group>
+          ))}
+        </Stack>
+      }
+    />
+  );
 }
 
 function LoadAvgCell({ id }: { id: string }) {

ui/src/ui/stat-cell.tsx

@@ -1,18 +1,24 @@
 import { ColorIntention, hexColorByIntention } from "@/lib/color";
+import { ICONS } from "@/theme/icons";
 import {
+  ActionIcon,
   Group,
   GroupProps,
+  HoverCard,
   Progress,
   ProgressProps,
   Text,
   TextProps,
 } from "@mantine/core";
+import { ReactNode } from "react";
 
 export interface StatCellProps extends GroupProps {
   value: number | undefined;
   intent: ColorIntention;
   textProps?: TextProps;
   barProps?: ProgressProps;
+  info?: ReactNode;
+  infoDisabled?: boolean;
 }
 
 export default function StatCell({
@@ -20,21 +26,47 @@ export default function StatCell({
   intent,
   textProps,
   barProps,
+  info,
+  infoDisabled,
   ...groupProps
 }: StatCellProps) {
+  const ProgressComponent = (
+    <Progress
+      value={value ?? 0}
+      color={hexColorByIntention(intent)}
+      w={200}
+      size="xl"
+      {...barProps}
+    />
+  );
   return (
-    <Group gap="xs" justify="space-between" wrap="nowrap" {...groupProps}>
-      <Text c={value === undefined ? "dimmed" : undefined} {...textProps}>
+    <Group
+      gap="xs"
+      justify="space-between"
+      wrap="nowrap"
+      {...groupProps}
+    >
+      <Text
+        w={64}
+        c={value === undefined ? "dimmed" : undefined}
+        {...textProps}
+      >
         {value === undefined ? "N/A" : value.toFixed(1) + "%"}
       </Text>
-      <Progress
-        value={value ?? 0}
-        color={hexColorByIntention(intent)}
-        w="70%"
-        miw={80}
-        size="xl"
-        {...barProps}
-      />
+      {!info && ProgressComponent}
+      {info && (
+        <Group gap="xs" wrap="nowrap">
+          {ProgressComponent}
+          <HoverCard position="bottom-end">
+            <HoverCard.Target>
+              <ActionIcon variant="subtle" disabled={infoDisabled}>
+                <ICONS.Info size="1rem" />
+              </ActionIcon>
+            </HoverCard.Target>
+            <HoverCard.Dropdown>{info}</HoverCard.Dropdown>
+          </HoverCard>
+        </Group>
+      )}
     </Group>
   );
 }