mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-04 05:00:25 +08:00
取消节点的监控图表,使用节点看板代替
This commit is contained in:
@@ -1,4 +0,0 @@
|
||||
.chart-box {
|
||||
height: 20em;
|
||||
}
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACC,YAAA","file":"index.css"}
|
||||
@@ -1,21 +0,0 @@
|
||||
{$layout}
|
||||
{$template "../node_menu"}
|
||||
{$template "/echarts"}
|
||||
|
||||
<h4>上行流量(字节)</h4>
|
||||
<div class="chart-box" id="traffic-in-chart"></div>
|
||||
|
||||
<h4>下行流量(字节)</h4>
|
||||
<div class="chart-box" id="traffic-out-chart"></div>
|
||||
|
||||
<h4>连接数</h4>
|
||||
<div class="chart-box" id="connections-chart"></div>
|
||||
|
||||
<h4>CPU</h4>
|
||||
<div class="chart-box" id="cpu-chart"></div>
|
||||
|
||||
<h4>内存</h4>
|
||||
<div class="chart-box" id="memory-chart"></div>
|
||||
|
||||
<h4>负载</h4>
|
||||
<div class="chart-box" id="load-chart"></div>
|
||||
@@ -1,253 +0,0 @@
|
||||
Tea.context(function () {
|
||||
this.$delay(function () {
|
||||
this.loadTrafficInChart()
|
||||
this.loadTrafficOutChart()
|
||||
this.loadConnectionsChart()
|
||||
this.loadCPUChart()
|
||||
this.loadMemoryChart()
|
||||
this.loadLoadChart()
|
||||
|
||||
let that = this
|
||||
window.addEventListener("resize", function () {
|
||||
that.resizeChart("traffic-in-chart")
|
||||
that.resizeChart("traffic-out-chart")
|
||||
that.resizeChart("connections-chart")
|
||||
that.resizeChart("cpu-chart")
|
||||
that.resizeChart("memory-chart")
|
||||
that.resizeChart("load-chart")
|
||||
})
|
||||
})
|
||||
|
||||
this.loadTrafficInChart = function () {
|
||||
this.$post(".trafficIn")
|
||||
.params({
|
||||
nodeId: this.nodeId
|
||||
})
|
||||
.success(function (resp) {
|
||||
let values = resp.data.values
|
||||
let maxFunc = function () {
|
||||
let max = values.map(function (v) {
|
||||
return v.value
|
||||
}).$max() / 1024 / 1024
|
||||
if (max < 1) {
|
||||
return 1
|
||||
}
|
||||
if (max < 10) {
|
||||
return 10
|
||||
}
|
||||
if (max < 100) {
|
||||
return 100
|
||||
}
|
||||
return null
|
||||
}
|
||||
let valueFunc = function (v) {
|
||||
return v.value / 1024 / 1024
|
||||
}
|
||||
this.reloadChart("traffic-in-chart", "", values, "M", maxFunc, valueFunc)
|
||||
})
|
||||
.done(function () {
|
||||
this.$delay(function () {
|
||||
this.loadTrafficInChart()
|
||||
}, 30000)
|
||||
})
|
||||
}
|
||||
|
||||
this.loadTrafficOutChart = function () {
|
||||
this.$post(".trafficOut")
|
||||
.params({
|
||||
nodeId: this.nodeId
|
||||
})
|
||||
.success(function (resp) {
|
||||
let values = resp.data.values
|
||||
let maxFunc = function () {
|
||||
let max = values.map(function (v) {
|
||||
return v.value
|
||||
}).$max() / 1024 / 1024
|
||||
if (max < 1) {
|
||||
return 1
|
||||
}
|
||||
if (max < 10) {
|
||||
return 10
|
||||
}
|
||||
if (max < 100) {
|
||||
return 100
|
||||
}
|
||||
return null
|
||||
}
|
||||
let valueFunc = function (v) {
|
||||
return v.value / 1024 / 1024
|
||||
}
|
||||
this.reloadChart("traffic-out-chart", "", values, "M", maxFunc, valueFunc)
|
||||
})
|
||||
.done(function () {
|
||||
this.$delay(function () {
|
||||
this.loadTrafficOutChart()
|
||||
}, 30000)
|
||||
})
|
||||
}
|
||||
|
||||
this.loadConnectionsChart = function () {
|
||||
this.$post(".connections")
|
||||
.params({
|
||||
nodeId: this.nodeId
|
||||
})
|
||||
.success(function (resp) {
|
||||
let values = resp.data.values
|
||||
let maxFunc = function () {
|
||||
let max = values.map(function (v) {
|
||||
return v.value
|
||||
}).$max()
|
||||
if (max < 10) {
|
||||
return 10
|
||||
}
|
||||
if (max < 100) {
|
||||
return 100
|
||||
}
|
||||
if (max < 1000) {
|
||||
return 1000
|
||||
}
|
||||
return null
|
||||
}
|
||||
let valueFunc = function (v) {
|
||||
return v.value
|
||||
}
|
||||
this.reloadChart("connections-chart", "", values, "", maxFunc, valueFunc)
|
||||
})
|
||||
.done(function () {
|
||||
this.$delay(function () {
|
||||
this.loadConnectionsChart()
|
||||
}, 30000)
|
||||
})
|
||||
}
|
||||
|
||||
this.loadCPUChart = function () {
|
||||
this.$post(".cpu")
|
||||
.params({
|
||||
nodeId: this.nodeId
|
||||
})
|
||||
.success(function (resp) {
|
||||
let values = resp.data.values
|
||||
let maxFunc = function () {
|
||||
return 100
|
||||
}
|
||||
let valueFunc = function (v) {
|
||||
return v.value
|
||||
}
|
||||
this.reloadChart("cpu-chart", "", values, "%", maxFunc, valueFunc)
|
||||
})
|
||||
.done(function () {
|
||||
this.$delay(function () {
|
||||
this.loadCPUChart()
|
||||
}, 30000)
|
||||
})
|
||||
}
|
||||
|
||||
this.loadMemoryChart = function () {
|
||||
this.$post(".memory")
|
||||
.params({
|
||||
nodeId: this.nodeId
|
||||
})
|
||||
.success(function (resp) {
|
||||
let values = resp.data.values
|
||||
let maxFunc = function () {
|
||||
return 100
|
||||
}
|
||||
let valueFunc = function (v) {
|
||||
return v.value
|
||||
}
|
||||
this.reloadChart("memory-chart", "", values, "%", maxFunc, valueFunc)
|
||||
})
|
||||
.done(function () {
|
||||
this.$delay(function () {
|
||||
this.loadMemoryChart()
|
||||
}, 30000)
|
||||
})
|
||||
}
|
||||
|
||||
this.loadLoadChart = function () {
|
||||
this.$post(".load")
|
||||
.params({
|
||||
nodeId: this.nodeId
|
||||
})
|
||||
.success(function (resp) {
|
||||
let values = resp.data.values
|
||||
let maxFunc = function () {
|
||||
let max = values.map(function (v) {
|
||||
return v.value
|
||||
}).$max()
|
||||
if (max < 10) {
|
||||
return 10
|
||||
}
|
||||
return null
|
||||
}
|
||||
let valueFunc = function (v) {
|
||||
return v.value
|
||||
}
|
||||
this.reloadChart("load-chart", "5分钟", values, "", maxFunc, valueFunc)
|
||||
})
|
||||
.done(function () {
|
||||
this.$delay(function () {
|
||||
this.loadLoadChart()
|
||||
}, 30000)
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadChart = function (chartId, name, stats, unit, maxFunc, valueFunc) {
|
||||
let chartBox = document.getElementById(chartId)
|
||||
if (chartBox == null) {
|
||||
return
|
||||
}
|
||||
let chart = echarts.init(chartBox)
|
||||
let option = {
|
||||
xAxis: {
|
||||
data: stats.map(function (stat) {
|
||||
return stat.label
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
max: maxFunc(),
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
return value + unit
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "item",
|
||||
formatter: function (args) {
|
||||
return stats[args.dataIndex].label + ": " + stats[args.dataIndex].text
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 50,
|
||||
top: 10,
|
||||
right: 20,
|
||||
bottom: 20
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: name,
|
||||
type: "line",
|
||||
data: stats.map(valueFunc),
|
||||
itemStyle: {
|
||||
color: "#9DD3E8"
|
||||
},
|
||||
areaStyle: {}
|
||||
}
|
||||
],
|
||||
animation: true
|
||||
}
|
||||
chart.setOption(option)
|
||||
chart.resize()
|
||||
}
|
||||
|
||||
this.resizeChart = function (chartId) {
|
||||
let chartBox = document.getElementById(chartId)
|
||||
if (chartBox == null) {
|
||||
return
|
||||
}
|
||||
let chart = echarts.init(chartBox)
|
||||
chart.resize()
|
||||
}
|
||||
})
|
||||
@@ -1,3 +0,0 @@
|
||||
.chart-box {
|
||||
height: 20em;
|
||||
}
|
||||
Reference in New Issue
Block a user