mirror of
https://github.com/Buriburizaem0n/nezha_domains.git
synced 2026-02-04 12:40:07 +00:00
🐛 修复 IPv6 only 机器取 IP 问题
This commit is contained in:
naiba
522
resource/template/theme-default/home.html
vendored
522
resource/template/theme-default/home.html
vendored
@@ -1,257 +1,285 @@
|
||||
{{define "theme-default/home"}}
|
||||
{{template "common/header" .}}
|
||||
{{if ts .CustomCode}}
|
||||
{{.CustomCode|safe}}
|
||||
{{end}}
|
||||
{{template "common/menu" .}}
|
||||
{{define "theme-default/home"}} {{template "common/header" .}} {{if ts
|
||||
.CustomCode}} {{.CustomCode|safe}} {{end}} {{template "common/menu" .}}
|
||||
<div class="nb-container">
|
||||
<div class="ui container">
|
||||
<div id="app">
|
||||
|
||||
<div class="ui styled fluid accordion" v-for="group in groups">
|
||||
<div class="active title"><i class="dropdown icon"></i>@#(group.Tag!==''?group.Tag:'默认')#@</div>
|
||||
<div class="active content">
|
||||
<div class="ui four stackable status cards">
|
||||
<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="header"><i :class="server.Host.CountryCode + ' flag'"></i><i
|
||||
v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
|
||||
v-if='server.Host.Platform == "linux"' class="linux icon"></i><i
|
||||
v-if='server.Host.Platform == "windows"' class="windows icon"></i><i
|
||||
v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name
|
||||
+
|
||||
(server.live?'':' [已离线]')#@
|
||||
<i class="yellow info circle icon"></i>
|
||||
<div class='ui content popup' style="margin-bottom: 0">
|
||||
系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
|
||||
v-if='server.Host.Virtualization'>@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br>
|
||||
CPU：@#server.Host.CPU#@<br>
|
||||
硬盘：@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br>
|
||||
内存：@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br>
|
||||
交换：@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br>
|
||||
流量：<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>
|
||||
启动：@# formatTimestamp(server.Host.BootTime) #@<br>
|
||||
活动：@# new Date(server.LastActive).toLocaleString() #@<br>
|
||||
版本：@#server.Host.Version#@<br>
|
||||
</div>
|
||||
<div class="ui divider" style="margin-bottom: 5px"></div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="ui grid">
|
||||
<div class="three wide column">CPU</div>
|
||||
<div class="thirteen wide column">
|
||||
<div :class="formatPercent(server.live,server.State.CPU, 100).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.CPU, 100).style">
|
||||
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">内存</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
|
||||
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">交换</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
|
||||
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">网络</div>
|
||||
<div class="thirteen wide column">
|
||||
<i class="arrow alternate circle down outline icon"></i>
|
||||
@#formatByteSize(server.State.NetInSpeed)#@/s
|
||||
<i class="arrow alternate circle up outline icon"></i>
|
||||
@#formatByteSize(server.State.NetOutSpeed)#@/s
|
||||
</div>
|
||||
<div class="three wide column">硬盘</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
|
||||
<div class="bar"
|
||||
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
|
||||
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">在线</div>
|
||||
<div class="thirteen wide column">
|
||||
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" v-else>
|
||||
<p>@#server.Name#@</p>
|
||||
<p>节点已离线</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui container">
|
||||
<div id="app">
|
||||
<div class="ui styled fluid accordion" v-for="group in groups">
|
||||
<div class="active title">
|
||||
<i class="dropdown icon"></i>@#(group.Tag!==''?group.Tag:'默认')#@
|
||||
</div>
|
||||
<div class="active content">
|
||||
<div class="ui four stackable status cards">
|
||||
<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="header">
|
||||
<i :class="server.Host.CountryCode + ' flag'"></i
|
||||
><i
|
||||
v-if='server.Host.Platform == "darwin"'
|
||||
class="apple icon"
|
||||
></i
|
||||
><i
|
||||
v-if='server.Host.Platform == "linux"'
|
||||
class="linux icon"
|
||||
></i
|
||||
><i
|
||||
v-if='server.Host.Platform == "windows"'
|
||||
class="windows icon"
|
||||
></i
|
||||
><i
|
||||
v-if='server.Host.Platform == "freebsd"'
|
||||
class="freebsd icon"
|
||||
></i
|
||||
>@#server.Name + (server.live?'':' [已离线]')#@
|
||||
<i class="yellow info circle icon"></i>
|
||||
<div class="ui content popup" style="margin-bottom: 0">
|
||||
系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@
|
||||
[<span v-if="server.Host.Virtualization"
|
||||
>@#server.Host.Virtualization#@:</span
|
||||
>@#server.Host.Arch#@]<br />
|
||||
CPU：@#server.Host.CPU#@<br />
|
||||
硬盘：@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br />
|
||||
内存：@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br />
|
||||
交换：@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br />
|
||||
流量：<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 />
|
||||
启动：@# formatTimestamp(server.Host.BootTime) #@<br />
|
||||
活动：@# new Date(server.LastActive).toLocaleString() #@<br />
|
||||
版本：@#server.Host.Version#@<br />
|
||||
</div>
|
||||
<div class="ui divider" style="margin-bottom: 5px"></div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="ui grid">
|
||||
<div class="three wide column">CPU</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.CPU, 100).class"
|
||||
>
|
||||
<div
|
||||
class="bar"
|
||||
:style="formatPercent(server.live,server.State.CPU, 100).style"
|
||||
>
|
||||
<small
|
||||
>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">内存</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"
|
||||
>
|
||||
<div
|
||||
class="bar"
|
||||
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style"
|
||||
>
|
||||
<small
|
||||
>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">交换</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class"
|
||||
>
|
||||
<div
|
||||
class="bar"
|
||||
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style"
|
||||
>
|
||||
<small
|
||||
>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">网络</div>
|
||||
<div class="thirteen wide column">
|
||||
<i class="arrow alternate circle down outline icon"></i>
|
||||
@#formatByteSize(server.State.NetInSpeed)#@/s
|
||||
<i class="arrow alternate circle up outline icon"></i>
|
||||
@#formatByteSize(server.State.NetOutSpeed)#@/s
|
||||
</div>
|
||||
<div class="three wide column">硬盘</div>
|
||||
<div class="thirteen wide column">
|
||||
<div
|
||||
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"
|
||||
>
|
||||
<div
|
||||
class="bar"
|
||||
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style"
|
||||
>
|
||||
<small
|
||||
>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">在线</div>
|
||||
<div class="thirteen wide column">
|
||||
<i class="clock icon"></i
|
||||
>@#secondToDate(server.State.Uptime)#@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" v-else>
|
||||
<p>@#server.Name#@</p>
|
||||
<p>节点已离线</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "common/footer" .}}
|
||||
<script>
|
||||
const initData = {{.Servers}};
|
||||
var statusCards = new Vue({
|
||||
el: '#app',
|
||||
delimiters: ['@#', '#@'],
|
||||
data: {
|
||||
data: initData,
|
||||
groups: [],
|
||||
cache: [],
|
||||
},
|
||||
created() {
|
||||
this.group()
|
||||
},
|
||||
mounted() {
|
||||
$('.yellow.info.icon').popup({
|
||||
popup: '.ui.content.popup',
|
||||
exclusive: true,
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
group() {
|
||||
this.groups = groupingData(this.data, "Tag")
|
||||
console.log(this.groups)
|
||||
},
|
||||
formatPercent(live, used, total) {
|
||||
const percent = live ? (parseInt(used / total * 100) || 0) : -1
|
||||
if (!this.cache[percent]) {
|
||||
this.cache[percent] = {
|
||||
class: {
|
||||
ui: true,
|
||||
progress: true,
|
||||
},
|
||||
style: {
|
||||
'transition-duration': '300ms',
|
||||
'min-width': 'unset',
|
||||
width: percent + '% !important',
|
||||
},
|
||||
percent,
|
||||
}
|
||||
if (percent < 0) {
|
||||
this.cache[percent].style['background-color'] = 'slategray'
|
||||
this.cache[percent].class.offline = true
|
||||
} else if (percent < 51) {
|
||||
this.cache[percent].style['background-color'] = 'rgb(0, 235, 139)'
|
||||
this.cache[percent].class.fine = true
|
||||
} else if (percent < 81) {
|
||||
this.cache[percent].style['background-color'] = 'orange'
|
||||
this.cache[percent].class.warning = true
|
||||
} else {
|
||||
this.cache[percent].style['background-color'] = 'crimson'
|
||||
this.cache[percent].class.error = true
|
||||
}
|
||||
}
|
||||
return this.cache[percent]
|
||||
},
|
||||
secondToDate(s) {
|
||||
var d = Math.floor(s / 3600 / 24);
|
||||
if (d > 0) {
|
||||
return d + "天"
|
||||
}
|
||||
var h = Math.floor(s / 3600 % 24);
|
||||
var m = Math.floor(s / 60 % 60);
|
||||
var s = Math.floor(s % 60);
|
||||
return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
|
||||
},
|
||||
formatTimestamp(t) {
|
||||
return new Date(t * 1000).toLocaleString()
|
||||
},
|
||||
formatByteSize(bs) {
|
||||
const x = readableBytes(bs)
|
||||
return x != "NaN undefined" ? x : '0 KB'
|
||||
}
|
||||
}
|
||||
})
|
||||
const initData = {{.Servers}};
|
||||
var statusCards = new Vue({
|
||||
el: '#app',
|
||||
delimiters: ['@#', '#@'],
|
||||
data: {
|
||||
data: initData,
|
||||
groups: [],
|
||||
cache: [],
|
||||
},
|
||||
created() {
|
||||
this.group()
|
||||
},
|
||||
mounted() {
|
||||
$('.yellow.info.icon').popup({
|
||||
popup: '.ui.content.popup',
|
||||
exclusive: true,
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
group() {
|
||||
this.groups = groupingData(this.data, "Tag")
|
||||
},
|
||||
formatPercent(live, used, total) {
|
||||
const percent = live ? (parseInt(used / total * 100) || 0) : -1
|
||||
if (!this.cache[percent]) {
|
||||
this.cache[percent] = {
|
||||
class: {
|
||||
ui: true,
|
||||
progress: true,
|
||||
},
|
||||
style: {
|
||||
'transition-duration': '300ms',
|
||||
'min-width': 'unset',
|
||||
width: percent + '% !important',
|
||||
},
|
||||
percent,
|
||||
}
|
||||
if (percent < 0) {
|
||||
this.cache[percent].style['background-color'] = 'slategray'
|
||||
this.cache[percent].class.offline = true
|
||||
} else if (percent < 51) {
|
||||
this.cache[percent].style['background-color'] = 'rgb(0, 235, 139)'
|
||||
this.cache[percent].class.fine = true
|
||||
} else if (percent < 81) {
|
||||
this.cache[percent].style['background-color'] = 'orange'
|
||||
this.cache[percent].class.warning = true
|
||||
} else {
|
||||
this.cache[percent].style['background-color'] = 'crimson'
|
||||
this.cache[percent].class.error = true
|
||||
}
|
||||
}
|
||||
return this.cache[percent]
|
||||
},
|
||||
secondToDate(s) {
|
||||
var d = Math.floor(s / 3600 / 24);
|
||||
if (d > 0) {
|
||||
return d + "天"
|
||||
}
|
||||
var h = Math.floor(s / 3600 % 24);
|
||||
var m = Math.floor(s / 60 % 60);
|
||||
var s = Math.floor(s % 60);
|
||||
return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
|
||||
},
|
||||
formatTimestamp(t) {
|
||||
return new Date(t * 1000).toLocaleString()
|
||||
},
|
||||
formatByteSize(bs) {
|
||||
const x = readableBytes(bs)
|
||||
return x != "NaN undefined" ? x : '0 KB'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function groupingData(data, filed) {
|
||||
let map = {};
|
||||
function groupingData(data, filed) {
|
||||
let map = {};
|
||||
let dest = [];
|
||||
data.forEach(item => {
|
||||
if (!map[item[filed]]) {
|
||||
dest.push({
|
||||
[filed]: item[filed],
|
||||
data: [item]
|
||||
});
|
||||
map[item[filed]] = item;
|
||||
} else {
|
||||
dest.forEach(dItem => {
|
||||
if (dItem[filed] == item[filed]) {
|
||||
dItem.data.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
return dest;
|
||||
}
|
||||
|
||||
let dest = [];
|
||||
|
||||
data.forEach(item => {
|
||||
if (!map[item[filed]]) {
|
||||
dest.push({
|
||||
[filed]: item[filed],
|
||||
|
||||
data: [item]
|
||||
|
||||
});
|
||||
|
||||
map[item[filed]] = item;
|
||||
|
||||
} else {
|
||||
dest.forEach(dItem => {
|
||||
if (dItem[filed] == item[filed]) {
|
||||
dItem.data.push(item);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
return dest;
|
||||
|
||||
}
|
||||
|
||||
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
|
||||
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
||||
ws.onopen = function (evt) {
|
||||
$.suiAlert({
|
||||
title: '实时通道建立',
|
||||
description: '可以实时获取最新监控数据啦',
|
||||
type: 'success',
|
||||
time: '2',
|
||||
position: 'top-center',
|
||||
});
|
||||
}
|
||||
ws.onmessage = function (evt) {
|
||||
const oldServers = statusCards.servers
|
||||
statusCards.servers = JSON.parse(evt.data)
|
||||
for (let i = 0; i < statusCards.servers.length; i++) {
|
||||
const ns = statusCards.servers[i];
|
||||
if (!ns.Host) ns.live = false
|
||||
else {
|
||||
const lastActive = new Date(ns.LastActive).getTime()
|
||||
if (Date.now() - lastActive > 20 * 1000) {
|
||||
ns.live = false
|
||||
} else {
|
||||
ns.live = true
|
||||
}
|
||||
}
|
||||
}
|
||||
statusCards.groups = groupingData(statusCards.servers, "Tag")
|
||||
}
|
||||
ws.onclose = function () {
|
||||
$.suiAlert({
|
||||
title: '实时通道断开',
|
||||
description: '无法实时获取最新监控数据咯',
|
||||
type: 'warning',
|
||||
time: '2',
|
||||
position: 'top-center',
|
||||
});
|
||||
}
|
||||
$('.ui.accordion')
|
||||
.accordion({"exclusive": false})
|
||||
;
|
||||
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
|
||||
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
||||
ws.onopen = function (evt) {
|
||||
$.suiAlert({
|
||||
title: '实时通道建立',
|
||||
description: '可以实时获取最新监控数据啦',
|
||||
type: 'success',
|
||||
time: '2',
|
||||
position: 'top-center',
|
||||
});
|
||||
}
|
||||
ws.onmessage = function (evt) {
|
||||
const oldServers = statusCards.servers
|
||||
statusCards.servers = JSON.parse(evt.data)
|
||||
for (let i = 0; i < statusCards.servers.length; i++) {
|
||||
const ns = statusCards.servers[i];
|
||||
if (!ns.Host) ns.live = false
|
||||
else {
|
||||
const lastActive = new Date(ns.LastActive).getTime()
|
||||
if (Date.now() - lastActive > 20 * 1000) {
|
||||
ns.live = false
|
||||
} else {
|
||||
ns.live = true
|
||||
}
|
||||
}
|
||||
}
|
||||
statusCards.groups = groupingData(statusCards.servers, "Tag")
|
||||
}
|
||||
ws.onclose = function () {
|
||||
$.suiAlert({
|
||||
title: '实时通道断开',
|
||||
description: '无法实时获取最新监控数据咯',
|
||||
type: 'warning',
|
||||
time: '2',
|
||||
position: 'top-center',
|
||||
});
|
||||
}
|
||||
$('.ui.accordion')
|
||||
.accordion({"exclusive": false})
|
||||
;
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user