Merge pull request #943 from mturley/throttling-settings-vertical-layout

Change layout of throttling settings form from horizontal to vertical
ManageIQ · Apr 23, 2019 · 5b85841 · 5b85841
2 parents 2d61f88 + fee3bee
commit 5b85841
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 17 deletions.
diff --git a/app/javascript/react/screens/App/Settings/Settings.scss b/app/javascript/react/screens/App/Settings/Settings.scss
@@ -2,6 +2,15 @@
  margin-bottom: 25px;
 }
 
+.migration-settings h3 {
+ margin-top: 40px;
+ margin-bottom: 15px;
+}
+
+.migration-settings label.control-label {
+ margin-bottom: 0;
+}
+
 .conversion-hosts-list .list-view-pf-main-info {
  padding: 10px 0;
 }

diff --git a/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js
@@ -62,12 +62,12 @@ export class GeneralSettings extends React.Component {
  return (
  <Spinner loading={isFetchingServers || isFetchingSettings} style={{ marginTop: 15 }}>
  <div className="migration-settings">
- <Form className="form-horizontal" style={{ padding: '0 20px' }}>
+ <Form className="form-vertical" style={{ padding: '0 20px' }}>
  <div>
  <h3>{__('Concurrent Migrations')}</h3>
  </div>
  <Form.FormGroup>
- <Form.ControlLabel className="col-md-5">
+ <Form.ControlLabel>
  <span className="pull-left">
  {__('Maximum concurrent migrations per conversion host')}
  <OverlayTrigger
@@ -80,13 +80,13 @@ export class GeneralSettings extends React.Component {
  trigger="click"
  rootClose
  >
- <Button bsStyle="link">
+ <Button bsStyle="link" style={{ paddingTop: 0, paddingBottom: 0 }}>
  <Icon type="pf" name="info" />
  </Button>
  </OverlayTrigger>
  </span>
  </Form.ControlLabel>
- <div className="col-md-2">
+ <div style={{ width: 150 }}>
  <Field
  id="max_concurrent_tasks_per_host"
  name="max_concurrent_tasks_per_host"
@@ -98,10 +98,10 @@ export class GeneralSettings extends React.Component {
  </div>
  </Form.FormGroup>
  <Form.FormGroup>
- <Form.ControlLabel className="col-md-5">
+ <Form.ControlLabel>
  <div className="pull-left">{__('Maximum concurrent migrations per provider')}</div>
  </Form.ControlLabel>
- <div className="col-md-2">
+ <div style={{ width: 150 }}>
  <Field
  id="max_concurrent_tasks_per_ems"
  name="max_concurrent_tasks_per_ems"
@@ -125,8 +125,9 @@ export class GeneralSettings extends React.Component {
  postfix="％"
  inputEnabledFunction={inputEnabledFunction}
  initialUncheckedValue="unlimited"
+ vertical
  />
- <Form.FormGroup className="col-md-1 pull-left" style={{ marginTop: '40px' }}>
+ <Form.FormGroup style={{ marginTop: '40px' }}>
  <Button
  bsStyle="primary"
  onClick={this.onApplyClick}

diff --git a/...App/Settings/screens/GeneralSettings/__tests__/__snapshots__/GeneralSettings.test.js.snap b/...App/Settings/screens/GeneralSettings/__tests__/__snapshots__/GeneralSettings.test.js.snap
@@ -18,7 +18,7 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
  >
  <Form
  bsClass="form"
- className="form-horizontal"
+ className="form-vertical"
  componentClass="form"
  horizontal={false}
  inline={false}
@@ -38,7 +38,6 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
  >
  <ControlLabel
  bsClass="control-label"
- className="col-md-5"
  srOnly={false}
  >
  <span
@@ -66,6 +65,12 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
  bsClass="btn"
  bsStyle="link"
  disabled={false}
+ style={
+ Object {
+ "paddingBottom": 0,
+ "paddingTop": 0,
+ }
+ }
  >
  <Icon
  name="info"
@@ -76,7 +81,11 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
  </span>
  </ControlLabel>
  <div
- className="col-md-2"
+ style={
+ Object {
+ "width": 150,
+ }
+ }
  >
  <Field
  component={[Function]}
@@ -93,7 +102,6 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
  >
  <ControlLabel
  bsClass="control-label"
- className="col-md-5"
  srOnly={false}
  >
  <div
@@ -103,7 +111,11 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
  </div>
  </ControlLabel>
  <div
- className="col-md-2"
+ style={
+ Object {
+ "width": 150,
+ }
+ }
  >
  <Field
  component={[Function]}
@@ -132,10 +144,10 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
  name="cpu_limit_per_host"
  postfix="％"
  validate={[Function]}
+ vertical={true}
  />
  <FormGroup
  bsClass="form-group"
- className="col-md-1 pull-left"
  style={
  Object {
  "marginTop": "40px",

diff --git a/app/javascript/react/screens/App/common/forms/TextInputWithCheckbox.js b/app/javascript/react/screens/App/common/forms/TextInputWithCheckbox.js
@@ -11,7 +11,7 @@ class TextInputWithCheckbox extends React.Component {
  }
 
  render() {
- const { id, label, input, postfix, initialUncheckedValue, meta } = this.props;
+ const { id, label, input, postfix, initialUncheckedValue, meta, vertical } = this.props;
 
  const onCheckboxChange = event => {
  if (event.target.checked) {
@@ -28,7 +28,7 @@ class TextInputWithCheckbox extends React.Component {
 
  return (
  <Form.FormGroup validationState={meta.error ? 'error' : undefined}>
- <Form.ControlLabel className="col-md-5">
+ <Form.ControlLabel className={vertical ? '' : 'col-md-5'}>
  <div className="checkbox-inline pull-left">
  <label>
  <input
@@ -42,7 +42,7 @@ class TextInputWithCheckbox extends React.Component {
  </label>
  </div>
  </Form.ControlLabel>
- <div className="col-md-2">
+ <div className={vertical ? '' : 'col-md-2'} style={{ width: vertical ? '150px' : 'auto' }}>
  <InputGroup>
  <FormControl type="text" name={id} id={id} readOnly={!this.state.inputEnabled} {...input} />
  <InputGroup.Addon>{postfix}</InputGroup.Addon>
@@ -64,7 +64,8 @@ TextInputWithCheckbox.propTypes = {
  postfix: PropTypes.string,
  inputEnabledFunction: PropTypes.func.isRequired,
  initialUncheckedValue: PropTypes.string,
- meta: PropTypes.object
+ meta: PropTypes.object,
+ vertical: PropTypes.bool
 };
 
 export default TextInputWithCheckbox;