优化server-status主题服务页 (#382)

resource/static/theme-server-status/js/mixin.js

@@ -27,6 +27,9 @@ const mixinsVue = {
         toggleView() {
             this.showGroup = !this.showGroup;
             localStorage.setItem("showGroup", JSON.stringify(this.showGroup));
+            if(this.$root.page == 'service') {
+                this.$root.initTooltip();
+            }
             return this.showGroup;
         },
         storedShowGroup() {

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

@@ -21,7 +21,7 @@
     <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
     <script src="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script>
     <script src="https://unpkg.com/echarts@4.9.0/map/js/world.js"></script>
-    <script src="/static/theme-server-status/js/mixin.js?v20240302"></script>
+    <script src="/static/theme-server-status/js/mixin.js?v20240630"></script>
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="/static/theme-server-status/js/html5shiv.js"></script>

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

@@ -4,18 +4,24 @@
     {{template "theme-server-status/content-nav" .}}
     <!--  showGroup true -->
     <template v-if="showGroup">
-        <section class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
+        <section v-if="servicesTag.length === 0" class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
+            <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
+        </section>
+        <section v-else class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
             {{template "theme-server-status/service-group-true" .}} 
         </section>
     </template>
     <!--  showGroup false -->
     <template v-else>
-        <section class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
+        <section v-if="servicesNoTag.length === 0" class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
+            <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
+        </section>
+        <section v-else class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
             {{template "theme-server-status/service-group-false" .}}
         </section>
     </template>
-    <section class="container content table-responsive" style="max-width: 95vw">
     {{if .CycleTransferStats}}
+        <section class="container content table-responsive" style="max-width: 95vw">
             <table class="table table-striped table-condensed table-hover">
                 <thead>
                     <tr class="node-group-tag">
@@ -62,16 +68,10 @@
                     {{end}}
                 </tbody>
             </table>
-        {{end}}
         </section>
+    {{end}}
     {{template "theme-server-status/content-footer" .}}
 </div>
-<script>
-    // 初始化 Tooltip
-    $(document).ready(function(){
-        $('[data-toggle="tooltip"]').tooltip();
-    });
-</script>
 <script>
     new Vue({
         el: '#app',
@@ -80,13 +80,16 @@
             page: 'service',
             defaultTemplate: {{.Conf.Site.Theme}},
             templates: {{.Themes}},
+            services: {{.Services}},
             servicesTag: [],
-            servicesNoTag: [],
+            servicesNoTag: []
         },
         created() {
-            this.initData();
+            this.servicesTag = this.groupingData(this.initData(this.services),"type");
+            this.servicesNoTag = this.initData(this.services);
         },
         mounted() {
+            this.initTooltip();
         },
         mixins: [mixinsVue],
         methods: {
@@ -103,32 +106,36 @@
                 }
                 return n
             },
-            initData() {
+            initData(services) {
-                // @formatter:off
+                let nodes = [];
-                const services = []
+                for (let key in services) {
-                {{range $service := .Services}}
+                    const service = services[key];
-                services.push({
+                    let node = {
-                    type: '{{$service.Monitor.Type}}',
+                        type: service.Monitor.Type,
-                    name: '{{$service.Monitor.Name}}',
+                        name: service.Monitor.Name,
-                    currentUp: parseInt('{{$service.CurrentUp}}'),
+                        currentUp: parseInt(service.CurrentUp),
-                    currentDown: parseInt('{{$service.CurrentDown}}'),
+                        currentDown: parseInt(service.CurrentDown),
-                    totalUp: parseInt('{{$service.TotalUp}}'),
+                        totalUp: parseInt(service.TotalUp),
-                    totalDown: parseInt('{{$service.TotalDown}}'),
+                        totalDown: parseInt(service.TotalDown),
-                    delay: '{{$service.Delay}}'.replaceAll("[","").replaceAll("]","").split(" "),
+                        up: service.Up,
-                    up: '{{$service.Up}}'.replaceAll("[","").replaceAll("]","").split(" "),
+                        down: service.Down,
-                    down: '{{$service.Down}}'.replaceAll("[","").replaceAll("]","").split(" "),
+                        delay: service.Delay,
-                })
+                        avgDelay: parseInt(this.getAvgDelay(service.Delay)) + "ms",
-                {{end}}
+                        health: this.getStateInfo(this.getPercent(service.CurrentUp, service.CurrentDown)),
-                // @formatter:on
+                        totalUpTime: this.getProgressInfo(this.getPercent(service.TotalUp, service.TotalDown))
-                for (let i = 0; i < services.length; i++) {
+                    };
-                    const service = services[i];
+                    nodes.push(node);
-                    service.avgDelay = parseInt(service.delay[service.delay.length - 1]) + "ms"
+                };
-                    service.health = this.getStateInfo(this.getPercent(service.currentUp, service.currentDown))
+                for (let i = 0; i < nodes.length; i++) {
-                    service.dayDetail = this.getDayTails(service)
+                    const node = nodes[i];
-                    service.totalUpTime = this.getProgressInfo(this.getPercent(service.totalUp, service.totalDown))
+                    node.dayDetail = this.getDayTails(node)
                 }
-                this.servicesTag = this.groupingData(services,"type");
+                return nodes
-                this.servicesNoTag = services;
+            },
+            initTooltip() {
+                $(document).ready(function(){
+                    $('[data-toggle="tooltip"]').tooltip();
+                });
             },
             getPercent(up, down) {
                 if (!up) {
@@ -151,24 +158,24 @@
                 return this.toFixed2(currentUp / total * 100)
             },
             getDayTails(service) {
-                const result = []
+                const result = [];
                 for (let i = 0; i < service.up.length; i++) {
-                    const up = service.up[i]
+                    const up = service.up[i];
-                    const down = service.down[i]
+                    const down = service.down[i];
-                    const delay = service.delay[i]
+                    let delay = Number(service.delay[i]);
-                    let percent = this.getPercent(up, down)
+                    let percent = this.getPercent(up, down);
                     if (percent <= 0) {
                         percent = 0;
                     }
-                    let className = this.getStateInfo(percent).className
+                    let className = this.getStateInfo(percent).className;
-                    let available = '{{tr "Availability"}}'
+                    let available = '{{tr "Availability"}}';
-                    let averageLatency = '{{tr "AverageLatency"}}'
+                    let averageLatency = '{{tr "AverageLatency"}}';
-                    const text = `${this.beforeDay(service.up.length - i - 1)}，${available}：${percent}%，${averageLatency}：${delay}ms`
+                    const text = `${this.beforeDay(service.up.length - i - 1)}，${available}：${Number(percent).toFixed(3)}%，${averageLatency}：${Number(delay).toFixed(3)}ms`;
                     result.push({
                         text, className
-                    })
+                    });
                 }
-                return result
+                return result;
             },
             beforeDay(days) {
                 const today = new Date();
@@ -203,8 +210,9 @@
                 return result;
             },
             getProgressInfo(percent) {
-                const result = this.getStateInfo(percent)
+                const result = this.getStateInfo(percent);
                 result.style = `width: ${parseInt(percent)}%`;
+                result.percent = Number(percent).toFixed(2);
                 const className = result.className;
                 if (className === "good") {
                     result.className = 'progress-bar progress-bar-success'
@@ -218,6 +226,17 @@
                 }
                 return result
             },
+            getAvgDelay(array) {
+                const { sum, count } = array.reduce((acc, value) => {
+                    if (value !== 0) {
+                        acc.sum += value;
+                        acc.count += 1;
+                    }
+                    return acc;
+                }, { sum: 0, count: 0 });
+
+                return count > 0 ? sum / count : 0;
+            }
         }
     })
 </script>