tcjlj/nezha
1
0
Fork 0
mirror of https://github.com/nezhahq/nezha.git synced 2025-01-22 20:58:14 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update network.html

Browse Source
This commit is contained in:
xykt 2024-03-24 09:24:23 +08:00 committed by GitHub
parent 800af7ce4e
commit 9a8c0e7118
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 213 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

354
resource/template/theme-daynight/network.html vendored
View File

@ -107,145 +107,200 @@
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script> <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
<script> <script>
const monitorInfo = JSON.parse('{{.MonitorInfos}}'); const monitorInfo = JSON.parse('{{.MonitorInfos}}');
const initData = JSON.parse('{{.Servers}}').servers; const initData = JSON.parse('{{.Servers}}').servers;
let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}}; let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
if (MaxTCPPingValue == null) { if (MaxTCPPingValue == null) {
MaxTCPPingValue = 1000; MaxTCPPingValue = 1000;
} }
// 基于准备好的dom，初始化echarts实例 new Vue({
var myChart = echarts.init(document.getElementById('monitor-info-container')); el: '#app',
// 使用刚指定的配置项和数据显示图表。 delimiters: ['@#', '#@'],
var statusCards = new Vue({ data: {
el: '#network', page: 'network',
delimiters: ['@#', '#@'], defaultTemplate: {{.Conf.Site.Theme}},
data: { templates: {{.Themes}},
servers: initData, servers: initData,
cache: [], option: {
option: { tooltip: {
tooltip: { trigger: 'axis',
trigger: 'axis', position: function (pt) {
position: function (pt) { return [pt[0], '10%'];
return [pt[0], '10%'];
},
formatter: function(params){
let result = params[0].axisValueLabel + "<br />";
params.forEach(function(item){
result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
})
return result;
},
confine: true,
transitionDuration: 0
}, },
title: { formatter: function(params){
left: 'center', let result = params[0].axisValueLabel + "<br />";
text: "", params.forEach(function(item){
textStyle: {} result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
})
return result;
}, },
legend: { confine: true,
top: '5%', transitionDuration: 0
data: [], },
textStyle: { title: {
fontSize: 14 left: 'center',
} text: "",
}, textStyle: {}
toolbox: { },
feature: { legend: {
dataZoom: { top: '5%',
yAxisIndex: 'none' data: [],
}, textStyle: {
restore: {}, fontSize: 14
saveAsImage: {}
}
},
dataZoom: [
{
start: 94,
end: 100
}
],
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
series: [],
}
},
mounted() {
this.DarkMode();
this.parseMonitorInfo(monitorInfo);
window.addEventListener('resize', this.resizeHandle);
},
destroyed () {
window.removeEventListener('resize', this.resizeHandle)
},
methods: {
DarkMode() {
const hour = new Date(Date.now()).getHours()
if (hour > 17 || hour < 4) {
document.querySelector("input[name=theme]").checked = true;
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
document.getElementById("monitor-info-container").style.backgroundColor = "#1E1E1E";
} }
}, },
redirectNetwork(id) { grid: {
left: '8%',
right: '8%',
},
backgroundColor: 'rgba(255, 255, 255, 0.8)',
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [
{
start: 0,
end: 100
}
],
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: false
},
series: [],
},
chartOnOff: true,
},
mixins: [mixinsVue],
mounted() {
this.renderChart();
this.parseMonitorInfo(monitorInfo);
window.addEventListener('resize', this.resizeHandle);
},
destroyed () {
window.removeEventListener('resize', this.resizeHandle)
},
methods: {
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', "immortalwrt"].indexOf(str) > -1) {
return 'tux';
}
if (str == 'amazon') {
return 'redhat';
}
if (str == 'arch') {
return 'archlinux';
}
return '';
},
redirectNetwork(id) {
this.getMonitorHistory(id) this.getMonitorHistory(id)
.then(function(monitorInfo) { .then(function(monitorInfo) {
var vm = network.__vue__; var vm = app.__vue__;
vm.parseMonitorInfo(monitorInfo); vm.parseMonitorInfo(monitorInfo);
}) })
.catch(function(error){ .catch(function(error){
window.location.href = "/404"; window.location.href = "/404";
}) })
}, },
getMonitorHistory(id) { getMonitorHistory(id) {
return $.ajax({ return $.ajax({
url: "/api/v1/monitor/"+id, url: "/api/v1/monitor/"+id,
method: "GET" method: "GET"
}); });
}, },
parseMonitorInfo(monitorInfo) { parseMonitorInfo(monitorInfo) {
let tSeries = []; let tSeries = [];
let tLegendData = []; let tLegendData = [];
var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']; var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
let maxPing = 0; let maxPing = 0;
for (let i = 0; i < monitorInfo.result.length; i++) { for (let i = 0; i < monitorInfo.result.length; i++) {
for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) { for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]); avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) { if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
maxPing = avgDelay; maxPing = avgDelay;
} }
}
}
for (let i = 0; i < monitorInfo.result.length; i++) {
var lcolor = lcolors[i % lcolors.length];
var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
let loss = 0;
let data = [];
let datal = [];
for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
data.push([monitorInfo.result[i].created_at[j], avgDelay]);
}
else {
loss += 1;
datal.push([monitorInfo.result[i].created_at[j], maxPing]);
} }
} }
for (let i = 0; i < monitorInfo.result.length; i++) { lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
var lcolor = lcolors[i % lcolors.length]; if (lossRate > 99) {
var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)'; datal = [];
var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)'; }
let loss = 0; legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
let data = []; tLegendData.push(legendName);
let datal = []; tSeries.push({
for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
data.push([monitorInfo.result[i].created_at[j], avgDelay]);
}
else {
loss += 1;
datal.push([monitorInfo.result[i].created_at[j], maxPing]);
}
}
lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
if (lossRate > 99) {
datal = [];
}
legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
tLegendData.push(legendName);
tSeries.push({
name: legendName, name: legendName,
type: 'line', type: 'line',
smooth: true, smooth: true,
@ -257,28 +312,45 @@
{ type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 } { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
] ]
} }
}); });
tSeries.push({ tSeries.push({
name: legendName, name: legendName,
type: 'bar', type: 'bar',
smooth: true, smooth: true,
symbol: 'none', symbol: 'none',
data: datal, data: datal,
itemStyle: { color: rgbaColorBar } itemStyle: { color: rgbaColorBar }
}); });
} }
this.option.title.text = monitorInfo.result[0].server_name; this.option.title.text = monitorInfo.result[0].server_name;
this.option.series = tSeries; this.option.series = tSeries;
this.option.legend.data = tLegendData; this.option.legend.data = tLegendData;
this.myChart.clear(); this.myChart.clear();
this.myChart.setOption(this.option); this.myChart.setOption(this.option);
}, },
resizeHandle () { this.option.title.text = monitorInfo.result[0].server_name;
this.myChart.resize(); this.option.series = tSeries;
}, this.option.legend.data = tLegendData;
} this.myChart.clear();
}); this.myChart.setOption(this.option);
</script> },
isWindowsPlatform(str) {
return str.includes('Windows')
},
renderChart() {
this.myChart = echarts.init(this.$refs.chartDom);
this.myChart.setOption(this.option);
},
resizeHandle () {
this.myChart.resize();
},
},
beforeDestroy() {
this.myChart.dispose();
this.myChart = null;
},
});
</script>
</body> </body>
<style> <style>
#network { #network {