优化界面

web/public/js/components/cluster/node-clusters-labels.js

@@ -19,7 +19,13 @@ Vue.component("node-clusters-labels", {
 		}
 	},
 	template: `<div>
-	<a v-if="cluster != null" :href="'/clusters/cluster?clusterId=' + cluster.id" class="ui label basic grey" :class="labelSize" title="主集群" style="margin-bottom: 0.3em;">{{cluster.name}}</a>
+	<a v-if="cluster != null" :href="'/clusters/cluster?clusterId=' + cluster.id" title="主集群" style="margin-bottom: 0.3em;">
-	<a v-for="c in secondaryClusters" :href="'/clusters/cluster?clusterId=' + c.id" class="ui label basic grey" :class="labelSize" title="从集群" style="margin-bottom: 0.3em;"><span class="grey" style="text-decoration: none">{{c.name}}</span></a>
+		<span class="ui label basic grey" :class="labelSize" v-if="labelSize != 'tiny'">{{cluster.name}}</span>
+		<grey-label v-if="labelSize == 'tiny'">{{cluster.name}}</grey-label>
+	</a>
+	<a v-for="c in secondaryClusters" :href="'/clusters/cluster?clusterId=' + c.id" :class="labelSize" title="从集群">
+		<span class="ui label basic grey" :class="labelSize" v-if="labelSize != 'tiny'">{{c.name}}</span>
+		<grey-label v-if="labelSize == 'tiny'">{{c.name}}</grey-label>
+	</a>
 </div>`
 })

web/public/js/components/common/labels.js

@@ -26,5 +26,5 @@ Vue.component("micro-basic-label", {
 
 // 灰色的Label
 Vue.component("grey-label", {
-	template: `<span class="ui label basic grey tiny" style="font-size: 0.7em; border: 1px solid #ddd"><slot></slot></span>`
+	template: `<span class="ui label basic grey tiny" style="margin-top: 0.4em; font-size: 0.7em; border: 1px solid #ddd!important; font-weight: normal; margin-left: -0.2em"><slot></slot></span>`
 })

web/views/@default/clusters/cluster/nodes.html

@@ -67,13 +67,13 @@
 	</thead>
 	<tr v-for="node in nodes">
         <td><a :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">{{node.name}}</a>
-            <div style="margin-top: 0.5em" v-if="node.region != null">
+            <div v-if="node.region != null">
-                <span class="ui label tiny grey basic">区域：{{node.region.name}}</span>
+                <grey-label>区域：{{node.region.name}}</grey-label>
             </div>
-            <div style="margin-top: 0.5em" v-if="node.group != null">
+            <div v-if="node.group != null">
-               <span class="ui label tiny grey basic">分组：{{node.group.name}}</span>
+               <grey-label>分组：{{node.group.name}}</grey-label>
             </div>
-            <div style="margin-top: 0.5em" v-if="node.secondaryClusters != null && node.secondaryClusters.length > 0">
+            <div v-if="node.secondaryClusters != null && node.secondaryClusters.length > 0">
                 <node-clusters-labels :v-primary-cluster="node.cluster" :v-secondary-clusters="node.secondaryClusters" size="tiny"></node-clusters-labels>
             </div>
         </td>

web/views/@default/clusters/ip-addrs/addr/index.css

@@ -4,6 +4,7 @@ h4 a {
   font-weight: normal;
 }
 .chart-box {
+  width: 30em;
   height: 20em;
 }
 /*# sourceMappingURL=index.css.map */

web/views/@default/clusters/ip-addrs/addr/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,EACC;EACC,gBAAA;EACA,kBAAA;EACA,mBAAA;;AAKF;EACC,YAAA","file":"index.css"}
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,EACC;EACC,gBAAA;EACA,kBAAA;EACA,mBAAA;;AAKF;EACC,WAAA;EACA,YAAA","file":"index.css"}

web/views/@default/clusters/ip-addrs/addr/index.html

@@ -56,5 +56,6 @@
 <div v-if="results.length > 0">
     <div class="margin"></div>
     <h4>区域监控 <a :href="Tea.url('.reports', {addrId: addr.id})"><span>[详情]</span></a></h4>
-    <div class="ui segment chart-box" id="reports-chart-box"></div>
+    <div class="ui divider"></div>
+    <div class="chart-box" id="reports-chart-box"></div>
 </div>

web/views/@default/clusters/ip-addrs/addr/index.js

@@ -63,16 +63,18 @@ Tea.context(function () {
 		}
 		let chart = teaweb.initChart(chartBox)
 		chart.setOption({
-			radar: {
+			radar: [
-				splitNumber: 4,
+				{
-				indicator: this.results.map(function (result) {
+					splitNumber: 4,
-					return {
+					indicator: this.results.map(function (result) {
-						name: result.node.name,
+						return {
-						color: result.color,
+							name: result.node.name,
-						max: 5000
+							color: result.color,
-					}
+							max: 5000
-				})
+						}
-			},
+					})
+				}
+			],
 			series: [{
 				name: '',
 				type: 'radar',

web/views/@default/clusters/ip-addrs/addr/index.less

@@ -8,5 +8,6 @@ h4 {
 
 
 .chart-box {
+	width: 30em;
 	height: 20em;
 }

web/views/@default/clusters/monitors/reporters/index.html

@@ -41,7 +41,7 @@
     <tr v-for="reporter in reporters">
         <td>
             <a :href="Tea.url('.reporter', {reporterId: reporter.id})"><keyword :v-word="keyword">{{reporter.name}}</keyword></a>
-            <div v-if="reporter.groups.length > 0" style="margin-top: 0.5em">
+            <div v-if="reporter.groups.length > 0">
                 <grey-label v-for="group in reporter.groups">{{group.name}}</grey-label>
             </div>
             <div v-if="reporter.shouldUpgrade">