mirror of
https://github.com/nezhahq/nezha.git
synced 2025-01-23 05:08:13 -05:00
633 lines
31 KiB
HTML
Vendored
633 lines
31 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='isWindowsPlatform(server.Host.Platform)' class="windows icon"></i>
|
||
<i v-else-if='getFontLogoClass(server.Host.Platform) == "" && server.State.Uptime > 0' class="fl-tux"></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 />
|
||
GPU: @#server.Host.GPU#@
|
||
<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"}}:
|
||
<template v-if="server.Host.SwapTotal === 0">OFF</template>
|
||
<template v-else>@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@</template>
|
||
<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 />
|
||
<div v-if="server.State.Temperatures && getTemperature(server.State.Temperatures, sensorList) > 0" class="temp-detail" @click="toggleDetailedTemp(server.ID)" :id="`temp-${server.ID}`" temp-detail-show="0">
|
||
{{tr "Temperature"}}:
|
||
<span :id="`temp-main-${server.ID}`">
|
||
@#getTemperature(server.State.Temperatures, sensorList)#@°C
|
||
<i class="bi bi-chevron-double-down"></i>
|
||
</span>
|
||
<span :id="`temp-detail-${server.ID}`" style="display:none">
|
||
<span v-for="temp in server.State.Temperatures" :key="temp.Name" v-if="temp.Temperature !== 0">
|
||
[ @#temp.Name#@: @#temp.Temperature#@°C ]
|
||
</span>
|
||
<i class="bi bi-chevron-double-up"></i>
|
||
</span>
|
||
</div>
|
||
{{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>@#parseInt(server.State.CPU?server.State.CPU:0)#@%</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.Host.MemTotal?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 v-if="server.Host.SwapTotal === 0">OFF</small>
|
||
<small v-else>@#parseInt(server.State.SwapUsed/server.Host.SwapTotal*100)#@%</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.Host.DiskTotal?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,
|
||
sensorList: [
|
||
'TC0D', //CPU Die 温度，代表 CPU 内部的温度
|
||
'TC0H', //CPU Heatsink 温度，代表 CPU 散热器的温度
|
||
'TC0P', //CPU Proximity 温度，代表 CPU 附近的温度
|
||
'k10temp', //AMD K10（Phenom、Athlon、Sempron 等）系列处理器的温度监测
|
||
'coretemp_package_id_0', //整个封装处理器温度
|
||
'cpu_thermal_zone', //全志
|
||
'cpu-thermal', //树莓派(博通)
|
||
'soc_thermal', //新瑞芯微
|
||
'cpu_thermal', //老瑞芯微
|
||
'ACPI\\ThermalZone\\TZ0__0', //Windows
|
||
'ACPI\\ThermalZone\\CPUZ_0', //Windows
|
||
'ACPI\\ThermalZone\\TZ00_0', //Windows
|
||
'ACPI\\ThermalZone\\TZ001_0', //Windows
|
||
'ACPI\\ThermalZone\\THM0_0' //Windows
|
||
]
|
||
},
|
||
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 (str == 'darwin') {
|
||
return 'apple';
|
||
}
|
||
if (['openwrt', 'linux'].indexOf(str) > -1) {
|
||
return 'tux';
|
||
}
|
||
if (str == 'amazon') {
|
||
return 'redhat';
|
||
}
|
||
if (str == 'arch') {
|
||
return 'archlinux';
|
||
}
|
||
if (str.toLowerCase().includes('opensuse')) {
|
||
return 'opensuse';
|
||
}
|
||
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
|
||
if (!live) {
|
||
this.cache[percent].percent = 0
|
||
}
|
||
} 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));
|
||
const 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)
|
||
},
|
||
toggleDetailedTemp(id){
|
||
const tempDom = document.getElementById(`temp-${id}`);
|
||
const tempDetailShow = tempDom.getAttribute('temp-detail-show');
|
||
const tempMain = document.getElementById(`temp-main-${id}`);
|
||
const tempDetail = document.getElementById(`temp-detail-${id}`);
|
||
if (tempDetailShow == 0){
|
||
tempMain.style.display = 'none';
|
||
tempDetail.style.display = 'inline';
|
||
tempDom.setAttribute('temp-detail-show', 1);
|
||
} else {
|
||
tempMain.style.display = 'inline';
|
||
tempDetail.style.display = 'none';
|
||
tempDom.setAttribute('temp-detail-show', 0);
|
||
}
|
||
},
|
||
getTemperature(temperatureList, sensorList) {
|
||
// 将 sensorList 中的所有项转换为小写
|
||
const lowerCaseSensorList = sensorList.map(sensor => sensor.toLowerCase());
|
||
|
||
// 合并过滤逻辑：过滤出 Temperature 不为 0 且 Name 在 sensorList 中的元素（忽略大小写）
|
||
const filtered = temperatureList.filter(item => item.Temperature !== 0 && lowerCaseSensorList.includes(item.Name.toLowerCase()));
|
||
//console.log('filtered:',filtered);
|
||
|
||
// 如果有匹配的元素，则计算这些元素的 Temperature 的最大值
|
||
if (filtered.length > 0) {
|
||
return filtered.reduce((max, current) => {
|
||
return current.Temperature > max ? current.Temperature : max;
|
||
}, filtered[0].Temperature);
|
||
}
|
||
|
||
// 如果没有匹配的元素，则计算 temperatureList 中所有 Temperature 不为 0 的元素的最大值
|
||
const nonZeroTemps = temperatureList.filter(item => item.Temperature !== 0);
|
||
//console.log('nonZeroTemps:',nonZeroTemps);
|
||
|
||
if (nonZeroTemps.length > 0) {
|
||
return nonZeroTemps.reduce((max, current) => {
|
||
return current.Temperature > max ? current.Temperature : max;
|
||
}, nonZeroTemps[0].Temperature);
|
||
}
|
||
|
||
// 如果所有元素的 Temperature 都为 0，则返回一个默认值 0
|
||
return 0;
|
||
}
|
||
}
|
||
})
|
||
|
||
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}} |