import Vue from '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) { if (!elements.length) { return Promise.resolve(); } const wrapperList = []; elements.forEach(element => { 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); }); return import( /* webpackChunkName: 'gfm_metrics' */ '~/monitoring/components/embeds/embed_group.vue' ).then(({ default: EmbedGroup }) => { const EmbedGroupComponent = Vue.extend(EmbedGroup); wrapperList.forEach(wrapper => { // eslint-disable-next-line no-new new EmbedGroupComponent({ el: wrapper, store: createStore(), propsData: { urls: wrapper.urls, }, }); }); }); }