1 files changed, 35 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>