Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Archive managed services when cluster is deleted #236

Merged
merged 1 commit into from
Jul 1, 2024
Merged

Archive managed services when cluster is deleted #236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions gql-queries-generator/doc/queries.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3135,6 +3135,7 @@ query consoleGetClusterMSv($name: String!) {
clusterName
creationTime
displayName
isArchived
id
kind
lastUpdatedBy {
Expand Down Expand Up @@ -3206,6 +3207,7 @@ query consoleListClusterMSvs($pagination: CursorPaginationIn, $search: SearchClu
accountName
apiVersion
clusterName
isArchived
createdBy {
userEmail
userId
Expand Down
36 changes: 12 additions & 24 deletions src/apps/console/routes/_main+/$account+/env+/$environment+/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import {
// BackingServices,
BackingServices,
CirclesFour,
GearSix,
// Plus,
// Search,
File,
TreeStructure,
// Check,
// ChevronUpDown,
} from '~/console/components/icons';
import {
Link,
Expand All @@ -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';
Expand Down Expand Up @@ -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',
Expand Down
120 changes: 65 additions & 55 deletions ...utes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand All @@ -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>;
Expand Down Expand Up @@ -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) => {
Expand All @@ -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) {
Expand Down Expand Up @@ -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) => {
Expand All @@ -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) => {
Expand Down Expand Up @@ -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>
Expand All @@ -227,6 +230,8 @@ export const ViewSecret = ({
const api = useConsoleApi();
const { environment } = useOutletContext<IEnvironmentContext>();
const [onYesClick, setOnYesClick] = useState(false);
const params = useParams();
ensureAccountClientSide(params);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (complexity): Consider simplifying the code by consolidating imports and keeping logic inline where possible.

The new code introduces additional complexity due to several factors:

  1. Increased Number of Imports: The new code adds more imports (useParams, toast from a different path, and ensureAccountClientSide), increasing the cognitive load to understand where each import is coming from and why it is needed.

  2. Additional Functionality: The new code adds a call to ensureAccountClientSide(params) and a new function dataSecret(), which increases the complexity by adding more logic that needs to be understood and maintained.

  3. Redundant Code: The dataSecret() function duplicates the logic that was previously inline within the MultiStep.Step component, making the code longer and splitting the logic into multiple places, which makes it harder to follow.

  4. Error Handling: The new code adds more error handling and loading states within the dataSecret() function, which were previously handled inline. This separation can make it harder to trace the flow of data and understand how errors are managed.

  5. Inconsistent Naming: The new code changes the terminology from "Managed Resource" to "Integrated Resource" and "Managed Service" to "Integrated Service". While this might be a necessary change, it adds to the complexity if not properly documented or communicated.

Consider simplifying the code by consolidating imports, keeping logic inline where possible, and maintaining consistent naming conventions. This will help reduce the overall complexity and make the code easier to maintain.

const { data, isLoading, error } = useCustomSwr(
() =>
onYesClick
Expand All @@ -246,6 +251,55 @@ export const ViewSecret = ({
}
);

const dataSecret = () => {
if (isLoading) {
return <LoadingPlaceHolder />;
}
if (error) {
return <p>Error: {error}</p>;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Improve error handling.

Consider providing more user-friendly error messages or handling different types of errors separately.

Suggested change
return <p>Error: {error}</p>;
if (error) {
let errorMessage = 'An unexpected error occurred.';
if (error.message) {
errorMessage = error.message;
} else if (typeof error === 'string') {
errorMessage = error;
}
return <p>Error: {errorMessage}</p>;
}

}
if (!data?.data) {
return <p>No secret found</p>;
}
Comment on lines +254 to +263
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (performance): Consider memoizing dataSecret function.

To avoid unnecessary re-renders, consider memoizing the dataSecret function using useCallback.


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);
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ...s/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ const ListView = ({ items = [], onAction, templates }: IResource) => {
className: 'flex-1',
},
{
render: () => 'Managed Service',
render: () => 'Integrated Service',
name: 'service',
className: 'w-[200px]',
},
Expand Down
15 changes: 9 additions & 6 deletions src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down
23 changes: 7 additions & 16 deletions src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />,
Expand Down Expand Up @@ -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
Expand All @@ -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}` }),
};
}),
Expand Down
Loading
Loading