phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

(feat) adin ui show all pending user requests

Browse source
This commit is contained in:
ishaan-jaff 2024-02-19 21:23:59 -08:00
parent 45326c93dc
commit 84652a82cb
2 changed files with 70 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

42
ui/litellm-dashboard/src/components/model_dashboard.tsx
View file

@ -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>
);