diff options
| author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-07-03 13:22:26 -0500 |
|---|---|---|
| committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-07-04 10:32:39 -0500 |
| commit | fcbee9e5cdbb3347941c80dc357067d12be38f2e (patch) | |
| tree | 35cabe02c0f39a274410965590282d33e682c429 | |
| parent | c8eef2d2a62f6ac7304c8ab4d50282613e21ec8a (diff) | |
| download | gitlab-ce-monitoring-dashboard-fine-tuning-ux.tar.gz | |
Improve the overall UX for the new monitoring dashboardmonitoring-dashboard-fine-tuning-ux
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: |