add logstash config references
This commit is contained in:
silenceqi
parent
7eb7a35038
commit
79e73d6f27
|
|
@ -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({
|
||||
type: 'pipeline/delete',
|
||||
payload: {
|
||||
key: selectedRows.map(row => row.name),
|
||||
},
|
||||
callback: () => {
|
||||
this.setState({
|
||||
selectedRows: [],
|
||||
});
|
||||
},
|
||||
dispatch({
|
||||
type: 'pipeline/delete',
|
||||
payload: {
|
||||
key: selectedRows.map(row => row.name),
|
||||
},
|
||||
callback: () => {
|
||||
this.setState({
|
||||
selectedRows: [],
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
handleSelectRows = rows => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
checkedChildren={<Icon type="check" />}
|
||||
unCheckedChildren={<Icon type="close" />}
|
||||
defaultChecked
|
||||
/>
|
||||
<RightSwitch description="all data streams and indices, including system indices"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Ignore unavaiable indices" {...sformLayout}>
|
||||
<Form.Item>
|
||||
{form.getFieldDecorator('unavaiable', {
|
||||
initialValue: false,
|
||||
})(
|
||||
<Switch
|
||||
checkedChildren={<Icon type="check" />}
|
||||
unCheckedChildren={<Icon type="close" />}
|
||||
defaultChecked
|
||||
/>
|
||||
<RightSwitch description="Ignore unavaiable indices"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Allow partial indices" {...sformLayout}>
|
||||
<Form.Item label="">
|
||||
{form.getFieldDecorator('partial', {
|
||||
initialValue: false,
|
||||
// initialValue: true,
|
||||
})(
|
||||
<Switch
|
||||
checkedChildren={<Icon type="check" />}
|
||||
unCheckedChildren={<Icon type="close" />}
|
||||
defaultChecked
|
||||
/>
|
||||
<RightSwitch description="Allow partial indices"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Include global state" {...sformLayout}>
|
||||
<Form.Item label="" >
|
||||
{form.getFieldDecorator('global', {
|
||||
initialValue: true,
|
||||
})(
|
||||
<Switch
|
||||
checkedChildren={<Icon type="check" />}
|
||||
unCheckedChildren={<Icon type="close" />}
|
||||
defaultChecked
|
||||
/>
|
||||
<RightSwitch description="Include global state"/>
|
||||
)}
|
||||
</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>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue