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
7d5ea7ab99
nezha/resource/template/theme-default/home.html

258 lines
12 KiB
HTML
Raw Normal View History

✨ add theme hotaru
2020-12-09 06:05:40 -05:00
{{define "theme-default/home"}}
Web 服务
2019-12-08 03:59:58 -05:00
{{template "common/header" .}}
🚸 增强面板自定义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}}
Web 服务
2019-12-08 03:59:58 -05:00
{{template "common/menu" .}}
<div class="nb-container">
<div class="ui container">
添加标签功能
2021-01-12 01:09:25 -05:00
<div id="app">
修复数据不更新的问题、分组显示改为折叠菜单
2021-01-12 03:34:11 -05:00
<div class="ui styled fluid accordion" v-for="group in groups">
<div class="active title"><i class="dropdown icon"></i>@#(group.Tag!==''?group.Tag:'默认')#@</div>
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
<div class="active content">
<div class="ui four stackable status cards">
<div v-for='server in group.data' :id="server.ID" class="ui card">
<div class="content" v-if='server.Host' style="margin-top: 10px;padding-bottom: 5px">
<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
+
(server.live?'':' [已离线]')#@
<i class="yellow info circle icon"></i>
<div class='ui content popup' style="margin-bottom: 0">
系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
v-if='server.Host.Virtualization'>@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br>
[dash v0.3.1] restore: cpu info
2021-01-19 08:47:40 -05:00
CPU：@#server.Host.CPU#@<br>
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
硬盘：@#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>
⚡️ refactor: 小幅提升性能
2021-01-17 09:05:59 -05:00
活动：@# new Date(server.LastActive).toLocaleString() #@<br>
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
版本：@#server.Host.Version#@<br>
客户端授权验证
2019-12-09 03:02:49 -05:00
</div>
修复详情面板透明的bug
2021-01-15 22:27:37 -05:00
<div class="ui divider" style="margin-bottom: 5px"></div>
客户端授权验证
2019-12-09 03:02:49 -05:00
</div>
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
<div class="description">
<div class="ui grid">
<div class="three wide column">CPU</div>
<div class="thirteen wide column">
<div :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>
添加标签功能
2021-01-12 01:09:25 -05:00
</div>
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
<div class="three wide column">内存</div>
<div class="thirteen wide column">
<div
: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>
添加标签功能
2021-01-12 01:09:25 -05:00
</div>
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
<div class="three wide column">交换</div>
<div class="thirteen wide column">
<div
:class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
<div class="bar"
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
</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="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>
</div>
<div class="three wide column">在线</div>
<div class="thirteen wide column">
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
添加标签功能
2021-01-12 01:09:25 -05:00
</div>
展示监控信息
2019-12-09 10:45:23 -05:00
</div>
</div>
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
</div>
<div class="content" v-else>
<p>@#server.Name#@</p>
<p>节点已离线</p>
展示服务器列表
2019-12-09 05:14:31 -05:00
</div>
添加服务器 & 展示服务器
2019-12-08 10:18:29 -05:00
</div>
</div>
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
</div>
添加服务器 & 展示服务器
2019-12-08 10:18:29 -05:00
</div>
</div>
Web 服务
2019-12-08 03:59:58 -05:00
</div>
</div>
{{template "common/footer" .}}
展示服务器列表
2019-12-09 05:14:31 -05:00
<script>
添加标签功能
2021-01-12 01:09:25 -05:00
const initData = {{.Servers}};
引入Vue
2019-12-10 02:33:05 -05:00
var statusCards = new Vue({
添加标签功能
2021-01-12 01:09:25 -05:00
el: '#app',
修改分隔符优化排版
2019-12-10 02:49:06 -05:00
delimiters: ['@#', '#@'],
引入Vue
2019-12-10 02:33:05 -05:00
data: {
添加标签功能
2021-01-12 01:09:25 -05:00
data: initData,
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
groups: [],
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
cache: [],
引入Vue
2019-12-10 02:33:05 -05:00
},
添加标签功能
2021-01-12 01:09:25 -05:00
created() {
this.group()
},
引入Vue
2019-12-10 02:33:05 -05:00
mounted() {
$('.yellow.info.icon').popup({
fix: 隐藏了ID没法添加Agent
2021-01-08 20:34:27 -05:00
popup: '.ui.content.popup',
exclusive: true,
引入Vue
2019-12-10 02:33:05 -05:00
});
},
methods: {
添加标签功能
2021-01-12 01:09:25 -05:00
group() {
修复数据不更新的问题、分组显示改为折叠菜单
2021-01-12 03:34:11 -05:00
this.groups = groupingData(this.data, "Tag")
添加标签功能
2021-01-12 01:09:25 -05:00
console.log(this.groups)
},
💄 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) {
🎨 优化进度条颜色、报警策略
2020-12-20 08:19:27 -05:00
this.cache[percent].style['background-color'] = 'rgb(0, 235, 139)'
💄 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
}
🎨 improve offline server detect
2020-10-24 09:29:05 -04:00
}
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
return this.cache[percent]
🎨 improve offline server detect
2020-10-24 09:29:05 -04:00
},
Websocket 实时拉取
2019-12-10 04:57:57 -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 + "天"
}
用更友好的交互替换alert
2019-12-11 05:03:49 -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);
Websocket 实时拉取
2019-12-10 04:57:57 -05:00
},
formatTimestamp(t) {
return new Date(t * 1000).toLocaleString()
},
formatByteSize(bs) {
const x = readableBytes(bs)
return x != "NaN undefined" ? x : '0 KB'
}
引入Vue
2019-12-10 02:33:05 -05:00
}
Websocket 实时拉取
2019-12-10 04:57:57 -05:00
})
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
function groupingData(data, filed) {
修复数据不更新的问题、分组显示改为折叠菜单
2021-01-12 03:34:11 -05:00
let map = {};
let dest = [];
data.forEach(item => {
if (!map[item[filed]]) {
dest.push({
[filed]: item[filed],
data: [item]
});
map[item[filed]] = item;
} else {
dest.forEach(dItem => {
if (dItem[filed] == item[filed]) {
dItem.data.push(item);
}
});
}
})
return dest;
}
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
🐛 window.location.protocol
2020-10-24 21:57:50 -04:00
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
🎨 improve offline server detect
2020-10-24 09:29:05 -04:00
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
Websocket 实时拉取
2019-12-10 04:57:57 -05:00
ws.onopen = function (evt) {
$.suiAlert({
title: '实时通道建立',
description: '可以实时获取最新监控数据啦',
type: 'success',
time: '2',
position: 'top-center',
});
}
ws.onmessage = function (evt) {
const oldServers = statusCards.servers
statusCards.servers = JSON.parse(evt.data)
fix: 隐藏了ID没法添加Agent
2021-01-08 20:34:27 -05:00
for (let i = 0; i < statusCards.servers.length; i++) {
✨ feat: 展示排序 close #29
2021-01-08 08:04:50 -05:00
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()
🚸 improve: live threshold
2021-01-03 21:51:57 -05:00
if (Date.now() - lastActive > 20 * 1000) {
💄 improve: done #10 进度条
2020-12-18 23:43:03 -05:00
ns.live = false
} else {
ns.live = true
}
}
Websocket 实时拉取
2019-12-10 04:57:57 -05:00
}
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
statusCards.groups = groupingData(statusCards.servers, "Tag")
Websocket 实时拉取
2019-12-10 04:57:57 -05:00
}
ws.onclose = function () {
$.suiAlert({
title: '实时通道断开',
description: '无法实时获取最新监控数据咯',
type: 'warning',
time: '2',
position: 'top-center',
});
}
修复数据不更新的问题、分组显示改为折叠菜单
2021-01-12 03:34:11 -05:00
$('.ui.accordion')
调整状态卡片上下空白高度
2021-01-12 05:00:51 -05:00
.accordion({"exclusive": false})
修复数据不更新的问题、分组显示改为折叠菜单
2021-01-12 03:34:11 -05:00
;
展示服务器列表
2019-12-09 05:14:31 -05:00
</script>
修复数据不更新的问题、分组显示改为折叠菜单
2021-01-12 03:34:11 -05:00
{{end}}
Reference in New Issue Copy Permalink