From 0613b0022ddc9b99ffc258eb0e14b040cf65313e Mon Sep 17 00:00:00 2001
From: nap0o <144927971+nap0o@users.noreply.github.com>
Date: Tue, 2 Jul 2024 10:11:20 -0400
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96server-status=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E6=9C=8D=E5=8A=A1=E9=A1=B5=20(#382)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/theme-server-status/js/mixin.js    |   5 +-
 .../template/theme-server-status/header.html  |   2 +-
 .../template/theme-server-status/service.html | 215 ++++++++++--------
 3 files changed, 122 insertions(+), 100 deletions(-)

diff --git a/resource/static/theme-server-status/js/mixin.js b/resource/static/theme-server-status/js/mixin.js
index d1a94a6..6cd4c60 100644
--- a/resource/static/theme-server-status/js/mixin.js
+++ b/resource/static/theme-server-status/js/mixin.js
@@ -27,13 +27,16 @@ 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() {
             const storedShowGroup = localStorage.getItem("showGroup");
             if (storedShowGroup !== null) {
                 this.showGroup = JSON.parse(storedShowGroup);
-            }       
+            }   
         },
         toggleTemplate(template) {
             if( template != this.preferredTemplate){
diff --git a/resource/template/theme-server-status/header.html b/resource/template/theme-server-status/header.html
index 32e1e90..be98628 100644
--- a/resource/template/theme-server-status/header.html
+++ b/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>
diff --git a/resource/template/theme-server-status/service.html b/resource/template/theme-server-status/service.html
index d6a2827..a0dfec6 100644
--- a/resource/template/theme-server-status/service.html
+++ b/resource/template/theme-server-status/service.html
@@ -4,74 +4,74 @@
     {{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}}
-        <table class="table table-striped table-condensed table-hover">
-            <thead>
-                <tr class="node-group-tag">
-                    <th colspan="16" style="border:none;">
-                        {{tr "CycleTransferStats"}}
-                    </th>
-                </tr>
-                <tr class="node-group-cell">
-                    <th class="node-cell center">ID</th>
-                    <th class="node-cell center">{{tr "Rules"}}</th>
-                    <th class="node-cell center">{{tr "Server"}}</th>
-                    <th class="node-cell center">{{tr "From"}}</th>
-                    <th class="node-cell center">{{tr "To"}}</th>
-                    <th class="node-cell center">MAX</th>
-                    <th class="node-cell center">MIN</th>
-                    <th class="node-cell center">{{tr "NextCheck"}}</th>
-                    <th class="node-cell center">{{tr "CurrentUsage"}}</th>
-                    <th class="node-cell center">{{tr "Transleft"}}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {{range $id, $stats := .CycleTransferStats}}
-                {{range $innerId, $transfer := $stats.Transfer}}
-                {{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
-                <tr>
-                    <td class="node-cell center">{{$id}}</td>
-                    <td class="node-cell center">{{$stats.Name}}</td>
-                    <td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
-                    <td class="node-cell center">{{$stats.From|tf}}</td>
-                    <td class="node-cell center">{{$stats.To|tf}}</td>
-                    <td class="node-cell center">{{$stats.Max|bf}}</td>
-                    <td class="node-cell center">{{$stats.Min|bf}}</td>
-                    <td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
-                    <td class="node-cell center">{{$transfer|bf}}</td>
-                    <td class="node-cell center">
-                        <div class="progress">
-                            <div style="width: {{$TransLeftPercent}}%" :class="'progress-bar progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
-                                <small style="display: inline-block;width: max-content;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
-                            </div>
-                        </div>
-                    </td>
-                </tr>
-                {{end}}
-                {{end}}
-            </tbody>
-        </table>
-        {{end}}
-    </section>
+    {{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">
+                        <th colspan="16" style="border:none;">
+                            {{tr "CycleTransferStats"}}
+                        </th>
+                    </tr>
+                    <tr class="node-group-cell">
+                        <th class="node-cell center">ID</th>
+                        <th class="node-cell center">{{tr "Rules"}}</th>
+                        <th class="node-cell center">{{tr "Server"}}</th>
+                        <th class="node-cell center">{{tr "From"}}</th>
+                        <th class="node-cell center">{{tr "To"}}</th>
+                        <th class="node-cell center">MAX</th>
+                        <th class="node-cell center">MIN</th>
+                        <th class="node-cell center">{{tr "NextCheck"}}</th>
+                        <th class="node-cell center">{{tr "CurrentUsage"}}</th>
+                        <th class="node-cell center">{{tr "Transleft"}}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{range $id, $stats := .CycleTransferStats}}
+                        {{range $innerId, $transfer := $stats.Transfer}}
+                            {{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
+                            <tr>
+                                <td class="node-cell center">{{$id}}</td>
+                                <td class="node-cell center">{{$stats.Name}}</td>
+                                <td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
+                                <td class="node-cell center">{{$stats.From|tf}}</td>
+                                <td class="node-cell center">{{$stats.To|tf}}</td>
+                                <td class="node-cell center">{{$stats.Max|bf}}</td>
+                                <td class="node-cell center">{{$stats.Min|bf}}</td>
+                                <td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
+                                <td class="node-cell center">{{$transfer|bf}}</td>
+                                <td class="node-cell center">
+                                    <div class="progress">
+                                        <div style="width: {{$TransLeftPercent}}%" :class="'progress-bar progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
+                                            <small style="display: inline-block;width: max-content;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        {{end}}
+                    {{end}}
+                </tbody>
+            </table>
+        </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() {
-                // @formatter:off
-                const services = []
-                {{range $service := .Services}}
-                services.push({
-                    type: '{{$service.Monitor.Type}}',
-                    name: '{{$service.Monitor.Name}}',
-                    currentUp: parseInt('{{$service.CurrentUp}}'),
-                    currentDown: parseInt('{{$service.CurrentDown}}'),
-                    totalUp: parseInt('{{$service.TotalUp}}'),
-                    totalDown: parseInt('{{$service.TotalDown}}'),
-                    delay: '{{$service.Delay}}'.replaceAll("[","").replaceAll("]","").split(" "),
-                    up: '{{$service.Up}}'.replaceAll("[","").replaceAll("]","").split(" "),
-                    down: '{{$service.Down}}'.replaceAll("[","").replaceAll("]","").split(" "),
-                })
-                {{end}}
-                // @formatter:on
-                for (let i = 0; i < services.length; i++) {
-                    const service = services[i];
-                    service.avgDelay = parseInt(service.delay[service.delay.length - 1]) + "ms"
-                    service.health = this.getStateInfo(this.getPercent(service.currentUp, service.currentDown))
-                    service.dayDetail = this.getDayTails(service)
-                    service.totalUpTime = this.getProgressInfo(this.getPercent(service.totalUp, service.totalDown))
+            initData(services) {
+                let nodes = [];
+                for (let key in services) {
+                    const service = services[key];
+                    let node = {
+                        type: service.Monitor.Type,
+                        name: service.Monitor.Name,
+                        currentUp: parseInt(service.CurrentUp),
+                        currentDown: parseInt(service.CurrentDown),
+                        totalUp: parseInt(service.TotalUp),
+                        totalDown: parseInt(service.TotalDown),
+                        up: service.Up,
+                        down: service.Down,
+                        delay: service.Delay,
+                        avgDelay: parseInt(this.getAvgDelay(service.Delay)) + "ms",
+                        health: this.getStateInfo(this.getPercent(service.CurrentUp, service.CurrentDown)),
+                        totalUpTime: this.getProgressInfo(this.getPercent(service.TotalUp, service.TotalDown))
+                    };
+                    nodes.push(node);
+                };
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    node.dayDetail = this.getDayTails(node)
                 }
-                this.servicesTag = this.groupingData(services,"type");
-                this.servicesNoTag = services;
+                return nodes
+            },
+            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 down = service.down[i]
-                    const delay = service.delay[i]
-                    let percent = this.getPercent(up, down)
+                    const up = service.up[i];
+                    const down = service.down[i];
+                    let delay = Number(service.delay[i]);
+                    let percent = this.getPercent(up, down);
                     if (percent <= 0) {
                         percent = 0;
                     }
-                    let className = this.getStateInfo(percent).className
-                    let available = '{{tr "Availability"}}'
-                    let averageLatency = '{{tr "AverageLatency"}}'
-                    const text = `${this.beforeDay(service.up.length - i - 1)}，${available}：${percent}%，${averageLatency}：${delay}ms`
+                    let className = this.getStateInfo(percent).className;
+                    let available = '{{tr "Availability"}}';
+                    let averageLatency = '{{tr "AverageLatency"}}';
+                    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,8 +226,19 @@
                 }
                 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>
 {{template "theme-server-status/footer" .}}
-{{end}}
+{{end}}
\ No newline at end of file