diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/graph_group.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph_group.vue | 38 |
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> |