fix(console): Add advanced options as reponame and image tag for crea…

…te app and update app
kloudlite · Feb 26, 2024 · 1300b45 · 1300b45
1 parent c54d4cd
commit 1300b45
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 71 deletions.
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
@@ -65,7 +65,8 @@ const SettingCompute = () => {
 
       repoName: app.metadata?.annotations?.[keyconstants.repoName] || '',
       repoImageTag: app.metadata?.annotations?.[keyconstants.imageTag] || '',
-      repoImageUrl: '',
+      repoImageUrl: app.metadata?.annotations?.[keyconstants.repoImageUrl] || '',
+      image: app.metadata?.annotations?.[keyconstants.image] || '',
 
       cpu: parseValue(
         app.spec.containers[activeContIndex]?.resourceCpu?.max,
@@ -110,14 +111,17 @@ const SettingCompute = () => {
             [keyconstants.selectedPlan]: val.selectedPlan,
             [keyconstants.repoName]: val.repoName,
             [keyconstants.imageTag]: val.repoImageTag,
+            [keyconstants.image]: val.image,
+            [keyconstants.repoImageUrl]: val.repoImageUrl,
           },
         },
         spec: {
           ...s.spec,
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
-              image: val.imageUrl,
+              // image: val.imageUrl,
+              image: val.repoImageUrl == '' ? val.imageUrl : val.repoImageUrl,
               name: 'container-0',
               resourceCpu:
                 val.selectionMode === 'quick'
@@ -207,16 +211,18 @@ const SettingCompute = () => {
         }}
       >
         <div className="flex flex-col gap-3xl">
-          <TextInput
-            label={
-              <InfoLabel info="some usefull information" label="Image Url" />
-            }
-            size="lg"
-            value={values.imageUrl}
-            onChange={handleChange('imageUrl')}
-            error={!!errors.imageUrl}
-            message={errors.imageUrl}
-          />
+          {!values.repoImageUrl && (
+              <TextInput
+                  label={
+                    <InfoLabel info="some usefull information" label="Image Url" />
+                  }
+                  size="lg"
+                  value={values.imageUrl}
+                  onChange={handleChange('imageUrl')}
+                  error={!!errors.imageUrl}
+                  message={errors.imageUrl}
+              />
+          )}
           {/* <PasswordInput
             label={
               <InfoLabel info="some usefull information" label="Pull Secret" />
@@ -228,62 +234,66 @@ const SettingCompute = () => {
             // onChange={handleChange('pullSecret')}
           /> */}
 
-          <div>OR</div>
+          {values.repoImageUrl && (
+              <Select
+                  label="Repository Name"
+                  size="lg"
+                  placeholder="Select Repo"
+                  value={{ label: '', value: values.repoName }}
+                  searchable
+                  onChange={(val) => {
+                    handleChange('repoName')(dummyEvent(val.value));
+                    handleChange('image')(dummyEvent(''));
+                    setAccountName(val.accName);
+                  }}
+                  options={async () => [...repos]}
+                  error={!!errors.repos || !!repoLoadingError}
+                  message={
+                    repoLoadingError ? 'Error fetching repositories.' : errors.app
+                  }
+                  loading={repoLoading}
+              />
+          )}
 
-          <Select
-            label="Repository Name"
-            size="lg"
-            placeholder="Select Repo"
-            value={{ label: '', value: values.repoName }}
-            searchable
-            onChange={(val) => {
-              handleChange('repoName')(dummyEvent(val.value));
-              setAccountName(val.accName);
-            }}
-            options={async () => [...repos]}
-            error={!!errors.repos || !!repoLoadingError}
-            message={
-              repoLoadingError ? 'Error fetching repositories.' : errors.app
-            }
-            loading={repoLoading}
-          />
+          {values.repoImageUrl && (
+              <Select
+                  label="Image Tag"
+                  size="lg"
+                  placeholder="Select Image Tag"
+                  value={{ label: '', value: values.repoImageTag }}
+                  searchable
+                  onChange={(val) => {
+                    handleChange('repoImageTag')(dummyEvent(val.value));
+                    handleChange('repoImageUrl')(
+                        dummyEvent(
+                            `registry.kloudlite.io/${accountName}/${values.repoName}:${val.value}`
+                        )
+                    );
+                  }}
+                  options={async () =>
+                      [
+                        ...new Set(
+                            parseNodes(digestData)
+                                .map((item) => item.tags)
+                                .flat()
+                        ),
+                      ].map((item) => ({
+                        label: item,
+                        value: item,
+                      }))
+                  }
+                  error={!!errors.repoImageTag || !!digestError}
+                  message={
+                    errors.repoImageTag
+                        ? errors.repoImageTag
+                        : digestError
+                            ? 'Failed to load Image tags.'
+                            : ''
+                  }
+                  loading={digestLoading}
+              />
+          )}
 
-          <Select
-            label="Image Tag"
-            size="lg"
-            placeholder="Select Image Tag"
-            value={{ label: '', value: values.repoImageTag }}
-            searchable
-            onChange={(val) => {
-              handleChange('repoImageTag')(dummyEvent(val.value));
-              handleChange('repoImageUrl')(
-                dummyEvent(
-                  `registry.kloudlite.io/${accountName}/${values.repoName}:${val.value}`
-                )
-              );
-            }}
-            options={async () =>
-              [
-                ...new Set(
-                  parseNodes(digestData)
-                    .map((item) => item.tags)
-                    .flat()
-                ),
-              ].map((item) => ({
-                label: item,
-                value: item,
-              }))
-            }
-            error={!!errors.repoImageTag || !!digestError}
-            message={
-              errors.repoImageTag
-                ? errors.repoImageTag
-                : digestError
-                ? 'Failed to load Image tags.'
-                : ''
-            }
-            loading={digestLoading}
-          />
         </div>
         {/* <div className="flex flex-col border border-border-default bg-surface-basic-default rounded overflow-hidden">
         <div className="p-2xl gap-2xl flex flex-row items-center border-b border-border-disabled bg-surface-basic-subdued">

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
@@ -68,7 +68,8 @@ const AppCompute = () => {
 
       repoName: app.metadata?.annotations?.[keyconstants.repoName] || '',
       repoImageTag: app.metadata?.annotations?.[keyconstants.imageTag] || '',
-      repoImageUrl: '',
+      repoImageUrl: app.metadata?.annotations?.[keyconstants.repoImageUrl] || '',
+      image: app.metadata?.annotations?.[keyconstants.image] || '',
 
       selectedPlan:
         app.metadata?.annotations[keyconstants.selectedPlan] || 'shared-1',
@@ -111,14 +112,16 @@ const AppCompute = () => {
             [keyconstants.selectedPlan]: val.selectedPlan,
             [keyconstants.repoName]: val.repoName,
             [keyconstants.imageTag]: val.repoImageTag,
+            [keyconstants.image]: val.image,
+            [keyconstants.repoImageUrl]: val.repoImageUrl,
           },
         },
         spec: {
           ...s.spec,
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
-              image: val.imageUrl === '' ? val.repoImageUrl : val.imageUrl,
+              image: val.image === '' ? val.repoImageUrl : val.imageUrl,
               name: 'container-0',
               resourceCpu:
                 val.selectionMode === 'quick'
@@ -191,11 +194,12 @@ const AppCompute = () => {
               <InfoLabel info="some usefull information" label="Image Url" />
             }
             size="lg"
-            value={values.imageUrl}
+            value={values.image}
             onChange={(e) => {
               handleChange('imageUrl')(
                 dummyEvent(e.target.value.toLowerCase())
               );
+              handleChange('image')(dummyEvent(e.target.value.toLowerCase()));
               handleChange('repoName')(dummyEvent(''));
               handleChange('repoImageTag')(dummyEvent(''));
             }}
@@ -208,7 +212,7 @@ const AppCompute = () => {
           onClick={() => {
             setShowImageUrl(!showImageUrl);
           }}
-          content={showImageUrl ? 'Advanced options' : 'Normal options'}
+          content={showImageUrl ? 'Advanced options' : 'Image option'}
           variant="primary-plain"
           size="sm"
         />
@@ -222,7 +226,7 @@ const AppCompute = () => {
             searchable
             onChange={(val) => {
               handleChange('repoName')(dummyEvent(val.value));
-              handleChange('imageUrl')(dummyEvent(''));
+              handleChange('image')(dummyEvent(''));
               setAccountName(val.accName);
             }}
             options={async () => [...repos]}

diff --git a/src/apps/console/server/r-utils/key-constants.js b/src/apps/console/server/r-utils/key-constants.js
@@ -10,4 +10,6 @@ export const keyconstants = {
   nodeType: 'kloudlite.io/ui-node-type',
   repoName: 'kloudlite.io/ui-repoName',
   imageTag: 'kloudlite.io/ui-imageTag',
+  image: 'kloudlite.io/ui-image',
+  repoImageUrl: 'kloudlite.io/ui-repoImageUrl',
 };