修改部分规则模块删除无用前端 新增前端界面
This commit is contained in:
zouju
387
modeler/config/grafana/views/index.html
Normal file
387
modeler/config/grafana/views/index.html
Normal file
@@ -0,0 +1,387 @@
|
||||
<!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]]
|
||||
};
|
||||
|
||||
// FEMT index.html uses this, and we want to keep the index.ts the same for both
|
||||
window.__grafana_boot_data_promise = Promise.resolve();
|
||||
|
||||
// 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>
|
||||
Reference in New Issue
Block a user