logic for adding rows, styling

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
+import classNames from 'classnames/bind';
 import { PanelOptionsProps, Threshold } from 'app/types';
 import { OptionsProps } from './module';
-import { Label } from '../../../core/components/Label/Label';
 
 interface State {
   thresholds: Threshold[];
@@ -22,6 +22,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
   }
 
   onAddThreshold = index => {
+    console.log('add at index', index);
     const newThresholds = this.state.thresholds.map(threshold => {
       if (threshold.index >= index) {
         threshold = { ...threshold, index: threshold.index + 1 };
@@ -89,68 +90,70 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     const { thresholds } = this.state;
 
     return [
-      <div className="gf-form threshold-row threshold-row-min" key="min">
+      <div className="threshold-row threshold-row-min" key="min">
-        <input
+        <div className="threshold-row-inner">
-          className="gf-form-input threshold-row-input"
+          <div className="threshold-row-color" />
-          onBlur={this.onBlur}
+          <input
-          onChange={event => this.onChangeThresholdValue(event, thresholds[0])}
+            className="threshold-row-input"
-          value={thresholds[0].value}
+            onBlur={this.onBlur}
-        />
+            onChange={event => this.onChangeThresholdValue(event, thresholds[0])}
-        <Label width={3}>{thresholds[0].label}</Label>
+            value={thresholds[0].value}
-      </div>,
+          />
-      <div className="gf-form threshold-row" key="add">
+          <div className="threshold-row-label">{thresholds[0].label}</div>
-        <div onClick={() => this.onAddThreshold(1)} className="threshold-row-add">
-          <i className="fa fa-plus" />
         </div>
-        <Label className="threshold-row-label" width={18}>
-          Add new threshold by clicking the line
-        </Label>
       </div>,
-      <div className="gf-form threshold-row threshold-row-max" key="max">
+      <div className="threshold-row" key="add">
-        <input
+        <div className="threshold-row-inner">
-          className="gf-form-input threshold-row-input"
+          <div onClick={() => this.onAddThreshold(1)} className="threshold-row-add">
-          onBlur={this.onBlur}
+            <i className="fa fa-plus" />
-          onChange={event => this.onChangeThresholdValue(event, thresholds[1])}
+          </div>
-          value={thresholds[1].value}
+          <div className="threshold-row-add-label">Add new threshold by clicking the line.</div>
-        />
+        </div>
-        <Label width={3}>{thresholds[0].label}</Label>
+      </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, thresholds[1])}
+            value={thresholds[1].value}
+          />
+          <div className="threshold-row-label">{thresholds[0].label}</div>
+        </div>
       </div>,
     ];
   }
 
   renderThresholds() {
     const { thresholds } = this.state;
+
     return thresholds.map((threshold, index) => {
+      const rowStyle = classNames({
+        'threshold-row': true,
+        'threshold-row-min': index === 0,
+        'threshold-row-max': index === thresholds.length,
+      });
+
       return (
-        <div
+        <div className={rowStyle} key={`${threshold.index}-${index}`}>
-          className={`gf-form threshold-row ${index === 0 ? 'threshold-row-min' : ''} ${
+          <div className="threshold-row-inner">
-            index === thresholds.length ? 'threshold-row-max' : ''
+            <div className="threshold-row-color" />
-          } `}
+            <input
-          key={`${threshold}-${index}`}
+              className="threshold-row-input"
-        >
+              type="text"
-          <input
+              onChange={event => this.onChangeThresholdValue(event, threshold)}
-            className="gf-form-input threshold-row-input"
+              value={threshold.value}
-            type="text"
+              onBlur={this.onBlur}
-            onChange={event => this.onChangeThresholdValue(event, threshold)}
+            />
-            value={threshold.value}
+            {threshold.canRemove ? (
-            onBlur={this.onBlur}
+              <div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove">
-          />
+                <i className="fa fa-times" />
-          {threshold.canRemove ? (
+              </div>
-            <div
+            ) : (
-              onClick={() => this.onRemoveThreshold(threshold)}
+              <div className="threshold-row-label">{threshold.label}</div>
-              style={{
+            )}
-                display: 'flex',
+          </div>
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '36px',
-                height: '36px',
-              }}
-            >
-              <i className="fa fa-times" />
-            </div>
-          ) : (
-            <Label width={3}>{threshold.label}</Label>
-          )}
         </div>
       );
     });
@@ -161,16 +164,9 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
 
     if (userAddedThresholds === 0) {
       return 1;
-    } else if (userAddedThresholds > 1 && index === this.state.thresholds.length) {
-      return index - 1;
-    } else if (index === 0) {
-      return 1;
-    } else if (index > 0) {
-      return index;
     }
 
-    // SAD
+    return index;
-    return -1;
   }
 
   renderIndicatorSection(index) {
@@ -206,24 +202,20 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
         }}
       >
         <div
-          onClick={() => this.onAddThreshold(this.insertAtIndex(index - 1))}
+          onClick={() => this.onAddThreshold(this.insertAtIndex(index))}
           style={{
             height: '50%',
             background: this.getIndicatorColor(index),
           }}
-        >
+        />
-          d
-        </div>
         <div
-          onClick={() => this.onAddThreshold(this.insertAtIndex(index))}
+          onClick={() => this.onAddThreshold(this.insertAtIndex(index + 1))}
           style={{
             height: `50%`,
             cursor: 'pointer',
             background: this.getIndicatorColor(index),
           }}
-        >
+        />
-          i
-        </div>
       </div>
     );
   }

public/sass/components/_thresholds.scss

@@ -9,6 +9,11 @@
 }
 
 .threshold-row {
+  display: flex;
+  align-items: center;
+  margin: 5px 0;
+  padding: 5px;
+
   &::before {
     font-family: 'FontAwesome';
     content: '\f0d9';
@@ -16,8 +21,37 @@
   }
 }
 
+.threshold-row-inner {
+  border: 1px solid $input-label-border-color;
+  border-radius: $border-radius;
+  display: flex;
+  overflow: hidden;
+  width: 300px;
+  height: 37px;
+}
+
+.threshold-row-color {
+  width: 36px;
+  border-right: 1px solid $input-label-border-color;
+}
+
 .threshold-row-input {
-  border-radius: $border-radius 0 0 $border-radius;
+  padding: 8px 10px;
+  width: 230px;
+}
+
+.threshold-row-label {
+  background-color: $input-label-bg;
+  padding: 5px;
+  width: 36px;
+  display: flex;
+  align-items: center;
+}
+
+.threshold-row-add-label {
+  align-items: center;
+  display: flex;
+  padding: 5px 8px;
 }
 
 .threshold-row-min {
@@ -28,14 +62,20 @@
   margin-bottom: -17px;
 }
 
-.threshold-row-add {
+.threshold-row-remove {
-  border: $border-width solid $input-label-border-color;
+  display: flex;
-  border-radius: $border-radius 0 0 $border-radius;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  cursor: pointer;
+}
+
+.threshold-row-add {
+  border-right: $border-width solid $input-label-border-color;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
-  height: 36px;
   background-color: $green;
 }