Commit 6c5837ae authored by Tim Zallmann's avatar Tim Zallmann

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
parents 9560d5b8 790bc25d
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
import GraphLegend from './graph/legend.vue'; import GraphLegend from './graph/legend.vue';
import GraphFlag from './graph/flag.vue'; import GraphFlag from './graph/flag.vue';
import GraphDeployment from './graph/deployment.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 MonitoringMixin from '../mixins/monitoring_mixins';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import measurements from '../utils/measurements'; import measurements from '../utils/measurements';
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
}, },
computed: { computed: {
outterViewBox() { outerViewBox() {
return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`; return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
}, },
...@@ -137,17 +137,19 @@ ...@@ -137,17 +137,19 @@
}, },
renderAxesPaths() { renderAxesPaths() {
this.timeSeries = createTimeSeries(this.graphData.queries[0], this.timeSeries = createTimeSeries(
this.graphWidth, this.graphData.queries[0],
this.graphHeight, this.graphWidth,
this.graphHeightOffset); this.graphHeight,
this.graphHeightOffset,
);
if (this.timeSeries.length > 3) { if (this.timeSeries.length > 3) {
this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20; this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
} }
const axisXScale = d3.time.scale() const axisXScale = d3.time.scale()
.range([0, this.graphWidth]); .range([0, this.graphWidth - 70]);
const axisYScale = d3.scale.linear() const axisYScale = d3.scale.linear()
.range([this.graphHeight - this.graphHeightOffset, 0]); .range([this.graphHeight - this.graphHeightOffset, 0]);
...@@ -214,7 +216,7 @@ ...@@ -214,7 +216,7 @@
class="prometheus-svg-container" class="prometheus-svg-container"
:style="paddingBottomRootSvg"> :style="paddingBottomRootSvg">
<svg <svg
:viewBox="outterViewBox" :viewBox="outerViewBox"
ref="baseSvg"> ref="baseSvg">
<g <g
class="x-axis" class="x-axis"
......
...@@ -291,8 +291,14 @@ ...@@ -291,8 +291,14 @@
fill: $black; fill: $black;
} }
.tick > text { .tick {
font-size: 12px; > line {
stroke: $gray-darker;
}
> text {
font-size: 12px;
}
} }
.text-metric-title { .text-metric-title {
......
---
title: Fix incorrect X-axis labels in Prometheus graphs
merge_request: 14258
author:
type: fixed
import Vue from 'vue'; 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 createTimeSeries from '~/monitoring/utils/multiple_time_series';
import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from './mock_data'; import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from './mock_data';
......
...@@ -44,7 +44,7 @@ describe('Graph', () => { ...@@ -44,7 +44,7 @@ describe('Graph', () => {
.not.toEqual(-1); .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({ const component = createComponent({
graphData: convertedMetrics[1], graphData: convertedMetrics[1],
classType: 'col-md-6', classType: 'col-md-6',
...@@ -52,8 +52,8 @@ describe('Graph', () => { ...@@ -52,8 +52,8 @@ describe('Graph', () => {
deploymentData, deploymentData,
}); });
const viewBoxArray = component.outterViewBox.split(' '); const viewBoxArray = component.outerViewBox.split(' ');
expect(typeof component.outterViewBox).toEqual('string'); expect(typeof component.outerViewBox).toEqual('string');
expect(viewBoxArray[2]).toEqual(component.graphWidth.toString()); expect(viewBoxArray[2]).toEqual(component.graphWidth.toString());
expect(viewBoxArray[3]).toEqual(component.graphHeight.toString()); expect(viewBoxArray[3]).toEqual(component.graphHeight.toString());
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment