From 3af142a9777e93eab77e14b84b1efaed2945d952 Mon Sep 17 00:00:00 2001 From: Mohit Kumar <48203820+nxtcoder36@users.noreply.github.com> Date: Thu, 14 Mar 2024 15:02:05 +0530 Subject: [PATCH] KLO-231: Impl/app image pull (#144) * app image pull in progress * image pull policy check box added, modifications in app setting for compute and scaling --- .../console/page-components/app-states.tsx | 1 + .../app+/$app+/settings+/compute/route.tsx | 16 +++- .../app+/$app+/settings+/scaling/route.tsx | 73 ++++++++++--------- .../$environment+/new-app/app-compute.tsx | 29 +++++++- .../new-app/app-environment-variables.tsx | 17 ++--- .../$environment+/new-app/app-review.tsx | 1 - 6 files changed, 88 insertions(+), 49 deletions(-) diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx index fe6d5ccf9..8d84065e5 100644 --- a/src/apps/console/page-components/app-states.tsx +++ b/src/apps/console/page-components/app-states.tsx @@ -20,6 +20,7 @@ const defaultApp: AppIn = { { image: '', name: 'container-1', + env: [], }, ], }, 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 b83dee86b..916ad061e 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 @@ -15,6 +15,7 @@ import useCustomSwr from '~/lib/client/hooks/use-custom-swr'; import { useConsoleApi } from '~/console/server/gql/api-provider'; import { parseNodes } from '~/console/server/r-utils/common'; import { registryHost } from '~/lib/configs/base-url.cjs'; +import { Checkbox } from '~/components/atoms/checkbox'; import { plans } from '../../../../new-app/datas'; const valueRender = ({ @@ -63,6 +64,8 @@ const SettingCompute = () => { const { values, errors, handleChange, submit, resetValues } = useForm({ initialValues: { imageUrl: getContainer(0)?.image || '', + imagePullPolicy: + app.spec.containers[activeContIndex]?.imagePullPolicy || 'IfNotPresent', pullSecret: 'TODO', cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared', memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || 1, @@ -131,7 +134,7 @@ const SettingCompute = () => { ? `${values.repoName}:${values.repoImageTag}` : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`, name: 'container-0', - imagePullPolicy: 'Always', + imagePullPolicy: val.imagePullPolicy, resourceCpu: val.selectionMode === 'quick' ? { @@ -261,6 +264,15 @@ const SettingCompute = () => { } loading={digestLoading} /> + + { + const imagePullPolicy = val ? 'Always' : 'IfNotPresent'; + handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy)); + }} + />
@@ -309,7 +321,7 @@ const SettingCompute = () => { ); }} /> -
+
Select CPU 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 index 68fc20839..b7fd8e0cd 100644 --- 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 @@ -109,7 +109,7 @@ const SettingCompute = () => { /> {values.autoscaling ? (
-
+
Select min and max replicas @@ -125,7 +125,6 @@ const SettingCompute = () => { max={10} value={[values.minReplicas, values.maxReplicas]} onChange={(value) => { - console.log(value); if (Array.isArray(value)) { handleChange('minReplicas')(dummyEvent(value[0])); handleChange('maxReplicas')(dummyEvent(value[1])); @@ -133,47 +132,49 @@ const SettingCompute = () => { }} />
-
-
-
- Select CPU +
+
+
+
+ Select CPU +
+ + {values.cpuThreshold || 75}% CPU +
- - {values.cpuThreshold || 75}% CPU - + { + handleChange('cpuThreshold')(dummyEvent(value)); + }} + />
- { - handleChange('cpuThreshold')(dummyEvent(value)); - }} - /> -
-
-
-
- Select Memory +
+
+
+ Select Memory +
+ + {values.memoryThreshold || 75}% Memory +
- - {values.memoryThreshold || 75}% Memory - + { + handleChange('memoryThreshold')(dummyEvent(value)); + }} + />
- { - handleChange('memoryThreshold')(dummyEvent(value)); - }} - />
) : ( -
+
Select replicas 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 7b5617d05..ffc852e0c 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 @@ -15,6 +15,7 @@ import { registryHost } from '~/lib/configs/base-url.cjs'; import { BottomNavigation } from '~/console/components/commons'; import { useOutletContext } from '@remix-run/react'; import { useLog } from '~/root/lib/client/hooks/use-log'; +import { Checkbox } from '~/components/atoms/checkbox'; import { plans } from './datas'; import { IProjectContext } from '../../_layout'; @@ -81,9 +82,17 @@ const AppCompute = () => { const { values, errors, handleChange, isLoading, submit } = useForm({ initialValues: { imageUrl: app.spec.containers[activeContIndex]?.image || '', + imagePullPolicy: + app.spec.containers[activeContIndex]?.imagePullPolicy || 'IfNotPresent', pullSecret: 'TODO', cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared', memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || '1', + 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, cpu: parseValue( app.spec.containers[activeContIndex]?.resourceCpu?.max, @@ -159,7 +168,7 @@ const AppCompute = () => { ? `${values.repoName}:${values.repoImageTag}` : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`, name: 'container-0', - imagePullPolicy: 'Always', + imagePullPolicy: val.imagePullPolicy, resourceCpu: val.selectionMode === 'quick' ? { @@ -184,6 +193,14 @@ const AppCompute = () => { }, }, ], + hpa: { + enabled: val.autoscaling, + maxReplicas: val.maxReplicas, + minReplicas: val.minReplicas, + thresholdCpu: val.cpuThreshold, + thresholdMemory: val.memoryThreshold, + }, + replicas: val.replicas, }, })); }, @@ -301,6 +318,16 @@ const AppCompute = () => { } loading={digestLoading} /> + + { + const imagePullPolicy = val ? 'Always' : 'IfNotPresent'; + console.log(imagePullPolicy); + handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy)); + }} + />
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx index 82b15467d..24d2d1ad1 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx @@ -230,7 +230,7 @@ export const EnvironmentVariables = () => { submit, resetValues: resetAppValue, } = useForm({ - initialValues: getContainer().env || [], + initialValues: getContainer().env, validationSchema: Yup.array(entry), onSubmit: (val) => { setContainer((c) => ({ @@ -252,15 +252,16 @@ export const EnvironmentVariables = () => { }, [hasChanges]); const addEntry = (val: IEnvVariable) => { + const tempVal = val || []; setValues((v = []) => { const data = { - key: val.key, - type: val.type, - refName: val.refName || '', - refKey: val.refKey || '', - value: val.value || '', + key: tempVal.key, + type: tempVal.type, + refName: tempVal.refName || '', + refKey: tempVal.refKey || '', + value: tempVal.value || '', }; - return [...v, data]; + return [...(v || []), data]; }); }; @@ -312,8 +313,6 @@ export const EnvironmentVariables = () => { }), }), onSubmit: () => { - console.log(eValues); - if (eValues.textInputValue) { const ev: IEnvVariable = { key: eValues.key, 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 754f23e2b..7d4f8e277 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 @@ -51,7 +51,6 @@ const AppReview = () => { useEffect(() => { const res = validateType(app, 'AppIn'); - // console.log('res', res); setErrors(res); }, []);