Merge pull request #236 from kloudlite/impl/archive-msvc

Archive managed services when cluster is deleted
kloudlite · Jul 1, 2024 · fdc8e10 · fdc8e10
2 parents d07f9fa + 5d0dd10
commit fdc8e10
Show file tree

Hide file tree

Showing 19 changed files with 282 additions and 218 deletions.
diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
@@ -3135,6 +3135,7 @@ query consoleGetClusterMSv($name: String!) {
     clusterName
     creationTime
     displayName
+    isArchived
     id
     kind
     lastUpdatedBy {
@@ -3206,6 +3207,7 @@ query consoleListClusterMSvs($pagination: CursorPaginationIn, $search: SearchClu
         accountName
         apiVersion
         clusterName
+        isArchived
         createdBy {
           userEmail
           userId

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,13 +1,9 @@
 import {
-  // BackingServices,
+  BackingServices,
   CirclesFour,
   GearSix,
-  // Plus,
-  // Search,
   File,
   TreeStructure,
-  // Check,
-  // ChevronUpDown,
 } from '~/console/components/icons';
 import {
   Link,
@@ -17,23 +13,15 @@ import {
   useParams,
 } from '@remix-run/react';
 import { useState } from 'react';
-// import OptionList from '~/components/atoms/option-list';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import HandleScope from '~/console/page-components/handle-environment';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseName } from '~/console/server/r-utils/common';
-import {
-  // ensureAccountClientSide,
-  ensureAccountSet,
-} from '~/console/server/utils/auth-utils';
+import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { SubNavDataProvider } from '~/lib/client/hooks/use-create-subnav-action';
-// import useDebounce from '~/lib/client/hooks/use-debounce';
 import { IRemixCtx, LoaderResult } from '~/lib/types/common';
-// import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { BreadcrumSlash, tabIconSize } from '~/console/utils/commons';
 import { IEnvironment } from '~/console/server/gql/queries/environment-queries';
-// import { cn } from '~/components/utils';
-// import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { ILoginUrls, ILogins } from '~/console/server/gql/queries/git-queries';
 import logger from '~/root/lib/client/helpers/log';
 import Breadcrum from '~/console/components/breadcrum';
@@ -103,16 +91,16 @@ const tabs = [
     to: '/cs/configs',
     value: '/cs',
   },
-  // {
-  //   label: (
-  //     <span className="flex flex-row items-center gap-lg">
-  //       <BackingServices size={tabIconSize} />
-  //       Managed resources
-  //     </span>
-  //   ),
-  //   to: '/managed-resources',
-  //   value: '/managed-resources',
-  // },
+  {
+    label: (
+      <span className="flex flex-row items-center gap-lg">
+        <BackingServices size={tabIconSize} />
+        Integrated resources
+      </span>
+    ),
+    to: '/managed-resources',
+    value: '/managed-resources',
+  },
   // {
   //   label: 'Jobs & Crons',
   //   to: '/jc/task',

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,5 +1,4 @@
 /* eslint-disable react/destructuring-assignment */
-import { toast } from 'react-toastify';
 import Popup from '~/components/molecule/popup';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
@@ -13,7 +12,7 @@ import {
 } from '~/console/server/r-utils/common';
 import Select from '~/components/atoms/select';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { useOutletContext } from '@remix-run/react';
+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';
@@ -23,6 +22,8 @@ import { ListItem } from '~/console/components/console-list-components';
 import { CopyContentToClipboard } from '~/console/components/common-console-components';
 import { useEffect, useState } from 'react';
 import { IManagedResources } from '~/console/server/gql/queries/managed-resources-queries';
+import { toast } from '~/components/molecule/toast';
+import { ensureAccountClientSide } from '~/console/server/utils/auth-utils';
 import { IEnvironmentContext } from '../_layout';
 
 type BaseType = ExtractNodeType<IManagedResources>;
@@ -59,10 +60,10 @@ const Root = (props: IDialog) => {
           },
       validationSchema: Yup.object({
         managedServiceName: Yup.string().required(
-          'managed service is required'
+          'integrated service is required'
         ),
         managedResourceName: Yup.string().required(
-          'managed resource name is required'
+          'integrated resource name is required'
         ),
       }),
       onSubmit: async (val) => {
@@ -80,7 +81,9 @@ const Root = (props: IDialog) => {
           reloadPage();
           resetValues();
           toast.success(
-            `managed resource ${isUpdate ? 'updated' : 'imported'} successfully`
+            `integrated resource ${
+              isUpdate ? 'updated' : 'imported'
+            } successfully`
           );
           setVisible(false);
         } catch (err) {
@@ -145,11 +148,11 @@ const Root = (props: IDialog) => {
       <Popup.Content>
         <div className="flex flex-col gap-2xl">
           <Select
-            label="Select Managed Services"
+            label="Integrated Services"
             size="lg"
             value={values.managedServiceName}
             disabled={msvcIsLoading}
-            placeholder="Select a Managed Service"
+            placeholder="Select a Integrated Service"
             options={async () => [
               ...((msvcList &&
                 msvcList.filter((msvc) => {
@@ -166,11 +169,11 @@ const Root = (props: IDialog) => {
           />
 
           <Select
-            label="Select Managed Resource"
+            label="Integrated Resource"
             size="lg"
             value={values.managedResourceName}
             disabled={mresIsLoading}
-            placeholder="Select a Managed Resource"
+            placeholder="Select a Integrated Resource"
             options={async () => [
               ...((mresList &&
                 mresList.filter((mres) => {
@@ -206,7 +209,7 @@ const HandleManagedResourceV2 = (props: IDialog) => {
   return (
     <Popup.Root show={visible} onOpenChange={(v) => setVisible(v)}>
       <Popup.Header>
-        {isUpdate ? 'Edit External Name' : 'Import Managed Resource'}
+        {isUpdate ? 'Edit External Name' : 'Import Integrated Resource'}
       </Popup.Header>
       {(!isUpdate || (isUpdate && props.data)) && <Root {...props} />}
     </Popup.Root>
@@ -227,6 +230,8 @@ export const ViewSecret = ({
   const api = useConsoleApi();
   const { environment } = useOutletContext<IEnvironmentContext>();
   const [onYesClick, setOnYesClick] = useState(false);
+  const params = useParams();
+  ensureAccountClientSide(params);
   const { data, isLoading, error } = useCustomSwr(
     () =>
       onYesClick
@@ -246,6 +251,55 @@ export const ViewSecret = ({
     }
   );
 
+  const dataSecret = () => {
+    if (isLoading) {
+      return <LoadingPlaceHolder />;
+    }
+    if (error) {
+      return <p>Error: {error}</p>;
+    }
+    if (!data?.data) {
+      return <p>No secret found</p>;
+    }
+
+    return (
+      <ListV2.Root
+        data={{
+          headers: [
+            {
+              render: () => 'Key',
+              name: 'key',
+              className: 'min-w-[170px]',
+            },
+            {
+              render: () => 'Value',
+              name: 'value',
+              className: 'flex-1 min-w-[345px] max-w-[345px] w-[345px]',
+            },
+          ],
+          rows: Object.entries(data.data || {}).map(([key, value]) => {
+            const v = value as string;
+            return {
+              columns: {
+                key: {
+                  render: () => <ListItem data={key} />,
+                },
+                value: {
+                  render: () => (
+                    <CopyContentToClipboard
+                      content={atob(v)}
+                      toastMessage={`${key} copied`}
+                    />
+                  ),
+                },
+              },
+            };
+          }),
+        }}
+      />
+    );
+  };
+
   useEffect(() => {
     if (error) {
       toast.error(error);
@@ -268,51 +322,7 @@ export const ViewSecret = ({
               <p>{`Are you sure you want to view the secrets of '${item.syncedOutputSecretRef?.metadata?.name}'?`}</p>
             </div>
           </MultiStep.Step>
-          <MultiStep.Step step={1}>
-            {isLoading ? (
-              <LoadingPlaceHolder />
-            ) : (
-              data && (
-                <ListV2.Root
-                  data={{
-                    headers: [
-                      {
-                        render: () => 'Key',
-                        name: 'key',
-                        className: 'min-w-[170px]',
-                      },
-                      {
-                        render: () => 'Value',
-                        name: 'value',
-                        className:
-                          'flex-1 min-w-[345px] max-w-[345px] w-[345px]',
-                      },
-                    ],
-                    rows: Object.entries(data.stringData).map(
-                      ([key, value]) => {
-                        const v = value as string;
-                        return {
-                          columns: {
-                            key: {
-                              render: () => <ListItem data={key} />,
-                            },
-                            value: {
-                              render: () => (
-                                <CopyContentToClipboard
-                                  content={v}
-                                  toastMessage={`${key} copied`}
-                                />
-                              ),
-                            },
-                          },
-                        };
-                      }
-                    ),
-                  }}
-                />
-              )
-            )}
-          </MultiStep.Step>
+          <MultiStep.Step step={1}>{dataSecret()}</MultiStep.Step>
         </MultiStep.Root>
       </Popup.Content>
       <Popup.Footer>

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
@@ -163,7 +163,7 @@ const ListView = ({ items = [], onAction, templates }: IResource) => {
             className: 'flex-1',
           },
           {
-            render: () => 'Managed Service',
+            render: () => 'Integrated Service',
             name: 'service',
             className: 'w-[200px]',
           },

diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/route.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/route.tsx
@@ -12,13 +12,16 @@ import { useState } from 'react';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
 import { EmptyManagedResourceImage } from '~/console/components/empty-resource-images';
 import { getSearch } from '~/console/server/utils/common';
+import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import Tools from './tools';
 import ManagedResourceResourcesV2 from './managed-resources-resource-v2';
 import HandleManagedResourceV2 from './handle-managed-resource-v2';
 
 export const loader = (ctx: IRemixCtx) => {
   const { environment } = ctx.params;
   const promise = pWrapper(async () => {
+    ensureAccountSet(ctx);
+
     const { data: mData, errors: mErrors } = await GQLServerHandler(
       ctx.request
     ).listManagedResources({
@@ -60,11 +63,11 @@ const KlOperatorServices = () => {
           return (
             <Wrapper
               header={{
-                title: 'Managed resources',
+                title: 'Integrated resources',
                 action: managedResources.length > 0 && (
                   <Button
                     variant="primary"
-                    content="Import managed resource"
+                    content="Import Integrated resource"
                     prefix={<Plus />}
                     onClick={() => {
                       setVisible(true);
@@ -75,15 +78,15 @@ const KlOperatorServices = () => {
               empty={{
                 image: <EmptyManagedResourceImage />,
                 is: managedResources.length === 0,
-                title: 'This is where you’ll manage your Managed resources.',
+                title: 'This is where you’ll manage your Integrated resources.',
                 content: (
                   <p>
-                    You can import a new backing resource and manage the listed
-                    backing resource.
+                    You can import a new integrated resource and manage the
+                    listed integrated resource.
                   </p>
                 ),
                 action: {
-                  content: 'Import managed resource',
+                  content: 'Import integrated resource',
                   prefix: <Plus />,
                   onClick: () => {
                     setVisible(true);

diff --git a/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx
@@ -62,6 +62,13 @@ const ExtraButton = ({ item, onAction }: IExtraButton) => {
   return item.isArchived ? (
     <ResourceExtraAction
       options={[
+        {
+          label: 'Clone',
+          icon: <Copy size={16} />,
+          type: 'item',
+          key: 'clone',
+          onClick: () => onAction({ action: 'clone', item }),
+        },
         {
           label: 'Delete',
           icon: <Trash size={16} />,
@@ -206,21 +213,6 @@ const ListView = ({ items, onAction }: IResource) => {
                     <SyncStatusV2 item={i} />
                   ),
               },
-              // environment: {
-              //   render: () => (
-              //     <Badge
-              //       icon={
-              //         i.spec?.routing?.mode === 'private' ? (
-              //           <ShieldCheck />
-              //         ) : (
-              //           <Globe />
-              //         )
-              //       }
-              //     >
-              //       {i.spec?.routing?.mode}
-              //     </Badge>
-              //   ),
-              // },
               updated: {
                 render: () => (
                   <ListItem
@@ -233,7 +225,6 @@ const ListView = ({ items, onAction }: IResource) => {
                 render: () => <ExtraButton item={i} onAction={onAction} />,
               },
             },
-            // to: `/${account}/env/${id}`,
             ...(i.isArchived ? {} : { to: `/${account}/env/${id}` }),
           };
         }),