mirror of https://github.com/openspug/spug
U 优化监控中心总览
parent
8cfb3ff461
commit
dda6de561c
|
@ -121,9 +121,14 @@ def get_overview(request):
|
||||||
'type': item.get_type_display(),
|
'type': item.get_type_display(),
|
||||||
'target': key,
|
'target': key,
|
||||||
'desc': item.desc,
|
'desc': item.desc,
|
||||||
'status': '1' if item.is_active else '0',
|
'status': '0',
|
||||||
'latest_run_time': item.latest_run_time,
|
'latest_run_time': item.latest_run_time,
|
||||||
}
|
}
|
||||||
|
if item.is_active:
|
||||||
|
if item.latest_run_time:
|
||||||
|
data[key]['status'] = '1'
|
||||||
|
else:
|
||||||
|
data[key]['status'] = '10'
|
||||||
if item.is_active:
|
if item.is_active:
|
||||||
for key, val in rds.hgetall(f'spug:det:{item.id}').items():
|
for key, val in rds.hgetall(f'spug:det:{item.id}').items():
|
||||||
prefix, key = key.decode().split('_', 1)
|
prefix, key = key.decode().split('_', 1)
|
||||||
|
|
|
@ -9,21 +9,22 @@ import { Card, Input, Select, Space, Tooltip, Spin, message } from 'antd';
|
||||||
import { FrownOutlined, RedoOutlined, SyncOutlined } from '@ant-design/icons';
|
import { FrownOutlined, RedoOutlined, SyncOutlined } from '@ant-design/icons';
|
||||||
import styles from './index.module.less';
|
import styles from './index.module.less';
|
||||||
import { http, includes } from 'libs';
|
import { http, includes } from 'libs';
|
||||||
import moment from 'moment';
|
|
||||||
import store from './store';
|
import store from './store';
|
||||||
|
|
||||||
const ColorMap = {
|
const StyleMap = {
|
||||||
'0': '#cccccc',
|
'0': {background: '#99999933', border: '2px solid #999', color: '#999999'},
|
||||||
'1': '#009400',
|
'1': {background: '#16a98733', border: '2px solid #16a987', color: '#16a987'},
|
||||||
'2': '#ffba00',
|
'2': {background: '#ffba0033', border: '2px solid #ffba00', color: '#ffba00'},
|
||||||
'3': '#fa383e',
|
'3': {background: '#f2655d33', border: '2px solid #f2655d', color: '#f2655d'},
|
||||||
|
'10': {background: '#99999919', border: '2px dashed #999999'}
|
||||||
}
|
}
|
||||||
|
|
||||||
const StatusMap = {
|
const StatusMap = {
|
||||||
'1': '正常',
|
'1': '正常',
|
||||||
'2': '警告',
|
'2': '警告',
|
||||||
'3': '紧急',
|
'3': '紧急',
|
||||||
'0': '禁用',
|
'0': '未激活',
|
||||||
|
'10': '待调度'
|
||||||
}
|
}
|
||||||
|
|
||||||
let AutoReload = null
|
let AutoReload = null
|
||||||
|
@ -37,14 +38,12 @@ function CardItem(props) {
|
||||||
<div>描述: {desc}</div>
|
<div>描述: {desc}</div>
|
||||||
<div>目标: {target}</div>
|
<div>目标: {target}</div>
|
||||||
<div>状态: {StatusMap[status]}</div>
|
<div>状态: {StatusMap[status]}</div>
|
||||||
{latest_run_time ? <div>更新: {latest_run_time}</div> : null}
|
<div>更新: {latest_run_time || '---'}</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
return (
|
return (
|
||||||
<Tooltip title={title}>
|
<Tooltip title={title}>
|
||||||
<div className={styles.card} style={{backgroundColor: ColorMap[status]}}>
|
<div className={styles.card} style={StyleMap[status]}/>
|
||||||
{moment(latest_run_time).fromNow()}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -119,16 +118,14 @@ function MonitorCard() {
|
||||||
)}>
|
)}>
|
||||||
<Spin spinning={fetching}>
|
<Spin spinning={fetching}>
|
||||||
<div className={styles.header}>
|
<div className={styles.header}>
|
||||||
{Object.entries(StatusMap).map(([s, desc]) => {
|
{Object.entries(StyleMap).map(([s, style]) => {
|
||||||
|
if (s === '10') return null
|
||||||
const count = dataSource.filter(x => x.status === s).length;
|
const count = dataSource.filter(x => x.status === s).length;
|
||||||
return count ? (
|
return count ? (
|
||||||
<div
|
<div
|
||||||
key={s}
|
key={s}
|
||||||
className={styles.item}
|
className={styles.item}
|
||||||
style={s === status ? {backgroundColor: ColorMap[s]} : {
|
style={s === status ? style : {...style, background: '#fff'}}
|
||||||
border: `1.5px solid ${ColorMap[s]}`,
|
|
||||||
color: ColorMap[s]
|
|
||||||
}}
|
|
||||||
onClick={() => setStatus(s === status ? '' : s)}>
|
onClick={() => setStatus(s === status ? '' : s)}>
|
||||||
{dataSource.filter(x => x.status === s).length}
|
{dataSource.filter(x => x.status === s).length}
|
||||||
</div>
|
</div>
|
||||||
|
@ -136,7 +133,7 @@ function MonitorCard() {
|
||||||
})}
|
})}
|
||||||
<div
|
<div
|
||||||
className={styles.authLoad}
|
className={styles.authLoad}
|
||||||
style={autoReload ? {backgroundColor: '#1890ff'} : {color: '#1890ff', border: '1.5px solid #1890ff'}}
|
style={autoReload ? {backgroundColor: '#1890ff'} : {color: '#1890ff', border: '2px solid #1890ff'}}
|
||||||
onClick={handleAutoReload}>
|
onClick={handleAutoReload}>
|
||||||
{autoReload ? <SyncOutlined/> : <RedoOutlined/>}
|
{autoReload ? <SyncOutlined/> : <RedoOutlined/>}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 60px;
|
width: 40px;
|
||||||
height: 50px;
|
height: 40px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
@ -24,8 +24,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 30px;
|
min-width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
|
padding: 0 1px;
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -37,7 +38,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 30px;
|
width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-left: 24px;
|
margin-left: 24px;
|
||||||
|
|
Loading…
Reference in New Issue