From 2c4dd2994445d3bac715cbe9ac374717a271c5bd Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 13 Mar 2025 19:17:14 -0700
Subject: [PATCH] allow clicking into keys

---
 .../key_team_helpers/transform_key_info.tsx   | 28 +++++++++++++++++++
 .../src/components/top_key_view.tsx           | 17 +++++------
 2 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/key_team_helpers/transform_key_info.tsx

diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/transform_key_info.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/transform_key_info.tsx
new file mode 100644
index 00000000000..49e248e2bc4
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/key_team_helpers/transform_key_info.tsx
@@ -0,0 +1,28 @@
+import { KeyResponse } from "./key_list";
+
+export const transformKeyInfo = (apiResponse: any): KeyResponse => {
+  const { key, info } = apiResponse;
+  
+  return {
+    token: key,
+    key_name: info.key_name,
+    key_alias: info.key_alias,
+    spend: info.spend,
+    expires: info.expires,
+    models: info.models,
+    aliases: info.aliases,
+    config: info.config,
+    user_id: info.user_id,
+    team_id: info.team_id,
+    permissions: info.permissions,
+    max_parallel_requests: info.max_parallel_requests,
+    metadata: info.metadata,
+    tpm_limit: info.tpm_limit,
+    rpm_limit: info.rpm_limit,
+    max_budget: info.max_budget,
+    budget_duration: info.budget_duration,
+    organization_id: info.organization_id,
+    created_at: info.created_at,
+    litellm_budget_table: info.litellm_budget_table,
+  };
+};
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/components/top_key_view.tsx b/ui/litellm-dashboard/src/components/top_key_view.tsx
index 97a0c8ead6f..b031ef1fa3e 100644
--- a/ui/litellm-dashboard/src/components/top_key_view.tsx
+++ b/ui/litellm-dashboard/src/components/top_key_view.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import { BarChart } from "@tremor/react";
 import KeyInfoView from "./key_info_view";
-import { keyInfoCall } from "./networking";
+import { keyInfoV1Call } from "./networking";
+import { transformKeyInfo } from "../components/key_team_helpers/transform_key_info";
 
 interface TopKeyViewProps {
   topKeys: any[];
@@ -22,15 +23,15 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({
   const [keyData, setKeyData] = useState<any | undefined>(undefined);
 
   const handleKeyClick = async (item: any) => {
-    if (!accessToken || !item.key) return;
+    if (!accessToken) return;
     
+    console.log("Clicked item:", item);
     try {
-      // Get the full key data using the API key
-      const keyInfo = await keyInfoCall(accessToken, [item.key]);
-      if (keyInfo && keyInfo.keys && keyInfo.keys.length > 0) {
-        setKeyData(keyInfo.keys[0]);
-        setSelectedKey(item.key);
-      }
+      // Use item.key instead of item.api_key
+      const keyInfo = await keyInfoV1Call(accessToken, item.api_key);
+      const transformedKeyData = transformKeyInfo(keyInfo);
+      setKeyData(transformedKeyData);
+      setSelectedKey(item.key);
     } catch (error) {
       console.error("Error fetching key info:", error);
     }