diff --git a/workspaces/augment/plugins/augment/src/components/CommandCenter/OpsOverview.tsx b/workspaces/augment/plugins/augment/src/components/CommandCenter/OpsOverview.tsx index e0c7faf565..246f89f44d 100644 --- a/workspaces/augment/plugins/augment/src/components/CommandCenter/OpsOverview.tsx +++ b/workspaces/augment/plugins/augment/src/components/CommandCenter/OpsOverview.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { useEffect, useState, useMemo } from 'react'; +import { useEffect, useState, useMemo, useCallback, useRef } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import { useTheme, alpha } from '@mui/material/styles'; @@ -53,31 +53,35 @@ export function OpsOverview({ namespace, onNavigate }: OpsOverviewProps) { const [agents, setAgents] = useState([]); const [tools, setTools] = useState([]); const [loading, setLoading] = useState(true); + const initialLoadDone = useRef(false); - useEffect(() => { - let cancelled = false; - setLoading(true); + const loadData = useCallback(() => { + if (!initialLoadDone.current) { + setLoading(true); + } Promise.all([ - api.listAgents().catch(() => []), + api.listAgents().catch(() => [] as ChatAgent[]), api .listKagentiTools(namespace) .then(r => r.tools ?? []) - .catch(() => []), + .catch(() => [] as KagentiToolSummary[]), ]) .then(([a, t]) => { - if (!cancelled) { - setAgents(a as ChatAgent[]); - setTools(t); - } + setAgents(a); + setTools(t); }) .finally(() => { - if (!cancelled) setLoading(false); + initialLoadDone.current = true; + setLoading(false); }); - return () => { - cancelled = true; - }; }, [api, namespace]); + useEffect(() => { + loadData(); + const interval = setInterval(loadData, 30_000); + return () => clearInterval(interval); + }, [loadData]); + const stats = useMemo(() => { const total = agents.length; const ready = agents.filter( diff --git a/workspaces/augment/plugins/augment/src/components/CommandCenter/ReviewQueue.tsx b/workspaces/augment/plugins/augment/src/components/CommandCenter/ReviewQueue.tsx index 8116b99e91..01b775068e 100644 --- a/workspaces/augment/plugins/augment/src/components/CommandCenter/ReviewQueue.tsx +++ b/workspaces/augment/plugins/augment/src/components/CommandCenter/ReviewQueue.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { useEffect, useState, useCallback } from 'react'; +import { useEffect, useState, useCallback, useRef } from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; @@ -54,19 +54,28 @@ export function ReviewQueue() { const [rejectAgentId, setRejectAgentId] = useState(null); const [rejectReason, setRejectReason] = useState(''); + const initialLoadDone = useRef(false); + const loadAgents = useCallback(() => { - setLoading(true); + if (!initialLoadDone.current) { + setLoading(true); + } api .listAgents() .then(result => setAgents(result.filter(a => a.lifecycleStage === 'review')), ) .catch(() => {}) - .finally(() => setLoading(false)); + .finally(() => { + initialLoadDone.current = true; + setLoading(false); + }); }, [api]); useEffect(() => { loadAgents(); + const interval = setInterval(loadAgents, 30_000); + return () => clearInterval(interval); }, [loadAgents]); const handleApprove = useCallback(