Merge pull request #270 from kloudlite/update/cluster-status

WEB: Resolve Cluster selection and cluster offline status
kloudlite · Aug 6, 2024 · 52073d3 · 52073d3
2 parents ae36aa8 + 49f55c8
commit 52073d3
Show file tree

Hide file tree

Showing 11 changed files with 232 additions and 209 deletions.
diff --git a/src/apps/console/components/sync-status.tsx b/src/apps/console/components/sync-status.tsx
@@ -217,7 +217,7 @@ const parseOverallState = (item: IStatusMetaV2): OverallStates => {
     {
       value: 'idle',
       progress: 'init',
-    },
+    }
   );
 
   return (mainStatus?.value as OverallStates) || 'idle';
@@ -360,7 +360,7 @@ export const SyncStatusV2 = ({
         } & ICheckList)[],
         message: '',
         progress: 'init',
-      },
+      }
     );
 
     return items?.items;

diff --git a/src/apps/console/hooks/use-cluster-status.tsx b/src/apps/console/hooks/use-cluster-status.tsx
@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useConsoleApi } from '../server/gql/api-provider';
+import { parseNodes } from '../server/r-utils/common';
+
+const findClusterStatus = (item?: { lastOnlineAt?: string }): boolean => {
+  if (!item || !item.lastOnlineAt) {
+    return false;
+  }
+
+  const lastTime = new Date(item.lastOnlineAt);
+  const currentTime = new Date();
+
+  const timeDifference =
+    (currentTime.getTime() - lastTime.getTime()) / (1000 * 60);
+
+  console.log(timeDifference);
+
+  switch (true) {
+    case timeDifference <= 2:
+      return true;
+    default:
+      return false;
+  }
+};
+
+const useClusterStatus = () => {
+  const api = useConsoleApi();
+
+  const [clusters, setClusters] = useState<any[]>([]);
+
+  const listCluster = useCallback(async () => {
+    try {
+      const clusters = await api.listAllClusters();
+      setClusters(parseNodes(clusters.data) || []);
+      return clusters;
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }, []);
+
+  useEffect(() => {
+    listCluster();
+  }, []);
+
+  return { findClusterStatus, clusters };
+};
+
+export default useClusterStatus;
diff --git a/src/apps/console/page-components/handle-environment.tsx b/src/apps/console/page-components/handle-environment.tsx
@@ -1,13 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Popup from '~/components/molecule/popup';
 import { toast } from '~/components/molecule/toast';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
-import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
 import Select from '~/components/atoms/select';
-import { useAppend, useMapper } from '~/components/utils';
 import { IDialog } from '../components/types.d';
 import { useConsoleApi } from '../server/gql/api-provider';
 import { DIALOG_TYPE } from '../utils/commons';
@@ -36,53 +34,30 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
   const api = useConsoleApi();
   const reloadPage = useReload();
 
-  const { data: clustersData, isLoading: cIsLoading } = useCustomSwr(
-    'clusters',
-    async () =>
-      api.listClusters({
-        pagination: {
-          first: 100,
-        },
-      }),
-    true
-  );
-
-  const { data: byokClustersData, isLoading: byokCIsLoading } = useCustomSwr(
-    'byokclusters',
-    async () =>
-      api.listByokClusters({
-        pagination: {
-          first: 100,
-        },
-      }),
-    true
-  );
-
-  const cData = useMapper(parseNodes(clustersData), (item) => {
-    return {
-      label: item.displayName,
-      value: parseName(item),
-      ready: item.status?.isReady,
-      render: () => (
-        <ClusterSelectItem label={item.displayName} value={parseName(item)} />
-      ),
-    };
-  });
+  const [clusterList, setClusterList] = useState<any[]>([]);
 
-  const bCData = useMapper(parseNodes(byokClustersData), (item) => {
-    return {
-      label: item.displayName,
-      value: parseName(item),
-      ready: true,
-      render: () => (
-        <ClusterSelectItem label={item.displayName} value={parseName(item)} />
-      ),
-    };
-  });
+  const getClusters = useCallback(async () => {
+    try {
+      const byokClusters = await api.listByokClusters({});
+      const data = parseNodes(byokClusters.data).map((c) => ({
+        label: c.displayName,
+        value: parseName(c),
+        ready: true,
+        render: () => (
+          <ClusterSelectItem label={c.displayName} value={parseName(c)} />
+        ),
+      }));
+      setClusterList(data);
+    } catch (err) {
+      handleError(err);
+    }
+  }, []);
 
-  const clusterList = useAppend(cData, bCData);
+  useEffect(() => {
+    getClusters();
+  }, []);
 
-  const [validationSchema, setValidationSchema] = useState<any>(
+  const [validationSchema] = useState<any>(
     Yup.object({
       displayName: Yup.string().required(),
       name: Yup.string().required(),
@@ -154,18 +129,13 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
   });
 
   useEffect(() => {
-    if (show && show.type === DIALOG_TYPE.EDIT) {
+    if (clusterList.length > 0) {
       setValues((v) => ({
         ...v,
-        displayName: show.data?.displayName || '',
+        clusterName: clusterList.find((c) => c.ready)?.value || '',
       }));
-      setValidationSchema(
-        Yup.object({
-          displayName: Yup.string().trim().required(),
-        })
-      );
     }
-  }, [show]);
+  }, [clusterList]);
 
   return (
     <Popup.Root
@@ -208,7 +178,6 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
               label="Select Cluster"
               size="lg"
               value={values.clusterName}
-              disabled={cIsLoading}
               placeholder="Select a Cluster"
               options={async () => [
                 ...((clusterList &&
@@ -222,7 +191,6 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
               }}
               error={!!errors.clusterName}
               message={errors.clusterName}
-              loading={cIsLoading || byokCIsLoading}
             />
 
             {/* <Checkbox */}

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
@@ -37,8 +37,8 @@ import { useState } from 'react';
 import { Badge } from '~/components/atoms/badge';
 import { CopyContentToClipboard } from '~/console/components/common-console-components';
 import { NN } from '~/root/lib/types/common';
-import { getClusterStatus } from '~/console/utils/commons';
 import TooltipV2 from '~/components/atoms/tooltipV2';
+import useClusterStatus from '~/console/hooks/use-cluster-status';
 import HandleIntercept from './handle-intercept';
 import { IEnvironmentContext } from '../_layout';
 
@@ -240,6 +240,7 @@ const GridView = ({ items = [], onAction: _ }: IResource) => {
 const ListView = ({ items = [], onAction }: IResource) => {
   const { environment, account, cluster } =
     useOutletContext<IEnvironmentContext>();
+  const { findClusterStatus, clusters } = useClusterStatus();
 
   return (
     <ListV2.Root
@@ -293,7 +294,11 @@ const ListView = ({ items = [], onAction }: IResource) => {
           },
         ],
         rows: items.map((i) => {
-          const isClusterOnline = getClusterStatus(cluster);
+          const isClusterOnline = findClusterStatus(
+            clusters.length > 0
+              ? clusters.find((c) => parseName(c) === parseName(cluster))
+              : cluster
+          );
 
           const { name, id, updateInfo } = parseItem(i);
           return {