KJZH001/nezha-2024
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve server-status theme (#310)

Browse Source 
* Add files via upload

* Add files via upload

* Add files via upload

* improve theme-server-status

1.前台分组展示agent
2.一些小优化

---------

Co-authored-by: SuperHsiao <superhsiao@4indesign.com>
This commit is contained in:
nap0o 2023-12-07 08:58:42 -05:00 committed by GitHub
parent 30652c3d79
commit 99111a3115
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 209 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
resource/static/theme-server-status/css/dark.css vendored
View File

File diff suppressed because one or more lines are too long

25
resource/static/theme-server-status/css/light.css vendored
View File

@ -27,6 +27,10 @@ body[theme="light"] .table {
background: #ffffff; background: #ffffff;
} }
body[theme="light"] .table>thead>tr>th.node-group-tag {
background-color:#ffffff;
}
body[theme="light"] .table-striped tbody > tr.even > td, body[theme="light"] .table-striped tbody > tr.even > td,
body[theme="light"] .table-striped tbody > tr.even > th { body[theme="light"] .table-striped tbody > tr.even > th {
background-color: #F9F9F9; background-color: #F9F9F9;
@ -37,10 +41,25 @@ body[theme="light"] .table-striped tbody > tr.odd > th {
background-color: #FFF; background-color: #FFF;
} }
body[theme="light"] .table>tbody>tr>td,
body[theme="light"] .table>tbody>tr>th,
body[theme="light"] .table>tfoot>tr>td,
body[theme="light"] .table>tfoot>tr>th,
body[theme="light"] .table>thead>tr>td,
body[theme="light"] .table>thead>tr>th {
line-height:20px;
}
body[theme="light"] .progress-bar { body[theme="light"] .progress-bar {
color: #000; color: #000;
} }
body[theme="light"] .progress-offline .progress-bar-success {
background-image: linear-gradient(grey 0px, grey 100%);
}
}
body[theme="light"] .table-hover > tbody > tr:hover > td { body[theme="light"] .table-hover > tbody > tr:hover > td {
background: #E6E6E6; background: #E6E6E6;
} }
@ -75,4 +94,10 @@ body[theme="light"] .service-status .warning {
body[theme="light"] .service-day-status-icon { body[theme="light"] .service-day-status-icon {
background-color: #ebebeb; background-color: #ebebeb;
}
body[theme="light"] footer p a,
body[theme="light"] footer p a:hover {
color: #333333;
text-decoration: none;
} }

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

@ -1,5 +1,5 @@
body { body {
padding-top: 70px !important; padding-top:70px !important;
padding-bottom: 30px !important; padding-bottom: 30px !important;
} }
@ -8,14 +8,27 @@ body {
min-height: 40px !important; min-height: 40px !important;
} }
.navbar-inner{
margin:0 auto;
}
.pl-md-unset {
max-width: 95vw;
}
.navbar-collapse:not([aria-expanded]) .navbar-nav .dropdown-toggle { .navbar-collapse:not([aria-expanded]) .navbar-nav .dropdown-toggle {
margin-top: 18px; margin-top: 18px;
padding: 0 !important; padding: 0 !important;
} }
.navbar-toggle {
margin-right:0
}
.navbar-brand { .navbar-brand {
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
padding:12px 0 0 0;
} }
.node-cell-expand { .node-cell-expand {
@ -32,18 +45,17 @@ body {
padding-top: 10px; padding-top: 10px;
} }
.dropdown {
margin-right: 10px;
}
.navbar-inverse, .nav.navbar-nav { .navbar-inverse, .nav.navbar-nav {
background-image: linear-gradient(rgb(60, 60, 60) 0px, rgb(34, 34, 34) 100%) !important; background-image: linear-gradient(rgb(60, 60, 60) 0px, rgb(34, 34, 34) 100%) !important;
} }
.navbar-inverse .navbar-nav>li>a {
color:#f1f1f1;
}
.navbar-inverse .navbar-brand { .navbar-inverse .navbar-brand {
font-size: 20px; font-size: 20px;
} }
/* 导航部分 结束 */ /* 导航部分 结束 */
/* 正文部分 开始 */ /* 正文部分 开始 */
@ -63,6 +75,15 @@ body {
text-align: left; text-align: left;
} }
.table>thead>tr>th{
border:none;
}
.table .node-group-tag {
font-size: 18px;
padding-bottom:15px;
}
.progress { .progress {
margin-bottom: 0; margin-bottom: 0;
} }
@ -78,6 +99,10 @@ body {
border-top: 0 !important; border-top: 0 !important;
} }
.accordian-body{
margin: 10px 0px 10px 18px;
}
.node-cell.center { .node-cell.center {
text-align: center !important; text-align: center !important;
} }
@ -147,104 +172,45 @@ body {
} }
/* 服务页 正文结束 */ /* 服务页 正文结束 */
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
.node-cell.os, .accordian-body{
.node-cell.location, margin: 5px 0px 5px 10px;
.node-cell.uptime { }
display: none; .table .node-group-tag {
visibility: hidden; font-size:16px;
padding-bottom:6px;
} }
} }
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
body { body {
font-size: 10px !important; font-size: 10px !important;
padding-top:60px !important;
} }
.content { .content {
padding: 0; padding: 0;
margin-bottom: 10px;
} }
.node-cell.os, .node-cell.os,
.node-cell.location,
.node-cell.uptime {
display: none;
visibility: hidden;
}
.service-day-status-icon {
width: 8px;
height: 8px;
margin-right: 2px;
border-radius: 3px;
}
}
@media only screen and (max-width: 620px) {
body {
font-size: 10px !important;
}
.content {
padding: 0;
}
.node-cell.type,
.node-cell.location,
.node-cell.uptime, .node-cell.uptime,
.node-cell.traffic { .node-cell.traffic{
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.node-cell.location{
.service-day-status-icon { display: table-cell;
visibility: visible;
} }
} .node-cell-os-text,.node-cell-location-text{
@media only screen and (max-width: 533px) {
body {
font-size: 10px !important;
}
.content {
padding: 0;
}
.node-cell.os,
.node-cell.location,
.node-cell.uptime,
.node-cell.traffic {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.accordian-body{
.service-day-status-icon { margin: 5px 0px 5px 10px;
} }
} .table .node-group-tag {
font-size:12px;
@media only screen and (max-width: 450px) { padding-bottom:6px;
body {
font-size: 10px !important;
}
.content {
padding: 0;
}
.node-cell.type,
.node-cell.location,
.node-cell.uptime,
.node-cell.traffic {
display: none;
visibility: hidden;
}
.node-cell.cpu,
.node-cell.ram,
.node-cell.hdd {
min-width: 25px;
max-width: 50px;
} }
} }

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

@ -1,8 +1,7 @@
{{define "theme-server-status/content-footer"}} {{define "theme-server-status/content-footer"}}
<footer class="container" style="padding-bottom: 2rem;"> <footer class="container" style="padding-bottom: 2rem;">
<p style="text-align: center; font-size: 10px;"> <p style="text-align: center; font-size: 10px;">
{{ .Conf.Site.Brand }} | Theme <a href="https://github.com/cppla/ServerStatus">ServerStatus</a> | Powered by <a {{ .Conf.Site.Brand }} | Theme <a target="_blank" href="https://github.com/cppla/ServerStatus">ServerStatus</a> | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}
href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}
</p> </p>
</footer> </footer>
{{end}} {{end}}

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

@ -44,4 +44,4 @@
</div> </div>
</div> </div>
</div> </div>
{{end}} {{end}}

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

@ -1,7 +1,6 @@
{{define "theme-server-status/header"}} {{define "theme-server-status/header"}}
<!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">
@ -9,11 +8,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/theme-server-status/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/theme-server-status/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/theme-server-status/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="/static/theme-server-status/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20231109"> <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20231207">
<link rel="stylesheet" href="/static/theme-server-status/css/dark.css"> <link rel="stylesheet" href="/static/theme-server-status/css/dark.css">
<link rel="stylesheet" href="/static/theme-server-status/css/light.css"> <link rel="stylesheet" href="/static/theme-server-status/css/light.css">
<link href="https://cdn.staticfile.org/font-logos/0.17/font-logos.min.css" type="text/css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/font-logos/0.17/font-logos.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css">
<link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" /> <link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
@ -23,12 +24,10 @@
{{if ts .CustomCode}} {{if ts .CustomCode}}
{{.CustomCode|safe}} {{.CustomCode|safe}}
{{end}} {{end}}
<script src="/static/theme-server-status/js/jquery.min.js"></script> <script src="/static/theme-server-status/js/jquery.min.js"></script>
<script src="/static/theme-server-status/js/bootstrap.min.js"></script> <script src="/static/theme-server-status/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="/static/theme-server-status/js/mixin.js"></script> <script src="/static/theme-server-status/js/mixin.js"></script>
</head> </head>
<body> <body>
{{end}} {{end}}

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

@ -2,26 +2,30 @@
{{template "theme-server-status/header" .}} {{template "theme-server-status/header" .}}
<div id="app"> <div id="app">
{{template "theme-server-status/content-nav" .}} {{template "theme-server-status/content-nav" .}}
<div class="container table-responsive content" style="max-width: 95vw"> <div class="container table-responsive content" style="max-width: 95vw" v-for="group in nodes">
<table class="table table-striped table-condensed table-hover"> <table class="table table-striped table-condensed table-hover">
<thead> <thead>
<tr> <tr>
<th class="node-cell status center">🍀 {{tr "Status"}}</th> <th class="node-group-tag" colspan="16" style="border:none;">@#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@</th>
<th class="node-cell name">🚀 {{tr "Name"}}</th> </th>
<th class="node-cell os">🗂 {{tr "Platform"}}</th> </tr>
<th class="node-cell location center">🌍 {{tr "Location"}}</th> <tr>
<th class="node-cell uptime center">⏱️ {{tr "Uptime"}}</th> <th class="node-cell status center">{{tr "Status"}}</th>
<th class="node-cell load center">📋{{tr "Load"}}</th> <th class="node-cell name center">{{tr "Name"}}</th>
<th class="node-cell network center">🚦 {{tr "NetSpeed"}}↓|↑</th> <th class="node-cell os center">{{tr "Platform"}}</th>
<th class="node-cell traffic center">📊 {{tr "NetTransfer"}}↓|↑</th> <th class="node-cell location center">{{tr "Location"}}</th>
<th class="node-cell cpu center">🎯 {{tr "CpuUsed"}}</th> <th class="node-cell uptime center">{{tr "Uptime"}}</th>
<th class="node-cell ram center">⚡ {{tr "MemUsed"}}</th> <th class="node-cell load center">{{tr "Load"}}</th>
<th class="node-cell hdd center">💾 {{tr "DiskUsed"}}</th> <th class="node-cell network center">{{tr "NetSpeed"}}↓|↑</th>
<th class="node-cell traffic center">{{tr "NetTransfer"}}↓|↑</th>
<th class="node-cell cpu center">{{tr "CpuUsed"}}</th>
<th class="node-cell ram center">{{tr "MemUsed"}}</th>
<th class="node-cell hdd center">{{tr "DiskUsed"}}</th>
</tr> </tr>
</thead> </thead>
<tbody id="servers"> <tbody id="servers">
<template v-for="(node,index) in nodes"> <template v-for="(node,index) in group.data">
<tr :id="'r'+index" data-toggle="collapse" :data-target="'#rt'+index" class="accordion-toggle" <tr :id="'r'+node.ID" data-toggle="collapse" :data-target="'#rt'+node.ID" class="accordion-toggle"
:class="index % 2 === 0 ? 'odd': 'even'"> :class="index % 2 === 0 ? 'odd': 'even'">
<td class="node-cell status center"> <td class="node-cell status center">
<div class="status-container"> <div class="status-container">
@ -29,36 +33,36 @@
<div v-else class="status-icon offline"></div> <div v-else class="status-icon offline"></div>
</div> </div>
</td> </td>
<td class="node-cell name">@#node.name#@</td> <td class="node-cell name center">@#node.name#@</td>
<td class="node-cell os"> <td class="node-cell os center">
<i v-if='node.os == "darwin"' class="apple icon"></i> <i v-if='node.os == "darwin"' class="apple icon"></i>
<i v-else-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i> <i v-else-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i>
<i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i> <i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i>
@#node.os#@ <span class="node-cell-os-text">@#node.os#@</span>
</td> </td>
<td style="text-align: center;" class="node-cell location"> <td style="text-align: center;" class="node-cell location">
<i :class="node.location + ' flag'"></i>&nbsp; <i :class="'fi fi-' + node.location"></i>
<span class="text-uppercase">@#node.location#@</span> <span class="node-cell-location-text text-uppercase">&nbsp;@#node.location#@</span>
</td> </td>
<td style="text-align: center;" class="node-cell uptime">@#node.uptime#@</td> <td style="text-align: center;" class="node-cell uptime">@#node.uptime#@</td>
<td style="text-align: center;" class="node-cell load">@#node.load#@</td> <td style="text-align: center;" class="node-cell load">@#node.load#@</td>
<td style="text-align: center;" class="node-cell network">@#node.network#@</td> <td style="text-align: center;" class="node-cell network">@#node.network#@</td>
<td style="text-align: center;" class="node-cell traffic">@#node.traffic#@</td> <td style="text-align: center;" class="node-cell traffic">@#node.traffic#@</td>
<td class="node-cell cpu"> <td class="node-cell cpu">
<div class="progress"> <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
<div :style="node.cpu.style" :class="node.cpu.class"><small>@#node.cpu.percent#@%</small> <div :style="node.cpu.style" :class="node.cpu.class"><small>@#node.cpu.percent#@%</small>
</div> </div>
</div> </div>
</td> </td>
<td class="node-cell memory"> <td class="node-cell memory">
<div class="progress"> <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
<div :style="node.memory.style" :class="node.memory.class"> <div :style="node.memory.style" :class="node.memory.class">
<small>@#node.memory.percent#@%</small> <small>@#node.memory.percent#@%</small>
</div> </div>
</div> </div>
</td> </td>
<td class="node-cell hdd"> <td class="node-cell hdd">
<div class="progress"> <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
<div :style="node.hdd.style" :class="node.hdd.class"><small>@#node.hdd.percent#@%</small> <div :style="node.hdd.style" :class="node.hdd.class"><small>@#node.hdd.percent#@%</small>
</div> </div>
</div> </div>
@ -66,78 +70,72 @@
</tr> </tr>
<tr class="expandRow" :class="index % 2 === 0 ? 'odd': 'even'"> <tr class="expandRow" :class="index % 2 === 0 ? 'odd': 'even'">
<td colspan="16"> <td colspan="16">
<div class="accordian-body collapse" :id="'rt'+index"> <div class="accordian-body collapse" :id="'rt'+node.ID">
<div style="display: flex;align-items: center;justify-content: center;flex-direction: column;"> <div style="display: flex;left-items: center;justify-content: center;flex-direction: column; max-width: 89vw">
<div style="display: flex;align-items: flex-start;justify-content: center;flex-direction: column; width: 450px;max-width: 90vw">
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "Platform"}}:</span> <span class="node-cell-expand-label">{{tr "Platform"}}:</span>
@#node.host.Platform#@ @#node.host.Platform#@-@#node.host.PlatformVersion#@
</span> [<span v-if="node.host.Virtualization">@#node.host.Virtualization#@:</span>@#node.host.Arch#@]
<span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "Location"}}:</span>
<i :class="node.location + ' flag'"></i>
</span> </span>
<span class="node-cell-expand" v-if="node.host.CPU"> <span class="node-cell-expand" v-if="node.host.CPU">
<span class="node-cell-expand-label">CPU:</span> <span class="node-cell-expand-label">CPU:</span>
@#node.host.CPU.join(",")#@ @#node.host.CPU.join(",")#@
</span> </span>
<span class="node-cell-expand load"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "Load"}}:</span>
@#toFixed2(node.state.Load1)#@ / @#toFixed2(node.state.Load5)#@ /@#toFixed2(node.state.Load15)#@
</span>
<span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "DiskUsed"}}:</span> <span class="node-cell-expand-label">{{tr "DiskUsed"}}:</span>
@#formatByteSize(node.state.DiskUsed)#@ / @#formatByteSize(node.host.DiskTotal)#@ @#formatByteSize(node.state.DiskUsed)#@ / @#formatByteSize(node.host.DiskTotal)#@
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "MemUsed"}}:</span> <span class="node-cell-expand-label">{{tr "MemUsed"}}:</span>
@#formatByteSize(node.state.MemUsed)#@ / @#formatByteSize(node.host.MemTotal)#@(@#toFixed2(node.state.MemUsed / node.host.MemTotal * 100)#@%) @#formatByteSize(node.state.MemUsed)#@ / @#formatByteSize(node.host.MemTotal)#@(@#toFixed2(node.state.MemUsed / node.host.MemTotal * 100)#@%)
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "SwapUsed"}}:</span>
@#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@
<span v-if="node.host.SwapTotal">(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span>
</span>
<span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span> <span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span>
<i class="arrow alternate circle down outline icon" <i class="arrow alternate circle down outline icon"
style="margin: 0"></i>@#formatByteSize(node.state.NetInTransfer)#@ style="margin: 0"></i>@#formatByteSize(node.state.NetInTransfer)#@
<i class="arrow alternate circle up outline icon" <i class="arrow alternate circle up outline icon"
style="margin: 0"></i>@#formatByteSize(node.state.NetOutTransfer)#@ style="margin: 0"></i>@#formatByteSize(node.state.NetOutTransfer)#@
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand load">
<span class="node-cell-expand-label">{{tr "SwapUsed"}}:</span> <span class="node-cell-expand-label">{{tr "Load"}}:</span>
@#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@ @#toFixed2(node.state.Load1)#@ / @#toFixed2(node.state.Load5)#@ / @#toFixed2(node.state.Load15)#@
<span v-if="node.host.SwapTotal">(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span>
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "BootTime"}}:</span>
@#formatTimestamp(node.host.BootTime)#@
</span>
<span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "LastActive"}}:</span>
@#new Date(node.lastActive).toLocaleString()#@
</span>
<span class="node-cell-expand" v-if="node.host.Virtualization">
<span class="node-cell-expand-label">{{tr "Virtualization"}}:</span>
@#node.host.Virtualization#@
</span>
<span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "ProcessCount"}}:</span> <span class="node-cell-expand-label">{{tr "ProcessCount"}}:</span>
@#node.state.ProcessCount#@ @#node.state.ProcessCount#@
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "ConnCount"}}:</span> <span class="node-cell-expand-label">{{tr "ConnCount"}}:</span>
TCP @#node.state.TcpConnCount#@ / UDP @#node.state.UdpConnCount#@ TCP @#node.state.TcpConnCount#@ / UDP @#node.state.UdpConnCount#@
</span> </span>
</div> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "BootTime"}}:</span>
@#formatTimestamp(node.host.BootTime)#@
</span>
<span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "LastActive"}}:</span>
@#new Date(node.lastActive).toLocaleString()#@
</span>
<span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "Version"}}:</span>
@#node.host.Version#@
</span>
</div> </div>
</div> </div>
</td> </td>
</tr> </tr>
</template> </template>
</tbody> </tbody>
</table> </table>
<br/>
</div> </div>
{{template "theme-server-status/content-footer" .}} {{template "theme-server-status/content-footer" .}}
</div> </div>
<script> <script>
new Vue({ new Vue({
el: '#app', el: '#app',
@ -147,8 +145,8 @@
}, },
mixins: [mixinsVue], mixins: [mixinsVue],
created() { created() {
const initData = JSON.parse('{{.Servers}}').servers; const initData = JSON.parse('{{.Servers}}').servers;
this.nodes = this.handleNodes(initData); this.nodes = groupingData(this.handleNodes(initData),"Tag");
this.initTheme() this.initTheme()
}, },
mounted() { mounted() {
@ -233,17 +231,17 @@
return x !== "NaN undefined" ? x : '0B' return x !== "NaN undefined" ? x : '0B'
}, },
formatPercent(live, used, total) { formatPercent(live, used, total) {
const percent = live ? (this.toFixed2(used / total * 100) || 0) : 1 const percent = live ? (this.toFixed2(used / total * 100) || 0) : 0
return this.formatPercents(percent) return this.formatPercents(percent)
}, },
formatPercents(percent) { formatPercents(percent) {
if (percent <= 0) { if (percent <= 0) {
percent = 1; percent = 0;
} }
if (!this.cache[percent]) { if (!this.cache[percent]) {
this.cache[percent] = { this.cache[percent] = {
class: 'progress-bar progress-bar-success', class: 'progress-bar progress-bar-success',
style: `width: ${parseInt(percent)}%`, style: `width: ${parseInt(percent)+1}%`,
percent, percent,
} }
if (percent < 80) { if (percent < 80) {
@ -281,8 +279,8 @@
const lastActive = new Date(ns.LastActive).getTime() const lastActive = new Date(ns.LastActive).getTime()
data.servers[i].live = data.now - lastActive <= 10 * 1000; data.servers[i].live = data.now - lastActive <= 10 * 1000;
} }
} }
this.nodes = this.handleNodes(data.servers) this.nodes = groupingData(this.handleNodes(data.servers),"Tag");
} }
ws.onclose = () => { ws.onclose = () => {
setTimeout(function () { setTimeout(function () {
@ -296,13 +294,14 @@
handleNodes(servers) { handleNodes(servers) {
let nodes = [] let nodes = []
servers?.forEach(server => { servers?.forEach(server => {
let platform = server.Host.Platform let platform = server.Host.Platform;
if (this.isWindowsPlatform(server.Host.Platform)) { if (this.isWindowsPlatform(platform)) {
platform = "windows" platform = "windows"
}else if (platform === "immortalwrt") { }else if (platform === "immortalwrt") {
platform = "openwrt" platform = "openwrt"
} }
let node = { let node = {
ID: server.ID,
name: server.Name, name: server.Name,
os: platform, os: platform,
location: server.Host.CountryCode, location: server.Host.CountryCode,
@ -317,6 +316,7 @@
state: server.State, state: server.State,
host: server.Host, host: server.Host,
lastActive: server.LastActive, lastActive: server.LastActive,
Tag: server.Tag,
} }
nodes.push(node) nodes.push(node)
}) })
@ -328,6 +328,25 @@
} }
}) })
function groupingData(data, field) {
let map = new Map();
let dest = [];
data.forEach(item => {
if (!map.has(item[field])) {
dest.push({
[field]: item[field],
data: [item]
});
map.set(item[field], item);
} else {
dest.find(dItem => dItem[field] === item[field]).data.push(item);
}
});
return dest;
}
</script> </script>
{{template "theme-server-status/footer" .}} {{template "theme-server-status/footer" .}}
{{end}} {{end}}

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

@ -6,23 +6,23 @@
<table class="table table-striped table-condensed service-status"> <table class="table table-striped table-condensed service-status">
<thead> <thead>
<tr> <tr>
<th class="node-cell" style="min-width: 60px">🍀 {{tr "Status"}}</th> <th class="node-cell center" style="min-width:60px">{{tr "Status"}}</th>
<th class="node-cell" style="min-width: 60px">🚀 {{tr "Name"}}</th> <th class="node-cell center" style="min-width:50px">{{tr "Name"}}</th>
<th class="node-cell center">🗂 {{tr "Details"}}</th> <th class="node-cell center">{{tr "Details"}}</th>
<th class="node-cell center" style="min-width: 80px">⚡️{{tr "AverageLatency"}}</th> <th class="node-cell center" style="min-width:80px">{{tr "AverageLatency"}}</th>
<th class="node-cell center" style="min-width: 80px">⏱️ {{tr "30DaysOnline"}}</th> <th class="node-cell center" style="min-width:80px">{{tr "30DaysOnline"}}</th>
</tr> </tr>
</thead> </thead>
<tbody id="servers"> <tbody id="servers">
<template v-for="service in services"> <template v-for="service in services">
<tr> <tr>
<td style="text-align: left" class="node-cell"> <td class="node-cell center">
<div class="delay-today"> <div class="delay-today">
<i class="delay-today" :class="service.health.className"></i> <i class="delay-today" :class="service.health.className"></i>
@#service.health.text#@ @#service.health.text#@
</div> </div>
</td> </td>
<td class="node-cell">@#service.name#@</td> <td class="node-cell center">@#service.name#@</td>
<td class="node-cell center"> <td class="node-cell center">
<template v-for="(item,index) in service.dayDetail"> <template v-for="(item,index) in service.dayDetail">
<div class="service-day-status-icon" :class="item.className" <div class="service-day-status-icon" :class="item.className"
@ -44,7 +44,7 @@
</table> </table>
</div> </div>
<div class="container" style="margin-bottom: 20px;padding:unset;max-width: 95vw"> <div class="container" style="padding:unset;max-width: 95vw">
{{if .CycleTransferStats}} {{if .CycleTransferStats}}
<h4 style="text-align: center;">{{tr "CycleTransferStats"}}</h4> <h4 style="text-align: center;">{{tr "CycleTransferStats"}}</h4>
<div class="table-responsive content"> <div class="table-responsive content">
@ -241,4 +241,4 @@
}) })
</script> </script>
{{template "theme-server-status/footer" .}} {{template "theme-server-status/footer" .}}
{{end}} {{end}}