From dbba523d3b5b8782ca7b1e364e192054e5fb81e5 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 12 Dec 2018 16:16:05 +0100
Subject: [PATCH 01/15] mixing color when

---
 public/app/plugins/panel/gauge/Thresholds.tsx | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index 9e9856b137b..ed2d947e268 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames/bind';
+import tinycolor from 'tinycolor2';
 import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker';
 import { OptionModuleProps } from './module';
 import { Threshold } from 'app/types';
@@ -21,7 +22,7 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     this.state = {
       thresholds: this.props.options.thresholds || [
         { index: 0, label: 'Min', value: 0, canRemove: false, color: BasicGaugeColor.Green },
-        { index: 1, label: 'Max', value: 100, canRemove: false },
+        { index: 1, label: 'Max', value: 100, canRemove: false, color: BasicGaugeColor.Red },
       ],
     };
   }
@@ -39,12 +40,13 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
 
     // Setting value to a value between the new threshold.
     const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
+    const color = tinycolor.mix(thresholds[index - 1].color, thresholds[index].color, 50).toRgbString();
 
     this.setState(
       {
         thresholds: this.sortThresholds([
           ...newThresholds,
-          { index: index, label: '', value: value, canRemove: true, color: BasicGaugeColor.Orange },
+          { index: index, label: '', value: value, canRemove: true, color: color },
         ]),
       },
       () => this.updateGauge()
@@ -127,7 +129,6 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     const { thresholds } = this.state;
 
     const min = thresholds[0];
-    const max = thresholds[1];
 
     return [
       <div className="threshold-row threshold-row-min" key="min">
@@ -154,18 +155,6 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
           <div className="threshold-row-add-label">Add new threshold by clicking the line.</div>
         </div>
       </div>,
-      <div className="threshold-row threshold-row-max" key="max">
-        <div className="threshold-row-inner">
-          <div className="threshold-row-color" />
-          <input
-            className="threshold-row-input"
-            onBlur={this.onBlur}
-            onChange={event => this.onChangeThresholdValue(event, max)}
-            value={max.value}
-          />
-          <div className="threshold-row-label">{max.label}</div>
-        </div>
-      </div>,
     ];
   }
 
@@ -173,6 +162,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     const { thresholds } = this.state;
 
     return thresholds.map((threshold, index) => {
+      if (index === thresholds.length - 1) {
+        return null;
+      }
+
       const rowStyle = classNames({
         'threshold-row': true,
         'threshold-row-min': index === 0,
@@ -183,14 +176,15 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
         <div className={rowStyle} key={`${threshold.index}-${index}`}>
           <div className="threshold-row-inner">
             <div className="threshold-row-color">
-              {threshold.color && (
-                <div className="threshold-row-color-inner">
-                  <ColorPicker
-                    color={threshold.color}
-                    onChange={color => this.onChangeThresholdColor(threshold, color)}
-                  />
-                </div>
-              )}
+              {threshold.color &&
+                index !== thresholds.length - 1 && (
+                  <div className="threshold-row-color-inner">
+                    <ColorPicker
+                      color={threshold.color}
+                      onChange={color => this.onChangeThresholdColor(threshold, color)}
+                    />
+                  </div>
+                )}
             </div>
             <input
               className="threshold-row-input"
@@ -288,6 +282,7 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
 
   render() {
     const { thresholds } = this.state;
+    const max = thresholds[thresholds.length - 1];
 
     return (
       <div className="section gf-form-group">
@@ -296,6 +291,18 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
           <div className="color-indicators">{this.renderIndicator()}</div>
           <div className="threshold-rows">
             {thresholds.length > 2 ? this.renderThresholds() : this.renderNoThresholds()}
+            <div className="threshold-row threshold-row-max">
+              <div className="threshold-row-inner">
+                <div className="threshold-row-color" />
+                <input
+                  className="threshold-row-input"
+                  onBlur={this.onBlur}
+                  onChange={event => this.onChangeThresholdValue(event, max)}
+                  value={max.value}
+                />
+                <div className="threshold-row-label">{max.label}</div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

From 1f533ddfe27b6e09cd6d7b4b593cb0a9aa8b1087 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 12 Dec 2018 16:20:47 +0100
Subject: [PATCH 02/15] fixing tests

---
 .../app/plugins/panel/gauge/Threshold.test.tsx | 18 +++++++++---------
 public/app/plugins/panel/gauge/Thresholds.tsx  |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/public/app/plugins/panel/gauge/Threshold.test.tsx
index 65691315b25..883d950ccbc 100644
--- a/public/app/plugins/panel/gauge/Threshold.test.tsx
+++ b/public/app/plugins/panel/gauge/Threshold.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Thresholds from './Thresholds';
+import Thresholds, { BasicGaugeColor } from './Thresholds';
 import { OptionsProps } from './module';
 import { PanelOptionsProps } from '../../../types';
 
@@ -16,9 +16,9 @@ const setup = (propOverrides?: object) => {
 };
 
 const thresholds = [
-  { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
+  { index: 0, label: 'Min', value: 0, canRemove: false, color: BasicGaugeColor.Green },
   { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-  { index: 2, label: 'Max', value: 100, canRemove: false },
+  { index: 2, label: 'Max', value: 100, canRemove: false, color: BasicGaugeColor.Red },
 ];
 
 describe('Add threshold', () => {
@@ -28,9 +28,9 @@ describe('Add threshold', () => {
     instance.onAddThreshold(1);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
-      { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 2, label: 'Max', value: 100, canRemove: false },
+      { index: 0, label: 'Min', value: 0, canRemove: false, color: BasicGaugeColor.Green },
+      { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(131, 123, 52, 0.99)' },
+      { index: 2, label: 'Max', value: 100, canRemove: false, color: BasicGaugeColor.Red },
     ]);
   });
 
@@ -42,10 +42,10 @@ describe('Add threshold', () => {
     instance.onAddThreshold(1);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
-      { index: 1, label: '', value: 25, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
+      { index: 0, label: 'Min', value: 0, canRemove: false, color: BasicGaugeColor.Green },
+      { index: 1, label: '', value: 25, canRemove: true, color: 'rgba(144, 151, 43, 0.93)' },
       { index: 2, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 3, label: 'Max', value: 100, canRemove: false },
+      { index: 3, label: 'Max', value: 100, canRemove: false, color: BasicGaugeColor.Red },
     ]);
   });
 });
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index ed2d947e268..b1a46ecbc36 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -9,7 +9,7 @@ interface State {
   thresholds: Threshold[];
 }
 
-enum BasicGaugeColor {
+export enum BasicGaugeColor {
   Green = 'rgba(50, 172, 45, 0.97)',
   Orange = 'rgba(237, 129, 40, 0.89)',
   Red = 'rgb(212, 74, 58)',

From 8615de8119d7b7615fd9cc7bdf19bbe3d2567da4 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 13 Dec 2018 11:16:31 +0100
Subject: [PATCH 03/15] moving min/max to gauge options

---
 .../app/plugins/panel/gauge/GaugeOptions.tsx  | 21 +++++++++++++++----
 public/app/plugins/panel/gauge/Thresholds.tsx | 18 +++++++---------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptions.tsx
index ec3330ad62e..82e68a7a313 100644
--- a/public/app/plugins/panel/gauge/GaugeOptions.tsx
+++ b/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>
     );
   }
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index b1a46ecbc36..cb9ba022ad8 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/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"

From 234095e6df72fae1535a1489ec8ec699f1addffd Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 13 Dec 2018 16:46:10 +0100
Subject: [PATCH 04/15] starting with threshold refactor

---
 .../app/plugins/panel/gauge/GaugeOptions.tsx  |  6 +-
 public/app/plugins/panel/gauge/Thresholds.tsx | 91 ++++++-------------
 public/app/plugins/panel/gauge/module.tsx     | 12 ++-
 public/app/viz/Gauge.tsx                      | 60 ++++++++----
 public/sass/components/_thresholds.scss       |  2 +-
 5 files changed, 86 insertions(+), 85 deletions(-)

diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptions.tsx
index 82e68a7a313..3a3d7cdeede 100644
--- a/public/app/plugins/panel/gauge/GaugeOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptions.tsx
@@ -15,7 +15,7 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
   onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
 
   render() {
-    const { showThresholdLabels, showThresholdMarkers } = this.props.options;
+    const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = this.props.options;
 
     return (
       <div className="section gf-form-group">
@@ -38,11 +38,11 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
         </div>
         <div className="gf-form-inline">
           <Label width={6}>Min value</Label>
-          <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} />
+          <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>
-          <input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} />
+          <input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} value={maxValue} />
         </div>
       </div>
     );
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index 84daa0dba76..d2e04323db4 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -88,6 +88,7 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     );
   };
 
+  onChangeBaseColor = color => this.props.onChange({ ...this.props.options, baseColor: color });
   onBlur = () => {
     this.setState(prevState => ({
       thresholds: this.sortThresholds(prevState.thresholds),
@@ -116,47 +117,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     return index < thresholds.length ? thresholds[index].color : BasicGaugeColor.Red;
   };
 
-  renderNoThresholds() {
-    const { thresholds } = this.state;
-
-    const min = thresholds[0];
-
-    return [
-      <div className="threshold-row threshold-row-min" key="min">
-        <div className="threshold-row-inner">
-          <div className="threshold-row-color">
-            <div className="threshold-row-color-inner">
-              <ColorPicker color={min.color} onChange={color => this.onChangeThresholdColor(min, color)} />
-            </div>
-          </div>
-          <input
-            className="threshold-row-input"
-            onBlur={this.onBlur}
-            onChange={event => this.onChangeThresholdValue(event, min)}
-            value={min.value}
-          />
-          <div className="threshold-row-label">{min.label}</div>
-        </div>
-      </div>,
-      <div className="threshold-row" key="add">
-        <div className="threshold-row-inner">
-          <div onClick={() => this.onAddThreshold(1)} className="threshold-row-add">
-            <i className="fa fa-plus" />
-          </div>
-          <div className="threshold-row-add-label">Add new threshold by clicking the line.</div>
-        </div>
-      </div>,
-    ];
-  }
-
   renderThresholds() {
     const { thresholds } = this.state;
 
     return thresholds.map((threshold, index) => {
-      if (index === thresholds.length - 1) {
-        return null;
-      }
-
       const rowStyle = classNames({
         'threshold-row': true,
         'threshold-row-min': index === 0,
@@ -182,13 +146,9 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
               value={threshold.value}
               onBlur={this.onBlur}
             />
-            {threshold.canRemove ? (
-              <div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove">
-                <i className="fa fa-times" />
-              </div>
-            ) : (
-              <div className="threshold-row-label">{threshold.label}</div>
-            )}
+            <div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove">
+              <i className="fa fa-times" />
+            </div>
           </div>
         </div>
       );
@@ -260,38 +220,47 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
   renderIndicator() {
     const { thresholds } = this.state;
 
-    return thresholds.map((t, i) => {
-      if (i <= thresholds.length - 1) {
-        return this.renderIndicatorSection(i);
-      }
+    if (thresholds.length > 0) {
+      return thresholds.map((t, i) => {
+        if (i <= thresholds.length - 1) {
+          return this.renderIndicatorSection(i);
+        }
 
-      return null;
-    });
+        return null;
+      });
+    }
+
+    return (
+      <div className="indicator-section" style={{ height: '100%' }}>
+        <div
+          onClick={() => this.onAddThreshold(0)}
+          style={{ height: '100%', backgroundColor: this.props.options.baseColor }}
+        />
+      </div>
+    );
   }
 
   render() {
     const { thresholds } = this.state;
-    const max = thresholds[thresholds.length - 1];
 
     return (
       <div className="section gf-form-group">
         <h5 className="page-heading">Thresholds</h5>
+        <span>Click the colored line to add a threshold</span>
         <div className="thresholds">
           <div className="color-indicators">{this.renderIndicator()}</div>
           <div className="threshold-rows">
-            {thresholds.length > 2 ? this.renderThresholds() : this.renderNoThresholds()}
-            <div className="threshold-row threshold-row-max">
+            <div className="threshold-row threshold-row-base">
               <div className="threshold-row-inner">
-                <div className="threshold-row-color" />
-                <input
-                  className="threshold-row-input"
-                  onBlur={this.onBlur}
-                  onChange={event => this.onChangeThresholdValue(event, max)}
-                  value={max.value}
-                />
-                <div className="threshold-row-label">{max.label}</div>
+                <div className="threshold-row-color">
+                  <div className="threshold-row-color-inner">
+                    <ColorPicker color={BasicGaugeColor.Green} onChange={color => this.onChangeBaseColor(color)} />
+                  </div>
+                </div>
+                <div className="threshold-row-label">Base</div>
               </div>
             </div>
+            {thresholds.length > 0 && this.renderThresholds()}
           </div>
         </div>
       </div>
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 84579a77343..9e0370394b4 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -16,15 +16,18 @@ import {
 } from 'app/types';
 
 export interface OptionsProps {
+  baseColor: string;
   decimals: number;
+  mappings: Array<RangeMap | ValueMap>;
+  maxValue: number;
+  minValue: number;
   prefix: string;
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
   stat: string;
   suffix: string;
-  unit: string;
   thresholds: Threshold[];
-  mappings: Array<RangeMap | ValueMap>;
+  unit: string;
 }
 
 export interface OptionModuleProps {
@@ -34,6 +37,7 @@ export interface OptionModuleProps {
 
 export const defaultProps = {
   options: {
+    baseColor: BasicGaugeColor.Green,
     minValue: 0,
     maxValue: 100,
     prefix: '',
@@ -45,8 +49,8 @@ export const defaultProps = {
     unit: '',
     mappings: [],
     thresholds: [
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: BasicGaugeColor.Green },
-      { index: 1, label: 'Max', value: 100, canRemove: false },
+      { index: 0, value: 0, color: BasicGaugeColor.Green, label: 'Min', canRemove: false },
+      { index: 1, value: 100, color: BasicGaugeColor.Red, label: 'Max', canRemove: false },
     ],
   },
 };
diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index d918752f287..7afa512a00f 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -1,10 +1,11 @@
 import React, { PureComponent } from 'react';
 import $ from 'jquery';
-import { MappingType, RangeMap, Threshold, TimeSeriesVMs, ValueMap } from 'app/types';
+import { BasicGaugeColor, MappingType, RangeMap, Threshold, TimeSeriesVMs, ValueMap } from 'app/types';
 import config from '../core/config';
 import kbn from '../core/utils/kbn';
 
 interface Props {
+  baseColor: string;
   decimals: number;
   height: number;
   mappings: Array<RangeMap | ValueMap>;
@@ -25,6 +26,7 @@ export class Gauge extends PureComponent<Props> {
   canvasElement: any;
 
   static defaultProps = {
+    baseColor: BasicGaugeColor.Green,
     maxValue: 100,
     mappings: [],
     minValue: 0,
@@ -32,11 +34,9 @@ export class Gauge extends PureComponent<Props> {
     showThresholdMarkers: true,
     showThresholdLabels: false,
     suffix: '',
-    thresholds: [
-      { label: 'Min', value: 0, color: 'rgba(50, 172, 45, 0.97)' },
-      { label: 'Max', value: 100, color: 'rgba(245, 54, 54, 0.9)' },
-    ],
+    thresholds: [{ value: 0, color: BasicGaugeColor.Green }, { value: 100, color: BasicGaugeColor.Red }],
     unit: 'none',
+    stat: 'avg',
   };
 
   componentDidMount() {
@@ -92,12 +92,43 @@ export class Gauge extends PureComponent<Props> {
     return `${prefix} ${formattedValue} ${suffix}`;
   }
 
+  getFontColor(value) {
+    const { baseColor, thresholds } = this.props;
+
+    if (thresholds.length > 0) {
+      const foo = thresholds.filter(t => value <= t.value);
+
+      if (foo.length > 0) {
+        return foo[0].color;
+      }
+    }
+
+    return baseColor;
+  }
+
   draw() {
-    const { timeSeries, showThresholdLabels, showThresholdMarkers, thresholds, width, height, stat } = this.props;
+    const {
+      maxValue,
+      minValue,
+      timeSeries,
+      showThresholdLabels,
+      showThresholdMarkers,
+      thresholds,
+      width,
+      height,
+      stat,
+    } = this.props;
+
+    let value: string | number = '';
+
+    if (timeSeries[0]) {
+      value = timeSeries[0].stats[stat];
+    } else {
+      value = 'N/A';
+    }
 
     const dimension = Math.min(width, height * 1.3);
     const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
-    const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)';
     const fontScale = parseInt('80', 10) / 100;
     const fontSize = Math.min(dimension / 5, 100) * fontScale;
     const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
@@ -113,12 +144,14 @@ export class Gauge extends PureComponent<Props> {
       };
     });
 
+    console.log(formattedThresholds);
+
     const options = {
       series: {
         gauges: {
           gauge: {
-            min: thresholds[0].value,
-            max: thresholds[thresholds.length - 1].value,
+            min: minValue,
+            max: maxValue,
             background: { color: backgroundColor },
             border: { color: null },
             shadow: { show: false },
@@ -139,10 +172,10 @@ export class Gauge extends PureComponent<Props> {
             width: thresholdMarkersWidth,
           },
           value: {
-            color: fontColor,
+            color: this.getFontColor(value),
             formatter: () => {
               if (timeSeries[0]) {
-                return this.formatValue(timeSeries[0].stats[stat]);
+                return this.formatValue(value);
               }
 
               return '';
@@ -157,11 +190,6 @@ export class Gauge extends PureComponent<Props> {
       },
     };
 
-    let value: string | number = 'N/A';
-    if (timeSeries.length) {
-      value = timeSeries[0].stats[stat];
-    }
-
     const plotSeries = {
       data: [[0, value]],
     };
diff --git a/public/sass/components/_thresholds.scss b/public/sass/components/_thresholds.scss
index 5e516278b3e..5935c120ced 100644
--- a/public/sass/components/_thresholds.scss
+++ b/public/sass/components/_thresholds.scss
@@ -65,7 +65,7 @@
   padding: 5px 8px;
 }
 
-.threshold-row-min {
+.threshold-row-base {
   margin-top: -22px;
 }
 

From 3662f1c0072abacff88342b47891f9c55cb06b3a Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 14 Dec 2018 13:23:22 +0100
Subject: [PATCH 05/15] getting closer with no thresholds

---
 public/app/plugins/panel/gauge/Thresholds.tsx |  4 ++-
 public/app/plugins/panel/gauge/module.tsx     |  5 +---
 public/app/types/panel.ts                     |  5 ++--
 public/app/viz/Gauge.tsx                      | 29 ++++++++++---------
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index d2e04323db4..e27dba7f400 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -29,8 +29,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
       return threshold;
     });
 
-    // Setting value to a value between the new threshold.
+    // Setting value to a value between the previous thresholds
     const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
+
+    // Set a color that lies between the previous thresholds
     const color = tinycolor.mix(thresholds[index - 1].color, thresholds[index].color, 50).toRgbString();
 
     this.setState(
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 9e0370394b4..152e7c20b5e 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -48,10 +48,7 @@ export const defaultProps = {
     stat: '',
     unit: '',
     mappings: [],
-    thresholds: [
-      { index: 0, value: 0, color: BasicGaugeColor.Green, label: 'Min', canRemove: false },
-      { index: 1, value: 100, color: BasicGaugeColor.Red, label: 'Max', canRemove: false },
-    ],
+    thresholds: [],
   },
 };
 
diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts
index 92c5125d3d6..b69f4e7d927 100644
--- a/public/app/types/panel.ts
+++ b/public/app/types/panel.ts
@@ -43,9 +43,8 @@ export enum MappingType {
 }
 
 export enum BasicGaugeColor {
-  Green = 'rgba(50, 172, 45, 0.97)',
-  Orange = 'rgba(237, 129, 40, 0.89)',
-  Red = 'rgb(212, 74, 58)',
+  Green = 'lightgreen',
+  Red = 'red',
 }
 
 interface BaseMap {
diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index 7afa512a00f..e6e04e8b5de 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -34,7 +34,7 @@ export class Gauge extends PureComponent<Props> {
     showThresholdMarkers: true,
     showThresholdLabels: false,
     suffix: '',
-    thresholds: [{ value: 0, color: BasicGaugeColor.Green }, { value: 100, color: BasicGaugeColor.Red }],
+    thresholds: [],
     unit: 'none',
     stat: 'avg',
   };
@@ -136,13 +136,20 @@ export class Gauge extends PureComponent<Props> {
     const thresholdMarkersWidth = gaugeWidth / 5;
     const thresholdLabelFontSize = fontSize / 2.5;
 
-    const formattedThresholds = thresholds.map((threshold, index) => {
-      return {
-        value: threshold.value,
-        // Hacky way to get correct color for threshold.
-        color: index === 0 ? threshold.color : thresholds[index - 1].color,
-      };
-    });
+    const formattedThresholds = [
+      { value: minValue, color: BasicGaugeColor.Green },
+      ...thresholds.map((threshold, index) => {
+        return {
+          value: threshold.value,
+          // Hacky way to get correct color for threshold.
+          color: index === 0 ? threshold.color : thresholds[index - 1].color,
+        };
+      }),
+      {
+        value: maxValue,
+        color: BasicGaugeColor.Red,
+      },
+    ];
 
     console.log(formattedThresholds);
 
@@ -174,11 +181,7 @@ export class Gauge extends PureComponent<Props> {
           value: {
             color: this.getFontColor(value),
             formatter: () => {
-              if (timeSeries[0]) {
-                return this.formatValue(value);
-              }
-
-              return '';
+              return this.formatValue(value);
             },
             font: {
               size: fontSize,

From 5f4eaad8a773d45185c5b236fe32a28312099de3 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 14 Dec 2018 14:08:29 +0100
Subject: [PATCH 06/15] changin colors

---
 public/app/types/panel.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts
index b69f4e7d927..4fa6ac38f52 100644
--- a/public/app/types/panel.ts
+++ b/public/app/types/panel.ts
@@ -43,8 +43,8 @@ export enum MappingType {
 }
 
 export enum BasicGaugeColor {
-  Green = 'lightgreen',
-  Red = 'red',
+  Green = '#299c46',
+  Red = '#d44a3a',
 }
 
 interface BaseMap {

From f8c8f2ec2c1824fc002a4f273c7b1a4b6b1e4241 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 14 Dec 2018 14:18:18 +0100
Subject: [PATCH 07/15] gauge working without thresholds

---
 public/app/viz/Gauge.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index e6e04e8b5de..73e5a6c1ac8 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -108,6 +108,7 @@ export class Gauge extends PureComponent<Props> {
 
   draw() {
     const {
+      baseColor,
       maxValue,
       minValue,
       timeSeries,
@@ -147,12 +148,10 @@ export class Gauge extends PureComponent<Props> {
       }),
       {
         value: maxValue,
-        color: BasicGaugeColor.Red,
+        color: thresholds.length > 0 ? BasicGaugeColor.Red : baseColor,
       },
     ];
 
-    console.log(formattedThresholds);
-
     const options = {
       series: {
         gauges: {

From 7c83d7ba825b338fb014b78a063dc454cb7905c1 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 14 Dec 2018 16:27:42 +0100
Subject: [PATCH 08/15] updates on thresholds component

---
 .../plugins/panel/gauge/Threshold.test.tsx    |   5 +-
 public/app/plugins/panel/gauge/Thresholds.tsx | 123 +++++++-----------
 public/sass/components/_thresholds.scss       |  16 +--
 3 files changed, 56 insertions(+), 88 deletions(-)

diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/public/app/plugins/panel/gauge/Threshold.test.tsx
index 8387fd6232c..9a7c103814e 100644
--- a/public/app/plugins/panel/gauge/Threshold.test.tsx
+++ b/public/app/plugins/panel/gauge/Threshold.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Thresholds from './Thresholds';
 import { defaultProps, OptionsProps } from './module';
-import { PanelOptionsProps } from '../../../types';
+import { BasicGaugeColor, PanelOptionsProps } from '../../../types';
 
 const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<OptionsProps> = {
@@ -69,6 +69,7 @@ describe('Add at index', () => {
   it('should return 1, one added threshold', () => {
     const instance = setup();
     instance.state = {
+      baseColor: BasicGaugeColor.Green,
       thresholds: [
         { index: 0, label: 'Min', value: 0, canRemove: false },
         { index: 1, label: '', value: 50, canRemove: true },
@@ -101,6 +102,7 @@ describe('Add at index', () => {
   it('should return 2, one added threshold', () => {
     const instance = setup();
     instance.state = {
+      baseColor: BasicGaugeColor.Green,
       thresholds: [
         { index: 0, label: 'Min', value: 0, canRemove: false },
         { index: 1, label: '', value: 50, canRemove: true },
@@ -125,6 +127,7 @@ describe('change threshold value', () => {
     ];
 
     instance.state = {
+      baseColor: BasicGaugeColor.Green,
       thresholds: mockThresholds,
     };
 
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index e27dba7f400..63a0b8ae1f4 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import classNames from 'classnames/bind';
 import tinycolor from 'tinycolor2';
 import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker';
 import { OptionModuleProps } from './module';
@@ -7,6 +6,7 @@ import { BasicGaugeColor, Threshold } from 'app/types';
 
 interface State {
   thresholds: Threshold[];
+  baseColor: string;
 }
 
 export default class Thresholds extends PureComponent<OptionModuleProps, State> {
@@ -14,7 +14,8 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     super(props);
 
     this.state = {
-      thresholds: props.options.thresholds,
+      thresholds: [{ value: 50, canRemove: true, color: '#f2f2f2', index: 0, label: '' }],
+      baseColor: props.options.baseColor,
     };
   }
 
@@ -119,17 +120,24 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     return index < thresholds.length ? thresholds[index].color : BasicGaugeColor.Red;
   };
 
+  insertAtIndex(index) {
+    const { thresholds } = this.state;
+
+    // If thresholds.length is greater or equal to 3
+    // it means a user has added one threshold
+    if (thresholds.length < 3 || index < 0) {
+      return 1;
+    }
+
+    return index;
+  }
+
   renderThresholds() {
     const { thresholds } = this.state;
 
     return thresholds.map((threshold, index) => {
-      const rowStyle = classNames({
-        'threshold-row': true,
-        'threshold-row-min': index === 0,
-      });
-
       return (
-        <div className={rowStyle} key={`${threshold.index}-${index}`}>
+        <div className="threshold-row" key={`${threshold.index}-${index}`}>
           <div className="threshold-row-inner">
             <div className="threshold-row-color">
               {threshold.color && (
@@ -157,112 +165,71 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     });
   }
 
-  insertAtIndex(index) {
+  renderIndicator() {
     const { thresholds } = this.state;
 
-    // If thresholds.length is greater or equal to 3
-    // it means a user has added one threshold
-    if (thresholds.length < 3 || index < 0) {
-      return 1;
-    }
-
-    return index;
-  }
-
-  renderIndicatorSection(index) {
-    const { thresholds } = this.state;
-    const indicators = thresholds.length - 1;
-
-    if (index === 0 || index === thresholds.length) {
+    return thresholds.map((t, i) => {
       return (
         <div
-          key={index}
+          key={`${t.value}-${i}`}
           className="indicator-section"
           style={{
-            height: `calc(100%/${indicators})`,
+            height: '50%',
           }}
         >
           <div
-            onClick={() => this.onAddThreshold(this.insertAtIndex(index - 1))}
+            onClick={() => this.onAddThreshold(this.insertAtIndex(1))}
             style={{
               height: '100%',
-              background: this.getIndicatorColor(index),
+              background: this.getIndicatorColor(i),
             }}
           />
         </div>
       );
-    }
+    });
+  }
 
+  renderBaseIndicator() {
     return (
-      <div
-        key={index}
-        className="indicator-section"
-        style={{
-          height: `calc(100%/${indicators})`,
-        }}
-      >
+      <div className="indicator-section" style={{ height: '100%' }}>
         <div
-          onClick={() => this.onAddThreshold(this.insertAtIndex(index))}
-          style={{
-            height: '50%',
-            background: this.getIndicatorColor(index),
-          }}
-        />
-        <div
-          onClick={() => this.onAddThreshold(this.insertAtIndex(index + 1))}
-          style={{
-            height: `50%`,
-            background: this.getIndicatorColor(index),
-          }}
+          onClick={() => this.onAddThreshold(1)}
+          style={{ height: '50px', backgroundColor: this.props.options.baseColor }}
         />
       </div>
     );
   }
 
-  renderIndicator() {
-    const { thresholds } = this.state;
-
-    if (thresholds.length > 0) {
-      return thresholds.map((t, i) => {
-        if (i <= thresholds.length - 1) {
-          return this.renderIndicatorSection(i);
-        }
-
-        return null;
-      });
-    }
+  renderBase() {
+    const { baseColor } = this.props.options;
 
     return (
-      <div className="indicator-section" style={{ height: '100%' }}>
-        <div
-          onClick={() => this.onAddThreshold(0)}
-          style={{ height: '100%', backgroundColor: this.props.options.baseColor }}
-        />
+      <div className="threshold-row threshold-row-base">
+        <div className="threshold-row-inner threshold-row-inner--base">
+          <div className="threshold-row-color">
+            <div className="threshold-row-color-inner">
+              <ColorPicker color={baseColor} onChange={color => this.onChangeBaseColor(color)} />
+            </div>
+          </div>
+          <div className="threshold-row-label">Base</div>
+        </div>
       </div>
     );
   }
 
   render() {
-    const { thresholds } = this.state;
-
     return (
       <div className="section gf-form-group">
         <h5 className="page-heading">Thresholds</h5>
         <span>Click the colored line to add a threshold</span>
         <div className="thresholds">
-          <div className="color-indicators">{this.renderIndicator()}</div>
+          <div className="color-indicators">
+            {this.renderIndicator()}
+            {this.renderBaseIndicator()}
+          </div>
           <div className="threshold-rows">
-            <div className="threshold-row threshold-row-base">
-              <div className="threshold-row-inner">
-                <div className="threshold-row-color">
-                  <div className="threshold-row-color-inner">
-                    <ColorPicker color={BasicGaugeColor.Green} onChange={color => this.onChangeBaseColor(color)} />
-                  </div>
-                </div>
-                <div className="threshold-row-label">Base</div>
-              </div>
-            </div>
-            {thresholds.length > 0 && this.renderThresholds()}
+            {this.renderThresholds()}
+            {this.renderBase()}
           </div>
         </div>
       </div>
diff --git a/public/sass/components/_thresholds.scss b/public/sass/components/_thresholds.scss
index 5935c120ced..e2c9cdd7a83 100644
--- a/public/sass/components/_thresholds.scss
+++ b/public/sass/components/_thresholds.scss
@@ -25,8 +25,11 @@
   border-radius: $border-radius;
   display: flex;
   overflow: hidden;
-  width: 300px;
   height: 37px;
+
+  &--base {
+    width: auto;
+  }
 }
 
 .threshold-row-color {
@@ -48,13 +51,12 @@
 
 .threshold-row-input {
   padding: 8px 10px;
-  width: 230px;
+  width: 150px;
 }
 
 .threshold-row-label {
   background-color: $input-label-bg;
   padding: 5px;
-  width: 36px;
   display: flex;
   align-items: center;
 }
@@ -66,11 +68,6 @@
 }
 
 .threshold-row-base {
-  margin-top: -22px;
-}
-
-.threshold-row-max {
-  margin-bottom: -22px;
 }
 
 .threshold-row-remove {
@@ -103,6 +100,7 @@
 
 .color-indicators {
   width: 15px;
-  border-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
   overflow: hidden;
 }

From ade2f297a79bbc0b590d956ed7d24716e3d60c2c Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 17 Dec 2018 14:15:04 +0100
Subject: [PATCH 09/15] adding threshold

---
 .../plugins/panel/gauge/Threshold.test.tsx    | 144 +++++-------------
 public/app/plugins/panel/gauge/Thresholds.tsx |  82 +++++-----
 public/app/types/panel.ts                     |   2 -
 public/sass/components/_thresholds.scss       |   3 +-
 4 files changed, 77 insertions(+), 154 deletions(-)

diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/public/app/plugins/panel/gauge/Threshold.test.tsx
index 9a7c103814e..642debecd0b 100644
--- a/public/app/plugins/panel/gauge/Threshold.test.tsx
+++ b/public/app/plugins/panel/gauge/Threshold.test.tsx
@@ -2,17 +2,14 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Thresholds from './Thresholds';
 import { defaultProps, OptionsProps } from './module';
-import { BasicGaugeColor, PanelOptionsProps } from '../../../types';
+import { PanelOptionsProps } from 'app/types';
 
 const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<OptionsProps> = {
     onChange: jest.fn(),
     options: {
       ...defaultProps.options,
-      thresholds: [
-        { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
-        { index: 1, label: 'Max', value: 100, canRemove: false },
-      ],
+      thresholds: [],
     },
   };
 
@@ -22,124 +19,55 @@ const setup = (propOverrides?: object) => {
 };
 
 describe('Add threshold', () => {
-  it('should add threshold between min and max', () => {
+  it('should add threshold', () => {
     const instance = setup();
 
-    instance.onAddThreshold(1);
+    instance.onAddThreshold(0);
 
-    expect(instance.state.thresholds).toEqual([
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
-      { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 2, label: 'Max', value: 100, canRemove: false },
-    ]);
+    expect(instance.state.thresholds).toEqual([{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }]);
   });
 
-  it('should add threshold between min and added threshold', () => {
+  it('should add another threshold above a first', () => {
     const instance = setup({
       options: {
         ...defaultProps.options,
-        thresholds: [
-          { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
-          { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-          { index: 2, label: 'Max', value: 100, canRemove: false },
-        ],
+        thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }],
       },
     });
 
     instance.onAddThreshold(1);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
-      { index: 1, label: '', value: 25, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 2, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 3, label: 'Max', value: 100, canRemove: false },
+      { index: 0, value: 50, color: 'rgb(127, 115, 64)' },
+      { index: 1, value: 75, color: 'rgb(170, 95, 61)' },
     ]);
   });
 });
 
-describe('Add at index', () => {
-  it('should return 1, no added thresholds', () => {
-    const instance = setup();
-
-    const result = instance.insertAtIndex(1);
-
-    expect(result).toEqual(1);
-  });
-
-  it('should return 1, one added threshold', () => {
-    const instance = setup();
-    instance.state = {
-      baseColor: BasicGaugeColor.Green,
-      thresholds: [
-        { index: 0, label: 'Min', value: 0, canRemove: false },
-        { index: 1, label: '', value: 50, canRemove: true },
-        { index: 2, label: 'Max', value: 100, canRemove: false },
-      ],
-    };
-
-    const result = instance.insertAtIndex(1);
-
-    expect(result).toEqual(1);
-  });
-
-  it('should return 2, two added thresholds', () => {
-    const instance = setup({
-      options: {
-        thresholds: [
-          { index: 0, label: 'Min', value: 0, canRemove: false },
-          { index: 1, label: '', value: 25, canRemove: true },
-          { index: 2, label: '', value: 50, canRemove: true },
-          { index: 3, label: 'Max', value: 100, canRemove: false },
-        ],
-      },
-    });
-
-    const result = instance.insertAtIndex(2);
-
-    expect(result).toEqual(2);
-  });
-
-  it('should return 2, one added threshold', () => {
-    const instance = setup();
-    instance.state = {
-      baseColor: BasicGaugeColor.Green,
-      thresholds: [
-        { index: 0, label: 'Min', value: 0, canRemove: false },
-        { index: 1, label: '', value: 50, canRemove: true },
-        { index: 2, label: 'Max', value: 100, canRemove: false },
-      ],
-    };
-
-    const result = instance.insertAtIndex(2);
-
-    expect(result).toEqual(2);
-  });
-});
-
-describe('change threshold value', () => {
-  it('should update value and resort rows', () => {
-    const instance = setup();
-    const mockThresholds = [
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
-      { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 3, label: 'Max', value: 100, canRemove: false },
-    ];
-
-    instance.state = {
-      baseColor: BasicGaugeColor.Green,
-      thresholds: mockThresholds,
-    };
-
-    const mockEvent = { target: { value: 78 } };
-
-    instance.onChangeThresholdValue(mockEvent, mockThresholds[1]);
-
-    expect(instance.state.thresholds).toEqual([
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
-      { index: 1, label: '', value: 78, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-      { index: 3, label: 'Max', value: 100, canRemove: false },
-    ]);
-  });
-});
+// describe('change threshold value', () => {
+//   it('should update value and resort rows', () => {
+//     const instance = setup();
+//     const mockThresholds = [
+//       { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
+//       { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
+//       { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
+//       { index: 3, label: 'Max', value: 100, canRemove: false },
+//     ];
+//
+//     instance.state = {
+//       baseColor: BasicGaugeColor.Green,
+//       thresholds: mockThresholds,
+//     };
+//
+//     const mockEvent = { target: { value: 78 } };
+//
+//     instance.onChangeThresholdValue(mockEvent, mockThresholds[1]);
+//
+//     expect(instance.state.thresholds).toEqual([
+//       { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
+//       { index: 1, label: '', value: 78, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
+//       { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
+//       { index: 3, label: 'Max', value: 100, canRemove: false },
+//     ]);
+//   });
+// });
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index 63a0b8ae1f4..7f15727066e 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -14,14 +14,17 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     super(props);
 
     this.state = {
-      thresholds: [{ value: 50, canRemove: true, color: '#f2f2f2', index: 0, label: '' }],
+      thresholds: props.options.thresholds,
       baseColor: props.options.baseColor,
     };
   }
 
   onAddThreshold = index => {
+    const { maxValue, minValue } = this.props.options;
     const { thresholds } = this.state;
 
+    console.log('add at index:', index);
+
     const newThresholds = thresholds.map(threshold => {
       if (threshold.index >= index) {
         threshold = { ...threshold, index: threshold.index + 1 };
@@ -31,17 +34,27 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     });
 
     // Setting value to a value between the previous thresholds
-    const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
+    let value;
+
+    if (index === 0 && thresholds.length === 0) {
+      value = maxValue - (maxValue - minValue) / 2;
+    } else if (index === 0 && thresholds.length > 0) {
+      value = newThresholds[index + 1].value - (newThresholds[index + 1].value - minValue) / 2;
+    } else if (index > newThresholds[newThresholds.length - 1].index) {
+      value = maxValue - (maxValue - newThresholds[index - 1].value) / 2;
+    }
 
     // Set a color that lies between the previous thresholds
-    const color = tinycolor.mix(thresholds[index - 1].color, thresholds[index].color, 50).toRgbString();
+    let color;
+    if (index === 0 && thresholds.length === 0) {
+      color = tinycolor.mix(BasicGaugeColor.Green, BasicGaugeColor.Red, 50).toRgbString();
+    } else {
+      color = tinycolor.mix(thresholds[index - 1].color, BasicGaugeColor.Red, 50).toRgbString();
+    }
 
     this.setState(
       {
-        thresholds: this.sortThresholds([
-          ...newThresholds,
-          { index: index, label: '', value: value, canRemove: true, color: color },
-        ]),
+        thresholds: this.sortThresholds([...newThresholds, { index: index, value: value, color: color }]),
       },
       () => this.updateGauge()
     );
@@ -106,32 +119,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
 
   sortThresholds = thresholds => {
     return thresholds.sort((t1, t2) => {
-      return t1.value - t2.value;
+      return t2.value - t1.value;
     });
   };
 
-  getIndicatorColor = index => {
-    const { thresholds } = this.state;
-
-    if (index === 0) {
-      return thresholds[0].color;
-    }
-
-    return index < thresholds.length ? thresholds[index].color : BasicGaugeColor.Red;
-  };
-
-  insertAtIndex(index) {
-    const { thresholds } = this.state;
-
-    // If thresholds.length is greater or equal to 3
-    // it means a user has added one threshold
-    if (thresholds.length < 3 || index < 0) {
-      return 1;
-    }
-
-    return index;
-  }
-
   renderThresholds() {
     const { thresholds } = this.state;
 
@@ -170,20 +161,25 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
 
     return thresholds.map((t, i) => {
       return (
-        <div
-          key={`${t.value}-${i}`}
-          className="indicator-section"
-          style={{
-            height: '50%',
-          }}
-        >
+        <div key={`${t.value}-${i}`} className="indicator-section">
           <div
-            onClick={() => this.onAddThreshold(this.insertAtIndex(1))}
+            onClick={() => this.onAddThreshold(t.index + 1)}
             style={{
-              height: '100%',
-              background: this.getIndicatorColor(i),
+              height: '50%',
+              backgroundColor: t.color,
             }}
-          />
+          >
+            {t.index}
+          </div>
+          <div
+            onClick={() => this.onAddThreshold(t.index)}
+            style={{
+              height: '50%',
+              backgroundColor: t.color,
+            }}
+          >
+            {t.index}
+          </div>
         </div>
       );
     });
@@ -193,8 +189,8 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     return (
       <div className="indicator-section" style={{ height: '100%' }}>
         <div
-          onClick={() => this.onAddThreshold(1)}
-          style={{ height: '50px', backgroundColor: this.props.options.baseColor }}
+          onClick={() => this.onAddThreshold(0)}
+          style={{ height: '100%', backgroundColor: this.props.options.baseColor }}
         />
       </div>
     );
diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts
index 4fa6ac38f52..af371e16573 100644
--- a/public/app/types/panel.ts
+++ b/public/app/types/panel.ts
@@ -31,10 +31,8 @@ export interface PanelMenuItem {
 
 export interface Threshold {
   index: number;
-  label: string;
   value: number;
   color?: string;
-  canRemove: boolean;
 }
 
 export enum MappingType {
diff --git a/public/sass/components/_thresholds.scss b/public/sass/components/_thresholds.scss
index e2c9cdd7a83..a5d7f2f9bb1 100644
--- a/public/sass/components/_thresholds.scss
+++ b/public/sass/components/_thresholds.scss
@@ -10,7 +10,7 @@
 .threshold-row {
   display: flex;
   align-items: center;
-  margin: 5px 0;
+  margin-top: 3px;
   padding: 5px;
 
   &::before {
@@ -95,6 +95,7 @@
 
 .indicator-section {
   width: 100%;
+  height: 50px;
   cursor: pointer;
 }
 

From e11834e950d67fcd198161678714e22dd03870aa Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 17 Dec 2018 14:16:29 +0100
Subject: [PATCH 10/15] updating test

---
 public/app/plugins/panel/gauge/Threshold.test.tsx | 2 +-
 public/app/plugins/panel/gauge/Thresholds.tsx     | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/public/app/plugins/panel/gauge/Threshold.test.tsx
index 642debecd0b..4ada2dcb5fd 100644
--- a/public/app/plugins/panel/gauge/Threshold.test.tsx
+++ b/public/app/plugins/panel/gauge/Threshold.test.tsx
@@ -38,8 +38,8 @@ describe('Add threshold', () => {
     instance.onAddThreshold(1);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, value: 50, color: 'rgb(127, 115, 64)' },
       { index: 1, value: 75, color: 'rgb(170, 95, 61)' },
+      { index: 0, value: 50, color: 'rgb(127, 115, 64)' },
     ]);
   });
 });
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index 7f15727066e..b5a929f4811 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -23,8 +23,6 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     const { maxValue, minValue } = this.props.options;
     const { thresholds } = this.state;
 
-    console.log('add at index:', index);
-
     const newThresholds = thresholds.map(threshold => {
       if (threshold.index >= index) {
         threshold = { ...threshold, index: threshold.index + 1 };

From 98490084a17bb867be52a609d83d77ba930abaa9 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 17 Dec 2018 14:18:28 +0100
Subject: [PATCH 11/15] remove printed index

---
 public/app/plugins/panel/gauge/Thresholds.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index b5a929f4811..4351acc0f84 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -166,18 +166,14 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
               height: '50%',
               backgroundColor: t.color,
             }}
-          >
-            {t.index}
-          </div>
+          />
           <div
             onClick={() => this.onAddThreshold(t.index)}
             style={{
               height: '50%',
               backgroundColor: t.color,
             }}
-          >
-            {t.index}
-          </div>
+          />
         </div>
       );
     });

From e7f966d002ad580bc36f3a7b611d63324fc1d9fa Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 17 Dec 2018 14:26:19 +0100
Subject: [PATCH 12/15] fixing coloring

---
 public/app/viz/Gauge.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index 73e5a6c1ac8..9907ddf575f 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -93,14 +93,14 @@ export class Gauge extends PureComponent<Props> {
   }
 
   getFontColor(value) {
-    const { baseColor, thresholds } = this.props;
+    const { baseColor, maxValue, thresholds } = this.props;
 
-    if (thresholds.length > 0) {
-      const foo = thresholds.filter(t => value <= t.value);
+    const atThreshold = thresholds.filter(threshold => value <= threshold.value);
 
-      if (foo.length > 0) {
-        return foo[0].color;
-      }
+    if (atThreshold.length > 0) {
+      return atThreshold[0].color;
+    } else if (value <= maxValue) {
+      return BasicGaugeColor.Red;
     }
 
     return baseColor;
@@ -142,8 +142,7 @@ export class Gauge extends PureComponent<Props> {
       ...thresholds.map((threshold, index) => {
         return {
           value: threshold.value,
-          // Hacky way to get correct color for threshold.
-          color: index === 0 ? threshold.color : thresholds[index - 1].color,
+          color: index === 0 ? threshold.color : thresholds[index].color,
         };
       }),
       {

From adebbd955928323288cf6e9b8aca256854340ca6 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 17 Dec 2018 14:37:12 +0100
Subject: [PATCH 13/15] sorting tests for change value

---
 .../plugins/panel/gauge/Threshold.test.tsx    | 52 +++++++++----------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/public/app/plugins/panel/gauge/Threshold.test.tsx
index 4ada2dcb5fd..3b2becd9859 100644
--- a/public/app/plugins/panel/gauge/Threshold.test.tsx
+++ b/public/app/plugins/panel/gauge/Threshold.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Thresholds from './Thresholds';
 import { defaultProps, OptionsProps } from './module';
-import { PanelOptionsProps } from 'app/types';
+import { BasicGaugeColor, PanelOptionsProps } from 'app/types';
 
 const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<OptionsProps> = {
@@ -44,30 +44,26 @@ describe('Add threshold', () => {
   });
 });
 
-// describe('change threshold value', () => {
-//   it('should update value and resort rows', () => {
-//     const instance = setup();
-//     const mockThresholds = [
-//       { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
-//       { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-//       { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-//       { index: 3, label: 'Max', value: 100, canRemove: false },
-//     ];
-//
-//     instance.state = {
-//       baseColor: BasicGaugeColor.Green,
-//       thresholds: mockThresholds,
-//     };
-//
-//     const mockEvent = { target: { value: 78 } };
-//
-//     instance.onChangeThresholdValue(mockEvent, mockThresholds[1]);
-//
-//     expect(instance.state.thresholds).toEqual([
-//       { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
-//       { index: 1, label: '', value: 78, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-//       { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
-//       { index: 3, label: 'Max', value: 100, canRemove: false },
-//     ]);
-//   });
-// });
+describe('change threshold value', () => {
+  it('should update value and resort rows', () => {
+    const instance = setup();
+    const mockThresholds = [
+      { index: 0, value: 50, color: 'rgba(237, 129, 40, 0.89)' },
+      { index: 1, value: 75, color: 'rgba(237, 129, 40, 0.89)' },
+    ];
+
+    instance.state = {
+      baseColor: BasicGaugeColor.Green,
+      thresholds: mockThresholds,
+    };
+
+    const mockEvent = { target: { value: 78 } };
+
+    instance.onChangeThresholdValue(mockEvent, mockThresholds[0]);
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 0, value: 78, color: 'rgba(237, 129, 40, 0.89)' },
+      { index: 1, value: 75, color: 'rgba(237, 129, 40, 0.89)' },
+    ]);
+  });
+});

From 1ee1247912e2f794f2dbdc6e27e93bc537327e85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 17 Dec 2018 17:54:40 +0100
Subject: [PATCH 14/15] Gauge option form markup fixes

---
 pkg/api/frontendsettings.go                   |  12 ++-
 .../app/core/components/Select/UnitPicker.tsx |   2 +-
 .../app/plugins/panel/gauge/GaugeOptions.tsx  |  38 +++----
 public/app/plugins/panel/gauge/MappingRow.tsx | 100 ++++++++----------
 public/app/plugins/panel/gauge/Thresholds.tsx |   2 +-
 .../app/plugins/panel/gauge/ValueMappings.tsx |   2 +-
 .../app/plugins/panel/gauge/ValueOptions.tsx  |  12 +--
 .../__snapshots__/ValueMappings.test.tsx.snap |   2 +-
 public/sass/components/_gf-form.scss          |   9 ++
 public/sass/components/_value-mappings.scss   |   8 --
 10 files changed, 89 insertions(+), 98 deletions(-)

diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go
index 65affe83e98..8f5457cf271 100644
--- a/pkg/api/frontendsettings.go
+++ b/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
 }
diff --git a/public/app/core/components/Select/UnitPicker.tsx b/public/app/core/components/Select/UnitPicker.tsx
index da9d4526d2b..75885cbbb84 100644
--- a/public/app/core/components/Select/UnitPicker.tsx
+++ b/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;
 }
diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptions.tsx
index 3a3d7cdeede..655e9b0a65d 100644
--- a/public/app/plugins/panel/gauge/GaugeOptions.tsx
+++ b/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>
     );
   }
diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx
index 1fdb3abf9d9..35d0b2e638c 100644
--- a/public/app/plugins/panel/gauge/MappingRow.tsx
+++ b/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>
     );
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index 4351acc0f84..8da5253d7c9 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/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">
diff --git a/public/app/plugins/panel/gauge/ValueMappings.tsx b/public/app/plugins/panel/gauge/ValueMappings.tsx
index c66ab960872..2197002a135 100644
--- a/public/app/plugins/panel/gauge/ValueMappings.tsx
+++ b/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) => (
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index 7f4142753b8..445d6517c5a 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/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>
diff --git a/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap b/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
index 987a5f31853..8a05cb7e91b 100644
--- a/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
+++ b/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>
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index f0855ead897..e86b901bb79 100644
--- a/public/sass/components/_gf-form.scss
+++ b/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;
   }
diff --git a/public/sass/components/_value-mappings.scss b/public/sass/components/_value-mappings.scss
index b1f53c755f4..1d62b191763 100644
--- a/public/sass/components/_value-mappings.scss
+++ b/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;

From e8f9174d086a01176041bd5b751c022190f12ea9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 18 Dec 2018 09:58:27 +0100
Subject: [PATCH 15/15] Minor update

---
 public/app/plugins/panel/gauge/Thresholds.tsx | 1 -
 public/sass/components/_thresholds.scss       | 1 -
 2 files changed, 2 deletions(-)

diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index 8da5253d7c9..dd0dcc1e33b 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -211,7 +211,6 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     return (
       <div className="section gf-form-group">
         <h5 className="section-heading">Thresholds</h5>
-        <span>Click the colored line to add a threshold</span>
         <div className="thresholds">
           <div className="color-indicators">
             {this.renderIndicator()}
diff --git a/public/sass/components/_thresholds.scss b/public/sass/components/_thresholds.scss
index a5d7f2f9bb1..dbcc9951ff7 100644
--- a/public/sass/components/_thresholds.scss
+++ b/public/sass/components/_thresholds.scss
@@ -1,6 +1,5 @@
 .thresholds {
   display: flex;
-  margin-top: 30px;
 }
 
 .threshold-rows {