From 84652a82cbf1f515feec13918587fb0935749d07 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 19 Feb 2024 21:23:59 -0800
Subject: [PATCH 1/2] (feat) adin ui  show all pending user requests

---
 .../src/components/model_dashboard.tsx        | 42 ++++++++++++++++++-
 .../src/components/networking.tsx             | 29 +++++++++++++
 2 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index dbd5c7c94d..0696ca6ba3 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Card, Title, Subtitle, Table, TableHead, TableRow, TableCell, TableBody, Metric, Grid } from "@tremor/react";
-import { modelInfoCall } from "./networking";
+import { modelInfoCall, userGetRequesedtModelsCall } from "./networking";
 import { Badge, BadgeDelta, Button } from '@tremor/react';
 import RequestAccess from "./request_model_access";
 
@@ -18,6 +18,8 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   userID,
 }) => {
   const [modelData, setModelData] = useState<any>({ data: [] });
+  const [pendingRequests, setPendingRequests] = useState<any[]>([]);
+
 
   useEffect(() => {
     if (!accessToken || !token || !userRole || !userID) {
@@ -29,6 +31,14 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
         const modelDataResponse = await modelInfoCall(accessToken, userID,  userRole);
         console.log("Model data response:", modelDataResponse.data);
         setModelData(modelDataResponse);
+
+        // if userRole is Admin, show the pending requests 
+        if (userRole === "Admin" && accessToken) {
+          const user_requests = await userGetRequesedtModelsCall(accessToken);
+          console.log("Pending Requests:", pendingRequests);
+          setPendingRequests(user_requests.requests || []);
+        }
+
       } catch (error) {
         console.error("There was an error fetching the model data", error);
       }
@@ -91,6 +101,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   }
   // when users click request access show pop up to allow them to request access
 
+
   return (
     <div style={{ width: "100%" }}>
     <Grid className="gap-2 p-10 h-[75vh] w-full">
@@ -127,6 +138,35 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
           </TableBody>
         </Table>
       </Card>
+      {
+        userRole === "Admin" && pendingRequests ? (
+          <Card>
+            <Table>
+              <TableHead>
+                <Title>Pending Requests</Title>
+                <TableRow>
+                  <TableCell><Title>User ID</Title></TableCell>
+                  <TableCell><Title>Requested Models</Title></TableCell>
+                  <TableCell><Title>Justification</Title></TableCell>
+                  <TableCell><Title>Justification</Title></TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {pendingRequests.map((request: any) => (
+                  <TableRow key={request.request_id}>
+                    <TableCell><p>{request.user_id}</p></TableCell>
+                    <TableCell><p>{request.models[0]}</p></TableCell>
+                    <TableCell><p>{request.justification}</p></TableCell>
+                    <TableCell><p>{request.user_id}</p></TableCell>
+                    <Button>Approve</Button>
+                    <Button variant="secondary" className="ml-2">Deny</Button>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+        </Card>
+        ) : null
+      }
       </Grid>
     </div>
   );
diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index ccdc279d23..34368c8bc1 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -326,4 +326,33 @@ export const userRequestModelCall = async (accessToken: String, model: String, U
     console.error("Failed to create key:", error);
     throw error;
   }
+};
+
+
+export const userGetRequesedtModelsCall = async (accessToken: String) => {
+  try {
+    const url = proxyBaseUrl ? `${proxyBaseUrl}/user/get_requests` : `user/get_requests`;
+    console.log("in userGetRequesedtModelsCall:", url);
+    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("Failed to delete key: " + errorData);
+      throw new Error("Network response was not ok");
+    }
+    const data = await response.json();
+    console.log(data);
+    message.success("");
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to get requested models:", error);
+    throw error;
+  }
 };
\ No newline at end of file

From 9683760241ca5849ce5861c427156527b98fc8c1 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 19 Feb 2024 21:35:28 -0800
Subject: [PATCH 2/2] (ui) show pendingRequests

---
 ui/litellm-dashboard/src/components/model_dashboard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index 0696ca6ba3..edf13cf2e4 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -139,7 +139,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
         </Table>
       </Card>
       {
-        userRole === "Admin" && pendingRequests ? (
+        userRole === "Admin" && pendingRequests && pendingRequests.length > 0 ? (
           <Card>
             <Table>
               <TableHead>