Send colors with save action and pass down to GaugeChart

ui/src/dashboards/components/CellEditorOverlay.js

@@ -29,13 +29,14 @@ import {
   GAUGE_COLORS,
   COLOR_TYPE_MIN,
   COLOR_TYPE_MAX,
+  validateColors,
 } from 'src/dashboards/constants/gaugeColors'
 
 class CellEditorOverlay extends Component {
   constructor(props) {
     super(props)
 
-    const {cell: {name, type, queries, axes}, sources} = props
+    const {cell: {name, type, queries, axes, colors}, sources} = props
 
     let source = _.get(queries, ['0', 'source'], null)
     source = sources.find(s => s.links.self === source) || props.source
@@ -55,7 +56,7 @@ class CellEditorOverlay extends Component {
       activeQueryIndex: 0,
       isDisplayOptionsTabActive: false,
       axes,
-      colors: DEFAULT_COLORS,
+      colors: validateColors(colors) ? colors : DEFAULT_COLORS,
     }
   }
 
@@ -211,6 +212,7 @@ class CellEditorOverlay extends Component {
       cellWorkingType: type,
       cellWorkingName: name,
       axes,
+      colors,
     } = this.state
 
     const {cell} = this.props
@@ -232,6 +234,7 @@ class CellEditorOverlay extends Component {
       type,
       queries,
       axes,
+      colors,
     })
   }
 

ui/src/dashboards/constants/gaugeColors.js

@@ -86,3 +86,10 @@ export const DEFAULT_COLORS = [
     value: DEFAULT_VALUE_MAX,
   },
 ]
+
+export const validateColors = colors => {
+  const hasMin = colors.some(color => color.type === COLOR_TYPE_MIN)
+  const hasMax = colors.some(color => color.type === COLOR_TYPE_MAX)
+
+  return hasMin && hasMax
+}

ui/src/shared/components/GaugeChart.js

@@ -45,12 +45,21 @@ class GaugeChart extends Component {
   }
 }
 
-const {arrayOf, bool, number, shape} = PropTypes
+const {arrayOf, bool, number, shape, string} = PropTypes
 
 GaugeChart.propTypes = {
   data: arrayOf(shape()).isRequired,
   isFetchingInitially: bool,
   cellHeight: number,
+  colors: arrayOf(
+    shape({
+      type: string.isRequired,
+      hex: string.isRequired,
+      id: string.isRequired,
+      name: string.isRequired,
+      value: string.isRequired,
+    }).isRequired
+  ),
 }
 
 export default GaugeChart

ui/src/shared/components/Layout.js

@@ -43,7 +43,7 @@ const Layout = (
   {
     host,
     cell,
-    cell: {h, axes, type},
+    cell: {h, axes, type, colors},
     source,
     sources,
     onZoom,
@@ -75,6 +75,7 @@ const Layout = (
     {cell.isWidget
       ? <WidgetCell cell={cell} timeRange={timeRange} source={source} />
       : <RefreshingGraph
+          colors={colors}
           axes={axes}
           type={type}
           cellHeight={h}
@@ -125,6 +126,15 @@ const propTypes = {
     i: string.isRequired,
     name: string.isRequired,
     type: string.isRequired,
+    colors: arrayOf(
+      shape({
+        type: string.isRequired,
+        hex: string.isRequired,
+        id: string.isRequired,
+        name: string.isRequired,
+        value: string.isRequired,
+      }).isRequired
+    ),
   }).isRequired,
   templates: arrayOf(shape()),
   host: string,

ui/src/shared/components/RefreshingGraph.js

@@ -14,6 +14,7 @@ const RefreshingGaugeChart = AutoRefresh(GaugeChart)
 const RefreshingGraph = ({
   axes,
   type,
+  colors,
   onZoom,
   queries,
   templates,
@@ -51,6 +52,7 @@ const RefreshingGraph = ({
   if (type === 'gauge') {
     return (
       <RefreshingGaugeChart
+        colors={colors}
         key={manualRefresh}
         queries={[queries[0]]}
         templates={templates}
@@ -103,6 +105,15 @@ RefreshingGraph.propTypes = {
   onZoom: func,
   resizeCoords: shape(),
   grabDataForDownload: func,
+  colors: arrayOf(
+    shape({
+      type: string.isRequired,
+      hex: string.isRequired,
+      id: string.isRequired,
+      name: string.isRequired,
+      value: string.isRequired,
+    }).isRequired
+  ),
 }
 
 RefreshingGraph.defaultProps = {