增加了网络页面对 Neko Meui 主题的支持 (#322)

* 修改 Neko-mdui 主题的菜单栏

增加了“网络”选项卡

* 增加 Neko-mdui 主题的网络页面

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 (
+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-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-mdui/menu.html

@@ -12,6 +12,7 @@
       {{else}}
       <a href="/" class='mdui-ripple mdui-ripple-white mdui-hoverable{{if eq .MatchedPath "/"}} mdui-tab-active{{end}}'><i class="mdui-icon material-icons">home</i>{{tr "Home"}}</a>
       <a href="/service" class='mdui-ripple mdui-ripple-white mdui-hoverable{{if eq .MatchedPath "/service"}} mdui-tab-active{{end}}'><i class="mdui-icon material-icons">accessibility</i>{{tr "Services"}}</a>
+      <a href="/network" class='mdui-ripple mdui-ripple-white mdui-hoverable{{if eq .MatchedPath "/network"}} mdui-tab-active{{end}}'><i class="mdui-icon material-icons">network_check</i>{{tr "NetworkSpiter"}}</a>
       {{end}}
       <div class="mdui-toolbar-spacer"></div>
       {{if .Admin}}

resource/template/theme-mdui/network.html

@@ -0,0 +1,255 @@
+{{define "theme-mdui/network"}}
+<!doctype html>
+<html lang="{{.Conf.Language}}">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>{{.Title}}</title>
+  <link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" />
+
+  <!-- MDUI CSS -->
+  <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/mdui/1.0.2/css/mdui.min.css"/>
+  <link rel="stylesheet" href="/static/theme-mdui/mdui.css" type="text/css">
+  <style>
+	.mdui-table td, .mdui-table th{padding: 6px;}
+	.progress{width: 10%;min-width: 75px;}
+	.progress-text{font-size: 16px;font-weight: 800;position: relative;top: 4px;left: 6px;}
+	.offline st,.offline at,.offline gt,.offline .progress-text{color: grey;}
+	a{text-decoration:none;color:#333;}.mdui-theme-layout-dark a{color:#fff;}
+  </style>
+  {{if ts .CustomCode}}
+  {{.CustomCode|safe}}
+  {{end}}
+</head>
+
+<body>
+{{template "theme-mdui/menu" .}}
+<div class="nb-container" id="app">
+    <div class="ui container">
+        <div class="service-status">
+            <table class="ui celled table">
+                <button
+                    v-for="server in servers"
+                    @click="redirectNetwork(server.ID)"
+                    class="mdui-btn mdui-btn-raised mdui-color-theme mdui-color-indigo mdui-text-color-white"
+                    style="margin-top: 6px;margin-left:5px">
+                    <img :src="'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/flag-icon-css/4.1.5/flags/4x3/' + (server.Host.CountryCode?server.Host.CountryCode:'cn') + '.svg'" alt="Flag Icon" style="vertical-align: middle;height:14px"> <span>@#server.Name#@ &nbsp;</span></button>
+            </table>
+        </div>
+    </div>
+    <div class="ui container" style="max-width: 95vw">
+        <div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
+    </div>
+</div>
+
+{{template "theme-mdui/footer" .}}
+  <script src="/static/theme-mdui/mdui.js"></script>
+  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/mdui/1.0.2/js/mdui.min.js"></script>
+  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.6.0/jquery.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="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
+
+<script>
+    const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
+    const initData = JSON.parse('{{.Servers}}').servers;
+    let MaxTCPPingValue = {{.MaxTCPPingValue}};
+    if (MaxTCPPingValue == null) {
+        MaxTCPPingValue = 1000;
+    }
+    new Vue({
+        el: '#app',
+        delimiters: ['@#', '#@'],
+        data: {
+            servers: initData,
+            option: {
+                tooltip: {
+                    trigger: 'axis',
+                    position: function (pt) {
+                        return [pt[0], '10%'];
+                    },
+                    formatter: function(params){
+                        let result = params[0].axisValueLabel + "<br />";
+                        params.forEach(function(item){
+                            result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
+                         })
+                        return result;
+                    },
+                    confine: true,
+                    transitionDuration: 0
+                },
+                title: {
+                    left: 'center',
+                    text: "",
+                    textStyle: {}
+                },
+                legend: {
+                    top: '5%',
+                    data: [],
+                    textStyle: {
+                        fontSize: 14
+                    }
+                },
+                backgroundColor: 'rgba(255, 255, 255, 0.8)',
+                toolbox: {
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: 'none'
+                        },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                dataZoom: [
+                    {
+                        start: 0,
+                        end: 100
+                    }
+                ],
+                xAxis: {
+                    type: 'time',
+                    boundaryGap: false
+                },
+                yAxis: {
+                    type: 'value',
+                    boundaryGap: false
+                },
+                series: [],
+            },
+            chartOnOff: true,
+        },
+        mounted() {
+            this.renderChart();
+             this.parseMonitorInfo(monitorInfo);
+        },
+        methods: {
+            getFontLogoClass(str) {
+                if (["almalinux",
+                        "alpine",
+                        "aosc",
+                        "apple",
+                        "archlinux",
+                        "archlabs",
+                        "artix",
+                        "budgie",
+                        "centos",
+                        "coreos",
+                        "debian",
+                        "deepin",
+                        "devuan",
+                        "docker",
+                        "elementary",
+                        "fedora",
+                        "ferris",
+                        "flathub",
+                        "freebsd",
+                        "gentoo",
+                        "gnu-guix",
+                        "illumos",
+                        "kali-linux",
+                        "linuxmint",
+                        "mageia",
+                        "mandriva",
+                        "manjaro",
+                        "nixos",
+                        "openbsd",
+                        "opensuse",
+                        "pop-os",
+                        "raspberry-pi",
+                        "redhat",
+                        "rocky-linux",
+                        "sabayon",
+                        "slackware",
+                        "snappy",
+                        "solus",
+                        "tux",
+                        "ubuntu",
+                        "void",
+                        "zorin"].indexOf(str)
+                    > -1) {
+                    return str;
+                }
+                if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
+                    return 'tux';
+                }
+                if (str == 'amazon') {
+                    return 'redhat';
+                }
+                if (str == 'arch') {
+                    return 'archlinux';
+                }
+                return '';
+            },
+            redirectNetwork(id) {
+                    this.getMonitorHistory(id)
+                    .then(function(monitorInfo) {
+                          var vm = app.__vue__;
+                          vm.parseMonitorInfo(monitorInfo);
+                    })
+                    .catch(function(error){
+                        window.location.href = "/404";
+                    })
+                },
+            getMonitorHistory(id) {
+                  return $.ajax({
+                    url: "/api/v1/monitor/"+id,
+                    method: "GET"
+                  });
+            },
+            parseMonitorInfo(monitorInfo) {
+                let tSeries = [];
+                let tLegendData = [];
+                for (let i = 0; i < monitorInfo.result.length; i++) {
+                    let loss = 0;
+                    let data = [];
+                    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) {
+                            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 + "%";
+                    tLegendData.push(legendName);
+                    tSeries.push({
+                            name: legendName,
+                            type: 'line',
+                            smooth: true,
+                            symbol: 'none',
+                            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;
+                this.option.series = tSeries;
+                this.option.legend.data = tLegendData;
+                this.myChart.clear();
+                this.myChart.setOption(this.option);
+            },
+            isWindowsPlatform(str) {
+                return str.includes('Windows')
+            },
+            renderChart() {
+              this.myChart = echarts.init(this.$refs.chartDom);
+              this.myChart.setOption(this.option);
+            },
+        },
+        beforeDestroy() {
+            this.myChart.dispose();
+            this.myChart = null;
+        },
+    });
+</script>
+
+</body>
+</html>
+{{end}}

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