Add latest changes from gitlab-org/gitlab@master

1 files changed, 27 insertions, 7 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/render_metrics.js b/app/assets/javascripts/behaviors/markdown/render_metrics.js
index 8050604e6e7..9260a89bd52 100644
--- a/app/assets/javascripts/behaviors/markdown/render_metrics.js
+++ b/app/assets/javascripts/behaviors/markdown/render_metrics.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import Metrics from '~/monitoring/components/embed.vue';
-import { createStore } from '~/monitoring/stores';
+import EmbedGroup from '~/monitoring/components/embeds/embed_group.vue';
+import { createStore } from '~/monitoring/stores/embed_group/';
 
 // TODO: Handle copy-pasting - https://gitlab.com/gitlab-org/gitlab-foss/issues/64369.
 export default function renderMetrics(elements) {
@@ -8,16 +8,36 @@ export default function renderMetrics(elements) {
     return;
   }
 
+  const EmbedGroupComponent = Vue.extend(EmbedGroup);
+
+  const wrapperList = [];
+
   elements.forEach(element => {
-    const { dashboardUrl } = element.dataset;
-    const MetricsComponent = Vue.extend(Metrics);
+    let wrapper;
+    const { previousElementSibling } = element;
+    const isFirstElementInGroup = !previousElementSibling?.urls;
+
+    if (isFirstElementInGroup) {
+      wrapper = document.createElement('div');
+      wrapper.urls = [element.dataset.dashboardUrl];
+      element.parentNode.insertBefore(wrapper, element);
+      wrapperList.push(wrapper);
+    } else {
+      wrapper = previousElementSibling;
+      wrapper.urls.push(element.dataset.dashboardUrl);
+    }
+
+    // Clean up processed element
+    element.parentNode.removeChild(element);
+  });
 
+  wrapperList.forEach(wrapper => {
     // eslint-disable-next-line no-new
-    new MetricsComponent({
-      el: element,
+    new EmbedGroupComponent({
+      el: wrapper,
       store: createStore(),
       propsData: {
-        dashboardUrl,
+        urls: wrapper.urls,
       },
     });
   });