对历史延迟图表进行了相关修复/美化工作 (#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>

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,

cmd/dashboard/controller/member_api.go

@@ -394,6 +394,7 @@ type monitorForm struct {
 	MaxLatency             float32
 	LatencyNotify          string
 	EnableTriggerTask      string
+	EnableShowInService    string
 	FailTriggerTasksRaw    string
 	RecoverTriggerTasksRaw string
 }
@@ -415,6 +416,7 @@ func (ma *memberAPI) addOrEditMonitor(c *gin.Context) {
 		m.LatencyNotify = mf.LatencyNotify == "on"
 		m.MinLatency = mf.MinLatency
 		m.MaxLatency = mf.MaxLatency
+		m.EnableShowInService = mf.EnableShowInService == "on"
 		m.EnableTriggerTask = mf.EnableTriggerTask == "on"
 		m.RecoverTriggerTasksRaw = mf.RecoverTriggerTasksRaw
 		m.FailTriggerTasksRaw = mf.FailTriggerTasksRaw

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.go

@@ -50,6 +50,7 @@ type Monitor struct {
 	Cover           uint8
 
 	EnableTriggerTask      bool     `gorm:"default: false"`
+	EnableShowInService    bool     `gorm:"default: false"`
 	FailTriggerTasksRaw    string   `gorm:"default:'[]'"`
 	RecoverTriggerTasksRaw string   `gorm:"default:'[]'"`
 	FailTriggerTasks       []uint64 `gorm:"-" json:"-"` // 失败时执行的触发任务id

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/l10n/en-US.toml

@@ -611,4 +611,7 @@ other = "Hide for Guest"
 other = "Menu"
 
 [NetworkSpiter]
-other = "Network Monitor"
+other = "Network"
+
+[EnableShowInService]
+other = "Enable Show in Service"

resource/l10n/es-ES.toml

@@ -611,4 +611,7 @@ other = "Ocultar para Invitados"
 other = "Menú"
 
 [NetworkSpiter]
-other = "Supervisión De Redes"
+other = "Red"
+
+[EnableShowInService]
+other = "Mostrar en servicio"

resource/l10n/zh-CN.toml

@@ -611,4 +611,7 @@ other = "对游客隐藏"
 other = "菜单"
 
 [NetworkSpiter]
-other = "网络监控"
+other = "网络"
+
+[EnableShowInService]
+other = "在服务中显示"

resource/l10n/zh-TW.toml

@@ -611,4 +611,7 @@ other = "對遊客隱藏"
 other = "菜單"
 
 [NetworkSpiter]
-other = "網絡監控"
+other = "網絡"
+
+[EnableShowInService]
+other = "在服務中顯示"

resource/static/main.js

@@ -339,6 +339,11 @@ function addOrEditMonitor(monitor) {
   modal.find("select[name=Type]").val(monitor ? monitor.Type : 1);
   modal.find("select[name=Cover]").val(monitor ? monitor.Cover : 0);
   modal.find("input[name=NotificationTag]").val(monitor ? monitor.NotificationTag : null);
+  if (monitor && monitor.EnableShowInService) {
+    modal.find(".ui.nb-show-in-service.checkbox").checkbox("set checked")
+  } else {
+    modal.find(".ui.nb-show-in-service.checkbox").checkbox("set unchecked")
+  }
   if (monitor && monitor.Notify) {
     modal.find(".ui.nb-notify.checkbox").checkbox("set checked");
   } else {

resource/template/common/footer.html

@@ -10,7 +10,7 @@
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/semantic-ui/2.4.1/semantic.min.js"></script>
 <script src="/static/semantic-ui-alerts.min.js"></script>
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
-<script src="/static/main.js?v20230614"></script>
+<script src="/static/main.js?v20240213"></script>
 <script>
     (function () {
         updateLang({{.LANG }});

resource/template/component/monitor.html

@@ -24,6 +24,12 @@
           <option value="3">TCP-Ping</option>
         </select>
       </div>
+      <div class="field">
+        <div class="ui nb-show-in-service checkbox">
+          <input name="EnableShowInService" type="checkbox" tabindex="0" class="hidden" />
+          <label>{{tr "EnableShowInService"}}</label>
+        </div>
+      </div>
       <div class="field">
         <label>{{tr "Duration"}}</label>
         <input type="number" name="Duration" placeholder="{{tr "Seconds"}}" />
@@ -110,3 +116,4 @@
   </div>
 </div>
 {{end}}
+

resource/template/dashboard-default/monitor.html

@@ -68,4 +68,4 @@
 <script>
   $(".checkbox").checkbox();
 </script>
-{{end}}
+{{end}}

resource/template/theme-angel-kanade/footer.html

@@ -12,7 +12,7 @@
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/semantic-ui/2.4.1/semantic.min.js"></script>
 <script src="/static/semantic-ui-alerts.min.js"></script>
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
-<script src="/static/main.js?v20230614"></script>
+<script src="/static/main.js?v20240213"></script>
 <script>
     (function () {
         updateLang({{.LANG }});

resource/template/theme-daynight/service.html

@@ -81,7 +81,7 @@
               {{end}}
             </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;