Merge pull request #309 from kloudlite/ui/changes

WEB: Add sm variant for chip
kloudlite · Oct 4, 2024 · 0d5e47d · 0d5e47d
2 parents df6deea + 902de0b
commit 0d5e47d
Show file tree

Hide file tree

Showing 20 changed files with 255 additions and 273 deletions.
diff --git a/Dockerfile b/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

diff --git a/src/apps/console/components/alert-modal.tsx b/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>

diff --git a/src/apps/console/hooks/use-cluster-status-depricated.tsx b/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
@@ -1,3 +1,4 @@
+import { useOutletContext, useParams } from '@remix-run/react';
 import {
   createContext,
   useCallback,
@@ -7,12 +8,10 @@ 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 { useOutletContext, useParams } from '@remix-run/react';
-import { useConsoleApi } from '../server/gql/api-provider';
-import { parseName, parseNodes } from '../server/r-utils/common';
+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: {
@@ -43,7 +42,6 @@ const ClusterStatusProvider = ({
   }>({});
 
   const addToWatchList = (clusterNames: string[]) => {
-    console.log('nayak', clusterNames);
     setWatchList((s) => {
       const resp = clusterNames.reduce((acc, curr) => {
         if (!curr) {
@@ -69,7 +67,7 @@ const ClusterStatusProvider = ({
 
     (async () => {
       try {
-        const { data: clusters } = await api.listClusterStatus({
+        const { data: clustersStatus } = await api.listClusterStatus({
           pagination: {
             first: 100,
           },
@@ -85,17 +83,10 @@ const ClusterStatusProvider = ({
           },
         });
 
-        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,
+            ...clustersStatus,
           };
         });
       } catch (e) {
@@ -172,7 +163,7 @@ export const useClusterStatusV3 = ({
   clusterNames?: string[];
 }) => {
   const { clustersMap } = useOutletContext<IAccountContext>();
-  const { addToWatchList, removeFromWatchList } = useContext(ctx);
+  const { addToWatchList, removeFromWatchList: _ } = useContext(ctx);
   useDebounce(
     () => {
       if (!clusterName && !clusterNames) {
@@ -186,11 +177,11 @@ export const useClusterStatusV3 = ({
       }
 
       return () => {
-        if (clusterName) {
-          removeFromWatchList([clusterName]);
-        } else if (clusterNames) {
-          removeFromWatchList(clusterNames);
-        }
+        // if (clusterName) {
+        //   removeFromWatchList([clusterName]);
+        // } else if (clusterNames) {
+        //   removeFromWatchList(clusterNames);
+        // }
       };
     },
     100,

diff --git a/src/apps/console/page-components/app/compute.tsx b/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

diff --git a/src/apps/console/page-components/app/general.tsx b/src/apps/console/page-components/app/general.tsx
@@ -261,17 +261,18 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
   }, [readOnlyApp]);
 
   useEffect(() => {
-    if (
-      values.imagePullPolicy !==
-      readOnlyApp.spec.containers[activeContIndex].imagePullPolicy
-    ) {
-      setContainer((s) => {
-        return {
-          ...s,
-          imagePullPolicy: values.imagePullPolicy,
-        };
-      });
-    }
+    console.log('values', values.imagePullPolicy);
+    // if (
+    //   values.imagePullPolicy !==
+    //   readOnlyApp.spec.containers[activeContIndex].imagePullPolicy
+    // ) {
+    setContainer((s) => {
+      return {
+        ...s,
+        imagePullPolicy: values.imagePullPolicy,
+      };
+    });
+    // }
   }, [values.imagePullPolicy]);
 
   return (

diff --git a/src/apps/console/page-components/secret-resource-v2.tsx b/src/apps/console/page-components/secret-resource-v2.tsx
@@ -1,17 +1,17 @@
-import { Trash } from '~/console/components/icons';
 import { useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { toast } from '~/components/molecule/toast';
 import { generateKey, titleCase } from '~/components/utils';
+import { Trash } from '~/console/components/icons';
 import {
   ExtractNodeType,
   parseName,
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
+import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
-import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import {
   ListBody,
   ListItem,
@@ -23,10 +23,10 @@ import {
 import DeleteDialog from '../components/delete-dialog';
 import Grid from '../components/grid';
 import ListGridView from '../components/list-grid-view';
+import ListV2 from '../components/listV2';
 import ResourceExtraAction from '../components/resource-extra-action';
 import { useConsoleApi } from '../server/gql/api-provider';
 import { ISecrets } from '../server/gql/queries/secret-queries';
-import ListV2 from '../components/listV2';
 
 const RESOURCE_NAME = 'secret';
 type BaseType = ExtractNodeType<ISecrets>;
@@ -233,7 +233,7 @@ const SecretResourcesV2 = ({
   linkComponent = null,
 }: Omit<IResource, 'onDelete'>) => {
   const [showDeleteDialog, setShowDeleteDialog] = useState<BaseType | null>(
-    null,
+    null
   );
 
   const api = useConsoleApi();
@@ -245,9 +245,9 @@ const SecretResourcesV2 = ({
   useWatchReload(
     items.map((i) => {
       return `account:${account}.environment:${environment}.secret:${parseName(
-        i,
+        i
       )}`;
-    }),
+    })
   );
 
   const props: IResource = {

diff --git a/src/apps/console/routes/_a+/new-team.tsx b/src/apps/console/routes/_a+/new-team.tsx
@@ -99,7 +99,7 @@ const NewAccount = () => {
     <form onSubmit={handleSubmit}>
       <MultiStepProgressWrapper
         fillerImage={<FillerCreateTeam />}
-        title="Setup your account!"
+        title="Setup your team!"
         action={
           accountsData?.length === 0 && (
             <Button
@@ -118,11 +118,11 @@ const NewAccount = () => {
         {...(accountsData?.length === 0
           ? {}
           : {
-            backButton: {
-              content: 'Back to teams',
-              to: `/teams`,
-            },
-          })}
+              backButton: {
+                content: 'Back to teams',
+                to: `/teams`,
+              },
+            })}
       >
         <MultiStepProgress.Root
           hasPages={false}