(feat) show num requests, latency

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

@@ -11,7 +11,8 @@ import {
   Metric,
   Grid,
 } from "@tremor/react";
-import { modelInfoCall, userGetRequesedtModelsCall } from "./networking";
+import { modelInfoCall, userGetRequesedtModelsCall, modelMetricsCall } from "./networking";
+import { BarChart } from "@tremor/react";
 import { Badge, BadgeDelta, Button } from "@tremor/react";
 import RequestAccess from "./request_model_access";
 import { Typography } from "antd";
@@ -30,6 +31,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   userID,
 }) => {
   const [modelData, setModelData] = useState<any>({ data: [] });
+  const [modelMetrics, setModelMetrics] = useState<any[]>([]);
   const [pendingRequests, setPendingRequests] = useState<any[]>([]);
 
   useEffect(() => {
@@ -47,6 +49,15 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
         console.log("Model data response:", modelDataResponse.data);
         setModelData(modelDataResponse);
 
+        const modelMetricsResponse = await modelMetricsCall(
+          accessToken,
+          userID,
+          userRole
+        );
+
+        console.log("Model metrics response:", modelMetricsResponse);
+        setModelMetrics(modelMetricsResponse);
+
         // if userRole is Admin, show the pending requests
         if (userRole === "Admin" && accessToken) {
           const user_requests = await userGetRequesedtModelsCall(accessToken);
@@ -197,9 +208,15 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
           </Table>
         </Card>
         <Card>
-          <Title>Model Statistics</Title>
-
-          
+          <Title>Model Statistics (Number Requests, Latency)</Title>
+              <BarChart
+                data={modelMetrics}
+                index="model"
+                categories={["num_requests", "avg_latency_seconds"]}
+                colors={["blue", "red"]}
+                yAxisWidth={100}
+                tickGap={5}
+              />
         </Card>
         {/* {userRole === "Admin" &&
         pendingRequests &&

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

@@ -242,6 +242,41 @@ export const modelInfoCall = async (
   }
 };
 
+
+export const modelMetricsCall = async (
+  accessToken: String,
+  userID: String,
+  userRole: String
+) => {
+  /**
+   * Get all models on proxy
+   */
+  try {
+    let url = proxyBaseUrl ? `${proxyBaseUrl}/model/metrics` : `/model/metrics`;
+    // 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 modelAvailableCall = async (
   accessToken: String,
   userID: String,