Commit fcbee9e5 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Improve the overall UX for the new monitoring dashboard

parent c8eef2d2
......@@ -35,7 +35,7 @@
data() {
return {
graphHeight: 500,
graphHeight: 450,
graphWidth: 600,
graphHeightOffset: 120,
xScale: {},
......@@ -88,7 +88,9 @@
},
paddingBottomRootSvg() {
return (Math.ceil(this.graphHeight * 100) / this.graphWidth) || 0;
return {
paddingBottom: `${(Math.ceil(this.graphHeight * 100) / this.graphWidth) || 0}%`,
};
},
},
......@@ -198,7 +200,7 @@
watch: {
updateAspectRatio() {
if (this.updateAspectRatio) {
this.graphHeight = 500;
this.graphHeight = 450;
this.graphWidth = 600;
this.measurements = measurements.large;
this.draw();
......@@ -216,14 +218,14 @@
<div
:class="classType">
<h5
class="text-center">
class="text-center graph-title">
{{columnData.title}}
</h5>
<div
class="prometheus-svg-container">
<div
class="prometheus-svg-container"
:style="paddingBottomRootSvg">
<svg
:viewBox="outterViewBox"
:style="{ 'padding-bottom': paddingBottomRootSvg }"
ref="baseSvg">
<g
class="x-axis"
......
......@@ -254,7 +254,7 @@
.text-metric-usage {
fill: $black;
font-weight: 500;
font-size: 14px;
font-size: 12px;
}
.legend-axis-text {
......@@ -262,7 +262,11 @@
}
.tick > text {
font-size: 14px;
font-size: 12px;
}
.text-metric-title {
font-size: 12px;
}
@media (max-width: $screen-sm-max) {
......@@ -277,3 +281,9 @@
}
}
}
.prometheus-row {
h5 {
font-size: 16px;
}
}
......@@ -10,7 +10,7 @@
.top-area
.row
.col-sm-6
%h3.page-title
%h3
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