Skip to content

Commit fae64ff

Browse files
swarooparswaroopar
authoredNov 28, 2023
Merge pull request #282 from Alice1319/feature/update_region_flavor
display region and flavor drop downs as mandatory.
·
1.0.241.0.5
2 parents 0c07ba8 + 2ff265d commit fae64ff

File tree

5 files changed

+296
-247
lines changed

5 files changed

+296
-247
lines changed
 

‎src/components/content/order/common/FlavorInfo.tsx

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
* SPDX-License-Identifier: Apache-2.0
3+
* SPDX-FileCopyrightText: Huawei Inc.
4+
*/
5+
6+
import React from 'react';
7+
import { Form, Select, Space } from 'antd';
8+
import '../../../../styles/service_order.css';
9+
import { Flavor } from '../types/Flavor';
10+
11+
export const FlavorInfo = ({
12+
selectFlavor,
13+
flavorList,
14+
disabled,
15+
onChangeFlavor,
16+
}: {
17+
selectFlavor: string;
18+
flavorList?: Flavor[];
19+
disabled?: boolean;
20+
onChangeFlavor?: (newFlavor: string) => void;
21+
}): React.JSX.Element => {
22+
return (
23+
<>
24+
<div className={'cloud-provider-tab-class region-flavor-content'}>
25+
<Form.Item
26+
name='selectFlavor'
27+
label='Flavor'
28+
rules={[{ required: true, message: 'Flavor is required' }]}
29+
>
30+
<Space wrap>
31+
<Select
32+
className={'select-box-class'}
33+
value={selectFlavor}
34+
style={{ width: 450 }}
35+
onChange={(newFlavor) => {
36+
if (onChangeFlavor) {
37+
onChangeFlavor(newFlavor);
38+
}
39+
}}
40+
options={flavorList && flavorList.length > 0 ? flavorList : []}
41+
disabled={disabled !== undefined}
42+
/>
43+
</Space>
44+
</Form.Item>
45+
</div>
46+
</>
47+
);
48+
};

‎src/components/content/order/common/RegionInfo.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*
2+
* SPDX-License-Identifier: Apache-2.0
3+
* SPDX-FileCopyrightText: Huawei Inc.
4+
*/
5+
6+
import React from 'react';
7+
import { Form, Select, Space } from 'antd';
8+
import '../../../../styles/service_order.css';
9+
import { Region } from '../types/Region';
10+
11+
export const RegionInfo = ({
12+
selectRegion,
13+
onChangeRegion,
14+
regionList,
15+
disabled,
16+
}: {
17+
selectRegion: string;
18+
onChangeRegion?: (newRegion: string) => void;
19+
regionList?: Region[];
20+
disabled?: boolean;
21+
}): React.JSX.Element => {
22+
return (
23+
<>
24+
<div className={'cloud-provider-tab-class region-flavor-content'}>
25+
<Form.Item
26+
name='selectRegion'
27+
label='Region'
28+
rules={[{ required: true, message: 'Region is required' }]}
29+
>
30+
<Space wrap>
31+
<Select
32+
className={'select-box-class'}
33+
defaultValue={selectRegion}
34+
value={selectRegion}
35+
style={{ width: 450 }}
36+
onChange={(newRegion) => {
37+
if (onChangeRegion) {
38+
onChangeRegion(newRegion);
39+
}
40+
}}
41+
options={regionList && regionList.length > 0 ? regionList : []}
42+
disabled={disabled !== undefined}
43+
/>
44+
</Space>
45+
</Form.Item>
46+
</div>
47+
</>
48+
);
49+
};

‎src/components/content/order/create/CreateService.tsx

+65-78
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Billing, UserOrderableServiceVo } from '../../../../xpanse-api/generate
99
import NavigateOrderSubmission from './NavigateOrderSubmission';
1010
import CspSelect from '../formElements/CspSelect';
1111
import GoToSubmit from './GoToSubmit';
12-
import { Select, Skeleton, Space, Tabs } from 'antd';
12+
import { Form, Select, Skeleton, Tabs } from 'antd';
1313
import { Tab } from 'rc-tabs/lib/interface';
1414
import { servicesSubPageRoute } from '../../../utils/constants';
1515
import { OrderSubmitProps } from './OrderSubmit';
@@ -27,6 +27,8 @@ import { getCspListForVersion } from '../formDataHelpers/cspHelper';
2727
import { getBilling } from '../formDataHelpers/billingHelper';
2828
import '../../../../styles/service_order.css';
2929
import { BillingInfo } from '../common/BillingInfo';
30+
import { RegionInfo } from '../common/RegionInfo';
31+
import { FlavorInfo } from '../common/FlavorInfo';
3032

3133
function CreateService(): React.JSX.Element {
3234
const [urlParams] = useSearchParams();
@@ -344,92 +346,77 @@ function CreateService(): React.JSX.Element {
344346
if (selectCsp) {
345347
return (
346348
<>
347-
<div>
348-
<NavigateOrderSubmission text={'<< Back'} to={servicePageUrl as To} props={undefined} />
349-
<div className={'Line'} />
350-
</div>
351-
<div className={'generic-table-container'}>
352-
<div className={'content-title'}>
353-
Service: {serviceName}&nbsp;&nbsp;&nbsp;&nbsp; Version:&nbsp;
354-
<Select
355-
value={selectVersion}
356-
className={'version-drop-down'}
357-
onChange={onChangeVersion}
358-
options={versionList}
359-
/>
360-
</div>
361-
<br />
362-
<CspSelect
363-
selectCsp={selectCsp}
364-
cspList={cspList}
365-
onChangeHandler={(csp: UserOrderableServiceVo.csp) => {
366-
onChangeCloudProvider(csp);
367-
}}
368-
/>
369-
<br />
370-
<ServiceHostingSelection
371-
serviceHostingTypes={serviceHostTypes}
372-
updateServiceHostingType={onChangeServiceHostingType}
373-
disabledAlways={false}
374-
previousSelection={selectServiceHostType}
375-
></ServiceHostingSelection>
376-
<br />
377-
<br />
378-
<div className={'cloud-provider-tab-class content-title'}>
379-
<Tabs
380-
type='card'
381-
size='middle'
382-
activeKey={selectArea}
383-
tabPosition={'top'}
384-
items={areaList}
385-
onChange={(area) => {
386-
onChangeAreaValue(area);
387-
}}
388-
/>
349+
<Form layout='vertical' initialValues={{ selectRegion, selectFlavor }}>
350+
<div>
351+
<NavigateOrderSubmission text={'<< Back'} to={servicePageUrl as To} props={undefined} />
352+
<div className={'Line'} />
389353
</div>
390-
<div className={'cloud-provider-tab-class region-flavor-content'}>Region:</div>
391-
<div className={'cloud-provider-tab-class region-flavor-content'}>
392-
<Space wrap>
354+
<div className={'generic-table-container'}>
355+
<div className={'content-title'}>
356+
Service: {serviceName}&nbsp;&nbsp;&nbsp;&nbsp; Version:&nbsp;
393357
<Select
394-
className={'select-box-class'}
395-
defaultValue={selectRegion}
396-
value={selectRegion}
397-
style={{ width: 450 }}
398-
onChange={onChangeRegion}
399-
options={regionList}
358+
value={selectVersion}
359+
className={'version-drop-down'}
360+
onChange={onChangeVersion}
361+
options={versionList}
400362
/>
401-
</Space>
402-
</div>
403-
<div className={'cloud-provider-tab-class region-flavor-content'}>Flavor:</div>
404-
<div className={'cloud-provider-tab-class region-flavor-content'}>
405-
<Space wrap>
406-
<Select
407-
className={'select-box-class'}
408-
value={selectFlavor}
409-
style={{ width: 450 }}
410-
onChange={(newFlavor) => {
411-
onChangeFlavor(newFlavor);
363+
</div>
364+
<br />
365+
<CspSelect
366+
selectCsp={selectCsp}
367+
cspList={cspList}
368+
onChangeHandler={(csp: UserOrderableServiceVo.csp) => {
369+
onChangeCloudProvider(csp);
370+
}}
371+
/>
372+
<br />
373+
<ServiceHostingSelection
374+
serviceHostingTypes={serviceHostTypes}
375+
updateServiceHostingType={onChangeServiceHostingType}
376+
disabledAlways={false}
377+
previousSelection={selectServiceHostType}
378+
></ServiceHostingSelection>
379+
<br />
380+
<br />
381+
<div className={'cloud-provider-tab-class content-title'}>
382+
<Tabs
383+
type='card'
384+
size='middle'
385+
activeKey={selectArea}
386+
tabPosition={'top'}
387+
items={areaList}
388+
onChange={(area) => {
389+
onChangeAreaValue(area);
412390
}}
413-
options={flavorList}
414391
/>
415-
</Space>
416-
</div>
417-
<BillingInfo priceValue={priceValue} billing={currentBilling} />
418-
</div>
419-
{selectServiceHostType ? (
420-
<div>
421-
<div className={'Line'} />
422-
<GoToSubmit
423-
selectVersion={selectVersion}
424-
selectCsp={selectCsp}
392+
</div>
393+
<RegionInfo
425394
selectRegion={selectRegion}
426-
selectArea={selectArea}
395+
onChangeRegion={onChangeRegion}
396+
regionList={regionList}
397+
/>
398+
<FlavorInfo
427399
selectFlavor={selectFlavor}
428-
versionMapper={versionMapper.current}
429-
selectServiceHostingType={selectServiceHostType}
400+
flavorList={flavorList}
401+
onChangeFlavor={onChangeFlavor}
430402
/>
403+
<BillingInfo priceValue={priceValue} billing={currentBilling} />
431404
</div>
432-
) : null}
405+
{selectServiceHostType ? (
406+
<div>
407+
<div className={'Line'} />
408+
<GoToSubmit
409+
selectVersion={selectVersion}
410+
selectCsp={selectCsp}
411+
selectRegion={selectRegion}
412+
selectArea={selectArea}
413+
selectFlavor={selectFlavor}
414+
versionMapper={versionMapper.current}
415+
selectServiceHostingType={selectServiceHostType}
416+
/>
417+
</div>
418+
) : null}
419+
</Form>
433420
</>
434421
);
435422
}

‎src/components/content/order/migrate/MigrateServiceSubmit.tsx

+69-84
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* SPDX-FileCopyrightText: Huawei Inc.
44
*/
55

6-
import { Button, Image, Popconfirm, Select, Space, Tabs } from 'antd';
6+
import { Button, Form, Image, Popconfirm, Space, Tabs } from 'antd';
77
import {
88
Billing,
99
CloudServiceProvider,
@@ -24,6 +24,8 @@ import { MigrationStatus } from '../types/MigrationStatus';
2424
import { MigrationSteps } from '../types/MigrationSteps';
2525
import { ServiceHostingSelection } from '../common/ServiceHostingSelection';
2626
import { BillingInfo } from '../common/BillingInfo';
27+
import { RegionInfo } from '../common/RegionInfo';
28+
import { FlavorInfo } from '../common/FlavorInfo';
2729

2830
export const MigrateServiceSubmit = ({
2931
userOrderableServiceVoList,
@@ -101,95 +103,78 @@ export const MigrateServiceSubmit = ({
101103
serviceHostingType={selectServiceHostingType}
102104
/>
103105
) : null}
104-
<div className={'cloud-provider-tab-class'}>Cloud Service Provider:</div>
105-
<div className={'services-content-body'}>
106-
<div className={'cloud-provider-select-hover'}>
107-
<Image
108-
width={200}
109-
height={56}
110-
src={cspMap.get(selectCsp as unknown as CloudServiceProvider.name)?.logo}
111-
alt={selectCsp}
112-
preview={false}
113-
fallback={
114-
'https://img.shields.io/badge/-' +
115-
(selectCsp.length === 0 ? '' : selectCsp.toString()) +
116-
'-gray'
117-
}
118-
/>
119-
<div className='service-type-option-info' />
106+
<Form layout='vertical' initialValues={{ selectRegion, selectFlavor }}>
107+
<div className={'cloud-provider-tab-class'}>Cloud Service Provider:</div>
108+
<div className={'services-content-body'}>
109+
<div className={'cloud-provider-select-hover'}>
110+
<Image
111+
width={200}
112+
height={56}
113+
src={cspMap.get(selectCsp as unknown as CloudServiceProvider.name)?.logo}
114+
alt={selectCsp}
115+
preview={false}
116+
fallback={
117+
'https://img.shields.io/badge/-' +
118+
(selectCsp.length === 0 ? '' : selectCsp.toString()) +
119+
'-gray'
120+
}
121+
/>
122+
<div className='service-type-option-info' />
123+
</div>
120124
</div>
121-
</div>
122-
<br />
123-
<ServiceHostingSelection
124-
serviceHostingTypes={[selectServiceHostingType]}
125-
disabledAlways={true}
126-
previousSelection={undefined}
127-
></ServiceHostingSelection>
128-
<br />
129-
<br />
130-
<div className={'cloud-provider-tab-class content-title'}>
131-
<Tabs type='card' size='middle' activeKey={selectArea} tabPosition={'top'} items={areaList} />
132-
</div>
133-
<div className={'cloud-provider-tab-class region-flavor-content'}>Region:</div>
134-
<div className={'cloud-provider-tab-class region-flavor-content'}>
135-
<Space wrap>
136-
<Select
137-
className={'select-box-class select-cloud-provider-class'}
138-
defaultValue={selectRegion}
139-
value={selectRegion}
140-
disabled={true}
141-
/>
142-
</Space>
143-
</div>
144-
<div className={'cloud-provider-tab-class region-flavor-content'}>Flavor:</div>
145-
<div className={'cloud-provider-tab-class region-flavor-content'}>
146-
<Space wrap>
147-
<Select
148-
className={'select-box-class select-cloud-provider-class'}
149-
value={selectFlavor}
150-
disabled={true}
151-
/>
152-
</Space>
153-
</div>
154-
<BillingInfo priceValue={priceValue} billing={currentBilling} />
155-
<div className={'migrate-step-button-inner-class'}>
156-
<Space size={'large'}>
157-
{currentMigrationStep > MigrationSteps.ExportServiceData ? (
158-
<Button
159-
type='primary'
160-
className={'migrate-steps-operation-button-clas'}
161-
onClick={() => {
162-
prev();
163-
}}
164-
disabled={isPreviousDisabled}
165-
>
166-
Previous
167-
</Button>
168-
) : (
169-
<></>
170-
)}
171-
{currentMigrationStep === MigrationSteps.DestroyTheOldService ? (
172-
<Popconfirm
173-
title='Migrate service'
174-
description='Are you sure to migrate service?'
175-
okText='No'
176-
cancelText='Yes'
177-
onCancel={migrate}
178-
>
125+
<br />
126+
<ServiceHostingSelection
127+
serviceHostingTypes={[selectServiceHostingType]}
128+
disabledAlways={true}
129+
previousSelection={undefined}
130+
></ServiceHostingSelection>
131+
<br />
132+
<br />
133+
<div className={'cloud-provider-tab-class content-title'}>
134+
<Tabs type='card' size='middle' activeKey={selectArea} tabPosition={'top'} items={areaList} />
135+
</div>
136+
<RegionInfo selectRegion={selectRegion} disabled={true} />
137+
<FlavorInfo selectFlavor={selectFlavor} disabled={true} />
138+
<BillingInfo priceValue={priceValue} billing={currentBilling} />
139+
<div className={'migrate-step-button-inner-class'}>
140+
<Space size={'large'}>
141+
{currentMigrationStep > MigrationSteps.ExportServiceData ? (
179142
<Button
180143
type='primary'
181144
className={'migrate-steps-operation-button-clas'}
182-
loading={isMigrating}
183-
disabled={requestSubmitted}
145+
onClick={() => {
146+
prev();
147+
}}
148+
disabled={isPreviousDisabled}
184149
>
185-
Migrate
150+
Previous
186151
</Button>
187-
</Popconfirm>
188-
) : (
189-
<></>
190-
)}
191-
</Space>
192-
</div>
152+
) : (
153+
<></>
154+
)}
155+
{currentMigrationStep === MigrationSteps.DestroyTheOldService ? (
156+
<Popconfirm
157+
title='Migrate service'
158+
description='Are you sure to migrate service?'
159+
okText='No'
160+
cancelText='Yes'
161+
onCancel={migrate}
162+
>
163+
<Button
164+
type='primary'
165+
className={'migrate-steps-operation-button-clas'}
166+
loading={isMigrating}
167+
disabled={requestSubmitted}
168+
>
169+
Migrate
170+
</Button>
171+
</Popconfirm>
172+
) : (
173+
<></>
174+
)}
175+
</Space>
176+
</div>
177+
</Form>
193178
</>
194179
);
195180
};

‎src/components/content/order/migrate/SelectDestination.tsx

+65-85
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import CspSelect from '../formElements/CspSelect';
77
import { Billing, UserOrderableServiceVo } from '../../../../xpanse-api/generated';
8-
import { Button, Select, Space, Tabs } from 'antd';
8+
import { Button, Form, Space, Tabs } from 'antd';
99
import { Tab } from 'rc-tabs/lib/interface';
1010
import React, { useEffect, useState } from 'react';
1111
import { Region } from '../types/Region';
@@ -19,6 +19,8 @@ import { ServiceHostingSelection } from '../common/ServiceHostingSelection';
1919
import { MigrationSteps } from '../types/MigrationSteps';
2020
import '../../../../styles/service_order.css';
2121
import { BillingInfo } from '../common/BillingInfo';
22+
import { RegionInfo } from '../common/RegionInfo';
23+
import { FlavorInfo } from '../common/FlavorInfo';
2224

2325
export const SelectDestination = ({
2426
userOrderableServiceVoList,
@@ -56,6 +58,7 @@ export const SelectDestination = ({
5658

5759
const [flavorList, setFlavorList] = useState<Flavor[]>([]);
5860
const [selectFlavor, setSelectFlavor] = useState<string>('');
61+
5962
const [priceValue, setPriceValue] = useState<string>('');
6063
const [currentBilling, setCurrentBilling] = useState<Billing | undefined>(undefined);
6164

@@ -249,96 +252,73 @@ export const SelectDestination = ({
249252

250253
if (selectCsp) {
251254
return (
252-
<div>
253-
<CspSelect
254-
selectCsp={selectCsp}
255-
cspList={cspList}
256-
onChangeHandler={(csp) => {
257-
onChangeCloudProvider(csp);
258-
}}
259-
/>
260-
<br />
261-
<ServiceHostingSelection
262-
serviceHostingTypes={serviceHostTypes}
263-
updateServiceHostingType={onChangeServiceHostingType}
264-
disabledAlways={false}
265-
previousSelection={selectServiceHostType}
266-
></ServiceHostingSelection>
267-
<br />
268-
<br />
269-
<div className={'cloud-provider-tab-class content-title'}>
270-
<Tabs
271-
type='card'
272-
size='middle'
273-
activeKey={selectArea}
274-
tabPosition={'top'}
275-
items={areaList}
276-
onChange={(area) => {
277-
onChangeAreaValue(area);
255+
<Form layout='vertical' initialValues={{ selectRegion, selectFlavor }}>
256+
<div>
257+
<CspSelect
258+
selectCsp={selectCsp}
259+
cspList={cspList}
260+
onChangeHandler={(csp) => {
261+
onChangeCloudProvider(csp);
278262
}}
279263
/>
280-
</div>
281-
<div className={'cloud-provider-tab-class region-flavor-content'}>Region:</div>
282-
<div className={'cloud-provider-tab-class region-flavor-content'}>
283-
<Space wrap>
284-
<Select
285-
className={'select-box-class'}
286-
defaultValue={selectRegion}
287-
value={selectRegion}
288-
style={{ width: 450 }}
289-
onChange={onChangeRegion}
290-
options={regionList}
291-
/>
292-
</Space>
293-
</div>
294-
<div className={'cloud-provider-tab-class region-flavor-content'}>Flavor:</div>
295-
<div className={'cloud-provider-tab-class region-flavor-content'}>
296-
<Space wrap>
297-
<Select
298-
className={'select-box-class'}
299-
value={selectFlavor}
300-
style={{ width: 450 }}
301-
onChange={(newFlavor) => {
302-
onChangeFlavor(newFlavor);
264+
<br />
265+
<ServiceHostingSelection
266+
serviceHostingTypes={serviceHostTypes}
267+
updateServiceHostingType={onChangeServiceHostingType}
268+
disabledAlways={false}
269+
previousSelection={selectServiceHostType}
270+
></ServiceHostingSelection>
271+
<br />
272+
<br />
273+
<div className={'cloud-provider-tab-class content-title'}>
274+
<Tabs
275+
type='card'
276+
size='middle'
277+
activeKey={selectArea}
278+
tabPosition={'top'}
279+
items={areaList}
280+
onChange={(area) => {
281+
onChangeAreaValue(area);
303282
}}
304-
options={flavorList}
305283
/>
306-
</Space>
307-
</div>
308-
<BillingInfo priceValue={priceValue} billing={currentBilling} />
309-
<div className={'migrate-step-button-inner-class'}>
310-
<Space size={'large'}>
311-
{currentMigrationStep > MigrationSteps.ExportServiceData ? (
312-
<Button
313-
type='primary'
314-
className={'migrate-steps-operation-button-clas'}
315-
onClick={() => {
316-
prev();
317-
}}
318-
disabled={isPreviousDisabled}
319-
>
320-
Previous
321-
</Button>
322-
) : (
323-
<></>
324-
)}
284+
</div>
285+
<RegionInfo selectRegion={selectRegion} onChangeRegion={onChangeRegion} regionList={regionList} />
286+
<FlavorInfo selectFlavor={selectFlavor} flavorList={flavorList} onChangeFlavor={onChangeFlavor} />
287+
<BillingInfo priceValue={priceValue} billing={currentBilling} />
288+
<div className={'migrate-step-button-inner-class'}>
289+
<Space size={'large'}>
290+
{currentMigrationStep > MigrationSteps.ExportServiceData ? (
291+
<Button
292+
type='primary'
293+
className={'migrate-steps-operation-button-clas'}
294+
onClick={() => {
295+
prev();
296+
}}
297+
disabled={isPreviousDisabled}
298+
>
299+
Previous
300+
</Button>
301+
) : (
302+
<></>
303+
)}
325304

326-
{currentMigrationStep < MigrationSteps.DestroyTheOldService ? (
327-
<Button
328-
type='primary'
329-
className={'migrate-steps-operation-button-clas'}
330-
onClick={() => {
331-
next();
332-
}}
333-
>
334-
Next
335-
</Button>
336-
) : (
337-
<></>
338-
)}
339-
</Space>
305+
{currentMigrationStep < MigrationSteps.DestroyTheOldService ? (
306+
<Button
307+
type='primary'
308+
className={'migrate-steps-operation-button-clas'}
309+
onClick={() => {
310+
next();
311+
}}
312+
>
313+
Next
314+
</Button>
315+
) : (
316+
<></>
317+
)}
318+
</Space>
319+
</div>
340320
</div>
341-
</div>
321+
</Form>
342322
);
343323
}
344324
return <></>;

0 commit comments

Comments
 (0)
Please sign in to comment.