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

Improve the overall UX for the new monitoring dashboard

See merge request !12616

3 files changed, 22 insertions, 10 deletions

diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue
index e933634643b..0f33581ec52 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)