phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-25 18:54:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

clean up scim view

Browse source
This commit is contained in:
Ishaan Jaff 2025-04-16 18:39:32 -07:00
parent 61190daf7c
commit eea7050d20
1 changed files with 124 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

79
ui/litellm-dashboard/src/components/SCIM.tsx
View file

@ -8,10 +8,18 @@ import {
Button as TremorButton, Button as TremorButton,
Callout, Callout,
TextInput, TextInput,
Divider,
} from "@tremor/react"; } from "@tremor/react";
import { message, Form } from "antd"; import { message, Form } from "antd";
import { keyCreateCall } from "./networking"; import { keyCreateCall } from "./networking";
import { CopyToClipboard } from "react-copy-to-clipboard"; import { CopyToClipboard } from "react-copy-to-clipboard";
import {
LinkOutlined,
KeyOutlined,
CopyOutlined,
ExclamationCircleOutlined,
PlusCircleOutlined
} from "@ant-design/icons";
interface SCIMConfigProps { interface SCIMConfigProps {
accessToken: string | null; accessToken: string | null;
@ -70,14 +78,31 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
return ( return (
<Grid numItems={1}> <Grid numItems={1}>
<Card> <Card>
<Title className="mb-4">SCIM Configuration</Title> <div className="flex items-center mb-4">
<Text> <Title>SCIM Configuration</Title>
</div>
<Text className="text-gray-600">
System for Cross-domain Identity Management (SCIM) allows you to automatically provision and manage users and groups in LiteLLM. System for Cross-domain Identity Management (SCIM) allows you to automatically provision and manage users and groups in LiteLLM.
</Text> </Text>
<div className="mt-6"> <Divider />
<Title className="text-lg">SCIM Tenant URL (Base URL)</Title>
<div className="flex items-center mt-2 mb-6"> <div className="space-y-8">
{/* Step 1: SCIM URL */}
<div>
<div className="flex items-center mb-2">
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 mr-2">
1
</div>
<Title className="text-lg flex items-center">
<LinkOutlined className="h-5 w-5 mr-2" />
SCIM Tenant URL
</Title>
</div>
<Text className="text-gray-600 mb-3">
Use this URL in your identity provider's SCIM integration settings.
</Text>
<div className="flex items-center">
<TextInput <TextInput
value={scimBaseUrl} value={scimBaseUrl}
disabled={true} disabled={true}
@ -87,19 +112,32 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
text={scimBaseUrl} text={scimBaseUrl}
onCopy={() => message.success("URL copied to clipboard")} onCopy={() => message.success("URL copied to clipboard")}
> >
<TremorButton variant="primary" className="ml-2"> <TremorButton variant="primary" className="ml-2 flex items-center">
<CopyOutlined className="h-4 w-4 mr-1" />
Copy Copy
</TremorButton> </TremorButton>
</CopyToClipboard> </CopyToClipboard>
</div> </div>
</div>
<Callout title="Using SCIM" color="blue" className="mt-4 mb-6"> {/* Step 2: SCIM Token */}
<div>
<div className="flex items-center mb-2">
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 mr-2">
2
</div>
<Title className="text-lg flex items-center">
<KeyOutlined className="h-5 w-5 mr-2" />
Authentication Token
</Title>
</div>
<Callout title="Using SCIM" color="blue" className="mb-4">
You need a SCIM token to authenticate with the SCIM API. Create one below and use it in your SCIM provider's configuration. You need a SCIM token to authenticate with the SCIM API. Create one below and use it in your SCIM provider's configuration.
</Callout> </Callout>
{!tokenData ? ( {!tokenData ? (
<> <div className="bg-gray-50 p-4 rounded-lg">
<Title className="text-lg mb-4">Create SCIM Access Token</Title>
<Form <Form
form={form} form={form}
onFinish={handleCreateSCIMToken} onFinish={handleCreateSCIMToken}
@ -117,22 +155,27 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
variant="primary" variant="primary"
type="submit" type="submit"
loading={isCreatingToken} loading={isCreatingToken}
className="flex items-center"
> >
<KeyOutlined className="h-4 w-4 mr-1" />
Create SCIM Token Create SCIM Token
</TremorButton> </TremorButton>
</Form.Item> </Form.Item>
</Form> </Form>
</> </div>
) : ( ) : (
<Card className="mt-4 bg-yellow-50"> <Card className="border border-yellow-300 bg-yellow-50">
<div className="flex items-center mb-2 text-yellow-800">
<ExclamationCircleOutlined className="h-5 w-5 mr-2" />
<Title className="text-lg text-yellow-800">Your SCIM Token</Title> <Title className="text-lg text-yellow-800">Your SCIM Token</Title>
<Text className="text-yellow-800 mb-2"> </div>
<Text className="text-yellow-800 mb-4 font-medium">
Make sure to copy this token now. You won't be able to see it again! Make sure to copy this token now. You won't be able to see it again!
</Text> </Text>
<div className="flex items-center mt-2"> <div className="flex items-center">
<TextInput <TextInput
value={tokenData.token} value={tokenData.token}
className="flex-grow mr-2" className="flex-grow mr-2 bg-white"
type="password" type="password"
disabled={true} disabled={true}
/> />
@ -140,20 +183,24 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
text={tokenData.token} text={tokenData.token}
onCopy={() => message.success("Token copied to clipboard")} onCopy={() => message.success("Token copied to clipboard")}
> >
<TremorButton variant="primary"> <TremorButton variant="primary" className="flex items-center">
<CopyOutlined className="h-4 w-4 mr-1" />
Copy Copy
</TremorButton> </TremorButton>
</CopyToClipboard> </CopyToClipboard>
</div> </div>
<TremorButton <TremorButton
className="mt-4" className="mt-4 flex items-center"
variant="secondary"
onClick={() => setTokenData(null)} onClick={() => setTokenData(null)}
> >
<PlusCircleOutlined className="h-4 w-4 mr-1" />
Create Another Token Create Another Token
</TremorButton> </TremorButton>
</Card> </Card>
)} )}
</div> </div>
</div>
</Card> </Card>
</Grid> </Grid>
); );