节点列表增加连接数列

2025-11-04 05:00:25 +08:00 · 2023-03-15 17:57:32 +08:00
parent 96543ad479
commit 8bd0fabb55
6 changed files with 106 additions and 56 deletions
--- a/internal/web/actions/default/clusters/cluster/nodes.go
+++ b/internal/web/actions/default/clusters/cluster/nodes.go
@@ -37,6 +37,7 @@ func (this *NodesAction) RunGet(params struct {
 	TrafficInOrder   string
 	TrafficOutOrder  string
 	LoadOrder        string
+	ConnectionsOrder string
 }) {
 	this.Data["groupId"] = params.GroupId
 	this.Data["regionId"] = params.RegionId
@@ -44,7 +45,7 @@ func (this *NodesAction) RunGet(params struct {
 	this.Data["activeState"] = params.ActiveState
 	this.Data["keyword"] = params.Keyword
 	this.Data["level"] = params.Level
-	this.Data["hasOrder"] = len(params.CpuOrder) > 0 || len(params.MemoryOrder) > 0 || len(params.TrafficInOrder) > 0 || len(params.TrafficOutOrder) > 0 || len(params.LoadOrder) > 0
+	this.Data["hasOrder"] = len(params.CpuOrder) > 0 || len(params.MemoryOrder) > 0 || len(params.TrafficInOrder) > 0 || len(params.TrafficOutOrder) > 0 || len(params.LoadOrder) > 0 || len(params.ConnectionsOrder) > 0

 	// 集群是否已经设置了线路
 	clusterDNSResp, err := this.RPC().NodeClusterRPC().FindEnabledNodeClusterDNS(this.AdminContext(), &pb.FindEnabledNodeClusterDNSRequest{NodeClusterId: params.ClusterId})
@@ -112,6 +113,10 @@ func (this *NodesAction) RunGet(params struct {
 		req.LoadAsc = true
 	} else if params.LoadOrder == "desc" {
 		req.LoadDesc = true
+	} else if params.ConnectionsOrder == "asc" {
+		req.ConnectionsAsc = true
+	} else if params.ConnectionsOrder == "desc" {
+		req.ConnectionsDesc = true
 	}
 	nodesResp, err := this.RPC().NodeRPC().ListEnabledNodesMatch(this.AdminContext(), req)
 	if err != nil {
@@ -121,8 +126,8 @@ func (this *NodesAction) RunGet(params struct {
 	var nodeMaps = []maps.Map{}
 	for _, node := range nodesResp.Nodes {
 		// 状态
-		isSynced := false
-		status := &nodeconfigs.NodeStatus{}
+		var isSynced = false
+		var status = &nodeconfigs.NodeStatus{}
 		if len(node.StatusJSON) > 0 {
 			err = json.Unmarshal(node.StatusJSON, &status)
 			if err != nil {
@@ -221,6 +226,7 @@ func (this *NodesAction) RunGet(params struct {
 				"trafficInBytes":   status.TrafficInBytes,
 				"trafficOutBytes":  status.TrafficOutBytes,
 				"load1m":           numberutils.FormatFloat2(status.Load1m),
+				"countConnections": status.ConnectionCount,
 			},
 			"cluster": maps.Map{
 				"id":   node.NodeCluster.Id,
--- a/internal/web/actions/default/clusters/nodes.go
+++ b/internal/web/actions/default/clusters/nodes.go
@@ -38,6 +38,7 @@ func (this *NodesAction) RunGet(params struct {
 	TrafficInOrder   string
 	TrafficOutOrder  string
 	LoadOrder        string
+	ConnectionsOrder string
 }) {
 	this.Data["groupId"] = params.GroupId
 	this.Data["regionId"] = params.RegionId
@@ -46,7 +47,7 @@ func (this *NodesAction) RunGet(params struct {
 	this.Data["keyword"] = params.Keyword
 	this.Data["level"] = params.Level
 	this.Data["clusterId"] = params.ClusterId
-	this.Data["hasOrder"] = len(params.CpuOrder) > 0 || len(params.MemoryOrder) > 0 || len(params.TrafficInOrder) > 0 || len(params.TrafficOutOrder) > 0 || len(params.LoadOrder) > 0
+	this.Data["hasOrder"] = len(params.CpuOrder) > 0 || len(params.MemoryOrder) > 0 || len(params.TrafficInOrder) > 0 || len(params.TrafficOutOrder) > 0 || len(params.LoadOrder) > 0 || len(params.ConnectionsOrder) > 0

 	// 集群是否已经设置了线路
 	clusterDNSResp, err := this.RPC().NodeClusterRPC().FindEnabledNodeClusterDNS(this.AdminContext(), &pb.FindEnabledNodeClusterDNSRequest{NodeClusterId: params.ClusterId})
@@ -114,6 +115,10 @@ func (this *NodesAction) RunGet(params struct {
 		req.LoadAsc = true
 	} else if params.LoadOrder == "desc" {
 		req.LoadDesc = true
+	} else if params.ConnectionsOrder == "asc" {
+		req.ConnectionsAsc = true
+	} else if params.ConnectionsOrder == "desc" {
+		req.ConnectionsDesc = true
 	}
 	nodesResp, err := this.RPC().NodeRPC().ListEnabledNodesMatch(this.AdminContext(), req)
 	if err != nil {
@@ -123,8 +128,8 @@ func (this *NodesAction) RunGet(params struct {
 	var nodeMaps = []maps.Map{}
 	for _, node := range nodesResp.Nodes {
 		// 状态
-		isSynced := false
-		status := &nodeconfigs.NodeStatus{}
+		var isSynced = false
+		var status = &nodeconfigs.NodeStatus{}
 		if len(node.StatusJSON) > 0 {
 			err = json.Unmarshal(node.StatusJSON, &status)
 			if err != nil {
@@ -223,6 +228,7 @@ func (this *NodesAction) RunGet(params struct {
 				"trafficInBytes":   status.TrafficInBytes,
 				"trafficOutBytes":  status.TrafficOutBytes,
 				"load1m":           numberutils.FormatFloat2(status.Load1m),
+				"countConnections": status.ConnectionCount,
 			},
 			"cluster": maps.Map{
 				"id":   node.NodeCluster.Id,
--- a/web/views/@default/clusters/cluster/nodes.html
+++ b/web/views/@default/clusters/cluster/nodes.html
@@ -64,10 +64,11 @@
 		<th>节点名称</th>
 		<th>IP</th>
 		<th class="width10">DNS线路</th>
-		<th class="width5 center">CPU<sort-arrow name="cpuOrder"></sort-arrow></th>
-		<th class="width5 center">内存<sort-arrow name="memoryOrder"></sort-arrow></th>
-		<th class="center" style="width: 7em">下行带宽<sort-arrow name="trafficOutOrder"></sort-arrow></th>
-        <th class="center" style="width: 7em">负载<sort-arrow name="loadOrder"></sort-arrow></th>
+		<th class="width5 center" v-if="windowWidth < miniWidth || windowWidth > columnWidth1">CPU<sort-arrow name="cpuOrder"></sort-arrow></th>
+		<th class="width5 center" v-if="windowWidth < miniWidth || windowWidth > columnWidth2">内存<sort-arrow name="memoryOrder"></sort-arrow></th>
+		<th class="center" style="width: 7em" v-if="windowWidth < miniWidth || windowWidth > columnWidth3">下行带宽<sort-arrow name="trafficOutOrder"></sort-arrow></th>
+        <th class="center" style="width: 7em" v-if="windowWidth < miniWidth || windowWidth > columnWidth4">连接数<sort-arrow name="connectionsOrder"></sort-arrow></th>
+        <th class="center" style="width: 7em" v-if="windowWidth < miniWidth || windowWidth > columnWidth5">负载<sort-arrow name="loadOrder"></sort-arrow></th>
 		<th class="two wide center">状态</th>
 		<th class="two op">操作</th>
 	</tr>
@@ -117,20 +118,24 @@
            </span>
 			<span v-else class="disabled">-</span>
 		</td>
-		<td class="center">
+		<td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth1">
 			<span v-if="node.status.isActive" :class="{red:node.status.cpuUsage > 0.50}">{{node.status.cpuUsageText}}</span>
 			<span v-else class="disabled">-</span>
 		</td>
-		<td class="center">
+		<td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth2">
 			<span v-if="node.status.isActive" :class="{red:node.status.memUsage > 0.80}">{{node.status.memUsageText}}</span>
 			<span v-else class="disabled">-</span>
 		</td>
-        <td class="center">
+        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth3">
            <span v-if="node.status.isActive && node.status.trafficOutBytes > 0">{{teaweb.formatBits(node.status.trafficOutBytes * 8/60)}}</span>
            <span v-else class="disabled">-</span>
        </td>
-        <td class="center">
-            <span v-if="node.status.isActive">{{node.status.load1m}}</span>
+        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth4">
+            <span v-if="node.status.isActive && node.status.countConnections > 0">{{node.status.countConnections}}</span>
+            <span v-else class="disabled">-</span>
+        </td>
+        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth5">
+            <span v-if="node.status.isActive && node.status.load1m > 0">{{node.status.load1m}}</span>
            <span v-else class="disabled">-</span>
        </td>
 		<td class="center">
--- a/web/views/@default/clusters/cluster/nodes.js
+++ b/web/views/@default/clusters/cluster/nodes.js
@@ -1,6 +1,20 @@
 Tea.context(function () {
 	this.teaweb = teaweb

+	// 显示的统计项
+	this.windowWidth = window.innerWidth
+	this.miniWidth = 760
+	this.columnWidth1 = 800
+	this.columnWidth2 = 900
+	this.columnWidth3 = 1000
+	this.columnWidth4 = 1100
+	this.columnWidth5 = 1200
+
+	let that = this
+	window.addEventListener("resize", function () {
+		that.windowWidth = window.innerWidth
+	})
+
 	this.deleteNode = function (nodeId) {
 		teaweb.confirm("确定要从当前集群中删除这个节点吗？", function () {
 			this.$post("/nodes/delete")
--- a/web/views/@default/clusters/nodes.html
+++ b/web/views/@default/clusters/nodes.html
@@ -58,10 +58,11 @@
        <th>节点名称</th>
        <th>IP</th>
        <th class="width10">DNS线路</th>
-        <th class="width5 center">CPU<sort-arrow name="cpuOrder"></sort-arrow></th>
-        <th class="width5 center">内存<sort-arrow name="memoryOrder"></sort-arrow></th>
-        <th class="center" style="width: 7em">下行带宽<sort-arrow name="trafficOutOrder"></sort-arrow></th>
-        <th class="center" style="width: 7em">负载<sort-arrow name="loadOrder"></sort-arrow></th>
+        <th class="width5 center" v-if="windowWidth < miniWidth || windowWidth > columnWidth1">CPU<sort-arrow name="cpuOrder"></sort-arrow></th>
+        <th class="width5 center" v-if="windowWidth < miniWidth || windowWidth > columnWidth2">内存<sort-arrow name="memoryOrder"></sort-arrow></th>
+        <th class="center" style="width: 7em" v-if="windowWidth < miniWidth || windowWidth > columnWidth3">下行带宽<sort-arrow name="trafficOutOrder"></sort-arrow></th>
+        <th class="center" style="width: 7em" v-if="windowWidth < miniWidth || windowWidth > columnWidth4">连接数<sort-arrow name="connectionsOrder"></sort-arrow></th>
+        <th class="center" style="width: 7em" v-if="windowWidth < miniWidth || windowWidth > columnWidth5">负载<sort-arrow name="loadOrder"></sort-arrow></th>
        <th class="two wide center">状态</th>
        <th class="one op">操作</th>
    </tr>
@@ -111,20 +112,24 @@
            </span>
            <span v-else class="disabled">-</span>
        </td>
-        <td class="center">
-            <span v-if="node.status.isActive" :class="{red:node.status.cpuUsage > 0.50}">{{node.status.cpuUsageText}}%</span>
+        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth1">
+            <span v-if="node.status.isActive" :class="{red:node.status.cpuUsage > 0.50}">{{node.status.cpuUsageText}}</span>
            <span v-else class="disabled">-</span>
        </td>
-        <td class="center">
-            <span v-if="node.status.isActive" :class="{red:node.status.memUsage > 0.80}">{{node.status.memUsageText}}%</span>
+        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth2">
+            <span v-if="node.status.isActive" :class="{red:node.status.memUsage > 0.80}">{{node.status.memUsageText}}</span>
            <span v-else class="disabled">-</span>
        </td>
-        <td class="center">
+        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth3">
            <span v-if="node.status.isActive && node.status.trafficOutBytes > 0">{{teaweb.formatBits(node.status.trafficOutBytes * 8/60)}}</span>
            <span v-else class="disabled">-</span>
        </td>
-        <td class="center">
-            <span v-if="node.status.isActive">{{node.status.load1m}}<span class="grey small"></span></span>
+        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth4">
+            <span v-if="node.status.isActive && node.status.countConnections > 0">{{node.status.countConnections}}</span>
+            <span v-else class="disabled">-</span>
+        </td>
+        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth5">
+            <span v-if="node.status.isActive && node.status.load1m > 0">{{node.status.load1m}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td class="center">
--- a/web/views/@default/clusters/nodes.js
+++ b/web/views/@default/clusters/nodes.js
@@ -1,6 +1,20 @@
 Tea.context(function () {
 	this.teaweb = teaweb

+	// 显示的统计项
+	this.windowWidth = window.innerWidth
+	this.miniWidth = 760
+	this.columnWidth1 = 800
+	this.columnWidth2 = 900
+	this.columnWidth3 = 1000
+	this.columnWidth4 = 1100
+	this.columnWidth5 = 1200
+
+	let that = this
+	window.addEventListener("resize", function () {
+		that.windowWidth = window.innerWidth
+	})
+
 	this.deleteNode = function (nodeId) {
 		teaweb.confirm("确定要删除这个节点吗？", function () {
 			this.$post("/cluster/nodes/delete")