TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-12-10 08:20:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

实现集群看板（暂时只对企业版开放）

Browse Source
This commit is contained in:
刘祥超
2021-07-05 11:38:07 +08:00
parent 1c3e25ba1a
commit e2ca94c93b
39 changed files with 1171 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/views/@default/clusters/cluster/@menu.html
View File

@@ -1,5 +1,5 @@
<second-menu>
<menu-item :href="'/clusters/cluster?clusterId=' + clusterId" code="index">节点列表</menu-item>
<menu-item :href="'/clusters/cluster/nodes?clusterId=' + clusterId" code="index">节点列表</menu-item>
<menu-item :href="'/clusters/cluster/createNode?clusterId=' + clusterId" code="create">创建节点</menu-item>
<menu-item :href="'/clusters/cluster/installManual?clusterId=' + clusterId" code="install">安装升级</menu-item>
<menu-item :href="'/clusters/cluster/groups?clusterId=' + clusterId" code="group">节点分组</menu-item>

32
web/views/@default/clusters/cluster/boards/index.css Normal file
View File

@@ -0,0 +1,32 @@
.grid {
margin-top: 2em !important;
margin-left: 2em !important;
}
.grid .column {
margin-bottom: 2em;
border-right: 1px #eee solid;
}
.grid .column div.value {
margin-top: 1.5em;
}
.grid .column div.value span {
font-size: 2em;
margin-right: 0.2em;
}
.grid .column.no-border {
border-right: 0;
}
.grid h4 a {
display: none;
}
.grid .column:hover a {
display: inline;
}
.chart-box {
height: 20em;
}
h4 span {
font-size: 0.8em;
color: grey;
}
/*# sourceMappingURL=index.css.map */

1
web/views/@default/clusters/cluster/boards/index.css.map Normal file
View File

@@ -0,0 +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;;AAKH;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"index.css"}

69
web/views/@default/clusters/cluster/boards/index.html Normal file
View File

@@ -0,0 +1,69 @@
{$layout}
{$template "/echarts"}
<div class="ui four columns grid">
<div class="ui column">
<h4>在线节点<link-icon :href="'/clusters/cluster/nodes?clusterId=' + clusterId"></link-icon></h4>
<div class="value"><span>{{board.countActiveNodes}}</span>个</div>
</div>
<div class="ui column">
<h4>离线节点<link-icon :href="'/clusters/cluster/nodes?clusterId=' + clusterId"></link-icon></h4>
<div class="value"><span :class="{red: board.countInactiveNodes > 0}">{{board.countInactiveNodes}}</span>个</div>
</div>
<div class="ui column">
<h4>服务</h4>
<div class="value"><span>{{board.countServers}}</span>个</div>
</div>
<div class="ui column no-border">
<h4>用户</h4>
<div class="value"><span>{{board.countUsers}}</span>个</div>
</div>
</div>
<div class="ui menu tabular">
<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>
<!-- 按小时统计流量 -->
<div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
<!-- 按日统计流量 -->
<div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
<div class="ui divider"></div>
<div class="ui menu tabular">
<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>
<!-- 按小时统计访问量 -->
<div class="chart-box" id="hourly-requests-chart" v-show="requestsTab == 'hourly'"></div>
<!-- 按日统计访问量 -->
<div class="chart-box" id="daily-requests-chart" v-show="requestsTab == 'daily'"></div>
<div class="ui divider"></div>
<!-- 域名排行 -->
<h4>域名排行 <span>（24小时）</span></h4>
<div class="chart-box" id="top-domains-chart"></div>
<div class="ui divider"></div>
<!-- 节点排行 -->
<h4>节点排行 <span>（24小时）</span></h4>
<div class="chart-box" id="top-nodes-chart"></div>
<div class="ui divider"></div>
<div class="ui menu tabular">
<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>
</div>
<div class="chart-box" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
<div class="chart-box" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
<div class="chart-box" id="load-chart" v-show="nodeStatusTab == 'load'"></div>

405
web/views/@default/clusters/cluster/boards/index.js Normal file
View File

@@ -0,0 +1,405 @@
Tea.context(function () {
/**
* 流量统计
*/
this.trafficTab = "hourly"
this.$delay(function () {
this.reloadHourlyTrafficChart()
this.reloadHourlyRequestsChart()
this.reloadTopNodeStatsChart()
this.reloadTopDomainsChart()
this.reloadCPUChart()
})
this.selectTrafficTab = function (tab) {
this.trafficTab = tab
if (tab == "hourly") {
this.$delay(function () {
this.reloadHourlyTrafficChart()
})
} else if (tab == "daily") {
this.$delay(function () {
this.reloadDailyTrafficChart()
})
}
}
this.reloadHourlyTrafficChart = function () {
let stats = this.hourlyStats
this.reloadTrafficChart("hourly-traffic-chart", "流量统计", stats, function (args) {
if (args.seriesIndex == 0) {
return stats[args.dataIndex].day + " " + stats[args.dataIndex].hour + "时 流量: " + teaweb.formatBytes(stats[args.dataIndex].bytes)
}
if (args.seriesIndex == 1) {
let ratio = 0
if (stats[args.dataIndex].bytes > 0) {
ratio = Math.round(stats[args.dataIndex].cachedBytes * 10000 / stats[args.dataIndex].bytes) / 100
}
return stats[args.dataIndex].day + " " + stats[args.dataIndex].hour + "时 缓存流量: " + teaweb.formatBytes(stats[args.dataIndex].cachedBytes) + ", 命中率：" + ratio + "%"
}
return ""
})
}
this.reloadDailyTrafficChart = function () {
let stats = this.dailyStats
this.reloadTrafficChart("daily-traffic-chart", "流量统计", stats, function (args) {
if (args.seriesIndex == 0) {
return stats[args.dataIndex].day + " 流量: " + teaweb.formatBytes(stats[args.dataIndex].bytes)
}
if (args.seriesIndex == 1) {
let ratio = 0
if (stats[args.dataIndex].bytes > 0) {
ratio = Math.round(stats[args.dataIndex].cachedBytes * 10000 / stats[args.dataIndex].bytes) / 100
}
return stats[args.dataIndex].day + " 缓存流量: " + teaweb.formatBytes(stats[args.dataIndex].cachedBytes) + ", 命中率：" + ratio + "%"
}
return ""
})
}
this.reloadTrafficChart = function (chartId, name, stats, tooltipFunc) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let axis = teaweb.bytesAxis(stats, function (v) {
return Math.max(v.bytes, v.cachedBytes)
})
let chart = echarts.init(chartBox)
let option = {
xAxis: {
data: stats.map(function (v) {
if (v.hour != null) {
return v.hour
}
return v.day
})
},
yAxis: {
axisLabel: {
formatter: function (value) {
return value + axis.unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: tooltipFunc
},
grid: {
left: 50,
top: 40,
right: 20,
bottom: 20
},
series: [
{
name: "流量",
type: "line",
data: stats.map(function (v) {
return v.bytes / axis.divider
}),
itemStyle: {
color: "#9DD3E8"
},
areaStyle: {
color: "#9DD3E8"
}
},
{
name: "缓存流量",
type: "line",
data: stats.map(function (v) {
return v.cachedBytes / axis.divider
}),
itemStyle: {
color: "#61A0A8"
},
areaStyle: {
color: "#61A0A8"
}
}
],
legend: {
data: ['流量', '缓存流量']
},
animation: true
}
chart.setOption(option)
chart.resize()
}
/**
* 请求数统计
*/
this.requestsTab = "hourly"
this.selectRequestsTab = function (tab) {
this.requestsTab = tab
if (tab == "hourly") {
this.$delay(function () {
this.reloadHourlyRequestsChart()
})
} else if (tab == "daily") {
this.$delay(function () {
this.reloadDailyRequestsChart()
})
}
}
this.reloadHourlyRequestsChart = function () {
let stats = this.hourlyStats
this.reloadRequestsChart("hourly-requests-chart", "请求数统计", stats, function (args) {
if (args.seriesIndex == 0) {
return stats[args.dataIndex].day + " " + stats[args.dataIndex].hour + "时 请求数: " + teaweb.formatNumber(stats[args.dataIndex].countRequests)
}
if (args.seriesIndex == 1) {
let ratio = 0
if (stats[args.dataIndex].countRequests > 0) {
ratio = Math.round(stats[args.dataIndex].countCachedRequests * 10000 / stats[args.dataIndex].countRequests) / 100
}
return stats[args.dataIndex].day + " " + stats[args.dataIndex].hour + "时 缓存请求数: " + teaweb.formatNumber(stats[args.dataIndex].countCachedRequests) + ", 命中率：" + ratio + "%"
}
return ""
})
}
this.reloadDailyRequestsChart = function () {
let stats = this.dailyStats
this.reloadRequestsChart("daily-requests-chart", "请求数统计", stats, function (args) {
if (args.seriesIndex == 0) {
return stats[args.dataIndex].day + " 请求数: " + teaweb.formatNumber(stats[args.dataIndex].countRequests)
}
if (args.seriesIndex == 1) {
let ratio = 0
if (stats[args.dataIndex].countRequests > 0) {
ratio = Math.round(stats[args.dataIndex].countCachedRequests * 10000 / stats[args.dataIndex].countRequests) / 100
}
return stats[args.dataIndex].day + " 缓存请求数: " + teaweb.formatNumber(stats[args.dataIndex].countCachedRequests) + ", 命中率：" + ratio + "%"
}
return ""
})
}
this.reloadRequestsChart = function (chartId, name, stats, tooltipFunc) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let axis = teaweb.countAxis(stats, function (v) {
return Math.max(v.countRequests, v.countCachedRequests)
})
let chart = echarts.init(chartBox)
let option = {
xAxis: {
data: stats.map(function (v) {
if (v.hour != null) {
return v.hour
}
if (v.day != null) {
return v.day
}
return ""
})
},
yAxis: {
axisLabel: {
formatter: function (value) {
return value + axis.unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: tooltipFunc
},
grid: {
left: 50,
top: 40,
right: 20,
bottom: 20
},
series: [
{
name: "请求数",
type: "line",
data: stats.map(function (v) {
return v.countRequests / axis.divider
}),
itemStyle: {
color: "#9DD3E8"
},
areaStyle: {
color: "#9DD3E8"
}
},
{
name: "缓存请求数",
type: "line",
data: stats.map(function (v) {
return v.countCachedRequests / axis.divider
}),
itemStyle: {
color: "#61A0A8"
},
areaStyle: {
color: "#61A0A8"
}
}
],
legend: {
data: ['请求数', '缓存请求数']
},
animation: true
}
chart.setOption(option)
chart.resize()
}
// 节点排行
this.reloadTopNodeStatsChart = function () {
let that = this
let axis = teaweb.countAxis(this.topNodeStats, function (v) {
return v.countRequests
})
teaweb.renderBarChart({
id: "top-nodes-chart",
name: "节点",
values: this.topNodeStats,
x: function (v) {
return v.nodeName
},
tooltip: function (args, stats) {
return stats[args.dataIndex].nodeName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
},
value: function (v) {
return v.countRequests / axis.divider;
},
axis: axis
})
}
// 域名排行
this.reloadTopDomainsChart = function () {
let axis = teaweb.countAxis(this.topDomainStats, function (v) {
return v.countRequests
})
teaweb.renderBarChart({
id: "top-domains-chart",
name: "域名",
values: this.topDomainStats,
x: function (v) {
return v.domain
},
tooltip: function (args, stats) {
return stats[args.dataIndex].domain + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
},
value: function (v) {
return v.countRequests / axis.divider;
},
axis: axis
})
}
/**
* 系统信息
*/
this.nodeStatusTab = "cpu"
this.selectNodeStatusTab = function (tab) {
this.nodeStatusTab = tab
this.$delay(function () {
switch (tab) {
case "cpu":
this.reloadCPUChart()
break
case "memory":
this.reloadMemoryChart()
break
case "load":
this.reloadLoadChart()
break
}
})
}
this.reloadCPUChart = function () {
let axis = {unit: "", divider: 1}
teaweb.renderLineChart({
id: "cpu-chart",
name: "CPU",
values: this.cpuValues,
x: function (v) {
return v.time
},
tooltip: function (args, stats) {
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
},
value: function (v) {
return v.value * 100;
},
axis: axis,
max: 100
})
}
this.reloadMemoryChart = function () {
let axis = {unit: "", divider: 1}
teaweb.renderLineChart({
id: "memory-chart",
name: "内存",
values: this.memoryValues,
x: function (v) {
return v.time
},
tooltip: function (args, stats) {
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
},
value: function (v) {
return v.value * 100;
},
axis: axis,
max: 100
})
}
this.reloadLoadChart = function () {
let axis = {unit: "", divider: 1}
let max = this.loadValues.$map(function (k, v) {
return v.value
}).$max()
if (max < 10) {
max = 10
} else if (max < 20) {
max = 20
} else if (max < 100) {
max = 100
} else {
max = null
}
teaweb.renderLineChart({
id: "load-chart",
name: "负载",
values: this.loadValues,
x: function (v) {
return v.time
},
tooltip: function (args, stats) {
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100) / 100)
},
value: function (v) {
return v.value;
},
axis: axis,
max: max
})
}
})

45
web/views/@default/clusters/cluster/boards/index.less Normal file
View File

@@ -0,0 +1,45 @@
.grid {
margin-top: 2em !important;
margin-left: 2em !important;
.column {
margin-bottom: 2em;
border-right: 1px #eee solid;
div.value {
margin-top: 1.5em;
span {
font-size: 2em;
margin-right: 0.2em;
}
}
}
.column.no-border {
border-right: 0;
}
h4 {
a {
display: none;
}
}
.column:hover {
a {
display: inline;
}
}
}
.chart-box {
height: 20em;
}
h4 {
span {
font-size: 0.8em;
color: grey;
}
}

2
web/views/@default/clusters/cluster/createBatch.js
View File

@@ -1,5 +1,5 @@
Tea.context(function () {
this.success = NotifySuccess("保存成功", "/clusters/cluster?clusterId=" + this.clusterId)
this.success = NotifySuccess("保存成功", "/clusters/cluster/nodes?clusterId=" + this.clusterId)
this.$delay(function () {
this.$refs.ipList.focus()

2
web/views/@default/clusters/cluster/createNode.js
View File

@@ -1,3 +1,3 @@
Tea.context(function () {
this.success = NotifySuccess("保存成功", "/clusters/cluster?clusterId=" + this.clusterId);
this.success = NotifySuccess("保存成功", "/clusters/cluster/nodes?clusterId=" + this.clusterId);
});

1
web/views/@default/clusters/cluster/index.css.map
View File

@@ -1 +0,0 @@
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,MAAO;EACN,oBAAA;;AAGD,CACC;EACC,iCAAA","file":"index.css"}

2
web/views/@default/clusters/cluster/node/@node_menu.html
View File

@@ -1,5 +1,5 @@
<second-menu>
<menu-item :href="'/clusters/cluster?clusterId=' + clusterId">节点列表</menu-item>
<menu-item :href="'/clusters/cluster/nodes?clusterId=' + clusterId">节点列表</menu-item>
<span class="item">|</span>
<menu-item :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + nodeId" code="node">节点详情</menu-item>
<menu-item :href="'/clusters/cluster/node/monitor?clusterId=' + clusterId + '&nodeId=' + nodeId" code="monitor" v-if="teaIsPlus">监控图表</menu-item>

2
web/views/@default/clusters/cluster/index.css → web/views/@default/clusters/cluster/nodes.css
View File

@@ -4,4 +4,4 @@
a .red {
border-bottom: 1px #db2828 dashed;
}
/*# sourceMappingURL=index.css.map */
/*# sourceMappingURL=nodes.css.map */

1
web/views/@default/clusters/cluster/nodes.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["nodes.less"],"names":[],"mappings":"AAAA,MAAO;EACN,oBAAA;;AAGD,CACC;EACC,iCAAA","file":"nodes.css"}

0
web/views/@default/clusters/cluster/index.html → web/views/@default/clusters/cluster/nodes.html
View File

0
web/views/@default/clusters/cluster/index.js → web/views/@default/clusters/cluster/nodes.js
View File

0
web/views/@default/clusters/cluster/index.less → web/views/@default/clusters/cluster/nodes.less
View File

6
web/views/@default/clusters/cluster/settings/metrics/createPopup.html
View File

@@ -17,13 +17,13 @@
<tr v-for="item in items">
<td>{{item.name}}</td>
<td>
<span v-if="item.keys != null" v-for="key in item.keys" class="ui label basic small">{{key}}</span>
<div v-if="item.keys != null" v-for="key in item.keys" style="margin-top: 0.2em; margin-bottom: 0.2em"><metric-key-label :v-key="key"></metric-key-label></div>
</td>
<td>
{{item.period}} {{item.periodUnit}}
{{item.period}} {{item.periodUnitName}}
</td>
<td>
<span class="ui label small basic">{{item.value}}</span>
<span class="ui label small basic">{{item.valueName}}</span>
</td>
<td>
<label-on :v-is-on="item.isOn"></label-on>

8
web/views/@default/clusters/cluster/settings/metrics/index.html
View File

@@ -9,7 +9,7 @@
<span class="item disabled">|</span>
<menu-item @click.prevent="createItem">[添加指标]</menu-item>
<span class="item disabled">|</span>
<span class="item"><tip-icon content="在这里设置的指标，会自动应用到部署在当前集群上的所有服务上。"></tip-icon></span>
<span class="item"><tip-icon content="在这里设置的指标，会自动应用到部署在当前集群上的所有服务上。<br/><br/>指标收集和运算通常需要消耗一定量的边缘节点系统资源，所以请谨慎选择。"></tip-icon></span>
</first-menu>
<p class="comment" v-if="items.length == 0">暂时还没有添加指标。</p>
@@ -28,13 +28,13 @@
<tr v-for="item in items">
<td>{{item.name}}</td>
<td>
<span v-if="item.keys != null" v-for="key in item.keys" class="ui label basic small">{{key}}</span>
<div v-if="item.keys != null" v-for="key in item.keys" style="margin-top: 0.2em; margin-bottom: 0.2em"><metric-key-label :v-key="key"></metric-key-label></div>
</td>
<td>
{{item.period}} {{item.periodUnit}}
{{item.period}} {{item.periodUnitName}}
</td>
<td>
<span class="ui label small basic">{{item.value}}</span>
<span class="ui label small basic">{{item.valueName}}</span>
</td>
<td>
<label-on :v-is-on="item.isOn"></label-on>