waf-platform/EdgeAdmin/web/views/@default/dashboard/boards/httpdns.js

Tea.context(function () {
	this.isLoading = true

	this.$delay(function () {
		this.$post("$")
			.success(function (resp) {
				for (let k in resp.data) {
					this[k] = resp.data[k]
				}

				this.$delay(function () {
					this.reloadHourlyTrafficChart()
					this.reloadTopAppsChart()
					this.reloadTopDomainsChart()
					this.reloadTopNodesChart()
				})

				this.isLoading = false
			})
	})

	this.trafficTab = "hourly"

	this.selectTrafficTab = function (tab) {
		this.trafficTab = tab
		if (tab == "hourly") {
			this.$delay(function () {
				this.reloadHourlyTrafficChart()
			})
		} else if (tab == "daily") {
			this.$delay(function () {
				this.reloadDailyTrafficChart()
			})
		}
	}

	this.reloadHourlyTrafficChart = function () {
		let stats = this.hourlyStats
		if (stats == null || stats.length == 0) {
			this.renderEmptyBarChart("hourly-traffic-chart", "暂无请求趋势数据")
			return
		}
		this.reloadTrafficChart("hourly-traffic-chart", stats, function (args) {
			return stats[args.dataIndex].day + " " + stats[args.dataIndex].hour + "时<br/>请求数：" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
		})
	}

	this.reloadDailyTrafficChart = function () {
		let stats = this.dailyStats
		if (stats == null || stats.length == 0) {
			this.renderEmptyBarChart("daily-traffic-chart", "暂无请求趋势数据")
			return
		}
		this.reloadTrafficChart("daily-traffic-chart", stats, function (args) {
			return stats[args.dataIndex].day + "<br/>请求数：" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
		})
	}

	this.reloadTrafficChart = function (chartId, stats, tooltipFunc) {
		let chartBox = document.getElementById(chartId)
		if (chartBox == null) {
			return
		}

		let axis = teaweb.countAxis(stats, function (v) {
			return v.countRequests
		})

		let chart = teaweb.initChart(chartBox)
		let option = {
			xAxis: {
				data: stats.map(function (v) {
					if (v.hour != null) {
						return v.hour
					}
					return v.day
				})
			},
			yAxis: {
				axisLabel: {
					formatter: function (value) {
						return value + axis.unit
					}
				}
			},
			tooltip: {
				show: true,
				trigger: "item",
				formatter: tooltipFunc
			},
			grid: {
				left: 50,
				top: 10,
				right: 20,
				bottom: 20
			},
			series: [
				{
					name: "请求数",
					type: "line",
					data: stats.map(function (v) {
						return v.countRequests / axis.divider
					}),
					itemStyle: {
						color: teaweb.DefaultChartColor
					},
					areaStyle: {
						color: teaweb.DefaultChartColor
					},
					smooth: true
				}
			],
			animation: true
		}
		chart.setOption(option)
		chart.resize()
	}

	this.reloadTopAppsChart = function () {
		if (this.topAppStats == null || this.topAppStats.length == 0) {
			this.renderEmptyBarChart("top-apps-chart", "暂无应用请求数据")
			return
		}
		let axis = teaweb.countAxis(this.topAppStats, function (v) {
			return v.countRequests
		})
		teaweb.renderBarChart({
			id: "top-apps-chart",
			name: "应用",
			values: this.topAppStats,
			x: function (v) {
				return v.appName
			},
			tooltip: function (args, stats) {
				return stats[args.dataIndex].appName + "<br/>请求数：" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
			},
			value: function (v) {
				return v.countRequests / axis.divider
			},
			axis: axis
		})
	}

	this.reloadTopDomainsChart = function () {
		if (this.topDomainStats == null || this.topDomainStats.length == 0) {
			this.renderEmptyBarChart("top-domains-chart", "暂无域名请求数据")
			return
		}
		let axis = teaweb.countAxis(this.topDomainStats, function (v) {
			return v.countRequests
		})
		teaweb.renderBarChart({
			id: "top-domains-chart",
			name: "域名",
			values: this.topDomainStats,
			x: function (v) {
				return v.domainName
			},
			tooltip: function (args, stats) {
				return stats[args.dataIndex].domainName + "<br/>请求数：" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
			},
			value: function (v) {
				return v.countRequests / axis.divider
			},
			axis: axis
		})
	}

	this.reloadTopNodesChart = function () {
		if (this.topNodeStats == null || this.topNodeStats.length == 0) {
			this.renderEmptyBarChart("top-nodes-chart", "暂无节点访问数据")
			return
		}
		let axis = teaweb.countAxis(this.topNodeStats, function (v) {
			return v.countRequests
		})
		teaweb.renderBarChart({
			id: "top-nodes-chart",
			name: "节点",
			values: this.topNodeStats,
			x: function (v) {
				return v.nodeName
			},
			tooltip: function (args, stats) {
				return stats[args.dataIndex].nodeName + "<br/>请求数：" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
			},
			value: function (v) {
				return v.countRequests / axis.divider
			},
			axis: axis,
			click: function (args, stats) {
				window.location = "/httpdns/clusters/cluster/node?nodeId=" + stats[args.dataIndex].nodeId + "&clusterId=" + stats[args.dataIndex].clusterId
			}
		})
	}

	this.renderEmptyBarChart = function (chartId, message) {
		let chartBox = document.getElementById(chartId)
		if (chartBox == null) {
			return
		}
		let chart = teaweb.initChart(chartBox)
		chart.setOption({
			xAxis: {
				data: [],
				axisLabel: { show: false }
			},
			yAxis: {
				axisLabel: { show: false },
				splitLine: { show: true }
			},
			grid: {
				left: 50,
				top: 40,
				right: 20,
				bottom: 20
			},
			graphic: [{
				type: "text",
				left: "center",
				top: "middle",
				style: {
					text: message,
					fontSize: 13,
					fill: "#999"
				}
			}],
			series: []
		})
		chart.resize()
	}
})