数据看板和节点看板都改成异步加载

2025-11-04 05:00:25 +08:00 · 2021-08-30 15:23:31 +08:00
parent cedf2b8aee
commit 41c5bef9f4
14 changed files with 188 additions and 99 deletions
--- a/web/views/@default/clusters/cluster/boards/index.html
+++ b/web/views/@default/clusters/cluster/boards/index.html
@@ -2,13 +2,13 @@
 {$template "/echarts"}

 <!-- 加载中 -->
-<div>
+<div style="margin-top: 0.8em">
    <div class="ui message loading" v-if="isLoading">
        <div class="ui active inline loader small"></div>  &nbsp; 数据加载中...
    </div>
 </div>

-<div class="ui four columns grid">
+<div class="ui four columns grid" v-show="!isLoading">
    <div class="ui column">
        <h4>在线节点<link-icon :href="'/clusters/cluster/nodes?clusterId=' + clusterId"></link-icon></h4>
        <div class="value"><span class="green">{{board.countActiveNodes}}</span>个</div>
@@ -27,7 +27,7 @@
    </div>
 </div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
    <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
 </div>
@@ -40,7 +40,7 @@

 <div class="ui divider"></div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
    <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
 </div>
@@ -54,18 +54,18 @@
 <div class="ui divider"></div>

 <!-- 域名排行 -->
-<h4>域名访问排行 <span>（24小时）</span></h4>
+<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
 <div class="chart-box" id="top-domains-chart"></div>

 <div class="ui divider"></div>

 <!-- 节点排行 -->
-<h4>节点访问排行 <span>（24小时）</span></h4>
+<h4 v-show="!isLoading">节点访问排行 <span>（24小时）</span></h4>
 <div class="chart-box" id="top-nodes-chart"></div>

 <div class="ui divider"></div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">节点CPU</a>
    <a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">节点内存</a>
    <a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">节点负载</a>
--- a/web/views/@default/clusters/cluster/node/boards/index.html
+++ b/web/views/@default/clusters/cluster/node/boards/index.html
@@ -2,8 +2,15 @@
 {$template "../node_menu"}
 {$template "/echarts"}

+<!-- 加载中 -->
+<div>
+    <div class="ui message loading" v-if="isLoading">
+        <div class="ui active inline loader small"></div>  &nbsp; 数据加载中...
+    </div>
+</div>
+
 <!-- 概况 -->
-<div class="ui four columns grid">
+<div class="ui four columns grid" v-if="!isLoading">
    <div class="ui column">
        <h4>在线状态</h4>
        <div class="value">
@@ -61,7 +68,7 @@

 <div class="ui divider"></div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
    <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
 </div>
@@ -74,7 +81,7 @@

 <div class="ui divider"></div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
    <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
 </div>
@@ -88,13 +95,13 @@
 <div class="ui divider"></div>

 <!-- 域名排行 -->
-<h4>域名访问排行 <span>（24小时）</span></h4>
+<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
 <div class="chart-box" id="top-domains-chart"></div>

 <div class="ui divider"></div>

 <!-- CPU、内存、负载 -->
-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">节点CPU</a>
    <a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">节点内存</a>
    <a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">节点负载</a>
@@ -106,7 +113,7 @@

 <!-- 缓存 -->
 <div class="ui divider"></div>
-<h4>缓存目录用量<span v-if="cacheDirUsed.length > 0">（使用：{{cacheDirUsed}}/总量：{{cacheDirTotal}}/剩余：{{cacheDirAvail}}）</span></h4>
+<h4 v-show="!isLoading">缓存目录用量<span v-if="cacheDirUsed.length > 0">（使用：{{cacheDirUsed}}/总量：{{cacheDirTotal}}/剩余：{{cacheDirAvail}}）</span></h4>
 <div class="chart-box" id="cache-dirs-chart"></div>

 <!-- 指标 -->
--- a/web/views/@default/clusters/cluster/node/boards/index.js
+++ b/web/views/@default/clusters/cluster/node/boards/index.js
@@ -1,4 +1,8 @@
 Tea.context(function () {
+	this.isLoading = true
+	this.board = {}
+	this.metricCharts = []
+
 	this.upNode = function (nodeId) {
 		teaweb.confirm("确定要手动上线此节点吗？", function () {
 			this.$post("/clusters/cluster/node/up")
@@ -32,8 +36,6 @@ Tea.context(function () {
 		this.board.cacheDiskSize = teaweb.formatBytes(this.board.cacheDiskSize)
 		this.board.cacheMemorySize = teaweb.formatBytes(this.board.cacheMemorySize)
 	}
-	this.loadBoard()
-

 	/**
 	 * 流量统计
@@ -41,18 +43,37 @@ Tea.context(function () {
 	this.trafficTab = "hourly"

 	this.$delay(function () {
-		this.reloadHourlyTrafficChart()
-		this.reloadHourlyRequestsChart()
-		this.reloadTopDomainsChart()
-		this.reloadCPUChart()
-		this.reloadCacheDirsChart()
+		this.$post("$")
+			.params({
+				clusterId: this.clusterId,
+				nodeId: this.node.id
+			})
+			.timeout(60)
+			.success(function (resp) {
+				for (let k in resp.data) {
+					this[k] = resp.data[k]
+				}
+
+				this.loadBoard()
+
+				this.isLoading = false
+
+				this.$delay(function () {
+					this.reloadHourlyTrafficChart()
+					this.reloadHourlyRequestsChart()
+					this.reloadTopDomainsChart()
+					this.reloadCPUChart()
+					this.reloadCacheDirsChart()
+
+					this.renderCacheDirData()
+
+					this.refreshBoard()
+				})
+			})
 	})
-	this.$delay(function () {
-		this.refreshBoard()
-	}, 30000)

 	this.refreshBoard = function () {
-		this.$post("$")
+		this.$post(".data")
 			.params({
 				clusterId: this.clusterId,
 				nodeId: this.node.id
@@ -64,7 +85,7 @@ Tea.context(function () {
 			.done(function () {
 				this.$delay(function () {
 					this.refreshBoard()
-				}, 60000)
+				}, 30000)
 			})
 	}

@@ -467,15 +488,18 @@ Tea.context(function () {
 	this.cacheDirTotal = ""
 	this.cacheDirAvail = ""
 	this.cacheDirAvailWarning = false
-	if (this.cacheDirValues.length > 0) {
-		let lastStat = this.cacheDirValues.$last()
-		if (lastStat.value != null && lastStat.value.dirs != null && lastStat.value.dirs.length > 0) {
-			this.cacheDirUsed = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].used)
-			this.cacheDirTotal = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].total)
-			this.cacheDirAvail = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].avail)
-			this.cacheDirAvailWarning = (this.cacheDirValues.$last().value.dirs[0].avail < 1024 * 1024 * 1024 * 10)
+	this.renderCacheDirData = function () {
+		if (this.cacheDirValues.length > 0) {
+			let lastStat = this.cacheDirValues.$last()
+			if (lastStat.value != null && lastStat.value.dirs != null && lastStat.value.dirs.length > 0) {
+				this.cacheDirUsed = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].used)
+				this.cacheDirTotal = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].total)
+				this.cacheDirAvail = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].avail)
+				this.cacheDirAvailWarning = (this.cacheDirValues.$last().value.dirs[0].avail < 1024 * 1024 * 1024 * 10)
+			}
 		}
 	}
+
 	this.reloadCacheDirsChart = function () {
 		let axis = {unit: "%", divider: 1}
 		teaweb.renderLineChart({