实现连接状态指示器，连接失败时将标题的 host 设置为红色

Lt0 · Sep 3, 2018 · 7d4561a · 7d4561a
1 parent fcfac6e
commit 7d4561a
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 2 deletions.
diff --git a/web/src/components/Layout.vue b/web/src/components/Layout.vue
@@ -4,7 +4,7 @@
         <v-toolbar app fixed clipped-left color="teal lighten-1" dark>
             <v-toolbar-side-icon id="side-btn" @click.stop="drawer = !drawer"></v-toolbar-side-icon>
             <v-spacer></v-spacer>
-            <v-toolbar-title class="hdr-text" @click="aboutDialog = true">{{activeServer}}</v-toolbar-title>
+            <v-toolbar-title class="hdr-text" @click="aboutDialog = true" :class="{uif: updateInfoFailed}">{{activeServer}}</v-toolbar-title>
 
             <v-spacer></v-spacer>
 
@@ -51,13 +51,15 @@ export default {
             infoAll: null,
             aboutDialog: false,
             activeServer: cm.sapi.getActiveServer(),
+            updateInfoFailed: false,
         }
     },
     beforeCreate () {
         
     },
     created () {
         cm.bus.$on('changeContent', this.changeContentHandler);
+        cm.bus.$on('updateInfo', this.updateInfoHandler);
     },
     methods: {
         changeContentHandler (r) {
@@ -79,7 +81,18 @@ export default {
                     console.log('unknow page to route: ', r);
             }
         },
-
+		updateInfoHandler(arg) {
+			switch(arg) {
+				case "success":
+					this.updateInfoFailed = false;
+					break;
+				case "failed":
+					this.updateInfoFailed = true;
+					break;
+				default:
+					console.log("updateInfoHandler: unknown status: ", arg);
+			}
+		}
     }
 }
 </script>
@@ -104,4 +117,8 @@ export default {
 #side-btn {
 	margin: 6px;
 }
+
+.uif {
+	color: #f7abab;
+}
 </style>
diff --git a/web/src/components/content/FS.vue b/web/src/components/content/FS.vue
@@ -21,9 +21,18 @@ export default {
     data () {
         return {
             info: new Object(),     // 进程数据，由 processes updater 负责填充
+            infoErr: null,				// 获取状态是的错误信息
             interval: 1000,
         }
     },
+    watch: {
+    	info: function() {
+    		cm.bus.$emit("updateInfo", "success");
+    	},
+    	infoErr: function() {
+    		cm.bus.$emit("updateInfo", "failed");
+    	}
+    },
     beforeRouteEnter: (to, from, next) => {
         next(vm => {
             //console.log("processes beforeRouteEnter next");

diff --git a/web/src/components/content/Processes.vue b/web/src/components/content/Processes.vue
@@ -92,6 +92,7 @@ let infoCtrl = {
     updater: null,
     interval: 1000,         // 更新时间间隔
     info: new Object(),
+    infoErr: null,
 }
 let detailsCtrl = {
     type: "details",
@@ -123,6 +124,22 @@ export default {
             tips: tips,
         }
     },
+    computed: {
+    	info: function() {
+    		return infoCtrl.info;
+    	},
+    	infoErr: function() {
+    		return infoCtrl.infoErr;
+    	}
+    },
+    watch: {
+    	info: function() {
+    		cm.bus.$emit("updateInfo", "success");
+    	},
+    	infoErr: function() {
+    		cm.bus.$emit("updateInfo", "failed");
+    	},
+    },
     beforeRouteEnter: (to, from, next) => {
         next(vm => {
             // console.log("processes beforeRouteEnter next");

diff --git a/web/src/components/content/Resources.vue b/web/src/components/content/Resources.vue
@@ -100,9 +100,18 @@ export default {
     data () {
         return {
             rsc: new Object(),      // 系统信息状态数据，由 resources updater 负责填充
+            rscErr: null,				// 获取系统状态时的错误信息
             interval: 1000,         // 更新时间间隔
         }
     },
+    watch: {
+    	rsc: function() {
+    		cm.bus.$emit("updateInfo", "success");
+    	},
+    	rscErr: function() {
+    		cm.bus.$emit("updateInfo", "failed");
+    	}
+    },
     computed: {
         rscStr: function(){
             return JSON.stringify(this.rsc);

diff --git a/web/src/js/common/fs.js b/web/src/js/common/fs.js
@@ -11,6 +11,7 @@ function runUpdater(self) {
         updater = setTimeout(runUpdater, interval, self);
     }).catch(function(err){
         console.log("get disk info failed: " + err);
+        self.infoErr = err;
         updater = setTimeout(runUpdater, interval, self);
     })
 }

diff --git a/web/src/js/common/processes.js b/web/src/js/common/processes.js
@@ -13,6 +13,7 @@ function runUpdater(ctrl, api) {
         // console.log(ctrl.type, ctrl.pid + " updater: ", ctrl.updater);
     }).catch(function(err){
         console.log("get info all failed: " + err);
+        ctrl.infoErr = err;
         ctrl.updater = setTimeout(runUpdater, interval, ctrl, api);
     })
 }

diff --git a/web/src/js/common/resources.js b/web/src/js/common/resources.js
@@ -15,6 +15,7 @@ function runUpdater(self) {
         updater = setTimeout(runUpdater, interval, self);
     }).catch(function(err){
         console.log("get info all failed: " + err);
+        self.rscErr = err;
         updater = setTimeout(runUpdater, interval, self);
     })
 }