devx related ui changes

Dockerfile

@@ -1,9 +1,9 @@
-FROM node:20.8.1-alpine as remix
+FROM node:20.8.1-alpine AS remix
 WORKDIR  /app
 COPY ./package-production.json ./package.json
 RUN npm i --frozen-lockfile
 
-FROM node:20.8.1-alpine as install
+FROM node:20.8.1-alpine AS install
 RUN npm i -g pnpm
 WORKDIR  /app
 COPY ./package.json ./package.json
@@ -19,7 +19,7 @@ COPY ./src/generated/plugin/package.json  ./src/generated/plugin/pnpm-lock.yaml
 
 RUN pnpm i -p --frozen-lockfile
 
-FROM node:20.8.1-alpine as build
+FROM node:20.8.1-alpine AS build
 RUN npm i -g pnpm
 WORKDIR  /app
 ARG APP

src/apps/console/components/alert-modal.tsx

@@ -13,6 +13,7 @@ export interface IAlertModal {
   title: ReactNode;
   okText?: string;
   okDisabled?: boolean;
+  showOkButton?: boolean;
   cancelText?: string;
   variant?: ButtonVariants;
   footer?: boolean;
@@ -28,6 +29,7 @@ const AlertModal = ({
   title,
   okDisabled = false,
   okText = 'Delete',
+  showOkButton = true,
   cancelText = 'Cancel',
   variant = 'critical',
 }: IAlertModal) => {
@@ -55,14 +57,16 @@ const AlertModal = ({
         {footer && (
           <AlertDialog.Footer>
             <AlertDialog.Button variant="basic" content={cancelText} closable />
-            <AlertDialog.Button
-              type="submit"
-              disabled={okDisabled}
-              variant={variant}
-              content={okText}
-              closable={false}
-              loading={isLoading}
-            />
+            {showOkButton && (
+              <AlertDialog.Button
+                type="submit"
+                disabled={okDisabled}
+                variant={variant}
+                content={okText}
+                closable={false}
+                loading={isLoading}
+              />
+            )}
           </AlertDialog.Footer>
         )}
       </form>

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

@@ -1,3 +1,4 @@
+import { useOutletContext, useParams } from '@remix-run/react';
 import {
   createContext,
   useCallback,
@@ -7,29 +8,35 @@ import {
   useState,
 } from 'react';
 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 useDebounce from '~/root/lib/client/hooks/use-debounce';
+import { IAccountContext } from '../routes/_main+/$account+/_layout';
 import { useConsoleApi } from '../server/gql/api-provider';
 
 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;
   }>({});
@@ -57,47 +64,54 @@ 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: clustersStatus } = await api.listClusterStatus({
+          pagination: {
+            first: 100,
+          },
+          search: {
+            allClusters: {
+              exact: true,
+              matchType: 'exact',
+            },
+            text: {
+              array: keys,
+              matchType: 'array',
+            },
+          },
+        });
+
+        setClustersMap((s) => {
+          return {
+            ...s,
+            ...clustersStatus,
+          };
+        });
+      } 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);
@@ -128,12 +142,10 @@ const ClusterStatusProvider = ({ children }: ChildrenProps) => {
     <ctx.Provider
       value={useMemo(
         () => ({
-          clusters,
-          setClusters,
           addToWatchList,
           removeFromWatchList,
         }),
-        [clusters, setClusters]
+        []
       )}
     >
       {children}
@@ -150,7 +162,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) {
@@ -164,18 +177,18 @@ export const useClusterStatusV3 = ({
       }
 
       return () => {
-        if (clusterName) {
-          removeFromWatchList([clusterName]);
-        } else if (clusterNames) {
-          removeFromWatchList(clusterNames);
-        }
+        // if (clusterName) {
+        //   removeFromWatchList([clusterName]);
+        // } else if (clusterNames) {
+        //   removeFromWatchList(clusterNames);
+        // }
       };
     },
     100,
     [clusterName, clusterNames]
   );
 
   return {
-    clusters,
+    clustersMap,
   };
 };

src/apps/console/page-components/app/compute.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { Button } from '~/components/atoms/button';
 import { NumberInput } from '~/components/atoms/input';
 import Select from '~/components/atoms/select';
 import Slider from '~/components/atoms/slider';
@@ -257,7 +256,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
         )}
 
         <div className="flex flex-col gap-3xl pt-3xl">
-          <Button
+          {/* <Button
             size="sm"
             content={
               <span className="truncate text-left">Advanced options</span>
@@ -267,7 +266,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
             onClick={() => {
               setAdvancedOptions(!advancedOptions);
             }}
-          />
+          /> */}
 
           {/* {advancedOptions && (
             <Select