minor ui changes

kloudlite · Aug 29, 2024 · 88bd72f · 88bd72f
1 parent 37aa2eb
commit 88bd72f
Show file tree

Hide file tree

Showing 27 changed files with 1,020 additions and 274 deletions.
diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
@@ -3992,6 +3992,51 @@ mutation consoleDeleteImagePullSecrets($name: String!) {
   core_deleteImagePullSecret(name: $name)
 }
 
+query consoleGetImagePullSecret($name: String!) {
+  core_getImagePullSecret(name: $name) {
+    accountName
+    createdBy {
+      userEmail
+      userId
+      userName
+    }
+    creationTime
+    displayName
+    dockerConfigJson
+    environments
+    format
+    id
+    lastUpdatedBy {
+      userEmail
+      userId
+      userName
+    }
+    markedForDeletion
+    metadata {
+      annotations
+      creationTimestamp
+      deletionTimestamp
+      generation
+      labels
+      name
+      namespace
+    }
+    recordVersion
+    registryPassword
+    registryURL
+    registryUsername
+    syncStatus {
+      action
+      error
+      lastSyncedAt
+      recordVersion
+      state
+      syncScheduledAt
+    }
+    updateTime
+  }
+}
+
 query consoleListImagePullSecrets($search: SearchImagePullSecrets, $pq: CursorPaginationIn) {
   core_listImagePullSecrets(search: $search, pq: $pq) {
     edges {

diff --git a/src/apps/console/hooks/use-cluster-status-v2.tsx b/src/apps/console/hooks/use-cluster-status-v2.tsx
@@ -1,3 +1,4 @@
+import { useParams } from '@remix-run/react';
 import {
   Dispatch,
   ReactNode,
@@ -8,12 +9,11 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { ExtractNodeType, parseNodes } from '../server/r-utils/common';
-import { IByocClusters } from '../server/gql/queries/byok-cluster-queries';
-import { useParams } from '@remix-run/react';
 import { useSocketWatch } from '~/root/lib/client/helpers/socket/useWatch';
-import { useConsoleApi } from '../server/gql/api-provider';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
+import { useConsoleApi } from '../server/gql/api-provider';
+import { IByocClusters } from '../server/gql/queries/byok-cluster-queries';
+import { ExtractNodeType, parseNodes } from '../server/r-utils/common';
 
 type IClusterMap = { [key: string]: ExtractNodeType<IByocClusters> };
 
@@ -36,13 +36,10 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => {
   const listCluster = useCallback(async () => {
     try {
       const cl = await api.listAllClusters();
-      const parsed = parseNodes(cl.data).reduce(
-        (acc, c) => {
-          acc[c.metadata.name] = c;
-          return acc;
-        },
-        {} as { [key: string]: ExtractNodeType<IByocClusters> },
-      );
+      const parsed = parseNodes(cl.data).reduce((acc, c) => {
+        acc[c.metadata.name] = c;
+        return acc;
+      }, {} as { [key: string]: ExtractNodeType<IByocClusters> });
       setClusters(parsed);
       return clusters;
     } catch (err) {
@@ -56,7 +53,7 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => {
       listCluster();
     },
     3000,
-    [update],
+    [update]
   );
 
   useSocketWatch(() => {
@@ -67,7 +64,7 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => {
     <ClusterStatusContext.Provider
       value={useMemo(
         () => ({ clusters, setClusters }),
-        [clusters, setClusters],
+        [clusters, setClusters]
       )}
     >
       {children}

diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/_layout.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/_layout.tsx
@@ -1,10 +1,3 @@
-import {
-  BackingServices,
-  CirclesFour,
-  GearSix,
-  File,
-  // TreeStructure,
-} from '~/console/components/icons';
 import {
   Link,
   Outlet,
@@ -13,20 +6,26 @@ import {
   useParams,
 } from '@remix-run/react';
 import { useState } from 'react';
+import Breadcrum from '~/console/components/breadcrum';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
+import {
+  BackingServices,
+  CirclesFour,
+  File,
+  GearSix,
+} from '~/console/components/icons';
 import HandleScope from '~/console/page-components/handle-environment';
+import { ICluster } from '~/console/server/gql/queries/cluster-queries';
+import { IEnvironment } from '~/console/server/gql/queries/environment-queries';
+import { ILoginUrls, ILogins } from '~/console/server/gql/queries/git-queries';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseName } from '~/console/server/r-utils/common';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
+import { BreadcrumSlash, tabIconSize } from '~/console/utils/commons';
 import { SubNavDataProvider } from '~/lib/client/hooks/use-create-subnav-action';
 import { IRemixCtx, LoaderResult } from '~/lib/types/common';
-import { BreadcrumSlash, tabIconSize } from '~/console/utils/commons';
-import { IEnvironment } from '~/console/server/gql/queries/environment-queries';
-import { ILoginUrls, ILogins } from '~/console/server/gql/queries/git-queries';
 import logger from '~/root/lib/client/helpers/log';
-import Breadcrum from '~/console/components/breadcrum';
 import { handleError } from '~/root/lib/utils/common';
-import { ICluster } from '~/console/server/gql/queries/cluster-queries';
 import { IAccountContext } from '../../_layout';
 
 const Environment = () => {
@@ -65,7 +64,7 @@ const tabs = [
     label: (
       <span className="flex flex-row items-center gap-lg">
         <BackingServices size={tabIconSize} />
-        Integrated Resources
+        Imported Managed Resources
       </span>
     ),
     to: '/managed-resources',

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
@@ -25,7 +25,8 @@ import ResourceExtraAction, {
   IResourceExtraItem,
 } from '~/console/components/resource-extra-action';
 import { SyncStatusV2 } from '~/console/components/sync-status';
-import useClusterStatus from '~/console/hooks/use-cluster-status';
+import { findClusterStatus } from '~/console/hooks/use-cluster-status';
+import { useClusterStatusV2 } from '~/console/hooks/use-cluster-status-v2';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { IApps } from '~/console/server/gql/queries/app-queries';
 import {
@@ -240,15 +241,15 @@ const GridView = ({ items = [], onAction: _ }: IResource) => {
 const ListView = ({ items = [], onAction }: IResource) => {
   const { environment, account, cluster } =
     useOutletContext<IEnvironmentContext>();
-  const { findClusterStatus, clusters, loading } = useClusterStatus();
+  const { clusters } = useClusterStatusV2();
 
   const [clusterOnlineStatus, setClusterOnlineStatus] = useState<
     Record<string, boolean>
   >({});
   useEffect(() => {
     const states: Record<string, boolean> = {};
-    clusters.forEach((c) => {
-      states[c.metadata.name] = findClusterStatus(c);
+    Object.entries(clusters).forEach(([key, value]) => {
+      states[key] = findClusterStatus(value);
     });
     setClusterOnlineStatus(states);
   }, [clusters]);
@@ -329,10 +330,6 @@ const ListView = ({ items = [], onAction }: IResource) => {
               },
               status: {
                 render: () => {
-                  if (loading) {
-                    return null;
-                  }
-
                   if (environment.spec?.suspend) {
                     return null;
                   }

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
@@ -1,30 +1,30 @@
 /* eslint-disable react/destructuring-assignment */
+import { useOutletContext, useParams } from '@remix-run/react';
+import { useCallback, useEffect, useState } from 'react';
+import Select from '~/components/atoms/select';
 import Popup from '~/components/molecule/popup';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
+import { toast } from '~/components/molecule/toast';
+import { useMapper } from '~/components/utils';
+import { CopyContentToClipboard } from '~/console/components/common-console-components';
+import { ListItem } from '~/console/components/console-list-components';
+import ListV2 from '~/console/components/listV2';
+import { LoadingPlaceHolder } from '~/console/components/loading';
+import MultiStep, { useMultiStep } from '~/console/components/multi-step';
+import { NameIdView } from '~/console/components/name-id-view';
 import { IDialogBase } from '~/console/components/types.d';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { IImportedManagedResources } from '~/console/server/gql/queries/imported-managed-resource-queries';
 import {
   ExtractNodeType,
   parseName,
   parseNodes,
 } from '~/console/server/r-utils/common';
-import Select from '~/components/atoms/select';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { useOutletContext, useParams } from '@remix-run/react';
-import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
-import { useMapper } from '~/components/utils';
-import MultiStep, { useMultiStep } from '~/console/components/multi-step';
-import { LoadingPlaceHolder } from '~/console/components/loading';
-import ListV2 from '~/console/components/listV2';
-import { ListItem } from '~/console/components/console-list-components';
-import { CopyContentToClipboard } from '~/console/components/common-console-components';
-import { useCallback, useEffect, useState } from 'react';
-import { toast } from '~/components/molecule/toast';
 import { ensureAccountClientSide } from '~/console/server/utils/auth-utils';
-import { NameIdView } from '~/console/components/name-id-view';
-import { IImportedManagedResources } from '~/console/server/gql/queries/imported-managed-resource-queries';
+import { useReload } from '~/root/lib/client/helpers/reloader';
+import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
+import Yup from '~/root/lib/server/helpers/yup';
+import { handleError } from '~/root/lib/utils/common';
 import { IEnvironmentContext } from '../_layout';
 
 type BaseType = ExtractNodeType<IImportedManagedResources>;
@@ -90,11 +90,9 @@ const Root = (props: IDialog) => {
           managedResourceName: '',
         },
     validationSchema: Yup.object({
-      managedServiceName: Yup.string().required(
-        'integrated service is required'
-      ),
+      managedServiceName: Yup.string().required('Managed service is required'),
       managedResourceName: Yup.string().required(
-        'integrated resource name is required'
+        'Managed resource name is required'
       ),
     }),
     onSubmit: async (val) => {
@@ -113,9 +111,7 @@ const Root = (props: IDialog) => {
         reloadPage();
         resetValues();
         toast.success(
-          `integrated resource ${
-            isUpdate ? 'updated' : 'imported'
-          } successfully`
+          `Managed resource ${isUpdate ? 'updated' : 'imported'} successfully`
         );
         setVisible(false);
       } catch (err) {
@@ -171,7 +167,7 @@ const Root = (props: IDialog) => {
       <Popup.Content>
         <div className="flex flex-col gap-2xl">
           <NameIdView
-            placeholder="Enter integrated service name"
+            placeholder="Enter managed resource name"
             label="Name"
             resType="imported_managed_resource"
             name={values.name || ''}
@@ -182,11 +178,11 @@ const Root = (props: IDialog) => {
           />
 
           <Select
-            label="Integrated Services"
+            label="Managed Services"
             size="lg"
             value={values.managedServiceName}
             // disabled={msvcIsLoading}
-            placeholder="Select a Integrated Service"
+            placeholder="Select a Managed Service"
             options={async () => [
               ...((msvcList &&
                 msvcList.filter((msvc) => {
@@ -203,11 +199,11 @@ const Root = (props: IDialog) => {
           />
 
           <Select
-            label="Integrated Resource"
+            label="Managed Resource"
             size="lg"
             value={values.managedResourceName}
             disabled={mresIsLoading}
-            placeholder="Select a Integrated Resource"
+            placeholder="Select a Managed Resource"
             options={async () => [
               ...((mresList &&
                 mresList.filter((mres) => {
@@ -243,7 +239,7 @@ const HandleManagedResourceV2 = (props: IDialog) => {
   return (
     <Popup.Root show={visible} onOpenChange={(v) => setVisible(v)}>
       <Popup.Header>
-        {isUpdate ? 'Edit External Name' : 'Import Integrated Resource'}
+        {isUpdate ? 'Edit External Name' : 'Import Managed Resource'}
       </Popup.Header>
       {(!isUpdate || (isUpdate && props.data)) && <Root {...props} />}
     </Popup.Root>

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
@@ -16,7 +16,8 @@ import { LockSimple, Trash } from '~/console/components/icons';
 import ListGridView from '~/console/components/list-grid-view';
 import ListV2 from '~/console/components/listV2';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
-import useClusterStatus from '~/console/hooks/use-cluster-status';
+import { findClusterStatus } from '~/console/hooks/use-cluster-status';
+import { useClusterStatusV2 } from '~/console/hooks/use-cluster-status-v2';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { IImportedManagedResources } from '~/console/server/gql/queries/imported-managed-resource-queries';
 import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-queries';
@@ -33,7 +34,7 @@ import { handleError } from '~/lib/utils/common';
 import { IEnvironmentContext } from '../_layout';
 import { ViewSecret } from './handle-managed-resource-v2';
 
-const RESOURCE_NAME = 'integrated resource';
+const RESOURCE_NAME = 'managed resource';
 type BaseType = ExtractNodeType<IImportedManagedResources>;
 
 const parseItem = (item: BaseType, templates: IMSvTemplates) => {
@@ -69,13 +70,6 @@ const ExtraButton = ({ onAction, item }: IExtraButton) => {
   return (
     <ResourceExtraAction
       options={[
-        // {
-        //   label: 'Edit',
-        //   icon: <PencilSimple size={16} />,
-        //   type: 'item',
-        //   onClick: () => onAction({ action: 'edit', item }),
-        //   key: 'edit',
-        // },
         {
           label: 'View Secret',
           icon: <LockSimple size={16} />,
@@ -141,15 +135,15 @@ const GridView = ({ items = [], onAction, templates }: IResource) => {
 
 const ListView = ({ items = [], onAction, templates }: IResource) => {
   const { cluster } = useOutletContext<IEnvironmentContext>();
-  const { findClusterStatus, clusters, loading } = useClusterStatus();
+  const { clusters } = useClusterStatusV2();
 
   const [clusterOnlineStatus, setClusterOnlineStatus] = useState<
     Record<string, boolean>
   >({});
   useEffect(() => {
     const states: Record<string, boolean> = {};
-    clusters.forEach((c) => {
-      states[c.metadata.name] = findClusterStatus(c);
+    Object.entries(clusters).forEach(([key, value]) => {
+      states[key] = findClusterStatus(value);
     });
     setClusterOnlineStatus(states);
   }, [clusters]);
@@ -236,10 +230,6 @@ const ListView = ({ items = [], onAction, templates }: IResource) => {
               },
               status: {
                 render: () => {
-                  if (loading) {
-                    return null;
-                  }
-
                   if (!isClusterOnline) {
                     return <Badge type="warning">Cluster Offline</Badge>;
                   }