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

ui - move model usage to usage tab

Browse source
This commit is contained in:
Ishaan Jaff 2024-04-17 15:17:07 -07:00
parent 409bd5b4ab
commit a4bebfbacc
2 changed files with 45 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,7 @@ import {
} from "@tremor/react"; } from "@tremor/react";
import { TabPanel, TabPanels, TabGroup, TabList, Tab, TextInput, Icon } from "@tremor/react"; import { TabPanel, TabPanels, TabGroup, TabList, Tab, TextInput, Icon } from "@tremor/react";
import { Select, SelectItem, MultiSelect, MultiSelectItem } from "@tremor/react"; import { Select, SelectItem, MultiSelect, MultiSelectItem } from "@tremor/react";
import { modelInfoCall, userGetRequesedtModelsCall, modelMetricsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall } from "./networking"; import { modelInfoCall, userGetRequesedtModelsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall } from "./networking";
import { BarChart } from "@tremor/react"; import { BarChart } from "@tremor/react";
import { import {
Button as Button2, Button as Button2,
@ -78,7 +78,6 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
userID, userID,
}) => { }) => {
const [modelData, setModelData] = useState<any>({ data: [] }); const [modelData, setModelData] = useState<any>({ data: [] });
const [modelMetrics, setModelMetrics] = useState<any[]>([]);
const [pendingRequests, setPendingRequests] = useState<any[]>([]); const [pendingRequests, setPendingRequests] = useState<any[]>([]);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [modelMap, setModelMap] = useState<any>(null); const [modelMap, setModelMap] = useState<any>(null);
@ -136,14 +135,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
console.log("Model data response:", modelDataResponse.data); console.log("Model data response:", modelDataResponse.data);
setModelData(modelDataResponse); 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 is Admin, show the pending requests
if (userRole === "Admin" && accessToken) { if (userRole === "Admin" && accessToken) {
@ -484,30 +476,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
</TableBody> </TableBody>
</Table> </Table>
</Card> </Card>
<Card>
<Title>Model Statistics (Number Requests)</Title>
<BarChart
data={modelMetrics}
index="model"
categories={["num_requests"]}
colors={["blue"]}
yAxisWidth={400}
layout="vertical"
tickGap={5}
/>
</Card>
<Card>
<Title>Model Statistics (Latency)</Title>
<BarChart
data={modelMetrics}
index="model"
categories={["avg_latency_seconds"]}
colors={["red"]}
yAxisWidth={400}
layout="vertical"
tickGap={5}
/>
</Card>
</Grid> </Grid>
</TabPanel> </TabPanel>
<TabPanel className="h-full"> <TabPanel className="h-full">

43
ui/litellm-dashboard/src/components/usage.tsx
View file

@ -11,7 +11,8 @@ import {
adminTopKeysCall, adminTopKeysCall,
adminTopModelsCall, adminTopModelsCall,
teamSpendLogsCall, teamSpendLogsCall,
tagsSpendLogsCall tagsSpendLogsCall,
modelMetricsCall,
} from "./networking"; } from "./networking";
import { start } from "repl"; import { start } from "repl";
@ -143,6 +144,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
const [topTagsData, setTopTagsData] = useState<any[]>([]); const [topTagsData, setTopTagsData] = useState<any[]>([]);
const [uniqueTeamIds, setUniqueTeamIds] = useState<any[]>([]); const [uniqueTeamIds, setUniqueTeamIds] = useState<any[]>([]);
const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]); const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
const [modelMetrics, setModelMetrics] = useState<any[]>([]);
const firstDay = new Date( const firstDay = new Date(
currentDate.getFullYear(), currentDate.getFullYear(),
@ -223,6 +225,8 @@ const UsagePage: React.FC<UsagePageProps> = ({
//get top tags //get top tags
const top_tags = await tagsSpendLogsCall(accessToken); const top_tags = await tagsSpendLogsCall(accessToken);
setTopTagsData(top_tags.top_10_tags); setTopTagsData(top_tags.top_10_tags);
} else if (userRole == "App Owner") { } else if (userRole == "App Owner") {
await userSpendLogsCall( await userSpendLogsCall(
accessToken, accessToken,
@ -259,6 +263,15 @@ const UsagePage: React.FC<UsagePageProps> = ({
} }
}); });
} }
const modelMetricsResponse = await modelMetricsCall(
accessToken,
userID,
userRole
);
console.log("Model metrics response:", modelMetricsResponse);
setModelMetrics(modelMetricsResponse);
} catch (error) { } catch (error) {
console.error("There was an error fetching the data", error); console.error("There was an error fetching the data", error);
// Optionally, update your UI to reflect the error state here as well // Optionally, update your UI to reflect the error state here as well
@ -281,6 +294,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Tab>All Up</Tab> <Tab>All Up</Tab>
<Tab>Team Based Usage</Tab> <Tab>Team Based Usage</Tab>
<Tab>Tag Based Usage</Tab> <Tab>Tag Based Usage</Tab>
<Tab>Model Based Usage</Tab>
</TabList> </TabList>
<TabPanels> <TabPanels>
<TabPanel> <TabPanel>
@ -420,6 +434,33 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Col> </Col>
</Grid> </Grid>
</TabPanel> </TabPanel>
<Card>
<Title>Model Statistics (Number Requests)</Title>
<BarChart
data={modelMetrics}
index="model"
categories={["num_requests"]}
colors={["blue"]}
yAxisWidth={400}
layout="vertical"
tickGap={5}
/>
</Card>
<Card>
<Title>Model Statistics (Latency)</Title>
<BarChart
data={modelMetrics}
index="model"
categories={["avg_latency_seconds"]}
colors={["red"]}
yAxisWidth={400}
layout="vertical"
tickGap={5}
/>
</Card>
<TabPanel>
</TabPanel>
</TabPanels> </TabPanels>
</TabGroup> </TabGroup>
</div> </div>