From 77636132162bf520e98852b9741b81ec4e713036 Mon Sep 17 00:00:00 2001
From: chenhua <huachen_1@tujia.com>
Date: Mon, 23 Nov 2020 00:19:55 +0800
Subject: [PATCH] #search manage  keyword modify

---
 .../pages/SearchManage/alias/AliasManage.js   | 517 +++--------
 .../pages/SearchManage/alias/AliasManage.less |  49 -
 .../SearchManage/alias/{param.js => Param.js} |  16 +-
 .../SearchManage/alias/{rule.js => Rule.js}   |  14 +-
 .../SearchManage/analyzer/AnalyzerTest.js     | 548 +++--------
 web/src/pages/SearchManage/analyzer/Manage.js |  14 +-
 web/src/pages/SearchManage/models/logstash.js |  49 +
 web/src/pages/SearchManage/nlp/Intention.js   |  12 +-
 web/src/pages/SearchManage/nlp/Knowledge.js   |  20 +-
 web/src/pages/SearchManage/nlp/Query.js       |  14 +-
 web/src/pages/SearchManage/nlp/Text.js        |  18 +-
 .../pages/SearchManage/template/History.js    | 854 ++++++++++++------
 .../pages/SearchManage/template/History.less  | 210 +----
 web/src/pages/SearchManage/template/Param.js  | 845 ++++++++++++-----
 .../pages/SearchManage/template/Param.less    | 210 +----
 .../pages/SearchManage/template/Summary.js    | 655 ++++++++------
 16 files changed, 2011 insertions(+), 2034 deletions(-)
 delete mode 100644 web/src/pages/SearchManage/alias/AliasManage.less
 rename web/src/pages/SearchManage/alias/{param.js => Param.js} (97%)
 rename web/src/pages/SearchManage/alias/{rule.js => Rule.js} (97%)
 create mode 100644 web/src/pages/SearchManage/models/logstash.js

diff --git a/web/src/pages/SearchManage/alias/AliasManage.js b/web/src/pages/SearchManage/alias/AliasManage.js
index ebf7a29b..c35f98e5 100644
--- a/web/src/pages/SearchManage/alias/AliasManage.js
+++ b/web/src/pages/SearchManage/alias/AliasManage.js
@@ -1,273 +1,104 @@
 import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
-import moment from 'moment';
 import {
   Row,
   Col,
   Card,
   Form,
   Input,
-  Select,
-  Icon,
   Button,
-  Dropdown,
-  Menu,
-  InputNumber,
-  DatePicker,
   Modal,
   message,
-  Badge,
   Divider,
-  Steps,
-  Radio,
 } from 'antd';
 import StandardTable from '@/components/StandardTable';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 
-import styles from './AliasManage.less';
+import styles from '../../List/TableList.less';
 
 const FormItem = Form.Item;
-const { Step } = Steps;
 const { TextArea } = Input;
-const { Option } = Select;
-const RadioGroup = Radio.Group;
-const getValue = obj =>
-  Object.keys(obj)
-    .map(key => obj[key])
-    .join(',');
-const statusMap = ['default', 'processing', 'success', 'error'];
-const status = ['关闭', '运行中', '已上线', '异常'];
+
 const CreateForm = Form.create()(props => {
-    const { modalVisible, form, handleAdd, handleModalVisible } = props;
-    const okHandle = () => {
-        form.validateFields((err, fieldsValue) => {
-            if (err) return;
-            form.resetFields();
-            handleAdd(fieldsValue);
-        });
-    };
-    return (
-        <Modal
-    destroyOnClose
-    title="新建规则"
-    visible={modalVisible}
-    onOk={okHandle}
-    onCancel={() => handleModalVisible()}
->
-<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
-        {form.getFieldDecorator('desc', {
-            rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
-        })(<Input placeholder="请输入" />)}
-</FormItem>
-    </Modal>
-);
-});
-
-@Form.create()
-class UpdateForm extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      formVals: {
-        name: props.values.name,
-        desc: props.values.desc,
-        key: props.values.key,
-        target: '0',
-        template: '0',
-        type: '1',
-        time: '',
-        frequency: 'month',
-      },
-      currentStep: 0,
-    };
-
-    this.formLayout = {
-      labelCol: { span: 7 },
-      wrapperCol: { span: 13 },
-    };
-  }
-
-  handleNext = currentStep => {
-    const { form, handleUpdate } = this.props;
-    const { formVals: oldValue } = this.state;
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
     form.validateFields((err, fieldsValue) => {
       if (err) return;
-      const formVals = { ...oldValue, ...fieldsValue };
-      this.setState(
-        {
-          formVals,
-        },
-        () => {
-          if (currentStep < 2) {
-            this.forward();
-          } else {
-            handleUpdate(formVals);
-          }
-        }
-      );
+      form.resetFields();
+      handleAdd(fieldsValue);
     });
   };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建索引"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引名称">
+        {form.getFieldDecorator('index', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
 
-  backward = () => {
-    const { currentStep } = this.state;
-    this.setState({
-      currentStep: currentStep - 1,
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
     });
   };
-
-  forward = () => {
-    const { currentStep } = this.state;
-    this.setState({
-      currentStep: currentStep + 1,
-    });
-  };
-
-  renderContent = (currentStep, formVals) => {
-    const { form } = this.props;
-    if (currentStep === 1) {
-      return [
-        <FormItem key="target" {...this.formLayout} label="监控对象">
-          {form.getFieldDecorator('target', {
-            initialValue: formVals.target,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="0">表一</Option>
-              <Option value="1">表二</Option>
-            </Select>
-          )}
-        </FormItem>,
-        <FormItem key="template" {...this.formLayout} label="规则模板">
-          {form.getFieldDecorator('template', {
-            initialValue: formVals.template,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="0">规则模板一</Option>
-              <Option value="1">规则模板二</Option>
-            </Select>
-          )}
-        </FormItem>,
-        <FormItem key="type" {...this.formLayout} label="规则类型">
-          {form.getFieldDecorator('type', {
-            initialValue: formVals.type,
-          })(
-            <RadioGroup>
-              <Radio value="0">强</Radio>
-              <Radio value="1">弱</Radio>
-            </RadioGroup>
-          )}
-        </FormItem>,
-      ];
-    }
-    if (currentStep === 2) {
-      return [
-        <FormItem key="time" {...this.formLayout} label="开始时间">
-          {form.getFieldDecorator('time', {
-            rules: [{ required: true, message: '请选择开始时间！' }],
-          })(
-            <DatePicker
-              style={{ width: '100%' }}
-              showTime
-              format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间"
-            />
-          )}
-        </FormItem>,
-        <FormItem key="frequency" {...this.formLayout} label="调度周期">
-          {form.getFieldDecorator('frequency', {
-            initialValue: formVals.frequency,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="month">月</Option>
-              <Option value="week">周</Option>
-            </Select>
-          )}
-        </FormItem>,
-      ];
-    }
-      return [
-          <FormItem key="name" {...this.formLayout} label="别名">
-          {form.getFieldDecorator('name', {
-              rules: [{ required: true, message: '请输入别名！' }],
-              initialValue: formVals.name,
-          })(<Input placeholder="请输入" />)}
-          </FormItem>,
-              <FormItem key="desc" {...this.formLayout} label="描述">
-                  {form.getFieldDecorator('desc', {
-                      rules: [{ required: true, message: '请输入至少五个字符的描述！', min: 5 }],
-                      initialValue: formVals.desc,
-                  })(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
-          </FormItem>,
-          ];
-  };
-
-  renderFooter = currentStep => {
-    const { handleUpdateModalVisible } = this.props;
-    if (currentStep === 1) {
-      return [
-        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
-          上一步
-        </Button>,
-        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-          取消
-        </Button>,
-        <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
-          下一步
-        </Button>,
-      ];
-    }
-    if (currentStep === 2) {
-      return [
-        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
-          上一步
-        </Button>,
-        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-          取消
-        </Button>,
-        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
-          完成
-        </Button>,
-      ];
-    }
-    return [
-      <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-        取消
-      </Button>,
-      <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
-        下一步
-      </Button>,
-    ];
-  };
-
-  render() {
-    const { updateModalVisible, handleUpdateModalVisible } = this.props;
-    const { currentStep, formVals } = this.state;
-
-    return (
-      <Modal
-        width={640}
-        bodyStyle={{ padding: '32px 40px 48px' }}
-        destroyOnClose
-        title="别名配置"
-        visible={updateModalVisible}
-        footer={this.renderFooter(currentStep)}
-        onCancel={() => handleUpdateModalVisible()}
-      >
-        <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
-          <Step title="基本信息" />
-          <Step title="配置规则属性" />
-          <Step title="设定调度周期" />
-        </Steps>
-        {this.renderContent(currentStep, formVals)}
-      </Modal>
-    );
-  }
-}
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="索引设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引名称">
+        {form.getFieldDecorator('index', {
+          initialValue: values.index,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
 
 /* eslint react/no-multi-comp:0 */
-@connect(({ rule, loading }) => ({
-  rule,
-  loading: loading.models.rule,
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
 }))
 @Form.create()
 class AliasManage extends PureComponent {
@@ -277,65 +108,42 @@ class AliasManage extends PureComponent {
     expandForm: false,
     selectedRows: [],
     formValues: {},
-    stepFormValues: {},
+    updateFormValues: {},
   };
+  datasource = `[{"health":"green","status":"open","index":"blogs_fixed","uuid":"Q6zngGf9QVaWqpV0lF-0nw","pri":"1","rep":"1","docs.count":"1594","docs.deleted":"594","store.size":"17.9mb","pri.store.size":"8.9mb"},{"health":"red","status":"open","index":"elastic_qa","uuid":"_qkVlQ5LRoOKffV-nFj8Uw","pri":"1","rep":"1","docs.count":null,"docs.deleted":null,"store.size":null,"pri.store.size":null},{"health":"green","status":"open","index":".kibana-event-log-7.9.0-000001","uuid":"fgTtyl62Tc6F1ddJfPwqHA","pri":"1","rep":"1","docs.count":"20","docs.deleted":"0","store.size":"25kb","pri.store.size":"12.5kb"},{"health":"green","status":"open","index":"blogs","uuid":"Mb2n4wnNQSKqSToI_QO0Yg","pri":"1","rep":"1","docs.count":"1594","docs.deleted":"0","store.size":"11mb","pri.store.size":"5.5mb"},{"health":"green","status":"open","index":".kibana-event-log-7.9.0-000002","uuid":"8GpbwnDXR2KJUsw6srLnWw","pri":"1","rep":"1","docs.count":"9","docs.deleted":"0","store.size":"96.9kb","pri.store.size":"48.4kb"},{"health":"green","status":"open","index":".apm-agent-configuration","uuid":"vIaV9k2VS-W48oUOe2xNWA","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":"logs_server1","uuid":"u56jv2AyR2KOkruOfxIAnA","pri":"1","rep":"1","docs.count":"5386","docs.deleted":"0","store.size":"5.1mb","pri.store.size":"2.5mb"},{"health":"green","status":"open","index":".kibana_1","uuid":"dBCrfVblRPGVlYAIlP_Duw","pri":"1","rep":"1","docs.count":"3187","docs.deleted":"50","store.size":"24.8mb","pri.store.size":"12.4mb"},{"health":"green","status":"open","index":".tasks","uuid":"3RafayGeSNiqglO2BHof9Q","pri":"1","rep":"1","docs.count":"3","docs.deleted":"0","store.size":"39.9kb","pri.store.size":"19.9kb"},{"health":"green","status":"open","index":"filebeat-7.9.0-elastic_qa","uuid":"tktSYU14S3CrsrJb0ybpSQ","pri":"1","rep":"1","docs.count":"3009880","docs.deleted":"0","store.size":"1.6gb","pri.store.size":"850.1mb"},{"health":"green","status":"open","index":"analysis_test","uuid":"6ZHEAW1ST_qfg7mo4Bva4w","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":".apm-custom-link","uuid":"Y4N2TeVERrGacEGwY-NPAQ","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":"kibana_sample_data_ecommerce","uuid":"4FIWJKhGSr6bE72R0xEQyA","pri":"1","rep":"1","docs.count":"4675","docs.deleted":"0","store.size":"9.2mb","pri.store.size":"4.6mb"},{"health":"green","status":"open","index":".kibana_task_manager_1","uuid":"9afyndU_Q26oqOiEIoqRJw","pri":"1","rep":"1","docs.count":"6","docs.deleted":"2","store.size":"378.8kb","pri.store.size":"12.5kb"},{"health":"green","status":"open","index":".async-search","uuid":"2VbJgnN7SsqC-DWN64yXUQ","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"3.9kb","pri.store.size":"3.7kb"}]`;
 
   columns = [
     {
       title: '索引名称',
-      dataIndex: 'name',
+      dataIndex: 'index',
     },
     {
-      title: '别名',
-      dataIndex: 'desc',
+      title: '文档数',
+      dataIndex: 'docs.count',
     },
     {
-      title: '索引调用次数',
-      dataIndex: 'callNo',
-      sorter: true,
-      align: 'right',
-      render: val => `${val} 万`,
-      // mark to display a total number
-      needTotal: true,
+      title: '主分片数',
+      dataIndex: 'pri'
     },
     {
-      title: '索引状态',
-      dataIndex: 'status',
-      filters: [
-        {
-          text: status[0],
-          value: 0,
-        },
-        {
-          text: status[1],
-          value: 1,
-        },
-        {
-          text: status[2],
-          value: 2,
-        },
-        {
-          text: status[3],
-          value: 3,
-        },
-      ],
-      render(val) {
-        return <Badge status={statusMap[val]} text={status[val]} />;
-      },
+      title: '从分片数',
+      dataIndex: 'rep'
     },
     {
-      title: '最后更新时间',
-      dataIndex: 'updatedAt',
-      sorter: true,
-      render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
+      title: '存储大小',
+      dataIndex: 'store.size'
     },
     {
       title: '操作',
       render: (text, record) => (
         <Fragment>
-          <a onClick={() => this.handleUpdateModalVisible(true, record)}>配置别名</a>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>别名设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
           <Divider type="vertical" />
-          <a href="">订阅警报</a>
         </Fragment>
       ),
     },
@@ -343,9 +151,9 @@ class AliasManage extends PureComponent {
 
   componentDidMount() {
     const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/fetch',
-    });
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
   }
 
   handleStandardTableChange = (pagination, filtersArg, sorter) => {
@@ -369,7 +177,7 @@ class AliasManage extends PureComponent {
     }
 
     dispatch({
-      type: 'rule/fetch',
+      type: 'pipeline/fetch',
       payload: params,
     });
   };
@@ -381,29 +189,20 @@ class AliasManage extends PureComponent {
       formValues: {},
     });
     dispatch({
-      type: 'rule/fetch',
+      type: 'pipeline/fetch',
       payload: {},
     });
   };
 
-  toggleForm = () => {
-    const { expandForm } = this.state;
-    this.setState({
-      expandForm: !expandForm,
-    });
-  };
-
-  handleMenuClick = e => {
+  handleDeleteClick = e => {
     const { dispatch } = this.props;
     const { selectedRows } = this.state;
 
     if (!selectedRows) return;
-    switch (e.key) {
-      case 'remove':
         dispatch({
-          type: 'rule/remove',
+          type: 'pipeline/delete',
           payload: {
-            key: selectedRows.map(row => row.key),
+            key: selectedRows.map(row => row.name),
           },
           callback: () => {
             this.setState({
@@ -411,10 +210,6 @@ class AliasManage extends PureComponent {
             });
           },
         });
-        break;
-      default:
-        break;
-    }
   };
 
   handleSelectRows = rows => {
@@ -456,16 +251,18 @@ class AliasManage extends PureComponent {
   handleUpdateModalVisible = (flag, record) => {
     this.setState({
       updateModalVisible: !!flag,
-      stepFormValues: record || {},
+      updateFormValues: record || {},
     });
   };
 
   handleAdd = fields => {
     const { dispatch } = this.props;
     dispatch({
-      type: 'rule/add',
+      type: 'pipeline/add',
       payload: {
+        name: fields.name,
         desc: fields.desc,
+        processors: fields.processors,
       },
     });
 
@@ -476,15 +273,15 @@ class AliasManage extends PureComponent {
   handleUpdate = fields => {
     const { dispatch } = this.props;
     dispatch({
-      type: 'rule/update',
+      type: 'pipeline/update',
       payload: {
         name: fields.name,
         desc: fields.desc,
-        key: fields.key,
+        processors: fields.processors,
       },
     });
 
-    message.success('配置成功');
+    message.success('修改成功');
     this.handleUpdateModalVisible();
   };
 
@@ -500,16 +297,6 @@ class AliasManage extends PureComponent {
               {getFieldDecorator('name')(<Input placeholder="请输入" />)}
             </FormItem>
           </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="别名">
-              {getFieldDecorator('status')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
           <Col md={8} sm={24}>
             <span className={styles.submitButtons}>
               <Button type="primary" htmlType="submit">
@@ -518,9 +305,6 @@ class AliasManage extends PureComponent {
               <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                 重置
               </Button>
-              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
-                展开 <Icon type="down" />
-              </a>
             </span>
           </Col>
         </Row>
@@ -528,78 +312,18 @@ class AliasManage extends PureComponent {
     );
   }
 
-  renderAdvancedForm() {
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-    return (
-      <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="索引名称">
-              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="别名">
-              {getFieldDecorator('status')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="索引状态">
-              {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
-            </FormItem>
-          </Col>
-        </Row>
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="更新日期">
-              {getFieldDecorator('date')(
-                <DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
-              )}
-            </FormItem>
-          </Col>
-        </Row>
-        <div style={{ overflow: 'hidden' }}>
-          <div style={{ float: 'right', marginBottom: 24 }}>
-            <Button type="primary" htmlType="submit">
-              查询
-            </Button>
-            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
-              重置
-            </Button>
-            <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
-              收起 <Icon type="up" />
-            </a>
-          </div>
-        </div>
-      </Form>
-    );
-  }
-
   renderForm() {
-    const { expandForm } = this.state;
-    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
+    return this.renderSimpleForm();
   }
 
   render() {
-    const {
-      rule: { data },
-      loading,
-    } = this.props;
-    const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
-    const menu = (
-      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
-        <Menu.Item key="remove">删除</Menu.Item>
-        <Menu.Item key="approval">批量审批</Menu.Item>
-      </Menu>
-    );
-
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
     const parentMethods = {
       handleAdd: this.handleAdd,
       handleModalVisible: this.handleModalVisible,
@@ -614,20 +338,17 @@ class AliasManage extends PureComponent {
           <div className={styles.tableList}>
             <div className={styles.tableListForm}>{this.renderForm()}</div>
             <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
               {selectedRows.length > 0 && (
                 <span>
-                  <Button>批量操作</Button>
-                  <Dropdown overlay={menu}>
-                    <Button>
-                      更多操作 <Icon type="down" />
-                    </Button>
-                  </Dropdown>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
                 </span>
               )}
             </div>
             <StandardTable
               selectedRows={selectedRows}
-              loading={loading}
               data={data}
               columns={this.columns}
               onSelectRow={this.handleSelectRows}
@@ -636,14 +357,14 @@ class AliasManage extends PureComponent {
           </div>
         </Card>
         <CreateForm {...parentMethods} modalVisible={modalVisible} />
-        {stepFormValues && Object.keys(stepFormValues).length ? (
+        {updateFormValues && Object.keys(updateFormValues).length ? (
           <UpdateForm
             {...updateMethods}
             updateModalVisible={updateModalVisible}
-            values={stepFormValues}
+            values={updateFormValues}
           />
         ) : null}
-        </Fragment>
+      </Fragment>
     );
   }
 }
diff --git a/web/src/pages/SearchManage/alias/AliasManage.less b/web/src/pages/SearchManage/alias/AliasManage.less
deleted file mode 100644
index 792757df..00000000
--- a/web/src/pages/SearchManage/alias/AliasManage.less
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-@import '~@/utils/utils.less';
-
-.tableList {
-  .tableListOperator {
-    margin-bottom: 16px;
-    button {
-      margin-right: 8px;
-    }
-  }
-}
-
-.tableListForm {
-  :global {
-    .ant-form-item {
-      margin-bottom: 24px;
-      margin-right: 0;
-      display: flex;
-      > .ant-form-item-label {
-        width: auto;
-        line-height: 32px;
-        padding-right: 8px;
-      }
-      .ant-form-item-control {
-        line-height: 32px;
-      }
-    }
-    .ant-form-item-control-wrapper {
-      flex: 1;
-    }
-  }
-  .submitButtons {
-    display: block;
-    white-space: nowrap;
-    margin-bottom: 24px;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .tableListForm :global(.ant-form-item) {
-    margin-right: 24px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .tableListForm :global(.ant-form-item) {
-    margin-right: 8px;
-  }
-}
diff --git a/web/src/pages/SearchManage/alias/param.js b/web/src/pages/SearchManage/alias/Param.js
similarity index 97%
rename from web/src/pages/SearchManage/alias/param.js
rename to web/src/pages/SearchManage/alias/Param.js
index dba75aa0..a91e8ffd 100644
--- a/web/src/pages/SearchManage/alias/param.js
+++ b/web/src/pages/SearchManage/alias/Param.js
@@ -75,7 +75,7 @@ const UpdateForm = Form.create()(props => {
       onOk={okHandle}
       onCancel={() => handleUpdateModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="别名">
         {form.getFieldDecorator('name', {
           initialValue: values.name,
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
@@ -101,7 +101,7 @@ const UpdateForm = Form.create()(props => {
   loading: loading.models.pipeline,
 }))
 @Form.create()
-class param extends PureComponent {
+class Param extends PureComponent {
   state = {
     modalVisible: false,
     updateModalVisible: false,
@@ -177,15 +177,15 @@ class param extends PureComponent {
 
   columns = [
     {
-      title: '模板名称',
+      title: '字段名称',
       dataIndex: 'name',
     },
     {
-      title: '模式',
+      title: '别名',
       dataIndex: 'index_patterns',
     },
     {
-      title: 'order',
+      title: '排序',
       dataIndex: 'order'
     },
     {
@@ -196,7 +196,7 @@ class param extends PureComponent {
       title: '操作',
       render: (text, record) => (
         <Fragment>
-          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>别名设置</a>
           <Divider type="vertical" />
           <a onClick={() => {
             this.state.selectedRows.push(record);
@@ -351,7 +351,7 @@ class param extends PureComponent {
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
           <Col md={8} sm={24}>
-            <FormItem label="模板名称">
+            <FormItem label="别名">
               {getFieldDecorator('name')(<Input placeholder="请输入" />)}
             </FormItem>
           </Col>
@@ -427,4 +427,4 @@ class param extends PureComponent {
   }
 }
 
-export default param;
+export default Param;
diff --git a/web/src/pages/SearchManage/alias/rule.js b/web/src/pages/SearchManage/alias/Rule.js
similarity index 97%
rename from web/src/pages/SearchManage/alias/rule.js
rename to web/src/pages/SearchManage/alias/Rule.js
index 71aa8544..e25a4749 100644
--- a/web/src/pages/SearchManage/alias/rule.js
+++ b/web/src/pages/SearchManage/alias/Rule.js
@@ -37,7 +37,7 @@ const CreateForm = Form.create()(props => {
       onOk={okHandle}
       onCancel={() => handleModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="index pattern 规则">
         {form.getFieldDecorator('name', {
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
         })(<Input placeholder="请输入名称" />)}
@@ -75,7 +75,7 @@ const UpdateForm = Form.create()(props => {
       onOk={okHandle}
       onCancel={() => handleUpdateModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="index pattern 规则">
         {form.getFieldDecorator('name', {
           initialValue: values.name,
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
@@ -177,15 +177,15 @@ class rule extends PureComponent {
 
   columns = [
     {
-      title: '模板名称',
+      title: '索引 pattern',
       dataIndex: 'name',
     },
     {
-      title: '模式',
+      title: 'rule',
       dataIndex: 'index_patterns',
     },
     {
-      title: 'order',
+      title: '排序',
       dataIndex: 'order'
     },
     {
@@ -196,7 +196,7 @@ class rule extends PureComponent {
       title: '操作',
       render: (text, record) => (
         <Fragment>
-          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置规则</a>
           <Divider type="vertical" />
           <a onClick={() => {
             this.state.selectedRows.push(record);
@@ -351,7 +351,7 @@ class rule extends PureComponent {
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
           <Col md={8} sm={24}>
-            <FormItem label="模板名称">
+            <FormItem label="index pattern 规则">
               {getFieldDecorator('name')(<Input placeholder="请输入" />)}
             </FormItem>
           </Col>
diff --git a/web/src/pages/SearchManage/analyzer/AnalyzerTest.js b/web/src/pages/SearchManage/analyzer/AnalyzerTest.js
index 3752d293..f8ffd70c 100644
--- a/web/src/pages/SearchManage/analyzer/AnalyzerTest.js
+++ b/web/src/pages/SearchManage/analyzer/AnalyzerTest.js
@@ -1,430 +1,156 @@
-import React, { PureComponent, Fragment } from 'react';
+import React, { Component,Fragment } from 'react';
 import { connect } from 'dva';
-import {
-  Row,
-  Col,
-  Card,
-  Form,
-  Input,
-  Button,
-  Modal,
-  message,
-  Divider,
-} from 'antd';
-import StandardTable from '@/components/StandardTable';
+import { Card,Form,Input, Select,Button,message,Upload, Icon,Switch } from 'antd';
+const { Option } = Select;
+import { formatMessage, FormattedMessage } from 'umi/locale';
+import DescriptionList from '@/components/DescriptionList';
+import styles from '../../profile/AdvancedProfile.less';
+const { Description } = DescriptionList;
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-
-import styles from '../../List/TableList.less';
-
 const FormItem = Form.Item;
 const { TextArea } = Input;
+const { Dragger } = Upload;
 
-const CreateForm = Form.create()(props => {
-  const { modalVisible, form, handleAdd, handleModalVisible } = props;
-  const okHandle = () => {
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      form.resetFields();
-      handleAdd(fieldsValue);
-    });
-  };
-  return (
-    <Modal
-      destroyOnClose
-      title="新建模板"
-      visible={modalVisible}
-      width={640}
-      onOk={okHandle}
-      onCancel={() => handleModalVisible()}
-    >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
-        {form.getFieldDecorator('name', {
-          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
-        })(<Input placeholder="请输入名称" />)}
-      </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
-        {form.getFieldDecorator('settings', {
-          rules: [{ required: true }],
-        })(<TextArea
-          style={{ minHeight: 24 }}
-          placeholder="请输入"
-          rows={9}
-      />)}
-      </FormItem>
-    </Modal>
-  );
-});
 
-const UpdateForm = Form.create()(props => {
-  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
-
-  const okHandle = () => {
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      form.resetFields();
-      handleUpdate(fieldsValue);
-    });
-  };
-  
-  return (
-    <Modal
-      destroyOnClose
-      title="模板设置"
-      visible={updateModalVisible}
-      width={640}
-      onOk={okHandle}
-      onCancel={() => handleUpdateModalVisible()}
-    >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
-        {form.getFieldDecorator('name', {
-          initialValue: values.name,
-          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
-        })(<Input placeholder="请输入名称" />)}
-      </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
-        {form.getFieldDecorator('settings', {
-          initialValue: values.processors,
-          rules: [{ required: true }],
-        })(<TextArea
-          style={{ minHeight: 24 }}
-          placeholder="请输入"
-          rows={9}
-      />)}
-      </FormItem>
-    </Modal>
-  );
-});
-
-/* eslint react/no-multi-comp:0 */
-@connect(({ pipeline, loading }) => ({
-  pipeline,
-  loading: loading.models.pipeline,
+@connect(({logstash,loading }) => ({
+    data: logstash.logstash,
+    loading: loading.models.logstash,
+    submitting: loading.effects['logstash/submitLogstashConfig'],
 }))
+
 @Form.create()
-class AnalyzerTest extends PureComponent {
-  state = {
-    modalVisible: false,
-    updateModalVisible: false,
-    expandForm: false,
-    selectedRows: [],
-    formValues: {},
-    updateFormValues: {},
-  };
-  //index template detail example
-  // {
-  //   ".ml-state" : {
-  //     "order" : 0,
-  //     "version" : 7090199,
-  //     "index_patterns" : [
-  //       ".ml-state*"
-  //     ],
-  //     "settings" : {
-  //       "index" : {
-  //         "hidden" : "true",
-  //         "lifecycle" : {
-  //           "name" : "ml-size-based-ilm-policy",
-  //           "rollover_alias" : ".ml-state-write"
-  //         },
-  //         "auto_expand_replicas" : "0-1"
-  //       }
-  //     },
-  //     "mappings" : {
-  //       "_meta" : {
-  //         "version" : "7090199"
-  //       },
-  //       "enabled" : false
-  //     },
-  //     "aliases" : { }
-  //   }
-  // }
-  datasource = `
-  [
-    {
-      "name" : "filebeat-7.9.1",
-      "index_patterns" : "[filebeat-7.9.1-*]",
-      "order" : "1",
-      "version" : null,
-      "composed_of" : ""
-    },
-    {
-      "name" : "apm-7.9.1-span",
-      "index_patterns" : "[apm-7.9.1-span*]",
-      "order" : "2",
-      "version" : null,
-      "composed_of" : ""
-    },
-    {
-      "name" : ".lists-default",
-      "index_patterns" : "[.lists-default-*]",
-      "order" : "0",
-      "version" : null,
-      "composed_of" : ""
-    },
-    {
-      "name" : ".monitoring-es",
-      "index_patterns" : "[.monitoring-es-7-*]",
-      "order" : "0",
-      "version" : "7000199",
-      "composed_of" : ""
-    },
-    {
-      "name" : ".monitoring-beats",
-      "index_patterns" : "[.monitoring-beats-7-*]",
-      "order" : "0",
-      "version" : "7000199",
-      "composed_of" : ""
-    }]`;
-
-  columns = [
-    {
-      title: '模板名称',
-      dataIndex: 'name',
-    },
-    {
-      title: '模式',
-      dataIndex: 'index_patterns',
-    },
-    {
-      title: 'order',
-      dataIndex: 'order'
-    },
-    {
-      title: '版本',
-      dataIndex: 'version'
-    },
-    {
-      title: '操作',
-      render: (text, record) => (
-        <Fragment>
-          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
-          <Divider type="vertical" />
-          <a onClick={() => {
-            this.state.selectedRows.push(record);
-            this.handleDeleteClick();
-          }}>删除</a>
-        </Fragment>
-      ),
-    },
-  ];
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    // dispatch({
-    //   type: 'pipeline/fetch',
-    // });
-  }
-
-  handleStandardTableChange = (pagination, filtersArg, sorter) => {
-    const { dispatch } = this.props;
-    const { formValues } = this.state;
-
-    const filters = Object.keys(filtersArg).reduce((obj, key) => {
-      const newObj = { ...obj };
-      newObj[key] = getValue(filtersArg[key]);
-      return newObj;
-    }, {});
-
-    const params = {
-      currentPage: pagination.current,
-      pageSize: pagination.pageSize,
-      ...formValues,
-      ...filters,
-    };
-    if (sorter.field) {
-      params.sorter = `${sorter.field}_${sorter.order}`;
+class AnalyzerTest extends Component {
+    state = {
+        operationkey: 'tab1',
+    };logstash
+    componentDidMount() {
+        // message.loading('数据加载中..', 'initdata');
+        // const { dispatch } = this.props;
+        // dispatch({
+        //   type: 'logstash/queryInitialLogstashConfig',
+        // });
     }
-
-    dispatch({
-      type: 'pipeline/fetch',
-      payload: params,
-    });
-  };
-
-  handleFormReset = () => {
-    const { form, dispatch } = this.props;
-    form.resetFields();
-    this.setState({
-      formValues: {},
-    });
-    dispatch({
-      type: 'pipeline/fetch',
-      payload: {},
-    });
-  };
-
-  handleDeleteClick = e => {
-    const { dispatch } = this.props;
-    const { selectedRows } = this.state;
-
-    if (!selectedRows) return;
-        dispatch({
-          type: 'pipeline/delete',
-          payload: {
-            key: selectedRows.map(row => row.name),
-          },
-          callback: () => {
-            this.setState({
-              selectedRows: [],
-            });
-          },
+    onOperationTabChange = key => {
+        this.setState({ operationkey: key });
+    };
+    handleSubmit = e => {
+        const { dispatch, form } = this.props;
+        e.preventDefault();
+        form.validateFieldsAndScroll((err, values) => {
+            if (!err) {
+                let pdata = {
+                    jdbc:{
+                        type: values.dbtype,
+                        config: values.logstash.jdbcconf,
+                    },
+                };
+                if(e.target.name="kafka"){
+                    pdata={
+                        kafka:{
+                            config: values.logstash.kafkaconf,
+                        },
+                    }
+                }
+                dispatch({
+                    type: 'logstash/submitLogstashConfig',
+                    payload: pdata,
+                });
+            }
         });
-  };
+    };
 
-  handleSelectRows = rows => {
-    this.setState({
-      selectedRows: rows,
-    });
-  };
+    render() {
+        const { operationkey } = this.state;
+        const { submitting, data, loading } = this.props;
+        const {
+            form: { getFieldDecorator, getFieldValue },
+        } = this.props;
+        const formItemLayout = {
+            labelCol: {
+                xs: { span: 24 },
+                sm: { span: 7 },
+                md:{span:5},
+            },
+            wrapperCol: {
+                xs: { span: 24 },
+                sm: { span: 12 },
+                md: { span: 15 },
+            },
+        };
+        const submitFormLayout = {
+            wrapperCol: {
+                xs: { span: 24, offset: 0 },
+                sm: { span: 10, offset: 7 },
+            },
+        };
+        const uploadProps = {
+            name: 'file',
+            multiple: true,
+            action: '',
+            onChange(info) {
+                const { status } = info.file;
+                if (status !== 'uploading') {
+                    console.log(info.file, info.fileList);
+                }
+                if (status === 'done') {
+                    message.success(`${info.file.name} file uploaded successfully.`);
+                } else if (status === 'error') {
+                    message.error(`${info.file.name} file upload failed.`);
+                }
+            },
+        };
 
-  handleSearch = e => {
-    e.preventDefault();
 
-    const { dispatch, form } = this.props;
-
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-
-      const values = {
-        ...fieldsValue,
-        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
-      };
-
-      this.setState({
-        formValues: values,
-      });
-
-      dispatch({
-        type: 'rule/fetch',
-        payload: values,
-      });
-    });
-  };
-
-  handleModalVisible = flag => {
-    this.setState({
-      modalVisible: !!flag,
-    });
-  };
-
-  handleUpdateModalVisible = (flag, record) => {
-    this.setState({
-      updateModalVisible: !!flag,
-      updateFormValues: record || {},
-    });
-  };
-
-  handleAdd = fields => {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'pipeline/add',
-      payload: {
-        name: fields.name,
-        desc: fields.desc,
-        processors: fields.processors,
-      },
-    });
-
-    message.success('添加成功');
-    this.handleModalVisible();
-  };
-
-  handleUpdate = fields => {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'pipeline/update',
-      payload: {
-        name: fields.name,
-        desc: fields.desc,
-        processors: fields.processors,
-      },
-    });
-
-    message.success('修改成功');
-    this.handleUpdateModalVisible();
-  };
-
-  renderSimpleForm() {
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-    return (
-      <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="模板名称">
-              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+        return (
+            <Fragment>
+            <Card className={styles.tabsCard} bordered={false}>
+            <div>
+            <Form onSubmit={this.handleSubmit}  hideRequiredMark style={{ marginTop: 8 }}>
+    <FormItem {...formItemLayout} label="选择分词器">
+            {getFieldDecorator('index', {
+            initialValue: data.index,
+                rules: [
+                {
+                    required: true,
+                    message: "请选择分词器",
+                },
+            ],
+        })(
+        <Select placeholder="Please select" style={{ width: 150 }}>
+    <Option value="blogs">blogs</Option>
+            <Option value="logs">logs</Option>
+            <Option value="filebeat">filebeat</Option>
+            </Select>
+    )}
+    </FormItem>
+        <FormItem {...formItemLayout} label="测试数据">
+            {getFieldDecorator('bulk', {
+            initialValue: data.bulk,
+                rules: [
+                {
+                    required: true,
+                    message: '请输入测试数据',
+                },
+            ],
+        })(
+        <TextArea
+        style={{ minHeight: 32, width: '100%' }}
+        placeholder=''
+        rows={12}
+        />
+    )}
+    </FormItem>
+        <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
+    <Button type="primary" htmlType="submit" loading={submitting}>
+            <FormattedMessage id="form.submit" />
+            </Button>
             </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <span className={styles.submitButtons}>
-              <Button type="primary" htmlType="submit">
-                查询
-              </Button>
-              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
-                重置
-              </Button>
-            </span>
-          </Col>
-        </Row>
-      </Form>
-    );
-  }
-
-  renderForm() {
-    return this.renderSimpleForm();
-  }
-
-  render() {
-    const data = {
-      list: JSON.parse(this.datasource),
-      pagination: {
-        pageSize: 5,
-      },
-    };
-    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
-    const parentMethods = {
-      handleAdd: this.handleAdd,
-      handleModalVisible: this.handleModalVisible,
-    };
-    const updateMethods = {
-      handleUpdateModalVisible: this.handleUpdateModalVisible,
-      handleUpdate: this.handleUpdate,
-    };
-    return (
-      <Fragment>
-        <Card bordered={false}>
-          <div className={styles.tableList}>
-            <div className={styles.tableListForm}>{this.renderForm()}</div>
-            <div className={styles.tableListOperator}>
-              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
-                新建
-              </Button>
-              {selectedRows.length > 0 && (
-                <span>
-                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
-                </span>
-              )}
+            </Form>
             </div>
-            <StandardTable
-              selectedRows={selectedRows}
-              data={data}
-              columns={this.columns}
-              onSelectRow={this.handleSelectRows}
-              onChange={this.handleStandardTableChange}
-            />
-          </div>
-        </Card>
-        <CreateForm {...parentMethods} modalVisible={modalVisible} />
-        {updateFormValues && Object.keys(updateFormValues).length ? (
-          <UpdateForm
-            {...updateMethods}
-            updateModalVisible={updateModalVisible}
-            values={updateFormValues}
-          />
-        ) : null}
-      </Fragment>
+            </Card>
+            </Fragment>
     );
-  }
+    }
 }
 
 export default AnalyzerTest;
diff --git a/web/src/pages/SearchManage/analyzer/Manage.js b/web/src/pages/SearchManage/analyzer/Manage.js
index 83b69fc3..636c0c16 100644
--- a/web/src/pages/SearchManage/analyzer/Manage.js
+++ b/web/src/pages/SearchManage/analyzer/Manage.js
@@ -31,18 +31,18 @@ const CreateForm = Form.create()(props => {
   return (
     <Modal
       destroyOnClose
-      title="新建模板"
+      title="新建分词器"
       visible={modalVisible}
       width={640}
       onOk={okHandle}
       onCancel={() => handleModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="分词器名称">
         {form.getFieldDecorator('name', {
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
         })(<Input placeholder="请输入名称" />)}
       </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
         {form.getFieldDecorator('settings', {
           rules: [{ required: true }],
         })(<TextArea
@@ -75,13 +75,13 @@ const UpdateForm = Form.create()(props => {
       onOk={okHandle}
       onCancel={() => handleUpdateModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="分词器名称">
         {form.getFieldDecorator('name', {
           initialValue: values.name,
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
         })(<Input placeholder="请输入名称" />)}
       </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
         {form.getFieldDecorator('settings', {
           initialValue: values.processors,
           rules: [{ required: true }],
@@ -177,7 +177,7 @@ class Manage extends PureComponent {
 
   columns = [
     {
-      title: '模板名称',
+      title: '分词器名称',
       dataIndex: 'name',
     },
     {
@@ -351,7 +351,7 @@ class Manage extends PureComponent {
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
           <Col md={8} sm={24}>
-            <FormItem label="模板名称">
+            <FormItem label="分词器名称">
               {getFieldDecorator('name')(<Input placeholder="请输入" />)}
             </FormItem>
           </Col>
diff --git a/web/src/pages/SearchManage/models/logstash.js b/web/src/pages/SearchManage/models/logstash.js
new file mode 100644
index 00000000..112a61dd
--- /dev/null
+++ b/web/src/pages/SearchManage/models/logstash.js
@@ -0,0 +1,49 @@
+import { routerRedux } from 'dva/router';
+import { message } from 'antd';
+import { getLogstashConfig, saveLogstashConfig } from '@/services/datamanagement';
+
+export default {
+  namespace: 'logstash',
+
+  state: {
+      logstash: {
+          jdbc:{},
+          kafka:{},
+      }
+  },
+  effects: {
+    *queryInitialLogstashConfig(_, {call, put}){
+        const istate = yield call(getLogstashConfig);
+        yield put({
+            type: 'initLogstashState',
+            payload: istate,
+        });
+        message.loading('数据加载完成', 'initdata');
+    },
+    *submitLogstashConfig({payload}, {call, put}){
+        console.log(payload);
+        const rel = yield call(saveLogstashConfig, payload);
+        if(rel.message == "Ok") {
+            message.success('提交成功');
+            yield put({
+                type: 'updateState',
+                payload: payload,
+            });
+        }
+    }
+  },
+  reducers: {
+    initLogstashState(state, { payload: istate }) {
+        return {
+            logstash: istate
+        }
+    },
+    updateState(state, {payload: newState}){
+      var obj = {
+          ...state,
+          logstash: Object.assign(state.logstash, newState),
+      };
+      return obj;
+    },
+  },
+};
diff --git a/web/src/pages/SearchManage/nlp/Intention.js b/web/src/pages/SearchManage/nlp/Intention.js
index e23d663f..0f546f4f 100644
--- a/web/src/pages/SearchManage/nlp/Intention.js
+++ b/web/src/pages/SearchManage/nlp/Intention.js
@@ -37,7 +37,7 @@ const CreateForm = Form.create()(props => {
       onOk={okHandle}
       onCancel={() => handleModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="意图识别">
         {form.getFieldDecorator('name', {
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
         })(<Input placeholder="请输入名称" />)}
@@ -75,7 +75,7 @@ const UpdateForm = Form.create()(props => {
       onOk={okHandle}
       onCancel={() => handleUpdateModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="意图识别">
         {form.getFieldDecorator('name', {
           initialValue: values.name,
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
@@ -177,13 +177,9 @@ class Intention extends PureComponent {
 
   columns = [
     {
-      title: '模板名称',
+      title: '意图识别',
       dataIndex: 'name',
     },
-    {
-      title: '模式',
-      dataIndex: 'index_patterns',
-    },
     {
       title: 'order',
       dataIndex: 'order'
@@ -351,7 +347,7 @@ class Intention extends PureComponent {
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
           <Col md={8} sm={24}>
-            <FormItem label="模板名称">
+            <FormItem label="意图识别">
               {getFieldDecorator('name')(<Input placeholder="请输入" />)}
             </FormItem>
           </Col>
diff --git a/web/src/pages/SearchManage/nlp/Knowledge.js b/web/src/pages/SearchManage/nlp/Knowledge.js
index eb43312e..3992a6ce 100644
--- a/web/src/pages/SearchManage/nlp/Knowledge.js
+++ b/web/src/pages/SearchManage/nlp/Knowledge.js
@@ -31,18 +31,18 @@ const CreateForm = Form.create()(props => {
   return (
     <Modal
       destroyOnClose
-      title="新建模板"
+      title="新建知识图谱"
       visible={modalVisible}
       width={640}
       onOk={okHandle}
       onCancel={() => handleModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="知识图谱">
         {form.getFieldDecorator('name', {
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
         })(<Input placeholder="请输入名称" />)}
       </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
         {form.getFieldDecorator('settings', {
           rules: [{ required: true }],
         })(<TextArea
@@ -69,19 +69,19 @@ const UpdateForm = Form.create()(props => {
   return (
     <Modal
       destroyOnClose
-      title="模板设置"
+      title="知识图谱设置"
       visible={updateModalVisible}
       width={640}
       onOk={okHandle}
       onCancel={() => handleUpdateModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="知识图谱">
         {form.getFieldDecorator('name', {
           initialValue: values.name,
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
         })(<Input placeholder="请输入名称" />)}
       </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
         {form.getFieldDecorator('settings', {
           initialValue: values.processors,
           rules: [{ required: true }],
@@ -177,13 +177,9 @@ class Knowledge extends PureComponent {
 
   columns = [
     {
-      title: '模板名称',
+      title: '知识图谱',
       dataIndex: 'name',
     },
-    {
-      title: '模式',
-      dataIndex: 'index_patterns',
-    },
     {
       title: 'order',
       dataIndex: 'order'
@@ -351,7 +347,7 @@ class Knowledge extends PureComponent {
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
           <Col md={8} sm={24}>
-            <FormItem label="模板名称">
+            <FormItem label="知识图谱">
               {getFieldDecorator('name')(<Input placeholder="请输入" />)}
             </FormItem>
           </Col>
diff --git a/web/src/pages/SearchManage/nlp/Query.js b/web/src/pages/SearchManage/nlp/Query.js
index a881d5a9..ddb14d45 100644
--- a/web/src/pages/SearchManage/nlp/Query.js
+++ b/web/src/pages/SearchManage/nlp/Query.js
@@ -37,12 +37,12 @@ const CreateForm = Form.create()(props => {
       onOk={okHandle}
       onCancel={() => handleModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="语义词">
         {form.getFieldDecorator('name', {
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
         })(<Input placeholder="请输入名称" />)}
       </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
         {form.getFieldDecorator('settings', {
           rules: [{ required: true }],
         })(<TextArea
@@ -75,13 +75,13 @@ const UpdateForm = Form.create()(props => {
       onOk={okHandle}
       onCancel={() => handleUpdateModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="语义词">
         {form.getFieldDecorator('name', {
           initialValue: values.name,
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
         })(<Input placeholder="请输入名称" />)}
       </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
         {form.getFieldDecorator('settings', {
           initialValue: values.processors,
           rules: [{ required: true }],
@@ -177,11 +177,11 @@ class Query extends PureComponent {
 
   columns = [
     {
-      title: '模板名称',
+      title: '语义词',
       dataIndex: 'name',
     },
     {
-      title: '模式',
+      title: '语义',
       dataIndex: 'index_patterns',
     },
     {
@@ -351,7 +351,7 @@ class Query extends PureComponent {
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
           <Col md={8} sm={24}>
-            <FormItem label="模板名称">
+            <FormItem label="语义词">
               {getFieldDecorator('name')(<Input placeholder="请输入" />)}
             </FormItem>
           </Col>
diff --git a/web/src/pages/SearchManage/nlp/Text.js b/web/src/pages/SearchManage/nlp/Text.js
index ca9e0897..38f54c6b 100644
--- a/web/src/pages/SearchManage/nlp/Text.js
+++ b/web/src/pages/SearchManage/nlp/Text.js
@@ -31,18 +31,18 @@ const CreateForm = Form.create()(props => {
   return (
     <Modal
       destroyOnClose
-      title="新建模板"
+      title="新建文本聚类"
       visible={modalVisible}
       width={640}
       onOk={okHandle}
       onCancel={() => handleModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="文本聚类">
         {form.getFieldDecorator('name', {
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
         })(<Input placeholder="请输入名称" />)}
       </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
         {form.getFieldDecorator('settings', {
           rules: [{ required: true }],
         })(<TextArea
@@ -69,19 +69,19 @@ const UpdateForm = Form.create()(props => {
   return (
     <Modal
       destroyOnClose
-      title="模板设置"
+      title="文本聚类设置"
       visible={updateModalVisible}
       width={640}
       onOk={okHandle}
       onCancel={() => handleUpdateModalVisible()}
     >
-       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="文本聚类">
         {form.getFieldDecorator('name', {
           initialValue: values.name,
           rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
         })(<Input placeholder="请输入名称" />)}
       </FormItem>
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设置">
         {form.getFieldDecorator('settings', {
           initialValue: values.processors,
           rules: [{ required: true }],
@@ -177,11 +177,11 @@ class Text extends PureComponent {
 
   columns = [
     {
-      title: '模板名称',
+      title: '文本',
       dataIndex: 'name',
     },
     {
-      title: '模式',
+      title: '聚类',
       dataIndex: 'index_patterns',
     },
     {
@@ -351,7 +351,7 @@ class Text extends PureComponent {
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
           <Col md={8} sm={24}>
-            <FormItem label="模板名称">
+            <FormItem label="文本">
               {getFieldDecorator('name')(<Input placeholder="请输入" />)}
             </FormItem>
           </Col>
diff --git a/web/src/pages/SearchManage/template/History.js b/web/src/pages/SearchManage/template/History.js
index 8f17eadd..b6375a52 100644
--- a/web/src/pages/SearchManage/template/History.js
+++ b/web/src/pages/SearchManage/template/History.js
@@ -1,285 +1,631 @@
-import React, { PureComponent } from 'react';
-import { findDOMNode } from 'react-dom';
-import moment from 'moment';
+import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
+import moment from 'moment';
 import {
-    List,
-    Card,
-    Row,
-    Col,
-    Radio,
-    Input,
-    Progress,
-    Button,
-    Icon,
-    Dropdown,
-    Menu,
-    Avatar,
-    Modal,
-    Form,
-    DatePicker,
-    Select,
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Select,
+  Icon,
+  Button,
+  Dropdown,
+  Menu,
+  InputNumber,
+  DatePicker,
+  Modal,
+  message,
+  Badge,
+  Divider,
+  Steps,
+  Radio,
 } from 'antd';
-
+import StandardTable from '@/components/StandardTable';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-import Result from '@/components/Result';
 
 import styles from './History.less';
 
 const FormItem = Form.Item;
-const RadioButton = Radio.Button;
+const { Step } = Steps;
+const { TextArea } = Input;
+const { Option } = Select;
 const RadioGroup = Radio.Group;
-const SelectOption = Select.Option;
-const { Search, TextArea } = Input;
+const getValue = obj =>
+  Object.keys(obj)
+    .map(key => obj[key])
+    .join(',');
+const statusMap = ['default', 'processing', 'success', 'error'];
+const status = ['关闭', '运行中', '已上线', '异常'];
+const CreateForm = Form.create()(props => {
+    const { modalVisible, form, handleAdd, handleModalVisible } = props;
+    const okHandle = () => {
+        form.validateFields((err, fieldsValue) => {
+            if (err) return;
+            form.resetFields();
+            handleAdd(fieldsValue);
+        });
+    };
+    return (
+        <Modal
+    destroyOnClose
+    title="新建规则"
+    visible={modalVisible}
+    onOk={okHandle}
+    onCancel={() => handleModalVisible()}
+>
+<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
+        {form.getFieldDecorator('desc', {
+            rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
+        })(<Input placeholder="请输入" />)}
+</FormItem>
+    </Modal>
+);
+});
 
-@connect(({ list, loading }) => ({
-    list,
-    loading: loading.models.list,
+@Form.create()
+class UpdateForm extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      formVals: {
+        name: props.values.name,
+        desc: props.values.desc,
+        key: props.values.key,
+        target: '0',
+        template: '0',
+        type: '1',
+        time: '',
+        frequency: 'month',
+      },
+      currentStep: 0,
+    };
+
+    this.formLayout = {
+      labelCol: { span: 7 },
+      wrapperCol: { span: 13 },
+    };
+  }
+
+  handleNext = currentStep => {
+    const { form, handleUpdate } = this.props;
+    const { formVals: oldValue } = this.state;
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      const formVals = { ...oldValue, ...fieldsValue };
+      this.setState(
+        {
+          formVals,
+        },
+        () => {
+          if (currentStep < 2) {
+            this.forward();
+          } else {
+            handleUpdate(formVals);
+          }
+        }
+      );
+    });
+  };
+
+  backward = () => {
+    const { currentStep } = this.state;
+    this.setState({
+      currentStep: currentStep - 1,
+    });
+  };
+
+  forward = () => {
+    const { currentStep } = this.state;
+    this.setState({
+      currentStep: currentStep + 1,
+    });
+  };
+
+  renderContent = (currentStep, formVals) => {
+    const { form } = this.props;
+    if (currentStep === 1) {
+      return [
+        <FormItem key="target" {...this.formLayout} label="监控对象">
+          {form.getFieldDecorator('target', {
+            initialValue: formVals.target,
+          })(
+            <Select style={{ width: '100%' }}>
+              <Option value="0">表一</Option>
+              <Option value="1">表二</Option>
+            </Select>
+          )}
+        </FormItem>,
+        <FormItem key="template" {...this.formLayout} label="规则模板">
+          {form.getFieldDecorator('template', {
+            initialValue: formVals.template,
+          })(
+            <Select style={{ width: '100%' }}>
+              <Option value="0">规则模板一</Option>
+              <Option value="1">规则模板二</Option>
+            </Select>
+          )}
+        </FormItem>,
+        <FormItem key="type" {...this.formLayout} label="规则类型">
+          {form.getFieldDecorator('type', {
+            initialValue: formVals.type,
+          })(
+            <RadioGroup>
+              <Radio value="0">强</Radio>
+              <Radio value="1">弱</Radio>
+            </RadioGroup>
+          )}
+        </FormItem>,
+      ];
+    }
+    if (currentStep === 2) {
+      return [
+        <FormItem key="time" {...this.formLayout} label="开始时间">
+          {form.getFieldDecorator('time', {
+            rules: [{ required: true, message: '请选择开始时间！' }],
+          })(
+            <DatePicker
+              style={{ width: '100%' }}
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          )}
+        </FormItem>,
+        <FormItem key="frequency" {...this.formLayout} label="调度周期">
+          {form.getFieldDecorator('frequency', {
+            initialValue: formVals.frequency,
+          })(
+            <Select style={{ width: '100%' }}>
+              <Option value="month">月</Option>
+              <Option value="week">周</Option>
+            </Select>
+          )}
+        </FormItem>,
+      ];
+    }
+      return [
+          <FormItem key="name" {...this.formLayout} label="别名">
+          {form.getFieldDecorator('name', {
+              rules: [{ required: true, message: '请输入别名！' }],
+              initialValue: formVals.name,
+          })(<Input placeholder="请输入" />)}
+          </FormItem>,
+              <FormItem key="desc" {...this.formLayout} label="描述">
+                  {form.getFieldDecorator('desc', {
+                      rules: [{ required: true, message: '请输入至少五个字符的描述！', min: 5 }],
+                      initialValue: formVals.desc,
+                  })(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
+          </FormItem>,
+          ];
+  };
+
+  renderFooter = currentStep => {
+    const { handleUpdateModalVisible } = this.props;
+    if (currentStep === 1) {
+      return [
+        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
+          上一步
+        </Button>,
+        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
+          取消
+        </Button>,
+        <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
+          下一步
+        </Button>,
+      ];
+    }
+    if (currentStep === 2) {
+      return [
+        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
+          上一步
+        </Button>,
+        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
+          取消
+        </Button>,
+        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
+          完成
+        </Button>,
+      ];
+    }
+    return [
+      <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
+        取消
+      </Button>,
+      <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
+        下一步
+      </Button>,
+    ];
+  };
+
+  render() {
+    const { updateModalVisible, handleUpdateModalVisible } = this.props;
+    const { currentStep, formVals } = this.state;
+
+    return (
+      <Modal
+        width={640}
+        bodyStyle={{ padding: '32px 40px 48px' }}
+        destroyOnClose
+        title="模板配置"
+        visible={updateModalVisible}
+        footer={this.renderFooter(currentStep)}
+        onCancel={() => handleUpdateModalVisible()}
+      >
+        <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
+          <Step title="基本信息" />
+          <Step title="模板规则属性" />
+          <Step title="设定调度周期" />
+        </Steps>
+        {this.renderContent(currentStep, formVals)}
+      </Modal>
+    );
+  }
+}
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ rule, loading }) => ({
+  rule,
+  loading: loading.models.rule,
 }))
 @Form.create()
 class History extends PureComponent {
-    state = { visible: false, done: false };
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    stepFormValues: {},
+  };
 
-    formLayout = {
-        labelCol: { span: 7 },
-        wrapperCol: { span: 13 },
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '别名',
+      dataIndex: 'desc',
+    },
+    {
+      title: '模板调用次数',
+      dataIndex: 'callNo',
+      sorter: true,
+      align: 'right',
+      render: val => `${val} 万`,
+      // mark to display a total number
+      needTotal: true,
+    },
+    {
+      title: '模板状态',
+      dataIndex: 'status',
+      filters: [
+        {
+          text: status[0],
+          value: 0,
+        },
+        {
+          text: status[1],
+          value: 1,
+        },
+        {
+          text: status[2],
+          value: 2,
+        },
+        {
+          text: status[3],
+          value: 3,
+        },
+      ],
+      render(val) {
+        return <Badge status={statusMap[val]} text={status[val]} />;
+      },
+    },
+    {
+      title: '最后更新时间',
+      dataIndex: 'updatedAt',
+      sorter: true,
+      render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>配置模板</a>
+          <Divider type="vertical" />
+          <a href="">订阅警报</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'rule/fetch',
+    });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
     };
-
-    componentDidMount() {
-        const { dispatch } = this.props;
-        dispatch({
-            type: 'list/fetch',
-            payload: {
-                count: 5,
-            },
-        });
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
     }
 
-    showModal = () => {
-        this.setState({
-            visible: true,
-            current: undefined,
-        });
-    };
+    dispatch({
+      type: 'rule/fetch',
+      payload: params,
+    });
+  };
 
-    showEditModal = item => {
-        this.setState({
-            visible: true,
-            current: item,
-        });
-    };
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'rule/fetch',
+      payload: {},
+    });
+  };
 
-    handleDone = () => {
-        setTimeout(() => this.addBtn.blur(), 0);
-        this.setState({
-            done: false,
-            visible: false,
-        });
-    };
+  toggleForm = () => {
+    const { expandForm } = this.state;
+    this.setState({
+      expandForm: !expandForm,
+    });
+  };
 
-    handleCancel = () => {
-        setTimeout(() => this.addBtn.blur(), 0);
-        this.setState({
-            visible: false,
-        });
-    };
+  handleMenuClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
 
-    handleSubmit = e => {
-        e.preventDefault();
-        const { dispatch, form } = this.props;
-        const { current } = this.state;
-        const id = current ? current.id : '';
-
-        setTimeout(() => this.addBtn.blur(), 0);
-        form.validateFields((err, fieldsValue) => {
-            if (err) return;
+    if (!selectedRows) return;
+    switch (e.key) {
+      case 'remove':
+        dispatch({
+          type: 'rule/remove',
+          payload: {
+            key: selectedRows.map(row => row.key),
+          },
+          callback: () => {
             this.setState({
-                done: true,
-            });
-            dispatch({
-                type: 'list/submit',
-                payload: { id, ...fieldsValue },
+              selectedRows: [],
             });
+          },
         });
-    };
-
-    deleteItem = id => {
-        const { dispatch } = this.props;
-        dispatch({
-            type: 'list/submit',
-            payload: { id },
-        });
-    };
-
-    render() {
-        const {
-            list: { list },
-            loading,
-        } = this.props;
-        const {
-            form: { getFieldDecorator },
-        } = this.props;
-        const { visible, done, current = {} } = this.state;
-
-        const editAndDelete = (key, currentItem) => {
-            if (key === 'edit') this.showEditModal(currentItem);
-            else if (key === 'delete') {
-                Modal.confirm({
-                    title: '删除模板',
-                    content: '确定删除该模板吗？',
-                    okText: '确认',
-                    cancelText: '取消',
-                    onOk: () => this.deleteItem(currentItem.id),
-                });
-            }
-        };
-
-        const modalFooter = done
-            ? { footer: null, onCancel: this.handleDone }
-            : { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };
-
-        const Info = ({ title, value, bordered }) => (
-            <div className={styles.headerInfo}>
-    <span>{title}</span>
-        <p>{value}</p>
-        {bordered && <em />}
-    </div>
-    );
-
-        const extraContent = (
-            <div className={styles.extraContent}>
-            <Search className={styles.extraContentSearch} placeholder="请输入模板内容" onSearch={() => ({})} />
-        </div>
-    );
-
-        const paginationProps = {
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSize: 5,
-            total: 50,
-        };
-
-        const ListContent = ({ data: { owner, createdAt, percent, status } }) => (
-            <div className={styles.listContent}>
-    <div className={styles.listContentItem}>
-    <span>模板名称</span>
-        <p>{owner}</p>
-        </div>
-        <div className={styles.listContentItem}>
-    <span>创建时间</span>
-        <p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
-        </div>
-        <div className={styles.listContentItem}>
-    <Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
-        </div>
-        </div>
-    );
-
-        const MoreBtn = props => (
-            <Dropdown
-        overlay={
-            <Menu onClick={({ key }) => editAndDelete(key, props.current)}>
-    <Menu.Item key="edit">编辑</Menu.Item>
-            <Menu.Item key="delete">删除</Menu.Item>
-            </Menu>
+        break;
+      default:
+        break;
     }
-    >
-    <a>
-        更多 <Icon type="down" />
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      stepFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'rule/add',
+      payload: {
+        desc: fields.desc,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'rule/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        key: fields.key,
+      },
+    });
+
+    message.success('配置成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
+                展开 <Icon type="down" />
+              </a>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderAdvancedForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <FormItem label="状态">
+              {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
+            </FormItem>
+          </Col>
+        </Row>
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="更新日期">
+              {getFieldDecorator('date')(
+                <DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
+              )}
+            </FormItem>
+          </Col>
+        </Row>
+        <div style={{ overflow: 'hidden' }}>
+          <div style={{ float: 'right', marginBottom: 24 }}>
+            <Button type="primary" htmlType="submit">
+              查询
+            </Button>
+            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+              重置
+            </Button>
+            <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
+              收起 <Icon type="up" />
             </a>
-            </Dropdown>
-    );
-
-        const getModalContent = () => {
-            if (done) {
-                return (
-                    <Result
-                type="success"
-                title="操作成功"
-                description="一系列的信息描述，很短同样也可以带标点。"
-                actions={
-                    <Button type="primary" onClick={this.handleDone}>
-                知道了
-                </Button>
-            }
-                className={styles.formResult}
-                />
-            );
-            }
-            return (
-                <Form onSubmit={this.handleSubmit}>
-        <FormItem label="模板名称" {...this.formLayout}>
-            {getFieldDecorator('title', {
-                rules: [{ required: true, message: '请输入模板名称' }],
-                initialValue: current.title,
-            })(<Input placeholder="请输入" />)}
-        </FormItem>
-            <FormItem {...this.formLayout} label="模板内容">
-                {getFieldDecorator('subDescription', {
-                rules: [{ message: '请输入模板内容', min: 5 }],
-                    initialValue: current.subDescription,
-            })(<TextArea rows={4} placeholder="请输入模内容" />)}
-        </FormItem>
-            </Form>
-        );
-        };
-        return (
-            <div className={styles.standardList}>
-        <Card
-        className={styles.listCard}
-        bordered={false}
-        title="搜索模板"
-        style={{ marginTop: 24 }}
-        bodyStyle={{ padding: '0 32px 40px 32px' }}
-        extra={extraContent}
-            >
-            <Button
-        type="dashed"
-        style={{ width: '100%', marginBottom: 8 }}
-        icon="plus"
-        onClick={this.showModal}
-        ref={component => {
-            /* eslint-disable */
-            this.addBtn = findDOMNode(component);
-            /* eslint-enable */
-        }}
-    >
-        添加
-        </Button>
-        <List
-        size="large"
-        rowKey="id"
-        loading={loading}
-        pagination={paginationProps}
-        dataSource={list}
-        renderItem={item => (
-        <List.Item
-        actions={[
-            <a
-        onClick={e => {
-            e.preventDefault();
-            this.showEditModal(item);
-        }}
-    >
-        编辑
-        </a>,
-        <MoreBtn current={item} />,
-    ]}
-    >
-    <List.Item.Meta
-        avatar={<Avatar src={item.logo} shape="square" size="large" />}
-        title={<a href={item.href}>{item.title}</a>}
-        description={item.subDescription}
-        />
-        <ListContent data={item} />
-        </List.Item>
-    )}
-        />
-        </Card>
+          </div>
         </div>
-
+      </Form>
     );
-    }
+  }
+
+  renderForm() {
+    const { expandForm } = this.state;
+    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
+  }
+
+  render() {
+    const {
+      rule: { data },
+      loading,
+    } = this.props;
+    const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
+    const menu = (
+      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
+        <Menu.Item key="remove">删除</Menu.Item>
+        <Menu.Item key="approval">批量审批</Menu.Item>
+      </Menu>
+    );
+
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button>批量操作</Button>
+                  <Dropdown overlay={menu}>
+                    <Button>
+                      更多操作 <Icon type="down" />
+                    </Button>
+                  </Dropdown>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              loading={loading}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {stepFormValues && Object.keys(stepFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={stepFormValues}
+          />
+        ) : null}
+        </Fragment>
+    );
+  }
 }
 
 export default History;
diff --git a/web/src/pages/SearchManage/template/History.less b/web/src/pages/SearchManage/template/History.less
index f086c501..792757df 100644
--- a/web/src/pages/SearchManage/template/History.less
+++ b/web/src/pages/SearchManage/template/History.less
@@ -1,195 +1,49 @@
 @import '~antd/lib/style/themes/default.less';
 @import '~@/utils/utils.less';
 
-.standardList {
+.tableList {
+  .tableListOperator {
+    margin-bottom: 16px;
+    button {
+      margin-right: 8px;
+    }
+  }
+}
+
+.tableListForm {
   :global {
-    .ant-card-head {
-      border-bottom: none;
-    }
-    .ant-card-head-title {
-      line-height: 32px;
-      padding: 24px 0;
-    }
-    .ant-card-extra {
-      padding: 24px 0;
-    }
-    .ant-list-pagination {
-      text-align: right;
-      margin-top: 24px;
-    }
-    .ant-avatar-lg {
-      width: 48px;
-      height: 48px;
-      line-height: 48px;
-    }
-  }
-  .headerInfo {
-    position: relative;
-    text-align: center;
-    & > span {
-      color: @text-color-secondary;
-      display: inline-block;
-      font-size: @font-size-base;
-      line-height: 22px;
-      margin-bottom: 4px;
-    }
-    & > p {
-      color: @heading-color;
-      font-size: 24px;
-      line-height: 32px;
-      margin: 0;
-    }
-    & > em {
-      background-color: @border-color-split;
-      position: absolute;
-      height: 56px;
-      width: 1px;
-      top: 0;
-      right: 0;
-    }
-  }
-  .listContent {
-    font-size: 0;
-    .listContentItem {
-      color: @text-color-secondary;
-      display: inline-block;
-      vertical-align: middle;
-      font-size: @font-size-base;
-      margin-left: 40px;
-      > span {
-        line-height: 20px;
+    .ant-form-item {
+      margin-bottom: 24px;
+      margin-right: 0;
+      display: flex;
+      > .ant-form-item-label {
+        width: auto;
+        line-height: 32px;
+        padding-right: 8px;
       }
-      > p {
-        margin-top: 4px;
-        margin-bottom: 0;
-        line-height: 22px;
+      .ant-form-item-control {
+        line-height: 32px;
       }
     }
+    .ant-form-item-control-wrapper {
+      flex: 1;
+    }
   }
-  .extraContentSearch {
-    margin-left: 16px;
-    width: 272px;
+  .submitButtons {
+    display: block;
+    white-space: nowrap;
+    margin-bottom: 24px;
   }
 }
 
-@media screen and (max-width: @screen-xs) {
-  .standardList {
-    :global {
-      .ant-list-item-content {
-        display: block;
-        flex: none;
-        width: 100%;
-      }
-      .ant-list-item-action {
-        margin-left: 0;
-      }
-    }
-    .listContent {
-      margin-left: 0;
-      & > div {
-        margin-left: 0;
-      }
-    }
-    .listCard {
-      :global {
-        .ant-card-head-title {
-          overflow: visible;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .standardList {
-    .extraContentSearch {
-      margin-left: 0;
-      width: 100%;
-    }
-    .headerInfo {
-      margin-bottom: 16px;
-      & > em {
-        display: none;
-      }
-    }
+@media screen and (max-width: @screen-lg) {
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 24px;
   }
 }
 
 @media screen and (max-width: @screen-md) {
-  .standardList {
-    .listContent {
-      & > div {
-        display: block;
-      }
-      & > div:last-child {
-        top: 0;
-        width: 100%;
-      }
-    }
-  }
-  .listCard {
-    :global {
-      .ant-radio-group {
-        display: block;
-        margin-bottom: 8px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
-  .standardList {
-    .listContent {
-      & > div {
-        display: block;
-      }
-      & > div:last-child {
-        top: 0;
-        width: 100%;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .standardList {
-    .listContent {
-      & > div {
-        margin-left: 24px;
-      }
-      & > div:last-child {
-        top: 0;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1400px) {
-  .standardList {
-    .listContent {
-      text-align: right;
-      & > div:last-child {
-        top: 0;
-      }
-    }
-  }
-}
-
-.standardListForm {
-  :global {
-    .ant-form-item {
-      margin-bottom: 12px;
-      &:last-child {
-        padding-top: 4px;
-        margin-bottom: 32px;
-      }
-    }
-  }
-}
-
-.formResult {
-  width: 100%;
-  [class^='title'] {
-    margin-bottom: 8px;
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 8px;
   }
 }
diff --git a/web/src/pages/SearchManage/template/Param.js b/web/src/pages/SearchManage/template/Param.js
index c8323dd2..efa43dc5 100644
--- a/web/src/pages/SearchManage/template/Param.js
+++ b/web/src/pages/SearchManage/template/Param.js
@@ -1,284 +1,627 @@
-import React, { PureComponent } from 'react';
-import { findDOMNode } from 'react-dom';
-import moment from 'moment';
+import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
+import moment from 'moment';
 import {
-    List,
-    Card,
-    Row,
-    Col,
-    Radio,
-    Input,
-    Progress,
-    Button,
-    Icon,
-    Dropdown,
-    Menu,
-    Avatar,
-    Modal,
-    Form,
-    DatePicker,
-    Select,
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Select,
+  Icon,
+  Button,
+  Dropdown,
+  Menu,
+  InputNumber,
+  DatePicker,
+  Modal,
+  message,
+  Badge,
+  Divider,
+  Steps,
+  Radio,
 } from 'antd';
-
+import StandardTable from '@/components/StandardTable';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-import Result from '@/components/Result';
 
 import styles from './Param.less';
 
 const FormItem = Form.Item;
-const RadioButton = Radio.Button;
+const { Step } = Steps;
+const { TextArea } = Input;
+const { Option } = Select;
 const RadioGroup = Radio.Group;
-const SelectOption = Select.Option;
-const { Search, TextArea } = Input;
+const getValue = obj =>
+  Object.keys(obj)
+    .map(key => obj[key])
+    .join(',');
+const statusMap = ['default', 'processing', 'success', 'error'];
+const status = ['关闭', '运行中', '已上线', '异常'];
+const CreateForm = Form.create()(props => {
+    const { modalVisible, form, handleAdd, handleModalVisible } = props;
+    const okHandle = () => {
+        form.validateFields((err, fieldsValue) => {
+            if (err) return;
+            form.resetFields();
+            handleAdd(fieldsValue);
+        });
+    };
+    return (
+        <Modal
+    destroyOnClose
+    title="新建规则"
+    visible={modalVisible}
+    onOk={okHandle}
+    onCancel={() => handleModalVisible()}
+>
+<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
+        {form.getFieldDecorator('desc', {
+            rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
+        })(<Input placeholder="请输入" />)}
+</FormItem>
+    </Modal>
+);
+});
 
-@connect(({ list, loading }) => ({
-    list,
-    loading: loading.models.list,
+@Form.create()
+class UpdateForm extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      formVals: {
+        name: props.values.name,
+        desc: props.values.desc,
+        key: props.values.key,
+        target: '0',
+        template: '0',
+        type: '1',
+        time: '',
+        frequency: 'month',
+      },
+      currentStep: 0,
+    };
+
+    this.formLayout = {
+      labelCol: { span: 7 },
+      wrapperCol: { span: 13 },
+    };
+  }
+
+  handleNext = currentStep => {
+    const { form, handleUpdate } = this.props;
+    const { formVals: oldValue } = this.state;
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      const formVals = { ...oldValue, ...fieldsValue };
+      this.setState(
+        {
+          formVals,
+        },
+        () => {
+          if (currentStep < 2) {
+            this.forward();
+          } else {
+            handleUpdate(formVals);
+          }
+        }
+      );
+    });
+  };
+
+  backward = () => {
+    const { currentStep } = this.state;
+    this.setState({
+      currentStep: currentStep - 1,
+    });
+  };
+
+  forward = () => {
+    const { currentStep } = this.state;
+    this.setState({
+      currentStep: currentStep + 1,
+    });
+  };
+
+  renderContent = (currentStep, formVals) => {
+    const { form } = this.props;
+    if (currentStep === 1) {
+      return [
+        <FormItem key="target" {...this.formLayout} label="监控对象">
+          {form.getFieldDecorator('target', {
+            initialValue: formVals.target,
+          })(
+            <Select style={{ width: '100%' }}>
+              <Option value="0">表一</Option>
+              <Option value="1">表二</Option>
+            </Select>
+          )}
+        </FormItem>,
+        <FormItem key="template" {...this.formLayout} label="规则模板">
+          {form.getFieldDecorator('template', {
+            initialValue: formVals.template,
+          })(
+            <Select style={{ width: '100%' }}>
+              <Option value="0">规则模板一</Option>
+              <Option value="1">规则模板二</Option>
+            </Select>
+          )}
+        </FormItem>,
+        <FormItem key="type" {...this.formLayout} label="规则类型">
+          {form.getFieldDecorator('type', {
+            initialValue: formVals.type,
+          })(
+            <RadioGroup>
+              <Radio value="0">强</Radio>
+              <Radio value="1">弱</Radio>
+            </RadioGroup>
+          )}
+        </FormItem>,
+      ];
+    }
+    if (currentStep === 2) {
+      return [
+        <FormItem key="time" {...this.formLayout} label="开始时间">
+          {form.getFieldDecorator('time', {
+            rules: [{ required: true, message: '请选择开始时间！' }],
+          })(
+            <DatePicker
+              style={{ width: '100%' }}
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          )}
+        </FormItem>,
+        <FormItem key="frequency" {...this.formLayout} label="调度周期">
+          {form.getFieldDecorator('frequency', {
+            initialValue: formVals.frequency,
+          })(
+            <Select style={{ width: '100%' }}>
+              <Option value="month">月</Option>
+              <Option value="week">周</Option>
+            </Select>
+          )}
+        </FormItem>,
+      ];
+    }
+      return [
+          <FormItem key="name" {...this.formLayout} label="别名">
+          {form.getFieldDecorator('name', {
+              rules: [{ required: true, message: '请输入别名！' }],
+              initialValue: formVals.name,
+          })(<Input placeholder="请输入" />)}
+          </FormItem>,
+              <FormItem key="desc" {...this.formLayout} label="描述">
+                  {form.getFieldDecorator('desc', {
+                      rules: [{ required: true, message: '请输入至少五个字符的描述！', min: 5 }],
+                      initialValue: formVals.desc,
+                  })(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
+          </FormItem>,
+          ];
+  };
+
+  renderFooter = currentStep => {
+    const { handleUpdateModalVisible } = this.props;
+    if (currentStep === 1) {
+      return [
+        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
+          上一步
+        </Button>,
+        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
+          取消
+        </Button>,
+        <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
+          下一步
+        </Button>,
+      ];
+    }
+    if (currentStep === 2) {
+      return [
+        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
+          上一步
+        </Button>,
+        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
+          取消
+        </Button>,
+        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
+          完成
+        </Button>,
+      ];
+    }
+    return [
+      <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
+        取消
+      </Button>,
+      <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
+        下一步
+      </Button>,
+    ];
+  };
+
+  render() {
+    const { updateModalVisible, handleUpdateModalVisible } = this.props;
+    const { currentStep, formVals } = this.state;
+
+    return (
+      <Modal
+        width={640}
+        bodyStyle={{ padding: '32px 40px 48px' }}
+        destroyOnClose
+        title="参数配置"
+        visible={updateModalVisible}
+        footer={this.renderFooter(currentStep)}
+        onCancel={() => handleUpdateModalVisible()}
+      >
+        <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
+          <Step title="基本信息" />
+          <Step title="参数规则属性" />
+          <Step title="设定调度周期" />
+        </Steps>
+        {this.renderContent(currentStep, formVals)}
+      </Modal>
+    );
+  }
+}
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ rule, loading }) => ({
+  rule,
+  loading: loading.models.rule,
 }))
 @Form.create()
 class Param extends PureComponent {
-    state = { visible: false, done: false };
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    stepFormValues: {},
+  };
 
-    formLayout = {
-        labelCol: { span: 7 },
-        wrapperCol: { span: 13 },
+  columns = [
+    {
+      title: '参数名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '调用次数',
+      dataIndex: 'callNo',
+      sorter: true,
+      align: 'right',
+      render: val => `${val} 万`,
+      // mark to display a total number
+      needTotal: true,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      filters: [
+        {
+          text: status[0],
+          value: 0,
+        },
+        {
+          text: status[1],
+          value: 1,
+        },
+        {
+          text: status[2],
+          value: 2,
+        },
+        {
+          text: status[3],
+          value: 3,
+        },
+      ],
+      render(val) {
+        return <Badge status={statusMap[val]} text={status[val]} />;
+      },
+    },
+    {
+      title: '最后更新时间',
+      dataIndex: 'updatedAt',
+      sorter: true,
+      render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>配置参数</a>
+          <Divider type="vertical" />
+          <a href="">订阅警报</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'rule/fetch',
+    });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
     };
-
-    componentDidMount() {
-        const { dispatch } = this.props;
-        dispatch({
-            type: 'list/fetch',
-            payload: {
-                count: 5,
-            },
-        });
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
     }
 
-    showModal = () => {
-        this.setState({
-            visible: true,
-            current: undefined,
-        });
-    };
+    dispatch({
+      type: 'rule/fetch',
+      payload: params,
+    });
+  };
 
-    showEditModal = item => {
-        this.setState({
-            visible: true,
-            current: item,
-        });
-    };
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'rule/fetch',
+      payload: {},
+    });
+  };
 
-    handleDone = () => {
-        setTimeout(() => this.addBtn.blur(), 0);
-        this.setState({
-            done: false,
-            visible: false,
-        });
-    };
+  toggleForm = () => {
+    const { expandForm } = this.state;
+    this.setState({
+      expandForm: !expandForm,
+    });
+  };
 
-    handleCancel = () => {
-        setTimeout(() => this.addBtn.blur(), 0);
-        this.setState({
-            visible: false,
-        });
-    };
+  handleMenuClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
 
-    handleSubmit = e => {
-        e.preventDefault();
-        const { dispatch, form } = this.props;
-        const { current } = this.state;
-        const id = current ? current.id : '';
-
-        setTimeout(() => this.addBtn.blur(), 0);
-        form.validateFields((err, fieldsValue) => {
-            if (err) return;
+    if (!selectedRows) return;
+    switch (e.key) {
+      case 'remove':
+        dispatch({
+          type: 'rule/remove',
+          payload: {
+            key: selectedRows.map(row => row.key),
+          },
+          callback: () => {
             this.setState({
-                done: true,
-            });
-            dispatch({
-                type: 'list/submit',
-                payload: { id, ...fieldsValue },
+              selectedRows: [],
             });
+          },
         });
-    };
-
-    deleteItem = id => {
-        const { dispatch } = this.props;
-        dispatch({
-            type: 'list/submit',
-            payload: { id },
-        });
-    };
-
-    render() {
-        const {
-            list: { list },
-            loading,
-        } = this.props;
-        const {
-            form: { getFieldDecorator },
-        } = this.props;
-        const { visible, done, current = {} } = this.state;
-
-        const editAndDelete = (key, currentItem) => {
-            if (key === 'edit') this.showEditModal(currentItem);
-            else if (key === 'delete') {
-                Modal.confirm({
-                    title: '删除模板',
-                    content: '确定删除该模板吗？',
-                    okText: '确认',
-                    cancelText: '取消',
-                    onOk: () => this.deleteItem(currentItem.id),
-                });
-            }
-        };
-
-        const modalFooter = done
-            ? { footer: null, onCancel: this.handleDone }
-            : { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };
-
-        const Info = ({ title, value, bordered }) => (
-            <div className={styles.headerInfo}>
-    <span>{title}</span>
-        <p>{value}</p>
-        {bordered && <em />}
-    </div>
-    );
-
-        const extraContent = (
-            <div className={styles.extraContent}>
-            <Search className={styles.extraContentSearch} placeholder="请输入模板内容" onSearch={() => ({})} />
-        </div>
-    );
-
-        const paginationProps = {
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSize: 5,
-            total: 50,
-        };
-
-        const ListContent = ({ data: { owner, createdAt, percent, status } }) => (
-            <div className={styles.listContent}>
-    <div className={styles.listContentItem}>
-    <span>模板名称</span>
-        <p>{owner}</p>
-        </div>
-        <div className={styles.listContentItem}>
-    <span>创建时间</span>
-        <p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
-        </div>
-        <div className={styles.listContentItem}>
-    <Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
-        </div>
-        </div>
-    );
-
-        const MoreBtn = props => (
-            <Dropdown
-        overlay={
-            <Menu onClick={({ key }) => editAndDelete(key, props.current)}>
-    <Menu.Item key="edit">编辑</Menu.Item>
-            <Menu.Item key="delete">删除</Menu.Item>
-            </Menu>
+        break;
+      default:
+        break;
     }
-    >
-    <a>
-        更多 <Icon type="down" />
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      stepFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'rule/add',
+      payload: {
+        desc: fields.desc,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'rule/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        key: fields.key,
+      },
+    });
+
+    message.success('配置成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="参数名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
+                展开 <Icon type="down" />
+              </a>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderAdvancedForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="参数名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <FormItem label="索引状态">
+              {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
+            </FormItem>
+          </Col>
+        </Row>
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="更新日期">
+              {getFieldDecorator('date')(
+                <DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
+              )}
+            </FormItem>
+          </Col>
+        </Row>
+        <div style={{ overflow: 'hidden' }}>
+          <div style={{ float: 'right', marginBottom: 24 }}>
+            <Button type="primary" htmlType="submit">
+              查询
+            </Button>
+            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+              重置
+            </Button>
+            <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
+              收起 <Icon type="up" />
             </a>
-            </Dropdown>
+          </div>
+        </div>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    const { expandForm } = this.state;
+    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
+  }
+
+  render() {
+    const {
+      rule: { data },
+      loading,
+    } = this.props;
+    const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
+    const menu = (
+      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
+        <Menu.Item key="remove">删除</Menu.Item>
+        <Menu.Item key="approval">批量审批</Menu.Item>
+      </Menu>
     );
 
-        const getModalContent = () => {
-            if (done) {
-                return (
-                    <Result
-                type="success"
-                title="操作成功"
-                description="一系列的信息描述，很短同样也可以带标点。"
-                actions={
-                    <Button type="primary" onClick={this.handleDone}>
-                知道了
-                </Button>
-            }
-                className={styles.formResult}
-                />
-            );
-            }
-            return (
-                <Form onSubmit={this.handleSubmit}>
-        <FormItem label="模板名称" {...this.formLayout}>
-            {getFieldDecorator('title', {
-                rules: [{ required: true, message: '请输入模板名称' }],
-                initialValue: current.title,
-            })(<Input placeholder="请输入" />)}
-        </FormItem>
-            <FormItem {...this.formLayout} label="模板内容">
-                {getFieldDecorator('subDescription', {
-                rules: [{ message: '请输入模板内容', min: 5 }],
-                    initialValue: current.subDescription,
-            })(<TextArea rows={4} placeholder="请输入模内容" />)}
-        </FormItem>
-            </Form>
-        );
-        };
-        return (
-            <div className={styles.standardList}>
-            <Card
-        className={styles.listCard}
-        bordered={false}
-        title="搜索模板"
-        style={{ marginTop: 24 }}
-        bodyStyle={{ padding: '0 32px 40px 32px' }}
-        extra={extraContent}
-            >
-            <Button
-        type="dashed"
-        style={{ width: '100%', marginBottom: 8 }}
-        icon="plus"
-        onClick={this.showModal}
-        ref={component => {
-            /* eslint-disable */
-            this.addBtn = findDOMNode(component);
-            /* eslint-enable */
-        }}
-    >
-        添加
-        </Button>
-        <List
-        size="large"
-        rowKey="id"
-        loading={loading}
-        pagination={paginationProps}
-        dataSource={list}
-        renderItem={item => (
-        <List.Item
-        actions={[
-            <a
-        onClick={e => {
-            e.preventDefault();
-            this.showEditModal(item);
-        }}
-    >
-        编辑
-        </a>,
-        <MoreBtn current={item} />,
-    ]}
-    >
-    <List.Item.Meta
-        avatar={<Avatar src={item.logo} shape="square" size="large" />}
-        title={<a href={item.href}>{item.title}</a>}
-        description={item.subDescription}
-        />
-        <ListContent data={item} />
-        </List.Item>
-    )}
-        />
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button>批量操作</Button>
+                  <Dropdown overlay={menu}>
+                    <Button>
+                      更多操作 <Icon type="down" />
+                    </Button>
+                  </Dropdown>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              loading={loading}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
         </Card>
-        </div>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {stepFormValues && Object.keys(stepFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={stepFormValues}
+          />
+        ) : null}
+        </Fragment>
     );
-    }
+  }
 }
 
 export default Param;
diff --git a/web/src/pages/SearchManage/template/Param.less b/web/src/pages/SearchManage/template/Param.less
index f086c501..792757df 100644
--- a/web/src/pages/SearchManage/template/Param.less
+++ b/web/src/pages/SearchManage/template/Param.less
@@ -1,195 +1,49 @@
 @import '~antd/lib/style/themes/default.less';
 @import '~@/utils/utils.less';
 
-.standardList {
+.tableList {
+  .tableListOperator {
+    margin-bottom: 16px;
+    button {
+      margin-right: 8px;
+    }
+  }
+}
+
+.tableListForm {
   :global {
-    .ant-card-head {
-      border-bottom: none;
-    }
-    .ant-card-head-title {
-      line-height: 32px;
-      padding: 24px 0;
-    }
-    .ant-card-extra {
-      padding: 24px 0;
-    }
-    .ant-list-pagination {
-      text-align: right;
-      margin-top: 24px;
-    }
-    .ant-avatar-lg {
-      width: 48px;
-      height: 48px;
-      line-height: 48px;
-    }
-  }
-  .headerInfo {
-    position: relative;
-    text-align: center;
-    & > span {
-      color: @text-color-secondary;
-      display: inline-block;
-      font-size: @font-size-base;
-      line-height: 22px;
-      margin-bottom: 4px;
-    }
-    & > p {
-      color: @heading-color;
-      font-size: 24px;
-      line-height: 32px;
-      margin: 0;
-    }
-    & > em {
-      background-color: @border-color-split;
-      position: absolute;
-      height: 56px;
-      width: 1px;
-      top: 0;
-      right: 0;
-    }
-  }
-  .listContent {
-    font-size: 0;
-    .listContentItem {
-      color: @text-color-secondary;
-      display: inline-block;
-      vertical-align: middle;
-      font-size: @font-size-base;
-      margin-left: 40px;
-      > span {
-        line-height: 20px;
+    .ant-form-item {
+      margin-bottom: 24px;
+      margin-right: 0;
+      display: flex;
+      > .ant-form-item-label {
+        width: auto;
+        line-height: 32px;
+        padding-right: 8px;
       }
-      > p {
-        margin-top: 4px;
-        margin-bottom: 0;
-        line-height: 22px;
+      .ant-form-item-control {
+        line-height: 32px;
       }
     }
+    .ant-form-item-control-wrapper {
+      flex: 1;
+    }
   }
-  .extraContentSearch {
-    margin-left: 16px;
-    width: 272px;
+  .submitButtons {
+    display: block;
+    white-space: nowrap;
+    margin-bottom: 24px;
   }
 }
 
-@media screen and (max-width: @screen-xs) {
-  .standardList {
-    :global {
-      .ant-list-item-content {
-        display: block;
-        flex: none;
-        width: 100%;
-      }
-      .ant-list-item-action {
-        margin-left: 0;
-      }
-    }
-    .listContent {
-      margin-left: 0;
-      & > div {
-        margin-left: 0;
-      }
-    }
-    .listCard {
-      :global {
-        .ant-card-head-title {
-          overflow: visible;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .standardList {
-    .extraContentSearch {
-      margin-left: 0;
-      width: 100%;
-    }
-    .headerInfo {
-      margin-bottom: 16px;
-      & > em {
-        display: none;
-      }
-    }
+@media screen and (max-width: @screen-lg) {
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 24px;
   }
 }
 
 @media screen and (max-width: @screen-md) {
-  .standardList {
-    .listContent {
-      & > div {
-        display: block;
-      }
-      & > div:last-child {
-        top: 0;
-        width: 100%;
-      }
-    }
-  }
-  .listCard {
-    :global {
-      .ant-radio-group {
-        display: block;
-        margin-bottom: 8px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
-  .standardList {
-    .listContent {
-      & > div {
-        display: block;
-      }
-      & > div:last-child {
-        top: 0;
-        width: 100%;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .standardList {
-    .listContent {
-      & > div {
-        margin-left: 24px;
-      }
-      & > div:last-child {
-        top: 0;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1400px) {
-  .standardList {
-    .listContent {
-      text-align: right;
-      & > div:last-child {
-        top: 0;
-      }
-    }
-  }
-}
-
-.standardListForm {
-  :global {
-    .ant-form-item {
-      margin-bottom: 12px;
-      &:last-child {
-        padding-top: 4px;
-        margin-bottom: 32px;
-      }
-    }
-  }
-}
-
-.formResult {
-  width: 100%;
-  [class^='title'] {
-    margin-bottom: 8px;
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 8px;
   }
 }
diff --git a/web/src/pages/SearchManage/template/Summary.js b/web/src/pages/SearchManage/template/Summary.js
index 920c3039..28e71aa5 100644
--- a/web/src/pages/SearchManage/template/Summary.js
+++ b/web/src/pages/SearchManage/template/Summary.js
@@ -1,298 +1,439 @@
-import React, { PureComponent } from 'react';
-import { findDOMNode } from 'react-dom';
-import moment from 'moment';
+import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
 import {
-    List,
-    Card,
     Row,
     Col,
-    Radio,
-    Input,
-    Progress,
-    Button,
-    Icon,
-    Dropdown,
-    Menu,
-    Avatar,
-    Modal,
+    Card,
     Form,
+    Input,
+    Button,
+    Modal,
+    message,
+    Divider,
+    Icon,
     DatePicker,
+    TimePicker,
     Select,
+    Popover,
 } from 'antd';
-
+import StandardTable from '@/components/StandardTable';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-import Result from '@/components/Result';
-
 import styles from './Summary.less';
 
 const FormItem = Form.Item;
-const RadioButton = Radio.Button;
-const RadioGroup = Radio.Group;
-const SelectOption = Select.Option;
-const { Search, TextArea } = Input;
+const { TextArea } = Input;
+const fieldLabels = {
+    keyword_type: '关键词分类'
 
-@connect(({ list, loading }) => ({
-    list,
-    loading: loading.models.list,
+};
+
+
+const CreateForm = Form.create()(props => {
+    const { modalVisible, form, handleAdd, handleModalVisible } = props;
+    const okHandle = () => {
+        form.validateFields((err, fieldsValue) => {
+            if (err) return;
+            form.resetFields();
+            handleAdd(fieldsValue);
+        });
+    };
+    return (
+        <Modal
+    destroyOnClose
+    title="新建模板"
+    visible={modalVisible}
+    width={640}
+    onOk={okHandle}
+    onCancel={() => handleModalVisible()}>
+<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="关键词">
+        {form.getFieldDecorator('name', {
+            rules: [{ required: true, message: '请输入至少一个字符的名称！', min: 1 }],
+        })(<Input placeholder="请输入关键词" />)}
+</FormItem>
+    <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}  label='关键词分类'>
+        {form.getFieldDecorator('keyword_type', {
+            rules: [{ required: true, message: '请选择关键词类型' }],
+        })(
+        <Select labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}  placeholder="请选择关键词类型">
+        <Option value="keyun">敏感词</Option>
+        <Option value="huoyun">提示词</Option>
+        <Option value="xianlu1">同义词</Option>
+        <Option value="xianlu2">过滤词</Option>
+        <Option value="xianlu3">停用词</Option>
+        <Option value="xianlu4">保留词</Option>
+        <Option value="xianlu5">纠错词</Option>
+        <Option value="xianlu6">相关搜索</Option>
+        <Option value="xianlu7">热点词管理</Option>
+        </Select>
+)}
+</Form.Item>
+    </Modal>
+);
+});
+
+const Info = ({ title, value, bordered }) => (
+    <div className={styles.headerInfo}>
+<span>{title}</span>
+<p>{value}</p>
+{bordered && <em />}
+</div>
+);
+
+const UpdateForm = Form.create()(props => {
+    const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+    const okHandle = () => {
+        form.validateFields((err, fieldsValue) => {
+            if (err) return;
+            form.resetFields();
+            handleUpdate(fieldsValue);
+        });
+    };
+
+    return (
+        <Modal destroyOnClose title="新增关键词" visible={updateModalVisible} width={640} onOk={okHandle}
+    onCancel={() => handleUpdateModalVisible()}>
+
+<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="关键词">
+        {form.getFieldDecorator('keyword', {
+            initialValue: values.keyword,
+            rules: [{ required: true, message: '请输入至少一个字符的名称！', min: 1 }],
+        })(<Input placeholder="请输入关键词" />)}
+</FormItem>
+
+    <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={fieldLabels.keyword_type}>
+    {form.getFieldDecorator('keyword_type', {
+        initialValue: values.value,
+        rules: [{ required: true, message: '请选择关键词类型' }],
+    })(
+    <Select placeholder="请选择关键词类型">
+        <Option value="keyun">敏感词</Option>
+        <Option value="huoyun">提示词</Option>
+        <Option value="xianlu">同义词</Option>
+        <Option value="xianlu">过滤词</Option>
+        <Option value="xianlu">停用词</Option>
+        <Option value="xianlu">保留词</Option>
+        <Option value="xianlu">纠错词</Option>
+        <Option value="xianlu">相关搜索</Option>
+        <Option value="xianlu">热点词管理</Option>
+        </Select>
+    )}
+</Form.Item>
+    </Modal>
+);
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+    pipeline,
+    loading: loading.models.pipeline,
 }))
 @Form.create()
 class Summary extends PureComponent {
-    state = { visible: false, done: false };
-
-    formLayout = {
-        labelCol: { span: 7 },
-        wrapperCol: { span: 13 },
+    state = {
+        modalVisible: false,
+        updateModalVisible: false,
+        expandForm: false,
+        selectedRows: [],
+        formValues: {},
+        updateFormValues: {},
     };
+    datasource = `
+          [
+          {
+          "keyword" : "template1",
+          "type" : "2",
+          "value": "keyun"
+          },
+          {
+          "keyword" : "template2",
+          "type" : "1",
+          "value": "keyun"
+          },{
+          "keyword" : "template3",
+          "type" : "3",
+          "value": "keyun"
+          },{
+          "keyword" : "template4",
+          "type" : "4",
+          "value": "keyun"
+          },
+          {
+          "keyword" : "template5",
+          "type" : "5",
+          "value": "keyun"
+          },{
+          "keyword" : "template6",
+          "type" : "2",
+          "value": "keyun"
+          },
+          {
+          "keyword" : "template7",
+          "type" : "1",
+          "value": "keyun"
+          }]`;
 
-    componentDidMount() {
-        const { dispatch } = this.props;
-        dispatch({
-            type: 'list/fetch',
-            payload: {
-                count: 5,
-            },
-        });
+    columns = [
+        {
+            title: '模板名称',
+            dataIndex: 'keyword',
+        },
+        {
+            title: '索引数',
+            dataIndex: 'type',
+        },
+        {
+            title: '操作',
+            render: (text, record) => (
+                <Fragment>
+<Divider type="vertical" />
+    <a onClick={() => {
+    this.state.selectedRows.push(record);
+    this.handleDeleteClick();
+}}>删除</a>
+</Fragment>
+),
+},
+];
+
+componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+}
+
+handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+        const newObj = { ...obj };
+        newObj[key] = getValue(filtersArg[key]);
+        return newObj;
+    }, {});
+
+    const params = {
+        currentPage: pagination.current,
+        pageSize: pagination.pageSize,
+        ...formValues,
+        ...filters,
+    };
+    if (sorter.field) {
+        params.sorter = `${sorter.field}_${sorter.order}`;
     }
 
-    showModal = () => {
-        this.setState({
-            visible: true,
-            current: undefined,
-        });
-    };
+    dispatch({
+        type: 'pipeline/fetch',
+        payload: params,
+    });
+};
 
-    showEditModal = item => {
-        this.setState({
-            visible: true,
-            current: item,
-        });
-    };
+handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+        formValues: {},
+    });
+    dispatch({
+        type: 'pipeline/fetch',
+        payload: {},
+    });
+};
 
-    handleDone = () => {
-        setTimeout(() => this.addBtn.blur(), 0);
-        this.setState({
-            done: false,
-            visible: false,
-        });
-    };
+handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
 
-    handleCancel = () => {
-        setTimeout(() => this.addBtn.blur(), 0);
-        this.setState({
-            visible: false,
-        });
-    };
-
-    handleSubmit = e => {
-        e.preventDefault();
-        const { dispatch, form } = this.props;
-        const { current } = this.state;
-        const id = current ? current.id : '';
-
-        setTimeout(() => this.addBtn.blur(), 0);
-        form.validateFields((err, fieldsValue) => {
-            if (err) return;
+    if (!selectedRows) return;
+    dispatch({
+        type: 'pipeline/delete',
+        payload: {
+            key: selectedRows.map(row => row.name),
+        },
+        callback: () => {
             this.setState({
-                done: true,
+                selectedRows: [],
             });
-            dispatch({
-                type: 'list/submit',
-                payload: { id, ...fieldsValue },
-            });
-        });
-    };
+        },
+    });
+};
+
+handleSelectRows = rows => {
+    this.setState({
+        selectedRows: rows,
+    });
+};
+
+handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+        if (err) return;
+
+        const values = {
+            ...fieldsValue,
+            updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+        };
+
+        this.setState({
+            formValues: values,
+        });
 
-    deleteItem = id => {
-        const { dispatch } = this.props;
         dispatch({
-            type: 'list/submit',
-            payload: { id },
+            type: 'rule/fetch',
+            payload: values,
         });
-    };
+    });
+};
 
-    render() {
-        const {
-            list: { list },
-            loading,
-        } = this.props;
-        const {
-            form: { getFieldDecorator },
-        } = this.props;
-        const { visible, done, current = {} } = this.state;
+handleModalVisible = flag => {
+    this.setState({
+        modalVisible: !!flag,
+    });
+};
 
-        const editAndDelete = (key, currentItem) => {
-            if (key === 'edit') this.showEditModal(currentItem);
-            else if (key === 'delete') {
-                Modal.confirm({
-                    title: '删除模板',
-                    content: '确定删除该模板吗？',
-                    okText: '确认',
-                    cancelText: '取消',
-                    onOk: () => this.deleteItem(currentItem.id),
-                });
-            }
-        };
+handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+        updateModalVisible: !!flag,
+        updateFormValues: record || {},
+    });
+};
 
-        const modalFooter = done
-            ? { footer: null, onCancel: this.handleDone }
-            : { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };
+handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+        type: 'pipeline/add',
+        payload: {
+            name: fields.name,
+            desc: fields.desc,
+            processors: fields.processors,
+        },
+    });
 
-        const Info = ({ title, value, bordered }) => (
-            <div className={styles.headerInfo}>
-    <span>{title}</span>
-        <p>{value}</p>
-        {bordered && <em />}
-    </div>
-    );
+    message.success('添加成功');
+    this.handleModalVisible();
+};
 
-        const extraContent = (
-            <div className={styles.extraContent}>
-            <Search className={styles.extraContentSearch} placeholder="请输入模板内容" onSearch={() => ({})} />
-        </div>
-    );
+handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+        type: 'pipeline/update',
+        payload: {
+            name: fields.name,
+            desc: fields.desc,
+            processors: fields.processors,
+        },
+    });
 
-        const paginationProps = {
-            showSizeChanger: true,
-            showQuickJumper: true,
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+};
+
+renderSimpleForm() {
+    const {
+        form: { getFieldDecorator },
+    } = this.props;
+    return (
+        <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+<Col lg={6} md={12} sm={24}>
+        <Form.Item label={fieldLabels.keyword_type}>
+    {getFieldDecorator('keyword_type', {
+        rules: [{ required: true, message: '请选择关键词类型' }],
+    })(
+    <Select placeholder="请选择关键词类型">
+        <Option value="keyun">敏感词</Option>
+        <Option value="huoyun">提示词</Option>
+        <Option value="xianlu">同义词</Option>
+        <Option value="xianlu">过滤词</Option>
+        <Option value="xianlu">停用词</Option>
+        <Option value="xianlu">保留词</Option>
+        <Option value="xianlu">纠错词</Option>
+        <Option value="xianlu">相关搜索</Option>
+        <Option value="xianlu">热点词管理</Option>
+        </Select>
+    )}
+</Form.Item>
+    </Col>
+    <Col md={8} sm={24}>
+        <FormItem label="关键词">
+        {getFieldDecorator('name')(<Input placeholder="请输入关键词" />)}
+</FormItem>
+    </Col>
+    <Col md={8} sm={24}>
+        <span className={styles.submitButtons}>
+<Button type="primary" htmlType="submit">
+        查询
+        </Button>
+        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+    重置
+    </Button>
+    </span>
+    </Col>
+    </Row>
+    </Form>
+);
+}
+
+renderForm() {
+    return this.renderSimpleForm();
+}
+
+render() {
+    const data = {
+        list: JSON.parse(this.datasource),
+        pagination: {
             pageSize: 5,
-            total: 50,
-        };
-
-        const ListContent = ({ data: { owner, createdAt, percent, status } }) => (
-            <div className={styles.listContent}>
-    <div className={styles.listContentItem}>
-    <span>模板名称</span>
-        <p>{owner}</p>
-        </div>
-        <div className={styles.listContentItem}>
-    <span>创建时间</span>
-        <p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
-        </div>
-        <div className={styles.listContentItem}>
-    <Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
-        </div>
-        </div>
-    );
-
-        const MoreBtn = props => (
-            <Dropdown
-        overlay={
-            <Menu onClick={({ key }) => editAndDelete(key, props.current)}>
-    <Menu.Item key="edit">编辑</Menu.Item>
-            <Menu.Item key="delete">删除</Menu.Item>
-            </Menu>
-    }
-    >
-    <a>
-        更多 <Icon type="down" />
-            </a>
-            </Dropdown>
-    );
-
-        const getModalContent = () => {
-            if (done) {
-                return (
-                    <Result
-                type="success"
-                title="操作成功"
-                description="一系列的信息描述，很短同样也可以带标点。"
-                actions={
-                    <Button type="primary" onClick={this.handleDone}>
-                知道了
-                </Button>
-            }
-                className={styles.formResult}
-                />
-            );
-            }
-            return (
-                <Form onSubmit={this.handleSubmit}>
-        <FormItem label="模板名称" {...this.formLayout}>
-            {getFieldDecorator('title', {
-                rules: [{ required: true, message: '请输入模板名称' }],
-                initialValue: current.title,
-            })(<Input placeholder="请输入" />)}
-        </FormItem>
-            <FormItem {...this.formLayout} label="模板内容">
-                {getFieldDecorator('subDescription', {
-                rules: [{ message: '请输入模板内容', min: 5 }],
-                    initialValue: current.subDescription,
-            })(<TextArea rows={4} placeholder="请输入模内容" />)}
-        </FormItem>
-            </Form>
-        );
-        };
-        return (
-            <div className={styles.standardList}>
-    <Card bordered={false}>
-            <Row>
-            <Col sm={8} xs={24}>
-            <Info title="搜索次数" value="80000次" bordered />
+        },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+        handleAdd: this.handleAdd,
+        handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+        handleUpdateModalVisible: this.handleUpdateModalVisible,
+        handleUpdate: this.handleUpdate,
+    };
+    return (
+        <Fragment>
+        <Card bordered={false}>
+        <Row>
+        <Col sm={8} xs={24}>
+        <Info title="搜索次数" value="80000次" bordered />
         </Col>
         <Col sm={8} xs={24}>
             <Info title="来源统计" value="100个" bordered />
-        </Col>
+        </Col >
         <Col sm={8} xs={24}>
-            <Info title="新词、热词 " value="100个" />
-            </Col>
-            </Row>
-            </Card>
-
-            <Card
-        className={styles.listCard}
-        bordered={false}
-        title="搜索模板"
-        style={{ marginTop: 24 }}
-        bodyStyle={{ padding: '0 32px 40px 32px' }}
-        extra={extraContent}
-            >
-            <Button
-        type="dashed"
-        style={{ width: '100%', marginBottom: 8 }}
-        icon="plus"
-        onClick={this.showModal}
-        ref={component => {
-            /* eslint-disable */
-            this.addBtn = findDOMNode(component);
-            /* eslint-enable */
-        }}
-    >
-        添加
-        </Button>
-        <List
-        size="large"
-        rowKey="id"
-        loading={loading}
-        pagination={paginationProps}
-        dataSource={list}
-        renderItem={item => (
-        <List.Item
-        actions={[
-            <a
-        onClick={e => {
-            e.preventDefault();
-            this.showEditModal(item);
-        }}
-    >
-        编辑
-        </a>,
-        <MoreBtn current={item} />,
-    ]}
-    >
-    <List.Item.Meta
-        avatar={<Avatar src={item.logo} shape="square" size="large" />}
-        title={<a href={item.href}>{item.title}</a>}
-        description={item.subDescription}
-        />
-        <ListContent data={item} />
-        </List.Item>
-    )}
-        />
+        <Info title="新词、热词 " value="100个" />
+        </Col>
+        </Row>
         </Card>
-        </div>
-    );
-    }
+        <Card bordered={false}>
+        <div className={styles.tableList}>
+    <StandardTable
+    selectedRows={selectedRows}
+    data={data}
+    columns={this.columns}
+    onSelectRow={this.handleSelectRows}
+    onChange={this.handleStandardTableChange}
+    />
+    </div>
+    </Card>
+    <CreateForm {...parentMethods} modalVisible={modalVisible} />
+    {updateFormValues && Object.keys(updateFormValues).length ? (
+        <UpdateForm
+        {...updateMethods}
+        updateModalVisible={updateModalVisible}
+        values={updateFormValues}
+        />
+    ) : null}
+</Fragment>
+);
 }
-
-export default Summary;
+}
+export default Summary;
\ No newline at end of file