fix(web-console): add below ui changes in create app:

- remove image url while creating - redirection of settings after click on settings on app listing - show repo and image tag selection in update app
kloudlite · Feb 27, 2024 · 5416168 · 5416168
1 parent 94cdbff
commit 5416168
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 126 deletions.
diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx
@@ -199,6 +199,19 @@ export const useAppState = () => {
     }))
   }
 
+  const getRepoName = (imageUrl: string) => {
+    const parts: string[] = imageUrl.split(':');
+    const repoParts: string[] = parts[0].split('/');
+    console.log("repo name", repoParts[repoParts.length - 1])
+    return repoParts[repoParts.length - 1];
+  }
+
+  const getImageTag = (imageUrl: string) => {
+    const parts: string[] = imageUrl.split(':');
+    console.log("image tag", parts[1])
+    return parts[1];
+  }
+
   return {
     resetState,
     completePages,
@@ -218,6 +231,8 @@ export const useAppState = () => {
     services: app.spec.services || [],
     setServices,
     getRepoMapper,
+    getRepoName,
+    getImageTag
   };
 };
 

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
@@ -40,14 +40,12 @@ const valueRender = ({
 };
 
 const SettingCompute = () => {
-  const { app, setApp, getContainer, activeContIndex, getRepoMapper } =
+  const { app, setApp, getContainer, activeContIndex, getRepoMapper , getRepoName, getImageTag} =
     useAppState();
   const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
 
   const api = useConsoleApi();
 
-  const [accountName, setAccountName] = useState('');
-
   const {
     data,
     isLoading: repoLoading,
@@ -63,10 +61,9 @@ const SettingCompute = () => {
       cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared',
       memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || 1,
 
-      repoName: app.metadata?.annotations?.[keyconstants.repoName] || '',
-      repoImageTag: app.metadata?.annotations?.[keyconstants.imageTag] || '',
-      repoImageUrl: app.metadata?.annotations?.[keyconstants.repoImageUrl] || '',
-      image: app.metadata?.annotations?.[keyconstants.image] || '',
+      repoName: getContainer(0)?.image ? getRepoName(app.spec.containers[activeContIndex]?.image) : '',
+      repoImageTag: getContainer(0)?.image ? getImageTag(app.spec.containers[activeContIndex]?.image) : '',
+      repoAccountName: app.metadata?.annotations?.[keyconstants.repoAccountName] || '',
 
       cpu: parseValue(
         app.spec.containers[activeContIndex]?.resourceCpu?.max,
@@ -109,19 +106,15 @@ const SettingCompute = () => {
             ...(s.metadata?.annotations || {}),
             [keyconstants.cpuMode]: val.cpuMode,
             [keyconstants.selectedPlan]: val.selectedPlan,
-            [keyconstants.repoName]: val.repoName,
-            [keyconstants.imageTag]: val.repoImageTag,
-            [keyconstants.image]: val.image,
-            [keyconstants.repoImageUrl]: val.repoImageUrl,
+            [keyconstants.repoAccountName]: val.repoAccountName,
           },
         },
         spec: {
           ...s.spec,
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
-              // image: val.imageUrl,
-              image: val.repoImageUrl == '' ? val.imageUrl : val.repoImageUrl,
+              image: values.repoAccountName == undefined || values.repoAccountName == ''  ? `${values.repoName}:${values.repoImageTag}` : `registry.kloudlite.io/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
               name: 'container-0',
               resourceCpu:
                 val.selectionMode === 'quick'
@@ -158,12 +151,6 @@ const SettingCompute = () => {
   //   );
   // }, [values.cpuMode, values.selectedPlan]);
 
-  // const repository = useMapper(parseNodes(data), (val) => ({
-  //   label: val.name,
-  //   value: val.name,
-  //   accName: val.accountName
-  // }));
-
   const repos = getRepoMapper(data);
 
   const {
@@ -211,40 +198,25 @@ const SettingCompute = () => {
         }}
       >
         <div className="flex flex-col gap-3xl">
-          {!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" />
-            }
-            size="lg"
-            value={values.pullSecret}
-            // error={!!errors.pullSecret}
-            // message={errors.pullSecret}
-            // onChange={handleChange('pullSecret')}
-          /> */}
 
-          {values.repoImageUrl && (
               <Select
                   label="Repository Name"
                   size="lg"
                   placeholder="Select Repo"
-                  value={{ label: '', value: values.repoName }}
-                  searchable
+                  value={
+                      values.repoName
+                          ? { label: values.repoName, value: values.repoName }
+                          :undefined
+                  }
+                  creatable={true}
                   onChange={(val) => {
                     handleChange('repoName')(dummyEvent(val.value));
-                    handleChange('image')(dummyEvent(''));
-                    setAccountName(val.accName);
+                      if (val.accName == undefined || val.accName == ''){
+                          handleChange('repoAccountName')(dummyEvent(''));
+                      }
+                      else {
+                          handleChange('repoAccountName')(dummyEvent(val.accName));
+                      }
                   }}
                   options={async () => [...repos]}
                   error={!!errors.repos || !!repoLoadingError}
@@ -253,22 +225,19 @@ const SettingCompute = () => {
                   }
                   loading={repoLoading}
               />
-          )}
 
-          {values.repoImageUrl && (
               <Select
                   label="Image Tag"
                   size="lg"
                   placeholder="Select Image Tag"
-                  value={{ label: '', value: values.repoImageTag }}
-                  searchable
+                  value={
+                      values.repoImageTag
+                          ? { label: values.repoImageTag, value: values.repoImageTag }
+                          :undefined
+                  }
+                  creatable={true}
                   onChange={(val) => {
                     handleChange('repoImageTag')(dummyEvent(val.value));
-                    handleChange('repoImageUrl')(
-                        dummyEvent(
-                            `registry.kloudlite.io/${accountName}/${values.repoName}:${val.value}`
-                        )
-                    );
                   }}
                   options={async () =>
                       [
@@ -292,7 +261,6 @@ const SettingCompute = () => {
                   }
                   loading={digestLoading}
               />
-          )}
 
         </div>
         {/* <div className="flex flex-col border border-border-default bg-surface-basic-default rounded overflow-hidden">

diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
@@ -22,7 +22,7 @@ import ResourceExtraAction, {
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { IApps } from '~/console/server/gql/queries/app-queries';
 import {
-  ExtractNodeType,
+  ExtractNodeType, parseName,
   parseName as pn,
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
@@ -62,13 +62,14 @@ type IExtraButton = {
 };
 
 const ExtraButton = ({ onAction, item }: IExtraButton) => {
+  const { account, project, environment } = useParams();
   const iconSize = 16;
   let options: IResourceExtraItem[] = [
     {
       label: 'Settings',
       icon: <GearSix size={iconSize} />,
       type: 'item',
-      to: `settings/general`,
+      to: `/${account}/${project}/${environment}/app/${parseName(item)}/settings/general`,
       key: 'settings',
     },
   ];

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
@@ -14,7 +14,7 @@ import { 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 { useState } from 'react';
+import {useEffect, useState } from 'react';
 import { plans } from './datas';
 
 const valueRender = ({
@@ -39,13 +39,10 @@ const valueRender = ({
 };
 
 const AppCompute = () => {
-  const { app, setApp, setPage, markPageAsCompleted, activeContIndex } =
+  const { app, setApp, setPage, markPageAsCompleted, activeContIndex , getRepoName, getImageTag} =
     useAppState();
   const api = useConsoleApi();
 
-  const [accountName, setAccountName] = useState('');
-  const [showImageUrl, setShowImageUrl] = useState(true);
-
   const {
     data,
     isLoading: repoLoading,
@@ -65,11 +62,10 @@ const AppCompute = () => {
         app.spec.containers[activeContIndex]?.resourceCpu?.max,
         250
       ),
-
-      repoName: app.metadata?.annotations?.[keyconstants.repoName] || '',
-      repoImageTag: app.metadata?.annotations?.[keyconstants.imageTag] || '',
-      repoImageUrl: app.metadata?.annotations?.[keyconstants.repoImageUrl] || '',
-      image: app.metadata?.annotations?.[keyconstants.image] || '',
+
+      repoName: app.spec.containers[activeContIndex]?.image ? getRepoName(app.spec.containers[activeContIndex]?.image) : '',
+      repoImageTag: app.spec.containers[activeContIndex]?.image ? getImageTag(app.spec.containers[activeContIndex]?.image) : '',
+      repoAccountName: app.metadata?.annotations?.[keyconstants.repoAccountName] || '',
 
       selectedPlan:
         app.metadata?.annotations[keyconstants.selectedPlan] || 'shared-1',
@@ -110,18 +106,16 @@ const AppCompute = () => {
             [keyconstants.memPerCpu]: val.memPerCpu,
             [keyconstants.selectionModeKey]: val.selectionMode,
             [keyconstants.selectedPlan]: val.selectedPlan,
-            [keyconstants.repoName]: val.repoName,
-            [keyconstants.imageTag]: val.repoImageTag,
-            [keyconstants.image]: val.image,
-            [keyconstants.repoImageUrl]: val.repoImageUrl,
+            [keyconstants.repoAccountName]: val.repoAccountName,
           },
         },
         spec: {
           ...s.spec,
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
-              image: val.image === '' ? val.repoImageUrl : val.imageUrl,
+              // image: val.image === '' ? val.repoImageUrl : val.imageUrl,
+              image: values.repoAccountName == undefined || values.repoAccountName == '' ? `${values.repoName}:${values.repoImageTag}` : `registry.kloudlite.io/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
               name: 'container-0',
               resourceCpu:
                 val.selectionMode === 'quick'
@@ -188,46 +182,27 @@ const AppCompute = () => {
         manipulation and calculations in a system.
       </div>
       <div className="flex flex-col gap-3xl">
-        {showImageUrl && (
-          <TextInput
-            label={
-              <InfoLabel info="some usefull information" label="Image Url" />
-            }
-            size="lg"
-            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(''));
-            }}
-            error={!!errors.imageUrl}
-            message={errors.imageUrl}
-          />
-        )}
-
-        <Button
-          onClick={() => {
-            setShowImageUrl(!showImageUrl);
-          }}
-          content={showImageUrl ? 'Advanced options' : 'Image option'}
-          variant="primary-plain"
-          size="sm"
-        />
 
-        {!showImageUrl && (
           <Select
             label="Repo Name"
             size="lg"
             placeholder="Select Repo"
-            value={{ label: '', value: values.repoName }}
-            searchable
+            // value={{ label: '', value: values.repoName }}
+              value={
+                values.repoName
+                ? { label: values.repoName, value: values.repoName }
+                :undefined
+              }
+            // searchable
+            creatable={true}
             onChange={(val) => {
               handleChange('repoName')(dummyEvent(val.value));
-              handleChange('image')(dummyEvent(''));
-              setAccountName(val.accName);
+              if (val.accName == undefined || val.accName == ''){
+                handleChange('repoAccountName')(dummyEvent(''));
+              }
+              else {
+                handleChange('repoAccountName')(dummyEvent(val.accName));
+              }
             }}
             options={async () => [...repos]}
             error={!!errors.repos || !!repoLoadingError}
@@ -236,22 +211,20 @@ const AppCompute = () => {
             }
             loading={repoLoading}
           />
-        )}
 
-        {!showImageUrl && (
           <Select
             label="Image Tag"
             size="lg"
             placeholder="Select Image Tag"
-            value={{ label: '', value: values.repoImageTag }}
-            searchable
+            // value={{ label: '', value: values.repoImageTag }}
+            value={
+              values.repoImageTag
+                  ? { label: values.repoImageTag, value: values.repoImageTag }
+                  :undefined
+            }
+            creatable={true}
             onChange={(val) => {
               handleChange('repoImageTag')(dummyEvent(val.value));
-              handleChange('repoImageUrl')(
-                dummyEvent(
-                  `registry.kloudlite.io/${accountName}/${values.repoName}:${val.value}`
-                )
-              );
             }}
             options={async () =>
               [
@@ -275,15 +248,6 @@ const AppCompute = () => {
             }
             loading={digestLoading}
           />
-        )}
-
-        {/* <PasswordInput
-          label={
-            <InfoLabel info="some usefull information" label="Pull Secret" />
-          }
-          size="lg"
-          value={values.pullSecret}
-        /> */}
       </div>
 
       <div className="flex flex-col">

diff --git a/src/apps/console/server/r-utils/key-constants.js b/src/apps/console/server/r-utils/key-constants.js
@@ -10,6 +10,5 @@ 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',
+  repoAccountName: 'kloudlite.io/ui-repoAccountName'
 };