index-template.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="viewport" content="width=device-width" />
  7. <meta name="theme-color" content="#000" />
  8. <title>[[.AppTitle]]</title>
  9. <base href="[[.AppSubUrl]]/" />
  10. <link
  11. rel="preload"
  12. href="[[.ContentDeliveryURL]]public/fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2"
  13. as="font"
  14. crossorigin
  15. />
  16. <link rel="icon" type="image/png" href="[[.FavIcon]]" />
  17. <link rel="apple-touch-icon" sizes="180x180" href="[[.AppleTouchIcon]]" />
  18. <link rel="mask-icon" href="[[.ContentDeliveryURL]]public/img/grafana_mask_icon.svg" color="#F05A28" />
  19. [[ if eq .Theme "light" ]]
  20. <link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/<%= htmlWebpackPlugin.files.cssChunks.light %>" />
  21. [[ else ]]
  22. <link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/<%= htmlWebpackPlugin.files.cssChunks.dark %>" />
  23. [[ end ]]
  24. <script nonce="[[.Nonce]]">
  25. performance.mark('frontend_boot_css_time_seconds');
  26. </script>
  27. <meta name="apple-mobile-web-app-capable" content="yes" />
  28. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  29. <meta name="msapplication-TileColor" content="#2b5797" />
  30. <meta name="msapplication-config" content="public/img/browserconfig.xml" />
  31. </head>
  32. <body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]">
  33. <style>
  34. .preloader {
  35. height: 100%;
  36. flex-direction: column;
  37. display: flex;
  38. justify-content: center;
  39. align-items: center;
  40. }
  41. .preloader__enter {
  42. opacity: 0;
  43. animation-name: preloader-fade-in;
  44. animation-iteration-count: 1;
  45. animation-duration: 0.9s;
  46. animation-delay: 1.35s;
  47. animation-fill-mode: forwards;
  48. }
  49. .preloader__bounce {
  50. text-align: center;
  51. animation-name: preloader-bounce;
  52. animation-duration: 0.9s;
  53. animation-iteration-count: infinite;
  54. }
  55. .preloader__logo {
  56. display: inline-block;
  57. animation-name: preloader-squash;
  58. animation-duration: 0.9s;
  59. animation-iteration-count: infinite;
  60. width: 60px;
  61. height: 60px;
  62. background-repeat: no-repeat;
  63. background-size: contain;
  64. background-image: url('[[.LoadingLogo]]');
  65. }
  66. .preloader__text {
  67. margin-top: 16px;
  68. font-weight: 500;
  69. font-size: 14px;
  70. font-family: Sans-serif;
  71. opacity: 0;
  72. animation-name: preloader-fade-in;
  73. animation-duration: 0.9s;
  74. animation-delay: 1.8s;
  75. animation-fill-mode: forwards;
  76. }
  77. .theme-light .preloader__text {
  78. color: #52545c;
  79. }
  80. .theme-dark .preloader__text {
  81. color: #d8d9da;
  82. }
  83. @keyframes preloader-fade-in {
  84. 0% {
  85. opacity: 0;
  86. /*animation-timing-function: linear;*/
  87. animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
  88. }
  89. 100% {
  90. opacity: 1;
  91. }
  92. }
  93. @keyframes preloader-bounce {
  94. from,
  95. to {
  96. transform: translateY(0px);
  97. animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
  98. }
  99. 50% {
  100. transform: translateY(-50px);
  101. animation-timing-function: cubic-bezier(0.9, 0, 0.7, 1);
  102. }
  103. }
  104. @keyframes preloader-squash {
  105. 0% {
  106. transform: scaleX(1.3) scaleY(0.8);
  107. animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
  108. transform-origin: bottom center;
  109. }
  110. 15% {
  111. transform: scaleX(0.75) scaleY(1.25);
  112. animation-timing-function: cubic-bezier(0, 0, 0.7, 0.75);
  113. transform-origin: bottom center;
  114. }
  115. 55% {
  116. transform: scaleX(1.05) scaleY(0.95);
  117. animation-timing-function: cubic-bezier(0.9, 0, 1, 1);
  118. transform-origin: top center;
  119. }
  120. 95% {
  121. transform: scaleX(0.75) scaleY(1.25);
  122. animation-timing-function: cubic-bezier(0, 0, 0, 1);
  123. transform-origin: bottom center;
  124. }
  125. 100% {
  126. transform: scaleX(1.3) scaleY(0.8);
  127. transform-origin: bottom center;
  128. animation-timing-function: cubic-bezier(0, 0, 0.7, 1);
  129. }
  130. }
  131. /* Fail info */
  132. .preloader__text--fail {
  133. display: none;
  134. }
  135. /* stop logo animation */
  136. .preloader--done .preloader__bounce,
  137. .preloader--done .preloader__logo {
  138. animation-name: none;
  139. display: none;
  140. }
  141. .preloader--done .preloader__logo,
  142. .preloader--done .preloader__text {
  143. display: none;
  144. color: #ff5705 !important;
  145. font-size: 15px;
  146. }
  147. .preloader--done .preloader__text--fail {
  148. display: block;
  149. }
  150. [ng\:cloak],
  151. [ng-cloak],
  152. .ng-cloak {
  153. display: none !important;
  154. }
  155. </style>
  156. <div class="preloader">
  157. <div class="preloader__enter">
  158. <div class="preloader__bounce">
  159. <div class="preloader__logo"></div>
  160. </div>
  161. </div>
  162. <div class="preloader__text">Loading Grafana</div>
  163. <div class="preloader__text preloader__text--fail">
  164. <p>
  165. <strong>If you're seeing this Grafana has failed to load its application files</strong>
  166. <br />
  167. <br />
  168. </p>
  169. <p>
  170. 1. This could be caused by your reverse proxy settings.<br /><br />
  171. 2. If you host grafana under subpath make sure your grafana.ini root_url setting includes subpath. If not
  172. using a reverse proxy make sure to set serve_from_sub_path to true.<br />
  173. <br />
  174. 3. If you have a local dev build make sure you build frontend using: yarn start, yarn start:hot, or yarn
  175. build<br />
  176. <br />
  177. 4. Sometimes restarting grafana-server can help<br />
  178. <br />
  179. 5. Check if you are using a non-supported browser. For more information, refer to the list of
  180. <a href="https://grafana.com/docs/grafana/latest/installation/requirements/#supported-web-browsers">
  181. supported browsers</a
  182. >.
  183. </p>
  184. </div>
  185. <script nonce="[[.Nonce]]">
  186. // Check to see if browser is not supported by Grafana
  187. // Source file in app/core/utils/browser.ts & tests make edits there and copy compiled typescript here
  188. function checkBrowserCompatibility() {
  189. var isIE = navigator.userAgent.indexOf('MSIE') > -1;
  190. var isEdge = navigator.userAgent.indexOf('Edge/') > -1 || navigator.userAgent.indexOf('Edg/') > -1;
  191. var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
  192. var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  193. /* Check for
  194. <= IE11 (Trident 7)
  195. Edge <= 16
  196. Firefox <= 64
  197. Chrome <= 54
  198. */
  199. var isEdgeVersion = /Edge\/([0-9.]+)/.exec(navigator.userAgent);
  200. if (isIE && parseFloat(/Trident\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 7) {
  201. return false;
  202. } else if (
  203. isEdge &&
  204. ((isEdgeVersion && parseFloat(isEdgeVersion[1]) <= 16) ||
  205. parseFloat(/Edg\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 16)
  206. ) {
  207. return false;
  208. } else if (isFirefox && parseFloat(/Firefox\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 64) {
  209. return false;
  210. } else if (isChrome && parseFloat(/Chrome\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 54) {
  211. return false;
  212. }
  213. return true;
  214. }
  215. if (!checkBrowserCompatibility()) {
  216. alert('Your browser is not fully supported, please try newer version.');
  217. }
  218. </script>
  219. </div>
  220. <div id="reactRoot"></div>
  221. <script nonce="[[.Nonce]]">
  222. window.grafanaBootData = {
  223. user: [[.User]],
  224. settings: [[.Settings]],
  225. navTree: [[.NavTree]],
  226. themePaths: {
  227. light: '[[.ContentDeliveryURL]]public/build/<%= htmlWebpackPlugin.files.cssChunks.light %>',
  228. dark: '[[.ContentDeliveryURL]]public/build/<%= htmlWebpackPlugin.files.cssChunks.dark %>'
  229. }
  230. };
  231. window.__grafana_load_failed = function() {
  232. var preloader = document.getElementsByClassName("preloader");
  233. if (preloader.length) {
  234. preloader[0].className = "preloader preloader--done";
  235. }
  236. }
  237. // In case the js files fails to load the code below will show an info message.
  238. window.onload = function() {
  239. if (window.__grafana_app_bundle_loaded) {
  240. return;
  241. }
  242. window.__grafana_load_failed();
  243. };
  244. [[if .ContentDeliveryURL]]
  245. window.public_cdn_path = '[[.ContentDeliveryURL]]public/build/';
  246. [[end]]
  247. [[if .Nonce]]
  248. window.nonce = '[[.Nonce]]';
  249. [[end]]
  250. </script>
  251. [[if .GoogleTagManagerId]]
  252. <!-- Google Tag Manager -->
  253. <script nonce="[[.Nonce]]">
  254. dataLayer = [
  255. {
  256. IsSignedIn: '[[.User.IsSignedIn]]',
  257. Email: '[[.User.Email]]',
  258. Name: '[[.User.Name]]',
  259. UserId: '[[.User.Id]]',
  260. OrgId: '[[.User.OrgId]]',
  261. OrgName: '[[.User.OrgName]]',
  262. },
  263. ];
  264. </script>
  265. <noscript>
  266. <iframe
  267. src="//www.googletagmanager.com/ns.html?id=[[.GoogleTagManagerId]]"
  268. height="0"
  269. width="0"
  270. style="display: none; visibility: hidden"
  271. ></iframe>
  272. </noscript>
  273. <script nonce="[[.Nonce]]">
  274. (function (w, d, s, l, i) {
  275. w[l] = w[l] || [];
  276. w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
  277. var f = d.getElementsByTagName(s)[0],
  278. j = d.createElement(s),
  279. dl = l != 'dataLayer' ? '&l=' + l : '';
  280. j.async = true;
  281. j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
  282. f.parentNode.insertBefore(j, f);
  283. })(window, document, 'script', 'dataLayer', '[[.GoogleTagManagerId]]');
  284. </script>
  285. <!-- End Google Tag Manager -->
  286. [[end]] <% for (index in htmlWebpackPlugin.files.js) { %> <% if (htmlWebpackPlugin.files.jsIntegrity) { %>
  287. <script
  288. nonce="[[.Nonce]]"
  289. src="[[.ContentDeliveryURL]]<%= htmlWebpackPlugin.files.js[index] %>"
  290. type="text/javascript"
  291. integrity="<%= htmlWebpackPlugin.files.jsIntegrity[index] %>"
  292. crossorigin="<%= webpackConfig.output.crossOriginLoading %>"
  293. ></script>
  294. <% } else { %>
  295. <script
  296. nonce="[[.Nonce]]"
  297. src="[[.ContentDeliveryURL]]<%= htmlWebpackPlugin.files.js[index] %>"
  298. type="text/javascript"
  299. ></script>
  300. <% } %> <% } %>
  301. <script nonce="[[.Nonce]]">
  302. performance.mark('frontend_boot_js_done_time_seconds');
  303. </script>
  304. </body>
  305. </html>