From 69009fa145fbf9f03360886c1c4b00215d74bccb Mon Sep 17 00:00:00 2001 From: Laura Montemayor <lmontemayor@gitlab.com> Date: Fri, 16 Aug 2019 21:02:43 +0000 Subject: [PATCH] Adds specific metric styles and prop This MR adds the styles for displaying a single chart next to another one when embedding them in an issue. --- .../monitoring/components/charts/area.vue | 10 ++++++- .../monitoring/components/embed.vue | 28 ++++++++++--------- ...-embed-specific-metrics-chart-in-issue.yml | 5 ++++ 3 files changed, 29 insertions(+), 14 deletions(-) create mode 100644 changelogs/unreleased/62971-embed-specific-metrics-chart-in-issue.yml diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue index 838447e6c75..90c764587a3 100644 --- a/app/assets/javascripts/monitoring/components/charts/area.vue +++ b/app/assets/javascripts/monitoring/components/charts/area.vue @@ -45,6 +45,11 @@ export default { required: false, default: () => false, }, + singleEmbed: { + type: Boolean, + required: false, + default: false, + }, thresholds: { type: Array, required: false, @@ -240,7 +245,10 @@ export default { </script> <template> - <div class="prometheus-graph col-12 col-lg-6" :class="[showBorder ? 'p-2' : 'p-0']"> + <div + class="prometheus-graph col-12" + :class="[showBorder ? 'p-2' : 'p-0', { 'col-lg-6': !singleEmbed }]" + > <div :class="{ 'prometheus-graph-embed w-100 p-3': showBorder }"> <div class="prometheus-graph-header"> <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphData.title }}</h5> diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue index 9e85b0633fe..e3256147618 100644 --- a/app/assets/javascripts/monitoring/components/embed.vue +++ b/app/assets/javascripts/monitoring/components/embed.vue @@ -36,12 +36,15 @@ export default { }, computed: { ...mapState('monitoringDashboard', ['groups', 'metricsWithData']), - groupData() { - const groupsWithData = this.groups.filter(group => this.chartsWithData(group.metrics).length); - if (groupsWithData.length) { - return groupsWithData[0]; - } - return null; + charts() { + const groupWithMetrics = this.groups.find(group => + group.metrics.find(chart => this.chartHasData(chart)), + ) || { metrics: [] }; + + return groupWithMetrics.metrics.filter(chart => this.chartHasData(chart)); + }, + isSingleChart() { + return this.charts.length === 1; }, }, mounted() { @@ -66,10 +69,8 @@ export default { 'setFeatureFlags', 'setShowErrorBanner', ]), - chartsWithData(charts) { - return charts.filter(chart => - chart.metrics.some(metric => this.metricsWithData.includes(metric.metric_id)), - ); + chartHasData(chart) { + return chart.metrics.some(metric => this.metricsWithData.includes(metric.metric_id)); }, onSidebarMutation() { setTimeout(() => { @@ -89,16 +90,17 @@ export default { }; </script> <template> - <div class="metrics-embed"> - <div v-if="groupData" class="row w-100 m-n2 pb-4"> + <div class="metrics-embed" :class="{ 'd-inline-flex col-lg-6 p-0': isSingleChart }"> + <div v-if="charts.length" class="row w-100 m-n2 pb-4"> <monitor-area-chart - v-for="graphData in chartsWithData(groupData.metrics)" + v-for="graphData in charts" :key="graphData.title" :graph-data="graphData" :container-width="elWidth" group-id="monitor-area-chart" :project-path="null" :show-border="true" + :single-embed="isSingleChart" /> </div> </div> diff --git a/changelogs/unreleased/62971-embed-specific-metrics-chart-in-issue.yml b/changelogs/unreleased/62971-embed-specific-metrics-chart-in-issue.yml new file mode 100644 index 00000000000..b6bc03f4003 --- /dev/null +++ b/changelogs/unreleased/62971-embed-specific-metrics-chart-in-issue.yml @@ -0,0 +1,5 @@ +--- +title: Embed specific metrics chart in issue +merge_request: 31644 +author: +type: added -- 2.30.9