Add new options for migration throttling

ManageIQ · Mar 7, 2019 · c6092b9 · c6092b9
1 parent 55ee3b8
commit c6092b9
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 8 deletions.
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,7 +1,7 @@
 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';
 
 export class GeneralSettings extends React.Component {
@@ -27,10 +27,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>
+                  {__('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 +72,56 @@ export class GeneralSettings extends React.Component {
               </div>
             </Form.FormGroup>
             <Form.FormGroup>
+              <Form.ControlLabel className="col-md-4">
+                {__('Maximum concurrent migrations per provider')}
+              </Form.ControlLabel>
+              <div className="col-md-2">
+                <Field
+                  id="max_concurrent_tasks_per_provider"
+                  name="max_concurrent_tasks_per_provider"
+                  component={NumberInput}
+                  normalize={NumberInput.normalizeStringToInt}
+                  min={1}
+                />
+              </div>
+            </Form.FormGroup>
+            <div style={{ marginTop: '40px' }}>
+              <h3>{__('Resource Utilization Limits for Migrations')}</h3>
+            </div>
+            <Form.FormGroup>
+              <Form.ControlLabel className="col-md-4">
+                {__('Max CPU utilization per conversion host')}
+              </Form.ControlLabel>
+              <div className="col-md-2">
+                <Field
+                  id="max_concurrent_tasks_per_provider"
+                  name="max_concurrent_tasks_per_provider"
+                  component={NumberInput}
+                  normalize={NumberInput.normalizeStringToInt}
+                  min={0}
+                  max={100}
+                  postfix="%"
+                />
+              </div>
+            </Form.FormGroup>
+            <Form.FormGroup>
+              <Form.ControlLabel className="col-md-4">{__('Total network throughput')}</Form.ControlLabel>
+              <div className="col-md-2">
+                <div className="input-group">
+                  <input
+                    type="text"
+                    className="form-control"
+                    name="total_network_throughput"
+                    id="total_network_throughput"
+                  />
+                  <div className="input-group-addon">{__('MB/s')}</div>
+                </div>
+              </div>
+            </Form.FormGroup>
+            <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,17 @@ 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
+      min,
+      max,
+      postfix
     });
     // bootstrap-touchspin's change event doesn't trigger the rendered input's onChange.
     input.on('change', event => {
@@ -42,7 +46,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 = {