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.
This commit is contained in:
parent
2dcb69c903
commit
69009fa145
3 changed files with 29 additions and 14 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Embed specific metrics chart in issue
|
||||
merge_request: 31644
|
||||
author:
|
||||
type: added
|
Loading…
Reference in a new issue