scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-06 02:48:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

Merge pull request #18537 from BerriAI/litellm_ui_antd_input_css

Browse source 
[Feature] UI - New Badge Reusable Component + Update New bade for features
This commit is contained in:
yuneng-jiang 2025-12-30 19:21:06 -08:00 • committed by GitHub
commit 3d024b7a89
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/litellm-dashboard/src/components/common_components/NewBadge.tsx Normal file
View file

@ -0,0 +1,5 @@
import { Badge } from "antd";
export default function NewBadge() {
return <Badge color="blue" count="New" />;
}

21
ui/litellm-dashboard/src/components/leftnav.tsx
View file

@ -24,11 +24,12 @@ import {
UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Badge, ConfigProvider, Layout, Menu } from "antd";
import { ConfigProvider, Layout, Menu } from "antd";
import { useMemo } from "react";
import { all_admin_roles, internalUserRoles, isAdminRole, rolesWithWriteAccess } from "../utils/roles";
import type { Organization } from "./networking";
import UsageIndicator from "./usage_indicator";
import NewBadge from "./common_components/NewBadge";
const { Sider } = Layout;
// Define the props type
@ -103,11 +104,7 @@ const Sidebar: React.FC<SidebarProps> = ({ setPage, defaultSelectedKey, collapse
{
key: "agents",
page: "agents",
label: (
<span className="flex items-center gap-4">
Agents <Badge color="blue" count="New" />
</span>
),
label: <span className="flex items-center gap-4">Agents</span>,
icon: <RobotOutlined />,
roles: rolesWithWriteAccess,
},
@ -155,11 +152,7 @@ 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 <Badge color="blue" count="New" />
</span>
),
label: <span className="flex items-center gap-4">Usage</span>,
},
{
key: "logs",
@ -267,7 +260,11 @@ const Sidebar: React.FC<SidebarProps> = ({ setPage, defaultSelectedKey, collapse
{
key: "settings",
page: "settings",
label: "Settings",
label: (
<span className="flex items-center gap-4">
Settings <NewBadge />
</span>
),
icon: <SettingOutlined />,
roles: all_admin_roles,
children: [

5
ui/litellm-dashboard/src/components/settings.tsx
View file

@ -40,6 +40,7 @@ import { AlertingObject } from "./Settings/LoggingAndAlerts/LoggingCallbacks/typ
import { parseErrorMessage } from "./shared/errorUtils";
import DeleteResourceModal from "./common_components/DeleteResourceModal";
import CloudZeroCostTracking from "./CloudZeroCostTracking/CloudZeroCostTracking";
import NewBadge from "./common_components/NewBadge";
interface SettingsPageProps {
accessToken: string | null;
userRole: string | null;
@ -569,7 +570,9 @@ const Settings: React.FC<SettingsPageProps> = ({ accessToken, userRole, userID,
<TabGroup>
<TabList variant="line" defaultValue="1">
<Tab value="1">Logging Callbacks</Tab>
<Tab value="2">CloudZero Cost Tracking</Tab>
<Tab value="2">
CloudZero Cost Tracking <NewBadge />
</Tab>
<Tab value="2">Alerting Types</Tab>
<Tab value="3">Alerting Settings</Tab>
<Tab value="4">Email Alerts</Tab>