mirror of
https://github.com/nezhahq/nezha.git
synced 2025-01-23 13:18:13 -05:00
537 lines
20 KiB
HTML
Vendored
537 lines
20 KiB
HTML
Vendored
{{define "theme-default/home"}}
|
|
{{template "theme-default/header" .}}
|
|
{{if ts .CustomCode}} {{.CustomCode|safe}} {{end}}
|
|
{{template "theme-default/menu" .}}
|
|
<div class="nb-container">
|
|
<div class="ui container">
|
|
<template v-if="groups">
|
|
<div class="ui styled fluid accordion" v-for="group in groups">
|
|
<div class="active title">
|
|
<i class="dropdown icon"></i>
|
|
@#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@
|
|
</div>
|
|
<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 style="width: 22px;border-radius: 4px;" :class="'fi fi-' + server.Host.CountryCode"></i> <i v-if='server.Host.Platform == "darwin"'
|
|
class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)'
|
|
class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
|
|
@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@
|
|
<i @click="togglePopup($event, server.ID)" aria-expanded="false" class="nezha-secondary-font info circle icon"></i>
|
|
<div class="ui content popup" :class="{ 'visible': isActive(server.ID) }" style="margin-bottom: 0;">
|
|
<i class="closePopup window close icon" @click="closePopup(server.ID)"></i>
|
|
{{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@
|
|
[<span
|
|
v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br />
|
|
CPU: @#server.Host.CPU#@<br />
|
|
{{tr "DiskUsed"}}:
|
|
@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br />
|
|
{{tr "MemUsed"}}:
|
|
@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br />
|
|
{{tr "SwapUsed"}}:
|
|
@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br />
|
|
{{tr "NetTransfer"}}: <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 />
|
|
{{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@# toFixed2(server.State.Load5) #@/@#
|
|
toFixed2(server.State.Load15) #@<br />
|
|
{{tr "ProcessCount"}}: @# server.State.ProcessCount #@<br />
|
|
{{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @# server.State.UdpConnCount #@<br />
|
|
{{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@<br />
|
|
{{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@<br />
|
|
{{tr "Version"}}: @#server.Host.Version#@
|
|
<div class="chartbox" :key="server.ID" :ref="`chart${server.ID}`" style="width: 100%; height: auto; margin-bottom: 2px;"></div>
|
|
</div>
|
|
<div class="ui divider" style="margin-bottom: 5px"></div>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
<div class="three wide column">{{tr "MemUsed"}}</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>
|
|
</div>
|
|
<div class="three wide column">{{tr "SwapUsed"}}</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">{{tr "DiskUsed"}}</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">{{tr "NetSpeed"}}</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">{{tr "NetTransfer"}}</div>
|
|
<div class="thirteen wide column">
|
|
<i class="arrow circle down icon"></i>
|
|
@#formatByteSize(server.State.NetInTransfer)#@
|
|
|
|
<i class="arrow circle up icon"></i>
|
|
@#formatByteSize(server.State.NetOutTransfer)#@
|
|
</div>
|
|
<div class="three wide column">{{tr "Stat"}}</div>
|
|
<div class="thirteen wide column">
|
|
<i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i> @#getCoreAndGHz(server.Host.CPU)#@
|
|
|
|
<i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i> @#getK2Gb(server.Host.MemTotal)#@
|
|
|
|
<i class="bi bi-hdd" style="font-size: 1.1rem; color: #e41e10"></i> @#getK2Gb(server.Host.DiskTotal)#@
|
|
</div>
|
|
<div class="three wide column">{{tr "Load"}}</div>
|
|
<div class="thirteen wide column">
|
|
<i class="bi bi-activity" style="font-size: 1.1rem; color: #e41e10;"></i>
|
|
@# toFixed2(server.State.Load1) #@ |
|
|
@# toFixed2(server.State.Load5) #@ |
|
|
@# toFixed2(server.State.Load15) #@
|
|
</div>
|
|
<div class="three wide column">{{tr "Uptime"}}</div>
|
|
<div class="thirteen wide column">
|
|
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content" v-else>
|
|
<p>@#server.Name#@</p>
|
|
<p>{{tr "ServerIsOffline"}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
{{template "theme-default/footer" .}}
|
|
<script>
|
|
var statusCards = new Vue({
|
|
el: '#app',
|
|
delimiters: ['@#', '#@'],
|
|
data: {
|
|
page: 'index',
|
|
defaultTemplate: {{.Conf.Site.Theme}},
|
|
templates: {{.Themes}},
|
|
servers: [],
|
|
groups: [],
|
|
cache: [],
|
|
chartDataList: [],
|
|
activePopup: null,
|
|
},
|
|
mixins: [mixinsVue],
|
|
created() {
|
|
this.servers = JSON.parse('{{.Servers}}').servers;
|
|
this.group()
|
|
},
|
|
methods: {
|
|
togglePopup(event, id) {
|
|
// 切换弹出层的激活状态
|
|
this.activePopup = this.activePopup === id ? null : id;
|
|
this.showCharts(id);
|
|
},
|
|
isActive(id) {
|
|
// 检查弹出层是否处于激活状态
|
|
return this.activePopup === id;
|
|
},
|
|
closePopup(id) {
|
|
this.activePopup = null;
|
|
},
|
|
showCharts(id) {
|
|
// 发起数据请求
|
|
const url = `/api/v1/monitor/${id}`;
|
|
fetch(url)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.result) { // 数据请求成功，更新数据并渲染图表
|
|
this.chartDataList[id - 1] = data.result;
|
|
this.$nextTick(() => {
|
|
this.renderCharts(id);
|
|
});
|
|
} else {
|
|
console.log('this agent (id:'+ id + ') has no monitor.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching data:', error);
|
|
});
|
|
},
|
|
renderCharts(id) {
|
|
if (!this.chartDataList[id - 1]) return;
|
|
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
|
|
const isMobile = this.checkIsMobile();
|
|
const fontSize = isMobile ? 10 : 9;
|
|
const itemGap = isMobile ? 6 : 6;
|
|
const itemWidth = isMobile ? 10 : 10;
|
|
const itemHeight = isMobile ? 10 : 10;
|
|
const gridLeft = 25;
|
|
const gridRight = 12;
|
|
const fontColor = "rgba(0, 0, 0, 0.68)";
|
|
const backgroundColor = '';
|
|
const borderColor = "#ffffff";
|
|
const chartData = this.chartDataList[id - 1];
|
|
const chartContainer = this.$refs[`chart${id}`][0];
|
|
const chart = echarts.init(chartContainer, null, {
|
|
renderer: 'canvas',
|
|
useDirtyRect: false,
|
|
width: 'auto',
|
|
height: 120,
|
|
});
|
|
const xAxisData = chartData[0].created_at.map(time => new Date(time).toLocaleString());
|
|
const seriesData = chartData.map(item => {
|
|
let loss = 0;
|
|
const data = item.avg_delay.map((avgDelay, index) => {
|
|
if(avgDelay > 0 && avgDelay < MaxTCPPingValue){
|
|
loss += avgDelay > 0.9 * MaxTCPPingValue ? 1 : 0;
|
|
return [item.created_at[index], avgDelay];
|
|
}else{
|
|
loss += 1;
|
|
}
|
|
});
|
|
const lossRate = ((loss / item.created_at.length) * 100).toFixed(1);
|
|
item.monitor_name = item.monitor_name.includes("%") ? item.monitor_name : `${item.monitor_name} ${lossRate}%`;
|
|
return {
|
|
name: item.monitor_name,
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
data: data,
|
|
connectNulls: true
|
|
};
|
|
});
|
|
const option = {
|
|
backgroundColor: backgroundColor,
|
|
title: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis',
|
|
textStyle: {
|
|
fontSize: fontSize,
|
|
color: fontColor
|
|
}
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
data: chartData.map(item => item.monitor_name),
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: fontSize,
|
|
color: fontColor
|
|
},
|
|
lineStyle: {
|
|
cap: 'butt'
|
|
},
|
|
top: 0,
|
|
bottom: 0,
|
|
itemGap: itemGap,
|
|
itemWidth: itemWidth,
|
|
itemHeight: itemHeight,
|
|
padding: [5,0,5,0]
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
data: xAxisData,
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: fontSize
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: fontSize
|
|
}
|
|
}
|
|
},
|
|
dataZoom: [
|
|
{
|
|
show: false,
|
|
type: 'slider',
|
|
start: 0,
|
|
end: 100
|
|
}
|
|
],
|
|
series: seriesData,
|
|
textStyle: {
|
|
fontSize: fontSize,
|
|
color: fontColor
|
|
},
|
|
grid: {
|
|
top: '30',
|
|
bottom: '20',
|
|
left: gridLeft,
|
|
right: gridRight
|
|
}
|
|
};
|
|
chart.setOption(option);
|
|
},
|
|
checkIsMobile() { // 检测设备类型,页面宽度小于768px认为是移动设备
|
|
return window.innerWidth <= 768;
|
|
},
|
|
toFixed2(f) {
|
|
return f.toFixed(2)
|
|
},
|
|
isWindowsPlatform(str) {
|
|
return str.includes('Windows')
|
|
},
|
|
getFontLogoClass(str) {
|
|
if (["almalinux",
|
|
"alpine",
|
|
"aosc",
|
|
"apple",
|
|
"archlinux",
|
|
"archlabs",
|
|
"artix",
|
|
"budgie",
|
|
"centos",
|
|
"coreos",
|
|
"debian",
|
|
"deepin",
|
|
"devuan",
|
|
"docker",
|
|
"elementary",
|
|
"fedora",
|
|
"ferris",
|
|
"flathub",
|
|
"freebsd",
|
|
"gentoo",
|
|
"gnu-guix",
|
|
"illumos",
|
|
"kali-linux",
|
|
"linuxmint",
|
|
"mageia",
|
|
"mandriva",
|
|
"manjaro",
|
|
"nixos",
|
|
"openbsd",
|
|
"opensuse",
|
|
"pop-os",
|
|
"raspberry-pi",
|
|
"redhat",
|
|
"rocky-linux",
|
|
"sabayon",
|
|
"slackware",
|
|
"snappy",
|
|
"solus",
|
|
"tux",
|
|
"ubuntu",
|
|
"void",
|
|
"zorin"].indexOf(str)
|
|
> -1) {
|
|
return str;
|
|
}
|
|
if (['openwrt','linux'].indexOf(str) > -1) {
|
|
return 'tux';
|
|
}
|
|
if (str == 'amazon') {
|
|
return 'redhat';
|
|
}
|
|
if (str == 'arch') {
|
|
return 'archlinux';
|
|
}
|
|
return '';
|
|
},
|
|
group() {
|
|
this.groups = groupingData(this.servers, "Tag")
|
|
},
|
|
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'] = '#0a94f2'
|
|
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]
|
|
},
|
|
secondToDate(s) {
|
|
var d = Math.floor(s / 3600 / 24);
|
|
if (d > 0) {
|
|
return d + " {{tr "Day"}}"
|
|
}
|
|
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 : '0B'
|
|
},
|
|
readableBytes(bytes) {
|
|
if (!bytes) {
|
|
return '0B'
|
|
}
|
|
const i = Math.floor(Math.log(bytes) / Math.log(1024)),
|
|
sizes = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
|
|
return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
|
|
},
|
|
getCoreAndGHz(str){
|
|
if((str || []).hasOwnProperty(0) === false){
|
|
return '';
|
|
}
|
|
str = str[0];
|
|
let GHz = str.match(/(\d|\.)+GHz/g);
|
|
let Core = str.match(/(\d|\.)+ Physical/g);
|
|
GHz = GHz!==null?GHz.hasOwnProperty(0)===false?'':GHz[0]:''
|
|
Core = Core!==null?Core.hasOwnProperty(0)===false?'?':Core[0]:'?'
|
|
if(Core === '?'){
|
|
let Core = str.match(/(\d|\.)+ Virtual/g);
|
|
Core = Core!==null?Core.hasOwnProperty(0)===false?'?':Core[0]:'?'
|
|
return Core.replace('Virtual','Core')
|
|
}
|
|
return Core.replace('Physical','Core');
|
|
},
|
|
getK2Gb(bs){
|
|
bs = bs / 1024 /1024 /1024;
|
|
if(bs>=1){
|
|
return Math.ceil(bs.toFixed(2)) + 'GB';
|
|
}else{
|
|
bs = bs * 1024;
|
|
return Math.ceil(bs.toFixed(2)) + 'MB';
|
|
}
|
|
},
|
|
listTipsMouseenter(obj,strs,tipsNum=1){
|
|
this.layerIndex = layer.tips(strs, '#'+obj,{tips: [tipsNum, 'rgb(0 0 0 / 85%)'],time:0});
|
|
$('#'+obj).attr('layerIndex',this.layerIndex)
|
|
},
|
|
listTipsMouseleave(obj){
|
|
layer.close(this.layerIndex)
|
|
}
|
|
}
|
|
})
|
|
|
|
function groupingData(data, field) {
|
|
let map = {};
|
|
let dest = [];
|
|
data.forEach(item => {
|
|
if (!map[item[field]]) {
|
|
dest.push({
|
|
[field]: item[field],
|
|
data: [item]
|
|
});
|
|
map[item[field]] = item;
|
|
} else {
|
|
dest.forEach(dItem => {
|
|
if (dItem[field] == item[field]) {
|
|
dItem.data.push(item);
|
|
}
|
|
});
|
|
}
|
|
})
|
|
return dest;
|
|
}
|
|
|
|
let canShowError = true;
|
|
function connect() {
|
|
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
|
|
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
|
ws.onopen = function (evt) {
|
|
canShowError = true;
|
|
$.suiAlert({
|
|
title: '{{tr "RealtimeChannelEstablished"}}',
|
|
description: '{{tr "GetTheLatestMonitoringDataInRealTime"}}',
|
|
type: 'success',
|
|
time: '2',
|
|
position: 'top-center',
|
|
});
|
|
}
|
|
ws.onmessage = function (evt) {
|
|
const oldServers = statusCards.servers
|
|
const data = JSON.parse(evt.data)
|
|
statusCards.servers = data.servers
|
|
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 (data.now - lastActive > 10 * 1000) {
|
|
ns.live = false
|
|
} else {
|
|
ns.live = true
|
|
}
|
|
}
|
|
}
|
|
statusCards.groups = groupingData(statusCards.servers, "Tag")
|
|
}
|
|
ws.onclose = function () {
|
|
if (canShowError) {
|
|
canShowError = false;
|
|
$.suiAlert({
|
|
title: '{{tr "RealtimeChannelDisconnect"}}',
|
|
description: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',
|
|
type: 'warning',
|
|
time: '2',
|
|
position: 'top-center',
|
|
});
|
|
}
|
|
setTimeout(function () {
|
|
connect()
|
|
}, 3000);
|
|
}
|
|
ws.onerror = function () {
|
|
ws.close()
|
|
}
|
|
}
|
|
|
|
connect();
|
|
|
|
$('.ui.accordion').accordion({ "exclusive": false });
|
|
</script>
|
|
{{end}}
|