TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-11-04 05:00:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

数据看板显示升级提醒

Browse Source
This commit is contained in:
GoEdgeLab
2021-05-11 22:47:21 +08:00
parent 3076a46a7a
commit 1df0f4a605
6 changed files with 179 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
internal/web/actions/default/dashboard/index.go
View File

@@ -92,5 +92,27 @@ func (this *IndexAction) RunGet(params struct{}) {
this.Data["dailyTrafficStats"] = statMaps 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() this.Show()
} }

5
web/views/@default/dashboard/index.css
View File

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

2
web/views/@default/dashboard/index.css.map
View File

@@ -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"}

8
web/views/@default/dashboard/index.html
View File

@@ -5,6 +5,14 @@
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script> <script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
{$end} {$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 three columns grid">
<div class="ui column"> <div class="ui column">
<h4>集群<link-icon href="/clusters" v-if="dashboard.canGoNodes"></link-icon></h4> <h4>集群<link-icon href="/clusters" v-if="dashboard.canGoNodes"></link-icon></h4>

256
web/views/@default/dashboard/index.js
View File

@@ -1,131 +1,145 @@
Tea.context(function () { 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
}
}
}
}) })

8
web/views/@default/dashboard/index.less
View File

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