From 4e9e842d2e28c0fdcf3764f6d6465c2d4aedba6a Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 22 Nov 2024 01:41:21 +0100
Subject: [PATCH] feat(frontend): added refresh feature and 5mins fetch
 interval

---
 .../observability/ObservabilityDashboard.tsx    | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/agenta-web/src/components/pages/observability/ObservabilityDashboard.tsx b/agenta-web/src/components/pages/observability/ObservabilityDashboard.tsx
index 1c2251f875..0d447677c0 100644
--- a/agenta-web/src/components/pages/observability/ObservabilityDashboard.tsx
+++ b/agenta-web/src/components/pages/observability/ObservabilityDashboard.tsx
@@ -16,7 +16,7 @@ import {formatCurrency, formatLatency, formatTokenUsage} from "@/lib/helpers/for
 import {getNodeById} from "@/lib/helpers/observability_helpers"
 import {Filter, FilterConditions, JSSTheme} from "@/lib/Types"
 import {_AgentaRootsResponse} from "@/services/observability/types"
-import {SwapOutlined} from "@ant-design/icons"
+import {ReloadOutlined, SwapOutlined} from "@ant-design/icons"
 import {
     Button,
     Input,
@@ -71,6 +71,7 @@ const ObservabilityDashboard = () => {
         setSort,
         pagination,
         setPagination,
+        fetchTraces,
     } = useObservabilityData()
     const appId = useAppId()
     const router = useRouter()
@@ -250,6 +251,12 @@ const ObservabilityDashboard = () => {
         }
     }, [activeTrace, selected])
 
+    useEffect(() => {
+        const interval = setInterval(fetchTraces, 300000)
+
+        return () => clearInterval(interval)
+    }, [])
+
     const selectedItem = useMemo(
         () => (traces?.length ? getNodeById(traces, selected) : null),
         [selected, traces],
@@ -480,6 +487,14 @@ const ObservabilityDashboard = () => {
 
             <div className="flex justify-between gap-2 flex-col 2xl:flex-row 2xl:items-center">
                 <Space>
+                    <Button
+                        icon={<ReloadOutlined />}
+                        onClick={() => {
+                            fetchTraces()
+                        }}
+                    >
+                        Reload
+                    </Button>
                     <Input.Search
                         placeholder="Search"
                         value={searchQuery}