From 464f88b12e725c3dbb9fbdb6f749eff13706a1c3 Mon Sep 17 00:00:00 2001 From: Abdhesh Nayak Date: Tue, 5 Mar 2024 16:30:30 +0530 Subject: [PATCH 01/15] :art: Improved structure --- .../console/page-components/app-states.tsx | 30 ++++----- .../$project+/new-managed-service/_index.tsx | 65 ++++++++++--------- 2 files changed, 48 insertions(+), 47 deletions(-) diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx index 221c2ec92..fe6d5ccf9 100644 --- a/src/apps/console/page-components/app-states.tsx +++ b/src/apps/console/page-components/app-states.tsx @@ -6,8 +6,9 @@ import { AppIn, Github__Com___Kloudlite___Operator___Apis___Crds___V1__AppContainerIn as AppSpecContainersIn, } from '~/root/src/generated/gql/server'; -import {useMapper} from "~/components/utils"; -import {parseNodes} from "~/console/server/r-utils/common"; +import { mapper } from '~/components/utils'; +import { parseNodes } from '~/console/server/r-utils/common'; +// import logger from '~/root/lib/client/helpers/log'; const defaultApp: AppIn = { metadata: { @@ -192,29 +193,28 @@ export const useAppState = () => { }; const getRepoMapper = (resources: IparseNodes | undefined) => { - return useMapper(parseNodes(resources), (val) => ({ + return mapper(parseNodes(resources), (val) => ({ label: val.name, value: val.name, - accName: val.accountName - })) - } + accName: val.accountName, + })); + }; const getRepoName = (imageUrl: string) => { const parts: string[] = imageUrl.split(':'); const repoParts: string[] = parts[0].split('/'); - if (repoParts.length == 1) { + if (repoParts.length === 1) { return repoParts[repoParts.length - 1]; - } else { - const repoSlicePart: string[] = repoParts.slice(2) - return repoSlicePart.join("/") } - } + const repoSlicePart: string[] = repoParts.slice(2); + return repoSlicePart.join('/'); + }; const getImageTag = (imageUrl: string) => { const parts: string[] = imageUrl.split(':'); - console.log("image tag", parts[1]) + // logger.log('image tag', parts[1]); return parts[1]; - } + }; return { resetState, @@ -236,7 +236,7 @@ export const useAppState = () => { setServices, getRepoMapper, getRepoName, - getImageTag + getImageTag, }; }; @@ -278,7 +278,7 @@ export const AppContextProvider = ({ useEffect(() => { if (typeof window === 'undefined' || initialAppState) return; - console.log(initialAppState, 'hrere'); + // logger.log(initialAppState, 'hrere'); sessionStorage.setItem('state', JSON.stringify(state || {})); }, [state]); diff --git a/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx index b7aa7d629..f453ecea9 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx @@ -14,7 +14,7 @@ import { import { Switch } from '~/components/atoms/switch'; import { NumberInput, TextInput } from '~/components/atoms/input'; import { handleError } from '~/root/lib/utils/common'; -import {titleCase, useMapper} from '~/components/utils'; +import { titleCase, useMapper } from '~/components/utils'; import { flatMapValidations, flatM } from '~/console/utils/commons'; import MultiStepProgress, { useMultiStepProgress, @@ -24,11 +24,11 @@ import { BottomNavigation, ReviewComponent, } from '~/console/components/commons'; +import { parseName, parseNodes } from '~/console/server/r-utils/common'; +import useCustomSwr from '~/lib/client/hooks/use-custom-swr'; +import { INodepools } from '~/console/server/gql/queries/nodepool-queries'; +import { keyconstants } from '~/console/server/r-utils/key-constants'; import { IProjectContext } from '../_layout'; -import {parseName, parseNodes} from "~/console/server/r-utils/common"; -import useCustomSwr from "~/lib/client/hooks/use-custom-swr"; -import {INodepools} from "~/console/server/gql/queries/nodepool-queries"; -import {keyconstants} from "~/console/server/r-utils/key-constants"; const valueRender = ({ label, icon }: { label: string; icon: string }) => { return ( @@ -254,7 +254,7 @@ const FieldView = ({ values: Record; errors: Record; selectedTemplate: ISelectedTemplate | null; - nodepools: {label: string, value: string}[] + nodepools: { label: string; value: string }[]; }) => { const nameRef = useRef(null); useEffect(() => { @@ -284,17 +284,17 @@ const FieldView = ({ /> { - handleChange('nodepoolName')(dummyEvent(val.value)); - }} - options={async () => [...nodepools]} - error={!!errors.repos || !!nodepoolLoadingError} - message={ - nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app - } - loading={nodepoolLoading} + label="Nodepool Name" + size="lg" + placeholder="Select Nodepool" + value={values.nodepoolName} + creatable + onChange={(val) => { + handleChange('nodepoolName')(dummyEvent(val.value)); + }} + options={async () => [...nodepools]} + error={!!errors.repos || !!nodepoolLoadingError} + message={ + nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app + } + loading={nodepoolLoading} /> provisionTypes} - onChange={(_, value) => { - handleChange('poolType')(dummyEvent(value)); - }} - /> + <> + - mapper( - awsRegions.find((v) => v.Name === clusterRegion)?.Zones || - [], - (v) => ({ - value: v, - label: v, - }) - ) - } - onChange={(_, v) => { - handleChange('awsAvailabilityZone')(dummyEvent(v)); - }} - /> + { - const plan = findNodePlan(values.instanceType); - return plan?.value; - }, [values.instanceType])} - label="Node plan" - options={async () => nodePlans} - onChange={(value) => { - handleChange('instanceType')(dummyEvent(value.value)); - handleChange('nvidiaGpuEnabled')( - dummyEvent(!!value.gpuEnabled) - ); - }} - /> - +
+
+
+ providerSecrets} - /> -
+ {/*
*/} + {/* {' '} */} + {/* { displayName: props.data.displayName, name: parseName(props.data), provider: props.data.cloudProviderName as string, + isNameError: false, accessKey: '', secretKey: '', - isNameError: false, } : { displayName: '', name: '', - provider: providers[0].value, accessKey: '', secretKey: '', + provider: providers[0].value, isNameError: false, }, validationSchema: isUpdate ? Yup.object({ displayName: Yup.string().required(), name: Yup.string().required(), - }) - : Yup.object({ - displayName: Yup.string().required(), - name: Yup.string().required(), - provider: Yup.string().required(), accessKey: Yup.string().test( 'provider', 'access key is required', @@ -112,6 +107,11 @@ const Root = (props: IDialog) => { ); } ), + }) + : Yup.object({ + displayName: Yup.string().required(), + name: Yup.string().required(), + provider: Yup.string().required(), }), onSubmit: async (val) => { @@ -124,11 +124,10 @@ const Root = (props: IDialog) => { metadata: { name: val.name, }, + cloudProviderName: validateCloudProvider(val.provider), aws: { - secretKey: val.secretKey, - accessKey: val.accessKey, + authMechanism: 'secret_keys', }, - cloudProviderName: validateCloudProvider(val.provider), }, }); @@ -151,7 +150,13 @@ const Root = (props: IDialog) => { metadata: { name: parseName(props.data, true), }, - aws: { ...props.data.aws }, + // aws: { + // authMechanism: 'secret_keys', + // authSecretKeys: { + // accessKey: val.accessKey, + // secretKey: val.secretKey, + // }, + // }, }, }); default: @@ -204,6 +209,7 @@ const Root = (props: IDialog) => { nameErrorLabel="isNameError" isUpdate={isUpdate} /> + {!isUpdate && (