forked from phoenix/litellm-mirror
ui - show models analytics
This commit is contained in:
Ishaan Jaff
parent
b9a0a13516
commit
49f83ce204
1 changed files with 0 additions and 118 deletions
|
|
@ -146,10 +146,6 @@ const UsagePage: React.FC<UsagePageProps> = ({
|
|||
const [topTagsData, setTopTagsData] = useState<any[]>([]);
|
||||
const [uniqueTeamIds, setUniqueTeamIds] = useState<any[]>([]);
|
||||
const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
|
||||
const [modelMetrics, setModelMetrics] = useState<any[]>([]);
|
||||
const [modelLatencyMetrics, setModelLatencyMetrics] = useState<any[]>([]);
|
||||
const [modelGroups, setModelGroups] = useState<any[]>([]);
|
||||
const [selectedModelGroup, setSelectedModelGroup] = useState<string | null>(null);
|
||||
|
||||
const firstDay = new Date(
|
||||
currentDate.getFullYear(),
|
||||
|
|
@ -231,25 +227,6 @@ const UsagePage: React.FC<UsagePageProps> = ({
|
|||
const top_tags = await tagsSpendLogsCall(accessToken);
|
||||
setTopTagsData(top_tags.top_10_tags);
|
||||
|
||||
// get model groups
|
||||
const _model_groups = await modelInfoCall(accessToken, userID, userRole);
|
||||
let model_groups = _model_groups.data;
|
||||
console.log("model groups in model dashboard", model_groups);
|
||||
|
||||
let available_model_groups = [];
|
||||
// loop through each model in model_group, access litellm_params and only inlclude the model if model["litellm_params"]["model"] startswith "azure/"
|
||||
for (let i = 0; i < model_groups.length; i++) {
|
||||
let model = model_groups[i];
|
||||
console.log("model check", model);
|
||||
let model_group = model["litellm_params"]["model"];
|
||||
console.log("model group", model_group);
|
||||
if (model_group.startsWith("azure/")) {
|
||||
available_model_groups.push(model["model_name"]);
|
||||
}
|
||||
}
|
||||
setModelGroups(available_model_groups);
|
||||
|
||||
|
||||
} else if (userRole == "App Owner") {
|
||||
await userSpendLogsCall(
|
||||
accessToken,
|
||||
|
|
@ -286,22 +263,6 @@ const UsagePage: React.FC<UsagePageProps> = ({
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
const modelMetricsResponse = await modelMetricsCall(
|
||||
accessToken,
|
||||
userID,
|
||||
userRole,
|
||||
null
|
||||
);
|
||||
|
||||
console.log("Model metrics response:", modelMetricsResponse);
|
||||
// Sort by latency (avg_latency_seconds)
|
||||
const sortedByLatency = [...modelMetricsResponse].sort((a, b) => b.avg_latency_seconds - a.avg_latency_seconds);
|
||||
console.log("Sorted by latency:", sortedByLatency);
|
||||
|
||||
setModelMetrics(modelMetricsResponse);
|
||||
setModelLatencyMetrics(sortedByLatency);
|
||||
|
||||
} catch (error) {
|
||||
console.error("There was an error fetching the data", error);
|
||||
// Optionally, update your UI to reflect the error state here as well
|
||||
|
|
@ -312,30 +273,6 @@ const UsagePage: React.FC<UsagePageProps> = ({
|
|||
}, [accessToken, token, userRole, userID, startTime, endTime]);
|
||||
|
||||
|
||||
const updateModelMetrics = async (modelGroup: string | null) => {
|
||||
console.log("Updating model metrics for group:", modelGroup);
|
||||
if (!accessToken || !userID || !userRole) {
|
||||
return
|
||||
}
|
||||
setSelectedModelGroup(modelGroup); // If you want to store the selected model group in state
|
||||
|
||||
|
||||
try {
|
||||
const modelMetricsResponse = await modelMetricsCall(accessToken, userID, userRole, modelGroup);
|
||||
console.log("Model metrics response:", modelMetricsResponse);
|
||||
|
||||
// Assuming modelMetricsResponse now contains the metric data for the specified model group
|
||||
const sortedByLatency = [...modelMetricsResponse].sort((a, b) => b.avg_latency_seconds - a.avg_latency_seconds);
|
||||
console.log("Sorted by latency:", sortedByLatency);
|
||||
|
||||
setModelMetrics(modelMetricsResponse);
|
||||
setModelLatencyMetrics(sortedByLatency);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch model metrics", error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div style={{ width: "100%" }} className="p-8">
|
||||
<ViewUserSpend
|
||||
|
|
@ -350,7 +287,6 @@ const UsagePage: React.FC<UsagePageProps> = ({
|
|||
<Tab>All Up</Tab>
|
||||
<Tab>Team Based Usage</Tab>
|
||||
<Tab>Tag Based Usage</Tab>
|
||||
<Tab>Model Based Usage</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
|
|
@ -492,60 +428,6 @@ const UsagePage: React.FC<UsagePageProps> = ({
|
|||
</Grid>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
<Title>Filter By Model Group</Title>
|
||||
<p style={{fontSize: '0.85rem', color: '#808080'}}>View how requests were load balanced within a model group</p>
|
||||
<p style={{fontSize: '0.85rem', color: '#808080', fontStyle: 'italic'}}>(Beta feature) only supported for Azure Model Groups</p>
|
||||
|
||||
|
||||
<Select
|
||||
className="mb-4 mt-2"
|
||||
defaultValue="all"
|
||||
>
|
||||
<SelectItem
|
||||
value={"all"}
|
||||
onClick={() => updateModelMetrics(null)}
|
||||
>
|
||||
All Model Groups
|
||||
</SelectItem>
|
||||
{modelGroups.map((group, idx) => (
|
||||
<SelectItem
|
||||
key={idx}
|
||||
value={group}
|
||||
onClick={() => updateModelMetrics(group)}
|
||||
>
|
||||
{group}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
<Card>
|
||||
<Title>Number Requests per Model</Title>
|
||||
<BarChart
|
||||
data={modelMetrics}
|
||||
className="h-[50vh]"
|
||||
index="model"
|
||||
categories={["num_requests"]}
|
||||
colors={["blue"]}
|
||||
yAxisWidth={400}
|
||||
layout="vertical"
|
||||
tickGap={5}
|
||||
/>
|
||||
</Card>
|
||||
<Card className="mt-4">
|
||||
<Title>Latency Per Model</Title>
|
||||
<BarChart
|
||||
data={modelLatencyMetrics}
|
||||
className="h-[50vh]"
|
||||
index="model"
|
||||
categories={["avg_latency_seconds"]}
|
||||
colors={["red"]}
|
||||
yAxisWidth={400}
|
||||
layout="vertical"
|
||||
tickGap={5}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue