From be5297f1e55c0d90dafcad34f17948b603c6e280 Mon Sep 17 00:00:00 2001 From: Milan Zazrivec Date: Wed, 6 Mar 2019 17:49:44 +0100 Subject: [PATCH] Add new options for migration throttling --- .../react/screens/App/Settings/Settings.scss | 5 ++ .../react/screens/App/Settings/helpers.js | 10 ++- .../GeneralSettings/GeneralSettings.js | 77 +++++++++++++++++-- .../screens/App/common/forms/NumberInput.js | 13 +++- .../App/common/forms/TextInputWithCheckbox.js | 45 +++++++++++ 5 files changed, 140 insertions(+), 10 deletions(-) create mode 100644 app/javascript/react/screens/App/common/forms/TextInputWithCheckbox.js diff --git a/app/javascript/react/screens/App/Settings/Settings.scss b/app/javascript/react/screens/App/Settings/Settings.scss index c26302c5aa..ea7e7030c8 100644 --- a/app/javascript/react/screens/App/Settings/Settings.scss +++ b/app/javascript/react/screens/App/Settings/Settings.scss @@ -5,3 +5,8 @@ .conversion-hosts-list .list-view-pf-main-info { padding: 10px 0; } + +.postfix-label { + background-color: #fafafa; + border-left-width: 0px; +} diff --git a/app/javascript/react/screens/App/Settings/helpers.js b/app/javascript/react/screens/App/Settings/helpers.js index 2d608b2649..c29080fa17 100644 --- a/app/javascript/react/screens/App/Settings/helpers.js +++ b/app/javascript/react/screens/App/Settings/helpers.js @@ -1,11 +1,17 @@ export const getFormValuesFromApiSettings = payload => ({ - max_concurrent_tasks_per_host: payload.transformation.limits.max_concurrent_tasks_per_host + max_concurrent_tasks_per_host: payload.transformation.limits.max_concurrent_tasks_per_host, + max_concurrent_tasks_per_ems: payload.transformation.limits.max_concurrent_tasks_per_ems, + cpu_limit_per_host: payload.transformation.limits.cpu_limit_per_host, + network_limit_per_host: payload.transformation.limits.network_limit_per_host }); export const getApiSettingsFromFormValues = values => ({ transformation: { limits: { - max_concurrent_tasks_per_host: values.max_concurrent_tasks_per_host + max_concurrent_tasks_per_host: values.max_concurrent_tasks_per_host, + max_concurrent_tasks_per_ems: values.max_concurrent_tasks_per_ems, + cpu_limit_per_host: values.cpu_limit_per_host, + network_limit_per_host: values.network_limit_per_host } } }); diff --git a/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js index ffb7f70a6c..eba04f3143 100644 --- a/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js +++ b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js @@ -1,8 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { reduxForm, Field } from 'redux-form'; -import { Form, Button, Spinner } from 'patternfly-react'; +import { Form, Button, Icon, OverlayTrigger, Popover, Spinner } from 'patternfly-react'; import NumberInput from '../../../common/forms/NumberInput'; +import TextInputWithCheckbox from '../../../common/forms/TextInputWithCheckbox'; export class GeneralSettings extends React.Component { componentDidMount() { @@ -27,10 +28,41 @@ export class GeneralSettings extends React.Component { return (
-
+ +
+

{__('Concurrent Migrations')}

+
- {__('Maximum concurrent migrations per conversion host')} -
+ + + {__('Maximum concurrent migrations per conversion host')} + + {__( + 'For VDDK transformations the maximum concurrent migrations per conversion host is limited to 20. See the product documentation for more information.' + )} + + } + placement="top" + trigger={['hover']} + delay={500} + rootClose={false} + > + + + + +
+ +
+ {__('Maximum concurrent migrations per provider')} +
+ +
+ +
+ + +
+

{__('Resource Utilization Limits for Migrations')}

+
+ + + -
{isSavingSettings && (
diff --git a/app/javascript/react/screens/App/common/forms/NumberInput.js b/app/javascript/react/screens/App/common/forms/NumberInput.js index 651be9e16b..7d2cc4efdb 100644 --- a/app/javascript/react/screens/App/common/forms/NumberInput.js +++ b/app/javascript/react/screens/App/common/forms/NumberInput.js @@ -7,13 +7,18 @@ class NumberInput extends React.Component { const { id, input: { onChange }, - min + min, + max, + postfix } = this.props; const input = $(`#${id}`); input.TouchSpin({ buttondown_class: 'btn btn-default', buttonup_class: 'btn btn-default', - min + postfix_extraclass: 'postfix-label', + min, + max, + postfix }); // bootstrap-touchspin's change event doesn't trigger the rendered input's onChange. input.on('change', event => { @@ -42,7 +47,9 @@ NumberInput.propTypes = { value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), onChange: PropTypes.func }), - min: PropTypes.number + min: PropTypes.number, + max: PropTypes.number, + postfix: PropTypes.string }; NumberInput.defaultProps = { diff --git a/app/javascript/react/screens/App/common/forms/TextInputWithCheckbox.js b/app/javascript/react/screens/App/common/forms/TextInputWithCheckbox.js new file mode 100644 index 0000000000..7e72e3f5c8 --- /dev/null +++ b/app/javascript/react/screens/App/common/forms/TextInputWithCheckbox.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Form } from 'patternfly-react'; + +class TextInputWithCheckbox extends React.Component { + render() { + const { + id, + label, + input: { value }, + postfix + } = this.props; + return ( + + +
+ +
+ +
+
+ +
{postfix}
+
+
+ + ); + } +} + +TextInputWithCheckbox.propTypes = { + id: PropTypes.string.isRequired, + input: PropTypes.shape({ + value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) + }), + label: PropTypes.string.isRequired, + postfix: PropTypes.string +}; + +TextInputWithCheckbox.normalizeStringToInt = str => (str && parseInt(str.replace(/\D/g, ''), 10)) || 0; + +export default TextInputWithCheckbox;