Gauge option form markup fixes

pkg/api/frontendsettings.go

@@ -186,16 +186,18 @@ func getPanelSort(id string) int {
 		sort = 1
 	case "singlestat":
 		sort = 2
-	case "table":
+	case "gauge":
 		sort = 3
-	case "text":
+	case "table":
 		sort = 4
-	case "heatmap":
+	case "text":
 		sort = 5
-	case "alertlist":
+	case "heatmap":
 		sort = 6
-	case "dashlist":
+	case "alertlist":
 		sort = 7
+	case "dashlist":
+		sort = 8
 	}
 	return sort
 }

public/app/core/components/Select/UnitPicker.tsx

@@ -3,7 +3,7 @@ import Select from './Select';
 import kbn from 'app/core/utils/kbn';
 
 interface Props {
-  onChange: (item: any) => {} | void;
+  onChange: (item: any) => void;
   defaultValue?: string;
   width?: number;
 }

public/app/plugins/panel/gauge/GaugeOptions.tsx

@@ -19,31 +19,27 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
 
     return (
       <div className="section gf-form-group">
-        <h5 className="page-heading">Gauge</h5>
-        <div className="gf-form-inline">
-          <Switch
-            label="Threshold labels"
-            labelClass="width-10"
-            checked={showThresholdLabels}
-            onChange={this.onToggleThresholdLabels}
-          />
-        </div>
-        <div className="gf-form-inline">
-          <Switch
-            label="Threshold markers"
-            labelClass="width-10"
-            checked={showThresholdMarkers}
-            onChange={this.onToggleThresholdMarkers}
-          />
-        </div>
-        <div className="gf-form-inline">
-          <Label width={6}>Min value</Label>
+        <h5 className="section-heading">Gauge</h5>
+        <div className="gf-form">
+          <Label width={8}>Min value</Label>
           <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
         </div>
-        <div className="gf-form-inline">
-          <Label width={6}>Max value</Label>
+        <div className="gf-form">
+          <Label width={8}>Max value</Label>
           <input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} value={maxValue} />
         </div>
+        <Switch
+          label="Show labels"
+          labelClass="width-8"
+          checked={showThresholdLabels}
+          onChange={this.onToggleThresholdLabels}
+        />
+        <Switch
+          label="Show markers"
+          labelClass="width-8"
+          checked={showThresholdMarkers}
+          onChange={this.onToggleThresholdMarkers}
+        />
       </div>
     );
   }

public/app/plugins/panel/gauge/MappingRow.tsx

@@ -62,69 +62,59 @@ export default class MappingRow extends PureComponent<Props, State> {
 
     if (type === MappingType.RangeToText) {
       return (
-        <div className="gf-form">
-          <div className="gf-form-inline mapping-row-input">
+        <>
+          <div className="gf-form">
             <Label width={4}>From</Label>
-            <div>
-              <input
-                className="gf-form-input"
-                value={from}
-                onBlur={this.updateMapping}
-                onChange={this.onMappingFromChange}
-              />
-            </div>
+            <input
+              className="gf-form-input width-8"
+              value={from}
+              onBlur={this.updateMapping}
+              onChange={this.onMappingFromChange}
+            />
           </div>
-          <div className="gf-form-inline mapping-row-input">
+          <div className="gf-form">
             <Label width={4}>To</Label>
-            <div>
-              <input
-                className="gf-form-input"
-                value={to}
-                onBlur={this.updateMapping}
-                onChange={this.onMappingToChange}
-              />
-            </div>
+            <input
+              className="gf-form-input width-8"
+              value={to}
+              onBlur={this.updateMapping}
+              onChange={this.onMappingToChange}
+            />
           </div>
-          <div className="gf-form-inline mapping-row-input">
+          <div className="gf-form">
             <Label width={4}>Text</Label>
-            <div>
-              <input
-                className="gf-form-input"
-                value={text}
-                onBlur={this.updateMapping}
-                onChange={this.onMappingTextChange}
-              />
-            </div>
+            <input
+              className="gf-form-input width-10"
+              value={text}
+              onBlur={this.updateMapping}
+              onChange={this.onMappingTextChange}
+            />
           </div>
-        </div>
+        </>
       );
     }
 
     return (
-      <div className="gf-form">
-        <div className="gf-form-inline mapping-row-input">
+      <>
+        <div className="gf-form">
           <Label width={4}>Value</Label>
-          <div>
-            <input
-              className="gf-form-input"
-              onBlur={this.updateMapping}
-              onChange={this.onMappingValueChange}
-              value={value}
-            />
-          </div>
+          <input
+            className="gf-form-input width-8"
+            onBlur={this.updateMapping}
+            onChange={this.onMappingValueChange}
+            value={value}
+          />
         </div>
-        <div className="gf-form-inline mapping-row-input">
+        <div className="gf-form gf-form--grow">
           <Label width={4}>Text</Label>
-          <div>
-            <input
-              className="gf-form-input"
-              onBlur={this.updateMapping}
-              value={text}
-              onChange={this.onMappingTextChange}
-            />
-          </div>
+          <input
+            className="gf-form-input"
+            onBlur={this.updateMapping}
+            value={text}
+            onChange={this.onMappingTextChange}
+          />
         </div>
-      </div>
+      </>
     );
   }
 
@@ -132,8 +122,8 @@ export default class MappingRow extends PureComponent<Props, State> {
     const { type } = this.state;
 
     return (
-      <div className="mapping-row">
-        <div className="gf-form-inline mapping-row-type">
+      <div className="gf-form-inline">
+        <div className="gf-form">
           <Label width={5}>Type</Label>
           <Select
             placeholder="Choose type"
@@ -144,9 +134,11 @@ export default class MappingRow extends PureComponent<Props, State> {
             width={7}
           />
         </div>
-        <div>{this.renderRow()}</div>
-        <div onClick={this.props.removeMapping} className="threshold-row-remove">
-          <i className="fa fa-times" />
+        {this.renderRow()}
+        <div className="gf-form">
+          <button onClick={this.props.removeMapping} className="gf-form-label gf-form-label--btn">
+            <i className="fa fa-times" />
+          </button>
         </div>
       </div>
     );

public/app/plugins/panel/gauge/Thresholds.tsx

@@ -210,7 +210,7 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
   render() {
     return (
       <div className="section gf-form-group">
-        <h5 className="page-heading">Thresholds</h5>
+        <h5 className="section-heading">Thresholds</h5>
         <span>Click the colored line to add a threshold</span>
         <div className="thresholds">
           <div className="color-indicators">

public/app/plugins/panel/gauge/ValueMappings.tsx

@@ -76,7 +76,7 @@ export default class ValueMappings extends PureComponent<OptionModuleProps, Stat
 
     return (
       <div className="section gf-form-group">
-        <h5 className="page-heading">Value mappings</h5>
+        <h5 className="section-heading">Value mappings</h5>
         <div>
           {mappings.length > 0 &&
             mappings.map((mapping, index) => (

public/app/plugins/panel/gauge/ValueOptions.tsx

@@ -40,8 +40,8 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> {
 
     return (
       <div className="section gf-form-group">
-        <h5 className="page-heading">Value</h5>
-        <div className="gf-form-inline">
+        <h5 className="section-heading">Value</h5>
+        <div className="gf-form">
           <Label width={labelWidth}>Stat</Label>
           <Select
             width={12}
@@ -50,11 +50,11 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> {
             value={statOptions.find(option => option.value === stat)}
           />
         </div>
-        <div className="gf-form-inline">
+        <div className="gf-form">
           <Label width={labelWidth}>Unit</Label>
           <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
         </div>
-        <div className="gf-form-inline">
+        <div className="gf-form">
           <Label width={labelWidth}>Decimals</Label>
           <input
             className="gf-form-input width-12"
@@ -64,11 +64,11 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> {
             onChange={this.onDecimalChange}
           />
         </div>
-        <div className="gf-form-inline">
+        <div className="gf-form">
           <Label width={labelWidth}>Prefix</Label>
           <input className="gf-form-input width-12" type="text" value={prefix || ''} onChange={this.onPrefixChange} />
         </div>
-        <div className="gf-form-inline">
+        <div className="gf-form">
           <Label width={labelWidth}>Suffix</Label>
           <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
         </div>

public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Render should render component 1`] = `
   className="section gf-form-group"
 >
   <h5
-    className="page-heading"
+    className="section-heading"
   >
     Value mappings
   </h5>

public/sass/components/_gf-form.scss

@@ -123,6 +123,15 @@ $input-border: 1px solid $input-border-color;
     padding-left: 0px;
   }
 
+  &--btn {
+    border-right: $input-btn-border-width solid $input-label-border-color;
+    border-radius: $border-radius;
+
+    &:hover {
+      background: $list-item-hover-bg;
+    }
+  }
+
   &:disabled {
     color: $text-color-weak;
   }

public/sass/components/_value-mappings.scss

@@ -3,14 +3,6 @@
   margin-bottom: 10px;
 }
 
-.mapping-row-type {
-  margin-right: 5px;
-}
-
-.mapping-row-input {
-  margin-right: 5px;
-}
-
 .add-mapping-row {
   display: flex;
   overflow: hidden;