指标增加一些易读的名称等信息

internal/web/actions/default/servers/metrics/charts/chartutils/utils.go

@@ -32,7 +32,7 @@ func InitChart(parent *actionutils.ParentAction, chartId int64) (*pb.MetricChart
 		"widthDiv": chart.WidthDiv,
 		"maxItems": chart.MaxItems,
 		"type":     chart.Type,
-		"typeName": serverconfigs.FindAllMetricChartTypeName(chart.Type),
+		"typeName": serverconfigs.FindMetricChartTypeName(chart.Type),
 	}
 	return chart, nil
 }

internal/web/actions/default/servers/metrics/charts/index.go

@@ -52,7 +52,7 @@ func (this *IndexAction) RunGet(params struct {
 			"id":       chart.Id,
 			"name":     chart.Name,
 			"type":     chart.Type,
-			"typeName": serverconfigs.FindAllMetricChartTypeName(chart.Type),
+			"typeName": serverconfigs.FindMetricChartTypeName(chart.Type),
 			"isOn":     chart.IsOn,
 			"widthDiv": chart.WidthDiv,
 		})

internal/web/actions/default/servers/metrics/index.go

@@ -5,6 +5,7 @@ package metrics
 import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
 	"github.com/iwind/TeaGo/maps"
 )
 
@@ -45,14 +46,16 @@ func (this *IndexAction) RunGet(params struct {
 	var itemMaps = []maps.Map{}
 	for _, item := range itemsResp.MetricItems {
 		itemMaps = append(itemMaps, maps.Map{
-			"id":         item.Id,
+			"id":             item.Id,
-			"name":       item.Name,
+			"name":           item.Name,
-			"isOn":       item.IsOn,
+			"isOn":           item.IsOn,
-			"period":     item.Period,
+			"period":         item.Period,
-			"periodUnit": item.PeriodUnit,
+			"periodUnit":     item.PeriodUnit,
-			"keys":       item.Keys,
+			"periodUnitName": serverconfigs.FindMetricPeriodUnitName(item.PeriodUnit),
-			"value":      item.Value,
+			"keys":           item.Keys,
-			"category":   item.Category,
+			"value":          item.Value,
+			"valueName":      serverconfigs.FindMetricValueName(item.Category, item.Value),
+			"category":       item.Category,
 		})
 	}
 	this.Data["items"] = itemMaps

internal/web/actions/default/servers/metrics/metricutils/utils.go

@@ -7,6 +7,7 @@ import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/rpc"
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
 	"github.com/iwind/TeaGo/maps"
 )
 
@@ -25,14 +26,16 @@ func InitItem(parent *actionutils.ParentAction, itemId int64) (*pb.MetricItem, e
 		return nil, errors.New("metric item not found")
 	}
 	parent.Data["item"] = maps.Map{
-		"id":         item.Id,
+		"id":             item.Id,
-		"name":       item.Name,
+		"name":           item.Name,
-		"isOn":       item.IsOn,
+		"isOn":           item.IsOn,
-		"keys":       item.Keys,
+		"keys":           item.Keys,
-		"value":      item.Value,
+		"value":          item.Value,
-		"period":     item.Period,
+		"valueName":      serverconfigs.FindMetricValueName(item.Category, item.Value),
-		"periodUnit": item.PeriodUnit,
+		"period":         item.Period,
-		"category":   item.Category,
+		"periodUnit":     item.PeriodUnit,
+		"periodUnitName": serverconfigs.FindMetricPeriodUnitName(item.PeriodUnit),
+		"category":       item.Category,
 	}
 	return item, nil
 }

internal/web/actions/default/ui/components.go

@@ -6,6 +6,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/server/settings/conds/condutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
 	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs/shared"
 	"github.com/iwind/TeaGo/Tea"
 	"github.com/iwind/TeaGo/actions"
@@ -91,6 +92,16 @@ func (this *ComponentsAction) RunGet(params struct{}) {
 		buffer.Write([]byte{'\n', '\n'})
 	}
 
+	// 指标
+	metricHTTPKeysJSON, err := json.Marshal(serverconfigs.FindAllMetricKeyDefinitions(serverconfigs.MetricItemCategoryHTTP))
+	if err != nil {
+		logs.Println("ComponentsAction marshal metric http keys failed: " + err.Error())
+	} else {
+		buffer.WriteString("window.METRIC_HTTP_KEYS = ")
+		buffer.Write(metricHTTPKeysJSON)
+		buffer.Write([]byte{'\n', '\n'})
+	}
+
 	componentsData = buffer.Bytes()
 
 	// ETag

web/public/js/components/server/metric-key-label.js

@@ -0,0 +1,53 @@
+// 显示指标对象名
+Vue.component("metric-key-label", {
+	props: ["v-key"],
+	data: function () {
+		return {
+			keyDefs: window.METRIC_HTTP_KEYS
+		}
+	},
+	methods: {
+		keyName: function (key) {
+			let that = this
+			let subKey = ""
+			let def = this.keyDefs.$find(function (k, v) {
+				if (v.code == key) {
+					return true
+				}
+				if (key.startsWith("${arg.") && v.code.startsWith("${arg.")) {
+					subKey = that.getSubKey("arg.", key)
+					return true
+				}
+				if (key.startsWith("${header.") && v.code.startsWith("${header.")) {
+					subKey = that.getSubKey("header.", key)
+					return true
+				}
+				if (key.startsWith("${cookie.") && v.code.startsWith("${cookie.")) {
+					subKey = that.getSubKey("cookie.", key)
+					return true
+				}
+				return false
+			})
+			if (def != null) {
+				if (subKey.length > 0) {
+					return def.name + ": " + subKey
+				}
+				return def.name
+			}
+			return key
+		},
+		getSubKey: function (prefix, key) {
+			prefix = "${" + prefix
+			let index = key.indexOf(prefix)
+			if (index >= 0) {
+				key = key.substring(index + prefix.length)
+				key = key.substring(0, key.length - 1)
+				return key
+			}
+			return ""
+		}
+	},
+	template: `<div class="ui label basic small">
+	{{keyName(this.vKey)}}
+</div>`
+})

web/public/js/components/server/metric-keys-config-box.js

@@ -9,48 +9,129 @@ Vue.component("metric-keys-config-box", {
 		return {
 			keys: keys,
 			isAdding: false,
-			key: ""
+			key: "",
+			subKey: "",
+			keyDescription: "",
+
+			keyDefs: window.METRIC_HTTP_KEYS
 		}
 	},
 	methods: {
 		cancel: function () {
 			this.key = ""
+			this.subKey = ""
+			this.keyDescription = ""
 			this.isAdding = false
 		},
 		confirm: function () {
-			if (this.key.length > 0) {
+			if (this.key.length == 0) {
-				this.keys.push(this.key)
+				return
-				this.cancel()
 			}
+
+			if (this.key.indexOf(".NAME") > 0) {
+				if (this.subKey.length == 0) {
+					teaweb.warn("请输入参数值")
+					return
+				}
+				this.key = this.key.replace(".NAME", "." + this.subKey)
+			}
+			this.keys.push(this.key)
+			this.cancel()
 		},
 		add: function () {
 			this.isAdding = true
 			let that = this
 			setTimeout(function () {
-				that.$refs.key.focus()
+				if (that.$refs.key != null) {
+					that.$refs.key.focus()
+				}
 			}, 100)
 		},
 		remove: function (index) {
 			this.keys.$remove(index)
+		},
+		changeKey: function () {
+			if (this.key.length == 0) {
+				return
+			}
+			let that = this
+			let def = this.keyDefs.$find(function (k, v) {
+				return v.code == that.key
+			})
+			if (def != null) {
+				this.keyDescription = def.description
+			}
+		},
+		keyName: function (key) {
+			let that = this
+			let subKey = ""
+			let def = this.keyDefs.$find(function (k, v) {
+				if (v.code == key) {
+					return true
+				}
+				if (key.startsWith("${arg.") && v.code.startsWith("${arg.")) {
+					subKey = that.getSubKey("arg.", key)
+					return true
+				}
+				if (key.startsWith("${header.") && v.code.startsWith("${header.")) {
+					subKey = that.getSubKey("header.", key)
+					return true
+				}
+				if (key.startsWith("${cookie.") && v.code.startsWith("${cookie.")) {
+					subKey = that.getSubKey("cookie.", key)
+					return true
+				}
+				return false
+			})
+			if (def != null) {
+				if (subKey.length > 0) {
+					return def.name + ": " + subKey
+				}
+				return def.name
+			}
+			return key
+		},
+		getSubKey: function (prefix, key) {
+			prefix = "${" + prefix
+			let index = key.indexOf(prefix)
+			if (index >= 0) {
+				key = key.substring(index + prefix.length)
+				key = key.substring(0, key.length - 1)
+				return key
+			}
+			return ""
 		}
 	},
 	template: `<div>
 	<input type="hidden" name="keysJSON" :value="JSON.stringify(keys)"/>
 	<div>
 		<div v-for="(key, index) in keys" class="ui label small basic">
-			{{key}} &nbsp; <a href="" title="删除" @click.prevent="remove"><i class="icon remove small"></i></a>
+			{{keyName(key)}} &nbsp; <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
 		</div>
 	</div>
 	<div v-if="isAdding" style="margin-top: 1em">
 		<div class="ui fields inline">
 			<div class="ui field">
-				<input type="text" v-model="key" ref="key" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
+				<select class="ui dropdown" v-model="key" @change="changeKey">
+					<option value="">[选择对象]</option>
+					<option v-for="def in keyDefs" :value="def.code">{{def.name}}</option>
+				</select>
+			</div>
+			<div class="ui field" v-if="key == '\${arg.NAME}'">
+				<input type="text" v-model="subKey" placeholder="参数名" size="15"/>
+			</div>
+			<div class="ui field" v-if="key == '\${header.NAME}'">
+				<input type="text" v-model="subKey" placeholder="Header名" size="15">
+			</div>
+			<div class="ui field" v-if="key == '\${cookie.NAME}'">
+				<input type="text" v-model="subKey" placeholder="Cookie名" size="15">
 			</div>
 			<div class="ui field">
 				<button type="button" class="ui button tiny" @click.prevent="confirm">确定</button>
 				<a href="" @click.prevent="cancel"><i class="icon remove small"></i></a>
 			</div>
 		</div>
+		<p class="comment" v-if="keyDescription.length > 0">{{keyDescription}}</p>
 	</div>
 	<div style="margin-top: 1em" v-if="!isAdding">
 		<button type="button" class="ui button tiny" @click.prevent="add">+</button>

web/views/@default/@layout.css

@@ -672,4 +672,7 @@ td {
 .scroll-box::-webkit-scrollbar {
   width: 4px;
 }
+input.error {
+  border: 1px #e0b4b4 solid !important;
+}
 /*# sourceMappingURL=@layout.css.map */

web/views/@default/@layout.less

@@ -750,3 +750,8 @@ td {
 .scroll-box::-webkit-scrollbar {
 	width: 4px;
 }
+
+// input
+input.error {
+	border: 1px #e0b4b4 solid !important;
+}

web/views/@default/@layout_popup.css

@@ -269,7 +269,6 @@ var.dash {
 .page a:hover {
   background: #eee;
 }
-/** popup **/
 .swal2-html-container {
   overflow-x: hidden;
 }
@@ -286,4 +285,7 @@ var.dash {
 .swal2-cancel {
   margin-left: 2em !important;
 }
+input.error {
+  border: 1px #e0b4b4 solid !important;
+}
 /*# sourceMappingURL=@layout_popup.css.map */

web/views/@default/@layout_popup.css.map

@@ -1 +1 @@
-{"version":3,"sources":["@layout_popup.less"],"names":[],"mappings":"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","file":"@layout_popup.css"}
+{"version":3,"sources":["@layout_popup.less"],"names":[],"mappings":"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","file":"@layout_popup.css"}

web/views/@default/@layout_popup.less

@@ -328,7 +328,7 @@ var.dash {
 	}
 }
 
-/** popup **/
+// popup
 .swal2-html-container {
 	overflow-x: hidden;
 }
@@ -344,3 +344,8 @@ var.dash {
 .swal2-cancel {
 	margin-left: 2em !important;
 }
+
+// input
+input.error {
+	border: 1px #e0b4b4 solid !important;
+}

web/views/@default/servers/metrics/index.html

@@ -25,13 +25,13 @@
     <tr v-for="item in items">
         <td>{{item.name}}</td>
         <td>
-            <span v-if="item.keys != null" v-for="key in item.keys" class="ui label basic small">{{key}}</span>
+            <div v-if="item.keys != null" v-for="key in item.keys" style="margin-bottom: 0.3em; margin-top: 0.3em"><metric-key-label :v-key="key"></metric-key-label></div>
         </td>
         <td>
-            {{item.period}} {{item.periodUnit}}
+            {{item.period}} {{item.periodUnitName}}
         </td>
         <td>
-            <span class="ui label small basic">{{item.value}}</span>
+            <span class="ui label small basic">{{item.valueName}}</span>
         </td>
         <td>
             <label-on :v-is-on="item.isOn"></label-on>

web/views/@default/servers/metrics/index.js

@@ -6,7 +6,8 @@ Tea.context(function () {
 					teaweb.reload()
 				})
 			},
-			height: "26em"
+			height: "26em",
+			width: "44em"
 		})
 	}
 

web/views/@default/servers/metrics/item.html

@@ -15,19 +15,19 @@
     <tr>
         <td>统计对象</td>
         <td>
-            <span v-for="key in item.keys" class="ui label small basic">{{key}}</span>
+            <span v-for="key in item.keys" style="margin-right: 0.5em"><metric-key-label :v-key="key"></metric-key-label></span>
         </td>
     </tr>
     <tr>
         <td>统计周期</td>
         <td>
-            {{item.period}} {{item.periodUnit}}
+            {{item.period}} {{item.periodUnitName}}
         </td>
     </tr>
     <tr>
         <td>统计数值</td>
         <td>
-            {{item.value}}
+            <span class="ui label small basic">{{item.valueName}}</span>
         </td>
     </tr>
 </table>