add ingest pipeline
This commit is contained in:
silenceqi
parent
185c1cb1ff
commit
034b127be1
|
|
@ -0,0 +1,101 @@
|
|||
var pipelineList = [{
|
||||
name:"fix_locales",
|
||||
desc: "test fix_locales",
|
||||
processors: ` [
|
||||
{
|
||||
"set": {
|
||||
"if": "ctx['locales'].empty",
|
||||
"field": "locales",
|
||||
"value": "en-en"
|
||||
}
|
||||
},
|
||||
{
|
||||
"set": {
|
||||
"field": "reindexBatch",
|
||||
"value": 3
|
||||
}
|
||||
},
|
||||
{
|
||||
"split": {
|
||||
"field": "locales",
|
||||
"separator": ","
|
||||
}
|
||||
}
|
||||
]`
|
||||
},{
|
||||
name:"fix_locales",
|
||||
desc: "test fix_locales",
|
||||
processors: ` [
|
||||
{
|
||||
"set": {
|
||||
"if": "ctx['locales'].empty",
|
||||
"field": "locales",
|
||||
"value": "en-en"
|
||||
}
|
||||
},
|
||||
{
|
||||
"set": {
|
||||
"field": "reindexBatch",
|
||||
"value": 3
|
||||
}
|
||||
},
|
||||
{
|
||||
"split": {
|
||||
"field": "locales",
|
||||
"separator": ","
|
||||
}
|
||||
}
|
||||
]`
|
||||
}];
|
||||
export default {
|
||||
'get /data/pipeline': function (req, res) {
|
||||
res.json(pipelineList);
|
||||
},
|
||||
'POST /data/pipeline/add': (req, res) => {
|
||||
pipelineList.push(req.body);
|
||||
setTimeout(() => {
|
||||
res.send({ message: 'Ok' });
|
||||
},2000);
|
||||
},
|
||||
'PUT /data/pipeline/update': (req, res) => {
|
||||
var targetIdx = -1;
|
||||
pipelineList.forEach(function(p, i){
|
||||
if(p.name == req.body.name){
|
||||
targetIdx = i;
|
||||
}
|
||||
});
|
||||
console.log(req.body);
|
||||
if(targetIdx > -1) {
|
||||
pipelineList[targetIdx] = req.body
|
||||
setTimeout(() => {
|
||||
res.send({ message: 'Ok' });
|
||||
},2000);
|
||||
return;
|
||||
}
|
||||
res.send({ message: 'Fail' });
|
||||
},
|
||||
//delete /data/pipeline/:name
|
||||
'POST /data/pipeline': (req, res) => {
|
||||
var keys = req.body.key || [];
|
||||
var hasDeleted = false;
|
||||
for(let i=0; i< keys.length; i++){
|
||||
var targetIdx = -1;
|
||||
pipelineList.forEach(function(p, j){
|
||||
if(keys[i] == p.name){
|
||||
targetIdx = j;
|
||||
}
|
||||
});
|
||||
if(targetIdx > -1) {
|
||||
pipelineList.splice(targetIdx, 1);
|
||||
hasDeleted = true;
|
||||
}
|
||||
}
|
||||
if(hasDeleted) {
|
||||
setTimeout(() => {
|
||||
res.send({ message: 'Ok' });
|
||||
},2000);
|
||||
return;
|
||||
}
|
||||
res.send({ message: 'Fail' });
|
||||
},
|
||||
};
|
||||
|
|
@ -1,80 +1,386 @@
|
|||
import React, { Component,Fragment } from 'react';
|
||||
import React, { PureComponent, Fragment } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import { Card,Form,Input, Select,Button } 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 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 '../List/TableList.less';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { Step } = Steps;
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
const getValue = obj =>
|
||||
Object.keys(obj)
|
||||
.map(key => obj[key])
|
||||
.join(',');
|
||||
const statusMap = ['default', 'processing', 'success', 'error'];
|
||||
const status = ['关闭', '运行中', '已上线', '异常'];
|
||||
|
||||
@connect(({ profile, loading }) => ({
|
||||
profile,
|
||||
loading: loading.effects['profile/fetchBasic'],
|
||||
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="新建Pipeline"
|
||||
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('desc', {
|
||||
rules: [{ required: false }],
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="处理器">
|
||||
{form.getFieldDecorator('processors', {
|
||||
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="更新Pipeline"
|
||||
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('desc', {
|
||||
initialValue: values.desc,
|
||||
rules: [{ required: false }],
|
||||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="处理器">
|
||||
{form.getFieldDecorator('processors', {
|
||||
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,
|
||||
}))
|
||||
|
||||
@Form.create()
|
||||
class IngestPipeline extends Component {
|
||||
state = {
|
||||
operationkey: 'tab1'
|
||||
};
|
||||
class IngestPipeline extends PureComponent {
|
||||
state = {
|
||||
modalVisible: false,
|
||||
updateModalVisible: false,
|
||||
expandForm: false,
|
||||
selectedRows: [],
|
||||
formValues: {},
|
||||
updateFormValues: {},
|
||||
};
|
||||
|
||||
columns = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'desc',
|
||||
},
|
||||
{
|
||||
title: '处理器',
|
||||
dataIndex: 'processors',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
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: 'profile/fetchBasic',
|
||||
type: 'pipeline/fetch',
|
||||
});
|
||||
}
|
||||
onOperationTabChange = key => {
|
||||
this.setState({ operationkey: key });
|
||||
};
|
||||
handleSubmit = e => {
|
||||
const { dispatch, form } = this.props;
|
||||
e.preventDefault();
|
||||
form.validateFieldsAndScroll((err, values) => {
|
||||
if (!err) {
|
||||
dispatch({
|
||||
type: 'form/submitRegularForm',
|
||||
payload: values,
|
||||
});
|
||||
}
|
||||
|
||||
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}`;
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: 'pipeline/fetch',
|
||||
payload: params,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { operationkey } = this.state;
|
||||
const { submitting } = this.props;
|
||||
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: [],
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
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,
|
||||
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, getFieldValue },
|
||||
form: { getFieldDecorator },
|
||||
} = this.props;
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 7 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 12 },
|
||||
md: { span: 10 },
|
||||
},
|
||||
};
|
||||
const submitFormLayout = {
|
||||
wrapperCol: {
|
||||
xs: { span: 24, offset: 0 },
|
||||
sm: { span: 10, offset: 7 },
|
||||
},
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<Card
|
||||
className={styles.tabsCard}
|
||||
bordered={false}
|
||||
|
||||
onTabChange={this.onOperationTabChange}
|
||||
>
|
||||
<div>unimplement, waiting to do</div>
|
||||
</Card>
|
||||
</Fragment>
|
||||
<Form onSubmit={this.handleSearch} layout="inline">
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label="Pipeline 名称">
|
||||
{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() {
|
||||
let {pipeline, loading} = this.props;
|
||||
const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
|
||||
const parentMethods = {
|
||||
handleAdd: this.handleAdd,
|
||||
handleModalVisible: this.handleModalVisible,
|
||||
};
|
||||
const updateMethods = {
|
||||
handleUpdateModalVisible: this.handleUpdateModalVisible,
|
||||
handleUpdate: this.handleUpdate,
|
||||
};
|
||||
return (
|
||||
<PageHeaderWrapper>
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
<StandardTable
|
||||
selectedRows={selectedRows}
|
||||
loading={loading}
|
||||
data={pipeline.datalist}
|
||||
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}
|
||||
</PageHeaderWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
import { message } from 'antd';
|
||||
import { getPipelines, addPipeline, updatePipeline,deletePipeline } from '@/services/datamanagement';
|
||||
|
||||
export default {
|
||||
namespace: 'pipeline',
|
||||
|
||||
state: {
|
||||
datalist: {
|
||||
list:[],
|
||||
pagination:{
|
||||
pageSize: 5,
|
||||
}
|
||||
},
|
||||
},
|
||||
effects: {
|
||||
*fetch({payload}, {call, put}){
|
||||
let idata = yield call(getPipelines);
|
||||
yield put({
|
||||
type:"initdata",
|
||||
payload: idata,
|
||||
});
|
||||
},
|
||||
*add({payload}, {call, put}){
|
||||
const res = yield call(addPipeline, payload);
|
||||
if(res.message == "Ok") {
|
||||
yield put({
|
||||
type: 'addNew',
|
||||
payload: payload,
|
||||
});
|
||||
}
|
||||
},
|
||||
*update({payload}, {call, put}){
|
||||
const res = yield call(updatePipeline, payload);
|
||||
if(res.message == "Ok") {
|
||||
yield put({
|
||||
type: 'updateData',
|
||||
payload: payload,
|
||||
});
|
||||
}
|
||||
},
|
||||
*delete({payload}, {call, put}){
|
||||
const res = yield call(deletePipeline, payload);
|
||||
console.log(res);
|
||||
if(res.message == "Ok") {
|
||||
yield put({
|
||||
type: 'deleteData',
|
||||
payload: payload,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
reducers: {
|
||||
initdata(state, {payload: newdata}){
|
||||
return {
|
||||
...state,
|
||||
datalist: {
|
||||
...state.datalist,
|
||||
list: newdata,
|
||||
},
|
||||
};
|
||||
},
|
||||
addNew(state, {payload: newdata}){
|
||||
state.datalist.list.push(newdata);
|
||||
return state;
|
||||
},
|
||||
updateData(state, {payload: newdata}){
|
||||
let targetIdx = -1;
|
||||
state.datalist.list.forEach((p,i) => {
|
||||
if(p.name == newdata.name){
|
||||
targetIdx = i;
|
||||
}
|
||||
});
|
||||
targetIdx > -1 && (state.datalist.list[targetIdx] = newdata);
|
||||
return state;
|
||||
},
|
||||
deleteData(state, {payload: newdata}){
|
||||
let pipelineList = state.datalist.list;
|
||||
var keys = newdata.key || [];
|
||||
var hasDeleted = false;
|
||||
for(let i=0; i< keys.length; i++){
|
||||
let targetIdx = -1;
|
||||
pipelineList.forEach(function(p, j){
|
||||
if(keys[i] == p.name){
|
||||
targetIdx = j;
|
||||
}
|
||||
});
|
||||
if(targetIdx > -1) {
|
||||
pipelineList.splice(targetIdx, 1);
|
||||
hasDeleted = true;
|
||||
}
|
||||
}
|
||||
return state;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -9,4 +9,30 @@ export async function saveLogstashConfig(config){
|
|||
method: 'POST',
|
||||
body: config,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// pipeline
|
||||
export async function getPipelines(params){
|
||||
return request('/data/pipeline');
|
||||
}
|
||||
|
||||
export async function addPipeline(params){
|
||||
return request('/data/pipeline/add', {
|
||||
method: 'POST',
|
||||
body: params,
|
||||
});
|
||||
}
|
||||
|
||||
export async function updatePipeline(params){
|
||||
return request('/data/pipeline/update', {
|
||||
method: 'PUT',
|
||||
body: params,
|
||||
});
|
||||
}
|
||||
export async function deletePipeline(params){
|
||||
return request('/data/pipeline', {
|
||||
method: 'POST',
|
||||
body: params,
|
||||
});
|
||||
}
|
||||
//end pipeline
|
||||
Loading…
Reference in New Issue