Merge branch '37105-monitoring-graph-axes-labels-are-inaccurate-and-inconsistent' into 'master'

Resolve "Monitoring graph axes labels are inaccurate and inconsistent"

Closes #37105

See merge request gitlab-org/gitlab-ce!14258

app/assets/javascripts/monitoring/components/graph.vue

@@ -3,7 +3,7 @@
   import GraphLegend from './graph/legend.vue';
   import GraphFlag from './graph/flag.vue';
   import GraphDeployment from './graph/deployment.vue';
-  import GraphPath from './graph_path.vue';
+  import GraphPath from './graph/path.vue';
   import MonitoringMixin from '../mixins/monitoring_mixins';
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
@@ -69,7 +69,7 @@
     },
 
     computed: {
-      outterViewBox() {
+      outerViewBox() {
         return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
       },
 
@@ -137,17 +137,19 @@
       },
 
       renderAxesPaths() {
-        this.timeSeries = createTimeSeries(this.graphData.queries[0],
-        this.graphWidth,
-        this.graphHeight,
-        this.graphHeightOffset);
+        this.timeSeries = createTimeSeries(
+          this.graphData.queries[0],
+          this.graphWidth,
+          this.graphHeight,
+          this.graphHeightOffset,
+        );
 
         if (this.timeSeries.length > 3) {
           this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
         }
 
         const axisXScale = d3.time.scale()
-          .range([0, this.graphWidth]);
+          .range([0, this.graphWidth - 70]);
         const axisYScale = d3.scale.linear()
           .range([this.graphHeight - this.graphHeightOffset, 0]);
 
@@ -214,7 +216,7 @@
       class="prometheus-svg-container"
       :style="paddingBottomRootSvg">
       <svg
-        :viewBox="outterViewBox"
+        :viewBox="outerViewBox"
         ref="baseSvg">
         <g
           class="x-axis"

app/assets/stylesheets/pages/environments.scss

@@ -291,8 +291,14 @@
     fill: $black;
   }
 
-  .tick > text {
-    font-size: 12px;
+  .tick {
+    > line {
+      stroke: $gray-darker;
+    }
+
+    > text {
+      font-size: 12px;
+    }
   }
 
   .text-metric-title {

changelogs/unreleased/37105-monitoring-graph-axes-labels-are-inaccurate-and-inconsistent.yml

+---
+title: Fix incorrect X-axis labels in Prometheus graphs
+merge_request: 14258
+author:
+type: fixed

spec/javascripts/monitoring/graph_path_spec.js

 import Vue from 'vue';
-import GraphPath from '~/monitoring/components/graph_path.vue';
+import GraphPath from '~/monitoring/components/graph/path.vue';
 import createTimeSeries from '~/monitoring/utils/multiple_time_series';
 import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from './mock_data';
 

spec/javascripts/monitoring/graph_spec.js

@@ -44,7 +44,7 @@ describe('Graph', () => {
         .not.toEqual(-1);
     });
 
-    it('outterViewBox gets a width and height property based on the DOM size of the element', () => {
+    it('outerViewBox gets a width and height property based on the DOM size of the element', () => {
       const component = createComponent({
         graphData: convertedMetrics[1],
         classType: 'col-md-6',
@@ -52,8 +52,8 @@ describe('Graph', () => {
         deploymentData,
       });
 
-      const viewBoxArray = component.outterViewBox.split(' ');
-      expect(typeof component.outterViewBox).toEqual('string');
+      const viewBoxArray = component.outerViewBox.split(' ');
+      expect(typeof component.outerViewBox).toEqual('string');
       expect(viewBoxArray[2]).toEqual(component.graphWidth.toString());
       expect(viewBoxArray[3]).toEqual(component.graphHeight.toString());
     });