IP地址详情中增加区域监控雷达图、数据列表

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

@@ -3,5 +3,6 @@
     <span class="item disabled">|</span>
     <menu-item :href="'.?addrId=' + addr.id" code="addr">"{{addr.ip}}"详情</menu-item>
     <menu-item :href="'.logs?addrId=' + addr.id" code="log">日志</menu-item>
+    <menu-item :href="'.reports?addrId=' + addr.id" code="report">监控</menu-item>
     <menu-item :href="'.update?addrId=' + addr.id" code="update">修改</menu-item>
 </first-menu>

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

@@ -0,0 +1,9 @@
+h4 a {
+  font-size: 0.8em;
+  margin-left: 0.6em;
+  font-weight: normal;
+}
+.chart-box {
+  height: 20em;
+}
+/*# sourceMappingURL=index.css.map */

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

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

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

@@ -1,6 +1,8 @@
 {$layout}
+{$template "/echarts"}
 {$template "menu"}
 
+
 <table class="ui table definition selectable">
     <tr>
         <td class="title">IP地址</td>
@@ -49,3 +51,10 @@
         </td>
     </tr>
 </table>
+
+<!-- 监控信息 -->
+<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>

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

@@ -1,4 +1,8 @@
 Tea.context(function () {
+	this.$delay(function () {
+		this.loadChart()
+	})
+
 	this.updateUp = function (addrId, isUp) {
 		let status = isUp ? "在线" : "离线"
 		teaweb.confirm("确定要手动将节点设置为" + status + "吗？", function () {
@@ -20,4 +24,78 @@ Tea.context(function () {
 				.refresh()
 		})
 	}
+
+	this.loadChart = function () {
+		if (this.results.length == 0) {
+			return
+		}
+
+		let sumColor = "green"
+		this.results.forEach(function (v) {
+			switch (v.level) {
+				case "good":
+					v.color = "green"
+					break
+				case "normal":
+					v.color = "blue"
+					break
+				case "bad":
+					v.color = "orange"
+					if (sumColor != "red") {
+						sumColor = "orange"
+					}
+					break
+				case "broken":
+					v.color = "red"
+					sumColor = "red"
+					break
+			}
+		})
+
+
+		let chartBox = document.getElementById("reports-chart-box")
+		if (chartBox == null || chartBox.offsetHeight == 0) {
+			let that = this
+			setTimeout(function () {
+				that.loadChart()
+			})
+			return
+		}
+		let chart = teaweb.initChart(chartBox)
+		chart.setOption({
+			radar: {
+				splitNumber: 4,
+				indicator: this.results.map(function (result) {
+					return {
+						name: result.node.name,
+						color: result.color,
+						max: 5000
+					}
+				})
+			},
+			series: [{
+				name: '',
+				type: 'radar',
+				data: [
+					{
+						value: this.results.map(function (result) {
+							return result.costMs
+						})
+					}
+				],
+				lineStyle: {
+					width: "1",
+					color: sumColor,
+					opacity: 0.2
+				},
+				itemStyle: {
+					opacity: 0
+				},
+				areaStyle: {
+					color: sumColor,
+					opacity: 0.2
+				}
+			}]
+		})
+	}
 })

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

@@ -0,0 +1,12 @@
+h4 {
+	a {
+		font-size: 0.8em;
+		margin-left: 0.6em;
+		font-weight: normal;
+	}
+}
+
+
+.chart-box {
+	height: 20em;
+}

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

@@ -0,0 +1,35 @@
+{$layout}
+{$template "menu"}
+
+<p class="comment" v-if="results.length == 0">暂时还没有监控结果。</p>
+<table class="ui table celled selectable" v-if="results.length > 0">
+    <thead>
+    <tr>
+        <th class="three wide">监控节点</th>
+        <th class="four wide">对象</th>
+        <th class="one wide">级别</th>
+        <th class="two wide">耗时</th>
+        <th>错误信息</th>
+    </tr>
+    </thead>
+    <tr v-for="result in results">
+        <td>
+            {{result.node.name}}<link-icon :href="'/clusters/monitors/reporters/reporter?reporterId=' + result.node.id"></link-icon>
+            <div v-if="result.node.location.length > 0 || result.node.isp.length > 0">
+                <span class="grey small">{{result.node.location}}<span v-if="result.node.location.length > 0"> </span> {{result.node.isp}}</span>
+            </div>
+        </td>
+        <td>{{result.targetDesc}}</td>
+        <td>
+            <span :class="result.color">{{result.levelName}}</span>
+        </td>
+        <td>
+            <span v-if="result.isOk" :class="result.color">{{result.costMs}}ms</span>
+            <span v-else class="disabled">-</span>
+        </td>
+        <td>
+            <span v-if="!result.isOk" class="red">{{result.error}}</span>
+            <span v-else class="disabled">-</span>
+        </td>
+    </tr>
+</table>

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

@@ -0,0 +1,18 @@
+Tea.context(function () {
+	this.results.forEach(function (v) {
+		switch (v.level) {
+			case "good":
+				v.color = "green"
+				break
+			case "normal":
+				v.color = "blue"
+				break
+			case "bad":
+				v.color = "orange"
+				break
+			case "broken":
+				v.color = "red"
+				break
+		}
+	})
+})