From 0661777f75124d1908fd1e30441d01d0647d7fc6 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Tue, 27 Feb 2024 18:42:59 +0530 Subject: [PATCH 1/2] 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 --- .../console/page-components/app-states.tsx | 15 +++ .../app+/$app+/settings+/compute/route.tsx | 80 +++++----------- .../$environment+/apps/apps-resources.tsx | 5 +- .../$environment+/new-app/app-compute.tsx | 96 ++++++------------- .../console/server/r-utils/key-constants.js | 3 +- 5 files changed, 73 insertions(+), 126 deletions(-) diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx index e78443f2f..525729791 100644 --- 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/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 d70303d5e..7708164e1 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 @@ -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,10 +106,7 @@ 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: { @@ -120,8 +114,7 @@ const SettingCompute = () => { 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 = () => { }} >
- {!values.repoImageUrl && ( - - } - size="lg" - value={values.imageUrl} - onChange={handleChange('imageUrl')} - error={!!errors.imageUrl} - message={errors.imageUrl} - /> - )} - {/* - } - size="lg" - value={values.pullSecret} - // error={!!errors.pullSecret} - // message={errors.pullSecret} - // onChange={handleChange('pullSecret')} - /> */} - {values.repoImageUrl && ( { 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} /> - )}
{/*
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 index 771841875..5dfe56618 100644 --- 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: , 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 index 57d220cae..3513b5b0a 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 @@ -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,10 +106,7 @@ 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: { @@ -121,7 +114,8 @@ const AppCompute = () => { 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.
- {showImageUrl && ( - - } - 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} - /> - )} - -
diff --git a/src/apps/console/server/r-utils/key-constants.js b/src/apps/console/server/r-utils/key-constants.js index 24506662f..929280dd2 100644 --- 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' }; From 5ac63c6d859bdaf87cb347d85e4227e5008609cb Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Tue, 27 Feb 2024 19:23:39 +0530 Subject: [PATCH 2/2] add registry url --- .../$environment+/app+/$app+/settings+/compute/route.tsx | 4 +++- .../$project+/$environment+/new-app/app-compute.tsx | 5 +++-- 2 files changed, 6 insertions(+), 3 deletions(-) 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 7708164e1..d7451aba0 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 @@ -17,6 +17,8 @@ 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 { plans } from '../../../../new-app/datas'; +import {registryHost} from "~/lib/configs/base-url.cjs"; + const valueRender = ({ label, @@ -114,7 +116,7 @@ const SettingCompute = () => { containers: [ { ...(s.spec.containers?.[0] || {}), - image: values.repoAccountName == undefined || values.repoAccountName == '' ? `${values.repoName}:${values.repoImageTag}` : `registry.kloudlite.io/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`, + image: values.repoAccountName == undefined || values.repoAccountName == '' ? `${values.repoName}:${values.repoImageTag}` : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`, name: 'container-0', resourceCpu: val.selectionMode === 'quick' 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 3513b5b0a..9fa09fcd7 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 @@ -16,6 +16,7 @@ import { useConsoleApi } from '~/console/server/gql/api-provider'; import { useMapper } from '~/components/utils'; import {useEffect, useState } from 'react'; import { plans } from './datas'; +import {registryHost} from "~/lib/configs/base-url.cjs"; const valueRender = ({ label, @@ -115,7 +116,7 @@ const AppCompute = () => { { ...(s.spec.containers?.[0] || {}), // 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}`, + image: values.repoAccountName == undefined || values.repoAccountName == '' ? `${values.repoName}:${values.repoImageTag}` : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`, name: 'container-0', resourceCpu: val.selectionMode === 'quick' @@ -162,7 +163,7 @@ const AppCompute = () => { return api.listDigest({ repoName: values.repoName }); } ); - + return ( {