Merge branch 'xykt-master'
This commit is contained in:
		
						commit
						8b5d513c6a
					
				
							
								
								
									
										15
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										15
									
								
								README.md
									
									
									
									
									
								
							@ -47,25 +47,27 @@ You can change the dashboard language in the settings page (`/setting`) after th
 | 
			
		||||
<a href="https://github.com/lemoeo" title="Lemoe"><img src="https://avatars.githubusercontent.com/u/18618627?v=4" width="50;" alt="Lemoe"/></a>
 | 
			
		||||
<a href="https://github.com/cantoblanco" title="Kris"><img src="https://avatars.githubusercontent.com/u/116849421?v=4" width="50;" alt="Kris"/></a>
 | 
			
		||||
<a href="https://github.com/nap0o" title="nap0o"><img src="https://avatars.githubusercontent.com/u/144927971?v=4" width="50;" alt="nap0o"/></a>
 | 
			
		||||
<a href="https://github.com/spiritLHLS" title="spiritlhl"><img src="https://avatars.githubusercontent.com/u/103393591?v=4" width="50;" alt="spiritlhl"/></a>
 | 
			
		||||
<a href="https://github.com/liuyanxi975" title="刘颜溪"><img src="https://avatars.githubusercontent.com/u/24417037?v=4" width="50;" alt="刘颜溪"/></a>
 | 
			
		||||
<a href="https://github.com/CosmosZ-code" title="CosmosZ-code"><img src="https://avatars.githubusercontent.com/u/81398224?v=4" width="50;" alt="CosmosZ-code"/></a>
 | 
			
		||||
<a href="https://github.com/uubulb" title="UUBulb"><img src="https://avatars.githubusercontent.com/u/35923940?v=4" width="50;" alt="UUBulb"/></a>
 | 
			
		||||
<a href="https://github.com/lvgj-stack" title="Ko no dio"><img src="https://avatars.githubusercontent.com/u/38449861?v=4" width="50;" alt="Ko no dio"/></a>
 | 
			
		||||
<a href="https://github.com/hhhkkk520" title="Kris"><img src="https://avatars.githubusercontent.com/u/52115472?v=4" width="50;" alt="Kris"/></a>
 | 
			
		||||
<a href="https://github.com/liuyanxi975" title="刘颜溪"><img src="https://avatars.githubusercontent.com/u/24417037?v=4" width="50;" alt="刘颜溪"/></a>
 | 
			
		||||
<a href="https://github.com/spiritLHLS" title="spiritlhl"><img src="https://avatars.githubusercontent.com/u/103393591?v=4" width="50;" alt="spiritlhl"/></a>
 | 
			
		||||
<a href="https://github.com/1ridic" title="1ridic"><img src="https://avatars.githubusercontent.com/u/88495501?v=4" width="50;" alt="1ridic"/></a>
 | 
			
		||||
<a href="https://github.com/hhhkkk520" title="Kris"><img src="https://avatars.githubusercontent.com/u/52115472?v=4" width="50;" alt="Kris"/></a>
 | 
			
		||||
<a href="https://github.com/lvgj-stack" title="Ko no dio"><img src="https://avatars.githubusercontent.com/u/38449861?v=4" width="50;" alt="Ko no dio"/></a>
 | 
			
		||||
<a href="https://github.com/uubulb" title="UUBulb"><img src="https://avatars.githubusercontent.com/u/35923940?v=4" width="50;" alt="UUBulb"/></a>
 | 
			
		||||
<a href="https://github.com/Mmx233" title="Mmx"><img src="https://avatars.githubusercontent.com/u/36563672?v=4" width="50;" alt="Mmx"/></a>
 | 
			
		||||
<a href="https://github.com/rootmelo92118" title="rootmelo92118"><img src="https://avatars.githubusercontent.com/u/32770959?v=4" width="50;" alt="rootmelo92118"/></a>
 | 
			
		||||
<a href="https://github.com/xykt" title="xykt"><img src="https://avatars.githubusercontent.com/u/152045469?v=4" width="50;" alt="xykt"/></a>
 | 
			
		||||
<a href="https://github.com/iilemon" title="Sean"><img src="https://avatars.githubusercontent.com/u/33201711?v=4" width="50;" alt="Sean"/></a>
 | 
			
		||||
<a href="https://github.com/fscarmen" title="fscarmen"><img src="https://avatars.githubusercontent.com/u/62703343?v=4" width="50;" alt="fscarmen"/></a>
 | 
			
		||||
<a href="https://github.com/ch8o" title="no-name-now"><img src="https://avatars.githubusercontent.com/u/9103372?v=4" width="50;" alt="no-name-now"/></a>
 | 
			
		||||
<a href="https://github.com/HsukqiLee" title="HsukqiLee"><img src="https://avatars.githubusercontent.com/u/79034142?v=4" width="50;" alt="HsukqiLee"/></a>
 | 
			
		||||
<a href="https://github.com/DarcJC" title="Darc Z."><img src="https://avatars.githubusercontent.com/u/53445798?v=4" width="50;" alt="Darc Z."/></a>
 | 
			
		||||
<a href="https://github.com/Creling" title="Creling"><img src="https://avatars.githubusercontent.com/u/43109504?v=4" width="50;" alt="Creling"/></a>
 | 
			
		||||
<a href="https://github.com/coreff" title="Core F"><img src="https://avatars.githubusercontent.com/u/38347122?v=4" width="50;" alt="Core F"/></a>
 | 
			
		||||
<a href="https://github.com/colour93" title="玖叁"><img src="https://avatars.githubusercontent.com/u/64313711?v=4" width="50;" alt="玖叁"/></a>
 | 
			
		||||
<a href="https://github.com/arkylin" title="凌"><img src="https://avatars.githubusercontent.com/u/35104502?v=4" width="50;" alt="凌"/></a>
 | 
			
		||||
<a href="https://github.com/ysicing" title="缘生"><img src="https://avatars.githubusercontent.com/u/8605565?v=4" width="50;" alt="缘生"/></a>
 | 
			
		||||
<a href="https://github.com/xykt" title="xykt"><img src="https://avatars.githubusercontent.com/u/152045469?v=4" width="50;" alt="xykt"/></a>
 | 
			
		||||
<a href="https://github.com/sunnywangzi" title="wang"><img src="https://avatars.githubusercontent.com/u/88769439?v=4" width="50;" alt="wang"/></a>
 | 
			
		||||
<a href="https://github.com/unclezs" title="unclezs"><img src="https://avatars.githubusercontent.com/u/42318775?v=4" width="50;" alt="unclezs"/></a>
 | 
			
		||||
<a href="https://github.com/yuanweize" title="I"><img src="https://avatars.githubusercontent.com/u/30067203?v=4" width="50;" alt="I"/></a>
 | 
			
		||||
<a href="https://github.com/guoyongchang" title="guoyongchang"><img src="https://avatars.githubusercontent.com/u/10484506?v=4" width="50;" alt="guoyongchang"/></a>
 | 
			
		||||
@ -76,7 +78,6 @@ You can change the dashboard language in the settings page (`/setting`) after th
 | 
			
		||||
<a href="https://github.com/MartijnLindeman" title="Martijn Lindeman"><img src="https://avatars.githubusercontent.com/u/78365708?v=4" width="50;" alt="Martijn Lindeman"/></a>
 | 
			
		||||
<a href="https://github.com/KorenKrita" title="KorenKrita"><img src="https://avatars.githubusercontent.com/u/22239339?v=4" width="50;" alt="KorenKrita"/></a>
 | 
			
		||||
<a href="https://github.com/techotaku" title="Ian Li"><img src="https://avatars.githubusercontent.com/u/1948179?v=4" width="50;" alt="Ian Li"/></a>
 | 
			
		||||
<a href="https://github.com/HsukqiLee" title="HsukqiLee"><img src="https://avatars.githubusercontent.com/u/79034142?v=4" width="50;" alt="HsukqiLee"/></a>
 | 
			
		||||
<a href="https://github.com/GreenTeodoro839" title="GreenTeodoro839"><img src="https://avatars.githubusercontent.com/u/77104800?v=4" width="50;" alt="GreenTeodoro839"/></a>
 | 
			
		||||
<a href="https://github.com/Es-dese" title="Esdese"><img src="https://avatars.githubusercontent.com/u/71542548?v=4" width="50;" alt="Esdese"/></a>
 | 
			
		||||
<a href="https://github.com/wwng2333" title="Crazy"><img src="https://avatars.githubusercontent.com/u/17147265?v=4" width="50;" alt="Crazy"/></a><!--GAMFC_DELIMITER_END-->
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										75
									
								
								resource/template/theme-daynight/network.html
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										75
									
								
								resource/template/theme-daynight/network.html
									
									
									
									
										vendored
									
									
								
							@ -53,7 +53,7 @@
 | 
			
		||||
 | 
			
		||||
    <main>
 | 
			
		||||
        <div id="network">
 | 
			
		||||
        <div class="server-info-container" v-for='server in servers' :id="server.ID" style="font-size: .6em">
 | 
			
		||||
            <div class="server-info-container" v-for='server in servers' :id="server.ID">
 | 
			
		||||
                <div class="info-body" @click="redirectNetwork(server.ID)">
 | 
			
		||||
                    <ul class="server-info-body-container">
 | 
			
		||||
                        <li>
 | 
			
		||||
@ -93,7 +93,8 @@
 | 
			
		||||
 | 
			
		||||
    <footer>
 | 
			
		||||
        <div class="footer-container">
 | 
			
		||||
        <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} · {{.Version}}</a>
 | 
			
		||||
            <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} ·
 | 
			
		||||
                    {{.Version}}</a>
 | 
			
		||||
                <p>© <span id="copyright-date">
 | 
			
		||||
                        <script>document.getElementById('copyright-date').appendChild(document.createTextNode(new Date().getFullYear()))</script>
 | 
			
		||||
                    </span> · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a>
 | 
			
		||||
@ -104,17 +105,16 @@
 | 
			
		||||
 | 
			
		||||
    <script src="/static/theme-daynight/js/main.js?v202102012266"></script>
 | 
			
		||||
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.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
 | 
			
		||||
        src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
 | 
			
		||||
 | 
			
		||||
    <script>
 | 
			
		||||
        const monitorInfo = JSON.parse('{{.MonitorInfos}}');
 | 
			
		||||
        const initData = JSON.parse('{{.Servers}}').servers;
 | 
			
		||||
        let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
 | 
			
		||||
	    if (MaxTCPPingValue == null) {
 | 
			
		||||
	        MaxTCPPingValue = 1000;
 | 
			
		||||
	    }
 | 
			
		||||
        // 基于准备好的dom,初始化echarts实例
 | 
			
		||||
        var myChart = echarts.init(document.getElementById('monitor-info-container'));
 | 
			
		||||
        const myChart = echarts.init(document.getElementById('monitor-info-container'));
 | 
			
		||||
 | 
			
		||||
        // 使用刚指定的配置项和数据显示图表。
 | 
			
		||||
        var statusCards = new Vue({
 | 
			
		||||
            el: '#network',
 | 
			
		||||
@ -212,17 +212,36 @@
 | 
			
		||||
                parseMonitorInfo(monitorInfo) {
 | 
			
		||||
                    let tSeries = [];
 | 
			
		||||
                    let tLegendData = [];
 | 
			
		||||
                    var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
 | 
			
		||||
                    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 = monitorInfo.result[i].avg_delay[j];
 | 
			
		||||
                            if (avgDelay > 0.9 * MaxTCPPingValue) {
 | 
			
		||||
                                loss += 1
 | 
			
		||||
                            }
 | 
			
		||||
                            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({
 | 
			
		||||
                                    xAxis: monitorInfo.result[i].created_at[j],
 | 
			
		||||
                                    label: { show: false },
 | 
			
		||||
                                    emphasis: { disabled: true },
 | 
			
		||||
                                    lineStyle: {
 | 
			
		||||
                                        type: "solid",
 | 
			
		||||
                                        color: rgbaColorBar
 | 
			
		||||
                                    }
 | 
			
		||||
                                });
 | 
			
		||||
                            }
 | 
			
		||||
                        }
 | 
			
		||||
                        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({
 | 
			
		||||
@ -230,22 +249,28 @@
 | 
			
		||||
                            type: 'line',
 | 
			
		||||
                            smooth: true,
 | 
			
		||||
                            symbol: 'none',
 | 
			
		||||
                                data: data
 | 
			
		||||
                            data: data,
 | 
			
		||||
                            markLine: {
 | 
			
		||||
                                symbol: "none",
 | 
			
		||||
                                symbolSize: 0,
 | 
			
		||||
                                data: datal
 | 
			
		||||
                            },
 | 
			
		||||
                            markPoint: {
 | 
			
		||||
                                data: [
 | 
			
		||||
                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
 | 
			
		||||
                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
 | 
			
		||||
                                ]
 | 
			
		||||
                            }
 | 
			
		||||
                        });
 | 
			
		||||
                    }
 | 
			
		||||
                    this.option.title.text = monitorInfo.result[0].server_name;
 | 
			
		||||
                    this.option.series = tSeries;
 | 
			
		||||
                    this.option.legend.data = tLegendData;
 | 
			
		||||
                    const hour = new Date(Date.now()).getHours()
 | 
			
		||||
                    if (hour > 17 || hour < 4) {
 | 
			
		||||
                        this.option.legend.textStyle.color = "#F1F1F2";
 | 
			
		||||
                        this.option.title.textStyle.color = "#ccc";
 | 
			
		||||
                    }
 | 
			
		||||
                    myChart.clear();
 | 
			
		||||
                    myChart.setOption(this.option);
 | 
			
		||||
                },
 | 
			
		||||
                resizeHandle() {
 | 
			
		||||
                    this.myChart.resize();
 | 
			
		||||
                    myChart.resize();
 | 
			
		||||
                },
 | 
			
		||||
            }
 | 
			
		||||
        });
 | 
			
		||||
@ -253,23 +278,23 @@
 | 
			
		||||
</body>
 | 
			
		||||
<style>
 | 
			
		||||
    #network {
 | 
			
		||||
    display: grid;
 | 
			
		||||
    /*grid-template-columns: repeat(5, 1fr);*/
 | 
			
		||||
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 | 
			
		||||
    grid-gap: 1em;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
        width: calc(100vw - 6em);
 | 
			
		||||
        max-width: 1400px;
 | 
			
		||||
        margin: 1em auto;
 | 
			
		||||
    align-content: start;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    #monitor-info-container {
 | 
			
		||||
        margin: 0em auto;
 | 
			
		||||
        align-content: start;
 | 
			
		||||
        background-color: #F1F1F2;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .server-info-container {
 | 
			
		||||
        font-size: .6em;
 | 
			
		||||
        width: fit-content;
 | 
			
		||||
        display: inline-block;
 | 
			
		||||
    }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
</html>
 | 
			
		||||
{{end}}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										37
									
								
								resource/template/theme-default/network.html
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										37
									
								
								resource/template/theme-default/network.html
									
									
									
									
										vendored
									
									
								
							@ -28,9 +28,6 @@
 | 
			
		||||
    const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
 | 
			
		||||
    const initData = JSON.parse('{{.Servers}}').servers;
 | 
			
		||||
    let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
 | 
			
		||||
    if (MaxTCPPingValue == null) {
 | 
			
		||||
        MaxTCPPingValue = 1000;
 | 
			
		||||
    }
 | 
			
		||||
    new Vue({
 | 
			
		||||
        el: '#app',
 | 
			
		||||
        delimiters: ['@#', '#@'],
 | 
			
		||||
@ -185,19 +182,36 @@
 | 
			
		||||
            parseMonitorInfo(monitorInfo) {
 | 
			
		||||
                let tSeries = [];
 | 
			
		||||
                let tLegendData = [];
 | 
			
		||||
                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
 | 
			
		||||
                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.9 * MaxTCPPingValue) {
 | 
			
		||||
                            loss += 1
 | 
			
		||||
                        }
 | 
			
		||||
                        if (avgDelay > 0) {
 | 
			
		||||
                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
 | 
			
		||||
                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
 | 
			
		||||
                        }
 | 
			
		||||
                        else {
 | 
			
		||||
                            loss += 1;
 | 
			
		||||
                            datal.push({
 | 
			
		||||
                                xAxis: monitorInfo.result[i].created_at[j],
 | 
			
		||||
                                label: { show: false },
 | 
			
		||||
                                emphasis: { disabled: true },
 | 
			
		||||
                                lineStyle: {
 | 
			
		||||
                                    type: "solid",
 | 
			
		||||
                                    color: rgbaColorBar
 | 
			
		||||
                                }
 | 
			
		||||
                            });
 | 
			
		||||
                        }
 | 
			
		||||
                    }
 | 
			
		||||
                    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({
 | 
			
		||||
@ -206,10 +220,15 @@
 | 
			
		||||
                            smooth: true,
 | 
			
		||||
                            symbol: 'none',
 | 
			
		||||
                            data: data,
 | 
			
		||||
                            markLine: {
 | 
			
		||||
                                symbol: "none",
 | 
			
		||||
                                symbolSize :0,
 | 
			
		||||
                                data: datal
 | 
			
		||||
                            },
 | 
			
		||||
                            markPoint: {
 | 
			
		||||
                                data: [
 | 
			
		||||
                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
 | 
			
		||||
                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
 | 
			
		||||
                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
 | 
			
		||||
                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
 | 
			
		||||
                                ]
 | 
			
		||||
                            }
 | 
			
		||||
                    });
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										37
									
								
								resource/template/theme-mdui/network.html
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										37
									
								
								resource/template/theme-mdui/network.html
									
									
									
									
										vendored
									
									
								
							@ -55,9 +55,6 @@
 | 
			
		||||
    const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
 | 
			
		||||
    const initData = JSON.parse('{{.Servers}}').servers;
 | 
			
		||||
    let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
 | 
			
		||||
    if (MaxTCPPingValue == null) {
 | 
			
		||||
        MaxTCPPingValue = 1000;
 | 
			
		||||
    }
 | 
			
		||||
    new Vue({
 | 
			
		||||
        el: '#app',
 | 
			
		||||
        delimiters: ['@#', '#@'],
 | 
			
		||||
@ -208,19 +205,36 @@
 | 
			
		||||
            parseMonitorInfo(monitorInfo) {
 | 
			
		||||
                let tSeries = [];
 | 
			
		||||
                let tLegendData = [];
 | 
			
		||||
                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
 | 
			
		||||
                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.9 * MaxTCPPingValue) {
 | 
			
		||||
                            loss += 1
 | 
			
		||||
                        }
 | 
			
		||||
                        if (avgDelay > 0) {
 | 
			
		||||
                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
 | 
			
		||||
                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
 | 
			
		||||
                        }
 | 
			
		||||
                        else {
 | 
			
		||||
                            loss += 1;
 | 
			
		||||
                            datal.push({
 | 
			
		||||
                                xAxis: monitorInfo.result[i].created_at[j],
 | 
			
		||||
                                label: { show: false },
 | 
			
		||||
                                emphasis: { disabled: true },
 | 
			
		||||
                                lineStyle: {
 | 
			
		||||
                                    type: "solid",
 | 
			
		||||
                                    color: rgbaColorBar
 | 
			
		||||
                                }
 | 
			
		||||
                            });
 | 
			
		||||
                        }
 | 
			
		||||
                    }
 | 
			
		||||
                    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({
 | 
			
		||||
@ -229,10 +243,15 @@
 | 
			
		||||
                            smooth: true,
 | 
			
		||||
                            symbol: 'none',
 | 
			
		||||
                            data: data,
 | 
			
		||||
                            markLine: {
 | 
			
		||||
                                symbol: "none",
 | 
			
		||||
                                symbolSize :0,
 | 
			
		||||
                                data: datal
 | 
			
		||||
                            },
 | 
			
		||||
                            markPoint: {
 | 
			
		||||
                                data: [
 | 
			
		||||
                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
 | 
			
		||||
                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
 | 
			
		||||
                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
 | 
			
		||||
                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
 | 
			
		||||
                                ]
 | 
			
		||||
                            }
 | 
			
		||||
                    });
 | 
			
		||||
 | 
			
		||||
@ -22,9 +22,6 @@
 | 
			
		||||
    const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
 | 
			
		||||
    const initData = JSON.parse('{{.Servers}}').servers;
 | 
			
		||||
    let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
 | 
			
		||||
    if (MaxTCPPingValue == null) {
 | 
			
		||||
        MaxTCPPingValue = 1000;
 | 
			
		||||
    }
 | 
			
		||||
    new Vue({
 | 
			
		||||
        el: '#app',
 | 
			
		||||
        delimiters: ['@#', '#@'],
 | 
			
		||||
@ -171,19 +168,36 @@
 | 
			
		||||
            parseMonitorInfo(monitorInfo) {
 | 
			
		||||
                let tSeries = [];
 | 
			
		||||
                let tLegendData = [];
 | 
			
		||||
                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
 | 
			
		||||
                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.9 * MaxTCPPingValue) {
 | 
			
		||||
                            loss += 1
 | 
			
		||||
                        }
 | 
			
		||||
                        if (avgDelay > 0) {
 | 
			
		||||
                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
 | 
			
		||||
                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
 | 
			
		||||
                        }
 | 
			
		||||
                        else {
 | 
			
		||||
                            loss += 1;
 | 
			
		||||
                            datal.push({
 | 
			
		||||
                                xAxis: monitorInfo.result[i].created_at[j],
 | 
			
		||||
                                label: { show: false },
 | 
			
		||||
                                emphasis: { disabled: true },
 | 
			
		||||
                                lineStyle: {
 | 
			
		||||
                                    type: "solid",
 | 
			
		||||
                                    color: rgbaColorBar
 | 
			
		||||
                                }
 | 
			
		||||
                            });
 | 
			
		||||
                        }
 | 
			
		||||
                    }
 | 
			
		||||
                    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({
 | 
			
		||||
@ -192,10 +206,15 @@
 | 
			
		||||
                            smooth: true,
 | 
			
		||||
                            symbol: 'none',
 | 
			
		||||
                            data: data,
 | 
			
		||||
                            markLine: {
 | 
			
		||||
                                symbol: "none",
 | 
			
		||||
                                symbolSize :0,
 | 
			
		||||
                                data: datal
 | 
			
		||||
                            },
 | 
			
		||||
                            markPoint: {
 | 
			
		||||
                                data: [
 | 
			
		||||
                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
 | 
			
		||||
                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
 | 
			
		||||
                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
 | 
			
		||||
                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
 | 
			
		||||
                                ]
 | 
			
		||||
                            }
 | 
			
		||||
                    });
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user