diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue index 0f5c5b3d60fd17aab2b98e649b191efbc3c384ba..72ddd8d4fcff661b10d400ecd392cd91c7ebda2e 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 0000000000000000000000000000000000000000..148e306c3b8f667312eb404467720694a0c8b409 --- /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 a77d70a57004dee866212e25987a5499aeebdb12..6115ee119c4b3636c90f85be1d948962bc07a7b9 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 0000000000000000000000000000000000000000..068c4b5302c56d1fe99bb1873ae3adc0cb46c4d6 --- /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); + }); + }); +});