mirror of
https://github.com/nezhahq/nezha.git
synced 2025-01-22 20:58:14 -05:00
improve server-status theme (#310)
* 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
GitHub
parent
30652c3d79
commit
99111a3115
37
resource/static/theme-server-status/css/dark.css
vendored
37
resource/static/theme-server-status/css/dark.css
vendored
File diff suppressed because one or more lines are too long
@ -27,6 +27,10 @@ body[theme="light"] .table {
|
||||
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 > th {
|
||||
background-color: #F9F9F9;
|
||||
@ -37,10 +41,25 @@ body[theme="light"] .table-striped tbody > tr.odd > th {
|
||||
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 {
|
||||
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 {
|
||||
background: #E6E6E6;
|
||||
}
|
||||
@ -75,4 +94,10 @@ body[theme="light"] .service-status .warning {
|
||||
|
||||
body[theme="light"] .service-day-status-icon {
|
||||
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
132
resource/static/theme-server-status/css/main.css
vendored
@ -1,5 +1,5 @@
|
||||
body {
|
||||
padding-top: 70px !important;
|
||||
padding-top:70px !important;
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
|
||||
@ -8,14 +8,27 @@ body {
|
||||
min-height: 40px !important;
|
||||
}
|
||||
|
||||
.navbar-inner{
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
.pl-md-unset {
|
||||
max-width: 95vw;
|
||||
}
|
||||
|
||||
.navbar-collapse:not([aria-expanded]) .navbar-nav .dropdown-toggle {
|
||||
margin-top: 18px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
margin-right:0
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding:12px 0 0 0;
|
||||
}
|
||||
|
||||
.node-cell-expand {
|
||||
@ -32,18 +45,17 @@ body {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.navbar-inverse, .nav.navbar-nav {
|
||||
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 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 导航部分 结束 */
|
||||
|
||||
/* 正文部分 开始 */
|
||||
@ -63,6 +75,15 @@ body {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table>thead>tr>th{
|
||||
border:none;
|
||||
}
|
||||
|
||||
.table .node-group-tag {
|
||||
font-size: 18px;
|
||||
padding-bottom:15px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -78,6 +99,10 @@ body {
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
.accordian-body{
|
||||
margin: 10px 0px 10px 18px;
|
||||
}
|
||||
|
||||
.node-cell.center {
|
||||
text-align: center !important;
|
||||
}
|
||||
@ -147,104 +172,45 @@ body {
|
||||
}
|
||||
|
||||
/* 服务页 正文结束 */
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.node-cell.os,
|
||||
.node-cell.location,
|
||||
.node-cell.uptime {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
.accordian-body{
|
||||
margin: 5px 0px 5px 10px;
|
||||
}
|
||||
.table .node-group-tag {
|
||||
font-size:16px;
|
||||
padding-bottom:6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
body {
|
||||
font-size: 10px !important;
|
||||
padding-top:60px !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.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.traffic {
|
||||
.node-cell.traffic{
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.service-day-status-icon {
|
||||
.node-cell.location{
|
||||
display: table-cell;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
.node-cell-os-text,.node-cell-location-text{
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.service-day-status-icon {
|
||||
.accordian-body{
|
||||
margin: 5px 0px 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
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;
|
||||
.table .node-group-tag {
|
||||
font-size:12px;
|
||||
padding-bottom:6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
{{define "theme-server-status/content-footer"}}
|
||||
<footer class="container" style="padding-bottom: 2rem;">
|
||||
<p style="text-align: center; font-size: 10px;">
|
||||
{{ .Conf.Site.Brand }} | Theme <a href="https://github.com/cppla/ServerStatus">ServerStatus</a> | Powered by <a
|
||||
href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}
|
||||
{{ .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}}
|
||||
</p>
|
||||
</footer>
|
||||
{{end}}
|
||||
@ -44,4 +44,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
{{define "theme-server-status/header"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{.Conf.Language}}">
|
||||
|
||||
<head>
|
||||
<title>{{ .Title }}</title>
|
||||
<meta charset="utf-8">
|
||||
@ -9,11 +8,13 @@
|
||||
<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-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/light.css">
|
||||
<link href="https://cdn.staticfile.org/font-logos/0.17/font-logos.min.css" type="text/css" rel="stylesheet" />
|
||||
<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.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.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" />
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
@ -23,12 +24,10 @@
|
||||
{{if ts .CustomCode}}
|
||||
{{.CustomCode|safe}}
|
||||
{{end}}
|
||||
|
||||
<script src="/static/theme-server-status/js/jquery.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="/static/theme-server-status/js/mixin.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{end}}
|
||||
{{end}}
|
||||
155
resource/template/theme-server-status/home.html
vendored
155
resource/template/theme-server-status/home.html
vendored
@ -2,26 +2,30 @@
|
||||
{{template "theme-server-status/header" .}}
|
||||
<div id="app">
|
||||
{{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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="node-cell status center">🍀 {{tr "Status"}}</th>
|
||||
<th class="node-cell name">🚀 {{tr "Name"}}</th>
|
||||
<th class="node-cell os">🗂 {{tr "Platform"}}</th>
|
||||
<th class="node-cell location center">🌍 {{tr "Location"}}</th>
|
||||
<th class="node-cell uptime center">⏱️ {{tr "Uptime"}}</th>
|
||||
<th class="node-cell load center">📋{{tr "Load"}}</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>
|
||||
<th class="node-group-tag" colspan="16" style="border:none;">@#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@</th>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="node-cell status center">{{tr "Status"}}</th>
|
||||
<th class="node-cell name center">{{tr "Name"}}</th>
|
||||
<th class="node-cell os center">{{tr "Platform"}}</th>
|
||||
<th class="node-cell location center">{{tr "Location"}}</th>
|
||||
<th class="node-cell uptime center">{{tr "Uptime"}}</th>
|
||||
<th class="node-cell load center">{{tr "Load"}}</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>
|
||||
</thead>
|
||||
<tbody id="servers">
|
||||
<template v-for="(node,index) in nodes">
|
||||
<tr :id="'r'+index" data-toggle="collapse" :data-target="'#rt'+index" class="accordion-toggle"
|
||||
<template v-for="(node,index) in group.data">
|
||||
<tr :id="'r'+node.ID" data-toggle="collapse" :data-target="'#rt'+node.ID" class="accordion-toggle"
|
||||
:class="index % 2 === 0 ? 'odd': 'even'">
|
||||
<td class="node-cell status center">
|
||||
<div class="status-container">
|
||||
@ -29,36 +33,36 @@
|
||||
<div v-else class="status-icon offline"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="node-cell name">@#node.name#@</td>
|
||||
<td class="node-cell os">
|
||||
<td class="node-cell name center">@#node.name#@</td>
|
||||
<td class="node-cell os center">
|
||||
<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 :class="'fl-' + getFontLogoClass(node.host.Platform)"></i>
|
||||
@#node.os#@
|
||||
<span class="node-cell-os-text">@#node.os#@</span>
|
||||
</td>
|
||||
<td style="text-align: center;" class="node-cell location">
|
||||
<i :class="node.location + ' flag'"></i>
|
||||
<span class="text-uppercase">@#node.location#@</span>
|
||||
<i :class="'fi fi-' + node.location"></i>
|
||||
<span class="node-cell-location-text text-uppercase"> @#node.location#@</span>
|
||||
</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 network">@#node.network#@</td>
|
||||
<td style="text-align: center;" class="node-cell traffic">@#node.traffic#@</td>
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
<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">
|
||||
<small>@#node.memory.percent#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<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>
|
||||
</div>
|
||||
@ -66,78 +70,72 @@
|
||||
</tr>
|
||||
<tr class="expandRow" :class="index % 2 === 0 ? 'odd': 'even'">
|
||||
<td colspan="16">
|
||||
<div class="accordian-body collapse" :id="'rt'+index">
|
||||
<div style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
|
||||
<div style="display: flex;align-items: flex-start;justify-content: center;flex-direction: column; width: 450px;max-width: 90vw">
|
||||
<div class="accordian-body collapse" :id="'rt'+node.ID">
|
||||
<div style="display: flex;left-items: center;justify-content: center;flex-direction: column; max-width: 89vw">
|
||||
<span class="node-cell-expand">
|
||||
<span class="node-cell-expand-label">{{tr "Platform"}}:</span>
|
||||
@#node.host.Platform#@
|
||||
</span>
|
||||
<span class="node-cell-expand">
|
||||
<span class="node-cell-expand-label">{{tr "Location"}}:</span>
|
||||
<i :class="node.location + ' flag'"></i>
|
||||
@#node.host.Platform#@-@#node.host.PlatformVersion#@
|
||||
[<span v-if="node.host.Virtualization">@#node.host.Virtualization#@:</span>@#node.host.Arch#@]
|
||||
</span>
|
||||
<span class="node-cell-expand" v-if="node.host.CPU">
|
||||
<span class="node-cell-expand-label">CPU:</span>
|
||||
@#node.host.CPU.join(",")#@
|
||||
</span>
|
||||
<span class="node-cell-expand load">
|
||||
<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">
|
||||
<span class="node-cell-expand-label">{{tr "DiskUsed"}}:</span>
|
||||
@#formatByteSize(node.state.DiskUsed)#@ / @#formatByteSize(node.host.DiskTotal)#@
|
||||
</span>
|
||||
<span class="node-cell-expand">
|
||||
<span class="node-cell-expand">
|
||||
<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)#@%)
|
||||
</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>
|
||||
<i class="arrow alternate circle down outline icon"
|
||||
style="margin: 0"></i>@#formatByteSize(node.state.NetInTransfer)#@
|
||||
<i class="arrow alternate circle up outline icon"
|
||||
style="margin: 0"></i>@#formatByteSize(node.state.NetOutTransfer)#@
|
||||
</span>
|
||||
<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 class="node-cell-expand load">
|
||||
<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 "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">
|
||||
<span class="node-cell-expand-label">{{tr "ProcessCount"}}:</span>
|
||||
@#node.state.ProcessCount#@
|
||||
</span>
|
||||
<span class="node-cell-expand">
|
||||
<span class="node-cell-expand">
|
||||
<span class="node-cell-expand-label">{{tr "ConnCount"}}:</span>
|
||||
TCP @#node.state.TcpConnCount#@ / UDP @#node.state.UdpConnCount#@
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<br/>
|
||||
</div>
|
||||
{{template "theme-server-status/content-footer" .}}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
@ -147,8 +145,8 @@
|
||||
},
|
||||
mixins: [mixinsVue],
|
||||
created() {
|
||||
const initData = JSON.parse('{{.Servers}}').servers;
|
||||
this.nodes = this.handleNodes(initData);
|
||||
const initData = JSON.parse('{{.Servers}}').servers;
|
||||
this.nodes = groupingData(this.handleNodes(initData),"Tag");
|
||||
this.initTheme()
|
||||
},
|
||||
mounted() {
|
||||
@ -233,17 +231,17 @@
|
||||
return x !== "NaN undefined" ? x : '0B'
|
||||
},
|
||||
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)
|
||||
},
|
||||
formatPercents(percent) {
|
||||
if (percent <= 0) {
|
||||
percent = 1;
|
||||
percent = 0;
|
||||
}
|
||||
if (!this.cache[percent]) {
|
||||
this.cache[percent] = {
|
||||
class: 'progress-bar progress-bar-success',
|
||||
style: `width: ${parseInt(percent)}%`,
|
||||
style: `width: ${parseInt(percent)+1}%`,
|
||||
percent,
|
||||
}
|
||||
if (percent < 80) {
|
||||
@ -281,8 +279,8 @@
|
||||
const lastActive = new Date(ns.LastActive).getTime()
|
||||
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 = () => {
|
||||
setTimeout(function () {
|
||||
@ -296,13 +294,14 @@
|
||||
handleNodes(servers) {
|
||||
let nodes = []
|
||||
servers?.forEach(server => {
|
||||
let platform = server.Host.Platform
|
||||
if (this.isWindowsPlatform(server.Host.Platform)) {
|
||||
let platform = server.Host.Platform;
|
||||
if (this.isWindowsPlatform(platform)) {
|
||||
platform = "windows"
|
||||
}else if (platform === "immortalwrt") {
|
||||
platform = "openwrt"
|
||||
}
|
||||
let node = {
|
||||
ID: server.ID,
|
||||
name: server.Name,
|
||||
os: platform,
|
||||
location: server.Host.CountryCode,
|
||||
@ -317,6 +316,7 @@
|
||||
state: server.State,
|
||||
host: server.Host,
|
||||
lastActive: server.LastActive,
|
||||
Tag: server.Tag,
|
||||
}
|
||||
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>
|
||||
{{template "theme-server-status/footer" .}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@ -6,23 +6,23 @@
|
||||
<table class="table table-striped table-condensed service-status">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="node-cell" style="min-width: 60px">🍀 {{tr "Status"}}</th>
|
||||
<th class="node-cell" style="min-width: 60px">🚀 {{tr "Name"}}</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 "30DaysOnline"}}</th>
|
||||
<th class="node-cell center" style="min-width:60px">{{tr "Status"}}</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" style="min-width:80px">{{tr "AverageLatency"}}</th>
|
||||
<th class="node-cell center" style="min-width:80px">{{tr "30DaysOnline"}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="servers">
|
||||
<template v-for="service in services">
|
||||
<tr>
|
||||
<td style="text-align: left" class="node-cell">
|
||||
<td class="node-cell center">
|
||||
<div class="delay-today">
|
||||
<i class="delay-today" :class="service.health.className"></i>
|
||||
@#service.health.text#@
|
||||
</div>
|
||||
</td>
|
||||
<td class="node-cell">@#service.name#@</td>
|
||||
<td class="node-cell center">@#service.name#@</td>
|
||||
<td class="node-cell center">
|
||||
<template v-for="(item,index) in service.dayDetail">
|
||||
<div class="service-day-status-icon" :class="item.className"
|
||||
@ -44,7 +44,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="container" style="margin-bottom: 20px;padding:unset;max-width: 95vw">
|
||||
<div class="container" style="padding:unset;max-width: 95vw">
|
||||
{{if .CycleTransferStats}}
|
||||
<h4 style="text-align: center;">{{tr "CycleTransferStats"}}</h4>
|
||||
<div class="table-responsive content">
|
||||
@ -241,4 +241,4 @@
|
||||
})
|
||||
</script>
|
||||
{{template "theme-server-status/footer" .}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user