tiennm99/litellm
1
0
Fork 0
mirror of https://github.com/tiennm99/litellm.git synced 2026-07-30 16:22:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

extracted FilterByContent

Browse Source
This commit is contained in:
Achintya Rajan
2025-10-10 16:29:49 -07:00
parent a7e897a671
commit f8f94b71f0
3 changed files with 146 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelAnalyticsTab/FilterByContent.tsx
+134
View File
@@ -0,0 +1,134 @@
import { Select, SelectItem, Text } from "@tremor/react";
import React, { useState } from "react";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import { Team } from "@/components/key_team_helpers/key_list";
interface FilterByContentProps {
setSelectedAPIKey: (key: any) => void;
keys: any[] | null;
teams: Team[] | null;
setSelectedCustomer: (customer: string | null) => void;
allEndUsers: any[];
}
const FilterByContent = ({
setSelectedAPIKey,
keys,
teams,
setSelectedCustomer,
allEndUsers,
}: FilterByContentProps) => {
const { premiumUser } = useAuthorized();
const [selectedTeamFilter, setSelectedTeamFilter] = useState<string | null>(null);
return (
<div>
<Text className="mb-1">Select API Key Name</Text>
{premiumUser ? (
<div>
<Select defaultValue="all-keys">
<SelectItem
key="all-keys"
value="all-keys"
onClick={() => {
setSelectedAPIKey(null);
}}
>
All Keys
</SelectItem>
{keys?.map((key: any, index: number) => {
if (key && key["key_alias"] !== null && key["key_alias"].length > 0) {
return (
<SelectItem
key={index}
value={String(index)}
onClick={() => {
setSelectedAPIKey(key);
}}
>
{key["key_alias"]}
</SelectItem>
);
}
return null;
})}
</Select>
<Text className="mt-1">Select Customer Name</Text>
<Select defaultValue="all-customers">
<SelectItem
key="all-customers"
value="all-customers"
onClick={() => {
setSelectedCustomer(null);
}}
>
All Customers
</SelectItem>
{allEndUsers?.map((user: any, index: number) => {
return (
<SelectItem
key={index}
value={user}
onClick={() => {
setSelectedCustomer(user);
}}
>
{user}
</SelectItem>
);
})}
</Select>
<Text className="mt-1">Select Team</Text>
<Select
className="w-64 relative z-50"
defaultValue="all"
value={selectedTeamFilter ?? "all"}
onValueChange={(value) => setSelectedTeamFilter(value === "all" ? null : value)}
>
<SelectItem value="all">All Teams</SelectItem>
{teams
?.filter((team) => team.team_id)
.map((team) => (
<SelectItem key={team.team_id} value={team.team_id}>
{team.team_alias
? `${team.team_alias} (${team.team_id.slice(0, 8)}...)`
: `Team ${team.team_id.slice(0, 8)}...`}
</SelectItem>
))}
</Select>
</div>
) : (
<div>
{/* ... existing non-premium user content ... */}
<Text className="mt-1">Select Team</Text>
<Select
className="w-64 relative z-50"
defaultValue="all"
value={selectedTeamFilter ?? "all"}
onValueChange={(value) => setSelectedTeamFilter(value === "all" ? null : value)}
>
<SelectItem value="all">All Teams</SelectItem>
{teams
?.filter((team) => team.team_id)
.map((team) => (
<SelectItem key={team.team_id} value={team.team_id}>
{team.team_alias
? `${team.team_alias} (${team.team_id.slice(0, 8)}...)`
: `Team ${team.team_id.slice(0, 8)}...`}
</SelectItem>
))}
</Select>
</div>
)}
</div>
);
};
export default FilterByContent;
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelAnalyticsTab.tsx → ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelAnalyticsTab/ModelAnalyticsTab.tsx
+11 -112
View File
@@ -27,7 +27,7 @@ import UsageDatePicker from "@/components/shared/usage_date_picker";
import { Popover } from "antd";
import { FilterIcon } from "@heroicons/react/outline";
import TimeToFirstToken from "@/components/model_metrics/time_to_first_token";
import React, { useEffect, useState } from "react";
import React, { useEffect } from "react";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import { Team } from "@/components/key_team_helpers/key_list";
import {
@@ -38,6 +38,7 @@ import {
modelMetricsSlowResponsesCall,
streamingModelMetricsCall,
} from "@/components/networking";
import FilterByContent from "@/app/(dashboard)/models-and-endpoints/components/ModelAnalyticsTab/FilterByContent";
interface GlobalExceptionActivityData {
sum_num_rate_limit_exceptions: number;
@@ -117,120 +118,10 @@ const ModelAnalyticsTab = ({
}: ModelAnalyticsTabProps) => {
const { accessToken, userId, userRole, premiumUser } = useAuthorized();
const [selectedTeamFilter, setSelectedTeamFilter] = useState<string | null>(null);
useEffect(() => {
updateModelMetrics(selectedModelGroup, dateValue.from, dateValue.to);
}, [selectedAPIKey, selectedCustomer, selectedTeam]);
const FilterByContent = (
<div>
<Text className="mb-1">Select API Key Name</Text>
{premiumUser ? (
<div>
<Select defaultValue="all-keys">
<SelectItem
key="all-keys"
value="all-keys"
onClick={() => {
setSelectedAPIKey(null);
}}
>
All Keys
</SelectItem>
{keys?.map((key: any, index: number) => {
if (key && key["key_alias"] !== null && key["key_alias"].length > 0) {
return (
<SelectItem
key={index}
value={String(index)}
onClick={() => {
setSelectedAPIKey(key);
}}
>
{key["key_alias"]}
</SelectItem>
);
}
return null;
})}
</Select>
<Text className="mt-1">Select Customer Name</Text>
<Select defaultValue="all-customers">
<SelectItem
key="all-customers"
value="all-customers"
onClick={() => {
setSelectedCustomer(null);
}}
>
All Customers
</SelectItem>
{allEndUsers?.map((user: any, index: number) => {
return (
<SelectItem
key={index}
value={user}
onClick={() => {
setSelectedCustomer(user);
}}
>
{user}
</SelectItem>
);
})}
</Select>
<Text className="mt-1">Select Team</Text>
<Select
className="w-64 relative z-50"
defaultValue="all"
value={selectedTeamFilter ?? "all"}
onValueChange={(value) => setSelectedTeamFilter(value === "all" ? null : value)}
>
<SelectItem value="all">All Teams</SelectItem>
{teams
?.filter((team) => team.team_id)
.map((team) => (
<SelectItem key={team.team_id} value={team.team_id}>
{team.team_alias
? `${team.team_alias} (${team.team_id.slice(0, 8)}...)`
: `Team ${team.team_id.slice(0, 8)}...`}
</SelectItem>
))}
</Select>
</div>
) : (
<div>
{/* ... existing non-premium user content ... */}
<Text className="mt-1">Select Team</Text>
<Select
className="w-64 relative z-50"
defaultValue="all"
value={selectedTeamFilter ?? "all"}
onValueChange={(value) => setSelectedTeamFilter(value === "all" ? null : value)}
>
<SelectItem value="all">All Teams</SelectItem>
{teams
?.filter((team) => team.team_id)
.map((team) => (
<SelectItem key={team.team_id} value={team.team_id}>
{team.team_alias
? `${team.team_alias} (${team.team_id.slice(0, 8)}...)`
: `Team ${team.team_id.slice(0, 8)}...`}
</SelectItem>
))}
</Select>
</div>
)}
</div>
);
const updateModelMetrics = async (
modelGroup: string | null,
startTime: Date | undefined,
@@ -367,7 +258,15 @@ const ModelAnalyticsTab = ({
<Col>
<Popover
trigger="click"
content={FilterByContent}
content={
<FilterByContent
allEndUsers={allEndUsers}
keys={keys}
setSelectedAPIKey={setSelectedAPIKey}
setSelectedCustomer={setSelectedCustomer}
teams={teams}
/>
}
overlayStyle={{
width: "20vw",
}}
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/model_dashboard.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ import NotificationsManager from "../../../components/molecules/notifications_ma
import AllModelsTab from "@/app/(dashboard)/models-and-endpoints/components/AllModelsTab";
import PriceDataManagementTab from "@/app/(dashboard)/models-and-endpoints/components/PriceDataManagementTab";
import ModelRetrySettingsTab from "@/app/(dashboard)/models-and-endpoints/components/ModelRetrySettingsTab";
import ModelAnalyticsTab from "@/app/(dashboard)/models-and-endpoints/components/ModelAnalyticsTab";
import ModelAnalyticsTab from "@/app/(dashboard)/models-and-endpoints/components/ModelAnalyticsTab/ModelAnalyticsTab";
interface ModelDashboardProps {
accessToken: string | null;