moving min/max to gauge options

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

@@ -1,14 +1,19 @@
 import React, { PureComponent } from 'react';
 import { Switch } from 'app/core/components/Switch/Switch';
 import { OptionModuleProps } from './module';
+import { Label } from '../../../core/components/Label/Label';
 
 export default class GaugeOptions extends PureComponent<OptionModuleProps> {
-  toggleThresholdLabels = () =>
+  onToggleThresholdLabels = () =>
     this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
 
-  toggleThresholdMarkers = () =>
+  onToggleThresholdMarkers = () =>
     this.props.onChange({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers });
 
+  onMinValueChange = ({ target }) => this.props.onChange({ ...this.props.options, minValue: target.value });
+
+  onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
+
   render() {
     const { showThresholdLabels, showThresholdMarkers } = this.props.options;
 
@@ -20,7 +25,7 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
             label="Threshold labels"
             labelClass="width-10"
             checked={showThresholdLabels}
-            onChange={this.toggleThresholdLabels}
+            onChange={this.onToggleThresholdLabels}
           />
         </div>
         <div className="gf-form-inline">
@@ -28,9 +33,17 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
             label="Threshold markers"
             labelClass="width-10"
             checked={showThresholdMarkers}
-            onChange={this.toggleThresholdMarkers}
+            onChange={this.onToggleThresholdMarkers}
           />
         </div>
+        <div className="gf-form-inline">
+          <Label width={6}>Min value</Label>
+          <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} />
+        </div>
+        <div className="gf-form-inline">
+          <Label width={6}>Max value</Label>
+          <input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} />
+        </div>
       </div>
     );
   }

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

@@ -169,22 +169,20 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
       const rowStyle = classNames({
         'threshold-row': true,
         'threshold-row-min': index === 0,
-        'threshold-row-max': index === thresholds.length - 1,
       });
 
       return (
         <div className={rowStyle} key={`${threshold.index}-${index}`}>
           <div className="threshold-row-inner">
             <div className="threshold-row-color">
-              {threshold.color &&
-                index !== thresholds.length - 1 && (
-                  <div className="threshold-row-color-inner">
-                    <ColorPicker
-                      color={threshold.color}
-                      onChange={color => this.onChangeThresholdColor(threshold, color)}
-                    />
-                  </div>
-                )}
+              {threshold.color && (
+                <div className="threshold-row-color-inner">
+                  <ColorPicker
+                    color={threshold.color}
+                    onChange={color => this.onChangeThresholdColor(threshold, color)}
+                  />
+                </div>
+              )}
             </div>
             <input
               className="threshold-row-input"