268 lines
12 KiB
HTML
Vendored
268 lines
12 KiB
HTML
Vendored
{{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?v202012121912" type="text/css">
|
|
<link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202101171153" type="text/css">
|
|
<link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012121912" type="text/css">
|
|
{{if ts .CustomCode}}
|
|
{{.CustomCode|safe}}
|
|
{{end}}
|
|
</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 :class="'state-'+ (server.live?'online':'offline')">
|
|
<small>@#server.live?'运行中':'已离线'#@</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 v-if="server.State" :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>
|
|
</td>
|
|
<td>
|
|
<div v-if="server.State"
|
|
: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>
|
|
</td>
|
|
<td>
|
|
<div v-if="server.State"
|
|
: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>
|
|
</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?server.Host.CountryCode.toUpperCase():'CN')+'.png'">
|
|
@#server.Name#@</h3>
|
|
<i class="zmdi zmdi-check-circle text-success"></i>
|
|
</div>
|
|
<div class="location-progress">
|
|
<div
|
|
:class="formatPercent(server.live,mergeUsage(server.State, server.Host),100).class">
|
|
<div class="bar"
|
|
:style="formatPercent(server.live,mergeUsage(server.State, server.Host),100).style">
|
|
</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>
|
|
<footer>
|
|
<p style="text-align:center;padding: 15px;">Powered by <a href="https://github.com/naiba/nezha">哪吒监控</a> build ·
|
|
{{.Version}}
|
|
<a href="/service">服务状态</a>
|
|
<a href="/server">管理后台</a>
|
|
</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@2.6.12/dist/vue.min.js"></script>
|
|
<script>
|
|
const initData = {{.Servers }};
|
|
var statusCards = new Vue({
|
|
el: '#app',
|
|
delimiters: ['@#', '#@'],
|
|
data: {
|
|
servers: initData,
|
|
cache: [],
|
|
},
|
|
mounted() {
|
|
this.troggleDarkMode();
|
|
},
|
|
methods: {
|
|
mergeUsage(state, host) {
|
|
if (!state) {
|
|
return 0
|
|
}
|
|
if (!host) {
|
|
return state.CPU
|
|
}
|
|
return (state.CPU + (state.MemUsed / host.MemTotal * 100) + (state.DiskUsed / host.DiskTotal * 100)) / 3
|
|
},
|
|
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]
|
|
},
|
|
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(0) + ' ' + sizes[i];
|
|
},
|
|
troggleDarkMode() {
|
|
const hour = new Date(Date.now()).getHours()
|
|
if (hour > 17 || hour < 4) {
|
|
document.body.classList.add('dark');
|
|
}
|
|
},
|
|
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 = 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.onmessage = function (evt) {
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
ws.onclose = function () {
|
|
$.suiAlert({
|
|
title: '实时通道断开',
|
|
description: '无法实时获取最新监控数据咯',
|
|
type: 'warning',
|
|
time: '2',
|
|
position: 'top-center',
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
{{end}} |