From 6f0135a29c9db1c6e46993ea6950d5538d0c32b9 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 | 36 ++-- .../$environment+/routers/handle-router.tsx | 4 +- .../routers/router-resources.tsx | 22 +- 6 files changed, 254 insertions(+), 170 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 380cbe612..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 @@ -144,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`, + }, }, ], }, @@ -199,8 +199,6 @@ const AppCompute = () => { } ); - console.log('vau', values); - return ( { @@ -286,8 +284,8 @@ const AppCompute = () => { 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+/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 da9e27661..e0d39d0b8 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 @@ -205,12 +205,17 @@ const ListView = ({ items, onAction }: IResource) => { data={