use proper dependency injection for monitoring dashboard component

1 files changed, 15 insertions, 4 deletions

diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index c3b0ef7e9ca..a9b608e4433 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -1,7 +1,18 @@
 import Vue from 'vue';
 import Dashboard from './components/dashboard.vue';
 
-export default () => new Vue({
-  el: '#prometheus-graphs',
-  render: createElement => createElement(Dashboard),
-});
+export default () => {
+  const el = document.querySelector('#prometheus-graphs');
+
+  if (el && el.dataset) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      render(createElement) {
+        return createElement(Dashboard, {
+          props: el.dataset,
+        });
+      },
+    });
+  }
+};