Sort colors when not editing a threshold value

ui/src/dashboards/components/GaugeOptions.js

@@ -46,7 +46,12 @@ class GaugeOptions extends Component {
         name: GAUGE_COLORS[randomColor].name,
       }
 
-      handleUpdateGaugeColors([...gaugeColors, newThreshold])
+      const updatedColors = _.sortBy(
+        [...gaugeColors, newThreshold],
+        color => color.value
+      )
+
+      handleUpdateGaugeColors(updatedColors)
     } else {
       onResetFocus()
     }
@@ -57,8 +62,9 @@ class GaugeOptions extends Component {
     const gaugeColors = this.props.gaugeColors.filter(
       color => color.id !== threshold.id
     )
+    const sortedColors = _.sortBy(gaugeColors, color => color.value)
 
-    handleUpdateGaugeColors(gaugeColors)
+    handleUpdateGaugeColors(sortedColors)
     onResetFocus()
   }
 
@@ -138,12 +144,23 @@ class GaugeOptions extends Component {
     handleUpdateAxes(newAxes)
   }
 
+  handleSortColors = () => {
+    const {gaugeColors, handleUpdateGaugeColors} = this.props
+    const sortedColors = _.sortBy(gaugeColors, color => color.value)
+
+    handleUpdateGaugeColors(sortedColors)
+  }
+
+  // componentDidMount = () => {
+  //   this.handleSortColors()
+  // }
+
   render() {
     const {gaugeColors, axes: {y: {prefix, suffix}}} = this.props
 
     const disableMaxColor = gaugeColors.length > MIN_THRESHOLDS
     const disableAddThreshold = gaugeColors.length > MAX_THRESHOLDS
-    const sortedColors = _.sortBy(gaugeColors, color => color.value)
+    // const sortedColors = _.sortBy(gaugeColors, color => color.value)
 
     return (
       <FancyScrollbar
@@ -160,11 +177,11 @@ class GaugeOptions extends Component {
             >
               <span className="icon plus" /> Add Threshold
             </button>
-            {sortedColors.map(color =>
+            {gaugeColors.map(color =>
               <Threshold
-                isMin={color.value === sortedColors[0].value}
+                isMin={color.value === gaugeColors[0].value}
                 isMax={
-                  color.value === sortedColors[sortedColors.length - 1].value
+                  color.value === gaugeColors[gaugeColors.length - 1].value
                 }
                 visualizationType="gauge"
                 threshold={color}
@@ -174,6 +191,7 @@ class GaugeOptions extends Component {
                 onValidateColorValue={this.handleValidateColorValue}
                 onUpdateColorValue={this.handleUpdateColorValue}
                 onDeleteThreshold={this.handleDeleteThreshold}
+                onSortColors={this.handleSortColors}
               />
             )}
           </div>

ui/src/dashboards/components/Threshold.js

@@ -29,6 +29,13 @@ class Threshold extends Component {
 
   handleBlur = () => {
     this.setState({workingValue: this.props.threshold.value, valid: true})
+    this.props.onSortColors()
+  }
+
+  handleKeyUp = e => {
+    if (e.key === 'Enter') {
+      this.thresholdInputRef.blur()
+    }
   }
 
   render() {
@@ -87,6 +94,8 @@ class Threshold extends Component {
           type="number"
           onChange={this.handleChangeWorkingValue}
           onBlur={this.handleBlur}
+          onKeyUp={this.handleKeyUp}
+          ref={r => (this.thresholdInputRef = r)}
         />
         <ColorDropdown
           colors={GAUGE_COLORS}
@@ -117,6 +126,7 @@ Threshold.propTypes = {
   onDeleteThreshold: func.isRequired,
   isMin: bool,
   isMax: bool,
+  onSortColors: func.isRequired,
 }
 
 export default Threshold