From 193ed3b53734eac924ed7efff671e90656d1ef98 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 13 Mar 2025 19:44:00 -0700
Subject: [PATCH] use table view

---
 .../src/components/top_key_view.tsx           | 97 ++++++++++++++++---
 ui/litellm-dashboard/src/components/usage.tsx |  3 +-
 2 files changed, 85 insertions(+), 15 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/top_key_view.tsx b/ui/litellm-dashboard/src/components/top_key_view.tsx
index c88c308d7f..11c7877f9c 100644
--- a/ui/litellm-dashboard/src/components/top_key_view.tsx
+++ b/ui/litellm-dashboard/src/components/top_key_view.tsx
@@ -3,6 +3,9 @@ import { BarChart } from "@tremor/react";
 import KeyInfoView from "./key_info_view";
 import { keyInfoV1Call } from "./networking";
 import { transformKeyInfo } from "../components/key_team_helpers/transform_key_info";
+import { DataTable } from "./view_logs/table";
+import { Tooltip } from "antd";
+import { Button } from "@tremor/react";
 
 interface TopKeyViewProps {
   topKeys: any[];
@@ -22,6 +25,7 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [selectedKey, setSelectedKey] = useState<string | null>(null);
   const [keyData, setKeyData] = useState<any | undefined>(undefined);
+  const [viewMode, setViewMode] = useState<'chart' | 'table'>('table');
 
   const handleKeyClick = async (item: any) => {
     if (!accessToken) return;
@@ -62,22 +66,87 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({
     return () => document.removeEventListener('keydown', handleEscapeKey);
   }, [isModalOpen]);
 
+  // Define columns for the table view
+  const columns = [
+    {
+      header: "Key",
+      accessorKey: "api_key",
+      cell: (info: any) => (
+        <div className="overflow-hidden">
+          <Tooltip title={info.getValue() as string}>
+            <Button 
+              size="xs"
+              variant="light"
+              className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px]"
+              onClick={() => handleKeyClick(info.row.original)}
+            >
+              {info.getValue() ? `${(info.getValue() as string).slice(0, 7)}...` : "-"}
+            </Button>
+          </Tooltip>
+        </div>
+      ),
+    },
+    {
+        header: "Key Alias",
+        accessorKey: "key_alias",
+        cell: (info: any) => info.getValue() || "-",
+      },
+    {
+      header: "Spend (USD)",
+      accessorKey: "spend",
+      cell: (info: any) => `$${Number(info.getValue()).toFixed(2)}`,
+    },
+  ];
+
   return (
     <>
-      <BarChart
-        className="mt-4 h-40 cursor-pointer"
-        data={topKeys}
-        index="key"
-        categories={["spend"]}
-        colors={["cyan"]}
-        yAxisWidth={80}
-        tickGap={5}
-        layout="vertical"
-        showXAxis={false}
-        showLegend={false}
-        valueFormatter={(value) => `$${value.toFixed(2)}`}
-        onValueChange={(item) => handleKeyClick(item)}
-      />
+      <div className="mb-4 flex justify-between items-center">
+        <div className="flex space-x-2">
+          <button
+            onClick={() => setViewMode('chart')}
+            className={`px-3 py-1 text-sm rounded-md ${viewMode === 'chart' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700'}`}
+          >
+            Chart View
+          </button>
+          <button
+            onClick={() => setViewMode('table')}
+            className={`px-3 py-1 text-sm rounded-md ${viewMode === 'table' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700'}`}
+          >
+            Table View
+          </button>
+        </div>
+      </div>
+
+      {viewMode === 'chart' ? (
+        <div className="relative">
+          <div className="mb-2 text-sm text-gray-500 italic">Click on any key to view detailed information</div>
+          <BarChart
+            className="mt-4 h-40 cursor-pointer hover:opacity-90"
+            data={topKeys}
+            index="key"
+            categories={["spend"]}
+            colors={["cyan"]}
+            yAxisWidth={80}
+            tickGap={5}
+            layout="vertical"
+            showXAxis={false}
+            showLegend={false}
+            valueFormatter={(value) => `$${value.toFixed(2)}`}
+            onValueChange={(item) => handleKeyClick(item)}
+            showTooltip={true}
+          />
+        </div>
+      ) : (
+        <div className="border rounded-lg overflow-hidden">
+          <DataTable
+            columns={columns}
+            data={topKeys}
+            renderSubComponent={() => <></>}
+            getRowCanExpand={() => false}
+            isLoading={false}
+          />
+        </div>
+      )}
 
       {isModalOpen && selectedKey && keyData && (
         <div 
diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx
index b351553d3d..cf42904e3a 100644
--- a/ui/litellm-dashboard/src/components/usage.tsx
+++ b/ui/litellm-dashboard/src/components/usage.tsx
@@ -400,8 +400,9 @@ const UsagePage: React.FC<UsagePageProps> = ({
       async () => {
         const top_keys = await adminTopKeysCall(accessToken);
         return top_keys.map((k: any) => ({
-          key: (k["key_alias"] || k["key_name"] || k["api_key"]).substring(0, 10),
+          key: (k["api_key"]).substring(0, 10),
           api_key: k["api_key"],
+          key_alias: k["key_alias"],
           spend: Number(k["total_spend"].toFixed(2)),
         }));
       },