实现基本的监控终端管理

internal/rpc/rpc_client.go

@@ -304,6 +304,10 @@ func (this *RPCClient) ReportNodeRPC() pb.ReportNodeServiceClient {
 	return pb.NewReportNodeServiceClient(this.pickConn())
 }
 
+func (this *RPCClient) ReportNodeGroupRPC() pb.ReportNodeGroupServiceClient {
+	return pb.NewReportNodeGroupServiceClient(this.pickConn())
+}
+
 func (this *RPCClient) ReportResultRPC() pb.ReportResultServiceClient {
 	return pb.NewReportResultServiceClient(this.pickConn())
 }

internal/web/actions/default/clusters/monitors/groups/options.go

@@ -0,0 +1,32 @@
+// Copyright 2021 Liuxiangchao iwind.liu@gmail.com. All rights reserved.
+
+package groups
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/iwind/TeaGo/maps"
+)
+
+type OptionsAction struct {
+	actionutils.ParentAction
+}
+
+func (this *OptionsAction) RunPost(params struct{}) {
+	resp, err := this.RPC().ReportNodeGroupRPC().FindAllEnabledReportNodeGroups(this.AdminContext(), &pb.FindAllEnabledReportNodeGroupsRequest{})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	var groupMaps = []maps.Map{}
+	for _, group := range resp.ReportNodeGroups {
+		groupMaps = append(groupMaps, maps.Map{
+			"id":   group.Id,
+			"name": group.Name,
+		})
+	}
+	this.Data["groups"] = groupMaps
+
+	this.Success()
+}

internal/web/helpers/user_must_auth.go

@@ -246,12 +246,12 @@ func (this *userMustAuth) modules(adminId int64) []maps.Map {
 					"code": "ipAddr",
 					"isOn": teaconst.IsPlus,
 				},
-				/**{
+				{
 					"name": "区域监控",
 					"url":  "/clusters/monitors",
 					"code": "monitor",
 					"isOn": teaconst.IsPlus,
-				},**/
+				},
 				{
 					"name": "SSH认证",
 					"url":  "/clusters/grants",

web/public/js/components/report/report-node-groups-selector.js

@@ -0,0 +1,72 @@
+// 监控节点分组选择
+Vue.component("report-node-groups-selector", {
+	props: ["v-group-ids"],
+	mounted: function () {
+		let that = this
+		Tea.action("/clusters/monitors/groups/options")
+			.post()
+			.success(function (resp) {
+				that.groups = resp.data.groups.map(function (group) {
+					group.isChecked = that.groupIds.$contains(group.id)
+					return group
+				})
+				that.isLoaded = true
+			})
+	},
+	data: function () {
+		var groupIds = this.vGroupIds
+		if (groupIds == null) {
+			groupIds = []
+		}
+
+		return {
+			groups: [],
+			groupIds: groupIds,
+			isLoaded: false,
+			allGroups: groupIds.length == 0
+		}
+	},
+	methods: {
+		check: function (group) {
+			group.isChecked = !group.isChecked
+			this.groupIds = []
+			let that = this
+			this.groups.forEach(function (v) {
+				if (v.isChecked) {
+					that.groupIds.push(v.id)
+				}
+			})
+		}
+	},
+	watch: {
+		allGroups: function (b) {
+			if (b) {
+				this.groupIds = []
+				this.groups.forEach(function (v) {
+					v.isChecked = false
+				})
+			}
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="reportNodeGroupIdsJSON" :value="JSON.stringify(groupIds)"/>
+	<span class="disabled" v-if="isLoaded && groups.length == 0">还没有分组。</span>
+	<div v-if="groups.length > 0">
+		<div>
+			<div class="ui checkbox">
+				<input type="checkbox" v-model="allGroups" id="all-group"/>
+				<label for="all-group">全部分组</label>
+			</div>
+			<div class="ui divider" v-if="!allGroups"></div>
+		</div>
+		<div v-show="!allGroups">
+			<div v-for="group in groups" :key="group.id" style="float: left; width: 7.6em; margin-bottom: 0.5em">
+				<div class="ui checkbox">
+					<input type="checkbox" v-model="group.isChecked" value="1" :id="'report-node-group-' + group.id" @click.prevent="check(group)"/>
+					<label :for="'report-node-group-' + group.id">{{group.name}}</label>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>`
+})

web/views/@default/clusters/monitors/@menu.html

@@ -1,5 +1,6 @@
 <first-menu>
-    <menu-item href="/clusters/monitors" code="index">任务</menu-item>
+    <!--<menu-item href="/clusters/monitors" code="index">任务</menu-item>-->
-    <menu-item href="/clusters/monitors/logs" code="log">日志</menu-item>
+    <!--<menu-item href="/clusters/monitors/logs" code="log">日志</menu-item>-->
     <menu-item href="/clusters/monitors/reporters" code="reporter">终端</menu-item>
+    <menu-item href="/clusters/monitors/groups" code="group">分组</menu-item>
 </first-menu>

web/views/@default/clusters/monitors/groups/createPopup.html

@@ -0,0 +1,15 @@
+{$layout "layout_popup"}
+
+<h3>创建分组</h3>
+<form class="ui form" data-tea-action="$" data-tea-success="success">
+    <csrf-token></csrf-token>
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title">分组名称</td>
+            <td>
+                <input type="text" name="name" maxlength="50" ref="focus"/>
+            </td>
+        </tr>
+    </table>
+    <submit-btn></submit-btn>
+</form>

web/views/@default/clusters/monitors/groups/group/updatePopup.html

@@ -0,0 +1,16 @@
+{$layout "layout_popup"}
+
+<h3>修改分组</h3>
+<form class="ui form" data-tea-action="$" data-tea-success="success">
+    <csrf-token></csrf-token>
+    <input type="hidden" name="groupId" :value="group.id"/>
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title">分组名称</td>
+            <td>
+                <input type="text" name="name" maxlength="50" ref="focus" v-model="group.name"/>
+            </td>
+        </tr>
+    </table>
+    <submit-btn></submit-btn>
+</form>

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

@@ -0,0 +1,23 @@
+{$layout}
+{$template "../menu"}
+
+<second-menu>
+    <menu-item @click.prevent="createGroup">[添加分组]</menu-item>
+</second-menu>
+
+<p class="comment" v-if="groups.length == 0">暂时还没有分组。</p>
+<table class="ui table selectable celled" v-if="groups.length > 0">
+    <thead>
+        <tr>
+            <th>分组名称</th>
+            <th class="two wide">操作</th>
+        </tr>
+    </thead>
+    <tr v-for="group in groups">
+        <td>{{group.name}}</td>
+        <td>
+            <a href="" @click.prevent="updateGroup(group.id)">修改</a> &nbsp;
+            <a href="" @click.prevent="deleteGroup(group.id)">删除</a>
+        </td>
+    </tr>
+</table>

web/views/@default/clusters/monitors/groups/index.js

@@ -0,0 +1,31 @@
+Tea.context(function () {
+	this.createGroup = function () {
+		teaweb.popup(".createPopup", {
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+
+	this.updateGroup = function (groupId) {
+		teaweb.popup(".group.updatePopup?groupId=" + groupId, {
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+
+	this.deleteGroup = function (groupId) {
+		teaweb.confirm("确定要删除此分组吗？", function () {
+			this.$post(".group.delete")
+				.params({
+					groupId: groupId
+				})
+				.refresh()
+		})
+	}
+})

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

@@ -1,2 +1,60 @@
 {$layout}
-{$template "menu"}
+{$template "menu"}
+
+<div class="margin"></div>
+
+<form class="ui form" method="get" action="/clusters/monitors">
+    <div class="ui fields inline">
+        <div class="ui field">
+            集群:
+        </div>
+        <div class="ui field">
+            <select class="ui dropdown" name="clusterId" v-model="clusterId">
+                <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
+            </select>
+        </div>
+        <div class="ui field">
+            <button class="ui button" type="submit">查看</button>
+        </div>
+    </div>
+</form>
+
+<p class="comment" v-if="tasks.length == 0">暂时还没有任务。</p>
+
+<table class="ui table selectable celled" v-if="tasks.length > 0">
+    <thead>
+        <tr>
+            <th>节点</th>
+            <th>IP</th>
+            <th class="one wide">端口</th>
+            <th>综合延时</th>
+            <th>综合级别</th>
+            <th>综合连通率</th>
+        </tr>
+    </thead>
+    <tr v-for="task in tasks">
+        <td>
+            <span v-if="task.node.id > 0">{{task.node.name}}<link-icon :href="'/clusters/cluster/node?nodeId=' + task.node.id + '&clusterId=' + clusterId"></link-icon></span>
+        </td>
+        <td>
+            {{task.ip}}<link-icon :href="'/clusters/ip-addrs/addr?addrId=' + task.addr.id"></link-icon>
+        </td>
+        <td>
+            <span v-if="task.port > 0">{{task.port}}</span>
+            <span v-else class="disabled">-</span>
+        </td>
+        <td>
+            <span v-if="task.costMs > 0" :class="task.color">{{task.costMs}}ms</span>
+            <span v-else class="disabled">-</span>
+        </td>
+        <td>
+            <span :class="task.color">{{task.levelName}}</span>
+        </td>
+        <td>
+            <span v-if="task.connectivity > 0" :class="task.color">{{task.connectivity}}%</span>
+            <span v-else class="disabled">-</span>
+        </td>
+    </tr>
+</table>
+
+<div class="page" v-html="page"></div>

web/views/@default/clusters/monitors/index.js

@@ -0,0 +1,18 @@
+Tea.context(function () {
+	this.tasks.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
+		}
+	})
+})

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

@@ -5,11 +5,17 @@
     <csrf-token></csrf-token>
     <table class="ui table definition selectable">
         <tr>
-            <td class="title">名称 *</td>
+            <td class="title">终端名称 *</td>
             <td>
                 <input type="text" name="name" maxlength="50" ref="focus"/>
             </td>
         </tr>
+        <tr>
+            <td>所属分组</td>
+            <td>
+                <report-node-groups-selector></report-node-groups-selector>
+            </td>
+        </tr>
         <tr>
             <td colspan="2"><more-options-indicator></more-options-indicator></td>
         </tr>

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

@@ -7,11 +7,19 @@
 
 <form class="ui form" method="get" action="/clusters/monitors/reporters">
     <div class="ui fields inline">
+        <div class="ui field" v-if="groups.length > 0">
+            <select class="ui dropdown auto-width" name="groupId" v-model="groupId">
+                <option value="0">[全部分组]</option>
+                <option v-for="group in groups" :value="group.id">{{group.name}}</option>
+            </select>
+        </div>
         <div class="ui field">
             <input type="text" name="keyword" v-model="keyword" placeholder="名称、地域、IP..."/>
         </div>
         <div class="ui field">
             <button class="ui button" type="submit">搜索</button>
+            &nbsp;
+            <a href="/clusters/monitors/reporters" v-if="groupId > 0 || keyword.length > 0">[清除条件]</a>
         </div>
     </div>
 </form>
@@ -33,6 +41,12 @@
     <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 class="ui label basic tiny" v-for="group in reporter.groups"><span class="small">{{group.name}}</span></div>
+            </div>
+            <div v-if="reporter.shouldUpgrade">
+                <span class="red small" title="需要升级">v{{reporter.status.buildVersion}} -&gt; v{{reporter.newVersion}}</span>
+            </div>
         </td>
         <td>
             <span v-if="reporter.location.length > 0"><keyword :v-word="keyword">{{reporter.location}}</keyword></span>

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

@@ -4,7 +4,7 @@
 
 <table class="ui table definition selectable">
     <tr>
-        <td class="title">名称</td>
+        <td class="title">终端名称</td>
         <td>
             {{reporter.name}}
         </td>
@@ -17,6 +17,15 @@
             <span v-else class="green">在线</span>
         </td>
     </tr>
+    <tr>
+        <td>所属分组</td>
+        <td>
+            <div v-if="reporter.groups.length > 0">
+                <span v-for="group in reporter.groups" class="ui label basic tiny">{{group.name}}</span>
+            </div>
+            <span v-else class="disabled">全部分组</span>
+        </td>
+    </tr>
     <tr>
         <td>区域</td>
         <td>
@@ -42,6 +51,10 @@
             <span v-else class="disabled">没有设置</span>
         </td>
     </tr>
+    <tr v-if="reporter.status.buildVersion.length > 0">
+        <td>版本号</td>
+        <td>v{{reporter.status.buildVersion}}</td>
+    </tr>
 </table>
 
 <h4>安装信息</h4>

web/views/@default/clusters/monitors/reporters/reporter/results.html

@@ -24,7 +24,7 @@
         <tr>
             <th class="two wide">类型</th>
             <th class="four wide">对象</th>
-            <th class="one wide">结果</th>
+            <th class="one wide">级别</th>
             <th class="two wide">耗时</th>
             <th>错误信息</th>
         </tr>
@@ -33,10 +33,12 @@
         <td>{{result.typeName}}</td>
         <td>{{result.targetDesc}}</td>
         <td>
-            <span v-if="result.isOk" class="green">成功</span>
+            <span :class="result.color">{{result.levelName}}</span>
-            <span v-else class="red">失败</span>
+        </td>
+        <td>
+            <span v-if="result.isOk" :class="result.color">{{result.costMs}}ms</span>
+            <span v-else class="disabled">-</span>
         </td>
-        <td>{{result.costMs}}ms</td>
         <td>
             <span v-if="!result.isOk" class="red">{{result.error}}</span>
             <span v-else class="disabled">-</span>

web/views/@default/clusters/monitors/reporters/reporter/results.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
+		}
+	})
+})

web/views/@default/clusters/monitors/reporters/reporter/update.html

@@ -6,11 +6,17 @@
     <input type="hidden" name="reporterId" :value="reporter.id"/>
     <table class="ui table definition selectable">
         <tr>
-            <td class="title">名称 *</td>
+            <td class="title">终端名称 *</td>
             <td>
                 <input type="text" name="name" maxlength="50" ref="focus" v-model="reporter.name"/>
             </td>
         </tr>
+        <tr>
+            <td>所属分组</td>
+            <td>
+                <report-node-groups-selector :v-group-ids="reporter.groupIds"></report-node-groups-selector>
+            </td>
+        </tr>
         <tr>
             <td colspan="2"><more-options-indicator></more-options-indicator></td>
         </tr>

web/views/@default/dashboard/boards/index.html

@@ -35,6 +35,10 @@
     <i class="icon warning circle"></i>
     <a href="/ns/clusters">升级提醒：有 {{nsNodeUpgradeInfo.count}} 个DNS节点需要升级到 v{{nsNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
 </div>
+<div class="ui icon message error" v-if="!isLoading && reportNodeUpgradeInfo.count > 0 && teaIsPlus">
+    <i class="icon warning circle"></i>
+    <a href="/clusters/monitors/reporters">升级提醒：有 {{reportNodeUpgradeInfo.count}} 个区域监控终端需要升级到 v{{reportNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
+</div>
 <div class="ui icon message error" v-if="!isLoading && authorityNodeUpgradeInfo.count > 0 && teaIsPlus">
     <i class="icon warning circle"></i>
     <a href="/settings/authority/nodes">升级提醒：有 {{authorityNodeUpgradeInfo.count}} 个企业版认证节点需要升级到 v{{authorityNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>