Files

111 lines
3.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
[[ if and .CSPEnabled .IsDevelopmentEnv ]]
<!-- Cypress overwrites CSP headers in HTTP requests, so this is required for e2e tests-->
<meta http-equiv="Content-Security-Policy" content="[[.CSPContent]]"/>
[[ end ]]
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
<meta name="theme-color" content="#000" />
<title>[[.AppTitle]]</title>
<base href="[[.AppSubUrl]]/" />
<link rel="mask-icon" href="[[.Assets.ContentDeliveryURL]]public/img/grafana_mask_icon.svg" color="#F05A28" />
[[range $asset := .Assets.CSSFiles]]
<link rel="stylesheet" href="[[$asset.FilePath]]" />
[[end]]
<script nonce="[[.Nonce]]">
performance.mark('frontend_boot_css_time_seconds');
</script>
<style>
/*
Dev indicator that the page was loaded from the FEMT index.html.
TODO: Will remove before deploying to staging.
*/
.femt-dev-frame {
position: fixed;
top: 0;
bottom: 1px;
left: 0;
right: 0;
z-index: 99999;
pointer-events: none;
border: 2px solid white;
border-image-source: linear-gradient(to left, #F55F3E, #FF8833);
border-image-slice: 1;
}
</style>
</head>
<body>
<div class="femt-dev-frame"></div>
<div id="reactRoot"></div>
<script nonce="[[.Nonce]]">
[[if .Nonce]]
window.nonce = '[[.Nonce]]';
[[end]]
[[if .Assets.ContentDeliveryURL]]
window.public_cdn_path = '[[.Assets.ContentDeliveryURL]]public/build/';
[[end]]
window.__grafana_load_failed = function(...args) {
console.error('Failed to load Grafana', ...args);
};
window.__grafana_boot_data_promise = new Promise(async (resolve) => {
const bootData = await fetch("/bootdata");
const rawBootData = await bootData.json();
window.grafanaBootData = {
_femt: true,
...rawBootData,
}
// The per-theme CSS still contains some global styles needed
// to render the page correctly.
const cssLink = document.createElement("link");
cssLink.rel = 'stylesheet';
let theme = window.grafanaBootData.user.theme;
if (theme === "system") {
const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
theme = darkQuery.matches ? 'dark' : 'light';
}
if (theme === "light") {
document.body.classList.add("theme-light");
cssLink.href = window.grafanaBootData.assets.light;
window.grafanaBootData.user.lightTheme = true;
} else if (theme === "dark") {
document.body.classList.add("theme-dark");
cssLink.href = window.grafanaBootData.assets.dark;
window.grafanaBootData.user.lightTheme = false;
}
document.head.appendChild(cssLink);
resolve();
});
</script>
[[range $asset := .Assets.JSFiles]]
<script
nonce="[[$.Nonce]]"
src="[[$asset.FilePath]]"
type="text/javascript"
defer
></script>
[[end]]
</body>
</html>