phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

(fix) create key flow

Browse source
This commit is contained in:
Ishaan Jaff 2024-03-29 10:08:35 -07:00
parent fae935cdb2
commit d3e72e1c3b
144 changed files with 53398 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

60
ui/litellm-dashboard/src/components/create_key_button.tsx
View file

@ -3,6 +3,7 @@
import React, { useState, useEffect, useRef } from "react";
import { Button, TextInput, Grid, Col } from "@tremor/react";
import { Card, Metric, Text, Title, Subtitle } from "@tremor/react";
import { CopyToClipboard } from 'react-copy-to-clipboard';
import {
Button as Button2,
Modal,
@ -100,6 +101,11 @@ const CreateKey: React.FC<CreateKeyProps> = ({
console.error("Error sending Slack alert:", error);
}
};
const handleCopy = () => {
message.success('API Key copied to clipboard');
};
return (
@ -262,30 +268,36 @@ const CreateKey: React.FC<CreateKeyProps> = ({
footer={null}
>
<Grid numItems={1} className="gap-2 w-full">
<Card>
<Title>Save your Key</Title>
<Col numColSpan={1}>
<p>
Please save this secret key somewhere safe and accessible. For
security reasons, <b>you will not be able to view it again</b>{" "}
through your LiteLLM account. If you lose this secret key, you
will need to generate a new one.
</p>
</Col>
<Col numColSpan={1}>
{apiKey != null ? (
<div>
<Text>API Key: {apiKey}</Text>
<Button className="mt-3" onClick={sendSlackAlert}>
Test Key
</Button>
</div>
) : (
<Text>Key being created, this might take 30s</Text>
)}
</Col>
</Card>
<Title>Save your Key</Title>
<Col numColSpan={1}>
<p>
Please save this secret key somewhere safe and accessible. For
security reasons, <b>you will not be able to view it again</b>{" "}
through your LiteLLM account. If you lose this secret key, you
will need to generate a new one.
</p>
</Col>
<Col numColSpan={1}>
{apiKey != null ? (
<div>
<Text className="mt-3">API Key:</Text>
<div style={{ background: '#f8f8f8', padding: '10px', borderRadius: '5px', marginBottom: '10px' }}>
<pre style={{ wordWrap: 'break-word', whiteSpace: 'normal' }}>{apiKey}</pre>
</div>
<CopyToClipboard text={apiKey} onCopy={handleCopy}>
<Button className="mt-3">Copy API Key</Button>
</CopyToClipboard>
{/* <Button className="mt-3" onClick={sendSlackAlert}>
Test Key
</Button> */}
</div>
) : (
<Text>Key being created, this might take 30s</Text>
)}
</Col>
</Grid>
</Modal>
)}