add logstash config references

web/src/pages/DataManagement/IngestPipeline.js

@@ -19,7 +19,7 @@ import {
   Badge,
   Divider,
   Steps,
-  Radio,
+  Popconfirm
 } from 'antd';
 import StandardTable from '@/components/StandardTable';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
@@ -213,21 +213,30 @@ class IngestPipeline extends PureComponent {
   };
 
   handleDeleteClick = e => {
+    Modal.confirm({
+      title: '删除Pipeline',
+      content: '确定删除该Pipeline吗？',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: () => this.deleteItem(),
+    });
+  };
+  deleteItem = ()=>{
     const { dispatch } = this.props;
     const { selectedRows } = this.state;
 
     if (!selectedRows) return;
-        dispatch({
+    dispatch({
-          type: 'pipeline/delete',
+      type: 'pipeline/delete',
-          payload: {
+      payload: {
-            key: selectedRows.map(row => row.name),
+        key: selectedRows.map(row => row.name),
-          },
+      },
-          callback: () => {
+      callback: () => {
-            this.setState({
+        this.setState({
-              selectedRows: [],
+          selectedRows: [],
-            });
-          },
         });
+      },
+    });
   };
 
   handleSelectRows = rows => {

web/src/pages/DataManagement/LogstashConfig.js

@@ -1,6 +1,8 @@
 import React, { Component,Fragment } from 'react';
 import { connect } from 'dva';
-import { Card,Form,Input, Select,Button,message } from 'antd';
+import { Card,Form,Input, Select,Button,message, Drawer, 
+  List
+} from 'antd';
 const { Option } = Select;
 import { formatMessage, FormattedMessage } from 'umi/locale';
 import DescriptionList from '@/components/DescriptionList';
@@ -18,6 +20,28 @@ const operationTabList = [
       tab: '对接Kafka',
     }
   ];
+  const configRawData = [
+    {
+      title: 'schedule',
+      content: [`Schedule of when to periodically run statement, in Cron format for example: "* * * * *" (execute query every minute, on the minute)`,
+      `There is no schedule by default. If no schedule is given, then the statement is run exactly once.`],
+    },
+    {
+      title: 'jdbc_driver_library',
+      content: ['JDBC driver library path to third party driver library. In case of multiple libraries being required you can pass them separated by a comma.'],
+    },
+    {
+      title: 'jdbc_driver_class',
+      content: ['JDBC driver class to load, for example, "org.apache.derby.jdbc.ClientDriver"'],
+    },
+    {
+      title: 'jdbc_connection_string',
+      content: ['JDBC connection string, for example, "jdbc:oracle:test:@192.168.1.68:1521/testdb"'],
+    },{
+      title:'jdbc_paging_enabled',
+      content: ['This will cause a sql statement to be broken up into multiple queries. Each query will use limits and offsets to collectively retrieve the full result-set. The limit size is set with jdbc_page_size.','Be aware that ordering is not guaranteed between queries.']
+    },
+  ];
 
 @connect(({logstash,loading }) => ({
     data: logstash.logstash,
@@ -29,6 +53,8 @@ const operationTabList = [
 class LogstashConfig extends Component {
     state = {
         operationkey: 'tab1',
+        drawerVisible: false,
+        drawerData: configRawData,
     };
   componentDidMount() {
     message.loading('数据加载中..', 'initdata');
@@ -65,6 +91,28 @@ class LogstashConfig extends Component {
       }
     });
   };
+  
+  handleDrawerVisible = () => {
+    this.setState(preState=>{
+      return {
+        drawerVisible: !preState.drawerVisible,
+      }
+    })
+  };
+  onCloseDrawer = ()=>{
+    this.setState({
+      drawerVisible: false,
+    });
+  };
+
+  onDrawerSearch = (value)=>{
+    let data = configRawData.filter((conf)=>{
+      return conf.title.includes(value);
+    });
+    this.setState({
+      drawerData: data,
+    });
+  };
 
   render() {
     const { operationkey } = this.state;
@@ -92,7 +140,7 @@ class LogstashConfig extends Component {
       };
     const contentList = {
         tab1: (
-        <div>    
+        <div style={{position:"relative"}}>    
             <Form onSubmit={this.handleSubmit} name="jdbc" hideRequiredMark style={{ marginTop: 8 }}>
             <FormItem {...formItemLayout} label={<FormattedMessage id="form.dbtype.label" />}>
                 {getFieldDecorator('dbtype', {
@@ -112,6 +160,7 @@ class LogstashConfig extends Component {
                 </Select>
                 )}
                 </FormItem>
+                <a href="javascript:void(0);" onClick={this.handleDrawerVisible} style={{position:"absolute", top:15,right:50}}>配置释义</a>
                 <FormItem {...formItemLayout} label={<FormattedMessage id="form.logstash.jdbcconf.label" />}>
                 {getFieldDecorator('logstash.jdbcconf', {
                 initialValue: data.jdbc.config,
@@ -173,6 +222,30 @@ class LogstashConfig extends Component {
             onTabChange={this.onOperationTabChange}
             >
             {contentList[operationkey]}
+            <Drawer visible={this.state.drawerVisible}
+              title="配置释义"
+              onClose={this.onCloseDrawer}
+              width={720}
+            >
+              <Input.Search placeholder="input config key" onChange={(e) => {this.onDrawerSearch(e.target.value)}} onSearch={this.onDrawerSearch} enterButton />
+               <List
+                itemLayout="vertical"
+                size="small"
+                dataSource={this.state.drawerData}
+                renderItem={item => (
+                  <List.Item key={item.title}>
+                    <List.Item.Meta
+                      title={item.title}
+                    />
+                    <div>
+                      {item.content.map((c)=>{
+                        return (<p>{c}</p>);
+                      })}
+                    </div>
+                  </List.Item>
+                )}
+              />
+            </Drawer>
             </Card>
         </Fragment>
     );

web/src/pages/DataManagement/backup/BakCycle.js

@@ -1,4 +1,4 @@
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent, Fragment,forwardRef } from 'react';
 import { connect } from 'dva';
 import {
   Row,
@@ -25,11 +25,28 @@ import styles from '../../List/TableList.less';
 const FormItem = Form.Item;
 const { TextArea } = Input;
 
+let RightSwitch = forwardRef((props, _ref) => {
+  return (
+    <div>
+      <Switch
+        name={props.id}
+        checkedChildren={<Icon type="check" />}
+        unCheckedChildren={<Icon type="close" />}
+        checked={props.value}
+        style={{marginRight:5}}
+        onChange={(v)=>{props.onChange(v)}}
+      />
+      {props.description}
+  </div>
+  )
+});
+
 @Form.create()
 class NewForm extends PureComponent {
   state = {
     currentStep: 0,
   }
+  
     renderStep=()=>{
       let {form} = this.props;
       let retDom = '';
@@ -88,7 +105,7 @@ class NewForm extends PureComponent {
                 {form.getFieldDecorator('time', {
                   rules: [{ required: true }],
                 })(
-                  <TimePicker defaultValue={moment('12:08', format)} format={format} style={{width:200}} />
+                  <TimePicker format={format} style={{width:200}} />
                 )}
               </Form.Item>
             </Form>
@@ -97,48 +114,32 @@ class NewForm extends PureComponent {
         case 1:
           retDom = (
             <Form>
-              <Form.Item label="all data streams and indices, including system indices" {...sformLayout}>
+              <Form.Item label="">
                 {form.getFieldDecorator('indices', {
-                initialValue: true,
+                  initialValue: true,
                 })(
-                  <Switch
+                  <RightSwitch description="all data streams and indices, including system indices"/>
-                    checkedChildren={<Icon type="check" />}
-                    unCheckedChildren={<Icon type="close" />}
-                    defaultChecked
-                  />
                 )}
               </Form.Item>
-              <Form.Item label="Ignore unavaiable indices" {...sformLayout}>
+              <Form.Item>
                 {form.getFieldDecorator('unavaiable', {
                 initialValue: false,
                 })(
-                  <Switch
+                  <RightSwitch description="Ignore unavaiable indices"/>
-                    checkedChildren={<Icon type="check" />}
-                    unCheckedChildren={<Icon type="close" />}
-                    defaultChecked
-                  />
                 )}
               </Form.Item>
-              <Form.Item label="Allow partial indices" {...sformLayout}>
+              <Form.Item label="">
                 {form.getFieldDecorator('partial', {
-                initialValue: false,
+                // initialValue: true,
                 })(
-                  <Switch
+                  <RightSwitch description="Allow partial indices"/>
-                    checkedChildren={<Icon type="check" />}
-                    unCheckedChildren={<Icon type="close" />}
-                    defaultChecked
-                  />
                 )}
               </Form.Item>
-              <Form.Item label="Include global state" {...sformLayout}>
+              <Form.Item label="" >
                 {form.getFieldDecorator('global', {
                 initialValue: true,
                 })(
-                  <Switch
+                  <RightSwitch description="Include global state"/>
-                    checkedChildren={<Icon type="check" />}
-                    unCheckedChildren={<Icon type="close" />}
-                    defaultChecked
-                  />
                 )}
               </Form.Item>
             </Form>
@@ -150,10 +151,26 @@ class NewForm extends PureComponent {
       return retDom;
     }
     handleNext(currentStep){
+      const {form} = this.props;
+      form.validateFieldsAndScroll((err, values) => {
+        console.log(values);
+      });
+      form.validate
       this.setState({
         currentStep: currentStep +1,
       });
     }
+    backward(){
+      this.setState(preState=>{
+        if(preState.currentStep < 1) {
+          return preState;
+        }
+        return {
+          currentStep: preState.currentStep - 1
+        };
+      });
+    }
+    
     render(){
       const {currentStep} = this.state;
       return (
@@ -177,14 +194,13 @@ class NewForm extends PureComponent {
             }}>
             <Button key="back" onClick={()=>this.backward(currentStep)}>
             上一步
-            </Button>,
+            </Button>
             <Button key="forward" style={{marginLeft:'2em'}}  type="primary" onClick={() => this.handleNext(currentStep)}>
               下一步
             </Button>
             <Button key="cancel"  style={{float:'right'}} onClick={() =>{}}>
               取消
-            </Button>,
+            </Button>         
-           
           </div>
         </div>
       )