feat: columns and indexes table on overview page

frectonz · Jul 3, 2024 · 6bc6ec6 · 6bc6ec6
1 parent 232881f
commit 6bc6ec6
Showing 1 changed file with 58 additions and 1 deletion.
diff --git a/ui/src/routes/index.lazy.tsx b/ui/src/routes/index.lazy.tsx
@@ -29,7 +29,14 @@ import {
 } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { InfoCard, InfoCardProps } from "@/components/info-card";
-import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 
 export const Route = createFileRoute("/")({
   component: Index,
@@ -159,6 +166,56 @@ function Index() {
           </CardContent>
         </Card>
       </div>
+
+      <div className="grid gap-8 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>INDEXES PER TABLE</CardTitle>
+          </CardHeader>
+          <CardContent className="pl-2 h-[400px] overflow-y-scroll">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Index</TableHead>
+                  <TableHead className="text-right">Count</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.index_counts.map((col) => (
+                  <TableRow key={col.name}>
+                    <TableCell>{col.name}</TableCell>
+                    <TableCell className="text-right">{col.count}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>COLUMNS PER TABLE</CardTitle>
+          </CardHeader>
+          <CardContent className="pl-2 h-[400px] overflow-y-scroll">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Column</TableHead>
+                  <TableHead className="text-right">Count</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.column_counts.map((col) => (
+                  <TableRow key={col.name}>
+                    <TableCell>{col.name}</TableCell>
+                    <TableCell className="text-right">{col.count}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </div>
     </>
   );
 }