Add custom check interval option

application/src/components/services/add-service/ServiceConfigFields.tsx

@@ -1,49 +1,119 @@
 
-import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormDescription } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { UseFormReturn } from "react-hook-form";
 import { ServiceFormData } from "./types";
+import { ServiceUrlField } from "./ServiceUrlField";
+import { useState } from "react";
 
 interface ServiceConfigFieldsProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
+  const [isCustomInterval, setIsCustomInterval] = useState(false);
+  const intervalValue = form.watch("interval");
+
+  const handleIntervalChange = (value: string) => {
+    if (value === "custom") {
+      setIsCustomInterval(true);
+      form.setValue("interval", "");
+    } else {
+      setIsCustomInterval(false);
+      form.setValue("interval", value);
+    }
+  };
+
   return (
-    <>
+    <div className="space-y-4">
-      <FormField
+      <ServiceUrlField form={form} />
-        control={form.control}
+      
-        name="interval"
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        render={({ field }) => (
+        <FormField
-          <FormItem>
+          control={form.control}
-            <FormLabel>Heartbeat Interval</FormLabel>
+          name="interval"
-            <FormControl>
+          render={({ field }) => (
-              <Input 
+            <FormItem>
-                type="number" 
+              <FormLabel>Check Interval</FormLabel>
-                placeholder="60" 
+              {!isCustomInterval ? (
-                {...field} 
+                <FormControl>
-              />
+                  <Select onValueChange={handleIntervalChange} value={isCustomInterval ? "custom" : field.value}>
-            </FormControl>
+                    <SelectTrigger>
-          </FormItem>
+                      <SelectValue />
-        )}
+                    </SelectTrigger>
-      />
+                    <SelectContent>
-            
+                      <SelectItem value="30">30 seconds</SelectItem>
-      <FormField
+                      <SelectItem value="60">1 minute</SelectItem>
-        control={form.control}
+                      <SelectItem value="300">5 minutes</SelectItem>
-        name="retries"
+                      <SelectItem value="900">15 minutes</SelectItem>
-        render={({ field }) => (
+                      <SelectItem value="1800">30 minutes</SelectItem>
-          <FormItem>
+                      <SelectItem value="3600">1 hour</SelectItem>
-            <FormLabel>Maximum Retries</FormLabel>
+                      <SelectItem value="custom">Custom</SelectItem>
-            <FormControl>
+                    </SelectContent>
-              <Input 
+                  </Select>
-                type="number" 
+                </FormControl>
-                placeholder="3" 
+              ) : (
-                {...field} 
+                <div className="space-y-2">
-              />
+                  <FormControl>
-            </FormControl>
+                    <Input
-          </FormItem>
+                      type="number"
-        )}
+                      placeholder="Enter interval in seconds"
-      />
+                      value={field.value}
-    </>
+                      onChange={field.onChange}
+                      min="10"
+                    />
+                  </FormControl>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsCustomInterval(false);
+                      form.setValue("interval", "60");
+                    }}
+                    className="text-sm text-blue-600 hover:text-blue-800"
+                  >
+                    Back to presets
+                  </button>
+                </div>
+              )}
+              <FormDescription className="text-xs">
+                {isCustomInterval 
+                  ? "Enter custom interval in seconds (minimum 10 seconds)"
+                  : "How often to check the service status"
+                }
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="retries"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Retry Attempts</FormLabel>
+              <FormControl>
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="1">1 attempt</SelectItem>
+                    <SelectItem value="2">2 attempts</SelectItem>
+                    <SelectItem value="3">3 attempts</SelectItem>
+                    <SelectItem value="5">5 attempts</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormDescription className="text-xs">
+                Number of retry attempts before marking as down
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </div>
   );
 }