Commit dddfa49d authored by Phil Hughes's avatar Phil Hughes

Merge branch 'monitoring-dashboard-fine-tuning-ux' into 'master'

Improve the overall UX for the new monitoring dashboard

See merge request !12616
parents 5af1fcd6 fcbee9e5
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
data() { data() {
return { return {
graphHeight: 500, graphHeight: 450,
graphWidth: 600, graphWidth: 600,
graphHeightOffset: 120, graphHeightOffset: 120,
xScale: {}, xScale: {},
...@@ -88,7 +88,9 @@ ...@@ -88,7 +88,9 @@
}, },
paddingBottomRootSvg() { paddingBottomRootSvg() {
return (Math.ceil(this.graphHeight * 100) / this.graphWidth) || 0; return {
paddingBottom: `${(Math.ceil(this.graphHeight * 100) / this.graphWidth) || 0}%`,
};
}, },
}, },
...@@ -198,7 +200,7 @@ ...@@ -198,7 +200,7 @@
watch: { watch: {
updateAspectRatio() { updateAspectRatio() {
if (this.updateAspectRatio) { if (this.updateAspectRatio) {
this.graphHeight = 500; this.graphHeight = 450;
this.graphWidth = 600; this.graphWidth = 600;
this.measurements = measurements.large; this.measurements = measurements.large;
this.draw(); this.draw();
...@@ -216,14 +218,14 @@ ...@@ -216,14 +218,14 @@
<div <div
:class="classType"> :class="classType">
<h5 <h5
class="text-center"> class="text-center graph-title">
{{columnData.title}} {{columnData.title}}
</h5> </h5>
<div <div
class="prometheus-svg-container"> class="prometheus-svg-container"
:style="paddingBottomRootSvg">
<svg <svg
:viewBox="outterViewBox" :viewBox="outterViewBox"
:style="{ 'padding-bottom': paddingBottomRootSvg }"
ref="baseSvg"> ref="baseSvg">
<g <g
class="x-axis" class="x-axis"
......
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
.text-metric-usage { .text-metric-usage {
fill: $black; fill: $black;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 12px;
} }
.legend-axis-text { .legend-axis-text {
...@@ -262,7 +262,11 @@ ...@@ -262,7 +262,11 @@
} }
.tick > text { .tick > text {
font-size: 14px; font-size: 12px;
}
.text-metric-title {
font-size: 12px;
} }
@media (max-width: $screen-sm-max) { @media (max-width: $screen-sm-max) {
...@@ -277,3 +281,9 @@ ...@@ -277,3 +281,9 @@
} }
} }
} }
.prometheus-row {
h5 {
font-size: 16px;
}
}
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
.top-area .top-area
.row .row
.col-sm-6 .col-sm-6
%h3.page-title %h3
Environment: Environment:
= link_to @environment.name, environment_path(@environment) = link_to @environment.name, environment_path(@environment)
......
---
title: Improve the overall UX for the new monitoring dashboard
merge_request:
author:
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment