rename singleStatType to thresholdsListType

going for a more generic and future proof naming scheme

ui/src/dashboards/actions/cellEditorOverlay.js

@@ -30,10 +30,10 @@ export const updateSingleStatColors = singleStatColors => ({
   },
 })
 
-export const updateSingleStatType = singleStatType => ({
+export const updateThresholdsListType = thresholdsListType => ({
   type: 'UPDATE_SINGLE_STAT_TYPE',
   payload: {
-    singleStatType,
+    thresholdsListType,
   },
 })
 

ui/src/dashboards/components/CellEditorOverlay.js

@@ -375,7 +375,7 @@ CellEditorOverlay.propTypes = {
   }).isRequired,
   dashboardID: string.isRequired,
   sources: arrayOf(shape()),
-  singleStatType: string.isRequired,
+  thresholdsListType: string.isRequired,
   singleStatColors: arrayOf(shape({}).isRequired).isRequired,
   gaugeColors: arrayOf(shape({}).isRequired).isRequired,
 }

ui/src/dashboards/components/GraphOptionsTextWrapping.js

@@ -4,25 +4,30 @@ import PropTypes from 'prop-types'
 import {SINGLE_STAT_BG, SINGLE_STAT_TEXT} from 'shared/constants/thresholds'
 
 // TODO: Needs major refactoring to make thresholds a much more general component to be shared between single stat, gauge, and table.
-const GraphOptionsTextWrapping = ({singleStatType, onToggleTextWrapping}) => {
+const GraphOptionsTextWrapping = ({
+  thresholdsListType,
+  onToggleTextWrapping,
+}) => {
   return (
     <div className="form-group col-xs-12">
       <label>Text Wrapping</label>
       <ul className="nav nav-tablist nav-tablist-sm">
         <li
-          className={`${singleStatType === SINGLE_STAT_BG ? 'active' : ''}`}
+          className={`${thresholdsListType === SINGLE_STAT_BG ? 'active' : ''}`}
           onClick={onToggleTextWrapping}
         >
           Truncate
         </li>
         <li
-          className={`${singleStatType === SINGLE_STAT_TEXT ? 'active' : ''}`}
+          className={`${thresholdsListType === SINGLE_STAT_TEXT
+            ? 'active'
+            : ''}`}
           onClick={onToggleTextWrapping}
         >
           Wrap
         </li>
         <li
-          className={`${singleStatType === SINGLE_STAT_BG ? 'active' : ''}`}
+          className={`${thresholdsListType === SINGLE_STAT_BG ? 'active' : ''}`}
           onClick={onToggleTextWrapping}
         >
           Single Line
@@ -34,7 +39,7 @@ const GraphOptionsTextWrapping = ({singleStatType, onToggleTextWrapping}) => {
 const {func, string} = PropTypes
 
 GraphOptionsTextWrapping.propTypes = {
-  singleStatType: string,
+  thresholdsListType: string,
   onToggleTextWrapping: func,
 }
 

ui/src/dashboards/components/GraphOptionsThresholdColoring.js

@@ -5,22 +5,22 @@ import {SINGLE_STAT_BG, SINGLE_STAT_TEXT} from 'shared/constants/thresholds'
 
 // TODO: Needs major refactoring to make thresholds a much more general component to be shared between single stat, gauge, and table.
 const GraphOptionsThresholdColoring = ({
-  onToggleSingleStatType,
-  singleStatType,
+  onToggleThresholdsListType,
+  thresholdsListType,
 }) => {
   return (
     <div className="form-group col-xs-12 col-md-6">
       <label>Threshold Coloring</label>
       <ul className="nav nav-tablist nav-tablist-sm">
         <li
-          className={`${singleStatType === SINGLE_STAT_BG ? 'active' : ''}`}
-          onClick={onToggleSingleStatType(SINGLE_STAT_BG)}
+          className={`${thresholdsListType === SINGLE_STAT_BG ? 'active' : ''}`}
+          onClick={onToggleThresholdsListType(SINGLE_STAT_BG)}
         >
           Background
         </li>
         <li
-          className={`${singleStatType === SINGLE_STAT_TEXT ? 'active' : ''}`}
-          onClick={onToggleSingleStatType(SINGLE_STAT_TEXT)}
+          className={`${thresholdsListType === SINGLE_STAT_TEXT ? 'active' : ''}`}
+          onClick={onToggleThresholdsListType(SINGLE_STAT_TEXT)}
         >
           Text
         </li>
@@ -31,8 +31,8 @@ const GraphOptionsThresholdColoring = ({
 const {func, string} = PropTypes
 
 GraphOptionsThresholdColoring.propTypes = {
-  singleStatType: string,
-  onToggleSingleStatType: func,
+  thresholdsListType: string,
+  onToggleThresholdsListType: func,
 }
 
 export default GraphOptionsThresholdColoring

ui/src/dashboards/components/SingleStatOptions.js

@@ -5,7 +5,7 @@ import {bindActionCreators} from 'redux'
 
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 import ThresholdsList from 'shared/components/ThresholdsList'
-import ThresholdsColorToggle from 'shared/components/ThresholdsColorToggle'
+import ThresholdsListTypeToggle from 'shared/components/ThresholdsListTypeToggle'
 
 import {updateAxes} from 'src/dashboards/actions/cellEditorOverlay'
 
@@ -56,7 +56,7 @@ class SingleStatOptions extends Component {
                 maxLength="5"
               />
             </div>
-            <ThresholdsColorToggle containerClass="form-group col-xs-6" />
+            <ThresholdsListTypeToggle containerClass="form-group col-xs-6" />
           </div>
         </div>
       </FancyScrollbar>

ui/src/dashboards/components/TableOptions.tsx

@@ -9,7 +9,7 @@ import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
 import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsTextWrapping'
 import GraphOptionsCustomizeColumns from 'src/dashboards/components/GraphOptionsCustomizeColumns'
 import ThresholdsList from 'src/shared/components/ThresholdsList'
-import ThresholdsColorToggle from 'src/shared/components/ThresholdsColorToggle'
+import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
 
 import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
 
@@ -105,9 +105,9 @@ export class TableOptions extends PureComponent<Props, {}> {
             columns={columns}
             onColumnRename={this.handleColumnRename}
           />
-          <ThresholdsList onResetFocus={onResetFocus} />
+          <ThresholdsList showListHeading={true} onResetFocus={onResetFocus} />
           <div className="form-group-wrapper graph-options-group">
-            <ThresholdsColorToggle containerClass="form-group col-xs-6" />
+            <ThresholdsListTypeToggle containerClass="form-group col-xs-6" />
           </div>
         </div>
       </FancyScrollbar>

ui/src/dashboards/containers/DashboardPage.js

@@ -273,7 +273,7 @@ class DashboardPage extends Component {
       manualRefresh,
       onManualRefresh,
       cellQueryStatus,
-      singleStatType,
+      thresholdsListType,
       singleStatColors,
       dashboardActions,
       inPresentationMode,
@@ -380,7 +380,7 @@ class DashboardPage extends Component {
               onCancel={handleHideCellEditorOverlay}
               templates={templatesIncludingDashTime}
               editQueryStatus={dashboardActions.editCellQueryStatus}
-              singleStatType={singleStatType}
+              thresholdsListType={thresholdsListType}
               singleStatColors={singleStatColors}
               gaugeColors={gaugeColors}
             />
@@ -512,7 +512,7 @@ DashboardPage.propTypes = {
   handleShowCellEditorOverlay: func.isRequired,
   handleHideCellEditorOverlay: func.isRequired,
   selectedCell: shape({}),
-  singleStatType: string.isRequired,
+  thresholdsListType: string.isRequired,
   singleStatColors: arrayOf(shape({}).isRequired).isRequired,
   gaugeColors: arrayOf(shape({}).isRequired).isRequired,
 }
@@ -527,7 +527,12 @@ const mapStateToProps = (state, {params: {dashboardID}}) => {
     sources,
     dashTimeV1,
     auth: {me, isUsingAuth},
-    cellEditorOverlay: {cell, singleStatType, singleStatColors, gaugeColors},
+    cellEditorOverlay: {
+      cell,
+      thresholdsListType,
+      singleStatColors,
+      gaugeColors,
+    },
   } = state
 
   const meRole = _.get(me, 'role', null)
@@ -554,7 +559,7 @@ const mapStateToProps = (state, {params: {dashboardID}}) => {
     inPresentationMode,
     showTemplateControlBar,
     selectedCell,
-    singleStatType,
+    thresholdsListType,
     singleStatColors,
     gaugeColors,
   }

ui/src/dashboards/reducers/cellEditorOverlay.js

@@ -4,14 +4,14 @@ import {
   DEFAULT_GAUGE_COLORS,
   validateGaugeColors,
   validateSingleStatColors,
-  getSingleStatType,
+  getThresholdsListType,
 } from 'shared/constants/thresholds'
 
 import {initializeOptions} from 'src/dashboards/constants/cellEditor'
 
 export const initialState = {
   cell: null,
-  singleStatType: SINGLE_STAT_TEXT,
+  thresholdsListType: SINGLE_STAT_TEXT,
   singleStatColors: DEFAULT_SINGLESTAT_COLORS,
   gaugeColors: DEFAULT_GAUGE_COLORS,
 }
@@ -21,8 +21,11 @@ export default function cellEditorOverlay(state = initialState, action) {
     case 'SHOW_CELL_EDITOR_OVERLAY': {
       const {cell, cell: {colors}} = action.payload
 
-      const singleStatType = getSingleStatType(colors)
-      const singleStatColors = validateSingleStatColors(colors, singleStatType)
+      const thresholdsListType = getThresholdsListType(colors)
+      const singleStatColors = validateSingleStatColors(
+        colors,
+        thresholdsListType
+      )
       const gaugeColors = validateGaugeColors(colors)
 
       const tableOptions = cell.tableOptions || initializeOptions('table')
@@ -30,7 +33,7 @@ export default function cellEditorOverlay(state = initialState, action) {
       return {
         ...state,
         cell: {...cell, tableOptions},
-        singleStatType,
+        thresholdsListType,
         singleStatColors,
         gaugeColors,
       }
@@ -63,14 +66,14 @@ export default function cellEditorOverlay(state = initialState, action) {
     }
 
     case 'UPDATE_SINGLE_STAT_TYPE': {
-      const {singleStatType} = action.payload
+      const {thresholdsListType} = action.payload
 
       const singleStatColors = state.singleStatColors.map(color => ({
         ...color,
-        type: singleStatType,
+        type: thresholdsListType,
       }))
 
-      return {...state, singleStatType, singleStatColors}
+      return {...state, thresholdsListType, singleStatColors}
     }
 
     case 'UPDATE_GAUGE_COLORS': {

ui/src/shared/components/ThresholdsColorToggle.js

@@ -1,60 +0,0 @@
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
-
-import {updateSingleStatType} from 'src/dashboards/actions/cellEditorOverlay'
-
-import {SINGLE_STAT_TEXT, SINGLE_STAT_BG} from 'shared/constants/thresholds'
-
-class ThresholdsColorToggle extends Component {
-  handleToggleSingleStatType = newType => () => {
-    const {handleUpdateSingleStatType} = this.props
-
-    handleUpdateSingleStatType(newType)
-  }
-
-  render() {
-    const {singleStatType, containerClass} = this.props
-
-    return (
-      <div className={containerClass}>
-        <label>Coloring</label>
-        <ul className="nav nav-tablist nav-tablist-sm">
-          <li
-            className={`${singleStatType === SINGLE_STAT_BG ? 'active' : ''}`}
-            onClick={this.handleToggleSingleStatType(SINGLE_STAT_BG)}
-          >
-            Background
-          </li>
-          <li
-            className={`${singleStatType === SINGLE_STAT_TEXT ? 'active' : ''}`}
-            onClick={this.handleToggleSingleStatType(SINGLE_STAT_TEXT)}
-          >
-            Text
-          </li>
-        </ul>
-      </div>
-    )
-  }
-}
-const {func, string} = PropTypes
-
-ThresholdsColorToggle.propTypes = {
-  singleStatType: string.isRequired,
-  handleUpdateSingleStatType: func.isRequired,
-  containerClass: string.isRequired,
-}
-
-const mapStateToProps = ({cellEditorOverlay: {singleStatType}}) => ({
-  singleStatType,
-})
-
-const mapDispatchToProps = dispatch => ({
-  handleUpdateSingleStatType: bindActionCreators(
-    updateSingleStatType,
-    dispatch
-  ),
-})
-export default connect(mapStateToProps, mapDispatchToProps)(
-  ThresholdsColorToggle
-)

ui/src/shared/components/ThresholdsList.js

@@ -27,7 +27,7 @@ class ThresholdsList extends Component {
   handleAddThreshold = () => {
     const {
       singleStatColors,
-      singleStatType,
+      thresholdsListType,
       handleUpdateSingleStatColors,
       onResetFocus,
     } = this.props
@@ -47,7 +47,7 @@ class ThresholdsList extends Component {
     }
 
     const newThreshold = {
-      type: singleStatType,
+      type: thresholdsListType,
       id: uuid.v4(),
       value: randomValue,
       hex: GAUGE_COLORS[randomColor].hex,
@@ -158,7 +158,7 @@ ThresholdsList.defaultProps = {
   showListHeading: false,
 }
 ThresholdsList.propTypes = {
-  singleStatType: string.isRequired,
+  thresholdsListType: string.isRequired,
   singleStatColors: arrayOf(
     shape({
       type: string.isRequired,
@@ -174,9 +174,9 @@ ThresholdsList.propTypes = {
 }
 
 const mapStateToProps = ({
-  cellEditorOverlay: {singleStatType, singleStatColors},
+  cellEditorOverlay: {thresholdsListType, singleStatColors},
 }) => ({
-  singleStatType,
+  thresholdsListType,
   singleStatColors,
 })
 

ui/src/shared/components/ThresholdsListTypeToggle.js

@@ -0,0 +1,64 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+
+import {updateThresholdsListType} from 'src/dashboards/actions/cellEditorOverlay'
+
+import {SINGLE_STAT_TEXT, SINGLE_STAT_BG} from 'shared/constants/thresholds'
+
+class ThresholdsListTypeToggle extends Component {
+  handleToggleThresholdsListType = newType => () => {
+    const {handleUpdateThresholdsListType} = this.props
+
+    handleUpdateThresholdsListType(newType)
+  }
+
+  render() {
+    const {thresholdsListType, containerClass} = this.props
+
+    return (
+      <div className={containerClass}>
+        <label>Threshold Coloring</label>
+        <ul className="nav nav-tablist nav-tablist-sm">
+          <li
+            className={`${thresholdsListType === SINGLE_STAT_BG
+              ? 'active'
+              : ''}`}
+            onClick={this.handleToggleThresholdsListType(SINGLE_STAT_BG)}
+          >
+            Background
+          </li>
+          <li
+            className={`${thresholdsListType === SINGLE_STAT_TEXT
+              ? 'active'
+              : ''}`}
+            onClick={this.handleToggleThresholdsListType(SINGLE_STAT_TEXT)}
+          >
+            Text
+          </li>
+        </ul>
+      </div>
+    )
+  }
+}
+const {func, string} = PropTypes
+
+ThresholdsListTypeToggle.propTypes = {
+  thresholdsListType: string.isRequired,
+  handleUpdateThresholdsListType: func.isRequired,
+  containerClass: string.isRequired,
+}
+
+const mapStateToProps = ({cellEditorOverlay: {thresholdsListType}}) => ({
+  thresholdsListType,
+})
+
+const mapDispatchToProps = dispatch => ({
+  handleUpdateThresholdsListType: bindActionCreators(
+    updateThresholdsListType,
+    dispatch
+  ),
+})
+export default connect(mapStateToProps, mapDispatchToProps)(
+  ThresholdsListTypeToggle
+)

ui/src/shared/constants/thresholds.js

@@ -156,7 +156,7 @@ export const validateSingleStatColors = (colors, type) => {
   return containsBaseColor ? formattedColors : formattedColorsWithBase
 }
 
-export const getSingleStatType = colors => {
+export const getThresholdsListType = colors => {
   const type = _.get(colors, ['0', 'type'], false)
 
   if (type) {

ui/test/dashboards/components/TableOptions.test.tsx

@@ -9,7 +9,7 @@ import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
 import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsTextWrapping'
 import GraphOptionsCustomizeColumns from 'src/dashboards/components/GraphOptionsCustomizeColumns'
 import ThresholdsList from 'src/shared/components/ThresholdsList'
-import ThresholdsColorToggle from 'src/dashboards/components/ThresholdsColorToggle'
+import ThresholdsListTypeToggle from 'src/dashboards/components/ThresholdsListTypeToggle'
 
 import {shallow} from 'enzyme'
 
@@ -45,7 +45,7 @@ describe('Dashboards.Components.TableOptions', () => {
         GraphOptionsCustomizeColumns
       )
       const thresholdsList = wrapper.find(ThresholdsList)
-      const thresholdsColorToggle = wrapper.find(ThresholdsColorToggle)
+      const thresholdsColorToggle = wrapper.find(ThresholdsListTypeToggle)
 
       expect(fancyScrollbar.exists()).toBe(true)
       expect(graphOptionsTimeFormat.exists()).toBe(true)

ui/test/dashboards/reducers/cellEditorOverlay.test.js

@@ -6,7 +6,7 @@ import {
   changeCellType,
   renameCell,
   updateSingleStatColors,
-  updateSingleStatType,
+  updateThresholdsListType,
   updateGaugeColors,
   updateAxes,
 } from 'src/dashboards/actions/cellEditorOverlay'
@@ -15,7 +15,7 @@ import {DEFAULT_TABLE_OPTIONS} from 'src/shared/constants/tableGraph'
 import {
   validateGaugeColors,
   validateSingleStatColors,
-  getSingleStatType,
+  getThresholdsListType,
 } from 'shared/constants/thresholds'
 
 const defaultCellType = 'line'
@@ -39,10 +39,10 @@ const defaultCell = {
   tableOptions: DEFAULT_TABLE_OPTIONS,
 }
 
-const defaultSingleStatType = getSingleStatType(defaultCell.colors)
+const defaultThresholdsListType = getThresholdsListType(defaultCell.colors)
 const defaultSingleStatColors = validateSingleStatColors(
   defaultCell.colors,
-  defaultSingleStatType
+  defaultThresholdsListType
 )
 const defaultGaugeColors = validateGaugeColors(defaultCell.colors)
 
@@ -53,14 +53,14 @@ describe('Dashboards.Reducers.cellEditorOverlay', () => {
       cell: defaultCell,
       gaugeColors: defaultGaugeColors,
       singleStatColors: defaultSingleStatColors,
-      singleStatType: defaultSingleStatType,
+      thresholdsListType: defaultThresholdsListType,
       tableOptions: DEFAULT_TABLE_OPTIONS,
     }
 
     expect(actual.cell).toEqual(expected.cell)
     expect(actual.gaugeColors).toBe(expected.gaugeColors)
     expect(actual.singleStatColors).toBe(expected.singleStatColors)
-    expect(actual.singleStatType).toBe(expected.singleStatType)
+    expect(actual.thresholdsListType).toBe(expected.thresholdsListType)
   })
 
   it('should hide cell editor overlay', () => {
@@ -97,11 +97,11 @@ describe('Dashboards.Reducers.cellEditorOverlay', () => {
   it('should toggle the single stat type', () => {
     const actual = reducer(
       initialState,
-      updateSingleStatType(defaultSingleStatType)
+      updateThresholdsListType(defaultThresholdsListType)
     )
-    const expected = defaultSingleStatType
+    const expected = defaultThresholdsListType
 
-    expect(actual.singleStatType).toBe(expected)
+    expect(actual.thresholdsListType).toBe(expected)
   })
 
   it('should update the cell gauge colors', () => {