Fix monitor dashboard collapsible group

Collapsible groups with charts that have data
do not show the groups on page load. This MR
listens to props and responds appropriately

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

@@ -30,9 +30,6 @@ export default {
       return this.collapseGroup && this.showGroup ? 'angle-down' : 'angle-right';
     },
   },
-  created() {
-    this.showGroup = this.collapseGroup;
-  },
   methods: {
     collapse() {
       this.showGroup = !this.showGroup;

changelogs/unreleased/34734-monitor-dashboard-does-not-expand-sections-that-have-data-on-load.yml

+---
+title: Fix graph groups in monitor dashboard that are hidden on load
+merge_request: 20312
+author:
+type: fixed

spec/javascripts/monitoring/components/graph_group_spec.js

@@ -3,6 +3,8 @@ import GraphGroup from '~/monitoring/components/graph_group.vue';
 
 describe('Graph group component', () => {
   let graphGroup;
+  const findPrometheusGroup = () => graphGroup.find('.prometheus-graph-group');
+  const findPrometheusPanel = () => graphGroup.find('.prometheus-panel');
 
   afterEach(() => {
     graphGroup.destroy();
@@ -40,8 +42,32 @@ describe('Graph group component', () => {
       });
     });
 
-    it('should not contain a prometheus-graph-group container when showPanels is false', () => {
-      expect(graphGroup.vm.$el.querySelector('.prometheus-graph-group')).toBe(null);
+    it('should not contain a prometheus-panel container when showPanels is false', () => {
+      expect(findPrometheusPanel().exists()).toBe(false);
+    });
+  });
+
+  describe('When collapseGroup prop is updated', () => {
+    beforeEach(() => {
+      graphGroup = shallowMount(GraphGroup, {
+        propsData: {
+          name: 'panel',
+          collapseGroup: false,
+        },
+      });
+    });
+
+    it('previously collapsed group should respond to the prop change', done => {
+      expect(findPrometheusGroup().exists()).toBe(false);
+
+      graphGroup.setProps({
+        collapseGroup: true,
+      });
+
+      graphGroup.vm.$nextTick(() => {
+        expect(findPrometheusGroup().exists()).toBe(true);
+        done();
+      });
     });
   });
 });