对历史延迟图表进行了相关修复/美化工作 (#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>
@@ -140,9 +143,6 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <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/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/techotaku" title="Ian Li">
   <img src="https://avatars.githubusercontent.com/u/1948179?v=4" width="50;" alt="Ian Li"/>
 </a>

cmd/dashboard/controller/common_page.go

@@ -118,6 +118,11 @@ func (p *commonPage) service(c *gin.Context) {
 		var statsStore map[uint64]model.CycleTransferStats
 		copier.Copy(&stats, singleton.ServiceSentinelShared.LoadStats())
 		copier.Copy(&statsStore, singleton.AlertsCycleTransferStatsStore)
+		for k, service := range stats {
+			if !service.Monitor.EnableShowInService {
+				delete(stats, k)
+			}
+		}
 		return []interface {
 		}{
 			stats, statsStore,

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 (
-	Cycle = iota
-	Hour
-	Day
-	Week
-	Month
+import (
+	"time"
+
+	"gorm.io/gorm"
 )
 
 // MonitorHistory 历史监控记录
 type MonitorHistory struct {
-	Common
-	MonitorID uint64
-	ServerID  uint64
-	AvgDelay  float32 // 平均延迟，毫秒
-	Up        uint64  // 检查状态良好计数
-	Down      uint64  // 检查状态异常计数
+	ID        uint64         `gorm:"primaryKey"`
+	CreatedAt time.Time      `gorm:"index;<-:create;index:idx_server_id_created_at_monitor_id_avg_delay"`
+	UpdatedAt time.Time      `gorm:"autoUpdateTime"`
+	DeletedAt gorm.DeletedAt `gorm:"index"`
+	MonitorID uint64         `gorm:"index:idx_server_id_created_at_monitor_id_avg_delay"`
+	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-daynight/service.html

@@ -61,7 +61,6 @@
         </section>
         <section class="monitor-container">
           {{range $service := .Services}}
-          {{if $service.Monitor.EnableShowInService}}
           <section class="monitor-info-container">
             <div class="monitor-state">
               <span class="monitor-state-dot {{className (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}"></span>
@@ -83,7 +82,6 @@
             </div>
           </section>
             {{end}}
-          {{end}}
         </section>
         {{if .CycleTransferStats}}
     <h2 class="mdui-m-t-5 mdui-text-center">{{tr "CycleTransferStats"}}</h2>

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;

resource/template/theme-default/service.html

@@ -18,7 +18,6 @@
                 </thead>
                 <tbody>
                     {{range $service := .Services}}
-                    {{if $service.Monitor.EnableShowInService}}
                     <tr>
                         <td class="ui center aligned">{{$service.Monitor.Name}}</td>
                         <td class="ui center aligned">
@@ -34,7 +33,7 @@
                                 class="delay-today {{className (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}"></i>
                             {{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}
                         </td>
-                    </tr> {{end}} {{end}}
+                    </tr> {{end}}
                 </tbody>
             </table>
 

resource/template/theme-server-status/service.html

@@ -15,7 +15,7 @@
             </thead>
             <tbody id="servers">
             <template v-for="service in services">
-                <tr v-if="service.enableShow === 'true'">
+                <tr>
                     <td class="node-cell center">
                         <div class="delay-today">
                             <i class="delay-today" :class="service.health.className"></i>
@@ -137,7 +137,6 @@
                     delay: '{{$service.Delay}}'.replaceAll("[","").replaceAll("]","").split(" "),
                     up: '{{$service.Up}}'.replaceAll("[","").replaceAll("]","").split(" "),
                     down: '{{$service.Down}}'.replaceAll("[","").replaceAll("]","").split(" "),
-                    enableShow: '{{$service.Monitor.EnableShowInService}}',
                 })
                 {{end}}
                 // @formatter:on