Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Dynamically render severity colors in log viewer 

In preparation of #3753.
pull/10616/head
Christopher Henn 2018-06-27 15:14:35 -07:00
parent 0648fec8ae
commit 22fc703079
10 changed files with 61 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/package.json
View File

@ -37,6 +37,7 @@
"@types/chai": "^4.1.2",
"@types/chroma-js": "^1.3.4",
"@types/codemirror": "^0.0.56",
"@types/d3-color": "^1.2.1",
"@types/d3-scale": "^2.0.1",
"@types/dygraphs": "^1.1.6",
"@types/enzyme": "^3.1.9",
@ -129,6 +130,7 @@
"chroma-js": "^1.3.6",
"classnames": "^2.2.3",
"codemirror": "^5.36.0",
"d3-color": "^1.2.0",
"d3-scale": "^2.1.0",
"dygraphs": "2.1.0",
"enzyme-adapter-react-16": "^1.1.1",

17
ui/src/logs/components/LogsTable.tsx
View File

@ -1,11 +1,14 @@
import _ from 'lodash'
import moment from 'moment'
import classnames from 'classnames'
import React, {Component, MouseEvent} from 'react'
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 {getDeep} from 'src/utils/wrappers'
import {colorForSeverity} from 'src/logs/utils/colors'
import {
getColumnFromData,
getValueFromData,
@ -346,6 +349,7 @@ class LogsTable extends Component<Props, State> {
title={value}
onMouseOver={this.handleMouseEnter}
data-index={rowIndex}
style={this.severityDotStyle(value)}
/>
)
} else {
@ -395,6 +399,17 @@ class LogsTable extends Component<Props, State> {
)
}
private severityDotStyle = (severity: string): CSSProperties => {
const severityColor = colorForSeverity(severity)
const brightSeverityColor = color(severityColor)
.brighter(0.5)
.hex()
return {
background: `linear-gradient(45deg, ${severityColor}, ${brightSeverityColor}`,
}
}
private handleMouseEnter = (e: MouseEvent<HTMLElement>): void => {
const target = e.target as HTMLElement
this.setState({currentRow: +target.dataset.index})

2
ui/src/logs/containers/LogsPage.tsx
View File

@ -24,6 +24,7 @@ import SearchBar from 'src/logs/components/LogsSearchBar'
import FilterBar from 'src/logs/components/LogsFilterBar'
import LogsTable from 'src/logs/components/LogsTable'
import {getDeep} from 'src/utils/wrappers'
import {colorForSeverity} from 'src/logs/utils/colors'
import {Source, Namespace, TimeRange, RemoteDataState} from 'src/types'
import {Filter} from 'src/types/logs'
@ -189,6 +190,7 @@ class LogsPage extends PureComponent<Props, State> {
dataStatus={histogramDataStatus}
width={width}
height={height}
colorScale={colorForSeverity}
onZoom={this.handleChartZoom}
/>
)}

16
ui/src/logs/utils/colors.ts Normal file
View File

@ -0,0 +1,16 @@
const SEVERITY_COLORS = {
emergency: '#BF3D5E',
alert: '#DC4E58',
critical: '#F95F53',
error: '#F48D38',
warning: '#FFB94A',
notice: '#4ED8A0',
info: '#7A65F2',
debug: '#8E91A1',
}
const DEFAULT_SEVERITY_COLOR = '#7A65F2'
export const colorForSeverity = (severity: string): string => {
return SEVERITY_COLORS[severity] || DEFAULT_SEVERITY_COLOR
}

5
ui/src/shared/components/HistogramChart.tsx
View File

@ -35,6 +35,7 @@ interface Props {
dataStatus: RemoteDataState
width: number
height: number
colorScale: (group: string) => string
onZoom: (TimePeriod) => void
}
@ -53,7 +54,7 @@ class HistogramChart extends PureComponent<Props, State> {
}
public render() {
const {width, height, data} = this.props
const {width, height, data, colorScale} = this.props
const {margins} = this
if (width === 0 || height === 0) {
@ -122,6 +123,8 @@ class HistogramChart extends PureComponent<Props, State> {
data={data}
xScale={xScale}
yScale={yScale}
hoverDatum={hoverDatum}
colorScale={colorScale}
/>
</g>
</svg>

16
ui/src/shared/components/HistogramChartBars.tsx
View File

@ -1,11 +1,13 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import {ScaleLinear, ScaleTime} from 'd3-scale'
import {color} from 'd3-color'
import {HistogramData, HistogramDatum} from 'src/types/histogram'
const BAR_BORDER_RADIUS = 4
const BAR_PADDING_SIDES = 4
const HOVER_BRIGTHEN_FACTOR = 0.4
interface Props {
width: number
@ -13,6 +15,8 @@ interface Props {
data: HistogramData
xScale: ScaleTime<number, number>
yScale: ScaleLinear<number, number>
colorScale: (group: string) => string
hoverDatum?: HistogramDatum
}
class HistogramChartBars extends PureComponent<Props> {
@ -42,6 +46,7 @@ class HistogramChartBars extends PureComponent<Props> {
y={d.y}
width={d.width}
height={d.height}
fill={d.fill}
clipPath={`url(#histogram-chart-bars--clip-${key})`}
data-group={d.group}
data-key={d.key}
@ -53,7 +58,7 @@ class HistogramChartBars extends PureComponent<Props> {
}
private get renderData() {
const {data, xScale, yScale} = this.props
const {data, xScale, yScale, colorScale, hoverDatum} = this.props
const {barWidth, sortFn} = this
const visibleData = data.filter(d => d.value !== 0)
@ -84,6 +89,14 @@ class HistogramChartBars extends PureComponent<Props> {
group.forEach((d: HistogramDatum) => {
const height = yScale(0) - yScale(d.value)
let fill = colorScale(d.group)
if (!!hoverDatum && hoverDatum.key === d.key) {
fill = color(fill)
.brighter(HOVER_BRIGTHEN_FACTOR)
.hex()
}
renderData.bars.push({
key: d.key,
group: d.group,
@ -91,6 +104,7 @@ class HistogramChartBars extends PureComponent<Props> {
y: yScale(d.value) - offset,
width: barWidth,
height,
fill,
})
offset += height

6
ui/src/shared/components/HistogramChartTooltip.tsx
View File

@ -28,11 +28,7 @@ const HistogramChartTooltip: SFC<Props> = props => {
}
return (
<div
className="histogram-chart-tooltip"
style={style}
data-group={datum.group}
>
<div className="histogram-chart-tooltip" style={style}>
<div className="histogram-chart-tooltip--value">{datum.value}</div>
<div className="histogram-chart-tooltip--group">{datum.group}</div>
</div>

2
ui/src/style/components/histogram-chart.scss
View File

@ -35,10 +35,8 @@
.histogram-chart-bars--bar {
shape-rendering: crispEdges;
fill: $c-amethyst;
opacity: 1;
pointer: cursor;
shape-rendering: crispEdges;
}
.histogram-chart--axes, .histogram-chart-skeleton {

118
ui/src/style/pages/logs-viewer.scss
View File

@ -9,23 +9,6 @@ $logs-viewer-filter-height: 42px;
$logs-viewer-results-text-indent: 33px;
$logs-viewer-gutter: 60px;
$severity-emerg: $c-ruby;
$severity-alert: $c-fire;
$severity-crit: $c-curacao;
$severity-err: $c-tiger;
$severity-warning: $c-pineapple;
$severity-notice: $c-rainforest;
$severity-info: $c-star;
$severity-debug: $g9-mountain;
$severity-emerg-intense: $c-fire;
$severity-alert-intense: $c-curacao;
$severity-crit-intense: $c-tiger;
$severity-err-intense: $c-pineapple;
$severity-warning-intense: $c-thunder;
$severity-notice-intense: $c-honeydew;
$severity-info-intense: $c-comet;
$severity-debug-intense: $g10-wolf;
.logs-viewer {
display: flex;
flex-direction: column;
@ -247,31 +230,6 @@ $severity-debug-intense: $g10-wolf;
background-color: $g0-obsidian;
border: 2px solid $g3-castle;
margin-left: 2px;
&.emerg-severity {
@include gradient-diag-up($severity-emerg, $severity-emerg-intense);
}
&.alert-severity {
@include gradient-diag-up($severity-alert, $severity-alert-intense);
}
&.crit-severity {
@include gradient-diag-up($severity-crit, $severity-crit-intense);
}
&.err-severity {
@include gradient-diag-up($severity-err, $severity-err-intense);
}
&.warning-severity {
@include gradient-diag-up($severity-warning, $severity-warning-intense);
}
&.notice-severity {
@include gradient-diag-up($severity-notice, $severity-notice-intense);
}
&.info-severity {
@include gradient-diag-up($severity-info, $severity-info-intense);
}
&.debug-severity {
@include gradient-diag-up($severity-debug, $severity-debug-intense);
}
}
// Play & Pause Toggle in Header
@ -327,79 +285,3 @@ $severity-debug-intense: $g10-wolf;
background-color: $c-laser;
}
}
.logs-viewer .histogram-chart-bars--bar, .logs-viewer .histogram-chart-tooltip {
&[data-group="emerg"] {
fill: $severity-emerg;
color: $severity-emerg;
}
&[data-group="alert"] {
fill: $severity-alert;
color: $severity-alert;
}
&[data-group="crit"] {
fill: $severity-crit;
color: $severity-crit;
}
&[data-group="err"] {
fill: $severity-err;
color: $severity-err;
}
&[data-group="warning"] {
fill: $severity-warning;
color: $severity-warning;
}
&[data-group="notice"] {
fill: $severity-notice;
color: $severity-notice;
}
&[data-group="info"] {
fill: $severity-info;
color: $severity-info;
}
&[data-group="debug"] {
fill: $severity-debug;
color: $severity-debug;
}
}
.logs-viewer .histogram-chart-bars--bar:hover {
&[data-group="emerg"] {
fill: $severity-emerg-intense;
}
&[data-group="alert"] {
fill: $severity-alert-intense;
}
&[data-group="crit"] {
fill: $severity-crit-intense;
}
&[data-group="err"] {
fill: $severity-err-intense;
}
&[data-group="warning"] {
fill: $severity-warning-intense;
}
&[data-group="notice"] {
fill: $severity-notice-intense;
}
&[data-group="info"] {
fill: $severity-info-intense;
}
&[data-group="debug"] {
fill: $severity-debug-intense;
}
}

6
ui/yarn.lock
View File

@ -32,6 +32,10 @@
version "0.0.56"
resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.56.tgz#1fcf68df0d0a49791d843dadda7d94891ac88669"
"@types/d3-color@^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-1.2.1.tgz#26141c3c554e320edd40726b793570a3ae57397e"
"@types/d3-scale@^2.0.1":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-2.0.1.tgz#f94cd991c50422b2e68d8f43be3f9fffdb1ae7be"
@ -2624,7 +2628,7 @@ d3-collection@1:
version "1.0.4"
resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"
d3-color@1:
d3-color@1, d3-color@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.2.0.tgz#d1ea19db5859c86854586276ec892cf93148459a"