app/assets/javascripts/behaviors/markdown/render_observability.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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 { frameUrl, observabilityUrl } = element.dataset;

  try {
    if (
      !observabilityUrl ||
      !frameUrl ||
      new URL(frameUrl)?.host !== new URL(observabilityUrl).host
    )
      return;

    // eslint-disable-next-line no-new
    new Vue({
      el: element,
      render(h) {
        return h('iframe', {
          style: {
            height: '366px',
            width: '768px',
          },
          attrs: {
            src: getFrameSrc(frameUrl),
            frameBorder: '0',
          },
        });
      },
    });
  } catch (e) {
    // eslint-disable-next-line no-console
    console.error(e);
  }
};

export default function renderObservability(elements) {
  elements.forEach((element) => {
    mountVueComponent(element);
  });
}