对历史延迟图表进行了相关修复/美化工作 (#321)

* Update network.html

修复以下问题：
- 延迟默认最高300ms，超过后默认抹平
- 曲线上有很多ping值为0的无效散点，导致毛刺很多，干扰效果
- 图标的y轴比例失调，上方大片留白，大大降低了有效显示区域
- 默认只显示最近不到半小时左右的延迟表现，想看全天需要拖动，影响效果
- 曲线不显示极大极小值，不够直观

* Update config.go

修复了以下问题：
- 延迟默认最高300ms，超过后默认抹平
- 曲线上有很多ping值为0的无效散点，导致毛刺很多，干扰效果
- 图标的y轴比例失调，上方大片留白，大大降低了有效显示区域
- 默认只显示最近不到半小时左右的延迟表现，想看全天需要拖动，影响效果
- 曲线不显示极大极小值，不够直观

README.md

@@ -77,6 +77,9 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <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>
@@ -98,9 +101,6 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <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/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/Creling" title="Creling">
   <img src="https://avatars.githubusercontent.com/u/43109504?v=4" width="50;" alt="Creling"/>
 </a>

model/config.go

@@ -147,7 +147,7 @@ func (c *Config) Read(path string) error {
 		c.Location = "Asia/Shanghai"
 	}
 	if c.MaxTCPPingValue == 0 {
-		c.MaxTCPPingValue = 300
+		c.MaxTCPPingValue = 1000
 	}
 	if c.AvgPingCount == 0 {
 		c.AvgPingCount = 2

model/monitor_history.go

@@ -1,20 +1,22 @@
 package model
 
-const (
+import (
-	Cycle = iota
+	"time"
-	Hour
+
-	Day
+	"gorm.io/gorm"
-	Week
-	Month
 )
 
 // MonitorHistory 历史监控记录
 type MonitorHistory struct {
-	Common
+	ID        uint64         `gorm:"primaryKey"`
-	MonitorID uint64
+	CreatedAt time.Time      `gorm:"index;<-:create;index:idx_server_id_created_at_monitor_id_avg_delay"`
-	ServerID  uint64
+	UpdatedAt time.Time      `gorm:"autoUpdateTime"`
-	AvgDelay  float32 // 平均延迟，毫秒
+	DeletedAt gorm.DeletedAt `gorm:"index"`
-	Up        uint64  // 检查状态良好计数
+	MonitorID uint64         `gorm:"index:idx_server_id_created_at_monitor_id_avg_delay"`
-	Down      uint64  // 检查状态异常计数
+	ServerID  uint64         `gorm:"index:idx_server_id_created_at_monitor_id_avg_delay"`
+	AvgDelay  float32        `gorm:"index:idx_server_id_created_at_monitor_id_avg_delay"` // 平均延迟，毫秒
+	Up        uint64         // 检查状态良好计数
+	Down      uint64         // 检查状态异常计数
 	Data      string
 }
+

resource/template/theme-default/network.html

@@ -30,7 +30,7 @@
     const initData = JSON.parse('{{.Servers}}').servers;
     let MaxTCPPingValue = {{.MaxTCPPingValue}};
     if (MaxTCPPingValue == null) {
-        MaxTCPPingValue = 300;
+        MaxTCPPingValue = 1000;
     }
     new Vue({
         el: '#app',
@@ -77,7 +77,7 @@
                 },
                 dataZoom: [
                     {
-                        start: 94,
+                        start: 0,
                         end: 100
                     }
                 ],
@@ -87,7 +87,7 @@
                 },
                 yAxis: {
                     type: 'value',
-                    boundaryGap: [0, '100%']
+                    boundaryGap: false
                 },
                 series: [],
             },
@@ -178,11 +178,13 @@
                     let loss = 0;
                     let data = [];
                     for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                        avgDelay = monitorInfo.result[i].avg_delay[j];
+                        avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
                         if (avgDelay > 0.9 * MaxTCPPingValue) {
                             loss += 1
                         }
-                        data.push([monitorInfo.result[i].created_at[j], avgDelay]);
+                        if (avgDelay > 0) {
+                            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 + "%";
@@ -192,7 +194,13 @@
                             type: 'line',
                             smooth: true,
                             symbol: 'none',
-                            data: data
+                            data: data,
+                            markPoint: {
+                                data: [
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
+                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
+                                ]
+                            }
                     });
                 }
                 this.option.title.text = monitorInfo.result[0].server_name;