fix: Server Monitir -> Monitor修改
This commit is contained in:
parent
6f50e793f6
commit
271ce33e16
|
|
@ -50,109 +50,13 @@
|
|||
</div>
|
||||
<div class="monitor-content">
|
||||
<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">
|
||||
<LineChart
|
||||
title="CPU utilizatior"
|
||||
layout="line1"
|
||||
:xData="data1.xData"
|
||||
:dataSource="data1.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"
|
||||
:title="item.title"
|
||||
:layout="'line' + index"
|
||||
:xData="item.xData"
|
||||
:dataSource="item.data"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
|
|
@ -207,92 +111,7 @@ export default {
|
|||
{ label: 'user-defined', value: 0 },
|
||||
],
|
||||
userDefined: false,
|
||||
data1: {
|
||||
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],
|
||||
},
|
||||
],
|
||||
},
|
||||
chartDatas: [],
|
||||
visible: false,
|
||||
modalTitle: '',
|
||||
myLine: null,
|
||||
|
|
@ -320,74 +139,57 @@ export default {
|
|||
getAction('/alarmItem/alarmItems', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.MonitorItem = res.result
|
||||
this.chartDatas = Object.entries(this.MonitorItem).map(([k, v]) => ({
|
||||
title: k,
|
||||
value: v,
|
||||
xData: [],
|
||||
data: [],
|
||||
}))
|
||||
this.getMonitorData()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取监控项的数据
|
||||
getMonitorData() {
|
||||
for (const key in this.MonitorItem) {
|
||||
if (this.MonitorItem.hasOwnProperty.call(this.MonitorItem, key)) {
|
||||
const element = this.MonitorItem[key]
|
||||
let params = {
|
||||
itemId: element,
|
||||
itemType: 0,
|
||||
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,
|
||||
},
|
||||
]
|
||||
})
|
||||
}
|
||||
this.chartDatas.forEach(async (item) => {
|
||||
const params = {
|
||||
itemId: item.value,
|
||||
itemType: 0,
|
||||
start: this.queryParams.startDate,
|
||||
end: this.queryParams.endDate,
|
||||
}
|
||||
}
|
||||
},
|
||||
getMonitorItemData(params) {
|
||||
return getAction('/systemMonitor/queryItemHistory', params).then((res) => {
|
||||
// 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) => {
|
||||
return Number((item.value * 100).toFixed(2))
|
||||
})
|
||||
return {
|
||||
name,
|
||||
xData,
|
||||
data,
|
||||
}
|
||||
try {
|
||||
const res = await this.getMonitorItemData(params)
|
||||
item.xData = res.xData
|
||||
item.data = [
|
||||
{
|
||||
name: res.name,
|
||||
data: res.data,
|
||||
},
|
||||
]
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
})
|
||||
},
|
||||
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) {
|
||||
let currentTime = moment()
|
||||
let oneHourAgo = moment().subtract(num, 'hours')
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user