前端用 hostname 来标记设备

web/src/components/DrawerLeft.vue

@@ -13,9 +13,16 @@
 
 		<!--server list-->
 		<div v-if="servers_visible">
-			<v-list>
+			<v-list two-line>
 			    	<v-list-tile v-for="server in servers" :key=server.id @click="selectServer(server)" class="server ">
-			            <v-list-tile-content><div class="caption font-weight-thin"> {{ server }} </div> </v-list-tile-content>
+			            <v-list-tile-content>
+			            	<v-list-tile-title v-if="hostnames[server].hostname">
+			            		{{ hostnames[server].hostname }}
+			            	</v-list-tile-title>
+			            	<v-list-tile-sub-title class="caption font-weight-thin">{{ server }}</v-list-tile-sub-title>
+
+			            	<!--<div class="caption font-weight-thin"> {{ server }} </div>--> 
+			            </v-list-tile-content>
 			            <v-list-tile-action v-if="server == activeServer"><v-icon>done</v-icon></v-list-tile-action>
 			            <v-list-tile-action v-if="server != activeServer && (hostServer != null && server != hostServer)" @click.stop="removeServer(server)"><v-icon>remove</v-icon></v-list-tile-action>
 			    	</v-list-tile>
@@ -77,6 +84,7 @@ export default {
     data () {
         return {
         	servers: [],
+        	hostnames: {},
         	hostServer: cm.sapi.getHostServer(),
         	activeServer: "",
             servers_visible: false,
@@ -88,6 +96,7 @@ export default {
     	// init these servers in order
     	this.updateActiveServer();
     	this.updateServers();
+    	this.updateHostnames();
     },
     methods: {
     	updateActiveServer() {
@@ -96,6 +105,10 @@ export default {
     	updateServers() {
     		this.servers = cm.sapi.getServers();
     	},
+    	updateHostnames() {
+    		console.log("updateHostnames");
+    		cm.sapi.getHostnames(this.hostnames);
+    	},
     	selectServer(server){
     		cm.sapi.setActiveServer(server);
     		this.updateActiveServer();
@@ -138,20 +151,19 @@ export default {
 <style scoped>
 	.server {
 		color: grey;
-
+		/*padding: 0.5em 0em;*/
 	}
-	.server-btn {
+	/*.server-btn {
 		width: 40%;
 		color: grey;
-	}
+	}*/
 	#newServerInput {
 		display: flex;
 	}
 	#newServerProtoInput {
 		width: 6em;
 	}
 	#servers-container {
-
 		background-image: url(/static/img/drawerLeft/material.jpg);
 		width: 100%;
 		height: 14em;

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" :class="{uif: updateInfoFailed}">{{activeServer}}</v-toolbar-title>
+            <v-toolbar-title class="hdr-text" @click="serverDialog = true" :class="{uif: updateInfoFailed}">{{ hostname || activeServer}}</v-toolbar-title>
 
             <v-spacer></v-spacer>
 
@@ -28,34 +28,43 @@
             <div>&copy; [email protected]</div>
         </v-footer> -->
 
-        <about v-model="aboutDialog" />
+        <!--<about v-model="aboutDialog" />-->
+        <v-dialog v-model="serverDialog" width='400px'>
+        	<v-card>
+        		<server-info :hostname="hostname" :server="activeServer"></server-info>
+        		<v-card-actions><confirm-btns noLeft rightPrimary @clickRight="serverDialog = false"></confirm-btns></v-card-actions>
+        	</v-card>
+		</v-dialog>
     </v-app>
 </template>
 
 <script>
 import cm from '../js/common'
 import DrawerLeft from '@/components/DrawerLeft'
 import more from '@/components/more'
-import about from '@/components/common/about'
+import serverInfo from '@/components/header/serverInfo'
+import confirmBtns from '@/components/common/confirmBtns'
 
 export default {
     name: 'Layout',
     components: {
         DrawerLeft,
         more, 
-        about, 
+        serverInfo, 
+        confirmBtns, 
     },
     data () {
         return {
             drawer: false,
             infoAll: null,
-            aboutDialog: false,
+            serverDialog: false,
             activeServer: cm.sapi.getActiveServer(),
+            hostname: null,
             updateInfoFailed: false,
         }
     },
     beforeCreate () {
-        
+    	cm.sapi.getActiveHostname(this);
     },
     created () {
         cm.bus.$on('changeContent', this.changeContentHandler);

web/src/components/header/serverInfo.vue

@@ -0,0 +1,16 @@
+<template>
+	<div>
+    <v-card-title class="headline"> {{ hostname || server }}</v-card-title>
+    <v-card-text> {{ server }} </v-card-text>
+   </div>
+</template>
+
+<script>
+	export default {
+		name: 'serverInfo',
+		props: ['hostname', 'server'],
+	}
+</script>
+
+<style>
+</style>

web/src/js/common/backendAPI.js

@@ -1,23 +1,37 @@
 const ver = "v1"
 
+let path = {
+	infoAll: "/" + ver + "/info/all",
+	infoDisk: "/" + ver + "/info/disk",
+
+	processAll: "/" + ver + "/process/all",
+	processDetails: "/" + ver + "/process/details",
+
+	sysInfoAll: "/" + ver + "/sysInfo/all",
+	sysInfoHostname: "/" + ver + "/sysInfo/hostname",
+}
+
 var activeServer = localStorage.getItem("activeServer")
 if(!activeServer) {
 	activeServer = ""
 }
 
-const infoAll = activeServer + "/" + ver + "/info/all"
-const infoDisk = activeServer + "/" + ver + "/info/disk"
+const infoAll = activeServer + path.infoAll;
+const infoDisk = activeServer + path.infoDisk;
 
-const processAll = activeServer + "/" + ver + "/process/all"
-const processDetails = activeServer + "/" + ver + "/process/details"
+const processAll = activeServer + path.processAll;
+const processDetails = activeServer + path.processDetails;
 
-const sysInfoAll = activeServer + "/" + ver + "/sysInfo/all"
+const sysInfoAll = activeServer + path.sysInfoAll;
+const sysInfoHostname = activeServer + path.sysInfoHostname;
 
+exports.path = path;
 
 exports.infoAll = infoAll;
 exports.infoDisk = infoDisk;
 
 exports.processAll = processAll;
 exports.processDetails = processDetails;
 
-exports.sysInfoAll = sysInfoAll;
+exports.sysInfoAll = sysInfoAll;
+exports.sysInfoHostname = sysInfoHostname;

web/src/js/common/serverAPI.js

@@ -1,23 +1,33 @@
+var axios = require('axios');
+var baip = require("./backendAPI");
+
+
 let serversKey = "servers";
 let activeServerKey = "activeServer";
+let hostnameKey = "hostnames"
 
+// 获取 web app 的服务器 IP
 function getHostServer(){
 	return location.protocol + "//" + location.hostname + ":" + location.port;
 }
 
+// 获取当前保存的服务器
 function getServers() {
 	return JSON.parse(localStorage.getItem(serversKey));
 }
 
+// 获取当前连接的服务器
 function getActiveServer() {
 	return localStorage.getItem(activeServerKey);
 }
 
+// 保存所有的服务器
 function setServers(servers){
 	localStorage.setItem(serversKey, JSON.stringify(servers));
 }
 
-function addServer(server) {
+// 添加一个服务器
+function addServer(server, hostname) {
 	let servers = getServers();
 	if(!servers) {
 		servers = [];
@@ -32,10 +42,12 @@ function addServer(server) {
 	return null;
 }
 
+// 设置当前活跃 server
 function setActiveServer(server) {
 	localStorage.setItem(activeServerKey, server);
 }
 
+// 删除本地保存的一个 server
 function delServer(server) {
 	console.log("delServer ", server);
 	let servers = getServers();
@@ -49,6 +61,7 @@ function delServer(server) {
     setServers(servers);
 }
 
+// 清空本地保存的所有 servers
 function clearServers() {
 	let activeServer = getActiveServer();
 	let hostServer = getHostServer();
@@ -66,6 +79,29 @@ function clearServers() {
 	setServers(newServers);
 }
 
+// 获取当前一个 server 的 hostname，并保存到 store.hsotname
+function getHostname(server, store) {
+	let url = server + baip.path.sysInfoHostname;
+	axios.get(url).then(function(res){
+	    store.hostname = res.data;
+	}).catch(function(err){
+	    console.log("get SysInfo all failed: " + err);
+	})
+}
+
+// 获取当前活跃 server 的 hostname，并保存到 store.hsotname
+function getActiveHostname(store) {
+	getHostname(getActiveServer(), store);
+}
+
+// 获取当前保存的所有 server 的 hostname，并保存到 hostnames，访问 server 的 hostname: hostnames[server].hostname
+function getHostnames(hostnames) {
+	let servers = getServers();
+	for(let i in servers) {
+		hostnames[servers[i]] = {"hostname": ""};
+		getHostname(servers[i], hostnames[servers[i]]);
+	}
+}
 
 export default {
 	getHostServer,
@@ -76,4 +112,8 @@ export default {
 	setActiveServer,
 	delServer,
 	clearServers,
+
+	getHostname,
+	getActiveHostname,
+	getHostnames,
 }

web/src/js/common/sysInfo.js

@@ -14,5 +14,16 @@ function getSysInfo(serverInfo) {
     })
 }
 
-// exports.SysInfo = SysInfo;
-exports.getSysInfo = getSysInfo;
+// 获取当前连接的 server （activeServer）的 hostname，保存到 self 参数的 hostname 属性中
+function getHostname(self) {
+    console.log("getHostname");
+    axios.get(bapi.sysInfoHostname).then(function(res){
+    	console.log("hostname: ", res.data)
+        self.hostname = res.data;
+    }).catch(function(err){
+        console.log("get SysInfo all failed: " + err);
+    })
+}
+
+exports.getSysInfo = getSysInfo;
+exports.getHostname = getHostname;