From 9f7f101e7f7a22717e63497d5598f473b1026aec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=B6=E7=88=B8?= <hi@nai.ba>
Date: Tue, 10 Dec 2019 15:33:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5Vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cmd/agent/main.go                    |  4 +-
 resource/static/main.css             |  4 ++
 resource/template/common/footer.html |  1 +
 resource/template/page/home.html     | 88 +++++++++++++++++++---------
 4 files changed, 67 insertions(+), 30 deletions(-)

diff --git a/cmd/agent/main.go b/cmd/agent/main.go
index e383789..d33581e 100644
--- a/cmd/agent/main.go
+++ b/cmd/agent/main.go
@@ -123,11 +123,13 @@ func reportState() {
 	for {
 		if endReport.After(time.Now()) {
 			monitor.TrackNetworkSpeed()
-			_, err = client.ReportState(ctx, monitor.GetState(1).PB())
+			_, err = client.ReportState(ctx, monitor.GetState(2).PB())
 			if err != nil {
 				log.Printf("reportState error %v", err)
 				time.Sleep(delayWhenError)
 			}
+		} else {
+			time.Sleep(time.Second * 1)
 		}
 	}
 }
diff --git a/resource/static/main.css b/resource/static/main.css
index 9332e56..2a1157f 100644
--- a/resource/static/main.css
+++ b/resource/static/main.css
@@ -52,4 +52,8 @@
 
 .status.cards .description {
     padding-bottom: 1rem !important;
+}
+
+.status.cards .ui.content.popup {
+    min-width: 250px;
 }
\ No newline at end of file
diff --git a/resource/template/common/footer.html b/resource/template/common/footer.html
index e0ecc84..c11e475 100644
--- a/resource/template/common/footer.html
+++ b/resource/template/common/footer.html
@@ -7,6 +7,7 @@
 <script src="https://cdnjs.loli.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdnjs.loli.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
 <script src="/static/semantic-ui-alerts.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script src="/static/main.js?t_={{fs}}"></script>
 </body>
 
diff --git a/resource/template/page/home.html b/resource/template/page/home.html
index 1120e8b..ef1e362 100644
--- a/resource/template/page/home.html
+++ b/resource/template/page/home.html
@@ -4,28 +4,43 @@
 <div class="nb-container">
     <div class="ui container">
         <div class="ui four status cards">
-            {{range $server := .Servers}}
-            <div class="card">
+            <div v-for='server in servers' class="card">
                 <div class="content">
-                    <div class="header">{{if $server.Host.CountryCode}}<i
-                            class="{{$server.Host.CountryCode}} flag"></i>{{end}}{{$server.Name}}
-                        <i data-html="
-                        <div class='content'>
-                                系统：{{$server.Host.Platform}}-{{$server.Host.PlatformVersion}} [{{if $server.Host.Virtualization}}{{$server.Host.Virtualization}}:{{end}}{{$server.Host.Arch}}]<br>
-                                CPU：{{$server.Host.CPU}}<br>
-                                硬盘：{{$server.State.DiskUsed|bf}}/{{$server.State.DiskTotal|bf}}<br>
-                                内存：{{$server.State.MemUsed|bf}}/{{$server.State.MemTotal|bf}}<br>
-                                交换：{{$server.State.SwapUsed|bf}}/{{$server.State.SwapTotal|bf}}<br>
-                                流量：<i class='arrow alternate circle down outline icon'></i>{{$server.State.NetInTransfer|bf}} <i class='arrow alternate circle up outline icon'></i>{{$server.State.NetOutTransfer|bf}}<br>
-                                启动：{{$server.Host.BootTime|stf}}<br>
-                                版本：v{{$server.Host.Version}}<br>
-                        </div>" class="yellow info circle icon"></i>
+                    <div class="header"><i v-if='server.Host.CountryCode'
+                            :class="server.Host.CountryCode + ' flag'"></i>
+                        <?server.Name?>
+                        <i class="yellow info circle icon"></i>
+                        <div class='ui content popup'>
+                            系统：
+                            <?server.Host.Platform?>-
+                            <?server.Host.PlatformVersion?> [<span v-if='server.Host.Virtualization'>
+                                <?server.Host.Virtualization?>:</span>
+                            <?server.Host.Arch?>]<br>
+                            CPU：
+                            <?server.Host.CPU?><br>
+                            硬盘：
+                            <?server.State.DiskUsed?>/
+                            <?server.State.DiskTotal?><br>
+                            内存：
+                            <?server.State.MemUsed?>/
+                            <?server.State.MemTotal?><br>
+                            交换：
+                            <?server.State.SwapUsed?>/
+                            <?server.State.SwapTotal?><br>
+                            流量：<i class='arrow alternate circle down outline icon'></i>
+                            <?server.State.NetInTransfer?> <i class='arrow alternate circle up outline icon'></i>
+                            <?server.State.NetOutTransfer?><br>
+                            启动：
+                            <?server.Host.BootTime?><br>
+                            版本：v
+                            <?server.Host.Version?><br>
+                        </div>
                     </div>
                     <div class="description">
                         <div class="ui grid">
                             <div class="three wide column">CPU</div>
                             <div class="thirteen wide column">
-                                <div class="ui active progress" data-value="{{$server.State.CPU}}" data-total="100">
+                                <div class="ui active progress" :data-value="server.State.CPU" data-total="100">
                                     <div class="bar">
                                         <div class="progress"></div>
                                     </div>
@@ -33,8 +48,8 @@
                             </div>
                             <div class="three wide column">内存</div>
                             <div class="thirteen wide column">
-                                <div class="ui active progress" data-value="{{$server.State.MemUsed}}"
-                                    data-total="{{$server.State.MemTotal}}">
+                                <div class="ui active progress" :data-value="server.State.MemUsed"
+                                    :data-total="server.State.MemTotal">
                                     <div class="bar">
                                         <div class="progress"></div>
                                     </div>
@@ -42,8 +57,8 @@
                             </div>
                             <div class="three wide column">交换</div>
                             <div class="thirteen wide column">
-                                <div class="ui active progress" data-value="{{$server.State.SwapUsed}}"
-                                    data-total="{{$server.State.SwapTotal}}">
+                                <div class="ui active progress" :data-value="server.State.SwapUsed"
+                                    :data-total="server.State.SwapTotal">
                                     <div class="bar">
                                         <div class="progress"></div>
                                     </div>
@@ -51,14 +66,15 @@
                             </div>
                             <div class="three wide column">网络</div>
                             <div class="thirteen wide column">
-                                <i
-                                    class="arrow alternate circle down outline icon"></i>{{$server.State.NetInSpeed|bf}}/s
-                                <i class="arrow alternate circle up outline icon"></i>{{$server.State.NetOutSpeed|bf}}/s
+                                <i class="arrow alternate circle down outline icon"></i>
+                                <?server.State.NetInSpeed?>/s
+                                <i class="arrow alternate circle up outline icon"></i>
+                                <?server.State.NetOutSpeed?>/s
                             </div>
                             <div class="three wide column">硬盘</div>
                             <div class="thirteen wide column">
-                                <div class="ui active progress" data-value="{{$server.State.DiskUsed}}"
-                                    data-total="{{$server.State.DiskTotal}}">
+                                <div class="ui active progress" :data-value="server.State.DiskUsed"
+                                    :data-total="server.State.DiskTotal">
                                     <div class="bar">
                                         <div class="progress"></div>
                                     </div>
@@ -66,19 +82,33 @@
                             </div>
                             <div class="three wide column">在线</div>
                             <div class="thirteen wide column">
-                                <i class="clock icon"></i>{{$server.State.Uptime|sf}}
+                                <i class="clock icon"></i>
+                                <?server.State.Uptime?>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            {{end}}
         </div>
     </div>
 </div>
 {{template "common/footer" .}}
 <script>
-    $('.yellow.info.circle.icon').popup();
-    $('.progress').progress();
+    const servers = {{.Servers }};
+    var statusCards = new Vue({
+        el: 'div.status.cards',
+        delimiters: ['<?', '?>'],
+        data: {
+            servers,
+        },
+        mounted() {
+            $('.progress').progress();
+            $('.yellow.info.icon').popup({
+                popup: '.ui.content.popup'
+            });
+        },
+        methods: {
+        }
+    });
 </script>
 {{end}}
\ No newline at end of file