scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-12 23:01:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 181

minor styling changes

Browse source
This commit is contained in:
yuneng-jiang 2025-12-20 17:51:31 -08:00
parent 901d145b1a
commit f747d12a5f
5 changed files with 82 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ui/litellm-dashboard/src/components/cache_dashboard.tsx
View file

@ -1,23 +1,23 @@
import React, { useState, useEffect } from "react";
import {
Card,
BarChart,
Subtitle,
Grid,
Card,
Col,
DateRangePickerValue,
Grid,
Icon,
MultiSelect,
MultiSelectItem,
TabPanel,
TabPanels,
Subtitle,
Tab,
TabGroup,
TabList,
Tab,
Icon,
TabPanel,
TabPanels,
Text,
} from "@tremor/react";
import UsageDatePicker from "./shared/usage_date_picker";
import React, { useEffect, useState } from "react";
import NotificationsManager from "./molecules/notifications_manager";
import UsageDatePicker from "./shared/usage_date_picker";
import { RefreshIcon } from "@heroicons/react/outline";
import { adminGlobalCacheActivity, cachingHealthCheckCall } from "./networking";
@ -271,9 +271,7 @@ const CacheDashboard: React.FC<CachePageProps> = ({ accessToken, token, userRole
<TabList className="flex justify-between mt-2 w-full items-center">
<div className="flex">
<Tab>Cache Analytics</Tab>
<Tab>
<pre>Cache Health</pre>
</Tab>
<Tab>Cache Health</Tab>
<Tab>Cache Settings</Tab>
</div>

23
ui/litellm-dashboard/src/components/organization/organization_view.test.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { render, waitFor } from "@testing-library/react";
import { render, screen, waitFor } from "@testing-library/react";
import { vi, test, expect } from "vitest";
import OrganizationInfoView from "./organization_view";
@ -82,3 +82,24 @@ test("renders organization view after loading data", async () => {
expect(findAllByText("Acme Corp")).toBeTruthy();
});
});
test("should display empty state when organization has no members", async () => {
const { organizationInfoCall } = await import("../networking");
(organizationInfoCall as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce(mockOrg);
render(
<OrganizationInfoView
organizationId="org_123"
onClose={() => {}}
accessToken="test-token"
is_org_admin={false}
is_proxy_admin={false}
userModels={[]}
editOrg={false}
/>,
);
await waitFor(() => {
expect(screen.getByText("No members found")).toBeInTheDocument();
});
});

87
ui/litellm-dashboard/src/components/organization/organization_view.tsx
View file

@ -324,7 +324,6 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
</Grid>
</TabPanel>
{/* Budget Panel */}
<TabPanel>
<div className="space-y-4">
<Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[75vh]">
@ -340,47 +339,55 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
</TableHead>
<TableBody>
{orgData.members?.map((member, index) => (
<TableRow key={index}>
<TableCell>
<Text className="font-mono">{member.user_id}</Text>
</TableCell>
<TableCell>
<Text className="font-mono">{member.user_role}</Text>
</TableCell>
<TableCell>
<Text>${formatNumberWithCommas(member.spend, 4)}</Text>
</TableCell>
<TableCell>
<Text>{new Date(member.created_at).toLocaleString()}</Text>
</TableCell>
<TableCell>
{canEditOrg && (
<>
<Icon
icon={PencilAltIcon}
size="sm"
onClick={() => {
setSelectedEditMember({
role: member.user_role,
user_email: member.user_email,
user_id: member.user_id,
});
setIsEditMemberModalVisible(true);
}}
/>
<Icon
icon={TrashIcon}
size="sm"
onClick={() => {
handleMemberDelete(member);
}}
/>
</>
)}
{orgData.members && orgData.members.length > 0 ? (
orgData.members.map((member, index) => (
<TableRow key={index}>
<TableCell>
<Text className="font-mono">{member.user_id}</Text>
</TableCell>
<TableCell>
<Text className="font-mono">{member.user_role}</Text>
</TableCell>
<TableCell>
<Text>${formatNumberWithCommas(member.spend, 4)}</Text>
</TableCell>
<TableCell>
<Text>{new Date(member.created_at).toLocaleString()}</Text>
</TableCell>
<TableCell>
{canEditOrg && (
<>
<Icon
icon={PencilAltIcon}
size="sm"
onClick={() => {
setSelectedEditMember({
role: member.user_role,
user_email: member.user_email,
user_id: member.user_id,
});
setIsEditMemberModalVisible(true);
}}
/>
<Icon
icon={TrashIcon}
size="sm"
onClick={() => {
handleMemberDelete(member);
}}
/>
</>
)}
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={5} className="text-center py-8">
<Text className="text-gray-500">No members found</Text>
</TableCell>
</TableRow>
))}
)}
</TableBody>
</Table>
</Card>

4
ui/litellm-dashboard/src/components/team/member_permissions.tsx
View file

@ -94,9 +94,9 @@ const MemberPermissions: React.FC<MemberPermissionsProps> = ({ teamId, accessTok
<Button icon={<ReloadOutlined />} onClick={handleReset}>
Reset
</Button>
<TremorButton onClick={handleSave} loading={saving} className="flex items-center gap-2">
<Button onClick={handleSave} loading={saving} type="primary">
<SaveOutlined /> Save Changes
</TremorButton>
</Button>
</div>
)}
</div>

2
ui/litellm-dashboard/src/components/team/team_info.tsx
View file

@ -508,7 +508,7 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
Back to Teams
</TremorButton>
<Title>{info.team_alias}</Title>
<div className="flex items-center cursor-pointer">
<div className="flex items-center">
<Text className="text-gray-500 font-mono">{info.team_id}</Text>
<Button
type="text"