Cleanup minor UX issues in the performance dashboard

6 files changed, 40 insertions, 23 deletions

diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue
index 0f33581ec52..0cd62053d14 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_column.vue
+++ b/app/assets/javascripts/monitoring/components/monitoring_column.vue
@@ -159,12 +159,12 @@
 
         const xAxis = d3.svg.axis()
           .scale(axisXScale)
-          .ticks(measurements.ticks)
+          .ticks(measurements.xTicks)
           .orient('bottom');
 
         const yAxis = d3.svg.axis()
           .scale(this.yScale)
-          .ticks(measurements.ticks)
+          .ticks(measurements.yTicks)
           .orient('left');
 
         d3.select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
@@ -172,8 +172,12 @@
         const width = this.graphWidth;
         d3.select(this.$refs.baseSvg).select('.y-axis').call(yAxis)
           .selectAll('.tick')
-          .each(function createTickLines() {
-            d3.select(this).select('line').attr('x2', width);
+          .each(function createTickLines(d, i) {
+            if (i > 0) {
+              d3.select(this).select('line')
+                .attr('x2', width)
+                .attr('class', 'axis-tick');
+            } // Avoid adding the class to the first tick, to prevent coloring
           }); // This will select all of the ticks once they're rendered
 
         this.xScale = d3.time.scale()
diff --git a/app/assets/javascripts/monitoring/components/monitoring_flag.vue b/app/assets/javascripts/monitoring/components/monitoring_flag.vue
index 180a771415b..5a0e50fcab3 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_flag.vue
+++ b/app/assets/javascripts/monitoring/components/monitoring_flag.vue
@@ -87,14 +87,14 @@
       </rect>
       <text
         class="text-metric text-metric-bold"
-        x="8"
+        x="16"
         y="35"
         transform="translate(-5, 20)">
         {{formatTime}}
       </text>
       <text
-        class="text-metric-date"
-        x="8"
+        class="text-metric"
+        x="16"
         y="15"
         transform="translate(-5, 20)">
         {{formatDate}}
diff --git a/app/assets/javascripts/monitoring/components/monitoring_legends.vue b/app/assets/javascripts/monitoring/components/monitoring_legends.vue
index b30ed3cc889..922a5e1bf0e 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_legends.vue
+++ b/app/assets/javascripts/monitoring/components/monitoring_legends.vue
@@ -109,13 +109,13 @@
     </text>
     <rect
       class="rect-axis-text"
-      :x="xPosition + 50"
+      :x="xPosition + 60"
       :y="graphHeight - 80"
-      width="50"
+      width="35"
       height="50">
     </rect>
     <text
-      class="label-axis-text"
+      class="label-axis-text x-label-text"
       :x="xPosition + 60"
       :y="yPosition"
       dy=".35em">
@@ -131,13 +131,13 @@
     <text
       class="text-metric-title"
       x="50"
-      :y="graphHeight - 40">
+      :y="graphHeight - 25">
       {{legendTitle}}
     </text>
     <text
       class="text-metric-usage"
       x="50"
-      :y="graphHeight - 25">
+      :y="graphHeight - 10">
       {{metricUsage}}
     </text>
   </g>
diff --git a/app/assets/javascripts/monitoring/utils/measurements.js b/app/assets/javascripts/monitoring/utils/measurements.js
index a60d2522f49..62cd19c86e1 100644
--- a/app/assets/javascripts/monitoring/utils/measurements.js
+++ b/app/assets/javascripts/monitoring/utils/measurements.js
@@ -8,14 +8,14 @@ export default {
     },
     legends: {
       width: 15,
-      height: 30,
+      height: 25,
     },
     backgroundLegend: {
       width: 30,
       height: 50,
     },
     axisLabelLineOffset: -20,
-    legendOffset: 52,
+    legendOffset: 35,
   },
   large: { // This covers both md and lg screen sizes
     margin: {
@@ -26,14 +26,15 @@ export default {
     },
     legends: {
       width: 20,
-      height: 35,
+      height: 30,
     },
     backgroundLegend: {
       width: 30,
       height: 150,
     },
     axisLabelLineOffset: 20,
-    legendOffset: 55,
+    legendOffset: 38,
   },
-  ticks: 3,
+  xTicks: 8,
+  yTicks: 3,
 };
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index e9a679b20c2..00ebf4e26ac 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -187,8 +187,7 @@
 }
 
 .text-metric {
-  font-weight: 600;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .selected-metric-line {
@@ -232,10 +231,6 @@
   width: 100%;
   padding: 0;
   padding-bottom: 100%;
-
-  .text-metric-bold {
-    font-weight: 600;
-  }
 }
 
 .prometheus-svg-container > svg {
@@ -250,6 +245,10 @@
     stroke-width: 0;
   }
 
+  .text-metric-bold {
+    font-weight: 600;
+  }
+
   .label-axis-text,
   .text-metric-usage {
     fill: $black;
@@ -269,6 +268,15 @@
     font-size: 12px;
   }
 
+  .y-label-text,
+  .x-label-text {
+    fill: $gray-darkest;
+  }
+
+  .axis-tick {
+    stroke: $gray-darker;
+  }
+
   @media (max-width: $screen-sm-max) {
     .label-axis-text,
     .text-metric-usage,
diff --git a/changelogs/unreleased/34653-minor-ux-cleanups-for-performance-dashboard.yml b/changelogs/unreleased/34653-minor-ux-cleanups-for-performance-dashboard.yml
new file mode 100644
index 00000000000..736991318d7
--- /dev/null
+++ b/changelogs/unreleased/34653-minor-ux-cleanups-for-performance-dashboard.yml
@@ -0,0 +1,4 @@
+---
+title: Cleanup minor UX issues in the performance dashboard
+merge_request:
+author: