Dashboard增加指标图表

internal/web/actions/default/clusters/cluster/boards/index.go

@@ -143,7 +143,7 @@ func (this *IndexAction) RunGet(params struct {
 	// 指标
 	{
 		var chartMaps = []maps.Map{}
-		for _, chart := range resp.MetricCharts {
+		for _, chart := range resp.MetricDataCharts {
 			var statMaps = []maps.Map{}
 			for _, stat := range chart.MetricStats {
 				statMaps = append(statMaps, maps.Map{
@@ -164,11 +164,12 @@ func (this *IndexAction) RunGet(params struct {
 					"type":     chart.MetricChart.Type,
 				},
 				"item": maps.Map{
-					"id":         chart.MetricChart.MetricItem.Id,
-					"name":       chart.MetricChart.MetricItem.Name,
-					"period":     chart.MetricChart.MetricItem.Period,
-					"periodUnit": chart.MetricChart.MetricItem.PeriodUnit,
-					"valueType":  serverconfigs.FindMetricValueType(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
+					"id":            chart.MetricChart.MetricItem.Id,
+					"name":          chart.MetricChart.MetricItem.Name,
+					"period":        chart.MetricChart.MetricItem.Period,
+					"periodUnit":    chart.MetricChart.MetricItem.PeriodUnit,
+					"valueType":     serverconfigs.FindMetricValueType(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
+					"valueTypeName": serverconfigs.FindMetricValueName(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
 				},
 				"stats": statMaps,
 			})

internal/web/actions/default/clusters/cluster/node/boards/index.go

@@ -165,7 +165,7 @@ func (this *IndexAction) RunGet(params struct {
 	// 指标
 	{
 		var chartMaps = []maps.Map{}
-		for _, chart := range resp.MetricCharts {
+		for _, chart := range resp.MetricDataCharts {
 			var statMaps = []maps.Map{}
 			for _, stat := range chart.MetricStats {
 				statMaps = append(statMaps, maps.Map{
@@ -186,11 +186,12 @@ func (this *IndexAction) RunGet(params struct {
 					"type":     chart.MetricChart.Type,
 				},
 				"item": maps.Map{
-					"id":         chart.MetricChart.MetricItem.Id,
-					"name":       chart.MetricChart.MetricItem.Name,
-					"period":     chart.MetricChart.MetricItem.Period,
-					"periodUnit": chart.MetricChart.MetricItem.PeriodUnit,
-					"valueType":  serverconfigs.FindMetricValueType(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
+					"id":            chart.MetricChart.MetricItem.Id,
+					"name":          chart.MetricChart.MetricItem.Name,
+					"period":        chart.MetricChart.MetricItem.Period,
+					"periodUnit":    chart.MetricChart.MetricItem.PeriodUnit,
+					"valueType":     serverconfigs.FindMetricValueType(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
+					"valueTypeName": serverconfigs.FindMetricValueName(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
 				},
 				"stats": statMaps,
 			})

internal/web/actions/default/dashboard/boards/index.go

@@ -8,6 +8,7 @@ import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/utils/numberutils"
 	"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"
 	"regexp"
 )
@@ -206,5 +207,42 @@ func (this *IndexAction) RunGet(params struct{}) {
 		}
 	}
 
+	// 指标
+	{
+		var chartMaps = []maps.Map{}
+		for _, chart := range resp.MetricDataCharts {
+			var statMaps = []maps.Map{}
+			for _, stat := range chart.MetricStats {
+				statMaps = append(statMaps, maps.Map{
+					"keys":  stat.Keys,
+					"time":  stat.Time,
+					"value": stat.Value,
+					"count": stat.SumCount,
+					"total": stat.SumTotal,
+				})
+			}
+			chartMaps = append(chartMaps, maps.Map{
+				"chart": maps.Map{
+					"id":       chart.MetricChart.Id,
+					"name":     chart.MetricChart.Name,
+					"widthDiv": chart.MetricChart.WidthDiv,
+					"isOn":     chart.MetricChart.IsOn,
+					"maxItems": chart.MetricChart.MaxItems,
+					"type":     chart.MetricChart.Type,
+				},
+				"item": maps.Map{
+					"id":            chart.MetricChart.MetricItem.Id,
+					"name":          chart.MetricChart.MetricItem.Name,
+					"period":        chart.MetricChart.MetricItem.Period,
+					"periodUnit":    chart.MetricChart.MetricItem.PeriodUnit,
+					"valueType":     serverconfigs.FindMetricValueType(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
+					"valueTypeName": serverconfigs.FindMetricValueName(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
+				},
+				"stats": statMaps,
+			})
+		}
+		this.Data["metricCharts"] = chartMaps
+	}
+
 	this.Show()
 }

internal/web/actions/default/dashboard/index.go

@@ -8,6 +8,7 @@ import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/utils/numberutils"
 	"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"
 	"regexp"
 )
@@ -167,5 +168,42 @@ func (this *IndexAction) RunGet(params struct{}) {
 		}
 	}
 
+	// 指标
+	{
+		var chartMaps = []maps.Map{}
+		for _, chart := range resp.MetricDataCharts {
+			var statMaps = []maps.Map{}
+			for _, stat := range chart.MetricStats {
+				statMaps = append(statMaps, maps.Map{
+					"keys":  stat.Keys,
+					"time":  stat.Time,
+					"value": stat.Value,
+					"count": stat.SumCount,
+					"total": stat.SumTotal,
+				})
+			}
+			chartMaps = append(chartMaps, maps.Map{
+				"chart": maps.Map{
+					"id":       chart.MetricChart.Id,
+					"name":     chart.MetricChart.Name,
+					"widthDiv": chart.MetricChart.WidthDiv,
+					"isOn":     chart.MetricChart.IsOn,
+					"maxItems": chart.MetricChart.MaxItems,
+					"type":     chart.MetricChart.Type,
+				},
+				"item": maps.Map{
+					"id":            chart.MetricChart.MetricItem.Id,
+					"name":          chart.MetricChart.MetricItem.Name,
+					"period":        chart.MetricChart.MetricItem.Period,
+					"periodUnit":    chart.MetricChart.MetricItem.PeriodUnit,
+					"valueType":     serverconfigs.FindMetricValueType(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
+					"valueTypeName": serverconfigs.FindMetricValueName(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
+				},
+				"stats": statMaps,
+			})
+		}
+		this.Data["metricCharts"] = chartMaps
+	}
+
 	this.Show()
 }

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

@@ -6,6 +6,8 @@ import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/metrics/charts/chartutils"
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/metrics/metricutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
+	"github.com/iwind/TeaGo/maps"
 )
 
 type ChartAction struct {
@@ -31,5 +33,8 @@ func (this *ChartAction) RunGet(params struct {
 		return
 	}
 
+	var itemMap = this.Data["item"].(maps.Map)
+	itemMap["valueTypeName"] = serverconfigs.FindMetricValueName(itemMap.GetString("category"), itemMap.GetString("value"))
+
 	this.Show()
 }

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

@@ -117,7 +117,7 @@ func (this *IndexAction) RunGet(params struct {
 	// 指标
 	{
 		var chartMaps = []maps.Map{}
-		for _, chart := range resp.MetricCharts {
+		for _, chart := range resp.MetricDataCharts {
 			var statMaps = []maps.Map{}
 			for _, stat := range chart.MetricStats {
 				statMaps = append(statMaps, maps.Map{
@@ -138,11 +138,12 @@ func (this *IndexAction) RunGet(params struct {
 					"type":     chart.MetricChart.Type,
 				},
 				"item": maps.Map{
-					"id":         chart.MetricChart.MetricItem.Id,
-					"name":       chart.MetricChart.MetricItem.Name,
-					"period":     chart.MetricChart.MetricItem.Period,
-					"periodUnit": chart.MetricChart.MetricItem.PeriodUnit,
-					"valueType":  serverconfigs.FindMetricValueType(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
+					"id":            chart.MetricChart.MetricItem.Id,
+					"name":          chart.MetricChart.MetricItem.Name,
+					"period":        chart.MetricChart.MetricItem.Period,
+					"periodUnit":    chart.MetricChart.MetricItem.PeriodUnit,
+					"valueType":     serverconfigs.FindMetricValueType(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
+					"valueTypeName": serverconfigs.FindMetricValueName(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
 				},
 				"stats": statMaps,
 			})

web/public/js/components/server/metric-charts.js

@@ -1,6 +1,6 @@
 // 指标图表
 Vue.component("metric-chart", {
-	props: ["v-chart", "v-stats", "v-period-unit", "v-value-type"],
+	props: ["v-chart", "v-stats", "v-item"],
 	mounted: function () {
 		this.load()
 	},
@@ -38,8 +38,10 @@ Vue.component("metric-chart", {
 		return {
 			chart: this.vChart,
 			stats: stats,
+			item: this.vItem,
 			width: widthPercent + "%",
-			chartId: "metric-chart-" + this.vChart.id
+			chartId: "metric-chart-" + this.vChart.id,
+			valueTypeName: (this.vItem != null && this.vItem.valueTypeName != null && this.vItem.valueTypeName.length > 0) ? this.vItem.valueTypeName : ""
 		}
 	},
 	methods: {
@@ -97,7 +99,8 @@ Vue.component("metric-chart", {
 						name: name,
 						type: "pie",
 						data: values,
-						areaStyle: {}
+						areaStyle: {},
+						color: ["#9DD3E8", "#B2DB9E", "#F39494", "#FBD88A", "#879BD7"]
 					}
 				]
 			})
@@ -111,7 +114,7 @@ Vue.component("metric-chart", {
 			})
 
 			let axis = {unit: "", divider: 1}
-			switch (this.vValueType) {
+			switch (this.item.valueType) {
 				case "count":
 					axis = teaweb.countAxis(values, function (v) {
 						return v
@@ -156,8 +159,8 @@ Vue.component("metric-chart", {
 					{
 						name: name,
 						type: "bar",
-						data: values.map(function (v){
-							return v/axis.divider
+						data: values.map(function (v) {
+							return v / axis.divider
 						}),
 						itemStyle: {
 							color: "#9DD3E8"
@@ -177,7 +180,7 @@ Vue.component("metric-chart", {
 			})
 
 			let axis = {unit: "", divider: 1}
-			switch (this.vValueType) {
+			switch (this.item.valueType) {
 				case "count":
 					axis = teaweb.countAxis(values, function (v) {
 						return v
@@ -238,7 +241,7 @@ Vue.component("metric-chart", {
 				return v.value
 			})
 			let axis = {unit: "", divider: 1}
-			switch (this.vValueType) {
+			switch (this.item.valueType) {
 				case "count":
 					axis = teaweb.countAxis(values, function (v) {
 						return v
@@ -328,7 +331,7 @@ Vue.component("metric-chart", {
 			if (time == null) {
 				return ""
 			}
-			switch (this.vPeriodUnit) {
+			switch (this.item.periodUnit) {
 				case "month":
 					return time.substring(0, 4) + "-" + time.substring(4, 6)
 				case "week":
@@ -344,7 +347,7 @@ Vue.component("metric-chart", {
 		}
 	},
 	template: `<div style="float: left" :style="{'width': width}">
-	<h4>{{chart.name}} <span>（指标）</span></h4>
+	<h4>{{chart.name}} <span>（{{valueTypeName}}）</span></h4>
 	<div class="ui divider"></div>
 	<div style="height: 20em; padding-bottom: 1em; " :id="chartId" :class="{'scroll-box': chart.type == 'table'}"></div>
 </div>`

web/views/@default/clusters/cluster/boards/index.html

@@ -71,5 +71,10 @@
 <!-- 指标 -->
 <div class="ui divider" v-if="metricCharts.length > 0"></div>
 <metric-board>
-    <metric-chart v-for="chart in metricCharts" :key="chart.id" :v-chart="chart.chart" :v-stats="chart.stats" :v-period="chart.item.period" :v-period-unit="chart.item.periodUnit" :v-value-type="chart.item.valueType"></metric-chart>
+    <metric-chart v-for="chart in metricCharts"
+                  :key="chart.id"
+                  :v-chart="chart.chart"
+                  :v-stats="chart.stats"
+                  :v-item="chart.item">
+    </metric-chart>
 </metric-board>

web/views/@default/clusters/cluster/node/boards/index.html

@@ -110,5 +110,10 @@
 <!-- 指标 -->
 <div class="ui divider" v-if="metricCharts.length > 0"></div>
 <metric-board>
-    <metric-chart v-for="chart in metricCharts" :key="chart.id" :v-chart="chart.chart" :v-stats="chart.stats" :v-period="chart.item.period" :v-period-unit="chart.item.periodUnit" :v-value-type="chart.item.valueType"></metric-chart>
+    <metric-chart v-for="chart in metricCharts"
+                  :key="chart.id"
+                  :v-chart="chart.chart"
+                  :v-stats="chart.stats"
+                  :v-item="chart.item">
+    </metric-chart>
 </metric-board>

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

@@ -96,3 +96,14 @@
 <!-- 节点排行 -->
 <h4>节点访问排行 <span>（24小时）</span></h4>
 <div class="chart-box" id="top-nodes-chart"></div>
+
+<!-- 指标 -->
+<div class="ui divider" v-if="metricCharts.length > 0"></div>
+<metric-board>
+    <metric-chart v-for="chart in metricCharts"
+                  :key="chart.id"
+                  :v-chart="chart.chart"
+                  :v-stats="chart.stats"
+                  :v-item="chart.item">
+    </metric-chart>
+</metric-board>

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

@@ -55,4 +55,15 @@
 <div class="chart-box" id="hourly-traffic-chart-box" v-show="trafficTab == 'hourly'"></div>
 
 <!-- 按日统计 -->
-<div class="chart-box" id="daily-traffic-chart-box" v-show="trafficTab == 'daily'"></div>
+<div class="chart-box" id="daily-traffic-chart-box" v-show="trafficTab == 'daily'"></div>
+
+<!-- 指标 -->
+<div class="ui divider" v-if="metricCharts.length > 0"></div>
+<metric-board>
+    <metric-chart v-for="chart in metricCharts"
+                  :key="chart.id"
+                  :v-chart="chart.chart"
+                  :v-stats="chart.stats"
+                  :v-item="chart.item">
+    </metric-chart>
+</metric-board>

web/views/@default/servers/metrics/charts/chart.css

@@ -0,0 +1,5 @@
+h4 span {
+  font-size: 0.8em;
+  color: grey;
+}
+/*# sourceMappingURL=chart.css.map */

web/views/@default/servers/metrics/charts/chart.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["chart.less"],"names":[],"mappings":"AAAA,EACC;EACC,gBAAA;EACA,WAAA","file":"chart.css"}

web/views/@default/servers/metrics/charts/chart.html

@@ -41,5 +41,5 @@
 <h4>图表示例</h4>
 <p class="comment"><span class="red">图中数据均为测试数据。</span></p>
 <metric-board>
-    <metric-chart :v-chart="chart" :v-stats="testingStats" :v-period-unit="item.periodUnit"></metric-chart>
+    <metric-chart :v-chart="chart" :v-stats="testingStats" :v-item="item"></metric-chart>
 </metric-board>

web/views/@default/servers/metrics/charts/chart.less

@@ -0,0 +1,6 @@
+h4 {
+	span {
+		font-size: 0.8em;
+		color: grey;
+	}
+}

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

@@ -41,5 +41,10 @@
 <!-- 指标 -->
 <div class="ui divider" v-if="metricCharts.length > 0"></div>
 <metric-board>
-    <metric-chart v-for="chart in metricCharts" :key="chart.id" :v-chart="chart.chart" :v-stats="chart.stats" :v-period="chart.item.period" :v-period-unit="chart.item.periodUnit" :v-value-type="chart.item.valueType"></metric-chart>
+    <metric-chart v-for="chart in metricCharts"
+                  :key="chart.id"
+                  :v-chart="chart.chart"
+                  :v-stats="chart.stats"
+                  :v-item="chart.item">
+    </metric-chart>
 </metric-board>