Commit 0baadb42 authored by Clement Ho's avatar Clement Ho

Merge branch '62971-embed-specific-metrics-chart-in-issue' into 'master'

Embed specific metrics chart in issue

Closes #62971

See merge request gitlab-org/gitlab-ce!31644
parents 2dcb69c9 69009fa1
......@@ -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>
......
---
title: Embed specific metrics chart in issue
merge_request: 31644
author:
type: added
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment