diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-31 09:08:16 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-31 09:08:16 +0000 |
commit | 6044caed20964a70c1ac6c5a3365d567ed96dfde (patch) | |
tree | 3fe8f14b4acbd542265544843efeb6f59b5d3efe /app/assets/javascripts/monitoring/components/embeds/embed_group.vue | |
parent | 92077e0f8d70c70a908395808b16f98ecd3a5fcd (diff) | |
download | gitlab-ce-6044caed20964a70c1ac6c5a3365d567ed96dfde.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/monitoring/components/embeds/embed_group.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/embeds/embed_group.vue | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue new file mode 100644 index 00000000000..b8562afe441 --- /dev/null +++ b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue @@ -0,0 +1,101 @@ +<script> +import { mapState, mapActions, mapGetters } from 'vuex'; +import sum from 'lodash/sum'; +import { GlButton, GlCard, GlIcon } from '@gitlab/ui'; +import { n__ } from '~/locale'; +import { monitoringDashboard } from '~/monitoring/stores'; +import MetricEmbed from './metric_embed.vue'; + +export default { + components: { + GlButton, + GlCard, + GlIcon, + MetricEmbed, + }, + props: { + urls: { + type: Array, + required: true, + validator: urls => urls.length > 0, + }, + }, + data() { + return { + isCollapsed: false, + }; + }, + computed: { + ...mapState('embedGroup', ['module']), + ...mapGetters('embedGroup', ['metricsWithData']), + arrowIconName() { + return this.isCollapsed ? 'chevron-right' : 'chevron-down'; + }, + bodyClass() { + return ['border-top', 'pl-3', 'pt-3', { 'd-none': this.isCollapsed }]; + }, + buttonLabel() { + return this.isCollapsed + ? n__('View chart', 'View charts', this.numCharts) + : n__('Hide chart', 'Hide charts', this.numCharts); + }, + containerClass() { + return this.isSingleChart ? 'col-lg-12' : 'col-lg-6'; + }, + numCharts() { + if (this.metricsWithData === null) { + return 0; + } + return sum(this.metricsWithData); + }, + isSingleChart() { + return this.numCharts === 1; + }, + }, + created() { + this.urls.forEach((url, index) => { + const name = this.getNamespace(index); + this.$store.registerModule(name, monitoringDashboard); + this.addModule(name); + }); + }, + methods: { + ...mapActions('embedGroup', ['addModule']), + getNamespace(id) { + return `monitoringDashboard/${id}`; + }, + toggleCollapsed() { + this.isCollapsed = !this.isCollapsed; + }, + }, +}; +</script> +<template> + <gl-card + v-show="numCharts > 0" + class="collapsible-card border p-0 mb-3" + header-class="d-flex align-items-center border-bottom-0 py-2" + :body-class="bodyClass" + > + <template #header> + <gl-button + class="collapsible-card-btn d-flex text-decoration-none" + :aria-label="buttonLabel" + variant="link" + @click="toggleCollapsed" + > + <gl-icon class="mr-1" :name="arrowIconName" /> + {{ buttonLabel }} + </gl-button> + </template> + <div class="d-flex flex-wrap"> + <metric-embed + v-for="(url, index) in urls" + :key="`${index}/${url}`" + :dashboard-url="url" + :namespace="getNamespace(index)" + :container-class="containerClass" + /> + </div> + </gl-card> +</template> |