user added thresholds state

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

@@ -35,12 +35,9 @@ describe('Add threshold', () => {
   });
 
   it('should add threshold between min and added threshold', () => {
-    const instance = setup();
-
-    instance.state = {
-      thresholds: thresholds,
-      userAddedThresholds: 1,
-    };
+    const instance = setup({
+      options: { thresholds: thresholds },
+    });
 
     instance.onAddThreshold(1);
 
@@ -70,7 +67,6 @@ describe('Add at index', () => {
         { index: 1, label: '', value: 50, canRemove: true },
         { index: 2, label: 'Max', value: 100, canRemove: false },
       ],
-      userAddedThresholds: 1,
     };
 
     const result = instance.insertAtIndex(1);
@@ -79,16 +75,16 @@ describe('Add at index', () => {
   });
 
   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 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);
 
@@ -103,7 +99,6 @@ describe('Add at index', () => {
         { index: 1, label: '', value: 50, canRemove: true },
         { index: 2, label: 'Max', value: 100, canRemove: false },
       ],
-      userAddedThresholds: 1,
     };
 
     const result = instance.insertAtIndex(2);
@@ -124,7 +119,6 @@ describe('change threshold value', () => {
 
     instance.state = {
       thresholds: mockThresholds,
-      userAddedThresholds: 1,
     };
 
     const mockEvent = { target: { value: 78 } };

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

@@ -6,7 +6,6 @@ import { ColorPicker } from '../../../core/components/colorpicker/ColorPicker';
 
 interface State {
   thresholds: Threshold[];
-  userAddedThresholds: number;
 }
 
 export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsProps>, State> {
@@ -18,7 +17,6 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
         { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
         { index: 1, label: 'Max', value: 100, canRemove: false },
       ],
-      userAddedThresholds: 0,
     };
   }
 
@@ -37,13 +35,12 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
 
     this.setState(
-      prevState => ({
+      {
         thresholds: this.sortThresholds([
           ...newThresholds,
           { index: index, label: '', value: value, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
         ]),
-        userAddedThresholds: prevState.userAddedThresholds + 1,
-      }),
+      },
       () => this.updateGauge()
     );
   };
@@ -51,7 +48,6 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
   onRemoveThreshold = threshold => {
     this.setState(prevState => ({
       thresholds: prevState.thresholds.filter(t => t !== threshold),
-      userAddedThresholds: prevState.userAddedThresholds - 1,
     }));
   };
 
@@ -208,9 +204,9 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
   }
 
   insertAtIndex(index) {
-    const { userAddedThresholds } = this.state;
+    const { thresholds } = this.state;
 
-    if (userAddedThresholds === 0 || index < 0) {
+    if (thresholds.length < 3 || index < 0) {
       return 1;
     }
 
@@ -218,10 +214,10 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
   }
 
   renderIndicatorSection(index) {
-    const { userAddedThresholds } = this.state;
-    const indicators = userAddedThresholds + 1;
+    const { thresholds } = this.state;
+    const indicators = thresholds.length - 1;
 
-    if (index === 0 || index === this.state.thresholds.length) {
+    if (index === 0 || index === thresholds.length) {
       return (
         <div
           key={index}
@@ -268,9 +264,9 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
   }
 
   renderIndicator() {
-    const { userAddedThresholds } = this.state;
+    const { thresholds } = this.state;
 
-    const indicators = userAddedThresholds + 1;
+    const indicators = thresholds.length - 1;
 
     const sections = [];
 
@@ -282,7 +278,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
   }
 
   render() {
-    const { userAddedThresholds } = this.state;
+    const { thresholds } = this.state;
 
     return (
       <div className="section gf-form-group">
@@ -290,7 +286,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
         <div className="thresholds">
           <div className="color-indicators">{this.renderIndicator()}</div>
           <div className="threshold-rows">
-            {userAddedThresholds === 0 ? this.renderNoThresholds() : this.renderThresholds()}
+            {thresholds.length > 2 ? this.renderThresholds() : this.renderNoThresholds()}
           </div>
         </div>
       </div>