diff --git a/litellm/router.py b/litellm/router.py index 69e3e994dc..855f21387a 100644 --- a/litellm/router.py +++ b/litellm/router.py @@ -2024,9 +2024,10 @@ class Router: "litellm_credential_name" ) if credential_name: + credential_tag = f"Credential: {credential_name}" existing_tags = kwargs[metadata_variable_name].get("tags") or [] - if credential_name not in existing_tags: - existing_tags.append(credential_name) + if credential_tag not in existing_tags: + existing_tags.append(credential_tag) kwargs[metadata_variable_name]["tags"] = existing_tags kwargs["model_info"] = model_info diff --git a/tests/test_litellm/test_router.py b/tests/test_litellm/test_router.py index f0e754cee8..01626aabfa 100644 --- a/tests/test_litellm/test_router.py +++ b/tests/test_litellm/test_router.py @@ -2211,13 +2211,13 @@ def test_credential_name_injected_as_tag(): ) router._update_kwargs_with_deployment(deployment=deployment, kwargs=kwargs) - assert "xAI" in kwargs["metadata"]["tags"] + assert "Credential: xAI" in kwargs["metadata"]["tags"] assert "A.101" in kwargs["metadata"]["tags"] def test_credential_name_not_duplicated_in_tags(): """ - Test that if the credential name already exists in the tags list, + Test that if the credential tag already exists in the tags list, it is not duplicated. """ router = litellm.Router( @@ -2232,13 +2232,13 @@ def test_credential_name_not_duplicated_in_tags(): ], ) - kwargs: dict = {"metadata": {"tags": ["xAI", "A.101"]}} + kwargs: dict = {"metadata": {"tags": ["Credential: xAI", "A.101"]}} deployment = router.get_deployment_by_model_group_name( model_group_name="xai-model" ) router._update_kwargs_with_deployment(deployment=deployment, kwargs=kwargs) - assert kwargs["metadata"]["tags"].count("xAI") == 1 + assert kwargs["metadata"]["tags"].count("Credential: xAI") == 1 def test_credential_name_not_injected_when_absent(): diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx index f81da6e245..3e5f0a2014 100644 --- a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx +++ b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx @@ -21,7 +21,7 @@ import { Text, Title } from "@tremor/react"; -import { Alert, Segmented, Select, Tooltip } from "antd"; +import { Alert, Segmented, Select, Tooltip, Typography } from "antd"; import { useDebouncedState } from "@tanstack/react-pacer/debouncer"; import React, { useCallback, useEffect, useMemo, useState, type UIEvent } from "react"; @@ -142,10 +142,8 @@ const UsagePage: React.FC = ({ teams, organizations }) => { const [modelViewType, setModelViewType] = useState<"groups" | "individual">("groups"); const [isCloudZeroModalOpen, setIsCloudZeroModalOpen] = useState(false); const [isGlobalExportModalOpen, setIsGlobalExportModalOpen] = useState(false); - const [showOrganizationBanner, setShowOrganizationBanner] = useState(true); - const [showCustomerBanner, setShowCustomerBanner] = useState(true); const [usageView, setUsageView] = useState("global"); - const [showAgentBanner, setShowAgentBanner] = useState(true); + const [showCredentialBanner, setShowCredentialBanner] = useState(true); const [topKeysLimit, setTopKeysLimit] = useState(5); const [topModelsLimit, setTopModelsLimit] = useState(5); const getAllTags = async () => { @@ -805,33 +803,20 @@ const UsagePage: React.FC = ({ teams, organizations }) => { {/* Organization Usage Panel */} {usageView === "organization" && ( - <> - {showOrganizationBanner && ( - setShowOrganizationBanner(false)} - className="mb-5" - /> - )} - ({ - label: organization.organization_alias, - value: organization.organization_id, - })) || null - } - premiumUser={premiumUser} - /> - + ({ + label: organization.organization_alias, + value: organization.organization_id, + })) || null + } + premiumUser={premiumUser} + /> )} {/* Team Usage Panel */} @@ -854,72 +839,65 @@ const UsagePage: React.FC = ({ teams, organizations }) => { {/* Customer Usage Panel */} {usageView === "customer" && ( + ({ + label: customer.alias || customer.user_id, + value: customer.user_id, + })) || null + } + premiumUser={premiumUser} + dateValue={dateValue} + /> + )} + {/* Tag Usage Panel */} + {usageView === "tag" && ( <> - {showCustomerBanner && ( + {showCredentialBanner && ( + When a reusable credential is used, it will appear as a tag prefixed with{" "} + Credential: + in this view. + + } closable - onClose={() => setShowCustomerBanner(false)} + onClose={() => setShowCredentialBanner(false)} className="mb-5" /> )} ({ - label: customer.alias || customer.user_id, - value: customer.user_id, - })) || null - } + entityList={allTags} premiumUser={premiumUser} dateValue={dateValue} /> )} - {/* Tag Usage Panel */} - {usageView === "tag" && ( + {usageView === "agent" && ( ({ label: agent.agent_name, value: agent.agent_id })) || null + } premiumUser={premiumUser} dateValue={dateValue} /> )} - {usageView === "agent" && ( - <> - {showAgentBanner && ( - setShowAgentBanner(false)} - className="mb-5" - /> - )} - ({ label: agent.agent_name, value: agent.agent_id })) || null - } - premiumUser={premiumUser} - dateValue={dateValue} - />{" "} - - )} {/* User Agent Activity Panel */} {usageView === "user-agent-activity" && (