scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-11-11 08:38:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 359

feat(ui): rename Public Model Name to Virtual Model Name on model pages

Browse source 
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Krrish Dholakia 2026-10-19 14:31:49 +00:00
parent 7ef92689da
commit 00743a9d50
11 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx
View file

@ -426,12 +426,12 @@ describe("AllModelsTab", () => {
});
});
it("applies a public model name filter through the drawer", async () => {
it("applies a virtual model name filter through the drawer", async () => {
const user = userEvent.setup();
renderWithProviders(<AllModelsTab {...defaultProps} />);
await user.click(screen.getByTestId("datatable-filters-trigger"));
await user.click(await screen.findByPlaceholderText("Filter by Public Model Name"));
await user.click(await screen.findByPlaceholderText("Filter by Virtual Model Name"));
await user.click(await screen.findByRole("option", { name: "gpt-3.5-turbo" }));
await user.click(screen.getByTestId("filter-drawer-apply"));
@ -440,12 +440,12 @@ describe("AllModelsTab", () => {
});
});
it("uses All Proxy Models as the public model name filter default", async () => {
it("uses All Proxy Models as the virtual model name filter default", async () => {
const user = userEvent.setup();
renderWithProviders(<AllModelsTab {...defaultProps} />);
await user.click(screen.getByTestId("datatable-filters-trigger"));
await user.click(await screen.findByPlaceholderText("Filter by Public Model Name"));
await user.click(await screen.findByPlaceholderText("Filter by Virtual Model Name"));
expect(await screen.findByRole("option", { name: "All Proxy Models" })).toBeInTheDocument();
expect(screen.queryByRole("option", { name: "All Models" })).not.toBeInTheDocument();

2
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.test.tsx
View file

@ -518,7 +518,7 @@ describe("AllModelsTable", () => {
);
const chip = screen.getByTestId("filter-chip-model_name");
expect(chip).toHaveTextContent("Public Model Name");
expect(chip).toHaveTextContent("Virtual Model Name");
expect(chip).toHaveTextContent("Wildcard Models (*)");
await user.click(screen.getByTestId("filter-chip-remove-model_name"));

6
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.tsx
View file

@ -36,7 +36,7 @@ const MODEL_TABLE_BODY_HEIGHT = 600;
const ALL_PROXY_MODELS_LABEL = "All Proxy Models";
const FILTER_LABELS: Record<string, string> = {
[MODEL_NAME_COLUMN_ID]: "Public Model Name",
[MODEL_NAME_COLUMN_ID]: "Virtual Model Name",
[ACCESS_GROUPS_COLUMN_ID]: "Model Access Group",
[ROUTING_STATUS_FILTER_ID]: "Status",
};
@ -302,14 +302,14 @@ export function AllModelsTable({
>
{({ get, set }) => (
<>
<DataTableFilterField label="Public Model Name">
<DataTableFilterField label="Virtual Model Name">
<SearchSelect
options={modelGroupOptions}
value={(get(MODEL_NAME_COLUMN_ID) as string) ?? ALL_MODEL_GROUPS_VALUE}
onValueChange={(value) =>
set(MODEL_NAME_COLUMN_ID, value === ALL_MODEL_GROUPS_VALUE ? undefined : value ?? undefined)
}
placeholder="Filter by Public Model Name"
placeholder="Filter by Virtual Model Name"
emptyText="No models found"
/>
</DataTableFilterField>

2
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx
View file

@ -88,7 +88,7 @@ function ModelInformationCell({ model, displayName }: { model: ModelData; displa
<span className="truncate text-xs text-muted-foreground">{model.provider || "Unknown provider"}</span>
</div>
<div className="flex flex-col gap-0.5">
<span className="text-xs text-muted-foreground">Public Model Name</span>
<span className="text-xs text-muted-foreground">Virtual Model Name</span>
<span className="truncate text-sm font-medium text-foreground" title={displayName}>
{displayName}
</span>

2
ui/litellm-dashboard/src/components/add_model/AddModelForm.integration.test.tsx
View file

@ -997,7 +997,7 @@ describe("AddModelForm", () => {
await clickTestConnect();
await expectBlockedWith("All model mappings must have valid public names");
await expectBlockedWith("All model mappings must have valid virtual model names");
});
});

2
ui/litellm-dashboard/src/components/add_model/AddModelForm.tsx
View file

@ -290,7 +290,7 @@ const AddModelForm: React.FC<AddModelFormProps> = ({
/>
<DecisionModelNote catalog={decisionCatalog} litellmProvider={pickedLitellmProvider} />
{/* Conditionally Render "Public Model Name" */}
{/* Conditionally Render "Virtual Model Name" */}
<ConditionalPublicModelName />
{/* Select Mode */}

2
ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.test.tsx
View file

@ -43,7 +43,7 @@ describe("ConditionalPublicModelName", () => {
);
expect(screen.getByText("Model Mappings")).toBeInTheDocument();
expect(screen.getByText("Public Model Name")).toBeInTheDocument();
expect(screen.getByText("Virtual Model Name")).toBeInTheDocument();
expect(screen.getByText("LiteLLM Model Name")).toBeInTheDocument();
});

8
ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
View file

@ -29,7 +29,7 @@ const modelMappingsRule = {
(mapping) => !mapping.public_name || mapping.public_name.trim() === "",
);
if (invalidMappings.length > 0) {
throw new Error("All model mappings must have valid public names");
throw new Error("All model mappings must have valid virtual model names");
}
},
};
@ -42,7 +42,7 @@ const publicNameTooltipContent = (
<div className="flex flex-col gap-2 text-left font-normal">
<div>The name you specify in your API calls to LiteLLM Proxy</div>
<div>
<strong>Example:</strong> If you name your public model <code className={tooltipCodeClassName}>example-name</code>
<strong>Example:</strong> If you name your virtual model <code className={tooltipCodeClassName}>example-name</code>
, and choose <code className={tooltipCodeClassName}>openai/qwen-plus-latest</code> as the LiteLLM model
</div>
<div>
@ -94,7 +94,7 @@ const columns: ColumnDef<ModelMapping>[] = [
accessorKey: "public_name",
header: () => (
<span className="flex items-center">
Public Model Name
Virtual Model Name
<SimpleTooltip content={publicNameTooltipContent} width="500px" />
</span>
),
@ -206,7 +206,7 @@ const ConditionalPublicModelName: React.FC = () => {
label={
<span className="flex items-center">
Model Mappings
<SimpleTooltip content="Map public model names to LiteLLM model names for load balancing" />
<SimpleTooltip content="Map virtual model names to LiteLLM model names for load balancing" />
</span>
}
required

2
ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx
View file

@ -195,7 +195,7 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
<div className="grid grid-cols-24">
<p className="col-start-11 col-span-14 text-sm mb-3 mt-1">
{selectedProvider === Providers.Azure
? "Your deployment name will be saved as the public model name, and LiteLLM will use 'azure/deployment-name' internally"
? "Your deployment name will be saved as the virtual model name, and LiteLLM will use 'azure/deployment-name' internally"
: "The model name LiteLLM will send to the LLM API"}
</p>
</div>

2
ui/litellm-dashboard/src/components/model_info_view.test.tsx
View file

@ -225,7 +225,7 @@ describe("ModelInfoView", () => {
it("should display model name in the header", async () => {
render(<ModelInfoView {...DEFAULT_ADMIN_PROPS} />, { wrapper });
await waitFor(() => {
expect(screen.getByText(/Public Model Name:/)).toBeInTheDocument();
expect(screen.getByText(/Virtual Model Name:/)).toBeInTheDocument();
});
});

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

@ -541,7 +541,7 @@ export default function ModelInfoView({
<ArrowLeft className="size-4" />
Back to Models
</Button>
<h2 className="text-xl font-semibold">Public Model Name: {getDisplayModelName(modelData)}</h2>
<h2 className="text-xl font-semibold">Virtual Model Name: {getDisplayModelName(modelData)}</h2>
<div className="flex items-center cursor-pointer">
<span className="text-sm text-muted-foreground font-mono">{modelData.model_info.id}</span>
<Button