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

use form correctly

Browse source
This commit is contained in:
Ishaan Jaff 2024-09-06 10:27:47 -07:00
parent 9bdb96ad9c
commit dd6c9df850
1 changed files with 44 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

65
ui/litellm-dashboard/src/components/view_key_table.tsx
View file

@ -123,6 +123,7 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
const [regenerateDialogVisible, setRegenerateDialogVisible] = useState(false); const [regenerateDialogVisible, setRegenerateDialogVisible] = useState(false);
const [regeneratedKey, setRegeneratedKey] = useState<string | null>(null); const [regeneratedKey, setRegeneratedKey] = useState<string | null>(null);
const [regenerateFormData, setRegenerateFormData] = useState<any>(null); const [regenerateFormData, setRegenerateFormData] = useState<any>(null);
const [regenerateForm] = Form.useForm();
const [knownTeamIDs, setKnownTeamIDs] = useState(initialKnownTeamIDs); const [knownTeamIDs, setKnownTeamIDs] = useState(initialKnownTeamIDs);
@ -719,9 +720,12 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
const handleRegenerateClick = (token: any) => { const handleRegenerateClick = (token: any) => {
setSelectedToken(token); setSelectedToken(token);
setRegenerateFormData({ regenerateForm.setFieldsValue({
...token, key_alias: token.key_alias,
duration: token.duration || 'none', // Set a default value if duration is not present max_budget: token.max_budget,
tpm_limit: token.tpm_limit,
rpm_limit: token.rpm_limit,
duration: token.duration || '',
}); });
setRegenerateDialogVisible(true); setRegenerateDialogVisible(true);
}; };
@ -740,25 +744,22 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
} }
try { try {
if (regenerateFormData == null) { const formValues = await regenerateForm.validateFields();
message.error("Please fill in the key details"); const response = await regenerateKeyCall(accessToken, { ...formValues, token: selectedToken?.token });
return;
}
const response = await regenerateKeyCall(accessToken, regenerateFormData);
setRegeneratedKey(response.key); setRegeneratedKey(response.key);
// Update the data state with the new key_name // Update the data state with the new key_name
if (data) { if (data) {
const updatedData = data.map(item => const updatedData = data.map(item =>
item.token === selectedToken?.token item.token === selectedToken?.token
? { ...item, key_name: response.key_name, ...regenerateFormData } ? { ...item, key_name: response.key_name, ...formValues }
: item : item
); );
setData(updatedData); setData(updatedData);
} }
setRegenerateDialogVisible(false); setRegenerateDialogVisible(false);
setRegenerateFormData(null); regenerateForm.resetFields();
message.success("API Key regenerated successfully"); message.success("API Key regenerated successfully");
} catch (error) { } catch (error) {
console.error("Error regenerating key:", error); console.error("Error regenerating key:", error);
@ -1139,12 +1140,12 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
visible={regenerateDialogVisible} visible={regenerateDialogVisible}
onCancel={() => { onCancel={() => {
setRegenerateDialogVisible(false); setRegenerateDialogVisible(false);
setRegenerateFormData(null); regenerateForm.resetFields();
}} }}
footer={[ footer={[
<Button key="cancel" onClick={() => { <Button key="cancel" onClick={() => {
setRegenerateDialogVisible(false); setRegenerateDialogVisible(false);
setRegenerateFormData(null); regenerateForm.resetFields();
}} className="mr-2"> }} className="mr-2">
Cancel Cancel
</Button>, </Button>,
@ -1158,41 +1159,26 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
]} ]}
> >
{premiumUser ? ( {premiumUser ? (
<Form layout="vertical"> <Form form={regenerateForm} layout="vertical">
<Form.Item label="Key Alias"> <Form.Item name="key_alias" label="Key Alias">
<TextInput <TextInput />
value={regenerateFormData?.key_alias}
onChange={(e) => handleRegenerateFormChange('key_alias', e.target.value)}
/>
</Form.Item> </Form.Item>
<Form.Item label="Max Budget (USD)"> <Form.Item name="max_budget" label="Max Budget (USD)">
<InputNumber <InputNumber step={0.01} precision={2} style={{ width: '100%' }} />
value={regenerateFormData?.max_budget}
onChange={(value) => handleRegenerateFormChange('max_budget', value)}
/>
</Form.Item> </Form.Item>
<Form.Item label="TPM Limit"> <Form.Item name="tpm_limit" label="TPM Limit">
<InputNumber <InputNumber style={{ width: '100%' }} />
value={regenerateFormData?.tpm_limit}
onChange={(value) => handleRegenerateFormChange('tpm_limit', value)}
/>
</Form.Item> </Form.Item>
<Form.Item label="RPM Limit"> <Form.Item name="rpm_limit" label="RPM Limit">
<InputNumber <InputNumber style={{ width: '100%' }} />
value={regenerateFormData?.rpm_limit}
onChange={(value) => handleRegenerateFormChange('rpm_limit', value)}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Expire Key (eg: 30s, 30h, 30d)"
name="duration" name="duration"
label="Expire Key (eg: 30s, 30h, 30d)"
className="mt-8" className="mt-8"
> >
<TextInput <TextInput placeholder="" />
placeholder="" </Form.Item>
value={regenerateFormData?.duration || ''}
onChange={(e) => handleRegenerateFormChange('duration', e.target.value)}
/>
<div className="mt-2 text-sm text-gray-500"> <div className="mt-2 text-sm text-gray-500">
Current expiry: { Current expiry: {
selectedToken?.expires != null ? ( selectedToken?.expires != null ? (
@ -1209,7 +1195,6 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
) )
} }
</div> </div>
</Form.Item>
</Form> </Form>
) : ( ) : (
<div> <div>