diff --git a/src/apps/console/hooks/use-cluster-status-v2.tsx b/src/apps/console/hooks/use-cluster-status-depricated.tsx similarity index 100% rename from src/apps/console/hooks/use-cluster-status-v2.tsx rename to src/apps/console/hooks/use-cluster-status-depricated.tsx diff --git a/src/apps/console/hooks/use-cluster-status-v3.tsx b/src/apps/console/hooks/use-cluster-status-v3.tsx index 0bd2e77e7..a73651201 100644 --- a/src/apps/console/hooks/use-cluster-status-v3.tsx +++ b/src/apps/console/hooks/use-cluster-status-v3.tsx @@ -9,32 +9,41 @@ import { import { ChildrenProps } from '~/components/types'; import useDebounce from '~/root/lib/client/hooks/use-debounce'; import { useSocketWatch } from '~/root/lib/client/helpers/socket/useWatch'; -import { useParams } from '@remix-run/react'; +import { useOutletContext, useParams } from '@remix-run/react'; import { useConsoleApi } from '../server/gql/api-provider'; +import { parseName, parseNodes } from '../server/r-utils/common'; +import { IAccountContext } from '../routes/_main+/$account+/_layout'; const ctx = createContext<{ - clusters: { - [key: string]: string; - }; - setClusters: React.Dispatch>; + // clusters: { + // [key: string]: string; + // }; + // setClusters: React.Dispatch>; addToWatchList: (clusterNames: string[]) => void; removeFromWatchList: (clusterNames: string[]) => void; }>({ - clusters: {}, - setClusters: () => {}, + // clusters: {}, + // setClusters: () => {}, addToWatchList: () => {}, removeFromWatchList: () => {}, }); -const ClusterStatusProvider = ({ children }: ChildrenProps) => { - const [clusters, setClusters] = useState<{ - [key: string]: string; - }>({}); +const ClusterStatusProvider = ({ + children, + clustersMap, + setClustersMap, +}: ChildrenProps & { + clustersMap: { [key: string]: string }; + setClustersMap: React.Dispatch< + React.SetStateAction<{ [key: string]: string }> + >; +}) => { const [watchList, setWatchList] = useState<{ [key: string]: number; }>({}); const addToWatchList = (clusterNames: string[]) => { + console.log('nayak', clusterNames); setWatchList((s) => { const resp = clusterNames.reduce((acc, curr) => { if (!curr) { @@ -57,38 +66,50 @@ const ClusterStatusProvider = ({ children }: ChildrenProps) => { const caller = (wl: { [key: string]: number }) => { const keys = Object.keys(wl); - // console.log('nayak', wl, keys, Object.entries(wl)); - for (let i = 0; i < keys.length; i += 1) { - (async () => { - const w = keys[i]; - try { - const { data: cluster } = await api.getClusterStatus({ - name: w, - }); - setClusters((s) => { - return { - ...s, - [w]: cluster.lastOnlineAt, - }; - }); - } catch (e) { - console.log('error', e); - } - })(); - } + + (async () => { + try { + const { data: clusters } = await api.listClusterStatus({ + pagination: { + first: 100, + }, + search: { + allClusters: { + exact: true, + matchType: 'exact', + }, + text: { + array: keys, + matchType: 'array', + }, + }, + }); + + const parsedNodes = parseNodes(clusters); + + const lastOnlineAt = parsedNodes.reduce((acc, curr) => { + acc[parseName(curr)] = curr.lastOnlineAt; + return acc; + }, {} as { [key: string]: string }); + + setClustersMap((s) => { + return { + ...s, + ...lastOnlineAt, + }; + }); + } catch (e) { + console.log('error', e); + } + })(); }; useEffect(() => { - const t2 = setTimeout(() => { - caller(watchList); - }, 1000); - const t = setInterval(() => { caller(watchList); }, 30 * 1000); return () => { - clearTimeout(t2); clearInterval(t); }; }, [watchList]); @@ -96,8 +117,10 @@ const ClusterStatusProvider = ({ children }: ChildrenProps) => { const { account } = useParams(); const topic = useCallback(() => { - return Object.keys(clusters).map((c) => `account:${account}.cluster:${c}`); - }, [clusters])(); + return Object.keys(clustersMap).map( + (c) => `account:${account}.cluster:${c}` + ); + }, [clustersMap])(); useSocketWatch(() => { caller(watchList); @@ -128,12 +151,10 @@ const ClusterStatusProvider = ({ children }: ChildrenProps) => { ({ - clusters, - setClusters, addToWatchList, removeFromWatchList, }), - [clusters, setClusters] + [] )} > {children} @@ -150,7 +171,8 @@ export const useClusterStatusV3 = ({ clusterName?: string; clusterNames?: string[]; }) => { - const { clusters, addToWatchList, removeFromWatchList } = useContext(ctx); + const { clustersMap } = useOutletContext(); + const { addToWatchList, removeFromWatchList } = useContext(ctx); useDebounce( () => { if (!clusterName && !clusterNames) { @@ -176,6 +198,6 @@ export const useClusterStatusV3 = ({ ); return { - clusters, + clustersMap, }; }; diff --git a/src/apps/console/root.tsx b/src/apps/console/root.tsx index 4182d56ff..dee3a9cd2 100644 --- a/src/apps/console/root.tsx +++ b/src/apps/console/root.tsx @@ -5,7 +5,6 @@ import { SockProvider } from '~/root/lib/client/helpers/socket/context'; import authStylesUrl from './styles/index.css'; import highlightCss from './styles/hljs/tokyo-night-dark.min.css'; import { DataContextProvider } from './page-components/common-state'; -import ClusterStatusProvider from './hooks/use-cluster-status-v3'; export { loader } from '~/lib/app-setup/root.jsx'; export { shouldRevalidate } from '~/lib/app-setup/root.jsx'; @@ -29,11 +28,9 @@ const Layout = ({ children }: ChildrenProps) => { const _Root = ({ ...props }) => { return ( - - - - - + + + ); }; diff --git a/src/apps/console/routes/_main+/$account+/_layout.tsx b/src/apps/console/routes/_main+/$account+/_layout.tsx index 68b55c13d..dd3b1e530 100644 --- a/src/apps/console/routes/_main+/$account+/_layout.tsx +++ b/src/apps/console/routes/_main+/$account+/_layout.tsx @@ -25,19 +25,13 @@ import { IAccount, IAccounts, } from '~/console/server/gql/queries/account-queries'; -import { - ExtractNodeType, - parseName, - parseNodes, -} from '~/console/server/r-utils/common'; +import { parseName, parseNodes } from '~/console/server/r-utils/common'; import { Button } from '~/components/atoms/button'; import OptionList from '~/components/atoms/option-list'; import { cn } from '~/components/utils'; import MenuSelect, { SelectItem } from '~/console/components/menu-select'; -import { useClusterStatusV2 } from '~/console/hooks/use-cluster-status-v2'; import { useConsoleApi } from '~/console/server/gql/api-provider'; -import { IByocClusters } from '~/console/server/gql/queries/byok-cluster-queries'; import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-queries'; import { GQLServerHandler } from '~/console/server/gql/saved-queries'; import { @@ -52,6 +46,7 @@ import withContext from '~/root/lib/app-setup/with-contxt'; import { useSearch } from '~/root/lib/client/helpers/search-filter'; import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr'; import { handleError } from '~/root/lib/utils/common'; +import ClusterStatusProvider from '~/console/hooks/use-cluster-status-v3'; import { IConsoleRootContext } from '../_layout/_layout'; export const loader = async (ctx: IExtRemixCtx) => { @@ -76,10 +71,16 @@ export const loader = async (ctx: IExtRemixCtx) => { const { data: clusterList, errors: clusterError } = await GQLServerHandler( ctx.request - ).listByokClusters({ + ).listClusterStatus({ pagination: { first: 100, }, + search: { + allClusters: { + exact: true, + matchType: 'exact', + }, + }, }); if (clusterError) { @@ -87,9 +88,9 @@ export const loader = async (ctx: IExtRemixCtx) => { } const cMaps = parseNodes(clusterList).reduce((acc, c) => { - acc[c.metadata.name] = c; + acc[parseName(c)] = c.lastOnlineAt; return acc; - }, {} as { [key: string]: ExtractNodeType }); + }, {} as { [key: string]: string }); acccountData = data; @@ -104,7 +105,7 @@ export const loader = async (ctx: IExtRemixCtx) => { return k as { account: typeof acccountData; msvtemplates: IMSvTemplates; - clustersMap: { [key: string]: ExtractNodeType }; + clustersMap: { [key: string]: string }; }; } }; @@ -191,17 +192,22 @@ const Account = () => { ensureAccountClientSide(params); }, []); - const { setClusters } = useClusterStatusV2(); + const [cm, setCm] = useState(clustersMap); useEffect(() => { - // @ts-ignore - setClusters(clustersMap); + setCm(clustersMap); }, [clustersMap]); return ( - <> + { /> - + ); }; @@ -518,7 +524,10 @@ export const handle = ({ account }: any) => { export interface IAccountContext extends IConsoleRootContext { account: LoaderResult['account']; msvtemplates: IMSvTemplates; - clustersMap: { [key: string]: ExtractNodeType }; + clustersMap: { [key: string]: string }; + setClustersMap: React.Dispatch< + React.SetStateAction<{ [key: string]: string }> + >; } export const shouldRevalidate: ShouldRevalidateFunction = ({ diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/apps/apps-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/apps/apps-resources-v2.tsx index 2aa7f77ed..ce2349b5b 100644 --- a/src/apps/console/routes/_main+/$account+/env+/$environment+/apps/apps-resources-v2.tsx +++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/apps/apps-resources-v2.tsx @@ -25,8 +25,7 @@ import ResourceExtraAction, { IResourceExtraItem, } from '~/console/components/resource-extra-action'; import { SyncStatusV2 } from '~/console/components/sync-status'; -import { findClusterStatus } from '~/console/hooks/use-cluster-status'; -import { useClusterStatusV2 } from '~/console/hooks/use-cluster-status-v2'; +import { findClusterStatusv3 } from '~/console/hooks/use-cluster-status'; import { useConsoleApi } from '~/console/server/gql/api-provider'; import { IApps } from '~/console/server/gql/queries/app-queries'; import { @@ -40,6 +39,7 @@ import { useReload } from '~/lib/client/helpers/reloader'; import { useWatchReload } from '~/lib/client/helpers/socket/useWatch'; import { handleError } from '~/lib/utils/common'; import { NN } from '~/root/lib/types/common'; +import { useClusterStatusV3 } from '~/console/hooks/use-cluster-status-v3'; import { IEnvironmentContext } from '../_layout'; import HandleIntercept from './handle-intercept'; @@ -240,7 +240,10 @@ const GridView = ({ items = [], onAction: _ }: IResource) => { const ListView = ({ items = [], onAction }: IResource) => { const { environment, account } = useOutletContext(); - const { clusters } = useClusterStatusV2(); + // const { clusters } = useClusterStatusV2(); + const { clustersMap: clusterStatus } = useClusterStatusV3({ + clusterName: environment.clusterName, + }); // const [clusterOnlineStatus, setClusterOnlineStatus] = useState< // Record @@ -305,8 +308,8 @@ const ListView = ({ items = [], onAction }: IResource) => { }, ], rows: items.map((i) => { - const isClusterOnline = findClusterStatus( - clusters[environment.clusterName] + const isClusterOnline = findClusterStatusv3( + clusterStatus[environment.clusterName] ); const { name, id, updateInfo } = parseItem(i); @@ -339,6 +342,10 @@ const ListView = ({ items = [], onAction }: IResource) => { return ; } + if (clusterStatus[environment.clusterName] === undefined) { + return null; + } + if (!isClusterOnline) { return Cluster Offline; } @@ -404,9 +411,10 @@ const AppsResourcesV2 = ({ items = [] }: Omit) => { } // toast.success('app intercepted successfully'); toast.success( - `${intercept - ? 'App Intercepted successfully' - : 'App Intercept removed successfully' + `${ + intercept + ? 'App Intercepted successfully' + : 'App Intercept removed successfully' }` ); reload(); diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx index a6ef1181e..2a8448d82 100644 --- a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx +++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx @@ -16,8 +16,8 @@ import { LockSimple, Trash } from '~/console/components/icons'; import ListGridView from '~/console/components/list-grid-view'; import ListV2 from '~/console/components/listV2'; import ResourceExtraAction from '~/console/components/resource-extra-action'; -import { findClusterStatus } from '~/console/hooks/use-cluster-status'; -import { useClusterStatusV2 } from '~/console/hooks/use-cluster-status-v2'; +import { findClusterStatusv3 } from '~/console/hooks/use-cluster-status'; +import { useClusterStatusV3 } from '~/console/hooks/use-cluster-status-v3'; import { useConsoleApi } from '~/console/server/gql/api-provider'; import { IImportedManagedResources } from '~/console/server/gql/queries/imported-managed-resource-queries'; import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-queries'; @@ -134,7 +134,9 @@ const GridView = ({ items = [], onAction, templates }: IResource) => { const ListView = ({ items = [], onAction, templates }: IResource) => { const { environment } = useOutletContext(); - const { clusters } = useClusterStatusV2(); + const { clustersMap: clustersStatus } = useClusterStatusV3({ + clusterName: environment.clusterName, + }); // const [clusterOnlineStatus, setClusterOnlineStatus] = useState< // Record @@ -195,8 +197,8 @@ const ListView = ({ items = [], onAction, templates }: IResource) => { rows: items.map((i) => { const { name, id, logo, updateInfo } = parseItem(i, templates); // const isClusterOnline = clusterOnlineStatus[parseName(cluster)]; - const isClusterOnline = findClusterStatus( - clusters[environment.clusterName] + const isClusterOnline = findClusterStatusv3( + clustersStatus[environment.clusterName] ); return { @@ -232,7 +234,10 @@ const ListView = ({ items = [], onAction, templates }: IResource) => { }, status: { render: () => { - if (environment.clusterName === '') { + if ( + environment.clusterName === '' || + clustersStatus[environment.clusterName] === undefined + ) { return ; } 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 d2ddfe2cf..eca7c4073 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 @@ -14,8 +14,6 @@ import { import DeleteDialog from '~/console/components/delete-dialog'; import Grid from '~/console/components/grid'; import { - CircleFill, - CircleNotch, Copy, EnvIconComponent, EnvTemplateIconComponent, @@ -203,19 +201,10 @@ const GridView = ({ items = [], onAction }: IResource) => { const ListView = ({ items, onAction }: IResource) => { const { account } = useParams(); - // const { clusters } = useClusterStatusV2(); - const { clusters: clusterStatus } = useClusterStatusV3({ + const { clustersMap: clusterStatus } = useClusterStatusV3({ clusterNames: items.map((i) => i.clusterName), }); - // useDebounce( - // () => { - // console.log('nayak', clusterStatus); - // }, - // 100, - // [clusterStatus] - // ); - return ( { ], rows: items.map((i) => { const { name, id, updateInfo } = parseItem(i); - // const isClusterOnline = findClusterStatus(clusters[i.clusterName]); const isClusterOnlinev3 = findClusterStatusv3( clusterStatus[i.clusterName] ); @@ -285,33 +273,6 @@ const ListView = ({ items, onAction }: IResource) => { ) } /> - //
- // } - // className="border border-dashed !bg-surface-basic-subdued " - // /> - // ) : ( - // } - // /> - // ) - // } - // /> - // {i.clusterName === '' && ( - // - // )} - //
), }, cluster: { @@ -327,8 +288,6 @@ const ListView = ({ items, onAction }: IResource) => { status: { render: () => { if (i.clusterName === '') { - // return TEMPLATE; - // return ; return ; } @@ -341,16 +300,7 @@ const ListView = ({ items, onAction }: IResource) => { } if (clusterStatus[i.clusterName] === undefined) { - return ( -
- - - - - - -
- ); + return ; } if (!isClusterOnlinev3) { diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx index 675fd0666..87735304c 100644 --- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx +++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx @@ -49,8 +49,8 @@ import { handleError } from '~/root/lib/utils/common'; // import { Github__Com___Kloudlite___Api___Pkg___Types__SyncState as SyncStatusState } from '~/root/src/generated/gql/server'; import TooltipV2 from '~/components/atoms/tooltipV2'; import { ViewClusterLogs } from '~/console/components/cluster-logs-popop'; -import { useClusterStatusV2 } from '~/console/hooks/use-cluster-status-v2'; import { ensureAccountClientSide } from '~/console/server/utils/auth-utils'; +import { useClusterStatusV3 } from '~/console/hooks/use-cluster-status-v3'; import HandleByokCluster from '../byok-cluster/handle-byok-cluster'; type BaseType = ExtractNodeType & { type: 'normal' }; @@ -192,7 +192,7 @@ const ByokButton = ({ item }: { item: CombinedBaseType }) => { }} size="sm" variant="outline" - // prefix={} + // prefix={} /> )} @@ -405,7 +405,9 @@ const GridView = ({ items = [], onEdit, onDelete, onShowLogs }: IResource) => { }; const ListView = ({ items = [], onEdit, onDelete, onShowLogs }: IResource) => { const { account } = useParams(); - const { clusters } = useClusterStatusV2(); + const { clustersMap: clustersStatus } = useClusterStatusV3({ + clusterNames: items.map((i) => parseName(i)), + }); return ( { }, ], rows: items.map((i) => { - const { name, id, updateInfo, provider } = parseItem(i); + const { name, id, updateInfo } = parseItem(i); // const isLatest = dayjs(i.updateTime).isAfter( // dayjs().subtract(3, 'hour') @@ -473,7 +475,7 @@ const ListView = ({ items = [], onEdit, onDelete, onShowLogs }: IResource) => { return ( ); @@ -481,7 +483,7 @@ const ListView = ({ items = [], onEdit, onDelete, onShowLogs }: IResource) => { }, status: { render: () => ( - + ), }, updated: { 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 d5c53eda5..a7b710843 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 @@ -1,5 +1,5 @@ import { Link, useOutletContext, useParams } from '@remix-run/react'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { Badge } from '~/components/atoms/badge'; import { toast } from '~/components/molecule/toast'; import { generateKey, titleCase } from '~/components/utils'; @@ -17,8 +17,7 @@ import ListGridView from '~/console/components/list-grid-view'; import ListV2 from '~/console/components/listV2'; import ResourceExtraAction from '~/console/components/resource-extra-action'; import { SyncStatusV2 } from '~/console/components/sync-status'; -import { findClusterStatus } from '~/console/hooks/use-cluster-status'; -import { useClusterStatusV2 } from '~/console/hooks/use-cluster-status-v2'; +import { findClusterStatusv3 } from '~/console/hooks/use-cluster-status'; import { useConsoleApi } from '~/console/server/gql/api-provider'; import { IClusterMSvs } from '~/console/server/gql/queries/cluster-managed-services-queries'; import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-queries'; @@ -32,6 +31,7 @@ import { getManagedTemplate } from '~/console/utils/commons'; import { useReload } from '~/root/lib/client/helpers/reloader'; import { useWatchReload } from '~/root/lib/client/helpers/socket/useWatch'; import { handleError } from '~/root/lib/utils/common'; +import { useClusterStatusV3 } from '~/console/hooks/use-cluster-status-v3'; import { IAccountContext } from '../_layout'; import { IClusterContext } from '../infra+/$cluster+/_layout'; import CloneManagedService from './clone-managed-service'; @@ -163,18 +163,9 @@ const GridView = ({ items, templates, onAction }: IResource) => { 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 { clustersMap: clusterStatus } = useClusterStatusV3({ + clusterNames: items.map((i) => i.clusterName), + }); return ( { }, ], rows: items.map((i) => { - const isClusterOnline = findClusterStatus(clusters[i.clusterName]); + const isClusterOnline = findClusterStatusv3( + clusterStatus[i.clusterName] + ); const { name, id, logo, updateInfo } = parseItem(i, templates); return { columns: { @@ -240,6 +233,11 @@ const ListView = ({ items, templates, onAction }: IResource) => { if (i.isArchived) { return Archived; } + + if (clusterStatus[i.clusterName] === undefined) { + return ; + } + if (!isClusterOnline) { return Cluster Offline; } @@ -282,11 +280,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(); diff --git a/src/apps/console/routes/_main+/_layout/_layout.tsx b/src/apps/console/routes/_main+/_layout/_layout.tsx index c2ca178e0..9610b8a58 100644 --- a/src/apps/console/routes/_main+/_layout/_layout.tsx +++ b/src/apps/console/routes/_main+/_layout/_layout.tsx @@ -28,7 +28,6 @@ import { import { LoadingPlaceHolder } from '~/console/components/loading'; import LogoWrapper from '~/console/components/logo-wrapper'; import { ViewModeProvider } from '~/console/components/view-mode'; -import ClusterStatusProvider from '~/console/hooks/use-cluster-status-v2'; import { useConsoleApi } from '~/console/server/gql/api-provider'; import { IAccounts } from '~/console/server/gql/queries/account-queries'; import { ICommsNotifications } from '~/console/server/gql/queries/comms-queries'; @@ -495,21 +494,19 @@ const Console = () => { } /> - - - - - - - - - - - + + + + + + + + + ); };