1 files changed, 51 insertions, 17 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 031badc7026..3b94b3e8769 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -10,31 +10,64 @@
   import { convertPermissionToBoolean } from '../../lib/utils/common_utils';
 
   export default {
-
     components: {
       Graph,
       GraphGroup,
       EmptyState,
     },
 
-    data() {
-      const metricsData = document.querySelector('#prometheus-graphs').dataset;
-      const store = new MonitoringStore();
+    props: {
+      hasMetrics: {
+        type: String,
+        required: true,
+      },
+      documentationPath: {
+        type: String,
+        required: true,
+      },
+      settingsPath: {
+        type: String,
+        required: true,
+      },
+      clustersPath: {
+        type: String,
+        required: true,
+      },
+      tagsPath: {
+        type: String,
+        required: true,
+      },
+      projectPath: {
+        type: String,
+        required: true,
+      },
+      metricsEndpoint: {
+        type: String,
+        required: true,
+      },
+      deploymentEndpoint: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      emptyGettingStartedSvgPath: {
+        type: String,
+        required: true,
+      },
+      emptyLoadingSvgPath: {
+        type: String,
+        required: true,
+      },
+      emptyUnableToConnectSvgPath: {
+        type: String,
+        required: true,
+      },
+    },
 
+    data() {
       return {
-        store,
+        store: new MonitoringStore(),
         state: 'gettingStarted',
-        hasMetrics: convertPermissionToBoolean(metricsData.hasMetrics),
-        documentationPath: metricsData.documentationPath,
-        settingsPath: metricsData.settingsPath,
-        clustersPath: metricsData.clustersPath,
-        tagsPath: metricsData.tagsPath,
-        projectPath: metricsData.projectPath,
-        metricsEndpoint: metricsData.additionalMetrics,
-        deploymentEndpoint: metricsData.deploymentEndpoint,
-        emptyGettingStartedSvgPath: metricsData.emptyGettingStartedSvgPath,
-        emptyLoadingSvgPath: metricsData.emptyLoadingSvgPath,
-        emptyUnableToConnectSvgPath: metricsData.emptyUnableToConnectSvgPath,
         showEmptyState: true,
         updateAspectRatio: false,
         updatedAspectRatios: 0,
@@ -60,13 +93,14 @@
 
     mounted() {
       this.resizeThrottled = _.throttle(this.resize, 600);
-      if (!this.hasMetrics) {
+      if (!convertPermissionToBoolean(this.hasMetrics)) {
         this.state = 'gettingStarted';
       } else {
         this.getGraphsData();
         window.addEventListener('resize', this.resizeThrottled, false);
       }
     },
+
     methods: {
       getGraphsData() {
         this.state = 'loading';