Add latest changes from gitlab-org/gitlab@master

1 files changed, 11 insertions, 19 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/render_observability.js b/app/assets/javascripts/behaviors/markdown/render_observability.js
index 85aae6f53c4..6346fb8ab48 100644
--- a/app/assets/javascripts/behaviors/markdown/render_observability.js
+++ b/app/assets/javascripts/behaviors/markdown/render_observability.js
@@ -1,25 +1,19 @@
 import Vue from 'vue';
-import { darkModeEnabled } from '~/lib/utils/color_utils';
-import { setUrlParams } from '~/lib/utils/url_utility';
-
-export function getFrameSrc(url) {
-  return `${setUrlParams({ theme: darkModeEnabled() ? 'dark' : 'light' }, url)}&kiosk=inline-embed`;
-}
+import ObservabilityApp from '~/observability/components/observability_app.vue';
+import { SKELETON_VARIANT_EMBED, INLINE_EMBED_DIMENSIONS } from '~/observability/constants';
 
 const mountVueComponent = (element) => {
-  const url = [element.dataset.frameUrl];
-
+  const url = element.dataset.frameUrl;
   return new Vue({
     el: element,
     render(h) {
-      return h('iframe', {
-        style: {
-          height: '366px',
-          width: '768px',
-        },
-        attrs: {
-          src: getFrameSrc(url),
-          frameBorder: '0',
+      return h(ObservabilityApp, {
+        props: {
+          observabilityIframeSrc: url,
+          inlineEmbed: true,
+          skeletonVariant: SKELETON_VARIANT_EMBED,
+          height: INLINE_EMBED_DIMENSIONS.HEIGHT,
+          width: INLINE_EMBED_DIMENSIONS.WIDTH,
         },
       });
     },
@@ -27,7 +21,5 @@ const mountVueComponent = (element) => {
 };
 
 export default function renderObservability(elements) {
-  elements.forEach((element) => {
-    mountVueComponent(element);
-  });
+  return elements.map(mountVueComponent);
 }