[ci-skip] WIP: add wrapper element for adjacent GFM Embed componentspsi-render-metrics-wrapper

2 files changed, 33 insertions, 1 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/render_metrics.js b/app/assets/javascripts/behaviors/markdown/render_metrics.js
index 252b98610b6..9bdd76c2658 100644
--- a/app/assets/javascripts/behaviors/markdown/render_metrics.js
+++ b/app/assets/javascripts/behaviors/markdown/render_metrics.js
@@ -2,12 +2,44 @@ import Vue from 'vue';
 import Metrics from '~/monitoring/components/embed.vue';
 import { createStore } from '~/monitoring/stores';
 
+function groupAdjacentElements(acc, element, _, elements) {
+  // we already added this element (from previous sibling)
+  if (acc.find(group => group.includes(element))) {
+    return acc;
+  }
+
+  // create new group, and add this element
+  const length = acc.push([element]);
+  const lastGroup = acc[length - 1];
+
+  let currentEl = element;
+
+  while (elements.includes(currentEl.nextElementSibling)) {
+    currentEl = currentEl.nextElementSibling;
+    lastGroup.push(currentEl);
+  }
+
+  return acc;
+}
+
+function addWrapperElement(group) {
+  const firstEl = group[0];
+  const parent = firstEl.parentNode;
+  const wrapper = document.createElement('div');
+  wrapper.className = 'd-flex flex-wrap';
+  parent.replaceChild(wrapper, firstEl);
+  group.forEach(el => wrapper.appendChild(el));
+}
+
 // TODO: Handle copy-pasting - https://gitlab.com/gitlab-org/gitlab-ce/issues/64369.
 export default function renderMetrics(elements) {
   if (!elements.length) {
     return;
   }
 
+  const groupedElements = elements.reduce(groupAdjacentElements, []);
+  groupedElements.forEach(addWrapperElement);
+
   elements.forEach(element => {
     const { dashboardUrl } = element.dataset;
     const MetricsComponent = Vue.extend(Metrics);
diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue
index 9e85b0633fe..ba329eade25 100644
--- a/app/assets/javascripts/monitoring/components/embed.vue
+++ b/app/assets/javascripts/monitoring/components/embed.vue
@@ -89,7 +89,7 @@ export default {
 };
 </script>
 <template>
-  <div class="metrics-embed">
+  <div class="metrics-embed flex-grow">
     <div v-if="groupData" class="row w-100 m-n2 pb-4">
       <monitor-area-chart
         v-for="graphData in chartsWithData(groupData.metrics)"