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

Merge pull request #3797 from influxdata/logs-viewer-polish 

Logs Viewer Polish
pull/10616/head
Alex Paxton 2018-06-28 17:57:53 -07:00 committed by GitHub
parent 086aae9fc7 dd2e84e3b5
commit 5c79654a2f
8 changed files with 27 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/logs/components/LogViewerHeader.tsx
View File

@ -42,7 +42,7 @@ class LogViewerHeader extends PureComponent<Props> {
return (
<>
{this.status}
<PageHeaderTitle title="Logs Viewer" />
<PageHeaderTitle title="Log Viewer" />
</>
)
}

4
ui/src/logs/components/LogsGraphContainer.tsx
View File

@ -3,9 +3,7 @@ import React, {PureComponent} from 'react'
class LogsGraphContainer extends PureComponent {
public render() {
return (
<div className="logs-viewer--graph-container">
<div className="logs-viewer--graph">{this.props.children}</div>
</div>
<div className="logs-viewer--graph-container">{this.props.children}</div>
)
}
}

2
ui/src/shared/components/HistogramChartAxes.tsx
View File

@ -4,7 +4,7 @@ import {ScaleLinear, ScaleTime} from 'd3-scale'
import {Margins} from 'src/types/histogram'
const Y_TICK_COUNT = 5
const Y_TICK_PADDING_RIGHT = 5
const Y_TICK_PADDING_RIGHT = 7
const X_TICK_COUNT = 10
const X_TICK_PADDING_TOP = 8

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

@ -13,7 +13,7 @@ import {
ColorScale,
} from 'src/types/histogram'
const BAR_BORDER_RADIUS = 4
const BAR_BORDER_RADIUS = 3
const BAR_PADDING_SIDES = 4
const HOVER_BRIGTHEN_FACTOR = 0.4
const TOOLTIP_HORIZONTAL_MARGIN = 5

8
ui/src/style/components/dygraphs.scss
View File

@ -48,13 +48,13 @@
}
.dygraph-axis-label-y {
padding: 0 9px 0 0 !important;
text-align: left !important;
text-align: right !important;
left: 0 !important;
user-select: none;
}
.dygraph-axis-label-y2 {
padding: 0 0 0 9px !important;
text-align: right !important;
text-align: left !important;
user-select: none;
}
@ -84,10 +84,10 @@
.graph--hasYLabel {
.dygraph-axis-label-y {
padding: 0 1px 0 16px !important;
padding: 0 4px 0 0 !important;
}
.dygraph-axis-label-y2 {
padding: 0 16px 0 1px !important;
padding: 0 0 0 4px !important;
}
}

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

@ -5,14 +5,14 @@
.histogram-chart-bars--bar {
shape-rendering: crispEdges;
opacity: 1;
pointer: cursor;
cursor: pointer;
}
.histogram-chart--axes, .histogram-chart-skeleton {
.x-label, .y-label {
fill: $g13-mist;
font-size: 12px;
font-weight: bold;
fill: $g11-sidewalk;
font-size: 11px;
font-weight: 600;
}
.x-label {
@ -50,7 +50,7 @@
.histogram-chart-tooltip {
padding: 8px;
background-color: $g0-obsidian;
border-radius: 3px;
border-radius: $radius-small;
@extend %drop-shadow;
font-size: 12px;
font-weight: 600;

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

@ -1,5 +1,5 @@
/*
Styles for Logs Viewer Page
Styles for Log Viewer Page
----------------------------------------------------------------------------
*/
@ -17,7 +17,7 @@ $logs-viewer-gutter: 60px;
}
.logs-viewer--graph-container {
padding: 22px ($logs-viewer-gutter - 16px) 10px ($logs-viewer-gutter - 16px);
padding: 22px $logs-viewer-gutter 10px $logs-viewer-gutter;
height: $logs-viewer-graph-height;
@include gradient-v($g2-kevlar, $g0-obsidian);
display: flex;
@ -214,14 +214,7 @@ $logs-viewer-gutter: 60px;
width: 170px;
}
// Graph
.logs-viewer--graph {
position: relative;
width: 100%;
height: 100%;
padding: 8px 16px;
}
// Table Dots
.logs-viewer--dot {
width: 12px;
height: 12px;

22
ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap
View File

@ -250,7 +250,7 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
<text
className="y-label"
key="0-25-625-380"
x={20}
x={18}
y={380}
>
0
@ -258,7 +258,7 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
<text
className="y-label"
key="0.5-25-625-301.875"
x={20}
x={18}
y={301.875}
>
0.5
@ -266,7 +266,7 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
<text
className="y-label"
key="1-25-625-223.75"
x={20}
x={18}
y={223.75}
>
1
@ -274,7 +274,7 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
<text
className="y-label"
key="1.5-25-625-145.625"
x={20}
x={18}
y={145.625}
>
1.5
@ -282,7 +282,7 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
<text
className="y-label"
key="2-25-625-67.5"
x={20}
x={18}
y={67.5}
>
2
@ -371,9 +371,9 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
id="histogram-chart-bars--clip-1-1-193.5"
>
<rect
height={160.25}
rx={4}
ry={4}
height={159.25}
rx={3}
ry={3}
width={188}
x={193.5}
y={218.75}
@ -405,9 +405,9 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
id="histogram-chart-bars--clip-2-2-481"
>
<rect
height={316.5}
rx={4}
ry={4}
height={315.5}
rx={3}
ry={3}
width={188}
x={481}
y={62.5}