数据看板显示升级提醒

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

@@ -92,5 +92,27 @@ func (this *IndexAction) RunGet(params struct{}) {
 		this.Data["dailyTrafficStats"] = statMaps
 	}
 
+	// 版本升级
+	this.Data["nodeUpgradeInfo"] = maps.Map{
+		"count":   resp.NodeUpgradeInfo.CountNodes,
+		"version": resp.NodeUpgradeInfo.NewVersion,
+	}
+	this.Data["monitorNodeUpgradeInfo"] = maps.Map{
+		"count":   resp.MonitorNodeUpgradeInfo.CountNodes,
+		"version": resp.MonitorNodeUpgradeInfo.NewVersion,
+	}
+	this.Data["apiNodeUpgradeInfo"] = maps.Map{
+		"count":   resp.ApiNodeUpgradeInfo.CountNodes,
+		"version": resp.ApiNodeUpgradeInfo.NewVersion,
+	}
+	this.Data["userNodeUpgradeInfo"] = maps.Map{
+		"count":   resp.UserNodeUpgradeInfo.CountNodes,
+		"version": resp.UserNodeUpgradeInfo.NewVersion,
+	}
+	this.Data["authorityNodeUpgradeInfo"] = maps.Map{
+		"count":   resp.AuthorityNodeUpgradeInfo.CountNodes,
+		"version": resp.AuthorityNodeUpgradeInfo.NewVersion,
+	}
+
 	this.Show()
 }

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

@@ -1,3 +1,8 @@
+.ui.message .icon {
+  position: absolute;
+  right: 1em;
+  top: 1.8em;
+}
 .grid {
   margin-top: 2em !important;
   margin-left: 2em !important;

web/views/@default/dashboard/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAMH;EACC,YAAA","file":"index.css"}
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAMH;EACC,YAAA","file":"index.css"}

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

@@ -5,6 +5,14 @@
 <script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
 {$end}
 
+<!-- 升级提醒 -->
+<div class="ui message error" v-if="nodeUpgradeInfo.count > 0"><a href="/clusters">升级提醒：有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
+<div class="ui message error" v-if="monitorNodeUpgradeInfo.count > 0"><a href="/settings/monitorNodes">升级提醒：有 {{monitorNodeUpgradeInfo.count}} 个监控节点需要升级到 v{{monitorNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
+<div class="ui message error" v-if="userNodeUpgradeInfo.count > 0"><a href="/settings/userNodes">升级提醒：有 {{userNodeUpgradeInfo.count}} 个用户节点需要升级到 v{{userNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
+<div class="ui message error" v-if="apiNodeUpgradeInfo.count > 0"><a href="/api">升级提醒：有 {{apiNodeUpgradeInfo.count}} 个API节点需要升级到 v{{apiNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
+<div class="ui message error" v-if="authorityNodeUpgradeInfo.count > 0 && teaIsPlus"><a href="/settings/authority/nodes">升级提醒：有 {{authorityNodeUpgradeInfo.count}} 个企业版认证节点需要升级到 v{{authorityNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
+
+<!-- 统计图表 -->
 <div class="ui three columns grid">
     <div class="ui column">
         <h4>集群<link-icon href="/clusters" v-if="dashboard.canGoNodes"></link-icon></h4>

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

@@ -1,131 +1,145 @@
 Tea.context(function () {
-    this.trafficTab = "hourly"
+	this.trafficTab = "hourly"
 
 
-    this.$delay(function () {
+	this.$delay(function () {
-        this.reloadHourlyTrafficChart()
+		this.reloadHourlyTrafficChart()
 
-        let that = this
+		let that = this
-        window.addEventListener("resize", function () {
+		window.addEventListener("resize", function () {
-            if (that.trafficTab == "hourly") {
+			if (that.trafficTab == "hourly") {
-                that.resizeHourlyTrafficChart()
+				that.resizeHourlyTrafficChart()
-            }
+			}
-            if (that.trafficTab == "daily") {
+			if (that.trafficTab == "daily") {
-                that.resizeDailyTrafficChart()
+				that.resizeDailyTrafficChart()
-            }
+			}
-        })
+		})
-    })
+	})
 
-    this.selectTrafficTab = function (tab) {
+	this.selectTrafficTab = function (tab) {
-        this.trafficTab = tab
+		this.trafficTab = tab
-        if (tab == "hourly") {
+		if (tab == "hourly") {
-            this.$delay(function () {
+			this.$delay(function () {
-                this.reloadHourlyTrafficChart()
+				this.reloadHourlyTrafficChart()
-            })
+			})
-        } else if (tab == "daily") {
+		} else if (tab == "daily") {
-            this.$delay(function () {
+			this.$delay(function () {
-                this.reloadDailyTrafficChart()
+				this.reloadDailyTrafficChart()
-            })
+			})
-        }
+		}
-    }
+	}
 
-    this.resizeHourlyTrafficChart = function () {
+	this.resizeHourlyTrafficChart = function () {
-        let chartBox = document.getElementById("hourly-traffic-chart-box")
+		let chartBox = document.getElementById("hourly-traffic-chart-box")
-        let chart = echarts.init(chartBox)
+		let chart = echarts.init(chartBox)
-        chart.resize()
+		chart.resize()
-    }
+	}
 
-    this.reloadHourlyTrafficChart = function () {
+	this.reloadHourlyTrafficChart = function () {
-        let chartBox = document.getElementById("hourly-traffic-chart-box")
+		let chartBox = document.getElementById("hourly-traffic-chart-box")
-        let chart = echarts.init(chartBox)
+		let chart = echarts.init(chartBox)
-        let option = {
+		let option = {
-            xAxis: {
+			xAxis: {
-                data: this.hourlyTrafficStats.map(function (v) {
+				data: this.hourlyTrafficStats.map(function (v) {
-                    return v.hour;
+					return v.hour;
-                })
+				})
-            },
+			},
-            yAxis: {},
+			yAxis: {},
-            tooltip: {
+			tooltip: {
-                show: true,
+				show: true,
-                trigger: "item",
+				trigger: "item",
-                formatter: "{c} GB"
+				formatter: "{c} GB"
-            },
+			},
-            grid: {
+			grid: {
-                left: 40,
+				left: 40,
-                top: 10,
+				top: 10,
-                right: 20
+				right: 20
-            },
+			},
-            series: [
+			series: [
-                {
+				{
-                    name: "流量",
+					name: "流量",
-                    type: "line",
+					type: "line",
-                    data: this.hourlyTrafficStats.map(function (v) {
+					data: this.hourlyTrafficStats.map(function (v) {
-                        return v.count;
+						return v.count;
-                    }),
+					}),
-                    itemStyle: {
+					itemStyle: {
-                        color: "#9DD3E8"
+						color: "#9DD3E8"
-                    },
+					},
-                    lineStyle: {
+					lineStyle: {
-                        color: "#9DD3E8"
+						color: "#9DD3E8"
-                    },
+					},
-                    areaStyle: {
+					areaStyle: {
-                        color: "#9DD3E8"
+						color: "#9DD3E8"
-                    }
+					}
-                }
+				}
-            ],
+			],
-            animation: false
+			animation: false
-        }
+		}
-        chart.setOption(option)
+		chart.setOption(option)
-        chart.resize()
+		chart.resize()
-    }
+	}
 
-    this.resizeDailyTrafficChart = function () {
+	this.resizeDailyTrafficChart = function () {
-        let chartBox = document.getElementById("daily-traffic-chart-box")
+		let chartBox = document.getElementById("daily-traffic-chart-box")
-        let chart = echarts.init(chartBox)
+		let chart = echarts.init(chartBox)
-        chart.resize()
+		chart.resize()
-    }
+	}
 
-    this.reloadDailyTrafficChart = function () {
+	this.reloadDailyTrafficChart = function () {
-        let chartBox = document.getElementById("daily-traffic-chart-box")
+		let chartBox = document.getElementById("daily-traffic-chart-box")
-        let chart = echarts.init(chartBox)
+		let chart = echarts.init(chartBox)
-        let option = {
+		let option = {
-            xAxis: {
+			xAxis: {
-                data: this.dailyTrafficStats.map(function (v) {
+				data: this.dailyTrafficStats.map(function (v) {
-                    return v.day;
+					return v.day;
-                })
+				})
-            },
+			},
-            yAxis: {},
+			yAxis: {},
-            tooltip: {
+			tooltip: {
-                show: true,
+				show: true,
-                trigger: "item",
+				trigger: "item",
-                formatter: "{c} GB"
+				formatter: "{c} GB"
-            },
+			},
-            grid: {
+			grid: {
-                left: 40,
+				left: 40,
-                top: 10,
+				top: 10,
-                right: 20
+				right: 20
-            },
+			},
-            series: [
+			series: [
-                {
+				{
-                    name: "流量",
+					name: "流量",
-                    type: "line",
+					type: "line",
-                    data: this.dailyTrafficStats.map(function (v) {
+					data: this.dailyTrafficStats.map(function (v) {
-                        return v.count;
+						return v.count;
-                    }),
+					}),
-                    itemStyle: {
+					itemStyle: {
-                        color: "#9DD3E8"
+						color: "#9DD3E8"
-                    },
+					},
-                    lineStyle: {
+					lineStyle: {
-                        color: "#9DD3E8"
+						color: "#9DD3E8"
-                    },
+					},
-                    areaStyle: {
+					areaStyle: {
-                        color: "#9DD3E8"
+						color: "#9DD3E8"
-                    }
+					}
-                }
+				}
-            ],
+			],
-            animation: false
+			animation: false
-        }
+		}
-        chart.setOption(option)
+		chart.setOption(option)
-        chart.resize()
+		chart.resize()
-    }
+	}
+
+	/**
+	 * 升级提醒
+	 */
+	this.closeMessage = function (e) {
+		let target = e.target
+		while (true) {
+			target = target.parentNode
+			if (target.tagName.toUpperCase() == "DIV") {
+				target.style.cssText = "display: none"
+				break
+			}
+		}
+	}
 })

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

@@ -1,3 +1,11 @@
+.ui.message {
+	.icon {
+		position: absolute;
+		right: 1em;
+		top: 1.8em;
+	}
+}
+
 .grid {
 	margin-top: 2em !important;
 	margin-left: 2em !important;