fix: Server Monitir -> Monitor修改
This commit is contained in:
parent
6f50e793f6
commit
271ce33e16
|
|
@ -50,109 +50,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="monitor-content">
|
<div class="monitor-content">
|
||||||
<a-row :gutter="[20, 15]" style="height: 100%">
|
<a-row :gutter="[20, 15]" style="height: 100%">
|
||||||
<a-col :span="8" style="height: 34%">
|
<a-col v-for="(item, index) in chartDatas" :key="item.title" :span="8" style="height: 34%">
|
||||||
<div class="monitor-content-item">
|
<div class="monitor-content-item">
|
||||||
<LineChart
|
<LineChart
|
||||||
title="CPU utilizatior"
|
:title="item.title"
|
||||||
layout="line1"
|
:layout="'line' + index"
|
||||||
:xData="data1.xData"
|
:xData="item.xData"
|
||||||
:dataSource="data1.data"
|
:dataSource="item.data"
|
||||||
@zoom="handelZoom"
|
|
||||||
>
|
|
||||||
</LineChart>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8" style="height: 34%">
|
|
||||||
<div class="monitor-content-item">
|
|
||||||
<LineChart
|
|
||||||
title="Memory Usage"
|
|
||||||
layout="line2"
|
|
||||||
:xData="data2.xData"
|
|
||||||
:dataSource="data2.data"
|
|
||||||
@zoom="handelZoom"
|
|
||||||
>
|
|
||||||
</LineChart>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8" style="height: 34%">
|
|
||||||
<div class="monitor-content-item">
|
|
||||||
<LineChart
|
|
||||||
title="System Load"
|
|
||||||
layout="line3"
|
|
||||||
:xData="data3.xData"
|
|
||||||
:dataSource="data3.data"
|
|
||||||
@zoom="handelZoom"
|
|
||||||
>
|
|
||||||
</LineChart>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8" style="height: 34%">
|
|
||||||
<div class="monitor-content-item">
|
|
||||||
<LineChart
|
|
||||||
title="Disk Read/Write BPS (Byte/s)"
|
|
||||||
layout="line4"
|
|
||||||
:xData="data4.xData"
|
|
||||||
:dataSource="data4.data"
|
|
||||||
@zoom="handelZoom"
|
|
||||||
>
|
|
||||||
</LineChart>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8" style="height: 34%">
|
|
||||||
<div class="monitor-content-item">
|
|
||||||
<LineChart
|
|
||||||
title="Disk IOPS (Count/s)"
|
|
||||||
layout="line5"
|
|
||||||
:xData="data5.xData"
|
|
||||||
:dataSource="data5.data"
|
|
||||||
@zoom="handelZoom"
|
|
||||||
>
|
|
||||||
</LineChart>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8" style="height: 34%">
|
|
||||||
<div class="monitor-content-item">
|
|
||||||
<LineChart
|
|
||||||
title="Disk Usage/Lnode Usage"
|
|
||||||
layout="line6"
|
|
||||||
:xData="data6.xData"
|
|
||||||
:dataSource="data6.data"
|
|
||||||
@zoom="handelZoom"
|
|
||||||
>
|
|
||||||
</LineChart>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8" style="height: 34%">
|
|
||||||
<div class="monitor-content-item">
|
|
||||||
<LineChart
|
|
||||||
title="Public Bandwidth"
|
|
||||||
layout="line7"
|
|
||||||
:xData="data7.xData"
|
|
||||||
:dataSource="data7.data"
|
|
||||||
@zoom="handelZoom"
|
|
||||||
>
|
|
||||||
</LineChart>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8" style="height: 34%">
|
|
||||||
<div class="monitor-content-item">
|
|
||||||
<LineChart
|
|
||||||
title="Internal Network Bandwidth (bit/s)"
|
|
||||||
layout="line8"
|
|
||||||
:xData="data8.xData"
|
|
||||||
:dataSource="data8.data"
|
|
||||||
@zoom="handelZoom"
|
|
||||||
>
|
|
||||||
</LineChart>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8" style="height: 34%">
|
|
||||||
<div class="monitor-content-item">
|
|
||||||
<LineChart
|
|
||||||
title="ECS Concurrent Connections (Count)"
|
|
||||||
layout="line9"
|
|
||||||
:xData="data9.xData"
|
|
||||||
:dataSource="data9.data"
|
|
||||||
@zoom="handelZoom"
|
@zoom="handelZoom"
|
||||||
>
|
>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
|
|
@ -207,92 +111,7 @@ export default {
|
||||||
{ label: 'user-defined', value: 0 },
|
{ label: 'user-defined', value: 0 },
|
||||||
],
|
],
|
||||||
userDefined: false,
|
userDefined: false,
|
||||||
data1: {
|
chartDatas: [],
|
||||||
xData: [],
|
|
||||||
data: [],
|
|
||||||
},
|
|
||||||
data2: {
|
|
||||||
xData: [],
|
|
||||||
data: [],
|
|
||||||
},
|
|
||||||
data3: {
|
|
||||||
xData: [],
|
|
||||||
data: [],
|
|
||||||
},
|
|
||||||
data4: {
|
|
||||||
xData: [],
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'Disk BPS Read',
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Disk BPS Write',
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
data5: {
|
|
||||||
xData: [],
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'Disk IOPS Read',
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Disk IOPS Write',
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
data6: {
|
|
||||||
xData: [],
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'Disk Usage Utilization',
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Lnode Utilization',
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
data7: {
|
|
||||||
xData: [],
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'VPC PublicIP Lnterner in Rate',
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'VPC PublicIP Lnterner Out Rate',
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
data8: {
|
|
||||||
xData: [],
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'Intranet in Rete',
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Intranet Out Rete',
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
data9: {
|
|
||||||
xData: [],
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'Intranet Out Rete',
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
visible: false,
|
visible: false,
|
||||||
modalTitle: '',
|
modalTitle: '',
|
||||||
myLine: null,
|
myLine: null,
|
||||||
|
|
@ -320,74 +139,57 @@ export default {
|
||||||
getAction('/alarmItem/alarmItems', params).then((res) => {
|
getAction('/alarmItem/alarmItems', params).then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.MonitorItem = res.result
|
this.MonitorItem = res.result
|
||||||
|
this.chartDatas = Object.entries(this.MonitorItem).map(([k, v]) => ({
|
||||||
|
title: k,
|
||||||
|
value: v,
|
||||||
|
xData: [],
|
||||||
|
data: [],
|
||||||
|
}))
|
||||||
this.getMonitorData()
|
this.getMonitorData()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 获取监控项的数据
|
// 获取监控项的数据
|
||||||
getMonitorData() {
|
getMonitorData() {
|
||||||
for (const key in this.MonitorItem) {
|
this.chartDatas.forEach(async (item) => {
|
||||||
if (this.MonitorItem.hasOwnProperty.call(this.MonitorItem, key)) {
|
const params = {
|
||||||
const element = this.MonitorItem[key]
|
itemId: item.value,
|
||||||
let params = {
|
itemType: 0,
|
||||||
itemId: element,
|
start: this.queryParams.startDate,
|
||||||
itemType: 0,
|
end: this.queryParams.endDate,
|
||||||
start: this.queryParams.startDate,
|
|
||||||
end: this.queryParams.endDate,
|
|
||||||
}
|
|
||||||
if (key === 'cpuUtilization') {
|
|
||||||
this.getMonitorItemData(params).then((res) => {
|
|
||||||
this.data1.xData = res.xData
|
|
||||||
this.data1.data = [
|
|
||||||
{
|
|
||||||
name: res.name,
|
|
||||||
data: res.data,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
} else if (key === 'memoryUtilization') {
|
|
||||||
this.getMonitorItemData(params).then((res) => {
|
|
||||||
this.data2.xData = res.xData
|
|
||||||
this.data2.data = [
|
|
||||||
{
|
|
||||||
name: res.name,
|
|
||||||
data: res.data,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
} else if (key === 'load') {
|
|
||||||
this.getMonitorItemData(params).then((res) => {
|
|
||||||
this.data3.xData = res.xData
|
|
||||||
this.data3.data = [
|
|
||||||
{
|
|
||||||
name: res.name,
|
|
||||||
data: res.data,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
try {
|
||||||
},
|
const res = await this.getMonitorItemData(params)
|
||||||
getMonitorItemData(params) {
|
item.xData = res.xData
|
||||||
return getAction('/systemMonitor/queryItemHistory', params).then((res) => {
|
item.data = [
|
||||||
// return res
|
{
|
||||||
if (res.success) {
|
name: res.name,
|
||||||
let name = res.result.name
|
data: res.data,
|
||||||
let xData = res.result.list.map((item) => {
|
},
|
||||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
]
|
||||||
})
|
} catch (error) {
|
||||||
let data = res.result.list.map((item) => {
|
console.error(error)
|
||||||
return Number((item.value * 100).toFixed(2))
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
xData,
|
|
||||||
data,
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
async getMonitorItemData(params) {
|
||||||
|
const res = await getAction('/systemMonitor/queryItemHistory', params)
|
||||||
|
// return res
|
||||||
|
if (res.success) {
|
||||||
|
let name = res.result.name
|
||||||
|
let xData = res.result.list.map((item) => {
|
||||||
|
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||||
|
})
|
||||||
|
let data = res.result.list.map((item_1) => {
|
||||||
|
return Number(item_1.value.toFixed(2))
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
xData,
|
||||||
|
data,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
getBeforeHours(num) {
|
getBeforeHours(num) {
|
||||||
let currentTime = moment()
|
let currentTime = moment()
|
||||||
let oneHourAgo = moment().subtract(num, 'hours')
|
let oneHourAgo = moment().subtract(num, 'hours')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user