(ui) show models page

ui/litellm-dashboard/src/app/page.tsx

@@ -3,6 +3,7 @@ import React, { Suspense, useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import Navbar from "../components/navbar";
 import UserDashboard from "../components/user_dashboard";
+import ModelDashboard from "@/components/model_dashboard";
 import Sidebar from "../components/leftnav";
 import Usage from "../components/usage";
 import { jwtDecode } from "jwt-decode";
@@ -80,7 +81,15 @@ const CreateKeyPage = () => {
               userEmail={userEmail}
               setUserEmail={setUserEmail}
             />
-          ) : (
+          ) : page == "models" ? (
+            <ModelDashboard
+              userID={userID}
+              userRole={userRole}
+              token={token}
+              accessToken={accessToken}
+            />
+          )
+          : (
             <Usage
               userID={userID}
               userRole={userRole}

ui/litellm-dashboard/src/components/leftnav.tsx

@@ -20,7 +20,10 @@ const Sidebar: React.FC<SidebarProps> = ({ setPage }) => {
           <Menu.Item key="1" onClick={() => setPage("api-keys")}>
             API Keys
           </Menu.Item>
-          <Menu.Item key="2" onClick={() => setPage("usage")}>
+          <Menu.Item key="2" onClick={() => setPage("models")}>
+            Models
+          </Menu.Item>
+          <Menu.Item key="3" onClick={() => setPage("usage")}>
             Usage
           </Menu.Item>
         </Menu>

ui/litellm-dashboard/src/components/model_dashboard.tsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from "react";
+import { Card, Title, Table, TableHead, TableRow, TableCell, TableBody } from "@tremor/react";
+import { modelInfoCall } from "./networking";
+
+interface ModelDashboardProps {
+  accessToken: string | null;
+  token: string | null;
+  userRole: string | null;
+  userID: string | null;
+}
+
+const ModelDashboard: React.FC<ModelDashboardProps> = ({
+  accessToken,
+  token,
+  userRole,
+  userID,
+}) => {
+  const [modelData, setModelData] = useState<any>({ data: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Replace with your actual API call for model data
+        const modelDataResponse = await modelInfoCall(accessToken, token, userRole, userID);
+
+        setModelData(modelDataResponse);
+      } catch (error) {
+        console.error("There was an error fetching the model data", error);
+      }
+    };
+
+    if (accessToken && token && userRole && userID) {
+      fetchData();
+    }
+  }, [accessToken, token, userRole, userID]);
+
+  return (
+    <div style={{ width: "100%" }}>
+      <Card>
+        <Title>Models Page</Title>
+        <Table className="mt-5">
+          <TableHead>
+            <TableRow>
+              <TableCell>Model Name</TableCell>
+              <TableCell>Model Info</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {modelData.data.map((model: any) => (
+              <TableRow key={model.model_name}>
+                <TableCell>{model.model_name}</TableCell>
+                {/* <TableCell>{model.model_info}</TableCell> */}
+                {/* Add other TableCell for Model Info if needed */}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Card>
+    </div>
+  );
+};
+
+export default ModelDashboard;

ui/litellm-dashboard/src/components/networking.tsx

@@ -137,6 +137,41 @@ export const userInfoCall = async (
   }
 };
 
+
+
+export const modelInfoCall = async (
+  accessToken: String,
+  userID: String,
+  userRole: String
+) => {
+  try {
+    let url = proxyBaseUrl ? `${proxyBaseUrl}/model/info` : `/model/info`;
+
+    message.info("Requesting model data");
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.text();
+      message.error(errorData);
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    message.info("Received model data");
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+};
+
 export const keySpendLogsCall = async (accessToken: String, token: String) => {
   try {
     const url = proxyBaseUrl ? `${proxyBaseUrl}/spend/logs` : `/spend/logs`;