271 lines
13 KiB
HTML
271 lines
13 KiB
HTML
{{define "theme-hotaru/home"}}
|
|
<!doctype html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<title>{{.Title}}</title>
|
|
<link rel="shortcut icon" type="image/png" href="/static/logo.png" />
|
|
|
|
<!-- Fix chrome language detection -->
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
<meta http-equiv="Content-Language" content="zh" />
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
|
|
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
|
|
<link rel="stylesheet" href="/static/theme-hotaru/css/core.css?v202012092025" type="text/css">
|
|
<link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012092025" type="text/css">
|
|
<link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012092025" type="text/css">
|
|
</head>
|
|
|
|
<body>
|
|
<section class="hotaru-cover">
|
|
<div class="container" style="text-align: center;">
|
|
<h1>
|
|
<strong>{{.Title}}</strong>
|
|
</h1>
|
|
<div>
|
|
<p>
|
|
<small>狀態更新和事件報告可能會延遲最多30秒鐘<br />具體取決於手頭的技術問題。請向下滾動查看過去的事件報告</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="app">
|
|
<div class="container">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>运行状态</th>
|
|
<th>节点名</th>
|
|
<th>系统</th>
|
|
<th>服务器位置</th>
|
|
<th>在线时间</th>
|
|
<th>网络(B/s) ↓|↑</th>
|
|
<th>流量(B) ↓|↑</th>
|
|
<th>CPU</th>
|
|
<th>RAM</th>
|
|
<th>硬盘</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="servers" style="text-align:center;">
|
|
<tr v-for='server in servers' :id="server.ID">
|
|
<td>
|
|
<div class="progress">
|
|
<div style="width: 100%;"
|
|
:class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')">
|
|
<small>@#isAlive(server)?'运行中':pulled>3?'已离线':'……'#@</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>@#server.Name#@</td>
|
|
<td>@#server.Host?server.Host.Platform:'-'#@</td>
|
|
<td>@#server.Host?server.Host.CountryCode:'-'#@</td>
|
|
<td>@#server.State?secondToDate(server.State.Uptime):'-'#@</td>
|
|
<td>@#server.State?formatByteSize(server.State.NetInSpeed)+'/s|'+formatByteSize(server.State.NetOutSpeed)+'/s':'-'#@
|
|
</td>
|
|
<td>@#server.State?formatByteSize(server.State.NetInTransfer)+'|'+formatByteSize(server.State.NetOutTransfer):'-'#@
|
|
</td>
|
|
<td>
|
|
<div class="progress progress-striped active">
|
|
<div :style="'width: '+parseInt(server.State?server.State.CPU:0)+'%;'"
|
|
:class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')">
|
|
<small>@#parseInt(server.State?server.State.CPU:0)#@%</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="progress progress-striped active">
|
|
<div :style="'width: '+parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)+'%;'"
|
|
:class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')">
|
|
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="progress progress-striped active">
|
|
<div :style="'width: '+(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)+'%;'"
|
|
:class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')">
|
|
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="page-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-4 col-sm-4" v-for='server in servers' :id="server.ID">
|
|
<div class="panel panel-block panel-block-sm panel-location">
|
|
<div class="location-header">
|
|
<h3 class="h4"><img
|
|
:src="'/static/theme-hotaru/img/clients/'+(server.Host?server.Host.CountryCode.toUpperCase():'HK')+'.png'">
|
|
@#server.Name#@</h3>
|
|
<i class="zmdi zmdi-check-circle text-success"></i>
|
|
</div>
|
|
<div class="location-progress">
|
|
<div class="progress progress-sm">
|
|
<div :class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')"
|
|
:style="'width:'+parseInt(server.State?server.State.CPU:0)+'%;'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul class="location-info list-styled">
|
|
<li><span class="list-label">网络:</span>
|
|
@#server.State?formatByteSize(server.State.NetInSpeed)+'/s|'+formatByteSize(server.State.NetOutSpeed)+'/s':'-'#@
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="darkmodeButton"></button>
|
|
<footer>
|
|
<p style="text-align:center;">Powered by <a href="https://github.com/naiba/nezha">哪吒面板</a> build · {{.Version}}
|
|
</p>
|
|
</footer>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.js"></script>
|
|
<script src="/static/semantic-ui-alerts.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
|
<script>
|
|
const initData = {{.Servers }};
|
|
var statusCards = new Vue({
|
|
el: '#app',
|
|
delimiters: ['@#', '#@'],
|
|
data: {
|
|
servers: initData,
|
|
pulled: false,
|
|
},
|
|
mounted() {
|
|
this.troggleDarkMode();
|
|
},
|
|
methods: {
|
|
readableBytes(bytes) {
|
|
var i = Math.floor(Math.log(bytes) / Math.log(1024)),
|
|
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
|
|
|
return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + sizes[i];
|
|
},
|
|
troggleDarkMode() {
|
|
//darkmode
|
|
if (document.getElementById("darkmodeButton")) {
|
|
var night = parseInt(document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*=\s*([^;]*).*$)|^.*$/, "$1") || '0');
|
|
if (night) {
|
|
document.body.classList.add('dark');
|
|
console.log('Dark mode on', night);
|
|
}
|
|
document.getElementById("darkmodeButton").onclick = function () {
|
|
night = parseInt(document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*=\s*([^;]*).*$)|^.*$/, "$1") || '0');
|
|
if (!night) {
|
|
document.body.classList.add('dark');
|
|
document.cookie = "dark=1";
|
|
console.log('Dark mode on', night);
|
|
} else {
|
|
document.body.classList.remove('dark');
|
|
document.cookie = "dark=0";
|
|
console.log('Dark mode off', night);
|
|
}
|
|
}
|
|
} else {
|
|
document.cookie && (document.cookie = "");
|
|
console.log('Darkmode not Support');
|
|
}
|
|
},
|
|
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 = this.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>
|
|
</body>
|
|
|
|
</html>
|
|
{{end}} |