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
26646bff1a
nezha/resource/template/theme-hotaru/home.html

290 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>
💄 更新 LOGO
2021-08-04 01:35:41 -04:00
<link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" />
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
<!-- 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">
添加第三个主题的手动切换白黑
2021-03-01 22:47:12 -05:00
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.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: done #10 进度条
2020-12-18 23:43:03 -05:00
<link rel="stylesheet" href="/static/theme-hotaru/css/core.css?v202012121912" type="text/css">
🗑 chore: cdn cache
2021-01-16 22:53:43 -05:00
<link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202101171153" type="text/css">
添加第三个主题的手动切换白黑
2021-03-01 22:47:12 -05:00
<link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202103021121" type="text/css">
🚸 增强面板自定义CSS功能
2020-12-23 20:54:17 -05:00
{{if ts .CustomCode}}
{{.CustomCode|safe}}
feat(theme): 自定义主题
2020-12-18 21:57:10 -05:00
{{end}}
✨ 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>
🐛 fix(alert): 添加报警规则
2020-12-21 03:34:21 -05:00
<th>位置</th>
<th>在线</th>
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
<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">
💄 improve(ui): hotaru 主题底部进度条数据融合
2020-12-20 08:47:12 -05:00
<div :class="'state-'+ (server.live?'online':'offline')">
<small>@#server.live?'运行中':'已离线'#@</small>
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
</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>
优化 agent 信息上报与 ARM 安装面板的错误提示
2021-06-30 06:15:53 -04:00
<td>@#server.State?readableBytes(server.State.NetInSpeed)+'/s|'+readableBytes(server.State.NetOutSpeed)+'/s':'-'#@
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
</td>
优化 agent 信息上报与 ARM 安装面板的错误提示
2021-06-30 06:15:53 -04:00
<td>@#server.State?readableBytes(server.State.NetInTransfer)+'|'+readableBytes(server.State.NetOutTransfer):'-'#@
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
</td>
<td>
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
<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">
🐛 fix: cpu
2020-12-18 23:52:28 -05:00
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
</div>
</div>
</td>
<td>
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
<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">
💄 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>
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
<div v-if="server.State"
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
💄 improve(ui): progress bar
2020-12-20 10:15:57 -05:00
<div class="bar"
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
💄 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
💄 improve(ui): hotaru 主题底部进度条数据融合
2020-12-20 08:47:12 -05:00
:src="'/static/theme-hotaru/img/clients/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'">
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
&nbsp;@#server.Name#@</h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
💄 improve(ui): hotaru 主题底部进度条数据融合
2020-12-20 08:47:12 -05:00
<div
:class="formatPercent(server.live,mergeUsage(server.State, server.Host),100).class">
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
<div class="bar"
💄 improve(ui): hotaru 主题底部进度条数据融合
2020-12-20 08:47:12 -05:00
:style="formatPercent(server.live,mergeUsage(server.State, server.Host),100).style">
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
</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>
添加第三个主题的手动切换白黑
2021-03-01 22:47:12 -05:00
<div class="sidebar-container">
<ul>
<li id='sun'><i class="fas fa-sun" title="白昼模式"></i><span>白昼模式</span></li>
<li id='moon'><i class="fas fa-moon" title="暗黑模式"></i><span>暗黑模式</span></li>
</ul>
</div>
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
<footer>
🔖 chore: rename 哪吒面板 -> 哪吒监控
2021-02-06 20:51:55 -05:00
<p style="text-align:center;padding: 15px;">Powered by <a href="https://github.com/naiba/nezha">哪吒监控</a> build ·
🚸 improve
2020-12-09 17:46:31 -05:00
{{.Version}}
🚸 improve: 优化agent取双栈IP、服务状态页面展示策略
2021-01-15 22:23:42 -05:00
<a href="/service">服务状态</a>
🚸 improve
2020-12-09 17:46:31 -05:00
<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>
🐛 修复部分用户cdn取到的js不一致
2020-12-22 08:54:04 -05:00
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
<script>
⚡️ 增强抗击打能力
2022-03-23 09:07:38 -04:00
const initData = JSON.parse('{{.Servers}}').servers;
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
var statusCards = new Vue({
el: '#app',
delimiters: ['@#', '#@'],
data: {
servers: initData,
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
cache: [],
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
},
mounted() {
this.troggleDarkMode();
},
methods: {
💄 improve(ui): hotaru 主题底部进度条数据融合
2020-12-20 08:47:12 -05:00
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
},
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
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) {
熊大给出的配色建议 Co-authored-by: xiongbao <4247191+xiongbao@users.noreply.github.com>
2021-08-05 22:43:21 -04:00
this.cache[percent].style['background-color'] = '#0a94f2'
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
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]
},
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
readableBytes(bytes) {
紧急处理 GeoIP API 问题
2021-07-05 01:44:21 -04:00
if (!bytes) {
return '0B'
}
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
var i = Math.floor(Math.log(bytes) / Math.log(1024)),
紧急处理 GeoIP API 问题
2021-07-05 01:44:21 -04:00
sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
},
💄 修复主题错误
2021-07-05 23:57:53 -04:00
formatByteSize(bs) {
const x = this.readableBytes(bs)
return x != "NaN undefined" ? x : '0B'
},
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
troggleDarkMode() {
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
const hour = new Date(Date.now()).getHours()
if (hour > 17 || hour < 4) {
document.body.classList.add('dark');
}
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
},
secondToDate(s) {
var d = Math.floor(s / 3600 / 24);
🐛 fix(alert): 添加报警规则
2020-12-21 03:34:21 -05:00
if (d > 0) {
return d + "天"
}
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
var h = Math.floor(s / 3600 % 24);
🐛 fix(alert): 添加报警规则
2020-12-21 03:34:21 -05:00
var m = Math.floor(s / 60 % 60);
var s = Math.floor(s % 60);
return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
},
formatTimestamp(t) {
return new Date(t * 1000).toLocaleString()
}
}
})
添加第三个主题的手动切换白黑
2021-03-01 22:47:12 -05:00
$(function(){
$('#sun').click(function(){
$('body').removeClass('dark');
});
$('#moon').click(function(){
$('body').addClass('dark');
})
})
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
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) {
🚸 使用服务器端时间判断机器离线
2021-07-15 23:14:07 -04:00
const data = JSON.parse(evt.data)
statusCards.servers = data.servers
✨ feat: 展示排序 close #29
2021-01-08 08:04:50 -05:00
for (let i = 0; i < statusCards.servers.length; i++) {
const ns = statusCards.servers[i];
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
if (!ns.Host) ns.live = false
else {
const lastActive = new Date(ns.LastActive).getTime()
🚸 使用服务器端时间判断机器离线
2021-07-15 23:14:07 -04:00
if (data.now - lastActive > 10 * 1000) {
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
ns.live = false
} else {
ns.live = true
✨ add theme hotaru
2020-12-09 06:05:40 -05:00
}
}
}
}
ws.onclose = function () {
$.suiAlert({
title: '实时通道断开',
description: '无法实时获取最新监控数据咯',
type: 'warning',
time: '2',
position: 'top-center',
});
}
</script>
</body>
</html>
{{end}}
Reference in New Issue Copy Permalink