取消节点的监控图表,使用节点看板代替

This commit is contained in:
GoEdgeLab
2021-07-06 20:09:47 +08:00
parent 4599fc2709
commit 623d2bf30f
13 changed files with 0 additions and 759 deletions

View File

@@ -1,4 +0,0 @@
.chart-box {
height: 20em;
}
/*# sourceMappingURL=index.css.map */

View File

@@ -1 +0,0 @@
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACC,YAAA","file":"index.css"}

View File

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

View File

@@ -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()
}
})

View File

@@ -1,3 +0,0 @@
.chart-box {
height: 20em;
}