summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/monitoring/components/embed.vue
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/monitoring/components/embed.vue')
-rw-r--r--app/assets/javascripts/monitoring/components/embed.vue28
1 files changed, 15 insertions, 13 deletions
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>