Merge branch 'dbodicherla-add-prop-to-hide-header-in-monitoring-dashboard' into 'master'

Added showHeader prop to monitor dashboard

See merge request gitlab-org/gitlab!23709

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -69,6 +69,11 @@ export default {
       required: false,
       default: true,
     },
+    showHeader: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     showPanels: {
       type: Boolean,
       required: false,
@@ -129,7 +134,8 @@ export default {
     },
     environmentsEndpoint: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     currentEnvironmentName: {
       type: String,
@@ -356,9 +362,12 @@ export default {
 
 <template>
   <div class="prometheus-graphs">
-    <div class="prometheus-graphs-header gl-p-3 pb-0 border-bottom bg-gray-light">
+    <div
+      v-if="showHeader"
+      ref="prometheusGraphsHeader"
+      class="prometheus-graphs-header gl-p-3 pb-0 border-bottom bg-gray-light"
+    >
       <div class="row">
-        <template v-if="environmentsEndpoint">
         <gl-form-group
           :label="__('Dashboard')"
           label-size="sm"
@@ -435,7 +444,6 @@ export default {
             @invalid="onDateTimePickerInvalid"
           />
         </gl-form-group>
-        </template>
 
         <gl-form-group
           v-if="hasHeaderButtons"

ee/app/assets/javascripts/pages/projects/clusters/show/cluster_health.js

@@ -7,11 +7,11 @@ export default () => {
     initCeBundle({
       ...el.dataset,
       showLegend: false,
+      showHeader: false,
       showPanels: false,
       forceSmallGraph: true,
       smallEmptyState: true,
       currentEnvironmentName: '',
-      environmentsEndpoint: '',
       hasMetrics: true,
     });
   }

spec/frontend/monitoring/components/dashboard_spec.js

@@ -412,13 +412,17 @@ describe('Dashboard', () => {
   describe('cluster health', () => {
     beforeEach(done => {
       mock.onGet(propsData.metricsEndpoint).reply(statusCodes.OK, JSON.stringify({}));
-      createShallowWrapper({ hasMetrics: true });
+      createShallowWrapper({ hasMetrics: true, showHeader: false });
 
       // all_dashboards is not defined in health dashboards
       wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, undefined);
       wrapper.vm.$nextTick(done);
     });
 
+    it('hides dashboard header by default', () => {
+      expect(wrapper.find({ ref: 'prometheusGraphsHeader' }).exists()).toEqual(false);
+    });
+
     it('renders correctly', () => {
       expect(wrapper.isVueInstance()).toBe(true);
       expect(wrapper.exists()).toBe(true);