tcjlj/nezha
1
0
Fork 0
mirror of https://github.com/nezhahq/nezha.git synced 2025-01-22 20:58:14 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

server-status和default主题：feat & improve & fix (#420)

Browse Source 
* feat & improve & fix
1. 增加WebAppManifest文件,实现把哪吒监控网页伪装成app放在移动端桌面
2. vps地图分布图增加数据异步加载loading效果
3. 修复echart图表纵坐标轴因数值过大显示不全bug

* 刷新CDN缓存

* fix footer

* 4.提升service页echarts图表相关体验
5.用设置基准1vh的方法解决footer页脚位置在移动端各种浏览器显示不一致的问题
6.修复section标签的使用位置

* 刷新CDN缓存
This commit is contained in:
nap0o 2024-09-06 11:31:38 -04:00 committed by GitHub
parent 511f43784e
commit b701efd9b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 155 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resource/static/manifest-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
resource/static/manifest-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

36
resource/static/manifest-en-US.json Normal file
View File

@ -0,0 +1,36 @@
{
"name": "Nezha",
"short_name": "Nezha",
"icons": [
{
"src": "/static/manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/static/manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "//static/manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "//static/manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#000000",
"lang": "eu-US",
"dir": "auto"
}

36
resource/static/manifest-zh-CN.json Normal file
View File

@ -0,0 +1,36 @@
{
"name": "哪吒监控",
"short_name": "哪吒监控",
"icons": [
{
"src": "/static/manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/static/manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/static/manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/static/manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#000000",
"lang": "zh-CN",
"dir": "auto"
}

3
resource/static/theme-server-status/css/main.css vendored
View File

@ -480,7 +480,8 @@ footer p{
padding-top:60px !important; padding-top:60px !important;
} }
.nezha { .nezha {
min-height: calc(74.5vh); min-height: calc(100vh - 90px);
min-height: calc(var(--vh, 1vh) * 100 - 90px);
} }
.content { .content {
padding: 0; padding: 0;

6
resource/static/theme-server-status/js/mixin.js vendored
View File

@ -26,7 +26,9 @@ const mixinsVue = {
this.semiTransparent = this.initSemiTransparent(); this.semiTransparent = this.initSemiTransparent();
this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : this.$root.defaultTemplate; this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : this.$root.defaultTemplate;
this.colors = this.theme == "dark" ? this.colorsDark : this.colorsLight; this.colors = this.theme == "dark" ? this.colorsDark : this.colorsLight;
this.setBenchmarkHeight();
window.addEventListener('scroll', this.handleScroll); window.addEventListener('scroll', this.handleScroll);
window.addEventListener('resize', this.setBenchmarkHeight());
}, },
destroyed() { destroyed() {
window.removeEventListener('scroll', this.handleScroll); window.removeEventListener('scroll', this.handleScroll);
@ -152,6 +154,10 @@ const mixinsVue = {
}, },
checkIsMobile() { // 检测设备类型,页面宽度小于768px认为是移动设备 checkIsMobile() { // 检测设备类型,页面宽度小于768px认为是移动设备
return window.innerWidth <= 768; return window.innerWidth <= 768;
},
setBenchmarkHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
} }
} }
} }

15
resource/template/theme-default/header.html vendored
View File

@ -3,12 +3,19 @@
<html lang="{{.Conf.Language}}"> <html lang="{{.Conf.Language}}">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="telephone=no" name="format-detection"> <meta content="telephone=no" name="format-detection">
<title>{{.Title}}</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#000000" />
{{ if eq .Conf.Language "zh-CN" }}
<link rel="manifest" href="/static/manifest-zh-CN.json?v20240905" />
{{ else }}
<link rel="manifest" href="/static/manifest-en-US.json?v20240905" />
{{ end }}
<link rel="apple-touch-startup-image" href="/static/logo.svg" />
<link rel="shortcut icon" type="image/png" href="/static/logo.svg">
<link rel="stylesheet" href="https://unpkg.com/semantic-ui@2.4.0/dist/semantic.min.css"> <link rel="stylesheet" href="https://unpkg.com/semantic-ui@2.4.0/dist/semantic.min.css">
<link rel="stylesheet" href="https://unpkg.com/font-logos@0.17.0/assets/font-logos.css"> <link rel="stylesheet" href="https://unpkg.com/font-logos@0.17.0/assets/font-logos.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

1
resource/template/theme-default/network.html vendored
View File

@ -80,6 +80,7 @@
}, },
dataZoom: [ dataZoom: [
{ {
type: 'slider',
start: 0, start: 0,
end: 100 end: 100
} }

2
resource/template/theme-server-status/footer.html vendored
View File

@ -1,5 +1,5 @@
{{define "theme-server-status/footer"}} {{define "theme-server-status/footer"}}
</div> </section>
<footer class="container-fluid"> <footer class="container-fluid">
<p>{{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}</p> <p>{{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}</p>
</footer> </footer>

19
resource/template/theme-server-status/header.html vendored
View File

@ -2,11 +2,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{.Conf.Language}}"> <html lang="{{.Conf.Language}}">
<head> <head>
<title>{{ .Title }}</title> <title>{{.Title}}</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#000000" />
{{if eq .Conf.Language "zh-CN"}}
<link rel="manifest" href="/static/manifest-zh-CN.json?v20240905" />
{{else}}
<link rel="manifest" href="/static/manifest-en-US.json?v20240905" />
{{end}}
<link rel="apple-touch-startup-image" href="/static/logo.svg" />
<link rel="shortcut icon" type="image/png" href="/static/logo.svg">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.4.1/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/font-logos@0.17.0/assets/font-logos.css"> <link rel="stylesheet" href="https://unpkg.com/font-logos@0.17.0/assets/font-logos.css">
@ -16,10 +25,10 @@
<script src="https://unpkg.com/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script> <script src="https://unpkg.com/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script> <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script> <script src="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script>
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v202408016"> <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240907">
<link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v202408011"> <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v202408011">
<link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240811"> <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240811">
<script src="/static/theme-server-status/js/mixin.js?v20240811"></script> <script src="/static/theme-server-status/js/mixin.js?v20240907"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">

27
resource/template/theme-server-status/home.html vendored
View File

@ -3,15 +3,15 @@
{{template "theme-server-status/menu" .}} {{template "theme-server-status/menu" .}}
<!-- showGroup true --> <!-- showGroup true -->
<template v-if="showGroup"> <template v-if="showGroup">
<section class="container-fluid table-responsive content" v-for="group in nodesTag"> <div class="container-fluid table-responsive content" v-for="group in nodesTag">
{{template "theme-server-status/home-group-true" .}} {{template "theme-server-status/home-group-true" .}}
</section> </div>
</template> </template>
<!-- showGroup false --> <!-- showGroup false -->
<template v-else> <template v-else>
<section class="container-fluid table-responsive content"> <div class="container-fluid table-responsive content">
{{template "theme-server-status/home-group-false" .}} {{template "theme-server-status/home-group-false" .}}
</section> </div>
</template> </template>
<div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true" style="padding-left:0"> <div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true" style="padding-left:0">
<div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-dialog modal-lg modal-dialog-centered">
@ -163,6 +163,9 @@
const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff"; const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff";
const fontSize = this.isMobile ? 10 : 12; const fontSize = this.isMobile ? 10 : 12;
const fontColor = this.theme == "dark" ? "#000000" : "#000000"; const fontColor = this.theme == "dark" ? "#000000" : "#000000";
const showLoadingMaskColor = this.theme == "dark" ? 'rgba(28, 29, 38, 1)' : 'rgba(249, 249, 249, 1)';
const showLoadingTextColor = this.theme == "dark" ? 'rgba(241, 241, 241, 1)' : 'rgba(0, 0, 0, 1)';
const showLoadingColor = inRangeColor;
const chartContainer = document.getElementById('mapChart'); const chartContainer = document.getElementById('mapChart');
const mapChart = echarts.init(chartContainer, '', { // init图表 const mapChart = echarts.init(chartContainer, '', { // init图表
renderer: 'canvas', renderer: 'canvas',
@ -170,6 +173,13 @@
width: width, width: width,
height: height, height: height,
}); });
mapChart.showLoading({
text: 'loading',
textColor: showLoadingTextColor,
color: showLoadingColor,
maskColor: showLoadingMaskColor,
zlevel: 2
});
fetch(this.staticUrl + '/maps/' + this.countryMapGeoFile) fetch(this.staticUrl + '/maps/' + this.countryMapGeoFile)
.then(response => response.json()) .then(response => response.json())
.then(worldMap => { .then(worldMap => {
@ -224,7 +234,10 @@
} }
] ]
}; };
setTimeout(() => {
mapChart.hideLoading();
mapChart.setOption(option); mapChart.setOption(option);
}, 1000);
}); });
}, },
isWindowsPlatform(str) { isWindowsPlatform(str) {
@ -510,15 +523,15 @@
// 定义图表参数值 // 定义图表参数值
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300; const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
const fontSize = this.isMobile ? 10 : 14; const fontSize = this.isMobile ? 10 : 14;
const gridLeft = this.isMobile ? 25 : 36; const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 30 : 40) : (this.isMobile ? 25 : 36);
const gridRight = this.isMobile ? 5 : 20; const gridRight = this.isMobile ? 5 : 20;
const legendLeft = this.isMobile ? 'center' : 'center'; const legendLeft = this.isMobile ? 'center' : 'center';
const legendTop = this.isMobile ? 5 : 5; const legendTop = this.isMobile ? 5 : 5;
const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0]; const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0];
const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const theme = localStorage.getItem("theme") ? localStorage.getItem("theme") : systemDarkMode; const theme = localStorage.getItem("theme") ? localStorage.getItem("theme") : systemDarkMode;
const chartTheme = theme == "dark" ? "dark" : "default"; const chartTheme = this.theme == "dark" ? "dark" : "default";
const fontColor = theme == "dark" ? "#f1f1f1" : "#000000"; const fontColor = this.theme == "dark" ? "#f1f1f1" : "#000000";
const backgroundColor = theme == "dark" ? '' : ''; const backgroundColor = theme == "dark" ? '' : '';
const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)"); const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)"); const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)");

2
resource/template/theme-server-status/menu.html vendored
View File

@ -64,6 +64,6 @@
</nav> </nav>
</div> </div>
</header> </header>
<div class="nezha"> <section class="nezha">
{{end}} {{end}}

30
resource/template/theme-server-status/network.html vendored
View File

@ -74,23 +74,24 @@
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300; const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
const autoheight = this.isMobile ? (window.innerHeight - 200) : (window.innerHeight - 250); const autoheight = this.isMobile ? (window.innerHeight - 200) : (window.innerHeight - 250);
const fontSize = this.isMobile ? 10 : 14; const fontSize = this.isMobile ? 10 : 14;
const gridLeft = this.isMobile ? 30 : 36; const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 36 : 42) : (this.isMobile ? 30 : 36);
const gridRight = this.isMobile ? 12 : 20; const gridRight = this.isMobile ? 12 : 20;
const legendLeft = this.isMobile ? 'center' : 'center'; const legendLeft = this.isMobile ? 'center' : 'center';
const legendTop = this.isMobile ? 5 : 5; const legendTop = this.isMobile ? 5 : 5;
const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0]; const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0];
const fontColor = this.theme == "dark" ? "#f1f1f1" : "#000000"; const fontColor = this.theme == "dark" ? "#f1f1f1" : "#000000";
const chartTheme = this.theme == "dark" ? "dark" : "default";
const backgroundColor = this.theme == "dark" ? '' : ''; const backgroundColor = this.theme == "dark" ? '' : '';
const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)"); const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)"); const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)");
const lineStyleWidth = this.isMobile ? 1 : 2; const lineStyleWidth = this.isMobile ? 1 : 2;
const splitLineWidth = this.isMobile ? 0.5 : 1; const splitLineWidth = this.isMobile ? 0.5 : 1;
const splitLineColor = this.theme == "dark" ? "rgba(110, 112, 121, 0.95)" : "rgba(224, 230, 241, 0.95)"; const markPointSymbolSize = this.isMobile ? 30 : 42;
const markPointLabelColor = this.theme == "dark" ? "#111111" : "#000000"; const markPointItemStyleOpacity = this.semiTransparent ? 1 : 0.9;
const markPointItemStyleOpacity = this.semiTransparent ? 1 : 0.75; const markPointFontSize = this.isMobile ? 8 : 10;
const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75; const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3; const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3;
this.chart = echarts.init(chartContainer, '', { // init图表 this.chart = echarts.init(chartContainer, chartTheme, { // init图表
renderer: 'canvas', renderer: 'canvas',
useDirtyRect: false, useDirtyRect: false,
width: 'auto', width: 'auto',
@ -182,10 +183,9 @@
itemStyle: { itemStyle: {
opacity: markPointItemStyleOpacity opacity: markPointItemStyleOpacity
}, },
symbolSize: 30, symbolSize: markPointSymbolSize,
label: { label: {
fontSize: 8, fontSize: markPointFontSize,
color: markPointLabelColor,
formatter: function (params) { formatter: function (params) {
return Math.round(params.value); return Math.round(params.value);
} }
@ -198,10 +198,9 @@
itemStyle: { itemStyle: {
opacity: markPointItemStyleOpacity opacity: markPointItemStyleOpacity
}, },
symbolSize: 30, symbolSize: markPointSymbolSize,
label: { label: {
fontSize: 8, fontSize: markPointFontSize,
color: markPointLabelColor,
offset: [0, 8], offset: [0, 8],
formatter: function (params) { formatter: function (params) {
return Math.round(params.value); return Math.round(params.value);
@ -218,7 +217,8 @@
const maxLegendsPerRowPc = localStorage.getItem("maxLegendsPerRowPc") ? localStorage.getItem("maxLegendsPerRowPc") : 6; const maxLegendsPerRowPc = localStorage.getItem("maxLegendsPerRowPc") ? localStorage.getItem("maxLegendsPerRowPc") : 6;
const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28); const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28);
const height = autoheight + autoIncrement; const height = autoheight + autoIncrement;
const gridTop = 40 + autoIncrement; const gridTop = this.isMobile ? ( 60 + autoIncrement) : (80 + autoIncrement);
const gridBottom = this.isMobile ? 70 : 90;
const legendIcon = this.isMobile ? 'rect' : ""; const legendIcon = this.isMobile ? 'rect' : "";
const itemWidth = this.isMobile ? 10 : 25; const itemWidth = this.isMobile ? 10 : 25;
const itemHeight = this.isMobile ? 10 : 14; const itemHeight = this.isMobile ? 10 : 14;
@ -241,7 +241,8 @@
grid: { grid: {
top: gridTop, top: gridTop,
left: gridLeft, left: gridLeft,
right: gridRight right: gridRight,
bottom: gridBottom
}, },
// 图表标题设置 // 图表标题设置
title: { title: {
@ -268,8 +269,7 @@
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
width: splitLineWidth, width: splitLineWidth
color: splitLineColor
} }
} }
}, },

20
resource/template/theme-server-status/service.html vendored
View File

@ -3,24 +3,24 @@
{{template "theme-server-status/menu" .}} {{template "theme-server-status/menu" .}}
<!-- showGroup true --> <!-- showGroup true -->
<template v-if="showGroup"> <template v-if="showGroup">
<section v-if="servicesTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;"> <div v-if="servicesTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
<p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p> <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
</section> </div>
<section v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;" v-for="group in servicesTag"> <div v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
{{template "theme-server-status/service-group-true" .}} {{template "theme-server-status/service-group-true" .}}
</section> </div>
</template> </template>
<!-- showGroup false --> <!-- showGroup false -->
<template v-else> <template v-else>
<section v-if="servicesNoTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;"> <div v-if="servicesNoTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
<p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p> <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
</section> </div>
<section v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;"> <div v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
{{template "theme-server-status/service-group-false" .}} {{template "theme-server-status/service-group-false" .}}
</section> </div>
</template> </template>
{{if .CycleTransferStats}} {{if .CycleTransferStats}}
<section class="container-fluid content table-responsive"> <div class="container-fluid content table-responsive">
<table class="table table-striped table-condensed table-hover"> <table class="table table-striped table-condensed table-hover">
<thead> <thead>
<tr class="node-group-tag"> <tr class="node-group-tag">
@ -67,7 +67,7 @@
{{end}} {{end}}
</tbody> </tbody>
</table> </table>
</section> </div>
{{end}} {{end}}
{{template "theme-server-status/footer" .}} {{template "theme-server-status/footer" .}}
<script> <script>