Add latest changes from gitlab-org/gitlab@master

2 files changed, 35 insertions, 0 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js
index a08cf48c327..50430f8e607 100644
--- a/app/assets/javascripts/behaviors/markdown/render_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js
@@ -5,6 +5,7 @@ import { renderKroki } from './render_kroki';
 import renderMath from './render_math';
 import renderSandboxedMermaid from './render_sandboxed_mermaid';
 import renderMetrics from './render_metrics';
+import renderObservability from './render_observability';
 import { renderJSONTable } from './render_json_table';
 
 // Render GitLab flavoured Markdown
@@ -32,6 +33,7 @@ $.fn.renderGFM = function renderGFM() {
   }
 
   renderMetrics(this.find('.js-render-metrics').get());
+  renderObservability(this.find('.js-render-observability').get());
   return this;
 };
 
diff --git a/app/assets/javascripts/behaviors/markdown/render_observability.js b/app/assets/javascripts/behaviors/markdown/render_observability.js
new file mode 100644
index 00000000000..704d85cf22e
--- /dev/null
+++ b/app/assets/javascripts/behaviors/markdown/render_observability.js
@@ -0,0 +1,33 @@
+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`;
+}
+
+const mountVueComponent = (element) => {
+  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',
+        },
+      });
+    },
+  });
+};
+
+export default function renderObservability(elements) {
+  elements.forEach((element) => {
+    mountVueComponent(element);
+  });
+}