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="选择联系人"> <Form.Item {...itemLayout} required label="选择联系人">
{getFieldDecorator('contacts', {valuePropName: 'targetKeys', initialValue: info['contacts']})( {getFieldDecorator('contacts', {valuePropName: 'targetKeys', initialValue: info['contacts']})(
<Transfer <Transfer
titles={['已有联系人', '已选联系人']} rowKey={item => item.id}
listStyle={{width: 199}} titles={['已有联系人', '已选联系人']}
dataSource={contactStore.records.map(x => ({key: x.id, title: x.name}))} listStyle={{width: 199}}
render={item => item.title}/> dataSource={contactStore.records}
render={item => item.name}/>
)} )}
</Form.Item> </Form.Item>
</Form> </Form>

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

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