在网站设置中显示流量相关限制状态

internal/web/actions/default/servers/server/settings/index.go

@@ -1,6 +1,7 @@
 package settings
 
 import (
+	"encoding/json"
 	"errors"
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/langs/codes"
@@ -32,7 +33,7 @@ func (this *IndexAction) RunGet(params struct {
 		this.ErrorPage(err)
 		return
 	}
-	clusterMaps := []maps.Map{}
+	var clusterMaps = []maps.Map{}
 	for _, cluster := range resp.NodeClusters {
 		clusterMaps = append(clusterMaps, maps.Map{
 			"id":   cluster.Id,
@@ -50,7 +51,7 @@ func (this *IndexAction) RunGet(params struct {
 		this.ErrorPage(err)
 		return
 	}
-	server := serverResp.Server
+	var server = serverResp.Server
 	if server == nil {
 		this.NotFound("server", params.ServerId)
 		return
@@ -71,7 +72,7 @@ func (this *IndexAction) RunGet(params struct {
 	this.initUserPlan(server)
 
 	// 集群
-	clusterId := int64(0)
+	var clusterId = int64(0)
 	this.Data["clusterName"] = ""
 	if server.NodeCluster != nil {
 		clusterId = server.NodeCluster.Id
@@ -79,7 +80,7 @@ func (this *IndexAction) RunGet(params struct {
 	}
 
 	// 分组
-	groupMaps := []maps.Map{}
+	var groupMaps = []maps.Map{}
 	if len(server.ServerGroups) > 0 {
 		for _, group := range server.ServerGroups {
 			groupMaps = append(groupMaps, maps.Map{
@@ -89,23 +90,36 @@ func (this *IndexAction) RunGet(params struct {
 		}
 	}
 
-	this.Data["server"] = maps.Map{
+	// 域名和限流状态
-		"id":          server.Id,
+	var trafficLimitStatus *serverconfigs.TrafficLimitStatus
-		"clusterId":   clusterId,
+	if len(server.Config) > 0 {
-		"type":        server.Type,
+		var serverConfig = &serverconfigs.ServerConfig{}
-		"name":        server.Name,
+		err = json.Unmarshal(server.Config, serverConfig)
-		"description": server.Description,
+		if err == nil {
-		"isOn":        server.IsOn,
+			if serverConfig.TrafficLimitStatus != nil && serverConfig.TrafficLimitStatus.IsValid() {
-		"groups":      groupMaps,
+				trafficLimitStatus = serverConfig.TrafficLimitStatus
+			}
+		}
 	}
 
-	serverType := serverconfigs.FindServerType(server.Type)
+	this.Data["server"] = maps.Map{
+		"id":                 server.Id,
+		"clusterId":          clusterId,
+		"type":               server.Type,
+		"name":               server.Name,
+		"description":        server.Description,
+		"isOn":               server.IsOn,
+		"groups":             groupMaps,
+		"trafficLimitStatus": trafficLimitStatus,
+	}
+
+	var serverType = serverconfigs.FindServerType(server.Type)
 	if serverType == nil {
 		this.ErrorPage(errors.New("invalid server type '" + server.Type + "'"))
 		return
 	}
 
-	typeName := serverType.GetString("name")
+	var typeName = serverType.GetString("name")
 	this.Data["typeName"] = typeName
 
 	// 记录最近使用

web/public/js/components/server/server-traffic-limit-status-viewer.js

@@ -0,0 +1,32 @@
+Vue.component("server-traffic-limit-status-viewer", {
+	props: ["value"],
+	data: function () {
+		let targetTypeName = "流量"
+		if (this.value != null) {
+			targetTypeName = this.targetTypeToName(this.value.targetType)
+		}
+
+		return {
+			status: this.value,
+			targetTypeName: targetTypeName
+		}
+	},
+	methods: {
+		targetTypeToName: function (targetType) {
+			switch (targetType) {
+				case "traffic":
+					return "流量"
+				case "request":
+					return "请求数"
+				case "websocketConnections":
+					return "Websocket连接数"
+			}
+			return "流量"
+		}
+	},
+	template: `<span v-if="status != null">
+	<span v-if="status.dateType == 'day'" class="small red">已达到<span v-if="status.planId > 0">套餐</span>当日{{targetTypeName}}限制</span>
+	<span v-if="status.dateType == 'month'" class="small red">已达到<span v-if="status.planId > 0">套餐</span>当月{{targetTypeName}}限制</span>
+	<span v-if="status.dateType == 'total'" class="small red">已达到<span v-if="status.planId > 0">套餐</span>总体{{targetTypeName}}限制</span>
+</span>`
+})

web/views/@default/servers/server/settings/index.html

@@ -3,6 +3,13 @@
 {$template "/left_menu_with_menu"}
 
 <div class="right-box with-menu">
+    <div v-if="server.trafficLimitStatus != null">
+        <div class="ui margin"></div>
+        <warning-message>
+            <server-traffic-limit-status-viewer v-model="server.trafficLimitStatus"></server-traffic-limit-status-viewer>
+        </warning-message>
+    </div>
+
 	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
 		<input type="hidden" name="serverId" :value="server.id"/>
 		<table class="ui table selectable definition">