summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorClement Ho <408677-ClemMakesApps@users.noreply.gitlab.com>2019-09-09 21:52:27 +0000
committerClement Ho <408677-ClemMakesApps@users.noreply.gitlab.com>2019-09-09 21:52:27 +0000
commit71e44e7ce3e2b0359b13d417162cb5a483e27242 (patch)
tree8d43c94667b46df99adf4bfc2827f2cc746524ea
parent96480a31abf1190438aa142d44756a5177b6ac35 (diff)
parentb5b2879e4a0854165c9485a36bbee8bcc6d83f84 (diff)
downloadgitlab-ce-71e44e7ce3e2b0359b13d417162cb5a483e27242.tar.gz
Merge branch 'jivanvl-add-caret-icon-dashboard' into 'master'
Add caret icons to the monitoring dashboard See merge request gitlab-org/gitlab-ce!32239
-rw-r--r--app/assets/javascripts/monitoring/components/graph_group.vue38
-rw-r--r--changelogs/unreleased/jivanvl-add-caret-icon-dashboard.yml5
-rw-r--r--locale/gitlab.pot3
-rw-r--r--spec/javascripts/monitoring/components/graph_group_spec.js47
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 9ca3b357f77..32deab7dd68 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -12308,6 +12308,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);
+ });
+ });
+});