From 27ba01458b2e2c1113559e39e95565b63ad5ddb6 Mon Sep 17 00:00:00 2001
From: Vansh Kalra <vansh@erino.io>
Date: Sat, 13 Sep 2025 00:53:05 +0530
Subject: [PATCH 1/4] feat: add auto-refresh frequency dropdown to dashboard

- Added dropdown for user to select refresh intervals
- Added options: Off, 5s, 10s, 30s, 1min
- Implemented auto-refresh functionality

Fixes #371
---
 dashboard/src/components/RunsTable.tsx | 35 ++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/dashboard/src/components/RunsTable.tsx b/dashboard/src/components/RunsTable.tsx
index 70c2409d..cb892986 100644
--- a/dashboard/src/components/RunsTable.tsx
+++ b/dashboard/src/components/RunsTable.tsx
@@ -23,6 +23,14 @@ interface RunsTableProps {
   namespace: string;
 }
 
+const REFRESH_OPTIONS = [
+  { label: "Off", value: 0 },
+  { label: "5 seconds", value: 5000 },
+  { label: "10 seconds", value: 10000 },
+  { label: "30 seconds", value: 30000 },
+  { label: "1 minute", value: 60000 },
+];
+
 export const RunsTable: React.FC<RunsTableProps> = ({
   namespace
 }) => {
@@ -33,6 +41,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
   const [showGraph, setShowGraph] = useState(false);
+  const [refreshInterval, setRefreshInterval] = useState(0);
 
   const loadRuns = useCallback(async (page: number, size: number) => {
     setIsLoading(true);
@@ -54,6 +63,16 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     }
   }, [namespace, currentPage, pageSize, loadRuns]);
 
+  useEffect(() => {
+    if (refreshInterval === 0) return;
+
+    const interval = setInterval(() => {
+      loadRuns(currentPage, pageSize);
+    }, refreshInterval);
+
+    return () => clearInterval(interval);
+  }, [refreshInterval, currentPage, pageSize, loadRuns]);
+
   const handlePageChange = (newPage: number) => {
     setCurrentPage(newPage);
     setSelectedRunId(null);
@@ -144,6 +163,22 @@ export const RunsTable: React.FC<RunsTableProps> = ({
             <p className="text-sm text-gray-600">Monitor and visualize workflow executions</p>
           </div>
         </div>
+
+        <div className="flex items-center space-x-2">
+          <label className="text-sm text-gray-700">Auto-refresh:</label>
+          <select
+            value={refreshInterval}
+            onChange={(e) => setRefreshInterval(Number(e.target.value))}
+            className="border border-gray-300 rounded-md px-2 py-1 text-sm"
+          >
+            {REFRESH_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
         <button
           onClick={() => loadRuns(currentPage, pageSize)}
           className="flex items-center space-x-2 px-4 py-2 bg-[#031035] text-white rounded-lg hover:bg-[#0a1a4a] transition-colors"

From 24984d003d5e0f4777dbfca849f05a9675e4c87a Mon Sep 17 00:00:00 2001
From: Vansh Kalra <vansh@erino.io>
Date: Sat, 13 Sep 2025 14:23:42 +0530
Subject: [PATCH 2/4] ai-review-changes: - enhanced auto-polling useEffect to
 avoid requests overlapping - added htmlFor and id for select dropdown for
 better accessibility - made REFRESH_OPTIONS constant type-safe

---
 dashboard/src/components/RunsTable.tsx | 29 +++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/components/RunsTable.tsx b/dashboard/src/components/RunsTable.tsx
index cb892986..ba63cd09 100644
--- a/dashboard/src/components/RunsTable.tsx
+++ b/dashboard/src/components/RunsTable.tsx
@@ -29,7 +29,7 @@ const REFRESH_OPTIONS = [
   { label: "10 seconds", value: 10000 },
   { label: "30 seconds", value: 30000 },
   { label: "1 minute", value: 60000 },
-];
+] as const;
 
 export const RunsTable: React.FC<RunsTableProps> = ({
   namespace
@@ -64,13 +64,27 @@ export const RunsTable: React.FC<RunsTableProps> = ({
   }, [namespace, currentPage, pageSize, loadRuns]);
 
   useEffect(() => {
-    if (refreshInterval === 0) return;
+    if (refreshInterval === 0) {
+      return;
+    }
 
-    const interval = setInterval(() => {
-      loadRuns(currentPage, pageSize);
-    }, refreshInterval);
+    let isCancelled = false;
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    const poll = () => {
+      loadRuns(currentPage, pageSize).finally(() => {
+        if (!isCancelled) {
+          timeoutId = setTimeout(poll, refreshInterval);
+        }
+      });
+    };
+
+    timeoutId = setTimeout(poll, refreshInterval);
 
-    return () => clearInterval(interval);
+    return () => {
+      isCancelled = true;
+      clearTimeout(timeoutId);
+    };
   }, [refreshInterval, currentPage, pageSize, loadRuns]);
 
   const handlePageChange = (newPage: number) => {
@@ -165,8 +179,9 @@ export const RunsTable: React.FC<RunsTableProps> = ({
         </div>
 
         <div className="flex items-center space-x-2">
-          <label className="text-sm text-gray-700">Auto-refresh:</label>
+          <label htmlFor='auto-refresh-select' className="text-sm text-gray-700">Auto-refresh:</label>
           <select
+            id='auto-refresh-select'
             value={refreshInterval}
             onChange={(e) => setRefreshInterval(Number(e.target.value))}
             className="border border-gray-300 rounded-md px-2 py-1 text-sm"

From b5b5e713309e9dfc49c09e8c72a1a27edb9b25c5 Mon Sep 17 00:00:00 2001
From: Vansh Kalra <vansh@erino.io>
Date: Sat, 13 Sep 2025 14:31:44 +0530
Subject: [PATCH 3/4] ai-review-changes: - Added type for refresh interval
 state

---
 dashboard/src/components/RunsTable.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/components/RunsTable.tsx b/dashboard/src/components/RunsTable.tsx
index ba63cd09..b6294bc5 100644
--- a/dashboard/src/components/RunsTable.tsx
+++ b/dashboard/src/components/RunsTable.tsx
@@ -31,6 +31,8 @@ const REFRESH_OPTIONS = [
   { label: "1 minute", value: 60000 },
 ] as const;
 
+type RefreshMs = typeof REFRESH_OPTIONS[number]['value'];
+
 export const RunsTable: React.FC<RunsTableProps> = ({
   namespace
 }) => {
@@ -41,7 +43,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
   const [showGraph, setShowGraph] = useState(false);
-  const [refreshInterval, setRefreshInterval] = useState(0);
+  const [refreshInterval, setRefreshInterval] = useState<RefreshMs>(0);
 
   const loadRuns = useCallback(async (page: number, size: number) => {
     setIsLoading(true);
@@ -183,7 +185,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
           <select
             id='auto-refresh-select'
             value={refreshInterval}
-            onChange={(e) => setRefreshInterval(Number(e.target.value))}
+            onChange={(e) => setRefreshInterval(Number(e.target.value) as RefreshMs)}
             className="border border-gray-300 rounded-md px-2 py-1 text-sm"
           >
             {REFRESH_OPTIONS.map((option) => (

From 24a238f7689e9b6e0d889b8dee299b43aeba64f8 Mon Sep 17 00:00:00 2001
From: Vansh Kalra <vansh@erino.io>
Date: Sat, 13 Sep 2025 17:28:39 +0530
Subject: [PATCH 4/4] changes: enhanced UI for autorefresh dropdown

---
 dashboard/src/components/RunsTable.tsx | 42 +++++++++++++++-----------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/dashboard/src/components/RunsTable.tsx b/dashboard/src/components/RunsTable.tsx
index b6294bc5..3add88e2 100644
--- a/dashboard/src/components/RunsTable.tsx
+++ b/dashboard/src/components/RunsTable.tsx
@@ -181,30 +181,38 @@ export const RunsTable: React.FC<RunsTableProps> = ({
         </div>
 
         <div className="flex items-center space-x-2">
-          <label htmlFor='auto-refresh-select' className="text-sm text-gray-700">Auto-refresh:</label>
+          <label 
+          htmlFor="auto-refresh-select" 
+          className="text-xs font-medium text-gray-600"
+          >
+            Auto-refresh
+          </label>
           <select
-            id='auto-refresh-select'
+            id="auto-refresh-select"
             value={refreshInterval}
             onChange={(e) => setRefreshInterval(Number(e.target.value) as RefreshMs)}
-            className="border border-gray-300 rounded-md px-2 py-1 text-sm"
-          >
-            {REFRESH_OPTIONS.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
+            className="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white shadow-sm 
+               focus:outline-none focus:ring-2 focus:ring-[#031035] focus:border-[#031035] 
+               hover:border-gray-400 transition"
+            >
+              {REFRESH_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
           </select>
-        </div>
 
-        <button
-          onClick={() => loadRuns(currentPage, pageSize)}
-          className="flex items-center space-x-2 px-4 py-2 bg-[#031035] text-white rounded-lg hover:bg-[#0a1a4a] transition-colors"
-        >
-          <RefreshCw className="w-4 h-4" />
-          <span>Refresh</span>
-        </button>
+          <button
+            onClick={() => loadRuns(currentPage, pageSize)}
+            className="flex items-center space-x-2 px-4 py-2 bg-[#031035] text-white rounded-lg hover:bg-[#0a1a4a] transition-colors shadow-sm"
+          >
+            <RefreshCw className="w-4 h-4" />
+            <span>Refresh</span>
+          </button>
+        </div>
       </div>
 
+
       {/* Graph Visualization */}
       {showGraph && selectedRunId && (
         <div className="mb-6">