Skip to content

Commit b08e214

Browse files
rvsiarvsia
committed
Converts Flavor form to Data-driven form
1 parent 9765e35 commit b08e214

File tree

10 files changed

+690
-271
lines changed

10 files changed

+690
-271
lines changed

‎app/assets/javascripts/controllers/flavor/flavor_form_controller.js‎

Lines changed: 0 additions & 112 deletions
This file was deleted.

‎app/javascript/components/flavor-form/add-form-schema.js‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
2+
3+
function addSchema(emsList = [], cloudTenants = []) {
4+
const fields = [
5+
{
6+
component: componentTypes.SELECT_COMPONENT,
7+
name: 'ems_id',
8+
validate: [{
9+
type: validatorTypes.REQUIRED,
10+
}],
11+
options: emsList.map(item => ({ label: item.name, value: item.id })),
12+
label: __('Provider'),
13+
validateOnMount: true,
14+
isSearchable: true,
15+
},
16+
{
17+
component: componentTypes.TEXT_FIELD,
18+
name: 'name',
19+
validate: [{
20+
type: validatorTypes.REQUIRED,
21+
message: __('Required'),
22+
}],
23+
label: __('Name'),
24+
validateOnMount: true,
25+
},
26+
{
27+
component: componentTypes.TEXT_FIELD,
28+
name: 'ram',
29+
validate: [{
30+
type: validatorTypes.REQUIRED,
31+
message: __('Required'),
32+
},
33+
{
34+
type: validatorTypes.PATTERN_VALIDATOR,
35+
pattern: '^[-+]?[0-9]\\d*$',
36+
message: __('Ram must be integer'),
37+
},
38+
{
39+
type: validatorTypes.MIN_NUMBER_VALUE,
40+
value: 1,
41+
message: __('Ram must be greater than 0'),
42+
},
43+
],
44+
label: __('Ram size in MB'),
45+
dataType: 'integer',
46+
type: 'number',
47+
validateOnMount: true,
48+
},
49+
{
50+
component: componentTypes.TEXT_FIELD,
51+
name: 'vcpus',
52+
validate: [{
53+
type: validatorTypes.REQUIRED,
54+
message: __('Required'),
55+
},
56+
{
57+
type: validatorTypes.PATTERN_VALIDATOR,
58+
pattern: '^[-+]?[0-9]\\d*$',
59+
message: __('VCPUs must be integer'),
60+
},
61+
{
62+
type: validatorTypes.MIN_NUMBER_VALUE,
63+
value: 1,
64+
message: __('VCPUs must be greater than 0'),
65+
}],
66+
label: __('VCPUs'),
67+
dataType: 'integer',
68+
type: 'number',
69+
validateOnMount: true,
70+
},
71+
{
72+
component: componentTypes.TEXT_FIELD,
73+
name: 'disk',
74+
validate: [{
75+
type: validatorTypes.REQUIRED,
76+
message: __('Required'),
77+
},
78+
{
79+
type: validatorTypes.PATTERN_VALIDATOR,
80+
pattern: '^[-+]?[0-9]\\d*$',
81+
message: __('Disk size must be integer'),
82+
},
83+
{
84+
type: validatorTypes.MIN_NUMBER_VALUE,
85+
value: 1,
86+
message: __('Disk size must be greater than 0'),
87+
}],
88+
label: __('Disk size in GB'),
89+
dataType: 'integer',
90+
type: 'number',
91+
validateOnMount: true,
92+
},
93+
{
94+
component: componentTypes.TEXT_FIELD,
95+
name: 'swap',
96+
validate: [{
97+
type: validatorTypes.REQUIRED,
98+
message: __('Required'),
99+
},
100+
{
101+
type: validatorTypes.PATTERN_VALIDATOR,
102+
pattern: '^[-+]?[0-9]\\d*$',
103+
message: __('Swap size must be integer'),
104+
},
105+
{
106+
type: validatorTypes.MIN_NUMBER_VALUE,
107+
value: 0,
108+
message: __('Swap size must be greater or equal to 0'),
109+
}],
110+
label: __('Swap size in MB'),
111+
dataType: 'integer',
112+
type: 'number',
113+
validateOnMount: true,
114+
},
115+
{
116+
component: componentTypes.TEXT_FIELD,
117+
name: 'rxtx_factor',
118+
validate: [{
119+
type: validatorTypes.REQUIRED,
120+
message: __('Required'),
121+
},
122+
{
123+
type: validatorTypes.PATTERN_VALIDATOR,
124+
pattern: '^[-+]?[0-9]\\d*\\.?\\d*$',
125+
message: __('RXTX factor must be number'),
126+
},
127+
{
128+
type: validatorTypes.MIN_NUMBER_VALUE,
129+
value: 0,
130+
message: __('RXTX factor must be greater than or equal to 0'),
131+
}],
132+
label: __('RXTX factor'),
133+
type: 'number',
134+
validateOnMount: true,
135+
},
136+
{
137+
component: componentTypes.SWITCH,
138+
name: 'is_public',
139+
label: __('Public?'),
140+
assignFieldProvider: true,
141+
bsSize: 'mini',
142+
onText: __('True'),
143+
offText: __('False'),
144+
},
145+
{
146+
component: componentTypes.SELECT_COMPONENT,
147+
name: 'cloud_tenant_refs',
148+
options: cloudTenants.map(item => ({ label: item.name, value: item.ems_ref })),
149+
label: __('Cloud Tenant'),
150+
placeholder: __('Nothing selected'),
151+
multi: true,
152+
condition: {
153+
when: 'is_public',
154+
is: false,
155+
},
156+
isSearchable: true,
157+
isClearable: true,
158+
},
159+
];
160+
return { fields };
161+
}
162+
163+
export default addSchema;

‎app/javascript/components/flavor-form/flavor-form.jsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React, { Component } from 'react';
2+
import { Grid } from 'patternfly-react';
3+
import { sprintf } from 'sprintf-js';
4+
import addSchema from './add-form-schema';
5+
import MiqFormRenderer from '../../forms/data-driven-form';
6+
import { http, API } from '../../http_api';
7+
import { cleanVirtualDom } from '../../miq-component/helpers';
8+
import miqRedirectBack from '../../helpers/miq-redirect-back';
9+
10+
class FlavorForm extends Component {
11+
constructor(props) {
12+
super(props);
13+
this.state = {
14+
initialValues: { is_public: true, rxtx_factor: '1.0' },
15+
schema: addSchema(),
16+
};
17+
cleanVirtualDom();
18+
}
19+
20+
componentDidMount() {
21+
miqSparkleOn();
22+
Promise.all([http.get('/flavor/ems_list'), http.get('/flavor/cloud_tenants')])
23+
.then(([{ ems_list }, { cloud_tenants }]) => this.setState(prevState => ({
24+
initialValues: { ...prevState.initialValues, ems_id: ems_list[0].id },
25+
schema: addSchema(ems_list, cloud_tenants),
26+
emsList: ems_list,
27+
cloudTenants: cloud_tenants.map(item => ({ label: item.name, value: item.id })),
28+
})), miqSparkleOff());
29+
}
30+
31+
submitValues = (values) => {
32+
miqSparkleOn();
33+
const data = {
34+
...values,
35+
ems: this.state.emsList.find(({ id }) => id === values.ems_id),
36+
ems_id: '',
37+
};
38+
return API.post(`/api/providers/${values.ems_id}/flavors`, data)
39+
.then(response => this.getBack(response, values.name))
40+
.catch(err => console.log('err: ', err));
41+
};
42+
43+
getBack = (response, flavorName) => {
44+
let err = false;
45+
if (Object.prototype.hasOwnProperty.call(response, 'results')) {
46+
err = !response.results[0].success;
47+
}
48+
49+
if (err) {
50+
this.onError(response, flavorName);
51+
} else {
52+
this.nonError(flavorName);
53+
}
54+
}
55+
56+
onError = (response, flavorName) => {
57+
const url = '/flavor/show_list';
58+
const message = `${__('Unable to add Flavor ')}${flavorName} . ${response.results[0].message}`;
59+
miqRedirectBack(message, 'error', url);
60+
miqSparkleOff();
61+
}
62+
63+
nonError = (flavorName) => {
64+
const url = '/flavor/show_list';
65+
const message = sprintf(__('Add of Flavor "%s" was successfully initialized.'), flavorName);
66+
miqRedirectBack(message, 'success', url);
67+
}
68+
69+
cancelClicked = () => {
70+
miqSparkleOn();
71+
const message = __('Add of Flavor cancelled by user.');
72+
const url = '/flavor/show_list';
73+
miqRedirectBack(message, 'warn', url);
74+
}
75+
76+
render() {
77+
return (
78+
<Grid fluid>
79+
<MiqFormRenderer
80+
initialValues={this.state.initialValues}
81+
schema={this.state.schema}
82+
onSubmit={this.submitValues}
83+
onCancel={this.cancelClicked}
84+
buttonsLabels={{
85+
submitLabel: __('Add'),
86+
}}
87+
/>
88+
</Grid>
89+
);
90+
}
91+
}
92+
93+
export default FlavorForm;

‎app/javascript/helpers/miq-redirect-back.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* global miqFlashLater */
2+
3+
const miqRedirectBack = (message, flashType, redirectUrl) => {
4+
miqFlashLater({ message, level: flashType });
5+
window.location.href = redirectUrl;
6+
};
7+
8+
export default miqRedirectBack;

‎app/javascript/packs/component-definitions-common.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import MiqAboutModal from '../components/miq-about-modal';
99
import CloudTenantForm from '../components/cloud-tenant-form/cloud-tenant-form';
1010
import ServiceForm from '../components/service-form';
1111
import SetServiceOwnershipForm from '../components/set-service-ownership-form';
12+
import FlavorForm from '../components/flavor-form/flavor-form';
1213

1314
/**
1415
* Add component definitions to this file.
@@ -28,3 +29,4 @@ ManageIQ.component.addReact('MiqAboutModal', MiqAboutModal);
2829
ManageIQ.component.addReact('CloudTenantForm', CloudTenantForm);
2930
ManageIQ.component.addReact('ServiceForm', ServiceForm);
3031
ManageIQ.component.addReact('SetServiceOwnershipForm', SetServiceOwnershipForm);
32+
ManageIQ.component.addReact('FlavorForm', FlavorForm);

0 commit comments

Comments
 (0)