Add caret icons to the monitoring dashboardjivanvl-add-caret-icon-dashboard

The carets will function as a button that will allow the panels
from the monitoring dashboard to collapse and show panels

4 files changed, 90 insertions, 3 deletions

diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
index 0f5c5b3d60f..72ddd8d4fcf 100644
--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -1,5 +1,10 @@
 <script>
+import Icon from '~/vue_shared/components/icon.vue';
+
 export default {
+  components: {
+    Icon,
+  },
   props: {
     name: {
       type: String,
@@ -15,15 +20,42 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      showGroup: true,
+    };
+  },
+  computed: {
+    caretIcon() {
+      return this.collapseGroup && this.showGroup ? 'angle-down' : 'angle-right';
+    },
+  },
+  created() {
+    this.showGroup = this.collapseGroup;
+  },
+  methods: {
+    collapse() {
+      this.showGroup = !this.showGroup;
+    },
+  },
 };
 </script>
 
 <template>
   <div v-if="showPanels" class="card prometheus-panel">
-    <div class="card-header">
-      <h4>{{ name }}</h4>
+    <div class="card-header d-flex align-items-center">
+      <h4 class="flex-grow-1">{{ name }}</h4>
+      <a role="button" @click="collapse">
+        <icon :size="16" :aria-label="__('Toggle collapse')" :name="caretIcon" />
+      </a>
+    </div>
+    <div
+      v-if="collapseGroup"
+      v-show="collapseGroup && showGroup"
+      class="card-body prometheus-graph-group"
+    >
+      <slot></slot>
     </div>
-    <div v-if="collapseGroup" class="card-body prometheus-graph-group"><slot></slot></div>
   </div>
   <div v-else class="prometheus-graph-group"><slot></slot></div>
 </template>
diff --git a/changelogs/unreleased/jivanvl-add-caret-icon-dashboard.yml b/changelogs/unreleased/jivanvl-add-caret-icon-dashboard.yml
new file mode 100644
index 00000000000..148e306c3b8
--- /dev/null
+++ b/changelogs/unreleased/jivanvl-add-caret-icon-dashboard.yml
@@ -0,0 +1,5 @@
+---
+title: Add caret icons to the monitoring dashboard
+merge_request: 32239
+author:
+type: changed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a77d70a5700..6115ee119c4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -12299,6 +12299,9 @@ msgstr ""
 msgid "Toggle backtrace"
 msgstr ""
 
+msgid "Toggle collapse"
+msgstr ""
+
 msgid "Toggle comments for this file"
 msgstr ""
 
diff --git a/spec/javascripts/monitoring/components/graph_group_spec.js b/spec/javascripts/monitoring/components/graph_group_spec.js
new file mode 100644
index 00000000000..068c4b5302c
--- /dev/null
+++ b/spec/javascripts/monitoring/components/graph_group_spec.js
@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import GraphGroup from '~/monitoring/components/graph_group.vue';
+
+describe('Graph group component', () => {
+  let graphGroup;
+
+  afterEach(() => {
+    graphGroup.destroy();
+  });
+
+  describe('When groups can be collapsed', () => {
+    beforeEach(() => {
+      graphGroup = shallowMount(GraphGroup, {
+        propsData: {
+          name: 'panel',
+          collapseGroup: true,
+        },
+      });
+    });
+
+    it('should show the angle-down caret icon when collapseGroup is true', () => {
+      expect(graphGroup.vm.caretIcon).toBe('angle-down');
+    });
+
+    it('should show the angle-right caret icon when collapseGroup is false', () => {
+      graphGroup.vm.collapse();
+
+      expect(graphGroup.vm.caretIcon).toBe('angle-right');
+    });
+  });
+
+  describe('When groups can not be collapsed', () => {
+    beforeEach(() => {
+      graphGroup = shallowMount(GraphGroup, {
+        propsData: {
+          name: 'panel',
+          collapseGroup: true,
+          showPanels: false,
+        },
+      });
+    });
+
+    it('should not contain a prometheus-graph-group container when showPanels is false', () => {
+      expect(graphGroup.vm.$el.querySelector('.prometheus-graph-group')).toBe(null);
+    });
+  });
+});