From 3ea45ec03ab5b19473af0a4bb42491f488869cf7 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Fri, 26 Sep 2025 13:37:50 -0700
Subject: [PATCH] fix design of key reset interval

---
 .../KeyLifecycleSettings.tsx                  | 67 +++++++++++++++----
 1 file changed, 54 insertions(+), 13 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx b/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx
index ca0d8f67b72..8e286574da4 100644
--- a/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx
@@ -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>