diff options
author | Jose Vargas <jvargas@gitlab.com> | 2019-08-26 17:25:36 -0500 |
---|---|---|
committer | Jose Vargas <jvargas@gitlab.com> | 2019-09-09 13:52:14 -0500 |
commit | b5b2879e4a0854165c9485a36bbee8bcc6d83f84 (patch) | |
tree | ddf86fa4be1d9941dbb91cfa5988bb67946e02fc /app/assets | |
parent | c15be006c046c6861ef5793fd85d3c6bee06e4ff (diff) | |
download | gitlab-ce-b5b2879e4a0854165c9485a36bbee8bcc6d83f84.tar.gz |
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
Diffstat (limited to 'app/assets')
-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> |