From 219cd414f39993c85cbd66c31307758e1b8394f6 Mon Sep 17 00:00:00 2001 From: Chesars Date: Wed, 21 Jan 2026 14:54:27 -0300 Subject: [PATCH] Fix model management page UI improvements - Delete button now shows confirmation modal instead of redirecting to detail page - Entire table row is clickable to view model details - Fixed Last Refreshed text alignment and shortened time format - Added dismiss button (X) to Missing provider banner with localStorage persistence - Added compact Request Provider button in header when banner is dismissed --- .../ModelsAndEndpointsView.tsx | 116 ++++++++++++------ .../components/AllModelsTab.tsx | 65 +++++++++- .../src/components/model_dashboard/table.tsx | 8 +- .../components/molecules/models/columns.tsx | 18 ++- 4 files changed, 160 insertions(+), 47 deletions(-) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx index 6a4882a92a2..9a96cb33a5c 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx @@ -15,7 +15,7 @@ import { transformModelData } from "./utils/modelDataTransformer"; import { all_admin_roles, internalUserRoles, isProxyAdminRole, isUserTeamAdminForAnyTeam } from "@/utils/roles"; import { RefreshIcon } from "@heroicons/react/outline"; import { useQueryClient } from "@tanstack/react-query"; -import { Col, Grid, Icon, Tab, TabGroup, TabList, TabPanel, TabPanels, Text } from "@tremor/react"; +import { Col, Grid, Icon, Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react"; import type { UploadProps } from "antd"; import { Form, Typography } from "antd"; import { PlusCircleOutlined } from "@ant-design/icons"; @@ -62,6 +62,12 @@ const ModelsAndEndpointsView: React.FC = ({ premiumUser, te const [selectedModelId, setSelectedModelId] = useState(null); const [selectedTeamId, setSelectedTeamId] = useState(null); const [selectedTabIndex, setSelectedTabIndex] = useState(0); + const [showMissingProviderBanner, setShowMissingProviderBanner] = useState(() => { + if (typeof window !== "undefined") { + return localStorage.getItem("hideMissingProviderBanner") !== "true"; + } + return true; + }); const queryClient = useQueryClient(); const { data: modelDataResponse, isLoading: isLoadingModels, refetch: refetchModels } = useModelsInfo(); @@ -153,7 +159,7 @@ const ModelsAndEndpointsView: React.FC = ({ premiumUser, te const handleRefreshClick = () => { const currentDate = new Date(); - setLastRefreshed(currentDate.toLocaleString()); + setLastRefreshed(currentDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })); queryClient.invalidateQueries({ queryKey: ["models", "list"] }); refetchModels(); }; @@ -275,43 +281,75 @@ const ModelsAndEndpointsView: React.FC = ({ premiumUser, te

Add and manage models for the proxy

)} + {!showMissingProviderBanner && ( + + + Request Provider + + )} {/* Missing Provider Banner */} -
-
- -
-
-

Missing a provider?

-

- The LiteLLM engineering team is constantly adding support for new LLM models, providers, endpoints. If - you don't see the one you need, let us know and we'll prioritize it. -

-
- - Request Provider - +
+ +
+
+

Missing a provider?

+

+ The LiteLLM engineering team is constantly adding support for new LLM models, providers, endpoints. If + you don't see the one you need, let us know and we'll prioritize it. +

+
+ - - - -
+ Request Provider + + + + + + + )} {selectedModelId && !isLoading ? ( = ({ premiumUser, te {all_admin_roles.includes(userRole) && Price Data Reload} -
- {lastRefreshed && Last Refreshed: {lastRefreshed}} +
+ {lastRefreshed && Last Refreshed: {lastRefreshed}}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx index a5553fa5f56..25ca5f4cf5e 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx @@ -5,8 +5,12 @@ import { Team } from "@/components/key_team_helpers/key_list"; import { AllModelsDataTable } from "@/components/model_dashboard/all_models_table"; import { columns } from "@/components/molecules/models/columns"; import { getDisplayModelName } from "@/components/view_model/model_name_display"; +import DeleteResourceModal from "@/components/common_components/DeleteResourceModal"; +import NotificationsManager from "@/components/molecules/notifications_manager"; +import { modelDeleteCall } from "@/components/networking"; import { InfoCircleOutlined } from "@ant-design/icons"; import { PaginationState, SortingState } from "@tanstack/react-table"; +import { useQueryClient } from "@tanstack/react-query"; import { Grid, Select, SelectItem, TabPanel, Text } from "@tremor/react"; import { Skeleton, Spin } from "antd"; import debounce from "lodash/debounce"; @@ -33,8 +37,9 @@ const AllModelsTab = ({ setSelectedTeamId, }: AllModelsTabProps) => { const { data: modelCostMapData, isLoading: isLoadingModelCostMap } = useModelCostMap(); - const { userId, userRole, premiumUser } = useAuthorized(); + const { accessToken, userId, userRole, premiumUser } = useAuthorized(); const { data: teams, isLoading: isLoadingTeams } = useTeams(); + const queryClient = useQueryClient(); const [modelNameSearch, setModelNameSearch] = useState(""); const [debouncedSearch, setDebouncedSearch] = useState(""); @@ -92,7 +97,7 @@ const AllModelsTab = ({ return sort.desc ? "desc" : "asc"; }, [sorting]); - const { data: rawModelData, isLoading: isLoadingModelsInfo } = useModelsInfo( + const { data: rawModelData, isLoading: isLoadingModelsInfo, refetch: refetchModels } = useModelsInfo( currentPage, pageSize, debouncedSearch || undefined, @@ -117,6 +122,9 @@ const AllModelsTab = ({ return transformModelData(rawModelData, getProviderFromModel); }, [rawModelData, modelCostMapData]); + const [deleteModalModelId, setDeleteModalModelId] = useState(null); + const [deleteLoading, setDeleteLoading] = useState(false); + // Get pagination metadata from the response const paginationMeta = useMemo(() => { if (!rawModelData) { @@ -187,6 +195,28 @@ const AllModelsTab = ({ setSorting([]); }; + const modelToDelete = useMemo(() => { + if (!deleteModalModelId || !modelData?.data) return null; + return modelData.data.find((model: any) => model.model_info.id === deleteModalModelId); + }, [deleteModalModelId, modelData]); + + const handleDeleteModel = async () => { + if (!accessToken || !deleteModalModelId) return; + try { + setDeleteLoading(true); + await modelDeleteCall(accessToken, deleteModalModelId); + NotificationsManager.success("Model deleted successfully"); + queryClient.invalidateQueries({ queryKey: ["models", "list"] }); + refetchModels(); + } catch (error) { + console.error("Error deleting model:", error); + NotificationsManager.fromBackend("Failed to delete model"); + } finally { + setDeleteLoading(false); + setDeleteModalModelId(null); + } + }; + return ( @@ -481,6 +511,7 @@ const AllModelsTab = ({ () => { }, expandedRows, setExpandedRows, + setDeleteModalModelId, )} data={filteredData} isLoading={isLoadingModelsInfo} @@ -489,10 +520,40 @@ const AllModelsTab = ({ pagination={pagination} onPaginationChange={setPagination} enablePagination={true} + onRowClick={(model: any) => setSelectedModelId(model.model_info.id)} />
+ + setDeleteModalModelId(null)} + onOk={handleDeleteModel} + confirmLoading={deleteLoading} + /> ); }; diff --git a/ui/litellm-dashboard/src/components/model_dashboard/table.tsx b/ui/litellm-dashboard/src/components/model_dashboard/table.tsx index 79224edba43..b7c416a2199 100644 --- a/ui/litellm-dashboard/src/components/model_dashboard/table.tsx +++ b/ui/litellm-dashboard/src/components/model_dashboard/table.tsx @@ -30,6 +30,7 @@ interface ModelDataTableProps { pagination?: PaginationState; onPaginationChange?: OnChangeFn; enablePagination?: boolean; + onRowClick?: (row: TData) => void; } export function ModelDataTable({ @@ -40,6 +41,7 @@ export function ModelDataTable({ pagination, onPaginationChange, enablePagination = false, + onRowClick, }: ModelDataTableProps) { const [sorting, setSorting] = React.useState(defaultSorting); const [columnResizeMode] = React.useState("onChange"); @@ -157,7 +159,11 @@ export function ModelDataTable({ ) : tableInstance.getRowModel().rows.length > 0 ? ( tableInstance.getRowModel().rows.map((row) => ( - + onRowClick?.(row.original)} + className={onRowClick ? "cursor-pointer hover:bg-gray-50" : ""} + > {row.getVisibleCells().map((cell) => ( void, expandedRows: Set, setExpandedRows: (expandedRows: Set) => void, + onDeleteClick?: (modelId: string) => void, ): ColumnDef[] => [ { header: () => Model ID, @@ -27,7 +28,10 @@ export const columns = (
setSelectedModelId(model.model_info.id)} + onClick={(e) => { + e.stopPropagation(); + setSelectedModelId(model.model_info.id); + }} > {model.model_info.id}
@@ -195,7 +199,10 @@ export const columns = ( size="xs" variant="light" className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px]" - onClick={() => setSelectedTeamId(model.model_info.team_id)} + onClick={(e: React.MouseEvent) => { + e.stopPropagation(); + setSelectedTeamId(model.model_info.team_id); + }} > {model.model_info.team_id.slice(0, 7)}... @@ -300,9 +307,10 @@ export const columns = ( { - if (canEditModel) { - setSelectedModelId(model.model_info.id); + onClick={(e) => { + e.stopPropagation(); + if (canEditModel && onDeleteClick) { + onDeleteClick(model.model_info.id); } }} className={!canEditModel ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-red-600"}