From 07f15f9adca9d922057599d9cc064c8ebfdf41f7 Mon Sep 17 00:00:00 2001
From: Adriel Santiago <adriel@gitlab.com>
Date: Tue, 16 Oct 2018 13:25:08 -0400
Subject: Fix prometheus graphs in firefox

---
 app/assets/javascripts/monitoring/components/graph.vue               | 5 +++--
 .../unreleased/40372-prometheus-dashboard-broken-on-firefox.yml      | 5 +++++
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 changelogs/unreleased/40372-prometheus-dashboard-broken-on-firefox.yml

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index ed5c8b15945..5c6e2e09e46 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -121,6 +121,7 @@ export default {
     draw() {
       const breakpointSize = bp.getBreakpointSize();
       const query = this.graphData.queries[0];
+      const svgWidth = this.$refs.baseSvg.getBoundingClientRect().width;
       this.margin = measurements.large.margin;
       if (this.smallGraph || breakpointSize === 'xs' || breakpointSize === 'sm') {
         this.graphHeight = 300;
@@ -130,13 +131,13 @@ export default {
       this.unitOfDisplay = query.unit || '';
       this.yAxisLabel = this.graphData.y_label || 'Values';
       this.legendTitle = query.label || 'Average';
-      this.graphWidth = this.$refs.baseSvg.clientWidth - this.margin.left - this.margin.right;
+      this.graphWidth = svgWidth - this.margin.left - this.margin.right;
       this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
       this.baseGraphHeight = this.graphHeight - 50;
       this.baseGraphWidth = this.graphWidth;
 
       // pixel offsets inside the svg and outside are not 1:1
-      this.realPixelRatio = this.$refs.baseSvg.clientWidth / this.baseGraphWidth;
+      this.realPixelRatio = svgWidth / this.baseGraphWidth;
 
       this.renderAxesPaths();
       this.formatDeployments();
diff --git a/changelogs/unreleased/40372-prometheus-dashboard-broken-on-firefox.yml b/changelogs/unreleased/40372-prometheus-dashboard-broken-on-firefox.yml
new file mode 100644
index 00000000000..8376fac7abf
--- /dev/null
+++ b/changelogs/unreleased/40372-prometheus-dashboard-broken-on-firefox.yml
@@ -0,0 +1,5 @@
+---
+title: Fix prometheus graphs in firefox
+merge_request: 22400
+author:
+type: fixed
-- 
cgit v1.2.1