Merge pull request #275 from kloudlite/devrel/bugs

WEB: Devrel Bugs
kloudlite · Aug 12, 2024 · 6796f60 · 6796f60
2 parents 8ff0fa1 + 3eeb0bf
commit 6796f60
Show file tree

Hide file tree

Showing 12 changed files with 185 additions and 184 deletions.
diff --git a/src/apps/console/components/sync-status.tsx b/src/apps/console/components/sync-status.tsx
@@ -7,7 +7,6 @@ import {
   CircleFill,
   WarningCircleFill,
 } from '~/console/components/icons';
-import Tooltip from '~/components/atoms/tooltip';
 import {
   Github__Com___Kloudlite___Api___Pkg___Types__SyncState as ISyncState,
   Github__Com___Kloudlite___Api___Pkg___Types__SyncAction as ISyncAction,
@@ -286,82 +285,84 @@ export const SyncStatusV2 = ({
       return [];
     }
 
-    const items = checkList?.reduce(
-      (acc, curr) => {
-        const k = checks[curr.name];
-        if (acc.progress === 'done') {
-          acc.items.push({
-            ...curr,
-            result: 'idle',
-            message: '',
-          });
-          return acc;
-        }
+    const items = checkList
+      ?.filter((cl) => !cl.hide)
+      .reduce(
+        (acc, curr) => {
+          const k = checks[curr.name];
+          if (acc.progress === 'done') {
+            acc.items.push({
+              ...curr,
+              result: 'idle',
+              message: '',
+            });
+            return acc;
+          }
 
-        const res = ((): {
-          value: OverallStates;
-          progress: string;
-          message: string;
-        } => {
-          if (k) {
-            if (acc.value === 'idle' && k.state === 'yet-to-be-reconciled') {
-              return {
-                value: 'idle',
-                message: k.message,
-                progress: 'done',
-              };
+          const res = ((): {
+            value: OverallStates;
+            progress: string;
+            message: string;
+          } => {
+            if (k) {
+              if (acc.value === 'idle' && k.state === 'yet-to-be-reconciled') {
+                return {
+                  value: 'idle',
+                  message: k.message,
+                  progress: 'done',
+                };
+              }
+
+              if (k.state === 'under-reconcilation') {
+                return {
+                  value: 'in-progress',
+
+                  message: k.message,
+                  progress: 'done',
+                };
+              }
+
+              if (k.state === 'errored-during-reconcilation') {
+                return {
+                  value: 'error',
+                  message: k.message,
+                  progress: 'done',
+                };
+              }
+
+              if (k.state === 'finished-reconcilation') {
+                return {
+                  value: 'ready',
+                  message: k.message,
+                  progress: 'init',
+                };
+              }
             }
 
-            if (k.state === 'under-reconcilation') {
-              return {
-                value: 'in-progress',
+            return acc;
+          })();
 
-                message: k.message,
-                progress: 'done',
-              };
-            }
+          acc.items.push({
+            ...curr,
+            result: res?.value,
+            message: res.message,
+          });
 
-            if (k.state === 'errored-during-reconcilation') {
-              return {
-                value: 'error',
-                message: k.message,
-                progress: 'done',
-              };
-            }
-
-            if (k.state === 'finished-reconcilation') {
-              return {
-                value: 'ready',
-                message: k.message,
-                progress: 'init',
-              };
-            }
-          }
+          acc.value = res.value;
+          acc.progress = res.progress;
 
           return acc;
-        })();
-
-        acc.items.push({
-          ...curr,
-          result: res?.value,
-          message: res.message,
-        });
-
-        acc.value = res.value;
-        acc.progress = res.progress;
-
-        return acc;
-      },
-      {
-        value: 'idle' as OverallStates,
-        items: [] as ({
-          result: OverallStates;
-          message: string;
-        } & ICheckList)[],
-        message: '',
-        progress: 'init',
-      }
-    );
+        },
+        {
+          value: 'idle' as OverallStates,
+          items: [] as ({
+            result: OverallStates;
+            message: string;
+          } & 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
@@ -25,23 +25,27 @@ const useClusterStatus = () => {
   const api = useConsoleApi();
 
   const [clusters, setClusters] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
 
   const listCluster = useCallback(async () => {
+    setLoading(true);
     try {
       const clusters = await api.listAllClusters();
       setClusters(parseNodes(clusters.data) || []);
       return clusters;
     } catch (err) {
       console.error(err);
       return false;
+    } finally {
+      setLoading(false);
     }
   }, []);
 
   useEffect(() => {
     listCluster();
   }, []);
 
-  return { findClusterStatus, clusters };
+  return { findClusterStatus, clusters, loading };
 };
 
 export default useClusterStatus;
diff --git a/src/apps/console/page-components/handle-environment.tsx b/src/apps/console/page-components/handle-environment.tsx
@@ -135,7 +135,7 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
         clusterName: clusterList.find((c) => c.ready)?.value || '',
       }));
     }
-  }, [clusterList]);
+  }, [clusterList, show]);
 
   return (
     <Popup.Root

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
@@ -240,7 +240,7 @@ const GridView = ({ items = [], onAction: _ }: IResource) => {
 const ListView = ({ items = [], onAction }: IResource) => {
   const { environment, account, cluster } =
     useOutletContext<IEnvironmentContext>();
-  const { findClusterStatus, clusters } = useClusterStatus();
+  const { findClusterStatus, clusters, loading } = useClusterStatus();
 
   return (
     <ListV2.Root
@@ -321,15 +321,16 @@ const ListView = ({ items = [], onAction }: IResource) => {
                 render: () => <AppServiceView service={i.serviceHost || ''} />,
               },
               status: {
-                render: () => (
-                  <div className="inline-block">
-                    {isClusterOnline ? (
-                      <SyncStatusV2 item={i} />
-                    ) : (
-                      <Badge type="warning">Cluster Offline</Badge>
-                    )}
-                  </div>
-                ),
+                render: () => {
+                  if (loading) {
+                    return null;
+                  }
+                  if (!isClusterOnline) {
+                    return <Badge type="warning">Cluster Offline</Badge>;
+                  }
+
+                  return <SyncStatusV2 item={i} />;
+                },
               },
               updated: {
                 render: () => (

diff --git a/...onsole/routes/_main+/$account+/env+/$environment+/external-apps/external-app-resource.tsx b/...onsole/routes/_main+/$account+/env+/$environment+/external-apps/external-app-resource.tsx
@@ -126,7 +126,7 @@ const ExtraButton = ({ onAction, item }: IExtraButton) => {
       icon: <GearSix size={iconSize} />,
       type: 'item',
       to: `/${account}/env/${environment}/external-app/${parseName(
-        item,
+        item
       )}/settings/general`,
       key: 'settings',
     },
@@ -311,7 +311,7 @@ const ListView = ({ items = [], onAction }: IResource) => {
                             environment?.spec?.targetNamespace
                           }.svc.${parseName(cluster)}.local`
                         : `${parseName(i)}.${parseName(
-                            environment,
+                            environment
                           )}.svc.${parseName(cluster)}.local`
                     }
                   />
@@ -337,7 +337,7 @@ const ListView = ({ items = [], onAction }: IResource) => {
               },
             },
             to: `/${parseName(account)}/env/${parseName(
-              environment,
+              environment
             )}/external-app/${id}`,
           };
         }),
@@ -357,9 +357,9 @@ const ExternalNameResource = ({ items = [] }: Omit<IResource, 'onAction'>) => {
   useWatchReload(
     items.map((i) => {
       return `account:${parseName(account)}.environment:${parseName(
-        environment,
+        environment
       )}.app:${parseName(i)}`;
-    }),
+    })
   );
 
   const interceptExternalApp = async (item: BaseType, intercept: boolean) => {

diff --git a/...utes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx b/...utes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx
@@ -198,7 +198,7 @@ const Root = (props: IDialog) => {
               handleChange('managedServiceName')(dummyEvent(value));
             }}
             error={!!errors.managedServiceName}
-            message={errors.clusterName}
+            message={errors.managedServiceName}
             // loading={msvcIsLoading}
           />
 

diff --git a/...s/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx b/...s/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx
@@ -141,7 +141,7 @@ const GridView = ({ items = [], onAction, templates }: IResource) => {
 
 const ListView = ({ items = [], onAction, templates }: IResource) => {
   const { cluster } = useOutletContext<IEnvironmentContext>();
-  const { findClusterStatus, clusters } = useClusterStatus();
+  const { findClusterStatus, clusters, loading } = useClusterStatus();
 
   return (
     <ListV2.Root
@@ -229,6 +229,10 @@ const ListView = ({ items = [], onAction, templates }: IResource) => {
               },
               status: {
                 render: () => {
+                  if (loading) {
+                    return null;
+                  }
+
                   if (!isClusterOnline) {
                     return <Badge type="warning">Cluster Offline</Badge>;
                   }