Add new options for migration throttling

ManageIQ · Mar 8, 2019 · be5297f · be5297f
1 parent 3f58aea
commit be5297f
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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 (
       <Spinner loading={isFetchingServers || isFetchingSettings} style={{ marginTop: 15 }}>
         <div className="migration-settings">
-          <Form style={{ padding: '0 20px' }}>
+          <Form className="form-horizontal" style={{ padding: '0 20px' }}>
+            <div>
+              <h3>{__('Concurrent Migrations')}</h3>
+            </div>
             <Form.FormGroup>
-              <Form.ControlLabel>{__('Maximum concurrent migrations per conversion host')}</Form.ControlLabel>
-              <div style={{ width: 100 }}>
+              <Form.ControlLabel className="col-md-4">
+                <span className="pull-left">
+                  {__('Maximum concurrent migrations per conversion host')}
+                  <OverlayTrigger
+                    overlay={
+                      <Popover id="maximum_concurrect_migrations_per_provider_popover">
+                        {__(
+                          'For VDDK transformations the maximum concurrent migrations per conversion host is limited to 20. See the product documentation for more information.'
+                        )}
+                      </Popover>
+                    }
+                    placement="top"
+                    trigger={['hover']}
+                    delay={500}
+                    rootClose={false}
+                  >
+                    <Icon
+                      type="pf"
+                      name="info"
+                      size="md"
+                      style={{
+                        width: 'inherit',
+                        backgroundColor: 'transparent',
+                        padding: 10
+                      }}
+                    />
+                  </OverlayTrigger>
+                </span>
+              </Form.ControlLabel>
+              <div className="col-md-2">
                 <Field
                   id="max_concurrent_tasks_per_host"
                   name="max_concurrent_tasks_per_host"
@@ -41,10 +73,45 @@ export class GeneralSettings extends React.Component {
               </div>
             </Form.FormGroup>
             <Form.FormGroup>
+              <Form.ControlLabel className="col-md-4">
+                <div className="pull-left">
+                  {__('Maximum concurrent migrations per provider')}
+                </div>
+              </Form.ControlLabel>
+              <div className="col-md-2">
+                <Field
+                  id="max_concurrent_tasks_per_ems"
+                  name="max_concurrent_tasks_per_ems"
+                  component={NumberInput}
+                  normalize={NumberInput.normalizeStringToInt}
+                  min={1}
+                />
+              </div>
+            </Form.FormGroup>
+            <Form.FormGroup />
+            <div>
+              <h3>{__('Resource Utilization Limits for Migrations')}</h3>
+            </div>
+            <Field
+              id="cpu_limit_per_host"
+              name="cpu_limit_per_host"
+              component={TextInputWithCheckbox}
+              normalize={TextInputWithCheckbox.normalizeStringToInt}
+              label={__('Max CPU utilization per conversion host')}
+              postfix="％"
+            />
+            <Field
+              id="network_limit_per_host"
+              name="network_limit_per_host"
+              component={TextInputWithCheckbox}
+              normalize={TextInputWithCheckbox.normalizeStringToInt}
+              label={__('Total network throughput')}
+              postfix={__('MB/s')}
+            />
+            <Form.FormGroup className="col-md-1 pull-left" style={{ marginTop: '40px' }}>
               <Button bsStyle="primary" onClick={this.onApplyClick} disabled={!hasUnsavedChanges || isSavingSettings}>
                 {__('Apply')}
               </Button>
-              <br />
               {isSavingSettings && (
                 <div style={{ paddingTop: 10 }}>
                   <Spinner loading size="xs" inline />

diff --git 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
@@ -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 (
+      <Form.FormGroup>
+        <Form.ControlLabel className="col-md-4">
+          <div className="checkbox-inline pul-left">
+            <label>
+              <input type="checkbox" name={`${id}_checkbox`} id={`${id}_checkbox`} />
+              {label}
+            </label>
+          </div>
+        </Form.ControlLabel>
+        <div className="col-md-2">
+          <div className="input-group">
+            <input type="text" className="form-control" name={id} id={id} value={value} />
+            <div className="input-group-addon postfix-label">{postfix}</div>
+          </div>
+        </div>
+      </Form.FormGroup>
+    );
+  }
+}
+
+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;