Skip to content

Commit

Permalink
Merge pull request #99 from kloudlite/update/create-app
Browse files Browse the repository at this point in the history 
KLO-173 : UI changes in create and update app
  • Loading branch information
@nxtcoder17
nxtcoder17 authored Feb 27, 2024
2 parents e5b190a + 5ac63c6 commit f9fb4b2
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 127 deletions.
15 changes: 15 additions & 0 deletions src/apps/console/page-components/app-states.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -218,6 +231,8 @@ export const useAppState = () => {
services: app.spec.services || [],
setServices,
getRepoMapper,
getRepoName,
getImageTag
};
};

Expand Down
82 changes: 26 additions & 56 deletions ...le/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -40,14 +42,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,
Expand All @@ -63,10 +63,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,
Expand Down Expand Up @@ -109,19 +108,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}` : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
name: 'container-0',
resourceCpu:
val.selectionMode === 'quick'
Expand Down Expand Up @@ -158,12 +153,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 {
Expand Down Expand Up @@ -211,40 +200,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}
Expand All @@ -253,22 +227,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 () =>
[
Expand All @@ -292,7 +263,6 @@ const SettingCompute = () => {
}
loading={digestLoading}
/>
)}

</div>
{/* <div className="flex flex-col border border-border-default bg-surface-basic-default rounded overflow-hidden">
Expand Down
5 changes: 3 additions & 2 deletions src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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',
},
];
Expand Down
99 changes: 32 additions & 67 deletions src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@ 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';
import {registryHost} from "~/lib/configs/base-url.cjs";

const valueRender = ({
label,
Expand All @@ -39,13 +40,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,
Expand All @@ -65,11 +63,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',
Expand Down Expand Up @@ -110,18 +107,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}` : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
name: 'container-0',
resourceCpu:
val.selectionMode === 'quick'
Expand Down Expand Up @@ -168,7 +163,7 @@ const AppCompute = () => {
return api.listDigest({ repoName: values.repoName });
}
);

return (
<FadeIn
onSubmit={(e) => {
Expand All @@ -188,46 +183,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}
Expand All @@ -236,22 +212,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 () =>
[
Expand All @@ -275,15 +249,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">
Expand Down
Loading

0 comments on commit f9fb4b2

Please sign in to comment.