apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57434 Commits
5917 Branches
582 Tags
1.7 GiB
 
 
 
 
 
 
Tag: Branch: Tree: bbfeb8d220
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'bbfeb8d220'
${ noResults }
grafana/public/views/index.html

384 lines
12 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="[[.User.Language]]">
<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="icon" type="image/png" href="[[.FavIcon]]" />
<link rel="apple-touch-icon" sizes="180x180" href="[[.AppleTouchIcon]]" />
<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]]
<!-- If theme is "system", we inject the stylesheets with javascript further down the page -->
[[ if eq .ThemeType "light" ]]
<link rel="stylesheet" href="[[.Assets.Light]]" />
[[ else if eq .ThemeType "dark" ]]
<link rel="stylesheet" href="[[.Assets.Dark]]" />
[[ end ]]
<script nonce="[[.Nonce]]">
performance.mark('frontend_boot_css_time_seconds');
</script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="msapplication-TileColor" content="#2b5797" />
<meta name="msapplication-config" content="public/img/browserconfig.xml" />
</head>
<body class="theme-[[ .ThemeType ]] [[.AppNameBodyClass]]">
<style>
.preloader {
height: 100%;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
margin: 0 32px;
}
.preloader__enter {
opacity: 0;
animation-name: preloader-fade-in;
animation-iteration-count: 1;
animation-duration: 0.9s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.preloader__bounce {
text-align: center;
animation-name: preloader-bounce;
animation-duration: 0.9s;
animation-iteration-count: infinite;
}
.preloader__logo {
display: inline-block;
animation-name: preloader-squash;
animation-duration: 0.9s;
animation-iteration-count: infinite;
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-size: contain;
background-image: url('[[.LoadingLogo]]');
}
.preloader__text {
margin-top: 16px;
font-weight: 500;
font-size: 14px;
font-family: Sans-serif;
opacity: 0;
animation-name: preloader-fade-in;
animation-duration: 0.9s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.theme-light .preloader__text {
color: #52545c;
}
.theme-dark .preloader__text {
color: #d8d9da;
}
@keyframes preloader-fade-in {
0% {
opacity: 0;
/*animation-timing-function: linear;*/
animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
}
100% {
opacity: 1;
}
}
@keyframes preloader-bounce {
from,
to {
transform: translateY(0px);
animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
}
50% {
transform: translateY(-50px);
animation-timing-function: cubic-bezier(0.9, 0, 0.7, 1);
}
}
@keyframes preloader-squash {
0% {
transform: scaleX(1.3) scaleY(0.8);
animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
}
15% {
transform: scaleX(0.75) scaleY(1.25);
animation-timing-function: cubic-bezier(0, 0, 0.7, 0.75);
}
55% {
transform: scaleX(1.05) scaleY(0.95);
animation-timing-function: cubic-bezier(0.9, 0, 1, 1);
}
95% {
transform: scaleX(0.75) scaleY(1.25);
animation-timing-function: cubic-bezier(0, 0, 0, 1);
}
100% {
transform: scaleX(1.3) scaleY(0.8);
animation-timing-function: cubic-bezier(0, 0, 0.7, 1);
}
}
/* Fail info */
.preloader__text--fail {
display: none;
}
/* stop logo animation */
.preloader--done .preloader__bounce,
.preloader--done .preloader__logo {
animation-name: none;
display: none;
}
.preloader--done .preloader__logo,
.preloader--done .preloader__text {
display: none;
color: #ff5705 !important;
font-size: 15px;
}
.theme-light .preloader--done .preloader__text {
color: #52545c !important;
}
.preloader--done .preloader__text--fail {
display: block;
}
.preloader--done .preloader__text--fail a {
color: white;
}
.theme-light .preloader--done .preloader__text--fail a {
color: rgb(31, 98, 224);
}
.preloader--done code {
white-space: nowrap;
padding: 2px 5px;
margin: 0px 2px;
font-size: 0.8rem;
background-color: rgb(24, 27, 31);
color: rgb(204, 204, 220);
border: 1px solid rgba(204, 204, 220, 0.2);
border-radius: 4px;
}
.preloader__error-list li {
margin-bottom: 8px;
}
[ng\:cloak],
[ng-cloak],
.ng-cloak {
display: none !important;
}
</style>
<div class="preloader">
<div class="preloader__enter">
<div class="preloader__bounce">
<div class="preloader__logo" aria-live="polite" role="status" aria-label="Loading Grafana"></div>
</div>
</div>
<div class="preloader__text preloader__text--fail">
<main>
<h1>If you're seeing this Grafana has failed to load its application files</h1>
<ol class="preloader__error-list">
<li>This could be caused by your reverse proxy settings.</li>
<li>If you host grafana under a subpath make sure your <code>grafana.ini</code> <code>root_url</code> setting
includes subpath. If not using a reverse proxy make sure to set <code>serve_from_sub_path</code> to true.</li>
<li>If you have a local dev build make sure you build frontend using: <code>yarn start</code>, or
<code>yarn build</code>.</li>
<li>Sometimes restarting <code>grafana-server</code> can help.</li>
<li>Check if you are using a non-supported browser. For more information, refer to the list of
<a href="https://grafana.com/docs/grafana/latest/installation/requirements/#supported-web-browsers">
supported browsers </a
>.</li>
</ol>
</main>
</div>
<script nonce="[[.Nonce]]">
// Check to see if browser is not supported by Grafana
// Source file in app/core/utils/browser.ts & tests make edits there and copy compiled typescript here
function checkBrowserCompatibility() {
var isIE = navigator.userAgent.indexOf('MSIE') > -1;
var isEdge = navigator.userAgent.indexOf('Edge/') > -1 || navigator.userAgent.indexOf('Edg/') > -1;
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
/* Check for
<= IE11 (Trident 7)
Edge <= 16
Firefox <= 64
Chrome <= 54
*/
var isEdgeVersion = /Edge\/([0-9.]+)/.exec(navigator.userAgent);
if (isIE && parseFloat(/Trident\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 7) {
return false;
} else if (
isEdge &&
((isEdgeVersion && parseFloat(isEdgeVersion[1]) <= 16) ||
parseFloat(/Edg\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 16)
) {
return false;
} else if (isFirefox && parseFloat(/Firefox\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 64) {
return false;
} else if (isChrome && parseFloat(/Chrome\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 54) {
return false;
}
return true;
}
if (!checkBrowserCompatibility()) {
alert('Your browser is not fully supported, please try newer version.');
}
</script>
</div>
<div id="reactRoot"></div>
<script nonce="[[.Nonce]]">
window.grafanaBootData = {
user: [[.User]],
settings: [[.Settings]],
navTree: [[.NavTree]],
assets: [[.Assets]]
};
// Set theme to match system only on startup.
// Do not react to changes in system theme after startup.
if (window.grafanaBootData.user.theme === "system") {
document.body.classList.remove("theme-system");
var darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
var cssLink = document.createElement("link");
cssLink.rel = 'stylesheet';
if (darkQuery.matches) {
document.body.classList.add("theme-dark");
cssLink.href = window.grafanaBootData.assets.dark;
window.grafanaBootData.user.lightTheme = false;
} else {
document.body.classList.add("theme-light");
cssLink.href = window.grafanaBootData.assets.light;
window.grafanaBootData.user.lightTheme = true;
}
document.head.appendChild(cssLink);
}
window.__grafana_load_failed = function() {
var preloader = document.getElementsByClassName("preloader");
if (preloader.length) {
preloader[0].className = "preloader preloader--done";
}
}
// In case the js files fails to load the code below will show an info message.
window.onload = function() {
if (window.__grafana_app_bundle_loaded) {
return;
}
window.__grafana_load_failed();
};
[[if .Assets.ContentDeliveryURL]]
window.public_cdn_path = '[[.Assets.ContentDeliveryURL]]public/build/';
[[end]]
[[if .Nonce]]
window.nonce = '[[.Nonce]]';
[[end]]
</script>
[[if .GoogleTagManagerId]]
<!-- Google Tag Manager -->
<script nonce="[[.Nonce]]">
dataLayer = [
{
IsSignedIn: '[[.User.IsSignedIn]]',
Email: '[[.User.Email]]',
Name: '[[.User.Name]]',
UserId: '[[.User.Id]]',
OrgId: '[[.User.OrgId]]',
OrgName: '[[.User.OrgName]]',
},
];
</script>
<noscript>
<iframe
src="//www.googletagmanager.com/ns.html?id=[[.GoogleTagManagerId]]"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe>
</noscript>
<script nonce="[[.Nonce]]">
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', '[[.GoogleTagManagerId]]');
</script>
<!-- End Google Tag Manager -->
[[end]]
[[if .Settings.FeatureToggles.assetSriChecks ]]
[[range $asset := .Assets.JSFiles]]
<script
nonce="[[$.Nonce]]"
src="[[$asset.FilePath]]"
integrity="[[$asset.Integrity]]"
crossorigin="anonymous"
type="text/javascript"
defer
></script>
[[end]]
[[else]]
[[range $asset := .Assets.JSFiles]]
<script
nonce="[[$.Nonce]]"
src="[[$asset.FilePath]]"
type="text/javascript"
defer
></script>
[[end]]
[[end]]
<script nonce="[[.Nonce]]">
performance.mark('frontend_boot_js_done_time_seconds');
</script>
</body>
</html>