diff options
Diffstat (limited to 'app/assets/javascripts/behaviors')
-rw-r--r-- | app/assets/javascripts/behaviors/markdown/render_observability.js | 30 |
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); } |