Only render toolbar on metrics dashboardce-adriel-hide-toolbar-cluster-health

Remove empty toolbar from cluster health

3 files changed, 43 insertions, 1 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 78744c0a0a9..f16c5cfef2d 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -53,6 +53,11 @@ export default {
       required: false,
       default: true,
     },
+    showToolbar: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     documentationPath: {
       type: String,
       required: true,
@@ -226,7 +231,11 @@ export default {
 
 <template>
   <div v-if="!showEmptyState" class="prometheus-graphs">
-    <div class="gl-p-3 border-bottom bg-gray-light d-flex justify-content-between">
+    <div
+      v-if="showToolbar"
+      ref="toolbar"
+      class="gl-p-3 border-bottom bg-gray-light d-flex justify-content-between"
+    >
       <div
         v-if="environmentsEndpoint"
         class="dropdowns d-flex align-items-center justify-content-between"
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index 57771ccf4d9..25d714a8552 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -18,6 +18,7 @@ export default (props = {}) => {
             hasMetrics: parseBoolean(el.dataset.hasMetrics),
             showTimeWindowDropdown: gon.features.metricsTimeWindow,
             ...props,
+            showToolbar: parseBoolean(el.dataset.showToolbar),
           },
         });
       },
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 80b9b740b94..dfb70e6791b 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -135,6 +135,38 @@ describe('Dashboard', () => {
       });
     });
 
+    describe('toolbar', () => {
+      const mount = props =>
+        new DashboardComponent({
+          el: document.querySelector('.prometheus-graphs'),
+          store,
+          propsData: {
+            ...propsData,
+            hasMetrics: true,
+            showTimeWindowDropdown: false,
+            ...props,
+          },
+        });
+
+      it('renders toolbar by default', done => {
+        const component = mount();
+
+        setTimeout(() => {
+          expect(component.$refs.toolbar).toBeDefined();
+          done();
+        });
+      });
+
+      it('does not render toolbar when showToolbar is false', done => {
+        const component = mount({ showToolbar: false });
+
+        setTimeout(() => {
+          expect(component.$refs.toolbar).not.toBeDefined();
+          done();
+        });
+      });
+    });
+
     it('renders the environments dropdown with a number of environments', done => {
       component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),