sort on value

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

@@ -16,14 +16,14 @@ const setup = (propOverrides?: object) => {
 };
 
 describe('Add threshold', () => {
-  it('should add treshold between min and max', () => {
+  it('should add threshold 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: 1, label: '', value: 50, canRemove: true },
       { index: 2, label: 'Max', value: 100, canRemove: false },
     ]);
   });
@@ -44,7 +44,7 @@ describe('Add threshold', () => {
 
     expect(instance.state.thresholds).toEqual([
       { index: 0, label: 'Min', value: 0, canRemove: false },
-      { index: 1, label: '', value: 0, canRemove: true },
+      { index: 1, label: '', value: 25, canRemove: true },
       { index: 2, label: '', value: 50, canRemove: true },
       { index: 3, label: 'Max', value: 100, canRemove: false },
     ]);
@@ -109,3 +109,31 @@ describe('Add at index', () => {
     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 },
+      { index: 1, label: '', value: 50, canRemove: true },
+      { index: 2, label: '', value: 75, canRemove: true },
+      { index: 3, label: 'Max', value: 100, canRemove: false },
+    ];
+
+    instance.state = {
+      thresholds: mockThresholds,
+      userAddedThresholds: 1,
+    };
+
+    const mockEvent = { target: { value: 78 } };
+
+    instance.onChangeThresholdValue(mockEvent, mockThresholds[1]);
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 0, label: 'Min', value: 0, canRemove: false },
+      { index: 1, label: '', value: 75, canRemove: true },
+      { index: 2, label: '', value: 78, canRemove: true },
+      { index: 3, label: 'Max', value: 100, canRemove: false },
+    ]);
+  });
+});

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

@@ -23,7 +23,9 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
 
   onAddThreshold = index => {
     console.log('add at index', index);
-    const newThresholds = this.state.thresholds.map(threshold => {
+    const { thresholds } = this.state;
+
+    const newThresholds = thresholds.map((threshold, index) => {
       if (threshold.index >= index) {
         threshold = { ...threshold, index: threshold.index + 1 };
       }
@@ -31,12 +33,12 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
       return threshold;
     });
 
-    const userAddedThresholds = this.state.userAddedThresholds + 1;
+    const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
 
-    this.setState({
-      thresholds: this.sortThresholds([...newThresholds, { index: index, label: '', value: 0, canRemove: true }]),
-      userAddedThresholds: userAddedThresholds,
-    });
+    this.setState(prevState => ({
+      thresholds: this.sortThresholds([...newThresholds, { index: index, label: '', value: value, canRemove: true }]),
+      userAddedThresholds: prevState.userAddedThresholds + 1,
+    }));
   };
 
   onRemoveThreshold = threshold => {
@@ -47,9 +49,12 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
   };
 
   onChangeThresholdValue = (event, threshold) => {
-    const newThresholds = this.state.thresholds.map(currentThreshold => {
+    const { thresholds } = this.state;
+    const value = event.target.value;
+
+    const newThresholds = thresholds.map(currentThreshold => {
       if (currentThreshold === threshold) {
-        currentThreshold = { ...currentThreshold, value: event.target.value };
+        currentThreshold = { ...currentThreshold, value: value };
       }
 
       return currentThreshold;
@@ -70,7 +75,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
 
   sortThresholds = thresholds => {
     return thresholds.sort((t1, t2) => {
-      return t1.index - t2.index;
+      return t1.value - t2.value;
     });
   };
 
@@ -78,12 +83,12 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     const { thresholds } = this.state;
 
     if (index === 0) {
-      return 'green';
+      return '#3aa655';
     } else if (index < thresholds.length) {
-      return 'yellow';
+      return '#ff851b';
     }
 
-    return 'red';
+    return '#d44939';
   }
 
   renderNoThresholds() {
@@ -212,7 +217,6 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
           onClick={() => this.onAddThreshold(this.insertAtIndex(index + 1))}
           style={{
             height: `50%`,
-            cursor: 'pointer',
             background: this.getIndicatorColor(index),
           }}
         />