diff --git a/README.md b/README.md index 829d50e..ef42750 100644 --- a/README.md +++ b/README.md @@ -47,25 +47,27 @@ You can change the dashboard language in the settings page (`/setting`) after th Lemoe Kris nap0o -spiritlhl -刘颜溪 CosmosZ-code -UUBulb -Ko no dio -Kris +刘颜溪 +spiritlhl 1ridic +Kris +Ko no dio +UUBulb Mmx rootmelo92118 +xykt Sean fscarmen no-name-now +HsukqiLee Darc Z. Creling Core F 玖叁 凌 缘生 -xykt +wang unclezs I guoyongchang @@ -76,7 +78,6 @@ You can change the dashboard language in the settings page (`/setting`) after th Martijn Lindeman KorenKrita Ian Li -HsukqiLee GreenTeodoro839 Esdese Crazy diff --git a/resource/template/theme-daynight/network.html b/resource/template/theme-daynight/network.html index b413673..5976f85 100644 --- a/resource/template/theme-daynight/network.html +++ b/resource/template/theme-daynight/network.html @@ -20,101 +20,101 @@ -
-
- -
-
-
-
+
+
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
    +
  • +

    @#server.Name#@

    +
    • +
    • +
- -
-
- -
-
-
-
-
    -
  • -

    @#server.Name#@

    -
    • -
    • -
+
+
-
-
-
+
+
    +
  • {{tr "LightMode"}}
    • +
  • {{tr "DarkMode"}}
    • +
  • {{tr "GridLayout"}}
    • +
  • {{tr "ListLayout"}}
    • +
-
-
-
    -
  • {{tr "LightMode"}}
    • -
  • {{tr "DarkMode"}}
    • -
  • {{tr "GridLayout"}}
    • -
  • {{tr "ListLayout"}}
    • -
-
-
+ -
- -
+
+ +
- - + + - + - - - + + + - -{{end}} - +{{end}} \ No newline at end of file diff --git a/resource/template/theme-default/network.html b/resource/template/theme-default/network.html index b3ecf59..d7490b6 100644 --- a/resource/template/theme-default/network.html +++ b/resource/template/theme-default/network.html @@ -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 } ] } }); diff --git a/resource/template/theme-mdui/network.html b/resource/template/theme-mdui/network.html index 9bd54a2..5e9a6e3 100644 --- a/resource/template/theme-mdui/network.html +++ b/resource/template/theme-mdui/network.html @@ -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' } } + 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 } ] } }); diff --git a/resource/template/theme-server-status/network.html b/resource/template/theme-server-status/network.html index 0d4487c..1c2dea5 100644 --- a/resource/template/theme-server-status/network.html +++ b/resource/template/theme-server-status/network.html @@ -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 } ] } });