From c18af5fbf6a87dbb59a93d123b110081a9dd5428 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Mon, 4 Mar 2024 19:13:48 +0530 Subject: [PATCH 1/3] fix(web-console): add node selector for below resource: - app - project managed services --- .../$environment+/new-app/app-compute.tsx | 45 ++++++++++- .../$environment+/new-app/app-review.tsx | 16 +++- .../$project+/new-managed-service/_index.tsx | 79 ++++++++++++++++--- .../console/server/r-utils/key-constants.js | 3 +- 4 files changed, 126 insertions(+), 17 deletions(-) diff --git a/web/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/web/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx index d0f17c73a..3c1befe44 100644 --- a/web/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx +++ b/web/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx @@ -7,13 +7,15 @@ import Yup from '~/root/lib/server/helpers/yup'; import { FadeIn, parseValue } from '~/console/page-components/util'; import Select from '~/components/atoms/select'; import ExtendedFilledTab from '~/console/components/extended-filled-tab'; -import { parseNodes } from '~/console/server/r-utils/common'; +import {parseName, parseNodes} from '~/console/server/r-utils/common'; import useCustomSwr from '~/lib/client/hooks/use-custom-swr'; import { useConsoleApi } from '~/console/server/gql/api-provider'; import { useMapper } from '~/components/utils'; import { registryHost } from '~/lib/configs/base-url.cjs'; import { BottomNavigation } from '~/console/components/commons'; import { plans } from './datas'; +import {useOutletContext } from '@remix-run/react'; +import {IAppContext} from "~/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout"; const valueRender = ({ label, @@ -47,6 +49,9 @@ const AppCompute = () => { getImageTag, } = useAppState(); const api = useConsoleApi(); + const {cluster} = useOutletContext() + + console.log("cluster", parseName(cluster)) const { data, @@ -56,6 +61,15 @@ const AppCompute = () => { return api.listRepo({}); }); + const { + data: nodepoolData, + isLoading: nodepoolLoading, + error: nodepoolLoadingError, + } = useCustomSwr('/nodepools', async () => { + return api.listNodePools({clusterName: parseName(cluster)}) + }) + + console.log("np", nodepoolData) const { values, errors, handleChange, isLoading, submit } = useForm({ initialValues: { imageUrl: app.spec.containers[activeContIndex]?.image || '', @@ -97,6 +111,8 @@ const AppCompute = () => { app.spec.containers[activeContIndex].resourceMemory?.max, 0 ), + + nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || '' }, validationSchema: Yup.object({ pullSecret: Yup.string(), @@ -121,6 +137,10 @@ const AppCompute = () => { }, spec: { ...s.spec, + nodeSelector: { + ...(s.spec.nodeSelector || {}), + [keyconstants.nodepoolName]: val.nodepoolName + }, containers: [ { ...(s.spec.containers?.[0] || {}), @@ -166,6 +186,11 @@ const AppCompute = () => { accName: val.accountName, })); + const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({ + label: val.metadata?.name || '', + value: val.metadata?.name || '', + })) + const { data: digestData, isLoading: digestLoading, @@ -196,6 +221,24 @@ const AppCompute = () => { manipulation and calculations in a system.
+ + { const { app, setPage, resetState } = useAppState(); @@ -114,12 +115,19 @@ const AppReview = () => {
- {}}> +
+
+ Nodepool Selector +
+
{app.spec.nodeSelector[keyconstants.nodepoolName]}
+
+ + { setPage(3); - }} - > + }}>
diff --git a/web/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx b/web/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx index 776ec3e4c..b8fbb1380 100644 --- a/web/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx +++ b/web/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 } from '~/components/utils'; +import {titleCase, useMapper} from '~/components/utils'; import { flatMapValidations, flatM } from '~/console/utils/commons'; import MultiStepProgress, { useMultiStepProgress, @@ -25,6 +25,10 @@ import { ReviewComponent, } from '~/console/components/commons'; 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 ( @@ -239,6 +243,7 @@ const TemplateView = ({ const FieldView = ({ selectedTemplate, + nodepools, values, handleSubmit, handleChange, @@ -249,6 +254,7 @@ const FieldView = ({ values: Record; errors: Record; selectedTemplate: ISelectedTemplate | null; + nodepools: {label: string, value: string}[] }) => { const nameRef = useRef(null); useEffect(() => { @@ -276,6 +282,21 @@ const FieldView = ({ handleChange={handleChange} nameErrorLabel="isNameError" /> + +