Merge pull request #49 from kloudlite/features/design

Fixed status issue in nodepool
kloudlite · Dec 21, 2023 · 74db9b8 · 74db9b8
2 parents 6e04950 + 5858581
commit 74db9b8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
@@ -120,7 +120,7 @@ interface IUpdateMeta {
 }
 
 // Component for Status parsing
-export type IStatus = 'deleting' | 'notready' | 'none';
+export type IStatus = 'deleting' | 'notready' | 'syncing' | 'none';
 
 interface IStatusMeta {
   markedForDeletion?: boolean;
@@ -136,6 +136,8 @@ interface IStatusMeta {
   };
 }
 
+type IResourceType = 'nodepool'
+
 type ICommonMeta = IUpdateMeta & IStatusMeta;
 
 const parseStatusComponent = ({ status }: { status: IStatus }) => {
@@ -144,18 +146,26 @@ const parseStatusComponent = ({ status }: { status: IStatus }) => {
       return <div className="bodySm text-text-soft pulsable">Deleting...</div>;
     case 'notready':
       return <div className="bodySm text-text-soft pulsable">Not Ready</div>;
+    case 'notready':
+      return <div className="bodySm text-text-soft pulsable">Syncing</div>;
     default:
       return null;
   }
 };
 
-export const parseStatus = (item: IStatusMeta) => {
+export const parseStatus = ({item, type}:{item: IStatusMeta, type?:IResourceType}) => {
   let status: IStatus = 'none';
 
   if (item.markedForDeletion) {
     status = 'deleting';
   } else if (!item.status?.isReady) {
-    status = 'notready';
+    switch(type){
+      case 'nodepool':
+        status = 'syncing'
+        break;
+      default:
+        status = 'notready'
+    }
   }
 
   return { status, component: parseStatusComponent({ status }) };
@@ -182,12 +192,12 @@ export const listRender = ({
         ),
       };
     },
-    statusRender: ({ className }: { className: string }) => {
+    statusRender: ({ className, type }: { className: string, type?:IResourceType }) => {
       return {
         key: generateKey(keyPrefix, 'status'),
         className,
-        render: () => parseStatus(resource).component,
-        status: parseStatus(resource).status,
+        render: () => parseStatus({item:resource, type}).component,
+        status: parseStatus({item:resource, type}).status,
       };
     },
   };

diff --git a/src/apps/console/routes/_.$account.$cluster.nodepools/nodepool-resources.tsx b/src/apps/console/routes/_.$account.$cluster.nodepools/nodepool-resources.tsx
@@ -117,8 +117,7 @@ const ListDetail = (
     }
     return (
       <div className="truncate">
-        {/* {minCount} - {maxCount} nodes */}
-        99 - 99 nodes
+        {minCount} - {maxCount} nodes
       </div>
     );
   };
@@ -154,7 +153,7 @@ const ListDetail = (
     }
   };
 
-  const statusRender = lR.statusRender({ className: 'w-[180px]' });
+  const statusRender = lR.statusRender({ className: 'w-[180px]', type:'nodepool' });
 
   return (
     <div className="w-full flex flex-col">