updated jiggler config UI

jiggler.go

@@ -85,6 +85,7 @@ func runJigglerCronTab() error {
 	s.Start()
 	delta, err := calculateJobDelta(s)
 	jobDelta = delta
+	logger.Infof("Time between jiggler runs: %v", jobDelta)
 	if err != nil {
 		return err
 	}
@@ -95,7 +96,7 @@ func runJiggler() {
 	if jigglerEnabled {
 		if config.JigglerConfig.JitterPercentage != 0 {
 			jitter := calculateJitterDuration(jobDelta)
-			logger.Infof("Jitter enabled, Sleeping for %v", jitter)
+			logger.Debugf("Jitter enabled, Sleeping for %v", jitter)
 			time.Sleep(jitter)
 		}
 		inactivitySeconds := config.JigglerConfig.InactivityLimitSeconds

ui/src/components/JigglerSetting.tsx

@@ -5,6 +5,7 @@ import { InputFieldWithLabel } from "./InputField";
 import { useEffect, useState } from "react";
 import { useJsonRpc } from "../hooks/useJsonRpc";
 import notifications from "../notifications";
+import { SelectMenuBasic } from "@components/SelectMenuBasic";
 
 export interface JigglerConfig {
   inactivity_limit_seconds: number;
@@ -12,9 +13,69 @@ export interface JigglerConfig {
   schedule_cron_tab: string;
 }
 
+const jigglerCrontabConfigs = [
+  {
+    label: "Every 20 seconds",
+    value: "*/20 * * * * *",
+  },
+  {
+    label: "Every 40 seconds",
+    value: "*/40 * * * * *",
+  },
+  {
+    label: "Every 1 minute",
+    value: "0 * * * * *",
+  },
+  {
+    label: "Every 3 minutes",
+    value: "0 */3 * * * *",
+  },
+];
+
+const jigglerJitterConfigs = [
+  {
+    label: "No Jitter",
+    value: "0.0",
+  },
+  {
+    label: "10%",
+    value: ".1",
+  },
+  {
+    label: "25%",
+    value: ".25",
+  },
+  {
+    label: "50%",
+    value: ".5",
+  },
+];
+
+const jigglerInactivityConfigs = [
+  {
+    label: "20 Seconds",
+    value: "20",
+  },
+  {
+    label: "40 Seconds",
+    value: "40",
+  },
+  {
+    label: "1 Minute",
+    value: "60",
+  },
+  {
+    label: "3 Minutes",
+    value: "180",
+  },
+];
+
 export function JigglerSetting() {
   const [send] = useJsonRpc();
   const [loading, setLoading] = useState(false);
+  const [inactivityLimitSeconds, setInactivityLimitSeconds] = useState("");
+  const [jitterPercentage, setJitterPercentage] = useState("");
+  const [scheduleCronTab, setScheduleCronTab] = useState("");
 
   const [jigglerConfigState, setJigglerConfigState] = useState<JigglerConfig>({
     inactivity_limit_seconds: 20.0,
@@ -25,27 +86,34 @@ export function JigglerSetting() {
   const syncJigglerConfig = useCallback(() => {
     send("getJigglerConfig", {}, resp => {
       if ("error" in resp) return;
-      setJigglerConfigState(resp.result as JigglerConfig);
+      const result = resp.result as JigglerConfig;
+      setJigglerConfigState(result);
+      setInactivityLimitSeconds(String(result.inactivity_limit_seconds))
+      setJitterPercentage(String(result.jitter_percentage))
+      setScheduleCronTab(result.schedule_cron_tab)
     });
-  }, [send]);
+  }, [send, setInactivityLimitSeconds]);
 
   useEffect(() => {
     syncJigglerConfig()
   }, [send, syncJigglerConfig]);
 
   const handleJigglerInactivityLimitSecondsChange = (value: string) => {
+    setInactivityLimitSeconds(value)
     setJigglerConfigState({ ...jigglerConfigState, inactivity_limit_seconds: Number(value) });
   };
-  //
+
-  // const handleJigglerJitterPercentageChange = (value: number) => {
+  const handleJigglerJitterPercentageChange = (value: string) => {
-  //   setJigglerConfig({ ...jigglerConfig, jitter_percentage: value });
+    setJitterPercentage(value)
-  // };
+    setJigglerConfigState({ ...jigglerConfigState, jitter_percentage: Number(value) });
+  };
 
   const handleJigglerScheduleCronTabChange = (value: string) => {
+    setScheduleCronTab(value)
     setJigglerConfigState({ ...jigglerConfigState, schedule_cron_tab: value });
   };
 
-  const handleJigglerConfigChange = useCallback(
+  const handleJigglerConfigSave = useCallback(
     (jigglerConfig: JigglerConfig) => {
       setLoading(true);
       send("setJigglerConfig", { jigglerConfig }, async resp => {
@@ -69,19 +137,63 @@ export function JigglerSetting() {
   return (
     <div className="">
       <div className="grid grid-cols-2 gap-4">
-        <InputFieldWithLabel
+        <SelectMenuBasic
-          required
+          size="SM"
-          label="Jiggler Schedule"
+          label="Schedule"
-          placeholder="*/20 * * * * * (Every 20 seconds)"
+          className="max-w-[192px]"
-          value={jigglerConfigState?.schedule_cron_tab}
+          value={scheduleCronTab}
-          onChange={e => handleJigglerScheduleCronTabChange(e.target.value)}
+          fullWidth
+          onChange={e => {
+            if (e.target.value === "custom") {
+              setScheduleCronTab(e.target.value);
+            } else {
+              handleJigglerScheduleCronTabChange(e.target.value)
+            }
+          }}
+          options={[...jigglerCrontabConfigs, { value: "custom", label: "Custom" }]}
         />
-        <InputFieldWithLabel
+        {jitterPercentage === "custom" && (
-          required
+          <InputFieldWithLabel
-          label="Inactivity Limit (Seconds)"
+            required
-          placeholder="20"
+            label="Jiggler Crontab"
-          value={jigglerConfigState?.inactivity_limit_seconds}
+            placeholder="Enter Cron Tab"
-          onChange={e => handleJigglerInactivityLimitSecondsChange(e.target.value)}
+            value={scheduleCronTab}
+            onChange={e => handleJigglerScheduleCronTabChange(e.target.value)}
+          />
+        )}
+        <SelectMenuBasic
+          size="SM"
+          label="Jitter Percentage"
+          className="max-w-[192px]"
+          value={jitterPercentage}
+          fullWidth
+          onChange={e => {
+            if (e.target.value === "custom") {
+              setJitterPercentage(e.target.value);
+            } else {
+              handleJigglerJitterPercentageChange(e.target.value)
+            }
+          }}
+          options={[...jigglerJitterConfigs, { value: "custom", label: "Custom" }]}
+        />
+        {jitterPercentage === "custom" && (
+          <InputFieldWithLabel
+            required
+            label="Jitter Percentage"
+            placeholder="0.0"
+            onChange={e => handleJigglerJitterPercentageChange(e.target.value)}
+          />
+        )}
+        <SelectMenuBasic
+          size="SM"
+          label="Inactivity Limit Seconds"
+          className="max-w-[192px]"
+          value={inactivityLimitSeconds}
+          fullWidth
+          onChange={e => {
+            handleJigglerInactivityLimitSecondsChange(e.target.value);
+          }}
+          options={[...jigglerInactivityConfigs]}
         />
       </div>
       <div className="mt-6 flex gap-x-2">
@@ -90,7 +202,7 @@ export function JigglerSetting() {
           size="SM"
           theme="primary"
           text="Update Jiggler Config"
-          onClick={() => handleJigglerConfigChange(jigglerConfigState)}
+          onClick={() => handleJigglerConfigSave(jigglerConfigState)}
         />
       </div>
     </div>