From 666e0ad0112a84cbace7a9513688b90ff042d243 Mon Sep 17 00:00:00 2001 From: nxtcoder36 Date: Wed, 6 Mar 2024 12:16:44 +0530 Subject: [PATCH] auto-scaling added in app settings --- .../app+/$app+/settings+/_layout.tsx | 1 + .../app+/$app+/settings+/compute/route.tsx | 160 ++------------ .../app+/$app+/settings+/scaling/route.tsx | 201 ++++++++++++++++++ .../$environment+/new-app/app-compute.tsx | 84 ++++---- .../$environment+/new-app/app-review.tsx | 13 +- .../$environment+/routers/handle-router.tsx | 4 +- .../routers/router-resources.tsx | 22 +- src/generated/gql/sdl.graphql | 12 ++ 8 files changed, 297 insertions(+), 200 deletions(-) create mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx index 189b367a8..8c8e4c77d 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx @@ -24,6 +24,7 @@ import { IAppContext } from '../_layout'; const navItems = [ { label: 'General', value: 'general' }, { label: 'Compute', value: 'compute' }, + { label: 'Scaling', value: 'scaling' }, { label: 'Environment', value: 'environment' }, { label: 'Network', value: 'network' }, { label: 'Advance', value: 'advance' }, diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx index 829c4964e..5aa6e4605 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx @@ -127,32 +127,32 @@ const SettingCompute = () => { ...(s.spec.containers?.[0] || {}), image: values.repoAccountName === undefined || - values.repoAccountName === '' + values.repoAccountName === '' ? `${values.repoName}:${values.repoImageTag}` : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`, name: 'container-0', resourceCpu: val.selectionMode === 'quick' ? { - max: `${val.cpu}m`, - min: `${val.cpu}m`, - } + max: `${val.cpu}m`, + min: `${val.cpu}m`, + } : { - max: `${val.manualCpuMax}m`, - min: `${val.manualCpuMin}m`, - }, + max: `${val.manualCpuMax}m`, + min: `${val.manualCpuMin}m`, + }, resourceMemory: val.selectionMode === 'quick' ? { - max: `${( - (values.cpu || 1) * parseValue(values.memPerCpu, 4) - ).toFixed(2)}Mi`, - min: `${val.cpu}Mi`, - } + max: `${( + (values.cpu || 1) * parseValue(values.memPerCpu, 4) + ).toFixed(2)}Mi`, + min: `${val.cpu}Mi`, + } : { - max: `${val.manualMemMax}Mi`, - min: `${val.manualMemMin}Mi`, - }, + max: `${val.manualMemMax}Mi`, + min: `${val.manualMemMin}Mi`, + }, }, ], }, @@ -160,12 +160,6 @@ const SettingCompute = () => { }, }); - // const getActivePlan = useCallback(() => { - // return plans[values.cpuMode as IcpuMode].find( - // (v) => v.memoryPerCpu === parseValue(values.selectedPlan, 4) - // ); - // }, [values.cpuMode, values.selectedPlan]); - const repos = getRepoMapper(data); const { @@ -261,110 +255,12 @@ const SettingCompute = () => { errors.repoImageTag ? errors.repoImageTag : digestError - ? 'Failed to load Image tags.' - : '' + ? 'Failed to load Image tags.' + : '' } loading={digestLoading} /> - {/*
-
-
- Select plan -
- - ), - }, - - { - value: 'dedicated', - label: ( - - ), - }, - ]} - value={values.cpuMode} - onChange={(v) => { - handleChange('cpuMode')(dummyEvent(v)); - }} - /> -
- -
-
- { - handleChange('selectedPlan')(dummyEvent(v)); - }} - > - {[...(plans[values.cpuMode as IcpuMode] || [])].map( - ({ name, memoryPerCpu, description }) => { - return ( - -
-
- {name} -
-
- {description} -
-
- - ); - } - )} - -
- {getActivePlan() ? ( -
-
-
- {getActivePlan()?.name} -
-
{values.cpuMode}
-
-
-
- Compute -
-
{1}vCPU
-
-
-
- Memory -
-
- {getActivePlan()?.memoryPerCpu}GB -
-
-
- ) : ( -
-
-
- Please Select any plan -
-
-
- )} -
-
*/}
@@ -496,28 +392,6 @@ const SettingCompute = () => {
)}
- {/*
-
-
Select CPU
- - {((values.cpu || 1) / 1000).toFixed(2)}vCPU &{' '} - {( - ((values.cpu || 1) * parseValue(values.selectedPlan, 4)) / - 1000 - ).toFixed(2)} - GB Memory - -
- { - handleChange('cpu')(dummyEvent(value)); - }} - /> -
*/}
); diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx new file mode 100644 index 000000000..68fc20839 --- /dev/null +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx @@ -0,0 +1,201 @@ +import { useEffect } from 'react'; +import Slider from '~/components/atoms/slider'; +import { useAppState } from '~/console/page-components/app-states'; +import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form'; +import Yup from '~/root/lib/server/helpers/yup'; +import Wrapper from '~/console/components/wrapper'; +import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes'; +import { Button } from '~/components/atoms/button'; +import { Checkbox } from '~/components/atoms/checkbox'; + +const SettingCompute = () => { + const { app, setApp } = useAppState(); + const { setPerformAction, hasChanges, loading } = useUnsavedChanges(); + + const { values, handleChange, submit, resetValues } = useForm({ + initialValues: { + autoscaling: app.spec.hpa?.enabled || false, + minReplicas: app.spec.hpa?.minReplicas || 1, + maxReplicas: app.spec.hpa?.maxReplicas || 3, + cpuThreshold: app.spec.hpa?.thresholdCpu || 75, + memoryThreshold: app.spec.hpa?.thresholdMemory || 75, + replicas: app.spec.replicas || 1, + }, + + validationSchema: Yup.object({ + replicas: Yup.number() + .transform((value) => (Number.isNaN(value) ? undefined : value)) + .min(1) + .max(10) + .test({ + name: 'count', + message: 'replicas should be from 1 to 10', + test: (v) => { + // @ts-ignore + return !(v > 10 && v < 1); + }, + }) + .when(['autoscaling'], ([autoscaling], schema) => { + if (!autoscaling) { + return schema.required(); + } + return schema; + }), + }), + onSubmit: (val) => { + setApp((s) => ({ + ...s, + metadata: { + ...s.metadata!, + annotations: { + ...(s.metadata?.annotations || {}), + }, + }, + spec: { + ...s.spec, + hpa: { + enabled: val.autoscaling, + maxReplicas: val.maxReplicas, + minReplicas: val.minReplicas, + thresholdCpu: val.cpuThreshold, + thresholdMemory: val.memoryThreshold, + }, + replicas: val.replicas, + }, + })); + }, + }); + + useEffect(() => { + submit(); + }, [values]); + + useEffect(() => { + if (!hasChanges) { + resetValues(); + } + }, [hasChanges]); + + return ( +
+ +
+ ), + }} + > +
+ { + handleChange('autoscaling')(dummyEvent(val)); + }} + /> + {values.autoscaling ? ( +
+
+
+
+ Select min and max replicas +
+ + {values.minReplicas || 75} min - {values.maxReplicas || 75}{' '} + max + +
+ { + console.log(value); + if (Array.isArray(value)) { + handleChange('minReplicas')(dummyEvent(value[0])); + handleChange('maxReplicas')(dummyEvent(value[1])); + } + }} + /> +
+
+
+
+ Select CPU +
+ + {values.cpuThreshold || 75}% CPU + +
+ { + handleChange('cpuThreshold')(dummyEvent(value)); + }} + /> +
+
+
+
+ Select Memory +
+ + {values.memoryThreshold || 75}% Memory + +
+ { + handleChange('memoryThreshold')(dummyEvent(value)); + }} + /> +
+
+ ) : ( +
+
+
+ Select replicas +
+ + {values.replicas || 1} replicas + +
+ { + handleChange('replicas')(dummyEvent(value)); + }} + /> +
+ )} +
+ + + ); +}; +export default SettingCompute; diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx index e37144968..882630027 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx @@ -7,15 +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 {parseName, 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 { useOutletContext } from '@remix-run/react'; +import { IAppContext } from '~/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout'; 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, @@ -49,8 +49,7 @@ const AppCompute = () => { getImageTag, } = useAppState(); const api = useConsoleApi(); - const {cluster} = useOutletContext() - + const { cluster } = useOutletContext(); const { data, @@ -65,8 +64,8 @@ const AppCompute = () => { isLoading: nodepoolLoading, error: nodepoolLoadingError, } = useCustomSwr('/nodepools', async () => { - return api.listNodePools({clusterName: parseName(cluster)}) - }) + return api.listNodePools({ clusterName: parseName(cluster) }); + }); const { values, errors, handleChange, isLoading, submit } = useForm({ initialValues: { @@ -110,7 +109,7 @@ const AppCompute = () => { 0 ), - nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || '' + nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || '', }, validationSchema: Yup.object({ pullSecret: Yup.string(), @@ -137,7 +136,7 @@ const AppCompute = () => { ...s.spec, nodeSelector: { ...(s.spec.nodeSelector || {}), - [keyconstants.nodepoolName]: val.nodepoolName + [keyconstants.nodepoolName]: val.nodepoolName, }, containers: [ { @@ -145,32 +144,32 @@ const AppCompute = () => { // image: val.image === '' ? val.repoImageUrl : val.imageUrl, image: values.repoAccountName === undefined || - values.repoAccountName === '' + values.repoAccountName === '' ? `${values.repoName}:${values.repoImageTag}` : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`, name: 'container-0', resourceCpu: val.selectionMode === 'quick' ? { - max: `${val.cpu}m`, - min: `${val.cpu}m`, - } + max: `${val.cpu}m`, + min: `${val.cpu}m`, + } : { - max: `${val.manualCpuMax}m`, - min: `${val.manualCpuMin}m`, - }, + max: `${val.manualCpuMax}m`, + min: `${val.manualCpuMin}m`, + }, resourceMemory: val.selectionMode === 'quick' ? { - max: `${( - (values.cpu || 1) * parseValue(values.memPerCpu, 4) - ).toFixed(2)}Mi`, - min: `${val.cpu}Mi`, - } + max: `${( + (values.cpu || 1) * parseValue(values.memPerCpu, 4) + ).toFixed(2)}Mi`, + min: `${val.cpu}Mi`, + } : { - max: `${val.manualMemMax}Mi`, - min: `${val.manualMemMin}Mi`, - }, + max: `${val.manualMemMax}Mi`, + min: `${val.manualMemMin}Mi`, + }, }, ], }, @@ -187,7 +186,7 @@ const AppCompute = () => { const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({ label: val.metadata?.name || '', value: val.metadata?.name || '', - })) + })); const { data: digestData, @@ -200,8 +199,6 @@ const AppCompute = () => { } ); - console.log('vau', values); - return ( { @@ -221,22 +218,21 @@ const AppCompute = () => { manipulation and calculations in a system.
- { errors.repoImageTag ? errors.repoImageTag : digestError - ? 'Failed to load Image tags.' - : '' + ? 'Failed to load Image tags.' + : '' } loading={digestLoading} /> diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx index 29dda57ce..754f23e2b 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx @@ -13,7 +13,7 @@ import { BottomNavigation, ReviewComponent, } from '~/console/components/commons'; -import {keyconstants} from "~/console/server/r-utils/key-constants"; +import { keyconstants } from '~/console/server/r-utils/key-constants'; const AppReview = () => { const { app, setPage, resetState } = useAppState(); @@ -120,14 +120,17 @@ const AppReview = () => {
Nodepool Selector
-
{app.spec.nodeSelector[keyconstants.nodepoolName]}
+
+ {app.spec.nodeSelector[keyconstants.nodepoolName]} +
- { setPage(3); - }}> + }} + >
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx index 513158f37..39185e2c0 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx @@ -213,8 +213,8 @@ const Root = (props: IDialog) => { type="info" body={ - Note: All the domain CNames should be pointed to following Cluster - DNS Name{' '} + All the domain CNames should be pointed to following Cluster DNS + Name{' '} `{cluster.spec.publicDNSHost}` diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx index 40f9c4e5e..af5426f3f 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx @@ -204,12 +204,17 @@ const ListView = ({ items, onAction }: IResource) => { data={
diff --git a/src/generated/gql/sdl.graphql b/src/generated/gql/sdl.graphql index cec7f2ee1..2ca1c7145 100644 --- a/src/generated/gql/sdl.graphql +++ b/src/generated/gql/sdl.graphql @@ -2507,6 +2507,16 @@ input K8s__io___api___core___v1__ScaleIOPersistentVolumeSourceIn { volumeName: String } +type K8s__io___api___core___v1__Secret { + apiVersion: String + data: Map + immutable: Boolean + kind: String + metadata: Metadata + stringData: Map + type: K8s__io___api___core___v1__SecretType +} + type K8s__io___api___core___v1__SecretReference { name: String namespace: String @@ -2749,6 +2759,7 @@ type ManagedResource { recordVersion: Int! spec: Github__com___kloudlite___operator___apis___crds___v1__ManagedResourceSpec! status: Github__com___kloudlite___operator___pkg___operator__Status + syncedOutputSecretRef: K8s__io___api___core___v1__Secret syncStatus: Github__com___kloudlite___api___pkg___types__SyncStatus! updateTime: Date! } @@ -3538,6 +3549,7 @@ type Secret { environmentName: String! id: String! immutable: Boolean + isReadyOnly: Boolean! kind: String lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy! markedForDeletion: Boolean