coerce hasMetrics to a boolean value before instantiating the Vue component

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();

app/assets/javascripts/monitoring/monitoring_bundle.js

 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),
+          },
         });
       },
     });

ee/app/views/projects/clusters/_health.html.haml

@@ -11,8 +11,7 @@
       "empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect.svg'),
       "metrics-endpoint": metrics_namespace_project_cluster_path( format: :json ),
       "project-path": project_path(@project),
-      "tags-path": project_tags_path(@project),
-      "has-metrics": "true" } }
+      "tags-path": project_tags_path(@project) } }
 
   - else
     .settings-content

spec/javascripts/monitoring/dashboard_spec.js

@@ -9,7 +9,7 @@ describe('Dashboard', () => {
   let DashboardComponent;
   let component;
   const propsData = {
-    hasMetrics: 'false',
+    hasMetrics: false,
     documentationPath: '/path/to/docs',
     settingsPath: '/path/to/settings',
     clustersPath: '/path/to/clusters',
@@ -58,7 +58,7 @@ describe('Dashboard', () => {
     it('shows up a loading state', (done) => {
       component = new DashboardComponent({
         el: document.querySelector('#prometheus-graphs'),
-        propsData: { ...propsData, hasMetrics: 'true' },
+        propsData: { ...propsData, hasMetrics: true },
       });
       component.$mount();
       Vue.nextTick(() => {