fix(ui): updated table threshold to set background colors for thresholds correctly (#16172)

fix(ui): updated set threshold function to account for table

CHANGELOG.md

@@ -16,10 +16,10 @@
 1. [16101](https://github.com/influxdata/influxdb/pull/16101): Gracefully handle invalid user-supplied JSON
 1. [16105](https://github.com/influxdata/influxdb/pull/16105): Fix crash when loading queries built using Query Builder
 1. [16112](https://github.com/influxdata/influxdb/pull/16112): Create cell view properties on dashboard creation
+1. [16172](https://github.com/influxdata/influxdb/pull/16172): Fixed table ui threshold colorization issue where setting thresholds would not change table UI
 
 ### UI Improvements
 
-
 ## v2.0.0-alpha.20 [2019-11-20]
 
 ### Features
@@ -45,6 +45,7 @@
 1. [15628](https://github.com/influxdata/influxdb/pull/15628): Horizontal scrollbar no longer covering data
 
 ### UI Improvements
+
 1. [15809](https://github.com/influxdata/influxdb/pull/15809): Redesign cards and animations on getting started page
 1. [15787](https://github.com/influxdata/influxdb/pull/15787): Allow the users to filter with labels in telegraph input search
 

ui/src/shared/components/tables/TableCell.tsx

@@ -92,7 +92,7 @@ class TableCell extends PureComponent<Props> {
       'table-graph-cell__fixed-corner': this.isFixedCorner,
       'table-graph-cell__highlight-row': this.isHighlightedRow,
       'table-graph-cell__highlight-column': this.isHighlightedColumn,
-      'table-graph-cell__numerical': this.isNumerical,
+      'table-graph-cell__numerical': !this.isNaN,
       'table-graph-cell__field-name': this.isFieldName,
       'table-graph-cell__sort-asc':
         this.isFieldName && this.isSorted && this.isAscending,
@@ -137,8 +137,12 @@ class TableCell extends PureComponent<Props> {
     return this.isFirstRow && this.isFirstCol
   }
 
-  private get isNumerical(): boolean {
-    return !isNaN(Number.parseFloat(this.props.data))
+  private get isTimestamp(): boolean {
+    return this.props.dataType === 'dateTime:RFC3339'
+  }
+
+  private get isNaN(): boolean {
+    return isNaN(Number(this.props.data))
   }
 
   private get isFixed(): boolean {
@@ -165,13 +169,12 @@ class TableCell extends PureComponent<Props> {
     const {style, properties, data} = this.props
     const {colors} = properties
 
-    if (this.isFixed || this.isTimeData || this.isNumerical) {
+    if (this.isFixed || this.isTimeData || this.isTimestamp || this.isNaN) {
       return style
     }
 
     const thresholdData = {colors, lastValue: data, cellType: 'table'}
     const {bgColor, textColor} = generateThresholdsListHexs(thresholdData)
-
     return {
       ...style,
       backgroundColor: bgColor,

ui/src/shared/constants/colorOperations.ts

@@ -71,6 +71,9 @@ export const generateThresholdsListHexs = ({
   )
 
   if (shouldColorizeText && colors.length === 1 && baseColor) {
+    if (cellType === 'table') {
+      return {textColor: '#000', bgColor: baseColor.hex}
+    }
     return {bgColor: null, textColor: baseColor.hex}
   }
 
@@ -85,6 +88,10 @@ export const generateThresholdsListHexs = ({
       lastValueNumber
     )
 
+    if (cellType === 'table') {
+      return {textColor: '#000', bgColor: nearestCrossedThreshold.hex}
+    }
+
     return {bgColor: null, textColor: nearestCrossedThreshold.hex}
   }
 

ui/src/timeMachine/reducers/index.ts

@@ -518,6 +518,7 @@ export const timeMachineReducer = (
 
       switch (state.view.properties.type) {
         case 'gauge':
+        case 'table':
         case 'single-stat':
         case 'scatter':
         case 'check':