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

Merge pull request #19278 from BerriAI/litellm_ui_update_new_badges

Browse Source 
[Refactor] UI - Adjusting New Badges
This commit is contained in:
yuneng-jiang
2026-01-17 09:17:15 -08:00
committed by GitHub
parent 362081c2b9 1301896e03
commit 23a06a04a3
4 changed files with 30 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx
+6 -9
View File
@@ -24,7 +24,6 @@ import {
} from "@tremor/react";
import React, { useEffect, useState } from "react";
import { ActivityMetrics, processActivityData } from "../../../activity_metrics";
import NewBadge from "../../../common_components/NewBadge";
import { UsageExportHeader } from "../../../EntityUsageExport";
import type { EntityType } from "../../../EntityUsageExport/types";
import {
@@ -395,14 +394,12 @@ const EntityUsage: React.FC<EntityUsageProps> = ({ accessToken, entityType, enti
teams={teams || []}
/>
<TabGroup>
<NewBadge>
<TabList variant="solid" className="mt-1">
<Tab>Cost</Tab>
<Tab>{entityType === "agent" ? "Request / Token Consumption" : "Model Activity"}</Tab>
<Tab>Key Activity</Tab>
<Tab>Endpoint Activity</Tab>
</TabList>
</NewBadge>
<TabList variant="solid" className="mt-1">
<Tab>Cost</Tab>
<Tab>{entityType === "agent" ? "Request / Token Consumption" : "Model Activity"}</Tab>
<Tab>Key Activity</Tab>
<Tab>Endpoint Activity</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Grid numItems={2} className="gap-2 w-full">
ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
+15 -20
View File
@@ -39,7 +39,6 @@ import { Button } from "@tremor/react";
import { all_admin_roles } from "../../../utils/roles";
import { ActivityMetrics, processActivityData } from "../../activity_metrics";
import CloudZeroExportModal from "../../cloudzero_export_modal";
import NewBadge from "../../common_components/NewBadge";
import EntityUsageExportModal from "../../EntityUsageExport";
import { Team } from "../../key_team_helpers/key_list";
import { Organization, tagListCall, userDailyActivityAggregatedCall, userDailyActivityCall } from "../../networking";
@@ -438,15 +437,13 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
{usageView === "global" && (
<TabGroup>
<div className="flex justify-between items-center">
<NewBadge>
<TabList variant="solid" className="mt-1">
<Tab>Cost</Tab>
<Tab>Model Activity</Tab>
<Tab>Key Activity</Tab>
<Tab>MCP Server Activity</Tab>
<Tab>Endpoint Activity</Tab>
</TabList>
</NewBadge>
<TabList variant="solid" className="mt-1">
<Tab>Cost</Tab>
<Tab>Model Activity</Tab>
<Tab>Key Activity</Tab>
<Tab>MCP Server Activity</Tab>
<Tab>Endpoint Activity</Tab>
</TabList>
<Button
onClick={() => setIsGlobalExportModalOpen(true)}
icon={() => (
@@ -604,21 +601,19 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
/>
<div className="flex bg-gray-100 rounded-lg p-1">
<button
className={`px-3 py-1 text-sm rounded-md transition-colors ${
modelViewType === "groups"
? "bg-white shadow-sm text-gray-900"
: "text-gray-600 hover:text-gray-900"
}`}
className={`px-3 py-1 text-sm rounded-md transition-colors ${modelViewType === "groups"
? "bg-white shadow-sm text-gray-900"
: "text-gray-600 hover:text-gray-900"
}`}
onClick={() => setModelViewType("groups")}
>
Public Model Name
</button>
<button
className={`px-3 py-1 text-sm rounded-md transition-colors ${
modelViewType === "individual"
? "bg-white shadow-sm text-gray-900"
: "text-gray-600 hover:text-gray-900"
}`}
className={`px-3 py-1 text-sm rounded-md transition-colors ${modelViewType === "individual"
? "bg-white shadow-sm text-gray-900"
: "text-gray-600 hover:text-gray-900"
}`}
onClick={() => setModelViewType("individual")}
>
Litellm Model Name
ui/litellm-dashboard/src/components/leftnav.tsx
+6 -6
View File
@@ -152,16 +152,16 @@ const Sidebar: React.FC<SidebarProps> = ({ setPage, defaultSelectedKey, collapse
page: "new_usage",
icon: <BarChartOutlined />,
roles: [...all_admin_roles, ...internalUserRoles],
label: (
<span className="flex items-center gap-4">
Usage <NewBadge />
</span>
),
label: "Usage",
},
{
key: "logs",
page: "logs",
label: "Logs",
label: (
<span className="flex items-center gap-4">
Logs <NewBadge />
</span>
),
icon: <LineChartOutlined />,
},
],
ui/litellm-dashboard/src/components/view_logs/index.tsx
+3 -2
View File
@@ -30,6 +30,7 @@ import { formatNumberWithCommas } from "@/utils/dataUtils";
import { truncateString } from "@/utils/textUtils";
import DeletedKeysPage from "../DeletedKeysPage/DeletedKeysPage";
import DeletedTeamsPage from "../DeletedTeamsPage/DeletedTeamsPage";
import NewBadge from "../common_components/NewBadge";
interface SpendLogsTableProps {
accessToken: string | null;
@@ -504,8 +505,8 @@ export default function SpendLogsTable({
<TabList>
<Tab>Request Logs</Tab>
<Tab>Audit Logs</Tab>
<Tab>Deleted Keys</Tab>
<Tab>Deleted Teams</Tab>
<Tab><>Deleted Keys <NewBadge /></></Tab>
<Tab><>Deleted Teams <NewBadge /></></Tab>
</TabList>
<TabPanels>
<TabPanel>