Merge pull request #328 from kloudlite/fix/cluster-status

🐛 Fixed issue with cluster status inconsistency

.eslintrc.yml

@@ -30,11 +30,11 @@ env:
 settings:
   import/resolver:
     node:  
-      extensions: [.js, .jsx, .ts, .tsx, .json]
+      extensions: [.js, .jsx, .ts, .tsx, .json, ".d.ts"]
       moduleDirectory:
         - node_modules
-    jsconfig:
-      config: ./jsconfig.json
+    # jsconfig:
+    #   config: ./jsconfig.json
     typescript:
       project: ./tsconfig.json
 
@@ -115,6 +115,7 @@ rules:
       - \.svg
 
   import/no-extraneous-dependencies: 0
+  react/no-unused-prop-types: 0
 
   no-unused-vars: 
     - error

devbox.json

@@ -0,0 +1,14 @@
+{
+  "$schema":  "https://raw.githubusercontent.com/jetify-com/devbox/0.13.6/.schema/devbox.schema.json",
+  "packages": ["nodejs@22"],
+  "shell": {
+    "init_hook": [
+      "echo 'Welcome to devbox!' > /dev/null"
+    ],
+    "scripts": {
+      "test": [
+        "echo \"Error: no test specified\" && exit 1"
+      ]
+    }
+  }
+}

devbox.lock

@@ -0,0 +1,70 @@
+{
+  "lockfile_version": "1",
+  "packages": {
+    "nodejs@22": {
+      "last_modified": "2024-10-29T02:50:45Z",
+      "plugin_version": "0.0.2",
+      "resolved": "github:NixOS/nixpkgs/30c9efeef01e2ad4880bff6a01a61dd99536b3c9#nodejs_22",
+      "source": "devbox-search",
+      "version": "22.10.0",
+      "systems": {
+        "aarch64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/m1dlz5sk0l77a2c4mwcppldxxmsmifs2-nodejs-22.10.0",
+              "default": true
+            },
+            {
+              "name": "libv8",
+              "path": "/nix/store/9zyi8gcg1flm378pxpfi9d7wdvhnckrh-nodejs-22.10.0-libv8"
+            }
+          ],
+          "store_path": "/nix/store/m1dlz5sk0l77a2c4mwcppldxxmsmifs2-nodejs-22.10.0"
+        },
+        "aarch64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/pd3pz3aqw783fmh6c0c8plcy95bdk45n-nodejs-22.10.0",
+              "default": true
+            },
+            {
+              "name": "libv8",
+              "path": "/nix/store/44cfz2aglmzpy4b39idnkm9sqbyk6nc0-nodejs-22.10.0-libv8"
+            }
+          ],
+          "store_path": "/nix/store/pd3pz3aqw783fmh6c0c8plcy95bdk45n-nodejs-22.10.0"
+        },
+        "x86_64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/3c9ggwrv1ssbrpki607908mvlvarhrbq-nodejs-22.10.0",
+              "default": true
+            },
+            {
+              "name": "libv8",
+              "path": "/nix/store/gfr37bc0y98sl5q4lxclsv83gpr8i6va-nodejs-22.10.0-libv8"
+            }
+          ],
+          "store_path": "/nix/store/3c9ggwrv1ssbrpki607908mvlvarhrbq-nodejs-22.10.0"
+        },
+        "x86_64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/shb3803xjmjiyd2pd4lnc98w8ci2b5g6-nodejs-22.10.0",
+              "default": true
+            },
+            {
+              "name": "libv8",
+              "path": "/nix/store/yc69lrgmikpsz8ynr0l16fgs1pnw0kxa-nodejs-22.10.0-libv8"
+            }
+          ],
+          "store_path": "/nix/store/shb3803xjmjiyd2pd4lnc98w8ci2b5g6-nodejs-22.10.0"
+        }
+      }
+    }
+  }
+}

gql-queries-generator/doc/queries.graphql

@@ -409,6 +409,7 @@ query consoleListClusterStatus($search: SearchCluster, $pagination: CursorPagina
         metadata {
           name
         }
+        displayName
       }
     }
   }

public/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

src/apps/console/components/breadcrum.tsx

@@ -1,5 +1,8 @@
 import React, { ReactNode } from 'react';
-import { IButton, Button as NativeButton } from '@kloudlite/design-system/atoms/button';
+import {
+  IButton,
+  Button as NativeButton,
+} from '@kloudlite/design-system/atoms/button';
 
 interface IBreadcrum {
   children: ReactNode;

src/apps/console/components/sync-status.tsx

@@ -98,6 +98,7 @@ const state = ({
         text: textData(),
       };
     case 'in-progress':
+      // eslint-disable-next-line no-case-declarations
       const progressComponent = (
         <span className="animate-spin relative flex items-center justify-center text-text-warning">
           <CircleNotch size={type === 'minimal' ? iconSize : 12} />

src/apps/console/hooks/use-cluster-status-v3.tsx

@@ -7,17 +7,16 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { ChildrenProps } from '@kloudlite/design-system/types';
 import { useSocketWatch } from '~/root/lib/client/helpers/socket/useWatch';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
+import { ChildrenProps } from '@kloudlite/design-system/types';
 import { IAccountContext } from '../routes/_main+/$account+/_layout';
 import { useConsoleApi } from '../server/gql/api-provider';
+import { clustersStatusMap } from '../server/gql/queries/cluster-queries';
+
+// export const findClusterStatusv3 = findClusterStatus;
 
 const ctx = createContext<{
-  // clusters: {
-  //   [key: string]: string;
-  // };
-  // setClusters: React.Dispatch<React.SetStateAction<{ [key: string]: string }>>;
   addToWatchList: (clusterNames: string[]) => void;
   removeFromWatchList: (clusterNames: string[]) => void;
 }>({
@@ -32,10 +31,8 @@ const ClusterStatusProvider = ({
   clustersMap,
   setClustersMap,
 }: ChildrenProps & {
-  clustersMap: { [key: string]: string };
-  setClustersMap: React.Dispatch<
-    React.SetStateAction<{ [key: string]: string }>
-  >;
+  clustersMap: clustersStatusMap;
+  setClustersMap: React.Dispatch<React.SetStateAction<clustersStatusMap>>;
 }) => {
   const [watchList, setWatchList] = useState<{
     [key: string]: number;

src/apps/console/page-components/handle-environment.tsx

@@ -11,10 +11,9 @@ import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
 import { NameIdView } from '../components/name-id-view';
 import { IDialog } from '../components/types.d';
-import { findClusterStatus } from '../hooks/use-cluster-status';
 import { useConsoleApi } from '../server/gql/api-provider';
 import { IEnvironment } from '../server/gql/queries/environment-queries';
-import { parseName, parseNodes } from '../server/r-utils/common';
+import { parseName } from '../server/r-utils/common';
 import { DIALOG_TYPE } from '../utils/commons';
 
 export const ClusterSelectItem = ({
@@ -61,20 +60,22 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
 
   const getClusters = useCallback(async () => {
     try {
-      const byokClusters = await api.listByokClusters({});
-      const data = parseNodes(byokClusters.data).map((c) => ({
-        label: c.displayName,
-        value: parseName(c),
-        ready: findClusterStatus(c),
-        disabled: () => !findClusterStatus(c),
-        render: ({ disabled }: { disabled: boolean }) => (
-          <ClusterSelectItem
-            label={c.displayName}
-            value={parseName(c)}
-            disabled={disabled}
-          />
-        ),
-      }));
+      const { data: cmap } = await api.listClusterStatus({});
+      const data = Object.values(cmap).map(
+        ({ name, displayName, isOnline }) => ({
+          label: displayName,
+          value: name,
+          ready: isOnline,
+          disabled: () => !isOnline,
+          render: ({ disabled }: { disabled: boolean }) => (
+            <ClusterSelectItem
+              label={displayName}
+              value={name}
+              disabled={disabled}
+            />
+          ),
+        })
+      );
       setClusterList(data);
     } catch (err) {
       handleError(err);
@@ -90,7 +91,7 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
       displayName: Yup.string().required(),
       name: Yup.string().required(),
       // clusterName: Yup.string().required(),
-    }),
+    })
   );
 
   const {