U web monitor update

spug_web/src/pages/alarm/group/Form.js

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

spug_web/src/pages/monitor/Form.js

@@ -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,9 +118,13 @@ 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>
+          <div style={{display: page === 0 ? 'block' : 'none'}}>
             <Form.Item {...this.itemLayout} label="监控类型">
               {getFieldDecorator('type', {initialValue: info['type'] || '1'})(
                 <Select placeholder="请选择监控类型">
@@ -121,7 +150,8 @@ class ComForm extends React.Component {
             <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.Option value={String(item.id)}
+                                 key={item.id}>{item.name}({item.hostname}:{item.port})</Select.Option>
                 ))}
               </Select>
             </Form.Item>
@@ -135,6 +165,13 @@ class ComForm extends React.Component {
                        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>
@@ -146,7 +183,7 @@ class ComForm extends React.Component {
                 </Radio.Group>
               )}
             </Form.Item>
-          <Form.Item {...this.itemLayout} label="报警阈值" help="连续几次超过阈值后报警">
+            <Form.Item {...this.itemLayout} label="报警阈值">
               {getFieldDecorator('threshold', {initialValue: info['threshold'] || 3})(
                 <Radio.Group>
                   <Radio value={1}>1次</Radio>
@@ -157,6 +194,22 @@ class ComForm extends React.Component {
                 </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="请选择">
@@ -172,10 +225,14 @@ class ComForm extends React.Component {
                 </Select>
               )}
             </Form.Item>
-          <Form.Item {...this.itemLayout} label="备注信息">
-            {getFieldDecorator('desc', {initialValue: info['desc']})(
-              <Input.TextArea placeholder="请输入备注信息"/>
-            )}
+          </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

spug_web/src/pages/monitor/Table.js

@@ -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 {

spug_web/src/pages/monitor/index.module.css

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