blob: d5d46c10efdc2e0c88c4e02cb19dfc2df370d515 (
plain)
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);
});
}
|