tcjlj/nezha
1
0
Fork 0
mirror of https://github.com/nezhahq/nezha.git synced 2025-01-23 13:18:13 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity
a9b1ab9e95
nezha/resource/template/theme-hotaru/home.html

273 lines
13 KiB
HTML
Raw Normal View History

✨ add theme hotaru
2020-12-09 06:05:40 -05:00
{{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 -->
⬆️ replace cdn
2020-12-09 06:10:28 -05:00
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
💄 improve
2020-12-09 07:26:14 -05:00
<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">
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
</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">
💄 improve
2020-12-09 07:26:14 -05:00
<div :style="'width: '+parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)+'%;'"
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
:class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')">
💄 improve
2020-12-09 07:26:14 -05:00
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
</div>
</div>
</td>
<td>
<div class="progress progress-striped active">
💄 improve
2020-12-09 07:26:14 -05:00
<div :style="'width: '+(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)+'%;'"
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
:class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')">
💄 improve
2020-12-09 07:26:14 -05:00
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
</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'">
&nbsp;@#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>
🚸 improve
2020-12-09 17:46:31 -05:00
<p style="text-align:center;padding: 15px;">Powered by <a href="https://github.com/naiba/nezha">哪吒面板</a> build ·
{{.Version}}
<a href="/server">管理后台</a>
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
</p>
</footer>
⬆️ replace cdn
2020-12-09 06:10:28 -05:00
<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>
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
<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}}
Reference in New Issue Copy Permalink