diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ea8b7fd0e..fb0ba6c457 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,14 @@ ## 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] @@ -21,6 +22,10 @@ - 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. [#4856](https://github.com/influxdata/chronograf/pull/4856): Fix single stat graphs decimal places when using flux +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 @@ -38,6 +43,9 @@ 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. [#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 diff --git a/ui/src/logs/components/LogsTable.tsx b/ui/src/logs/components/LogsTable.tsx index 789f981a58..be5661a835 100644 --- a/ui/src/logs/components/LogsTable.tsx +++ b/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 { 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}`, diff --git a/ui/src/logs/utils/colors.ts b/ui/src/logs/utils/colors.ts index 4a35f3a431..1cb20d5272 100644 --- a/ui/src/logs/utils/colors.ts +++ b/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 +} diff --git a/ui/src/shared/components/HistogramChartBars.tsx b/ui/src/shared/components/HistogramChartBars.tsx index c8e8c16c1b..a103f98d6f 100644 --- a/ui/src/shared/components/HistogramChartBars.tsx +++ b/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, diff --git a/ui/test/logs/utils/colors.test.ts b/ui/test/logs/utils/colors.test.ts new file mode 100644 index 0000000000..9ddd7304b9 --- /dev/null +++ b/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') + }) + }) +})