scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-03 02:22:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 81

feat(ui): migrate view_users and view_logs tremor table/select to shadcn

Browse source 
Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-04-24 13:25:10 +00:00
parent 640bae5d08
commit d4371b67c7
No known key found for this signature in database
2 changed files with 44 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ui/litellm-dashboard/src/components/view_logs/table.tsx
View file

@ -1,15 +1,14 @@
import { Fragment, useState } from "react";
import { ColumnDef, flexRender, getCoreRowModel, getExpandedRowModel, Row, useReactTable, getSortedRowModel, SortingState } from "@tanstack/react-table";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableHead,
TableHeaderCell,
TableBody,
TableRow,
TableCell,
} from "@tremor/react";
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
interface DataTableProps<TData, TValue> {
data: TData[];
@ -66,7 +65,7 @@ export function DataTable<TData, TValue>({
return (
<div className="rounded-lg custom-border overflow-x-auto w-full max-w-full box-border">
<Table className="[&_td]:py-0.5 [&_th]:py-1 table-fixed w-full box-border" style={{ minWidth: "400px" }}>
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
@ -74,7 +73,7 @@ export function DataTable<TData, TValue>({
const isSorted = header.column.getIsSorted();
return (
<TableHeaderCell
<TableHead
key={header.id}
className={`py-1 h-8 ${canSort ? "cursor-pointer select-none hover:bg-muted" : ""}`}
onClick={
@ -100,12 +99,12 @@ export function DataTable<TData, TValue>({
)}
</div>
)}
</TableHeaderCell>
</TableHead>
);
})}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>

60
ui/litellm-dashboard/src/components/view_users/table.tsx
View file

@ -6,17 +6,21 @@ import {
useReactTable,
} from "@tanstack/react-table";
import React from "react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableHead,
TableHeaderCell,
TableBody,
TableRow,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import {
Select,
SelectContent,
SelectItem,
} from "@tremor/react";
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
ArrowUpDown,
ChevronDown,
@ -286,31 +290,39 @@ export function UserDataTable({
{/* Role Dropdown */}
<div className="w-64">
<Select
value={filters.user_role}
value={filters.user_role || undefined}
onValueChange={(value) => updateFilters({ user_role: value })}
placeholder="Select Role"
>
{possibleUIRoles &&
Object.entries(possibleUIRoles).map(([key, value]) => (
<SelectItem key={key} value={key}>
{value.ui_label}
</SelectItem>
))}
<SelectTrigger>
<SelectValue placeholder="Select Role" />
</SelectTrigger>
<SelectContent>
{possibleUIRoles &&
Object.entries(possibleUIRoles).map(([key, value]) => (
<SelectItem key={key} value={key}>
{value.ui_label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* Team Dropdown */}
<div className="w-64">
<Select
value={filters.team}
value={filters.team || undefined}
onValueChange={(value) => updateFilters({ team: value })}
placeholder="Select Team"
>
{teams?.map((team) => (
<SelectItem key={team.team_id} value={team.team_id}>
{team.team_alias || team.team_id}
</SelectItem>
))}
<SelectTrigger>
<SelectValue placeholder="Select Team" />
</SelectTrigger>
<SelectContent>
{teams?.map((team) => (
<SelectItem key={team.team_id} value={team.team_id}>
{team.team_alias || team.team_id}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
@ -390,11 +402,11 @@ export function UserDataTable({
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1">
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell
<TableHead
key={header.id}
className={cn(
"py-1 h-8",
@ -429,11 +441,11 @@ export function UserDataTable({
</div>
)}
</div>
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>