add 服务监控
This commit is contained in:
297
web-react/src/pages/system/machine/use-charts.jsx
Normal file
297
web-react/src/pages/system/machine/use-charts.jsx
Normal file
@@ -0,0 +1,297 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Card, Col, Descriptions, Row, Statistic } from 'antd'
|
||||
import * as echarts from 'echarts'
|
||||
import moment from 'moment'
|
||||
import { api } from 'common/api'
|
||||
|
||||
export default class useCharts extends Component {
|
||||
state = {
|
||||
use: {},
|
||||
|
||||
nowMoment: moment(),
|
||||
}
|
||||
|
||||
timer = null
|
||||
timerMoment = null
|
||||
|
||||
systemStart = moment()
|
||||
|
||||
now = Date.now()
|
||||
|
||||
cpuChart = null
|
||||
cpuData = []
|
||||
|
||||
ramChart = null
|
||||
ramData = []
|
||||
|
||||
shouldComponentUpdate(props) {
|
||||
// 当前页签未选中时停止获取状态
|
||||
if (this.props.actived !== props.actived) {
|
||||
if (props.actived) {
|
||||
this.start()
|
||||
} else {
|
||||
this.stop()
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.systemStart = moment().add(-this.props.base.runTime)
|
||||
this.initCpuChart()
|
||||
this.initRamChart()
|
||||
|
||||
this.start()
|
||||
|
||||
window.addEventListener('resize', this.onResizeCharts)
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.stop()
|
||||
|
||||
window.removeEventListener('resize', this.onResizeCharts)
|
||||
}
|
||||
|
||||
start() {
|
||||
this.timer = setInterval(() => {
|
||||
this.refreshData()
|
||||
}, 3000)
|
||||
this.refreshData()
|
||||
this.timerMoment = setInterval(() => {
|
||||
this.setState({ nowMoment: moment() })
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
stop() {
|
||||
clearInterval(this.timer)
|
||||
clearInterval(this.timerMoment)
|
||||
}
|
||||
|
||||
async refreshData() {
|
||||
const { data: use } = await api.sysMachineUse()
|
||||
|
||||
this.now = Date.now()
|
||||
|
||||
this.cpuData.shift()
|
||||
this.cpuData.push({
|
||||
name: this.now,
|
||||
value: [this.now, use.cpuRate],
|
||||
})
|
||||
this.cpuChart.setOption({
|
||||
series: [{ data: this.cpuData }],
|
||||
})
|
||||
|
||||
this.ramData.shift()
|
||||
this.ramData.push({
|
||||
name: this.now,
|
||||
value: [this.now, use.ramRate],
|
||||
})
|
||||
this.ramChart.setOption({
|
||||
series: [{ data: this.ramData }],
|
||||
})
|
||||
|
||||
this.setState({ use })
|
||||
}
|
||||
|
||||
initCpuChart() {
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const past = this.now - (60 - i) * 1000
|
||||
this.cpuData.push({
|
||||
name: past,
|
||||
value: [past, -1],
|
||||
})
|
||||
}
|
||||
|
||||
const dom = this.refs['cpu-chart']
|
||||
this.cpuChart = echarts.init(dom)
|
||||
const option = {
|
||||
grid: {
|
||||
show: true,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
borderColor: 'rgba(0, 123, 255, 1)',
|
||||
borderWidth: 2,
|
||||
zlevel: 2,
|
||||
},
|
||||
tooltip: false,
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
min: 0,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
hoverAnimation: false,
|
||||
animation: false,
|
||||
data: this.cpuData,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(0, 123, 255, .8)',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(0, 123, 255, .3)',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
this.cpuChart.setOption(option)
|
||||
}
|
||||
|
||||
initRamChart() {
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const past = this.now - (60 - i) * 1000
|
||||
this.ramData.push({
|
||||
name: past,
|
||||
value: [past, -1],
|
||||
})
|
||||
}
|
||||
|
||||
const dom = this.refs['ram-chart']
|
||||
this.ramChart = echarts.init(dom)
|
||||
const option = {
|
||||
grid: {
|
||||
show: true,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
borderColor: 'rgba(83, 29, 171, 1)',
|
||||
borderWidth: 2,
|
||||
zlevel: 2,
|
||||
},
|
||||
tooltip: false,
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
min: 0,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
hoverAnimation: false,
|
||||
animation: false,
|
||||
data: this.ramData,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(83, 29, 171, .8)',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(83, 29, 171, .3)',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
this.ramChart.setOption(option)
|
||||
}
|
||||
|
||||
onResizeCharts = () => {
|
||||
this.cpuChart.resize()
|
||||
this.ramChart.resize()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { base } = this.props
|
||||
const { use, nowMoment } = this.state
|
||||
const { cpuName, cpuBaseSpeed, processorCount, totalRam } = base
|
||||
const { cpuRate, ramRate } = use
|
||||
|
||||
const diffDays = nowMoment.diff(this.systemStart, 'days')
|
||||
const diff =
|
||||
diffDays + ':' + moment(nowMoment.diff(this.systemStart)).utc().format('HH:mm:ss')
|
||||
|
||||
return (
|
||||
<>
|
||||
<Col xl={12} lg={24}>
|
||||
<Card bordered={false}>
|
||||
<Row align="bottom" justify="space-between">
|
||||
<div className="h2">CPU</div>
|
||||
<div className="h5">{cpuName}</div>
|
||||
</Row>
|
||||
<div className="h-200 mt-md mb-md" ref="cpu-chart"></div>
|
||||
<Row>
|
||||
<Col flex="1">
|
||||
<Statistic title="使用率" value={(cpuRate || 0) + ' %'} />
|
||||
<Statistic title="正常运行时间" value={diff} />
|
||||
</Col>
|
||||
<Col flex="1">
|
||||
<Descriptions column={1}>
|
||||
<Descriptions.Item label="基准速度">
|
||||
<b>{((cpuBaseSpeed || 0) / 1000).toFixed(2)} GHz</b>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="逻辑处理器">
|
||||
<b>{processorCount || 0}</b>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xl={12} lg={24}>
|
||||
<Card bordered={false}>
|
||||
<Row align="bottom" justify="space-between">
|
||||
<div className="h2">内存</div>
|
||||
<div className="h5">{((totalRam || 0) / 1024).toFixed(1)} GB</div>
|
||||
</Row>
|
||||
<div className="h-200 mt-md mb-md" ref="ram-chart"></div>
|
||||
<Row>
|
||||
<Col flex="1">
|
||||
<Statistic
|
||||
title="使用中"
|
||||
value={
|
||||
(((totalRam || 0) / 1024) * ((ramRate || 1) / 100)).toFixed(
|
||||
1
|
||||
) + ' GB'
|
||||
}
|
||||
/>
|
||||
<Statistic
|
||||
title="可用"
|
||||
value={
|
||||
(
|
||||
((totalRam || 0) / 1024) *
|
||||
(1 - (ramRate || 1) / 100)
|
||||
).toFixed(1) + ' GB'
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user