feat(ui): display storage usage

TabbyML · Apr 23, 2024 · da64b6e · da64b6e
1 parent 007b52f
commit da64b6e
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 2 deletions.
diff --git a/ee/tabby-ui/app/(dashboard)/cluster/components/cluster.tsx b/ee/tabby-ui/app/(dashboard)/cluster/components/cluster.tsx
@@ -2,6 +2,8 @@
 
 import { noop } from 'lodash-es'
 import { useQuery } from 'urql'
+import bytes from 'bytes';
+import { useTheme } from 'next-themes';
 
 import { graphql } from '@/lib/gql/generates'
 import { WorkerKind } from '@/lib/gql/generates/graphql'
@@ -13,6 +15,19 @@ import { IconRotate } from '@/components/ui/icons'
 import { Input } from '@/components/ui/input'
 import { Separator } from '@/components/ui/separator'
 import { CopyButton } from '@/components/copy-button'
+import {
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Label,
+} from 'recharts'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { IconFolderOpen } from '@/components/ui/icons';
 
 import WorkerCard from './worker-card'
 
@@ -47,6 +62,15 @@ export default function Workers() {
 
   if (!healthInfo) return
 
+  // TODO: mock data
+  const usageData = [
+    { name: "Models", usage: 1024 * 1024 * 1024 * 1.1, color: "#0088FE", folders: ["~/.tabby/models"] },
+    { name: "Repository data", usage: 1024 * 1024 * 2.1, color: "#00C49F", folders: ["~/.tabby/dataset", "~/.tabby/index"] },
+    { name: "Database", usage: 1024 * 85, color: "#FFBB28", folders: ["~/.tabby/ee"] },
+    { name: "Events", usage: 1024 * 1200 * 11, color: "#FF8042", folders: ["~/.tabby/events"] }
+  ];
+  const totalUsage = 1024 * 1300 * 1200
+
   return (
     <div className="flex w-full flex-col gap-3">
       <h1>
@@ -112,6 +136,105 @@ export default function Workers() {
           cpuInfo={healthInfo.cpu_info}
         />
       </div>
+
+      <Separator className="mt-5" />
+
+      <div>
+        <p className="font-bold">
+          Storage Usage
+        </p>
+        <p className="text-sm text-muted-foreground">Disk space used by Tabby</p>
+      </div>
+
+
+      <div className="flex flex-col items-center gap-x-3 md:flex-row">
+        <ResponsiveContainer width={230} height={220}>
+          <PieChart>
+            <Pie 
+              data={usageData} 
+              dataKey="usage"
+              cx={110}
+              cy={100}
+              innerRadius={70}
+              outerRadius={90}
+              stroke='none'
+            >
+              {usageData.map((entry) => (
+                <Cell key={entry.name} fill={entry.color} />
+              ))}
+              <Label  
+                content={<CustomLabel totalUsage={totalUsage} />}
+                position="center"
+              />
+            </Pie>
+          </PieChart>
+        </ResponsiveContainer>
+
+        <div className="flex w-full flex-col gap-y-2 md:ml-10 md:w-auto">
+          {usageData.map(item => (
+            <Tooltip key={item.name}>
+              <TooltipTrigger>
+                <div className="flex cursor-default items-center justify-between text-xs" >
+                  <div className="flex w-40 items-center">
+                    <div className="mr-1.5 h-3 w-3 rounded" style={{ backgroundColor: item.color }} />
+                    <p className="font-semibold">{item.name}</p>
+                  </div>
+                  <p>{bytes(item.usage)}</p>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="flex items-center text-muted-foreground">
+                  <IconFolderOpen className="mr-0.5" />
+                  <p>Folder</p>
+                </div>
+
+                {item.folders.map(folder => (<p>{folder}</p>))}
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
+      </div>
     </div>
   )
 }
+
+function CustomLabel ({
+  viewBox,
+  totalUsage
+}: {
+  viewBox?: {
+    cx: number;
+    cy: number;
+  };
+  totalUsage: number;
+}) {
+  const { theme } = useTheme()
+  if (!viewBox) return
+  const { cx, cy } = viewBox
+  return (
+    <g>
+      <text
+        x={cx}
+        y={cy - 10}
+        textAnchor="middle"
+        dominantBaseline="central"
+        alignmentBaseline="middle"
+        fill={theme === 'dark' ? '#FDFDFD' : '#030302'}
+        className="text-sm"
+      >
+        Total Usuage
+      </text>
+      <text
+        x={cx}
+        y={cy + 13}
+        textAnchor="middle"
+        dominantBaseline="central"
+        alignmentBaseline="middle"
+        fill={theme === 'dark' ? '#FDFDFD' : '#030302'}
+        className="text-lg font-semibold"
+      >
+        {bytes(totalUsage)}
+      </text>
+    </g>
+  );
+};
diff --git a/ee/tabby-ui/components/ui/icons.tsx b/ee/tabby-ui/components/ui/icons.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 // FIXME(wwayne): Review each icons and consider re-export from `lucide-react`.
-import { BookOpenText, Mail } from 'lucide-react'
+import { BookOpenText, Mail, FolderOpen } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
 
@@ -1323,6 +1323,10 @@ function IconMail({ className, ...props }: React.ComponentProps<typeof Mail>) {
   return <Mail className={cn('h4 w-4', className)} {...props} />
 }
 
+function IconFolderOpen({ className, ...props }: React.ComponentProps<typeof FolderOpen>) {
+  return <FolderOpen className={cn('h4 w-4', className)} {...props} />
+}
+
 export {
   IconEdit,
   IconNextChat,
@@ -1391,5 +1395,6 @@ export {
   IconBarChart,
   IconActivity,
   IconBookOpenText,
-  IconMail
+  IconMail,
+  IconFolderOpen
 }
diff --git a/ee/tabby-ui/package.json b/ee/tabby-ui/package.json
@@ -52,6 +52,7 @@
     "@vercel/kv": "^0.2.1",
     "@vercel/og": "^0.5.7",
     "ai": "^2.1.6",
+    "bytes": "^3.1.2",
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",
     "cmdk": "^1.0.0",
@@ -104,6 +105,7 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@parcel/watcher": "^2.3.0",
     "@tailwindcss/typography": "^0.5.9",
+    "@types/bytes": "^3.1.4",
     "@types/humanize-duration": "^3.27.4",
     "@types/lodash-es": "^4.17.10",
     "@types/node": "^17.0.12",

diff --git a/ee/tabby-ui/yarn.lock b/ee/tabby-ui/yarn.lock
@@ -2481,6 +2481,11 @@
     lodash.merge "^4.6.2"
     postcss-selector-parser "6.0.10"
 
+"@types/bytes@^3.1.4":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@types/bytes/-/bytes-3.1.4.tgz#8563f38ea6096df3f409c6500e8ac171790a7c1f"
+  integrity sha512-A0uYgOj3zNc4hNjHc5lYUfJQ/HVyBXiUMKdXd7ysclaE6k9oJdavQzODHuwjpUu2/boCP8afjQYi8z/GtvNCWA==
+
 "@types/chroma-js@^2.4.3":
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-2.4.4.tgz#254dddff54568ff8e5d0dcdb071871a458fdfd31"
@@ -3382,6 +3387,11 @@ [email protected], busboy@^1.6.0:
   dependencies:
     streamsearch "^1.1.0"
 
+bytes@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"