scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-08 22:21:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 78

fix design of key reset interval

Browse source
This commit is contained in:
Ishaan Jaffer 2025-09-26 13:37:50 -07:00
parent b039374c71
commit 3ea45ec03a
1 changed files with 54 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx
View file

@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import { Select, Tooltip, Divider, Switch } from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";
import { TextInput } from "@tremor/react";
@ -20,6 +20,31 @@ const KeyLifecycleSettings: React.FC<KeyLifecycleSettingsProps> = ({
rotationInterval,
onRotationIntervalChange,
}) => {
// Predefined intervals
const predefinedIntervals = ["7d", "30d", "90d", "180d", "365d"];
// Check if current interval is custom
const isCustomInterval = rotationInterval && !predefinedIntervals.includes(rotationInterval);
const [showCustomInput, setShowCustomInput] = useState(isCustomInterval);
const [customInterval, setCustomInterval] = useState(isCustomInterval ? rotationInterval : "");
const handleIntervalChange = (value: string) => {
if (value === "custom") {
setShowCustomInput(true);
// Don't change the actual interval yet, wait for custom input
} else {
setShowCustomInput(false);
setCustomInterval("");
onRotationIntervalChange(value);
}
};
const handleCustomIntervalChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setCustomInterval(value);
onRotationIntervalChange(value);
};
return (
<div className="space-y-6">
{/* Key Expiry Section */}
@ -71,18 +96,34 @@ const KeyLifecycleSettings: React.FC<KeyLifecycleSettingsProps> = ({
<InfoCircleOutlined className="text-gray-400 cursor-help text-xs" />
</Tooltip>
</label>
<Select
value={rotationInterval}
onChange={onRotationIntervalChange}
className="w-full"
placeholder="Select interval"
>
<Option value="7d">7 days</Option>
<Option value="30d">30 days</Option>
<Option value="90d">90 days</Option>
<Option value="180d">180 days</Option>
<Option value="365d">365 days</Option>
</Select>
<div className="space-y-2">
<Select
value={showCustomInput ? "custom" : rotationInterval}
onChange={handleIntervalChange}
className="w-full"
placeholder="Select interval"
>
<Option value="7d">7 days</Option>
<Option value="30d">30 days</Option>
<Option value="90d">90 days</Option>
<Option value="180d">180 days</Option>
<Option value="365d">365 days</Option>
<Option value="custom">Custom interval</Option>
</Select>
{showCustomInput && (
<div className="space-y-1">
<TextInput
value={customInterval}
onChange={handleCustomIntervalChange}
placeholder="e.g., 1s, 5m, 2h, 14d"
/>
<div className="text-xs text-gray-500">
Supported formats: seconds (s), minutes (m), hours (h), days (d)
</div>
</div>
)}
</div>
</div>
)}
</div>