created test for some functions

public/app/core/components/Label/Label.tsx

@@ -6,11 +6,14 @@ interface Props {
   for?: string;
   children: ReactNode;
   width?: number;
+  className?: string;
 }
 
 export const Label: SFC<Props> = props => {
   return (
-    <span className={`gf-form-label width-${props.width ? props.width : '10'}`}>
+    <span
+      className={`gf-form-label width-${props.width ? props.width : '10'} ${props.className ? props.className : ''}`}
+    >
       <span>{props.children}</span>
       {props.tooltip && (
         <Tooltip className="gf-form-help-icon--right-normal" placement="auto" content={props.tooltip}>

public/app/plugins/panel/gauge/Threshold.test.tsx

+import React from 'react';
+import { shallow } from 'enzyme';
+import Thresholds from './Thresholds';
+import { OptionsProps } from './module';
+import { PanelOptionsProps } from '../../../types';
+
+const setup = (propOverrides?: object) => {
+  const props: PanelOptionsProps<OptionsProps> = {
+    onChange: jest.fn(),
+    options: {} as OptionsProps,
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<Thresholds {...props} />).instance() as Thresholds;
+};
+
+describe('Add threshold', () => {
+  it('should add treshold between min and max', () => {
+    const instance = setup();
+
+    instance.onAddThreshold(1);
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 0, label: 'Min', value: 0, canRemove: false },
+      { index: 1, label: '', value: 0, canRemove: true },
+      { index: 2, label: 'Max', value: 100, canRemove: false },
+    ]);
+  });
+
+  it('should add threshold between min and added threshold', () => {
+    const instance = setup();
+
+    instance.state = {
+      thresholds: [
+        { index: 0, label: 'Min', value: 0, canRemove: false },
+        { index: 1, label: '', value: 50, canRemove: true },
+        { index: 2, label: 'Max', value: 100, canRemove: false },
+      ],
+      userAddedThresholds: 1,
+    };
+
+    instance.onAddThreshold(1);
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 0, label: 'Min', value: 0, canRemove: false },
+      { index: 1, label: '', value: 0, canRemove: true },
+      { index: 2, label: '', value: 50, canRemove: true },
+      { index: 3, label: 'Max', value: 100, canRemove: false },
+    ]);
+  });
+});
+
+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 = {
+      thresholds: [
+        { index: 0, label: 'Min', value: 0, canRemove: false },
+        { index: 1, label: '', value: 50, canRemove: true },
+        { index: 2, label: 'Max', value: 100, canRemove: false },
+      ],
+      userAddedThresholds: 1,
+    };
+
+    const result = instance.insertAtIndex(1);
+
+    expect(result).toEqual(1);
+  });
+
+  it('should return 2, two added thresholds', () => {
+    const instance = setup();
+    instance.state = {
+      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 },
+      ],
+      userAddedThresholds: 2,
+    };
+
+    const result = instance.insertAtIndex(2);
+
+    expect(result).toEqual(2);
+  });
+
+  it('should return 2, one added threshold', () => {
+    const instance = setup();
+    instance.state = {
+      thresholds: [
+        { index: 0, label: 'Min', value: 0, canRemove: false },
+        { index: 1, label: '', value: 50, canRemove: true },
+        { index: 2, label: 'Max', value: 100, canRemove: false },
+      ],
+      userAddedThresholds: 1,
+    };
+
+    const result = instance.insertAtIndex(2);
+
+    expect(result).toEqual(2);
+  });
+});

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

@@ -74,11 +74,11 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
   };
 
   getIndicatorColor(index) {
-    const { userAddedThresholds } = this.state;
+    const { thresholds } = this.state;
 
     if (index === 0) {
       return 'green';
-    } else if (index < userAddedThresholds) {
+    } else if (index < thresholds.length) {
       return 'yellow';
     }
 
@@ -89,7 +89,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     const { thresholds } = this.state;
 
     return [
-      <div className="gf-form" key="min">
+      <div className="gf-form threshold-row threshold-row-min" key="min">
         <input
           className="gf-form-input"
           onBlur={this.onBlur}
@@ -98,23 +98,15 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
         />
         <Label width={3}>{thresholds[0].label}</Label>
       </div>,
-      <div className="gf-form" key="add">
-        <div
-          onClick={() => this.onAddThreshold(1)}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '36px',
-            height: '36px',
-            backgroundColor: 'green',
-          }}
-        >
+      <div className="gf-form threshold-row" key="add">
+        <div onClick={() => this.onAddThreshold(1)} className="threshold-row-add">
           <i className="fa fa-plus" />
         </div>
-        <Label width={18}>Add new threshold by clicking the line</Label>
+        <Label className="threshold-row-label" width={18}>
+          Add new threshold by clicking the line
+        </Label>
       </div>,
-      <div className="gf-form" key="max">
+      <div className="gf-form threshold-row threshold-row-max" key="max">
         <input
           className="gf-form-input"
           onBlur={this.onBlur}
@@ -130,7 +122,12 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     const { thresholds } = this.state;
     return thresholds.map((threshold, index) => {
       return (
-        <div className="gf-form" key={`${threshold}-${index}`}>
+        <div
+          className={`gf-form threshold-row ${index === 0 ? 'threshold-row-min' : ''} ${
+            index === thresholds.length ? 'threshold-row-max' : ''
+          } `}
+          key={`${threshold}-${index}`}
+        >
           <input
             className="gf-form-input"
             type="text"
@@ -164,37 +161,84 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
 
     if (userAddedThresholds === 0) {
       return 1;
-    } else if (index === userAddedThresholds) {
+    } else if (userAddedThresholds > 1 && index === this.state.thresholds.length) {
       return index - 1;
+    } else if (index === 0) {
+      return 1;
     } else if (index > 0) {
-      return index + 1;
+      return index;
     }
 
+    // SAD
     return -1;
   }
 
-  renderIndicator() {
+  renderIndicatorSection(index) {
     const { userAddedThresholds } = this.state;
-
     const indicators = userAddedThresholds + 1;
 
-    const sections = [];
+    if (index === 0 || index === indicators) {
+      return (
+        <div
+          key={index}
+          className="indicator-section"
+          style={{
+            height: `calc(100%/${indicators})`,
+          }}
+        >
+          <div
+            onClick={() => this.onAddThreshold(this.insertAtIndex(index - 1))}
+            style={{
+              height: '100%',
+              background: this.getIndicatorColor(index),
+            }}
+          />
+        </div>
+      );
+    }
 
-    for (let i = 0; i < indicators; i++) {
-      sections.push(
+    return (
       <div
-          key={`${i}`}
-          onClick={() => this.onAddThreshold(this.insertAtIndex(i))}
+        key={index}
+        className="indicator-section"
         style={{
-            width: '100%',
           height: `calc(100%/${indicators})`,
+        }}
+      >
+        <div
+          onClick={() => this.onAddThreshold(this.insertAtIndex(index - 1))}
+          style={{
+            height: '50%',
+            background: this.getIndicatorColor(index),
+          }}
+        >
+          {index}
+        </div>
+        <div
+          onClick={() => this.onAddThreshold(this.insertAtIndex(index))}
+          style={{
+            height: `50%`,
             cursor: 'pointer',
-            background: this.getIndicatorColor(i),
+            background: this.getIndicatorColor(index),
           }}
-        />
+        >
+          {index}
+        </div>
+      </div>
     );
   }
 
+  renderIndicator() {
+    const { userAddedThresholds } = this.state;
+
+    const indicators = userAddedThresholds + 1;
+
+    const sections = [];
+
+    for (let i = 0; i < indicators; i++) {
+      sections.push(this.renderIndicatorSection(i));
+    }
+
     return sections;
   }
 
@@ -204,17 +248,9 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     return (
       <div className="section gf-form-group">
         <h5 className="page-heading">Thresholds</h5>
-        <div style={{ display: 'flex', alignItems: 'flexStart' }}>
-          <div
-            style={{
-              width: '20px',
-              minHeight: '40px',
-              flex: '0 1 auto',
-            }}
-          >
-            {this.renderIndicator()}
-          </div>
-          <div style={{ flex: '1 0 auto', marginLeft: '10px' }}>
+        <div className="thresholds">
+          <div className="color-indicators">{this.renderIndicator()}</div>
+          <div className="threshold-rows">
             {userAddedThresholds === 0 ? this.renderNoThresholds() : this.renderThresholds()}
           </div>
         </div>

public/sass/components/_thresholds.scss

+.thresholds {
+  display: flex;
+  margin-top: 30px;
+}
 
+.threshold-rows {
+  flex: 1 0 auto;
+  margin-left: 10px;
+}
+
+.threshold-row {
+  &::before {
+    font-family: 'FontAwesome';
+    content: '\f0d9';
+    color: $input-label-border-color;
+  }
+}
+
+.threshold-row-min {
+  margin-top: -17px;
+}
+
+.threshold-row-max {
+  margin-bottom: -17px;
+}
+
+.threshold-row-add {
+  border: $border-width solid $input-label-border-color;
+  border-radius: $border-radius 0 0 $border-radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background-color: $green;
+}
+
+.threshold-row-label {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.indicator-section {
+  width: 100%;
+  border-top: 1px solid black;
+  cursor: pointer;
+
+  :first-of-type {
+    border-top: none;
+  }
+}
+
+.color-indicators {
+  width: 20px;
+  min-height: 40px;
+  flex: 0 1 auto;
+}