{{define "theme-server-status/network"}} {{template "theme-server-status/header" .}} <div id="app"> {{template "theme-server-status/content-nav" .}} <div class="container table-responsive content" style="max-width: 95vw"> <table class="table table-striped table-condensed table-hover"> <button class="ui nezha-primary-btn button" v-for="server in servers" style="margin-top: 3px" @click="redirectNetwork(server.ID)"> @#server.Name#@ <i :class="'fi fi-' + server.Host.CountryCode"></i><span class="node-cell-location-text text-uppercase"> @#server.Host.CountryCode#@</span> </button> </table> </div> <div class="container table-responsive content" style="max-width: 95vw"> <div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div> </div> {{template "theme-server-status/content-footer" .}} </div> <script> const monitorInfo = JSON.parse('{{.MonitorInfos}}'); const initData = JSON.parse('{{.Servers}}').servers; let MaxTCPPingValue = {{.MaxTCPPingValue}}; if (MaxTCPPingValue == null) { MaxTCPPingValue = 300; } new Vue({ el: '#app', delimiters: ['@#', '#@'], data: { servers: initData, option: { tooltip: { trigger: 'axis', position: function (pt) { 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: { left: 'center', text: "", textStyle: {} }, legend: { top: '5%', data: [], textStyle: { fontSize: 14 } }, backgroundColor: 'rgba(255, 255, 255, 0.8)', toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, dataZoom: [ { start: 94, end: 100 } ], xAxis: { type: 'time', boundaryGap: false }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, series: [], }, chartOnOff: true, }, mixins: [mixinsVue], created() { this.initTheme(); }, mounted() { this.renderChart(); this.parseMonitorInfo(monitorInfo); }, 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) .then(function(monitorInfo) { var vm = app.__vue__; vm.parseMonitorInfo(monitorInfo); }) .catch(function(error){ window.location.href = "/404"; }) }, getMonitorHistory(id) { return $.ajax({ url: "/api/v1/monitor/"+id, method: "GET" }); }, parseMonitorInfo(monitorInfo) { let tSeries = []; let tLegendData = []; for (let i = 0; i < monitorInfo.result.length; i++) { let loss = 0; let data = []; for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) { avgDelay = monitorInfo.result[i].avg_delay[j]; if (avgDelay > 0.9 * MaxTCPPingValue) { loss += 1 } data.push([monitorInfo.result[i].created_at[j], avgDelay]); } lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1); legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%"; tLegendData.push(legendName); tSeries.push({ name: legendName, type: 'line', smooth: true, symbol: 'none', data: data }); } this.option.title.text = monitorInfo.result[0].server_name; this.option.series = tSeries; this.option.legend.data = tLegendData; this.myChart.clear(); this.myChart.setOption(this.option); }, isWindowsPlatform(str) { return str.includes('Windows') }, renderChart() { this.myChart = echarts.init(this.$refs.chartDom); this.myChart.setOption(this.option); }, }, beforeDestroy() { this.myChart.dispose(); this.myChart = null; }, }); </script> {{template "theme-server-status/footer" .}} {{end}}