diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx index 93ee6d9f0ab..65a5e5818a0 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx @@ -22,6 +22,7 @@ export const UPDATED_AT_COLUMN_ID = "model_info_updated_at"; export const COSTS_COLUMN_ID = "input_cost"; export const TEAM_ID_COLUMN_ID = "model_info_team_id"; export const ACCESS_GROUPS_COLUMN_ID = "model_info_access_groups"; +export const TAGS_COLUMN_ID = "model_info_tags"; export const STATUS_COLUMN_ID = "model_info_db_model"; const COLUMN_ID_TO_SERVER_SORT_FIELD: Record = { @@ -243,6 +244,38 @@ function AccessGroupsCell({ accessGroups }: { accessGroups: string[] | null }) { ); } +function TagsCell({ tags }: { tags: string[] | null }) { + if (!tags || tags.length === 0) { + return -; + } + + const [first, ...overflow] = tags; + + return ( +
+ + {first} + + {overflow.length > 0 && ( + + {overflow.map((tag) => ( + {tag} + ))} +
+ } + trigger={ + + +{overflow.length} more + + } + /> + )} + + ); +} + interface ModelRowActionsProps { model: ModelData; userRole: string; @@ -450,6 +483,16 @@ export const getModelsTableColumns = ({ minSize: 120, cell: ({ row }) => , }, + { + id: TAGS_COLUMN_ID, + accessorFn: (row) => row.tags ?? [], + meta: { title: "Tags", skeleton: "chips" }, + header: "Tags", + enableSorting: false, + size: 200, + minSize: 120, + cell: ({ row }) => , + }, { id: STATUS_COLUMN_ID, accessorFn: (row) => row.model_info.db_model, diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/modelDataTransformer.ts b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/modelDataTransformer.ts index 963fba57507..d62d2e708c7 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/modelDataTransformer.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/modelDataTransformer.ts @@ -70,6 +70,7 @@ export const transformModelData = (rawModelData: any, getProviderFromModel: (mod transformedData[i].max_input_tokens = max_input_tokens; transformedData[i].api_base = curr_model?.litellm_params?.api_base; transformedData[i].cleanedLitellmParams = cleanedLitellmParams; + transformedData[i].tags = curr_model?.litellm_params?.tags ?? null; } return { data: transformedData }; diff --git a/ui/litellm-dashboard/src/components/model_dashboard/types.ts b/ui/litellm-dashboard/src/components/model_dashboard/types.ts index e58204995dd..8301a453468 100644 --- a/ui/litellm-dashboard/src/components/model_dashboard/types.ts +++ b/ui/litellm-dashboard/src/components/model_dashboard/types.ts @@ -33,6 +33,7 @@ export interface ModelData { litellm_params: LiteLLMParams; cleanedLitellmParams: Record; accessToken?: string; + tags: string[] | null; } export interface ModelDashboardProps {