diff --git a/src/apps/console/hooks/use-cluster-status-v2.tsx b/src/apps/console/hooks/use-cluster-status-v2.tsx index c2e795abc..88b29301d 100644 --- a/src/apps/console/hooks/use-cluster-status-v2.tsx +++ b/src/apps/console/hooks/use-cluster-status-v2.tsx @@ -6,6 +6,7 @@ import { createContext, useCallback, useContext, + useEffect, useMemo, useState, } from 'react'; @@ -36,10 +37,13 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => { const listCluster = useCallback(async () => { try { const cl = await api.listAllClusters(); - const parsed = parseNodes(cl.data).reduce((acc, c) => { - acc[c.metadata.name] = c; - return acc; - }, {} as { [key: string]: ExtractNodeType }); + const parsed = parseNodes(cl.data).reduce( + (acc, c) => { + acc[c.metadata.name] = c; + return acc; + }, + {} as { [key: string]: ExtractNodeType }, + ); setClusters(parsed); return clusters; } catch (err) { @@ -48,23 +52,36 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => { } }, []); + useEffect(() => { + const interval = setInterval(() => { + listCluster(); + }, 30 * 1000); + return () => { + clearInterval(interval); + }; + }, []); + useDebounce( () => { listCluster(); }, 3000, - [update] + [update], ); useSocketWatch(() => { setUpdate((p) => !p); }, topic); + useEffect(() => { + console.log('helre', topic); + }, [topic]); + return ( ({ clusters, setClusters }), - [clusters, setClusters] + [clusters, setClusters], )} > {children} diff --git a/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx index ab39f04d2..0fe3a7882 100644 --- a/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx +++ b/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx @@ -195,16 +195,16 @@ const ListView = ({ items, onAction }: IResource) => { const { account } = useParams(); const { clusters } = useClusterStatusV2(); - const [clusterOnlineStatus, setClusterOnlineStatus] = useState< - Record - >({}); - useEffect(() => { - const states: Record = {}; - Object.entries(clusters).forEach(([key, value]) => { - states[key] = findClusterStatus(value); - }); - setClusterOnlineStatus(states); - }, [clusters]); + // const [clusterOnlineStatus, setClusterOnlineStatus] = useState< + // Record + // >({}); + // useEffect(() => { + // const states: Record = {}; + // Object.entries(clusters).forEach(([key, value]) => { + // states[key] = findClusterStatus(value); + // }); + // setClusterOnlineStatus(states); + // }, [clusters]); return ( { ], rows: items.map((i) => { const { name, id, updateInfo } = parseItem(i); - const isClusterOnline = clusterOnlineStatus[i.clusterName]; + const isClusterOnline = findClusterStatus(clusters[i.clusterName]); return { columns: { @@ -312,7 +312,7 @@ const EnvironmentResourcesV2 = ({ items = [] }: { items: BaseType[] }) => { useWatchReload( items.map((i) => { return `account:${parseName(account)}.environment:${parseName(i)}`; - }) + }), ); const suspendEnvironment = async (item: BaseType, suspend: boolean) => { @@ -338,7 +338,7 @@ const EnvironmentResourcesV2 = ({ items = [] }: { items: BaseType[] }) => { suspend ? 'Environment suspended successfully' : 'Environment resumed successfully' - }` + }`, ); reloadPage(); } catch (err) { @@ -347,7 +347,7 @@ const EnvironmentResourcesV2 = ({ items = [] }: { items: BaseType[] }) => { }; const [showDeleteDialog, setShowDeleteDialog] = useState( - null + null, ); const [visible, setVisible] = useState(null); diff --git a/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx index e3dbee0fa..5b818d2b9 100644 --- a/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx +++ b/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx @@ -165,16 +165,16 @@ const ListView = ({ items, templates, onAction }: IResource) => { const { account } = useOutletContext(); const { clusters } = useClusterStatusV2(); - const [clusterOnlineStatus, setClusterOnlineStatus] = useState< - Record - >({}); - useEffect(() => { - const states: Record = {}; - Object.entries(clusters).forEach(([key, value]) => { - states[key] = findClusterStatus(value); - }); - setClusterOnlineStatus(states); - }, [clusters]); + // const [clusterOnlineStatus, setClusterOnlineStatus] = useState< + // Record + // >({}); + // useEffect(() => { + // const states: Record = {}; + // Object.entries(clusters).forEach(([key, value]) => { + // states[key] = findClusterStatus(value); + // }); + // setClusterOnlineStatus(states); + // }, [clusters]); return ( { }, ], rows: items.map((i) => { - const isClusterOnline = clusterOnlineStatus[i.clusterName]; + const isClusterOnline = clusters[i.clusterName]; const { name, id, logo, updateInfo } = parseItem(i, templates); return { columns: { @@ -282,11 +282,11 @@ const BackendServicesResourcesV2 = ({ return `account:${parseName(account)}.cluster:${ i.clusterName }.cluster_managed_service:${parseName(i)}`; - }) + }), ); const [showDeleteDialog, setShowDeleteDialog] = useState( - null + null, ); const [visible, setVisible] = useState(null); const api = useConsoleApi();