coerce hasMetrics to a boolean value before instantiating the Vue component

2 files changed, 9 insertions, 5 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 04374d2e1db..8ca94ef3e2a 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -7,7 +7,6 @@
   import EmptyState from './empty_state.vue';
   import MonitoringStore from '../stores/monitoring_store';
   import eventHub from '../event_hub';
-  import { convertPermissionToBoolean } from '../../lib/utils/common_utils';
 
   export default {
     components: {
@@ -18,8 +17,9 @@
 
     props: {
       hasMetrics: {
-        type: String,
-        required: true,
+        type: Boolean,
+        required: false,
+        default: true,
       },
       showLegend: {
         type: Boolean,
@@ -108,7 +108,7 @@
 
     mounted() {
       this.resizeThrottled = _.throttle(this.resize, 600);
-      if (!convertPermissionToBoolean(this.hasMetrics)) {
+      if (!this.hasMetrics) {
         this.state = 'gettingStarted';
       } else {
         this.getGraphsData();
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index f881a3954b9..41270e015d4 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { convertPermissionToBoolean } from '~/lib/utils/common_utils';
 import Dashboard from './components/dashboard.vue';
 
 export default () => {
@@ -10,7 +11,10 @@ export default () => {
       el,
       render(createElement) {
         return createElement(Dashboard, {
-          props: el.dataset,
+          props: {
+            ...el.dataset,
+            hasMetrics: convertPermissionToBoolean(el.dataset.hasMetrics),
+          },
         });
       },
     });