fix(logs): fix log color utils (#4909)

* fix(logs): fix log color utils

CHANGELOG.md

@@ -1,30 +1,31 @@
 ## v1.7.6 [unreleased]
 
 ### Bug Fixes
-1. [4895](https://github.com/influxdata/chronograf/pull/4895): Properly set scroll to row for table graph
-1. [4906](https://github.com/influxdata/chronograf/pull/4906): Prevent Kapacitor URLs from being overwritten in Connection Wizard.
+1. [#4895](https://github.com/influxdata/chronograf/pull/4895): Properly set scroll to row for table graph
+1. [#4906](https://github.com/influxdata/chronograf/pull/4906): Prevent Kapacitor URLs from being overwritten in Connection Wizard.
+1. [#4862](https://github.com/influxdata/chronograf/pull/4909): Fix logs intermitently show empty on first load
 
 ## v1.7.5 [2018-12-14]
 
 ### Bug Fixes
-1. [4886](https://github.com/influxdata/chronograf/pull/4886): Update go, node, and alpine versions
+1. [#4886](https://github.com/influxdata/chronograf/pull/4886): Update go, node, and alpine versions
 
 ## v1.7.4 [2018-12-12]
 
 ### Features
 
 ### Bug Fixes
-1. [4814](https://github.com/influxdata/chronograf/pull/4814): Fix logs page getting stuck on scroll to top
-1. [4819](https://github.com/influxdata/chronograf/pull/4819): Fix momentary display of fallback notes while dashboard is loading
-1. [4819](https://github.com/influxdata/chronograf/pull/4819): Fix issue displaying UUIDs in table cells
-1. [4854](https://github.com/influxdata/chronograf/pull/4854): Update functions list for Flux 0.7.1
-1. [4846](https://github.com/influxdata/chronograf/pull/4846): Fix missing data and type in refreshing graph
-1. [4861](https://github.com/influxdata/chronograf/pull/4861): Fix logs stuck in loading state
-1. [4847](https://github.com/influxdata/chronograf/pull/4847): Improve display of Flux Wizard on small screens
-1. [4863](https://github.com/influxdata/chronograf/pull/4863): Update logs histogram data on click and new search
-1. [4872](https://github.com/influxdata/chronograf/pull/4872): Prevent cell renaming widget from pushing other header elements offscreen
-1. [4877](https://github.com/influxdata/chronograf/pull/4877): Fix flux editor scrollbars
-1. [4840](https://github.com/influxdata/chronograf/pull/4840): Use valid characters for sensu ids
+1. [#4814](https://github.com/influxdata/chronograf/pull/4814): Fix logs page getting stuck on scroll to top
+1. [#4819](https://github.com/influxdata/chronograf/pull/4819): Fix momentary display of fallback notes while dashboard is loading
+1. [#4819](https://github.com/influxdata/chronograf/pull/4819): Fix issue displaying UUIDs in table cells
+1. [#4854](https://github.com/influxdata/chronograf/pull/4854): Update functions list for Flux 0.7.1
+1. [#4846](https://github.com/influxdata/chronograf/pull/4846): Fix missing data and type in refreshing graph
+1. [#4861](https://github.com/influxdata/chronograf/pull/4861): Fix logs stuck in loading state
+1. [#4847](https://github.com/influxdata/chronograf/pull/4847): Improve display of Flux Wizard on small screens
+1. [#4863](https://github.com/influxdata/chronograf/pull/4863): Update logs histogram data on click and new search
+1. [#4872](https://github.com/influxdata/chronograf/pull/4872): Prevent cell renaming widget from pushing other header elements offscreen
+1. [#4877](https://github.com/influxdata/chronograf/pull/4877): Fix flux editor scrollbars
+1. [#4840](https://github.com/influxdata/chronograf/pull/4840): Use valid characters for sensu ids
 
 ### UI Improvements
 1. [#4809](https://github.com/influxdata/chronograf/pull/4809): Add loading spinners while fetching protoboards

ui/src/logs/components/LogsTable.tsx

@@ -3,7 +3,6 @@ import moment from 'moment'
 import classnames from 'classnames'
 import React, {Component, MouseEvent, CSSProperties} from 'react'
 import {Grid, AutoSizer, InfiniteLoader} from 'react-virtualized'
-import {color} from 'd3-color'
 
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import ExpandableMessage from 'src/logs/components/expandable_message/ExpandableMessage'
@@ -11,7 +10,7 @@ import LogsMessage from 'src/logs/components/logs_message/LogsMessage'
 import LoadingStatus from 'src/logs/components/loading_status/LoadingStatus'
 import {getDeep} from 'src/utils/wrappers'
 
-import {colorForSeverity} from 'src/logs/utils/colors'
+import {colorForSeverity, getBrighterColor} from 'src/logs/utils/colors'
 import {
   ROW_HEIGHT,
   calculateRowCharWidth,
@@ -593,9 +592,7 @@ class LogsTable extends Component<Props, State> {
     level: SeverityLevelOptions
   ): CSSProperties => {
     const severityColor = colorForSeverity(colorName, level)
-    const brightSeverityColor = color(severityColor)
-      .brighter(0.5)
-      .hex()
+    const brightSeverityColor = getBrighterColor(0.5, severityColor)
 
     return {
       background: `linear-gradient(45deg, ${severityColor}, ${brightSeverityColor}`,

ui/src/logs/utils/colors.ts

@@ -1,3 +1,5 @@
+import {color} from 'd3-color'
+
 import {SeverityColorValues, DEFAULT_SEVERITY_LEVELS} from 'src/logs/constants'
 
 import {ColorScale} from 'src/types/histogram'
@@ -10,7 +12,17 @@ export const colorForSeverity: ColorScale = (
 ): string => {
   return (
     SeverityColorValues[colorName] ||
-    DEFAULT_SEVERITY_LEVELS[severityLevel] ||
+    SeverityColorValues[DEFAULT_SEVERITY_LEVELS[severityLevel]] ||
     DEFAULT_COLOR_VALUE
   )
 }
+
+export const getBrighterColor = (factor: number, value?: string) => {
+  const colorValue = color(value)
+
+  if (!!colorValue) {
+    return colorValue.brighter(factor).hex()
+  }
+
+  return DEFAULT_COLOR_VALUE
+}

ui/src/shared/components/HistogramChartBars.tsx

@@ -1,10 +1,10 @@
 import React, {PureComponent, MouseEvent} from 'react'
 import _ from 'lodash'
 import {ScaleLinear, ScaleTime} from 'd3-scale'
-import {color} from 'd3-color'
 
 import {getDeep} from 'src/utils/wrappers'
 import {clipPathUrl} from 'src/utils/svg'
+import {getBrighterColor} from 'src/logs/utils/colors'
 
 import {
   HistogramData,
@@ -99,9 +99,8 @@ const getBarGroups = ({
       const height = yScale(0) - yScale(d.value)
       const k = hoverDataKeys.includes(d.key) ? HOVER_BRIGTHEN_FACTOR : 0
       const groupColor = colors.find(c => c.group === d.group)
-      const fill = color(colorScale(_.get(groupColor, 'color', ''), d.group))
-        .brighter(k)
-        .hex()
+      const scaledColor = colorScale(_.get(groupColor, 'color', ''), d.group)
+      const fill = getBrighterColor(k, scaledColor)
 
       barGroup.bars.push({
         key: d.key,

ui/test/logs/utils/colors.test.ts

@@ -0,0 +1,50 @@
+import {colorForSeverity, getBrighterColor} from 'src/logs/utils/colors'
+import {SeverityColorValues} from 'src/logs/constants'
+
+describe('Logs.Utils.colors', () => {
+  describe('.colorForSeverity', () => {
+    it('can get a color for just a color name', () => {
+      const actual = colorForSeverity('comet', null)
+
+      expect(actual).toEqual(SeverityColorValues.comet)
+    })
+
+    it('can get a color for just a severity level', () => {
+      const actual = colorForSeverity(null, 'emerg')
+
+      expect(actual).toEqual(SeverityColorValues.ruby)
+    })
+
+    it('can return a default color value', () => {
+      const actual = colorForSeverity(null, null)
+
+      expect(actual).toEqual(SeverityColorValues.star)
+    })
+  })
+
+  describe('.getBrighterColor', () => {
+    it('can handle an unrecognized hex color value', () => {
+      const actual = getBrighterColor(0.5, 'beep')
+
+      expect(actual).toEqual(SeverityColorValues.star)
+    })
+
+    it('can handle a null color', () => {
+      const actual = getBrighterColor(0.5, null)
+
+      expect(actual).toEqual(SeverityColorValues.star)
+    })
+
+    it('can handle an empty color value', () => {
+      const actual = getBrighterColor(0.5, null)
+
+      expect(actual).toEqual(SeverityColorValues.star)
+    })
+
+    it('can handle a color name', () => {
+      const actual = getBrighterColor(0.5, 'blue')
+
+      expect(actual).toEqual('#0000ff')
+    })
+  })
+})