Skip to content

Commit 8a5d292

Browse files
olgennolgenn
committed
[UI] Run Wizard. Added docker, python and repos fields
1 parent b69821a commit 8a5d292

File tree

5 files changed

+133
-24
lines changed

5 files changed

+133
-24
lines changed

‎frontend/src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export { default as HelpPanel } from '@cloudscape-design/components/help-panel';
4646
export type { HelpPanelProps } from '@cloudscape-design/components/help-panel';
4747
export { default as TextContent } from '@cloudscape-design/components/text-content';
4848
export { default as Toggle } from '@cloudscape-design/components/toggle';
49+
export type { ToggleProps } from '@cloudscape-design/components/toggle';
4950
export { default as Modal } from '@cloudscape-design/components/modal';
5051
export { default as TutorialPanel } from '@cloudscape-design/components/tutorial-panel';
5152
export type { TutorialPanelProps } from '@cloudscape-design/components/tutorial-panel';

‎frontend/src/locale/en.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -478,6 +478,19 @@
478478
"name_placeholder": "Optional",
479479
"ide": "IDE",
480480
"ide_description": "Select which IDE would you like to use with the dev environment.",
481+
"docker": "Docker",
482+
"docker_image": "Docker image",
483+
"docker_image_description": "The Docker image",
484+
"docker_image_placeholder": "Optional",
485+
"python": "Python",
486+
"python_description": "Version of python",
487+
"python_placeholder": "Optional",
488+
"repo": "Repo",
489+
"repo_description": "Repository URL",
490+
"repo_placeholder": "Optional",
491+
"repo_local_path": "Repo local path",
492+
"repo_local_path_description": "Repo local path name",
493+
"repo_local_path_placeholder": "Optional",
481494
"config": "Configuration file",
482495
"config_description": "Review the configuration file and adjust it if needed. Click Info for examples.",
483496
"success_notification": "The run is submitted!"

‎frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGenerateYaml.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { useMemo } from 'react';
2+
import jsYaml from 'js-yaml';
3+
4+
import { convertMiBToGB, renderRange, round } from 'pages/Offers/List/helpers';
5+
6+
import { IRunEnvironmentFormValues } from '../types';
7+
8+
export type UseGenerateYamlArgs = {
9+
formValues: IRunEnvironmentFormValues;
10+
};
11+
12+
export const useGenerateYaml = ({ formValues }: UseGenerateYamlArgs) => {
13+
return useMemo(() => {
14+
if (!formValues.offer || !formValues.ide) {
15+
return '';
16+
}
17+
18+
const { name, ide, docker, image, python, offer, repo, repo_local_path } = formValues;
19+
20+
return jsYaml.dump({
21+
type: 'dev-environment',
22+
...(name ? { name } : {}),
23+
ide,
24+
...(docker ? { docker } : {}),
25+
...(image ? { image } : {}),
26+
...(python ? { python } : {}),
27+
28+
resources: {
29+
gpu: `${offer.name}:${round(convertMiBToGB(offer.memory_mib))}GB:${renderRange(offer.count)}`,
30+
},
31+
32+
...(repo || repo_local_path
33+
? {
34+
repos: [
35+
{
36+
...(repo ? { url: repo } : {}),
37+
...(repo_local_path ? { local_path: repo_local_path } : {}),
38+
},
39+
],
40+
}
41+
: {}),
42+
43+
backends: offer.backends,
44+
spot_policy: 'auto',
45+
});
46+
}, [
47+
formValues.name,
48+
formValues.ide,
49+
formValues.offer,
50+
formValues.python,
51+
formValues.image,
52+
formValues.repo,
53+
formValues.repo_local_path,
54+
]);
55+
};

‎frontend/src/pages/Runs/CreateDevEnvironment/index.tsx‎

Lines changed: 59 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import * as yup from 'yup';
77
import { Box, Link, WizardProps } from '@cloudscape-design/components';
88
import { CardsProps } from '@cloudscape-design/components/cards';
99

10-
import { Container, FormCodeEditor, FormField, FormInput, FormSelect, SpaceBetween, Wizard } from 'components';
10+
import type { ToggleProps } from 'components';
11+
import { Container, FormCodeEditor, FormField, FormInput, FormSelect, SpaceBetween, Toggle, Wizard } from 'components';
1112

1213
import { useBreadcrumbs, useNotifications } from 'hooks';
1314
import { getServerError } from 'libs';
@@ -18,6 +19,7 @@ import { OfferList } from 'pages/Offers/List';
1819
import { convertMiBToGB, renderRange, round } from 'pages/Offers/List/helpers';
1920

2021
import { getRunSpecFromYaml } from './helpers/getRunSpecFromYaml';
22+
import { useGenerateYaml } from './hooks/useGenerateYaml';
2123

2224
import { IRunEnvironmentFormValues } from './types';
2325

@@ -161,6 +163,16 @@ export const CreateDevEnvironment: React.FC = () => {
161163
onNavigate({ requestedStepIndex, reason });
162164
};
163165

166+
const toggleDocker: ToggleProps['onChange'] = ({ detail }) => {
167+
setValue('docker', detail.checked);
168+
169+
if (detail.checked) {
170+
setValue('python', '');
171+
} else {
172+
setValue('image', '');
173+
}
174+
};
175+
164176
const onChangeOffer: CardsProps<IGpu>['onSelectionChange'] = ({ detail }) => {
165177
const newSelectedOffers = detail?.selectedItems ?? [];
166178
setSelectedOffers(newSelectedOffers);
@@ -227,31 +239,13 @@ export const CreateDevEnvironment: React.FC = () => {
227239
}
228240
};
229241

230-
useEffect(() => {
231-
if (!formValues.offer || !formValues.ide) {
232-
return;
233-
}
234-
235-
setValue(
236-
'config_yaml',
237-
`type: dev-environment
238-
${`${
239-
formValues.name
240-
? `name: ${formValues.name}
241-
242-
`
243-
: ''
244-
}`}ide: ${formValues.ide}
242+
const yaml = useGenerateYaml({ formValues });
245243

246-
resources:
247-
gpu: ${formValues.offer.name}:${round(convertMiBToGB(formValues.offer.memory_mib))}GB:${renderRange(formValues.offer.count)}
244+
console.log(yaml);
248245

249-
backends: [${formValues.offer.backends?.join(', ')}]
250-
251-
spot_policy: auto
252-
`,
253-
);
254-
}, [formValues.name, formValues.ide, formValues.offer]);
246+
useEffect(() => {
247+
setValue('config_yaml', yaml);
248+
}, [yaml]);
255249

256250
return (
257251
<form className={cn({ [styles.wizardForm]: activeStepIndex === 0 })} onSubmit={handleSubmit(onSubmit)}>
@@ -304,6 +298,7 @@ spot_policy: auto
304298
name="name"
305299
disabled={loading}
306300
/>
301+
307302
<FormSelect
308303
label={t('runs.dev_env.wizard.ide')}
309304
description={t('runs.dev_env.wizard.ide_description')}
@@ -312,6 +307,46 @@ spot_policy: auto
312307
options={ideOptions}
313308
disabled={loading}
314309
/>
310+
311+
<Toggle checked={formValues.docker} onChange={toggleDocker}>
312+
{t('runs.dev_env.wizard.docker')}
313+
</Toggle>
314+
315+
<FormInput
316+
label={t('runs.dev_env.wizard.docker_image')}
317+
description={t('runs.dev_env.wizard.docker_image_description')}
318+
placeholder={t('runs.dev_env.wizard.docker_image_placeholder')}
319+
control={control}
320+
name="image"
321+
disabled={loading || !formValues.docker}
322+
/>
323+
324+
<FormInput
325+
label={t('runs.dev_env.wizard.python')}
326+
description={t('runs.dev_env.wizard.python_description')}
327+
placeholder={t('runs.dev_env.wizard.python_placeholder')}
328+
control={control}
329+
name="python"
330+
disabled={loading || formValues.docker}
331+
/>
332+
333+
<FormInput
334+
label={t('runs.dev_env.wizard.repo')}
335+
description={t('runs.dev_env.wizard.repo_description')}
336+
placeholder={t('runs.dev_env.wizard.repo_placeholder')}
337+
control={control}
338+
name="repo"
339+
disabled={loading}
340+
/>
341+
342+
<FormInput
343+
label={t('runs.dev_env.wizard.repo_local_path')}
344+
description={t('runs.dev_env.wizard.repo_local_path_description')}
345+
placeholder={t('runs.dev_env.wizard.repo_local_path_placeholder')}
346+
control={control}
347+
name="repo_local_path"
348+
disabled={loading}
349+
/>
315350
</SpaceBetween>
316351
</Container>
317352
),

‎frontend/src/pages/Runs/CreateDevEnvironment/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,9 @@ export interface IRunEnvironmentFormValues {
33
name: string;
44
ide: 'cursor' | 'vscode';
55
config_yaml: string;
6+
docker: boolean;
7+
image?: string;
8+
python?: string;
9+
repo?: string;
10+
repo_local_path?: string;
611
}

0 commit comments

Comments
 (0)