188 lines
8.7 KiB
HTML
188 lines
8.7 KiB
HTML
{{define "page/home"}}
|
||
{{template "common/header" .}}
|
||
{{template "common/menu" .}}
|
||
<div class="nb-container">
|
||
<div class="ui container">
|
||
<div class="ui four stackable status cards">
|
||
<div v-for='server in servers' :id="server.ID" class="card">
|
||
<div class="content" v-if='isAlive(server)'>
|
||
<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#@
|
||
<i class="yellow info circle icon"></i>
|
||
<div class='ui content popup'>
|
||
系统：@#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>
|
||
版本：@#server.Host.Version#@<br>
|
||
</div>
|
||
</div>
|
||
<div class="description">
|
||
<div class="ui grid">
|
||
<div class="three wide column">CPU</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui cpu green progress" :data-value="server.State.CPU" data-total="100">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three wide column">内存</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui mem green progress" :data-value="server.State.MemUsed"
|
||
:data-total="server.Host.MemTotal">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three wide column">交换</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui swap green progress" :data-value="server.State.SwapUsed"
|
||
:data-total="server.Host.SwapTotal">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</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="ui disk green progress" :data-value="server.State.DiskUsed"
|
||
:data-total="server.Host.DiskTotal">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</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>
|
||
{{template "common/footer" .}}
|
||
<script>
|
||
const initData = {{.Servers }};
|
||
var statusCards = new Vue({
|
||
el: 'div.status.cards',
|
||
delimiters: ['@#', '#@'],
|
||
data: {
|
||
servers: initData,
|
||
pulled: false,
|
||
},
|
||
mounted() {
|
||
$('.progress').progress();
|
||
$('.yellow.info.icon').popup({
|
||
popup: '.ui.content.popup'
|
||
});
|
||
},
|
||
methods: {
|
||
isAlive(s) {
|
||
if (!s.Host) return false
|
||
const lastActive = new Date(s.LastActive).getTime()
|
||
if (this.pulled > 10 && Date.now() - lastActive > 20 * 1000) {
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
secondToDate(s) {
|
||
var d = Math.floor(s / 3600 / 24);
|
||
var h = Math.floor(s / 3600 % 24);
|
||
var m = Math.floor((s / 60 % 60));
|
||
var s = Math.floor((s % 60));
|
||
return result = d + "天" + h + "小时" + m + "分钟" + s + "秒";
|
||
},
|
||
formatTimestamp(t) {
|
||
return new Date(t * 1000).toLocaleString()
|
||
},
|
||
formatByteSize(bs) {
|
||
const x = readableBytes(bs)
|
||
return x != "NaN undefined" ? x : '0 KB'
|
||
}
|
||
}
|
||
})
|
||
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.send('track');
|
||
setInterval(() => {
|
||
ws.send('track');
|
||
console.log('追加监控时间')
|
||
}, 1000 * 60 * 6);
|
||
}
|
||
ws.onmessage = function (evt) {
|
||
const oldServers = statusCards.servers
|
||
statusCards.servers = JSON.parse(evt.data)
|
||
statusCards.pulled++
|
||
const keys = Object.keys(statusCards.servers)
|
||
for (let i = 0; i < keys.length; i++) {
|
||
const ns = statusCards.servers[keys[i]];
|
||
// 进度条
|
||
const bars = [
|
||
$('#' + ns.ID + ' .cpu.progress'),
|
||
$('#' + ns.ID + ' .mem.progress'),
|
||
$('#' + ns.ID + ' .swap.progress'),
|
||
$('#' + ns.ID + ' .disk.progress')
|
||
]
|
||
for (let j = 0; j < oldServers.length; j++) {
|
||
const os = oldServers[j];
|
||
if (ns.ID == os.ID) {
|
||
break
|
||
}
|
||
// 新加入的仔
|
||
$('#' + ns.ID + ' .yellow.info.icon').popup({
|
||
popup: '.ui.content.popup'
|
||
});
|
||
}
|
||
// 刷新进度条
|
||
bars.forEach((b, i) => {
|
||
if (b[0] && b[0].dataset) {
|
||
b.progress('set total', i == 0 ? 100 : b[0].dataset.total);
|
||
b.progress('update progress', b[0].dataset.value);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
ws.onclose = function () {
|
||
$.suiAlert({
|
||
title: '实时通道断开',
|
||
description: '无法实时获取最新监控数据咯',
|
||
type: 'warning',
|
||
time: '2',
|
||
position: 'top-center',
|
||
});
|
||
}
|
||
</script>
|
||
{{end}} |