summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJose Ivan Vargas <jvargas@gitlab.com>2017-07-03 13:22:26 -0500
committerJose Ivan Vargas <jvargas@gitlab.com>2017-07-04 10:32:39 -0500
commitfcbee9e5cdbb3347941c80dc357067d12be38f2e (patch)
tree35cabe02c0f39a274410965590282d33e682c429
parentc8eef2d2a62f6ac7304c8ab4d50282613e21ec8a (diff)
downloadgitlab-ce-fcbee9e5cdbb3347941c80dc357067d12be38f2e.tar.gz
Improve the overall UX for the new monitoring dashboardmonitoring-dashboard-fine-tuning-ux
-rw-r--r--app/assets/javascripts/monitoring/components/monitoring_column.vue16
-rw-r--r--app/assets/stylesheets/pages/environments.scss14
-rw-r--r--app/views/projects/environments/metrics.html.haml2
-rw-r--r--changelogs/unreleased/monitoring-dashboard-fine-tuning-ux.yml4
4 files changed, 26 insertions, 10 deletions
diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue
index 4f4792877ee..1d1cb8566dd 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_column.vue
+++ b/app/assets/javascripts/monitoring/components/monitoring_column.vue
@@ -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"
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index a2be957655f..e9a679b20c2 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -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;
+ }
+}
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
index c5722cf5997..3aa41174b74 100644
--- a/app/views/projects/environments/metrics.html.haml
+++ b/app/views/projects/environments/metrics.html.haml
@@ -10,7 +10,7 @@
.top-area
.row
.col-sm-6
- %h3.page-title
+ %h3
Environment:
= link_to @environment.name, environment_path(@environment)
diff --git a/changelogs/unreleased/monitoring-dashboard-fine-tuning-ux.yml b/changelogs/unreleased/monitoring-dashboard-fine-tuning-ux.yml
new file mode 100644
index 00000000000..f84d41b7929
--- /dev/null
+++ b/changelogs/unreleased/monitoring-dashboard-fine-tuning-ux.yml
@@ -0,0 +1,4 @@
+---
+title: Improve the overall UX for the new monitoring dashboard
+merge_request:
+author: