forked from phoenix/litellm-mirror
use form correctly
This commit is contained in:
parent
9bdb96ad9c
commit
dd6c9df850
1 changed files with 44 additions and 59 deletions
|
@ -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,58 +1159,42 @@ 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 || ''}
|
<div className="mt-2 text-sm text-gray-500">
|
||||||
onChange={(e) => handleRegenerateFormChange('duration', e.target.value)}
|
Current expiry: {
|
||||||
/>
|
selectedToken?.expires != null ? (
|
||||||
<div className="mt-2 text-sm text-gray-500">
|
new Date(selectedToken.expires).toLocaleString(undefined, {
|
||||||
Current expiry: {
|
day: 'numeric',
|
||||||
selectedToken?.expires != null ? (
|
month: 'long',
|
||||||
new Date(selectedToken.expires).toLocaleString(undefined, {
|
year: 'numeric',
|
||||||
day: 'numeric',
|
hour: 'numeric',
|
||||||
month: 'long',
|
minute: 'numeric',
|
||||||
year: 'numeric',
|
second: 'numeric'
|
||||||
hour: 'numeric',
|
})
|
||||||
minute: 'numeric',
|
) : (
|
||||||
second: 'numeric'
|
'Never'
|
||||||
})
|
)
|
||||||
) : (
|
}
|
||||||
'Never'
|
</div>
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
</Form>
|
||||||
) : (
|
) : (
|
||||||
<div>
|
<div>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue