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

优化default和server status主题 (#363)

Browse Source
This commit is contained in:
nap0o 2024-06-14 06:02:55 -04:00 committed by GitHub
parent a9da084711
commit c3fa4cbbee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 636 additions and 557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
resource/static/theme-server-status/js/world.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
resource/template/theme-angel-kanade/menu.html vendored
View File

@ -24,6 +24,9 @@
<i :class="item.icon + ' icon'"></i>@#item.name#@ <i :class="item.icon + ' icon'"></i>@#item.name#@
<i class="check icon" v-if="preferredTemplate === item.key"></i> <i class="check icon" v-if="preferredTemplate === item.key"></i>
</a> </a>
<a v-if="defaultTemplate === 'custom'" @click="toggleTemplate('custom')" class="item">
<i class="expand icon"></i>Custom
</a>
</div> </div>
</div> </div>
{{ end }} {{ end }}

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

@ -7,19 +7,20 @@
<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> <title>{{.Title}}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"> <link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-logos@0.17/assets/font-logos.css"> <link rel="stylesheet" href="https://unpkg.com/semantic-ui@2.4.0/dist/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://unpkg.com/font-logos@1.2.0/assets/font-logos.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-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/flag-icons@7.2.3/css/flag-icons.min.css">
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css"> <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
<link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v20240226"> <link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v20240226">
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" /> <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script> <script src="https://unpkg.com/semantic-ui@2.4.0/dist/semantic.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.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="/static/semantic-ui-alerts.min.js"></script> <script src="/static/semantic-ui-alerts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<script src="/static/theme-default/js/mixin.js?v20240302"></script> <script src="/static/theme-default/js/mixin.js?v20240302"></script>
</head> </head>
<body> <body>
{{end}} {{end}}

137
resource/template/theme-default/home.html vendored
View File

@ -15,38 +15,50 @@
<div v-for="server in group.data" :id="server.ID" class="ui card"> <div v-for="server in group.data" :id="server.ID" class="ui card">
<div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px"> <div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px">
<div class="header"> <div class="header">
<i style="width: 22px;border-radius: 4px;" :class="'fi fi-' + server.Host.CountryCode"></i>&nbsp;<i v-if='server.Host.Platform == "darwin"' <i style="width: 22px;border-radius: 4px;" :class="'fi fi-' + server.Host.CountryCode"></i>
class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)' <i v-if='getFontLogoClass(server.Host.Platform) == "" && server.live' class="fl-tux"></i>
class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i> <i v-else-if='isWindowsPlatform(server.Host.Platform)' class="windows icon"></i>
<i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@ @#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@
<i @click="togglePopup($event, server.ID)" aria-expanded="false" class="nezha-secondary-font info circle icon"></i> <i @click="togglePopup($event, server.ID)" aria-expanded="false" class="nezha-secondary-font info circle icon"></i>
<div class="ui content popup" :class="{ 'visible': isActive(server.ID) }" style="margin-bottom: 0;"> <div class="ui content popup" :class="{ 'visible': isActive(server.ID) }" style="margin-bottom: 0;">
<i class="closePopup window close icon" @click="closePopup(server.ID)"></i> <i class="closePopup window close icon" @click="closePopup(server.ID)"></i>
{{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@ {{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@
[<span [<span v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]
v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br /> <br />
CPU: @#server.Host.CPU#@<br /> CPU: @#server.Host.CPU#@
<br />
{{tr "DiskUsed"}}: {{tr "DiskUsed"}}:
@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br /> @#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@
<br />
{{tr "MemUsed"}}: {{tr "MemUsed"}}:
@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br /> @#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@
<br />
{{tr "SwapUsed"}}: {{tr "SwapUsed"}}:
@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br /> <template v-if="server.Host.SwapTotal === 0">OFF</template>
{{tr "NetTransfer"}}: <i <template v-else>@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@</template>
class="arrow alternate circle down outline icon"></i>@#formatByteSize(server.State.NetInTransfer)#@<i <br />
class="arrow alternate circle up outline icon"></i>@#formatByteSize(server.State.NetOutTransfer)#@<br /> {{tr "NetTransfer"}}:
<i class="arrow alternate circle down outline icon"></i>@#formatByteSize(server.State.NetInTransfer)#@
<i class="arrow alternate circle up outline icon"></i>@#formatByteSize(server.State.NetOutTransfer)#@
<br />
{{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@# toFixed2(server.State.Load5) #@/@# {{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@# toFixed2(server.State.Load5) #@/@#
toFixed2(server.State.Load15) #@<br /> toFixed2(server.State.Load15) #@
{{tr "ProcessCount"}}: @# server.State.ProcessCount #@<br /> <br />
{{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @# server.State.UdpConnCount #@<br /> {{tr "ProcessCount"}}: @# server.State.ProcessCount #@
{{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@<br /> <br />
{{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@<br /> {{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @# server.State.UdpConnCount #@
{{tr "Version"}}: @#server.Host.Version#@ <br/> <br />
{{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@
<br />
{{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@
<br />
{{tr "Version"}}: @#server.Host.Version#@
<br />
{{tr "Temperature"}}: {{tr "Temperature"}}:
<span v-for="temp in server.State.Temperatures"> <span v-for="temp in server.State.Temperatures">
@#temp.Name#@: @#temp.Temperature#@°C &nbsp; @#temp.Name#@: @#temp.Temperature#@°C &nbsp;
</span> </span>
<div class="chartbox" :key="server.ID" :ref="`chart${server.ID}`" style="width: 100%; height: auto; margin-bottom: 2px;"></div> <div class="chartbox" :key="server.ID" :ref="`chart${server.ID}`" style="width: 100%; height: auto; margin-bottom: 2px;"></div>
</div> </div>
<div class="ui divider" style="margin-bottom: 5px"></div> <div class="ui divider" style="margin-bottom: 5px"></div>
@ -57,34 +69,32 @@
<div class="thirteen wide column"> <div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.CPU, 100).class"> <div :class="formatPercent(server.live,server.State.CPU, 100).class">
<div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style"> <div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small> <small>@#parseInt(server.State.CPU?server.State.CPU:0)#@%</small>
</div> </div>
</div> </div>
</div> </div>
<div class="three wide column">{{tr "MemUsed"}}</div> <div class="three wide column">{{tr "MemUsed"}}</div>
<div class="thirteen wide column"> <div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"> <div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
<div class="bar" <div class="bar" :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style"> <small>@#parseInt(server.Host.MemTotal?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
</div> </div>
</div> </div>
</div> </div>
<div class="three wide column">{{tr "SwapUsed"}}</div> <div class="three wide column">{{tr "SwapUsed"}}</div>
<div class="thirteen wide column"> <div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class"> <div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
<div class="bar" <div class="bar" :style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style"> <small v-if="server.Host.SwapTotal === 0">OFF</small>
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small> <small v-else>@#parseInt(server.State.SwapUsed/server.Host.SwapTotal*100)#@%</small>
</div> </div>
</div> </div>
</div> </div>
<div class="three wide column">{{tr "DiskUsed"}}</div> <div class="three wide column">{{tr "DiskUsed"}}</div>
<div class="thirteen wide column"> <div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"> <div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
<div class="bar" <div class="bar" :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style"> <small>@#parseInt(server.Host.DiskTotal?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
</div> </div>
</div> </div>
</div> </div>
@ -105,11 +115,14 @@
</div> </div>
<div class="three wide column">{{tr "Stat"}}</div> <div class="three wide column">{{tr "Stat"}}</div>
<div class="thirteen wide column"> <div class="thirteen wide column">
<i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i> @#getCoreAndGHz(server.Host.CPU)#@ <i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i>
@#getCoreAndGHz(server.Host.CPU)#@
&nbsp; &nbsp;
<i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i> @#getK2Gb(server.Host.MemTotal)#@ <i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i>
@#getK2Gb(server.Host.MemTotal)#@
&nbsp; &nbsp;
<i class="bi bi-hdd" style="font-size: 1.1rem; color: #e41e10"></i> @#getK2Gb(server.Host.DiskTotal)#@ <i class="bi bi-hdd" style="font-size: 1.1rem; color: #e41e10"></i>
@#getK2Gb(server.Host.DiskTotal)#@
</div> </div>
<div class="three wide column">{{tr "Load"}}</div> <div class="three wide column">{{tr "Load"}}</div>
<div class="thirteen wide column"> <div class="thirteen wide column">
@ -143,8 +156,8 @@
delimiters: ['@#', '#@'], delimiters: ['@#', '#@'],
data: { data: {
page: 'index', page: 'index',
defaultTemplate: {{.Conf.Site.Theme}}, defaultTemplate: {{.Conf.Site.Theme }},
templates: {{.Themes}}, templates: {{.Themes }},
servers: [], servers: [],
groups: [], groups: [],
cache: [], cache: [],
@ -181,7 +194,7 @@
this.renderCharts(id); this.renderCharts(id);
}); });
} else { } else {
console.log('this agent (id:'+ id + ') has no monitor.'); console.log('this agent (id:' + id + ') has no monitor.');
} }
}) })
.catch(error => { .catch(error => {
@ -190,7 +203,7 @@
}, },
renderCharts(id) { renderCharts(id) {
if (!this.chartDataList[id - 1]) return; if (!this.chartDataList[id - 1]) return;
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300; const MaxTCPPingValue = {{.Conf.MaxTCPPingValue }} ? {{.Conf.MaxTCPPingValue }} : 300;
const isMobile = this.checkIsMobile(); const isMobile = this.checkIsMobile();
const fontSize = isMobile ? 10 : 9; const fontSize = isMobile ? 10 : 9;
const itemGap = isMobile ? 6 : 6; const itemGap = isMobile ? 6 : 6;
@ -213,10 +226,10 @@
const seriesData = chartData.map(item => { const seriesData = chartData.map(item => {
let loss = 0; let loss = 0;
const data = item.avg_delay.map((avgDelay, index) => { const data = item.avg_delay.map((avgDelay, index) => {
if(avgDelay > 0 && avgDelay < MaxTCPPingValue){ if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
loss += avgDelay > 0.9 * MaxTCPPingValue ? 1 : 0; loss += avgDelay > 0.9 * MaxTCPPingValue ? 1 : 0;
return [item.created_at[index], avgDelay]; return [item.created_at[index], avgDelay];
}else{ } else {
loss += 1; loss += 1;
} }
}); });
@ -260,7 +273,7 @@
itemGap: itemGap, itemGap: itemGap,
itemWidth: itemWidth, itemWidth: itemWidth,
itemHeight: itemHeight, itemHeight: itemHeight,
padding: [5,0,5,0] padding: [5, 0, 5, 0]
}, },
xAxis: { xAxis: {
type: 'time', type: 'time',
@ -356,7 +369,10 @@
> -1) { > -1) {
return str; return str;
} }
if (['openwrt','linux'].indexOf(str) > -1) { if (str == 'darwin') {
return 'apple';
}
if (['openwrt', 'linux'].indexOf(str) > -1) {
return 'tux'; return 'tux';
} }
if (str == 'amazon') { if (str == 'amazon') {
@ -365,6 +381,9 @@
if (str == 'arch') { if (str == 'arch') {
return 'archlinux'; return 'archlinux';
} }
if (str.toLowerCase().includes('opensuse')) {
return 'opensuse';
}
return ''; return '';
}, },
group() { group() {
@ -388,6 +407,9 @@
if (percent < 0) { if (percent < 0) {
this.cache[percent].style['background-color'] = 'slategray' this.cache[percent].style['background-color'] = 'slategray'
this.cache[percent].class.offline = true this.cache[percent].class.offline = true
if (!live) {
this.cache[percent].percent = 0
}
} else if (percent < 51) { } else if (percent < 51) {
this.cache[percent].style['background-color'] = '#0a94f2' this.cache[percent].style['background-color'] = '#0a94f2'
this.cache[percent].class.fine = true this.cache[percent].class.fine = true
@ -422,38 +444,38 @@
if (!bytes) { if (!bytes) {
return '0B' return '0B'
} }
const i = Math.floor(Math.log(bytes) / Math.log(1024)), const i = Math.floor(Math.log(bytes) / Math.log(1024));
sizes = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"]; const sizes = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i]; return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
}, },
getCoreAndGHz(str){ getCoreAndGHz(str){
if((str || []).hasOwnProperty(0) === false){ if ((str || []).hasOwnProperty(0) === false) {
return ''; return '';
} }
str = str[0]; str = str[0];
let GHz = str.match(/(\d|\.)+GHz/g); let GHz = str.match(/(\d|\.)+GHz/g);
let Core = str.match(/(\d|\.)+ Physical/g); let Core = str.match(/(\d|\.)+ Physical/g);
GHz = GHz!==null?GHz.hasOwnProperty(0)===false?'':GHz[0]:'' GHz = GHz !== null ? GHz.hasOwnProperty(0) === false ? '' : GHz[0] : ''
Core = Core!==null?Core.hasOwnProperty(0)===false?'?':Core[0]:'?' Core = Core !== null ? Core.hasOwnProperty(0) === false ? '?' : Core[0] : '?'
if(Core === '?'){ if (Core === '?') {
let Core = str.match(/(\d|\.)+ Virtual/g); let Core = str.match(/(\d|\.)+ Virtual/g);
Core = Core!==null?Core.hasOwnProperty(0)===false?'?':Core[0]:'?' Core = Core !== null ? Core.hasOwnProperty(0) === false ? '?' : Core[0] : '?'
return Core.replace('Virtual','Core') return Core.replace('Virtual', 'Core')
} }
return Core.replace('Physical','Core'); return Core.replace('Physical', 'Core');
}, },
getK2Gb(bs){ getK2Gb(bs){
bs = bs / 1024 /1024 /1024; bs = bs / 1024 / 1024 / 1024;
if(bs>=1){ if (bs >= 1) {
return Math.ceil(bs.toFixed(2)) + 'GB'; return Math.ceil(bs.toFixed(2)) + 'GB';
}else{ } else {
bs = bs * 1024; bs = bs * 1024;
return Math.ceil(bs.toFixed(2)) + 'MB'; return Math.ceil(bs.toFixed(2)) + 'MB';
} }
}, },
listTipsMouseenter(obj,strs,tipsNum=1){ listTipsMouseenter(obj, strs, tipsNum = 1){
this.layerIndex = layer.tips(strs, '#'+obj,{tips: [tipsNum, 'rgb(0 0 0 / 85%)'],time:0}); this.layerIndex = layer.tips(strs, '#' + obj, { tips: [tipsNum, 'rgb(0 0 0 / 85%)'], time: 0 });
$('#'+obj).attr('layerIndex',this.layerIndex) $('#' + obj).attr('layerIndex', this.layerIndex)
}, },
listTipsMouseleave(obj){ listTipsMouseleave(obj){
layer.close(this.layerIndex) layer.close(this.layerIndex)
@ -502,8 +524,9 @@
statusCards.servers = data.servers statusCards.servers = data.servers
for (let i = 0; i < statusCards.servers.length; i++) { for (let i = 0; i < statusCards.servers.length; i++) {
const ns = statusCards.servers[i]; const ns = statusCards.servers[i];
if (!ns.Host) ns.live = false if (!ns.Host) {
else { ns.live = false
} else {
const lastActive = new Date(ns.LastActive).getTime() const lastActive = new Date(ns.LastActive).getTime()
if (data.now - lastActive > 10 * 1000) { if (data.now - lastActive > 10 * 1000) {
ns.live = false ns.live = false

3
resource/template/theme-default/menu.html vendored
View File

@ -27,6 +27,9 @@
<i :class="item.icon + ' icon'"></i>@#item.name#@ <i :class="item.icon + ' icon'"></i>@#item.name#@
<i class="check icon" v-if="preferredTemplate === item.key"></i> <i class="check icon" v-if="preferredTemplate === item.key"></i>
</a> </a>
<a v-if="defaultTemplate === 'custom'" @click="toggleTemplate('custom')" class="item">
<i class="expand icon"></i>Custom
</a>
</div> </div>
</div> </div>
{{ end }} {{ end }}

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

@ -39,6 +39,11 @@
<i class="check icon" v-if="preferredTemplate === item.key"></i> <i class="check icon" v-if="preferredTemplate === item.key"></i>
</a> </a>
</li> </li>
<li v-if="defaultTemplate === 'custom'">
<a @click="toggleTemplate('custom')" class="item">
<i class="expand icon" style="font-size:1em"></i>Custom
</a>
</li>
</ul> </ul>
</li> </li>
{{ end }} {{ end }}

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

@ -6,16 +6,22 @@
<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 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="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"> <link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
<link rel="stylesheet" href="/static/theme-server-status/css/bootstrap-theme.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@3.4.1/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240407"> <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240407">
<link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240407"> <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240407">
<link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240407"> <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240407">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/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://cdn.jsdelivr.net/npm/font-logos@0.17/assets/font-logos.css"> <link rel="stylesheet" href="https://unpkg.com/font-logos@1.2.0/assets/font-logos.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"> <link rel="stylesheet" href="https://unpkg.com/flag-icons@7.2.3/css/flag-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"> <link rel="stylesheet" href="https://unpkg.com/semantic-ui@2.4.0/dist/semantic.min.css">
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" /> <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.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/echarts@5.5.0/dist/echarts.min.js"></script>
<script src="/static/theme-server-status/js/world.js?v20240613"></script>
<script src="/static/theme-server-status/js/mixin.js?v20240302"></script>
<!-- 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]>
<script src="/static/theme-server-status/js/html5shiv.js"></script> <script src="/static/theme-server-status/js/html5shiv.js"></script>
@ -24,12 +30,13 @@
{{if ts .CustomCode}} {{if ts .CustomCode}}
{{.CustomCode|safe}} {{.CustomCode|safe}}
{{end}} {{end}}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script src="/static/theme-server-status/js/mixin.js?v20240302"></script>
</head> </head>
<body> <body>
{{end}} {{end}}

17
resource/template/theme-server-status/home-group-false.html vendored
View File

@ -27,10 +27,10 @@
</td> </td>
<td class="node-cell name center">@#node.name#@</td> <td class="node-cell name center">@#node.name#@</td>
<td class="node-cell os center"> <td class="node-cell os center">
<i v-if='node.os == "darwin"' class="apple icon"></i> <i v-if='getFontLogoClass(node.host.Platform) == "" && node.online' class="fl-tux"></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>
<span class="node-cell-os-text">@#node.os#@</span> <span class="node-cell-os-text">@#getPlatformName(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="'fi fi-' + node.location"></i> <i :class="'fi fi-' + node.location"></i>
@ -71,20 +71,23 @@
</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(",")#@ (@#node.cpu.percent#@%)
</span> </span>
<span class="node-cell-expand"> <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)#@ (@#node.hdd.percent#@%)
</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 v-if="node.host.SwapTotal > 0" class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "SwapUsed"}}:</span> <span class="node-cell-expand-label">{{tr "SwapUsed"}}:</span>
@#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@ @#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@
<span v-if="node.host.SwapTotal">(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span> <span>(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span>
</span>
<span v-else class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "SwapUsed"}}: OFF</span>
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span> <span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span>

19
resource/template/theme-server-status/home-group-true.html vendored
View File

@ -30,10 +30,10 @@
</td> </td>
<td class="node-cell name center">@#node.name#@</td> <td class="node-cell name center">@#node.name#@</td>
<td class="node-cell os center"> <td class="node-cell os center">
<i v-if='node.os == "darwin"' class="apple icon"></i> <i v-if='getFontLogoClass(node.host.Platform) == "" && node.online' class="fl-tux"></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>
<span class="node-cell-os-text">@#node.os#@</span> <span class="node-cell-os-text">@#getPlatformName(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="'fi fi-' + node.location"></i> <i :class="'fi fi-' + node.location"></i>
@ -74,20 +74,19 @@
</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(",")#@ (@#node.cpu.percent#@%)
</span> </span>
<span class="node-cell-expand"> <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)#@ (@#node.hdd.percent#@%)
</span> </span>
<span class="node-cell-expand"> <span v-if="node.host.SwapTotal > 0" 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-label">{{tr "SwapUsed"}}:</span> <span class="node-cell-expand-label">{{tr "SwapUsed"}}:</span>
@#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@ @#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@
<span v-if="node.host.SwapTotal">(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span> <span>(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span>
</span>
<span v-else class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "SwapUsed"}}: OFF</span>
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span> <span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span>

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

@ -195,6 +195,12 @@
isWindowsPlatform(str) { isWindowsPlatform(str) {
return str.includes('Windows') return str.includes('Windows')
}, },
getPlatformName(str){
if (str.toLowerCase().includes('opensuse')) {
return 'openSUSE';
}
return str;
},
getFontLogoClass(str) { getFontLogoClass(str) {
if (["almalinux", if (["almalinux",
"alpine", "alpine",
@ -241,6 +247,9 @@
> -1) { > -1) {
return str; return str;
} }
if (str == 'darwin') {
return 'apple';
}
if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) { if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
return 'tux'; return 'tux';
} }
@ -250,6 +259,9 @@
if (str == 'arch') { if (str == 'arch') {
return 'archlinux'; return 'archlinux';
} }
if (str.toLowerCase().includes('opensuse')) {
return 'opensuse';
}
return ''; return '';
}, },
secondToDate(s) { secondToDate(s) {
@ -276,6 +288,9 @@
}, },
formatPercents(live,percent) { formatPercents(live,percent) {
//if(!live) { percent = 0; } //if(!live) { percent = 0; }
if (isNaN(percent)) {
percent = 0;
}
if (percent <= 0) { if (percent <= 0) {
percent = 0; percent = 0;
} }