phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-26 19:24:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: re-add llm credentials to models page

Browse source
This commit is contained in:
Krrish Dholakia 2025-03-12 17:49:56 -07:00
parent 3e47102567
commit a560e2d262
3 changed files with 21 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

3
ui/litellm-dashboard/src/app/page.tsx
View file

@ -28,7 +28,6 @@ import CacheDashboard from "@/components/cache_dashboard";
import { setGlobalLitellmHeaderName } from "@/components/networking"; import { setGlobalLitellmHeaderName } from "@/components/networking";
import { Organization } from "@/components/networking"; import { Organization } from "@/components/networking";
import GuardrailsPanel from "@/components/guardrails"; import GuardrailsPanel from "@/components/guardrails";
import CredentialsPanel from "@/components/credentials";
import TransformRequestPanel from "@/components/transform_request"; import TransformRequestPanel from "@/components/transform_request";
import { fetchUserModels } from "@/components/create_key_button"; import { fetchUserModels } from "@/components/create_key_button";
import { fetchTeams } from "@/components/common_components/fetch_teams"; import { fetchTeams } from "@/components/common_components/fetch_teams";
@ -313,8 +312,6 @@ export default function CreateKeyPage() {
<GuardrailsPanel accessToken={accessToken} /> <GuardrailsPanel accessToken={accessToken} />
) : page == "transform-request" ? ( ) : page == "transform-request" ? (
<TransformRequestPanel accessToken={accessToken} /> <TransformRequestPanel accessToken={accessToken} />
) : page == "credentials" ? (
<CredentialsPanel accessToken={accessToken} />
) : page == "general-settings" ? ( ) : page == "general-settings" ? (
<GeneralSettings <GeneralSettings
userID={userID} userID={userID}

25
ui/litellm-dashboard/src/components/credentials.tsx → ui/litellm-dashboard/src/components/model_add/credentials.tsx
View file

@ -8,10 +8,11 @@ import {
TableRow, TableRow,
Card, Card,
Text, Text,
Badge Badge,
Button
} from "@tremor/react"; } from "@tremor/react";
import { PlusIcon } from "@heroicons/react/solid"; import { PlusIcon } from "@heroicons/react/solid";
import { getCredentialsList } from "./networking"; // Assume this is your networking function import { getCredentialsList } from "@/components/networking"; // Assume this is your networking function
interface CredentialsPanelProps { interface CredentialsPanelProps {
accessToken: string | null; accessToken: string | null;
@ -75,6 +76,12 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken }) => {
return ( return (
<div className="w-full mx-auto flex-auto overflow-y-auto m-8 p-2"> <div className="w-full mx-auto flex-auto overflow-y-auto m-8 p-2">
<Button
onClick={() => setIsAddModalOpen(true)}
className="mb-4"
>
Add Credential
</Button>
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<Text> <Text>
Configured credentials for different AI providers. Add and manage your API credentials.{" "} Configured credentials for different AI providers. Add and manage your API credentials.{" "}
@ -87,13 +94,6 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken }) => {
Docs Docs
</a> </a>
</Text> </Text>
<button
onClick={() => setIsAddModalOpen(true)}
className="flex items-center bg-blue-500 text-white px-3 py-2 rounded-md hover:bg-blue-600 transition-colors"
>
<PlusIcon className="h-5 w-5 mr-2" />
Add Credential
</button>
</div> </div>
<Card> <Card>
@ -137,10 +137,17 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken }) => {
</Table> </Table>
</Card> </Card>
{/* TODO: Implement Add Credential Modal */} {/* TODO: Implement Add Credential Modal */}
{isAddModalOpen && ( {isAddModalOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
{/* Modal content for adding credentials */} {/* Modal content for adding credentials */}
<Button
onClick={() => setIsAddModalOpen(false)}
>
Close
</Button>
</div> </div>
)} )}
</div> </div>

5
ui/litellm-dashboard/src/components/model_dashboard.tsx
View file

@ -23,6 +23,7 @@ import LiteLLMModelNameField from "./add_model/litellm_model_name";
import AdvancedSettings from "./add_model/advanced_settings"; import AdvancedSettings from "./add_model/advanced_settings";
import ProviderSpecificFields from "./add_model/provider_specific_fields"; import ProviderSpecificFields from "./add_model/provider_specific_fields";
import { handleAddModelSubmit } from "./add_model/handle_add_model_submit"; import { handleAddModelSubmit } from "./add_model/handle_add_model_submit";
import CredentialsPanel from "@/components/model_add/credentials";
import { getDisplayModelName } from "./view_model/model_name_display"; import { getDisplayModelName } from "./view_model/model_name_display";
import EditModelModal, { handleEditModelSubmit } from "./edit_model/edit_model_modal"; import EditModelModal, { handleEditModelSubmit } from "./edit_model/edit_model_modal";
import { import {
@ -1039,6 +1040,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
</Tab> </Tab>
<Tab>Model Analytics</Tab> <Tab>Model Analytics</Tab>
<Tab>Model Retry Settings</Tab> <Tab>Model Retry Settings</Tab>
<Tab>LLM Credentials</Tab>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -1481,6 +1483,9 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
Save Save
</Button> </Button>
</TabPanel> </TabPanel>
<TabPanel>
<CredentialsPanel accessToken={accessToken} />
</TabPanel>
</TabPanels> </TabPanels>
</TabGroup> </TabGroup>
)} )}