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
kloudlite · Mar 14, 2024 · 3af142a · 3af142a
1 parent 0ea18b1
commit 3af142a
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 49 deletions.
diff --git 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/...le/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/...le/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}
           />
+
+          <Checkbox
+            label="Image Pull Policy"
+            checked={values.imagePullPolicy === 'Always'}
+            onChange={(val) => {
+              const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
+              handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy));
+            }}
+          />
         </div>
         <div className="flex flex-col">
           <div className="flex flex-row gap-lg items-center pb-3xl">
@@ -309,7 +321,7 @@ const SettingCompute = () => {
                   );
                 }}
               />
-              <div className="flex flex-col gap-md p-2xl rounded border border-border-default">
+              <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
                 <div className="flex flex-row gap-lg items-center">
                   <div className="bodyMd-medium text-text-default">
                     Select CPU

diff --git a/...le/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx b/...le/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx
@@ -109,7 +109,7 @@ const SettingCompute = () => {
           />
           {values.autoscaling ? (
             <div className="flex flex-col gap-3xl">
-              <div className="flex flex-col gap-md p-2xl rounded border border-border-default">
+              <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
                 <div className="flex flex-row gap-lg items-center">
                   <div className="bodyMd-medium text-text-default">
                     Select min and max replicas
@@ -125,55 +125,56 @@ 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]));
                     }
                   }}
                 />
               </div>
-              <div className="flex flex-col gap-md p-2xl rounded border border-border-default">
-                <div className="flex flex-row gap-lg items-center">
-                  <div className="bodyMd-medium text-text-default">
-                    Select CPU
+              <div className="flex flex-row justify-between gap-3xl">
+                <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default w-full">
+                  <div className="flex flex-row gap-lg items-center">
+                    <div className="bodyMd-medium text-text-default">
+                      Select CPU
+                    </div>
+                    <code className="bodyMd text-text-soft flex-1 text-end">
+                      {values.cpuThreshold || 75}% CPU
+                    </code>
                   </div>
-                  <code className="bodyMd text-text-soft flex-1 text-end">
-                    {values.cpuThreshold || 75}% CPU
-                  </code>
+                  <Slider
+                    step={1}
+                    min={50}
+                    max={95}
+                    value={values.cpuThreshold}
+                    onChange={(value) => {
+                      handleChange('cpuThreshold')(dummyEvent(value));
+                    }}
+                  />
                 </div>
-                <Slider
-                  step={1}
-                  min={50}
-                  max={95}
-                  value={values.cpuThreshold}
-                  onChange={(value) => {
-                    handleChange('cpuThreshold')(dummyEvent(value));
-                  }}
-                />
-              </div>
-              <div className="flex flex-col gap-md p-2xl rounded border border-border-default">
-                <div className="flex flex-row gap-lg items-center">
-                  <div className="bodyMd-medium text-text-default">
-                    Select Memory
+                <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default w-full">
+                  <div className="flex flex-row gap-lg items-center">
+                    <div className="bodyMd-medium text-text-default">
+                      Select Memory
+                    </div>
+                    <code className="bodyMd text-text-soft flex-1 text-end">
+                      {values.memoryThreshold || 75}% Memory
+                    </code>
                   </div>
-                  <code className="bodyMd text-text-soft flex-1 text-end">
-                    {values.memoryThreshold || 75}% Memory
-                  </code>
+                  <Slider
+                    step={1}
+                    min={50}
+                    max={95}
+                    value={values.memoryThreshold}
+                    onChange={(value) => {
+                      handleChange('memoryThreshold')(dummyEvent(value));
+                    }}
+                  />
                 </div>
-                <Slider
-                  step={1}
-                  min={50}
-                  max={95}
-                  value={values.memoryThreshold}
-                  onChange={(value) => {
-                    handleChange('memoryThreshold')(dummyEvent(value));
-                  }}
-                />
               </div>
             </div>
           ) : (
-            <div className="flex flex-col gap-md p-2xl rounded border border-border-default">
+            <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
               <div className="flex flex-row gap-lg items-center">
                 <div className="bodyMd-medium text-text-default">
                   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
@@ -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}
         />
+
+        <Checkbox
+          label="Image Pull Policy"
+          checked={values.imagePullPolicy === 'Always'}
+          onChange={(val) => {
+            const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
+            console.log(imagePullPolicy);
+            handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy));
+          }}
+        />
       </div>
 
       <div className="flex flex-col">

diff --git a/...ole/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx b/...ole/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
@@ -51,7 +51,6 @@ const AppReview = () => {
 
   useEffect(() => {
     const res = validateType(app, 'AppIn');
-    // console.log('res', res);
     setErrors(res);
   }, []);
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ const defaultApp: AppIn = { @@
           {
             image: '',
             name: 'container-1',
+            env: [],
           },
         ],
       },
@@ Expand Down @@