From 87feb2ca80ec39415d72038b77edc3a0401b70b4 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 28 Jun 2018 15:22:03 -0700 Subject: [PATCH 1/5] Remove unnecessary div --- ui/src/logs/components/LogsGraphContainer.tsx | 4 +--- ui/src/style/pages/logs-viewer.scss | 11 ++--------- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/ui/src/logs/components/LogsGraphContainer.tsx b/ui/src/logs/components/LogsGraphContainer.tsx index 94ddd8d5eb..2d0f8586aa 100644 --- a/ui/src/logs/components/LogsGraphContainer.tsx +++ b/ui/src/logs/components/LogsGraphContainer.tsx @@ -3,9 +3,7 @@ import React, {PureComponent} from 'react' class LogsGraphContainer extends PureComponent { public render() { return ( -
-
{this.props.children}
-
+
{this.props.children}
) } } diff --git a/ui/src/style/pages/logs-viewer.scss b/ui/src/style/pages/logs-viewer.scss index 2b59b4722e..19c8902dbf 100644 --- a/ui/src/style/pages/logs-viewer.scss +++ b/ui/src/style/pages/logs-viewer.scss @@ -34,7 +34,7 @@ $severity-debug-intense: $g10-wolf; } .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; @@ -231,14 +231,7 @@ $severity-debug-intense: $g10-wolf; width: 170px; } -// Graph -.logs-viewer--graph { - position: relative; - width: 100%; - height: 100%; - padding: 8px 16px; -} - +// Table Dots .logs-viewer--dot { width: 12px; height: 12px; From 504b4fd6e559a471c983dd930283ca4b86ed25af Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 28 Jun 2018 15:22:49 -0700 Subject: [PATCH 2/5] Make histogram axis labels match dygraphs axis labels --- ui/src/shared/components/HistogramChartAxes.tsx | 2 +- ui/src/shared/components/HistogramChartBars.tsx | 2 +- ui/src/style/components/dygraphs.scss | 8 ++++---- ui/src/style/components/histogram-chart.scss | 10 +++++----- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ui/src/shared/components/HistogramChartAxes.tsx b/ui/src/shared/components/HistogramChartAxes.tsx index 1923750bd5..346352c02d 100644 --- a/ui/src/shared/components/HistogramChartAxes.tsx +++ b/ui/src/shared/components/HistogramChartAxes.tsx @@ -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 diff --git a/ui/src/shared/components/HistogramChartBars.tsx b/ui/src/shared/components/HistogramChartBars.tsx index bbf388d47f..451042798f 100644 --- a/ui/src/shared/components/HistogramChartBars.tsx +++ b/ui/src/shared/components/HistogramChartBars.tsx @@ -4,7 +4,7 @@ import {ScaleLinear, ScaleTime} from 'd3-scale' import {HistogramData, HistogramDatum} from 'src/types/histogram' -const BAR_BORDER_RADIUS = 4 +const BAR_BORDER_RADIUS = 3 const BAR_PADDING_SIDES = 4 interface Props { diff --git a/ui/src/style/components/dygraphs.scss b/ui/src/style/components/dygraphs.scss index fa194b789b..a07992e509 100644 --- a/ui/src/style/components/dygraphs.scss +++ b/ui/src/style/components/dygraphs.scss @@ -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; } } diff --git a/ui/src/style/components/histogram-chart.scss b/ui/src/style/components/histogram-chart.scss index c04e41a993..853c81affc 100644 --- a/ui/src/style/components/histogram-chart.scss +++ b/ui/src/style/components/histogram-chart.scss @@ -37,15 +37,15 @@ shape-rendering: crispEdges; fill: $c-amethyst; opacity: 1; - pointer: cursor; + cursor: pointer; shape-rendering: crispEdges; } .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 { @@ -83,7 +83,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; From bc30dcc7bc6105dee9a8c1011240c8fc409f1e3d Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 28 Jun 2018 15:25:47 -0700 Subject: [PATCH 3/5] Make navbar label consistent with page heading --- ui/src/side_nav/containers/SideNav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/side_nav/containers/SideNav.tsx b/ui/src/side_nav/containers/SideNav.tsx index ee609fb5aa..ffb040d32c 100644 --- a/ui/src/side_nav/containers/SideNav.tsx +++ b/ui/src/side_nav/containers/SideNav.tsx @@ -121,7 +121,7 @@ class SideNav extends PureComponent { link="/logs" location={location} > - + Date: Thu, 28 Jun 2018 15:32:02 -0700 Subject: [PATCH 4/5] Unpluralize page title --- ui/src/logs/components/LogViewerHeader.tsx | 2 +- ui/src/side_nav/containers/SideNav.tsx | 2 +- ui/src/style/pages/logs-viewer.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx index 46add50d06..2d8dff2f01 100644 --- a/ui/src/logs/components/LogViewerHeader.tsx +++ b/ui/src/logs/components/LogViewerHeader.tsx @@ -42,7 +42,7 @@ class LogViewerHeader extends PureComponent { return ( <> {this.status} - + ) } diff --git a/ui/src/side_nav/containers/SideNav.tsx b/ui/src/side_nav/containers/SideNav.tsx index ffb040d32c..ee609fb5aa 100644 --- a/ui/src/side_nav/containers/SideNav.tsx +++ b/ui/src/side_nav/containers/SideNav.tsx @@ -121,7 +121,7 @@ class SideNav extends PureComponent { link="/logs" location={location} > - + Date: Thu, 28 Jun 2018 16:55:36 -0700 Subject: [PATCH 5/5] Update test snapshot --- .../HistogramChart.test.tsx.snap | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap b/ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap index 21c90d3427..693f0f9cef 100644 --- a/ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap +++ b/ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap @@ -250,7 +250,7 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is 0 @@ -258,7 +258,7 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is 0.5 @@ -266,7 +266,7 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is 1 @@ -274,7 +274,7 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is 1.5 @@ -282,7 +282,7 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is 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" >