github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

U web monitor update

pull/22/head
雷二猛 2019-12-05 23:11:51 +08:00
parent 00078d3098
commit fb7b7efd0f
4 changed files with 151 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
spug_web/src/pages/alarm/group/Form.js
View File

@ -56,10 +56,11 @@ class ComForm extends React.Component {
<Form.Item {...itemLayout} required label="选择联系人">
{getFieldDecorator('contacts', {valuePropName: 'targetKeys', initialValue: info['contacts']})(
<Transfer
titles={['已有联系人', '已选联系人']}
listStyle={{width: 199}}
dataSource={contactStore.records.map(x => ({key: x.id, title: x.name}))}
render={item => item.title}/>
rowKey={item => item.id}
titles={['已有联系人', '已选联系人']}
listStyle={{width: 199}}
dataSource={contactStore.records}
render={item => item.name}/>
)}
</Form.Item>
</Form>

223
spug_web/src/pages/monitor/Form.js
View File

@ -1,11 +1,13 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Modal, Form, Input, Select, Radio, message } from 'antd';
import { Modal, Form, Input, Select, Radio, message, Steps, Button, Transfer, Checkbox } from 'antd';
import TemplateSelector from '../exec/task/TemplateSelector';
import { LinkButton, SHEditor } from 'components';
import http from 'libs/http';
import store from './store';
import hostStore from '../host/store';
import groupStore from '../alarm/group/store';
import styles from './index.module.css';
@observer
class ComForm extends React.Component {
@ -17,6 +19,12 @@ class ComForm extends React.Component {
extra: {[store.record.type]: store.record.extra},
addr: {},
showTmp: false,
page: 0,
modeOptions: [
{label: '微信', 'value': '1'},
{label: '短信', 'value': '2'},
{label: '钉钉', 'value': '3'},
{label: '邮件', 'value': '4'}]
}
}
@ -57,6 +65,11 @@ class ComForm extends React.Component {
wrapperCol: {span: 14}
};
itemTailLayout = {
labelCol: {span: 6},
wrapperCol: {span: 14, offset: 6}
};
getStyle = (t) => {
const type = this.props.form.getFieldValue('type');
return t.indexOf(type) !== -1 ? {display: 'block'} : {display: 'none'}
@ -82,10 +95,22 @@ class ComForm extends React.Component {
</Select>
);
verifyButtonStatus = () => {
const data = this.props.form.getFieldsValue();
const {notify_grp, notify_mode, type, name} = data;
let b1 = this.state.addr[type] && name;
if (type !== '1') {
b1 = b1 && this.state.extra[type]
}
const b2 = notify_grp && notify_grp.length && notify_mode && notify_mode.length;
return [b1, b2];
};
render() {
const info = store.record;
const {loading, extra, addr, showTmp} = this.state;
const {loading, extra, addr, showTmp, page, modeOptions} = this.state;
const {getFieldDecorator} = this.props.form;
const [b1, b2] = this.verifyButtonStatus();
return (
<Modal
visible
@ -93,89 +118,121 @@ class ComForm extends React.Component {
maskClosable={false}
title={store.record.id ? '编辑任务' : '新建任务'}
onCancel={() => store.formVisible = false}
confirmLoading={loading}
onOk={this.handleSubmit}>
footer={null}>
<Steps current={page} className={styles.steps}>
<Steps.Step key={0} title="创建任务"/>
<Steps.Step key={1} title="设置规则"/>
</Steps>
<Form>
<Form.Item {...this.itemLayout} label="监控类型">
{getFieldDecorator('type', {initialValue: info['type'] || '1'})(
<Select placeholder="请选择监控类型">
<Select.Option value="1">站点检测</Select.Option>
<Select.Option value="2">端口检测</Select.Option>
<Select.Option value="3">进程检测</Select.Option>
<Select.Option value="4">自定义脚本</Select.Option>
<div style={{display: page === 0 ? 'block' : 'none'}}>
<Form.Item {...this.itemLayout} label="监控类型">
{getFieldDecorator('type', {initialValue: info['type'] || '1'})(
<Select placeholder="请选择监控类型">
<Select.Option value="1">站点检测</Select.Option>
<Select.Option value="2">端口检测</Select.Option>
<Select.Option value="3">进程检测</Select.Option>
<Select.Option value="4">自定义脚本</Select.Option>
</Select>
)}
</Form.Item>
<Form.Item {...this.itemLayout} required label="任务名称">
{getFieldDecorator('name', {initialValue: info['name']})(
<Input placeholder="请输入任务名称"/>
)}
</Form.Item>
<Form.Item {...this.itemLayout} required label="监控地址" style={this.getStyle('1')}>
<Input value={addr['1']} addonBefore={this.siteBefore()} placeholder="请输入监控地址"
onChange={e => this.handleAddr('1', e)}/>
</Form.Item>
<Form.Item {...this.itemLayout} required label="监控地址" style={this.getStyle('2')}>
<Input value={addr['2']} placeholder="请输入监控地址（IP/域名）" onChange={e => this.handleAddr('2', e)}/>
</Form.Item>
<Form.Item {...this.itemLayout} required label="监控主机" style={this.getStyle('34')}>
<Select value={addr['3']} placeholder="请选择主机" onChange={v => this.handleAddr('3', v)}>
{hostStore.records.map(item => (
<Select.Option value={String(item.id)}
key={item.id}>{item.name}({item.hostname}:{item.port})</Select.Option>
))}
</Select>
)}
</Form.Item>
<Form.Item {...this.itemLayout} required label="任务名称">
{getFieldDecorator('name', {initialValue: info['name']})(
<Input placeholder="请输入任务名称"/>
)}
</Form.Item>
<Form.Item {...this.itemLayout} required label="监控地址" style={this.getStyle('1')}>
<Input value={addr['1']} addonBefore={this.siteBefore()} placeholder="请输入监控地址"
onChange={e => this.handleAddr('1', e)}/>
</Form.Item>
<Form.Item {...this.itemLayout} required label="监控地址" style={this.getStyle('2')}>
<Input value={addr['2']} placeholder="请输入监控地址（IP/域名）" onChange={e => this.handleAddr('2', e)}/>
</Form.Item>
<Form.Item {...this.itemLayout} required label="监控主机" style={this.getStyle('34')}>
<Select value={addr['3']} placeholder="请选择主机" onChange={v => this.handleAddr('3', v)}>
{hostStore.records.map(item => (
<Select.Option value={String(item.id)} key={item.id}>{item.name}({item.hostname}:{item.port})</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item {...this.itemLayout} required label="检测端口" style={this.getStyle('2')}>
<Input value={extra['2']} placeholder="请输入端口号" onChange={e => this.handleExtra('2', e)}/>
</Form.Item>
<Form.Item {...this.itemLayout} required label="进程名称" style={this.getStyle('3')}>
<Input value={extra['3']} placeholder="请输入进程名称" onChange={e => this.handleExtra('3', e)}/>
</Form.Item>
<Form.Item {...this.itemLayout} required label="脚本内容" style={this.getStyle('4')}
extra={<LinkButton onClick={() => this.setState({showTmp: true})}>从模板添加</LinkButton>}>
<SHEditor value={extra['4']} height="200px" onChange={e => this.handleExtra('4', e)}/>
</Form.Item>
<Form.Item {...this.itemLayout} label="监控频率">
{getFieldDecorator('rate', {initialValue: info['rate'] || 5})(
<Radio.Group>
<Radio value={1}>1分钟</Radio>
<Radio value={5}>5分钟</Radio>
<Radio value={15}>15分钟</Radio>
<Radio value={30}>30分钟</Radio>
<Radio value={60}>60分钟</Radio>
</Radio.Group>
)}
</Form.Item>
<Form.Item {...this.itemLayout} label="报警阈值" help="连续几次超过阈值后报警">
{getFieldDecorator('threshold', {initialValue: info['threshold'] || 3})(
<Radio.Group>
<Radio value={1}>1次</Radio>
<Radio value={2}>2次</Radio>
<Radio value={3}>3次</Radio>
<Radio value={4}>4次</Radio>
<Radio value={5}>5次</Radio>
</Radio.Group>
)}
</Form.Item>
<Form.Item {...this.itemLayout} label="通道沉默">
{getFieldDecorator('quiet', {initialValue: info['quiet'] || 24 * 60})(
<Select placeholder="请选择">
<Select.Option value={5}>5分钟</Select.Option>
<Select.Option value={10}>10分钟</Select.Option>
<Select.Option value={15}>15分钟</Select.Option>
<Select.Option value={30}>30分钟</Select.Option>
<Select.Option value={60}>60分钟</Select.Option>
<Select.Option value={3 * 60}>3小时</Select.Option>
<Select.Option value={6 * 60}>6小时</Select.Option>
<Select.Option value={12 * 60}>12小时</Select.Option>
<Select.Option value={24 * 60}>24小时</Select.Option>
</Select>
)}
</Form.Item>
<Form.Item {...this.itemLayout} label="备注信息">
{getFieldDecorator('desc', {initialValue: info['desc']})(
<Input.TextArea placeholder="请输入备注信息"/>
)}
</Form.Item>
<Form.Item {...this.itemLayout} required label="检测端口" style={this.getStyle('2')}>
<Input value={extra['2']} placeholder="请输入端口号" onChange={e => this.handleExtra('2', e)}/>
</Form.Item>
<Form.Item {...this.itemLayout} required label="进程名称" style={this.getStyle('3')}>
<Input value={extra['3']} placeholder="请输入进程名称" onChange={e => this.handleExtra('3', e)}/>
</Form.Item>
<Form.Item {...this.itemLayout} required label="脚本内容" style={this.getStyle('4')}
extra={<LinkButton onClick={() => this.setState({showTmp: true})}>从模板添加</LinkButton>}>
<SHEditor value={extra['4']} height="200px" onChange={e => this.handleExtra('4', e)}/>
</Form.Item>
<Form.Item {...this.itemLayout} label="备注信息">
{getFieldDecorator('desc', {initialValue: info['desc']})(
<Input.TextArea placeholder="请输入备注信息"/>
)}
</Form.Item>
</div>
<div style={{display: page === 1 ? 'block' : 'none'}}>
<Form.Item {...this.itemLayout} label="监控频率">
{getFieldDecorator('rate', {initialValue: info['rate'] || 5})(
<Radio.Group>
<Radio value={1}>1分钟</Radio>
<Radio value={5}>5分钟</Radio>
<Radio value={15}>15分钟</Radio>
<Radio value={30}>30分钟</Radio>
<Radio value={60}>60分钟</Radio>
</Radio.Group>
)}
</Form.Item>
<Form.Item {...this.itemLayout} label="报警阈值">
{getFieldDecorator('threshold', {initialValue: info['threshold'] || 3})(
<Radio.Group>
<Radio value={1}>1次</Radio>
<Radio value={2}>2次</Radio>
<Radio value={3}>3次</Radio>
<Radio value={4}>4次</Radio>
<Radio value={5}>5次</Radio>
</Radio.Group>
)}
</Form.Item>
<Form.Item {...this.itemLayout} required label="报警联系人组">
{getFieldDecorator('notify_grp', {valuePropName: 'targetKeys', initialValue: info['notify_grp']})(
<Transfer
lazy={false}
rowKey={item => item.id}
titles={['已有联系组', '已选联系组']}
listStyle={{width: 199}}
dataSource={groupStore.records}
render={item => item.name}/>
)}
</Form.Item>
<Form.Item {...this.itemLayout} required label="报警方式">
{getFieldDecorator('notify_mode', {initialValue: info['notify_mode']})(
<Checkbox.Group options={modeOptions}/>
)}
</Form.Item>
<Form.Item {...this.itemLayout} label="通道沉默">
{getFieldDecorator('quiet', {initialValue: info['quiet'] || 24 * 60})(
<Select placeholder="请选择">
<Select.Option value={5}>5分钟</Select.Option>
<Select.Option value={10}>10分钟</Select.Option>
<Select.Option value={15}>15分钟</Select.Option>
<Select.Option value={30}>30分钟</Select.Option>
<Select.Option value={60}>60分钟</Select.Option>
<Select.Option value={3 * 60}>3小时</Select.Option>
<Select.Option value={6 * 60}>6小时</Select.Option>
<Select.Option value={12 * 60}>12小时</Select.Option>
<Select.Option value={24 * 60}>24小时</Select.Option>
</Select>
)}
</Form.Item>
</div>
<Form.Item {...this.itemTailLayout}>
{page === 1 &&
<Button disabled={!b2} type="primary" onClick={this.handleSubmit} loading={loading}>提交</Button>}
{page === 0 &&
<Button disabled={!b1} type="primary" onClick={() => this.setState({page: page + 1})}>下一步</Button>}
{page !== 0 &&
<Button style={{marginLeft: 20}} onClick={() => this.setState({page: page - 1})}>上一步</Button>}
</Form.Item>
</Form>
{showTmp && <TemplateSelector

2
spug_web/src/pages/monitor/Table.js
View File

@ -8,6 +8,7 @@ import store from './store';
import hostStore from '../host/store';
import lds from 'lodash';
import moment from "moment";
import groupStore from "pages/alarm/group/store";
@observer
class ComTable extends React.Component {
@ -20,6 +21,7 @@ class ComTable extends React.Component {
componentDidMount() {
store.fetchRecords();
if (groupStore.records.length === 0) groupStore.fetchRecords();
if (hostStore.records.length === 0) {
hostStore.fetchRecords().then(this._handleHosts)
} else {

4
spug_web/src/pages/monitor/index.module.css Normal file
View File

@ -0,0 +1,4 @@
.steps {
width: 520px;
margin: 0 auto 30px;
}