Skip to content

Commit

Permalink
Merge pull request #311 from kloudlite/fix/cluster-status
Browse files Browse the repository at this point in the history 
🐛 Fixed issue with cluster status
  • Loading branch information
@abdheshnayak
abdheshnayak authored Oct 4, 2024
2 parents f412fa3 + ed794ba commit df6deea
Show file tree
Hide file tree
Showing 10 changed files with 160 additions and 172 deletions.
0 ...s/console/hooks/use-cluster-status-v2.tsx → ...e/hooks/use-cluster-status-depricated.tsx
View file
File renamed without changes.
106 changes: 64 additions & 42 deletions src/apps/console/hooks/use-cluster-status-v3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<React.SetStateAction<{ [key: string]: string }>>;
// clusters: {
// [key: string]: string;
// };
// setClusters: React.Dispatch<React.SetStateAction<{ [key: string]: string }>>;
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) {
Expand All @@ -57,47 +66,61 @@ 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]);

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);
Expand Down Expand Up @@ -128,12 +151,10 @@ const ClusterStatusProvider = ({ children }: ChildrenProps) => {
<ctx.Provider
value={useMemo(
() => ({
clusters,
setClusters,
addToWatchList,
removeFromWatchList,
}),
[clusters, setClusters]
[]
)}
>
{children}
Expand All @@ -150,7 +171,8 @@ export const useClusterStatusV3 = ({
clusterName?: string;
clusterNames?: string[];
}) => {
const { clusters, addToWatchList, removeFromWatchList } = useContext(ctx);
const { clustersMap } = useOutletContext<IAccountContext>();
const { addToWatchList, removeFromWatchList } = useContext(ctx);
useDebounce(
() => {
if (!clusterName && !clusterNames) {
Expand All @@ -176,6 +198,6 @@ export const useClusterStatusV3 = ({
);

return {
clusters,
clustersMap,
};
};
9 changes: 3 additions & 6 deletions src/apps/console/root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -29,11 +28,9 @@ const Layout = ({ children }: ChildrenProps) => {
const _Root = ({ ...props }) => {
return (
<SockProvider>
<ClusterStatusProvider>
<DataContextProvider>
<Root {...props} Wrapper={Layout} tagId={tagId} />
</DataContextProvider>
</ClusterStatusProvider>
<DataContextProvider>
<Root {...props} Wrapper={Layout} tagId={tagId} />
</DataContextProvider>
</SockProvider>
);
};
Expand Down
45 changes: 27 additions & 18 deletions src/apps/console/routes/_main+/$account+/_layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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) => {
Expand All @@ -76,20 +71,26 @@ 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) {
throw clusterError[0];
}

const cMaps = parseNodes(clusterList).reduce((acc, c) => {
acc[c.metadata.name] = c;
acc[parseName(c)] = c.lastOnlineAt;
return acc;
}, {} as { [key: string]: ExtractNodeType<IByocClusters> });
}, {} as { [key: string]: string });

acccountData = data;

Expand All @@ -104,7 +105,7 @@ export const loader = async (ctx: IExtRemixCtx) => {
return k as {
account: typeof acccountData;
msvtemplates: IMSvTemplates;
clustersMap: { [key: string]: ExtractNodeType<IByocClusters> };
clustersMap: { [key: string]: string };
};
}
};
Expand Down Expand Up @@ -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 (
<>
<ClusterStatusProvider clustersMap={cm} setClustersMap={setCm}>
<Outlet
context={{ ...rootContext, account, msvtemplates, clustersMap }}
context={{
...rootContext,
account,
msvtemplates,
clustersMap: cm,
setclustersMap: setCm,
}}
/>
<Popup.Root
show={unloadState === 'blocked'}
Expand All @@ -224,7 +230,7 @@ const Account = () => {
/>
</Popup.Footer>
</Popup.Root>
</>
</ClusterStatusProvider>
);
};

Expand Down Expand Up @@ -518,7 +524,10 @@ export const handle = ({ account }: any) => {
export interface IAccountContext extends IConsoleRootContext {
account: LoaderResult<typeof loader>['account'];
msvtemplates: IMSvTemplates;
clustersMap: { [key: string]: ExtractNodeType<IByocClusters> };
clustersMap: { [key: string]: string };
setClustersMap: React.Dispatch<
React.SetStateAction<{ [key: string]: string }>
>;
}

export const shouldRevalidate: ShouldRevalidateFunction = ({
Expand Down
24 changes: 16 additions & 8 deletions src/apps/console/routes/_main+/$account+/env+/$environment+/apps/apps-resources-v2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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';

Expand Down Expand Up @@ -240,7 +240,10 @@ const GridView = ({ items = [], onAction: _ }: IResource) => {

const ListView = ({ items = [], onAction }: IResource) => {
const { environment, account } = useOutletContext<IEnvironmentContext>();
const { clusters } = useClusterStatusV2();
// const { clusters } = useClusterStatusV2();
const { clustersMap: clusterStatus } = useClusterStatusV3({
clusterName: environment.clusterName,
});

// const [clusterOnlineStatus, setClusterOnlineStatus] = useState<
// Record<string, boolean>
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -339,6 +342,10 @@ const ListView = ({ items = [], onAction }: IResource) => {
return <ListItemV2 className="px-4xl" data="-" />;
}

if (clusterStatus[environment.clusterName] === undefined) {
return null;
}

if (!isClusterOnline) {
return <Badge type="warning">Cluster Offline</Badge>;
}
Expand Down Expand Up @@ -404,9 +411,10 @@ const AppsResourcesV2 = ({ items = [] }: Omit<IResource, 'onAction'>) => {
}
// toast.success('app intercepted successfully');
toast.success(
`${intercept
? 'App Intercepted successfully'
: 'App Intercept removed successfully'
`${
intercept
? 'App Intercepted successfully'
: 'App Intercept removed successfully'
}`
);
reload();
Expand Down
Loading

0 comments on commit df6deea

Please sign in to comment.