#search manage add group
This commit is contained in:
chenhua
parent
0425819028
commit
4f1d48f89b
|
|
@ -132,25 +132,115 @@ export default [
|
||||||
icon: 'search',
|
icon: 'search',
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/search/template',
|
path: '/search/template',
|
||||||
name: 'template',
|
name: 'template',
|
||||||
component: './SearchManage/SearchTemplate',
|
component: './SearchManage/template/Template',
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/search/template',
|
||||||
|
redirect: '/search/template/summary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/template/summary',
|
||||||
|
component: './SearchManage/template/Summary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/template/template',
|
||||||
|
component: './SearchManage/template/SearchTemplate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/template/param',
|
||||||
|
component: './SearchManage/template/Param',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/template/history',
|
||||||
|
component: './SearchManage/template/History',
|
||||||
|
},
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
path: '/search/alias',
|
path: '/search/alias',
|
||||||
name: 'alias',
|
name: 'alias',
|
||||||
component: './SearchManage/AliasManage',
|
component: './SearchManage/alias/Alias',
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/search/alias',
|
||||||
|
redirect: '/search/alias/index',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/alias/index',
|
||||||
|
component: './SearchManage/alias/AliasManage',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/alias/param',
|
||||||
|
component: './SearchManage/alias/Param',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/alias/rule',
|
||||||
|
component: './SearchManage/alias/Rule',
|
||||||
|
}
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
path: '/search/dict',
|
path: '/search/dict',
|
||||||
name: 'dict',
|
name: 'dict',
|
||||||
component: './SearchManage/DictManage',
|
component: './SearchManage/dict/Dict',
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/search/dict',
|
||||||
|
redirect: '/search/dict/professional',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/dict/professional',
|
||||||
|
component: './SearchManage/dict/Professional',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/dict/common',
|
||||||
|
component: './SearchManage/dict/Common',
|
||||||
|
}
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
path: '/search/analyzer',
|
path: '/search/analyzer',
|
||||||
name: 'analyzer',
|
name: 'analyzer',
|
||||||
component: './SearchManage/AnalyzerManage',
|
component: './SearchManage/analyzer/Analyzer',
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/search/analyzer',
|
||||||
|
redirect: '/search/analyzer/manage',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/analyzer/manage',
|
||||||
|
component: './SearchManage/analyzer/Manage',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/analyzer/test',
|
||||||
|
component: './SearchManage/analyzer/AnalyzerTest',
|
||||||
|
}
|
||||||
|
]
|
||||||
}, {
|
}, {
|
||||||
path: '/search/nlp',
|
path: '/search/nlp',
|
||||||
name: 'nlp',
|
name: 'nlp',
|
||||||
component: './SearchManage/NLPManage',
|
component: './SearchManage/nlp/NLP',
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/search/nlp',
|
||||||
|
redirect: '/search/nlp/query',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/nlp/query',
|
||||||
|
component: './SearchManage/nlp/Query',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/nlp/intention',
|
||||||
|
component: './SearchManage/nlp/Intention',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/nlp/knowledge',
|
||||||
|
component: './SearchManage/nlp/Knowledge',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search/nlp/text',
|
||||||
|
component: './SearchManage/nlp/Text',
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,675 +0,0 @@
|
||||||
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 './AnalyzerManage.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;
|
|
||||||
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 AnalyzerManage extends PureComponent {
|
|
||||||
state = {
|
|
||||||
modalVisible: false,
|
|
||||||
updateModalVisible: false,
|
|
||||||
expandForm: false,
|
|
||||||
selectedRows: [],
|
|
||||||
formValues: {},
|
|
||||||
stepFormValues: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
if (sorter.field) {
|
|
||||||
params.sorter = `${sorter.field}_${sorter.order}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({
|
|
||||||
type: 'rule/fetch',
|
|
||||||
payload: params,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleFormReset = () => {
|
|
||||||
const { form, dispatch } = this.props;
|
|
||||||
form.resetFields();
|
|
||||||
this.setState({
|
|
||||||
formValues: {},
|
|
||||||
});
|
|
||||||
dispatch({
|
|
||||||
type: 'rule/fetch',
|
|
||||||
payload: {},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
toggleForm = () => {
|
|
||||||
const { expandForm } = this.state;
|
|
||||||
this.setState({
|
|
||||||
expandForm: !expandForm,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleMenuClick = e => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
const { selectedRows } = this.state;
|
|
||||||
|
|
||||||
if (!selectedRows) return;
|
|
||||||
switch (e.key) {
|
|
||||||
case 'remove':
|
|
||||||
dispatch({
|
|
||||||
type: 'rule/remove',
|
|
||||||
payload: {
|
|
||||||
key: selectedRows.map(row => row.key),
|
|
||||||
},
|
|
||||||
callback: () => {
|
|
||||||
this.setState({
|
|
||||||
selectedRows: [],
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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}>
|
|
||||||
<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">
|
|
||||||
查询
|
|
||||||
</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('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>
|
|
||||||
<Col md={8} sm={24}>
|
|
||||||
<FormItem label="使用状态">
|
|
||||||
{getFieldDecorator('status3')(
|
|
||||||
<Select placeholder="请选择" style={{ width: '100%' }}>
|
|
||||||
<Option value="0">关闭</Option>
|
|
||||||
<Option value="1">运行中</Option>
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
</FormItem>
|
|
||||||
</Col>
|
|
||||||
<Col md={8} sm={24}>
|
|
||||||
<FormItem label="使用状态">
|
|
||||||
{getFieldDecorator('status4')(
|
|
||||||
<Select placeholder="请选择" style={{ width: '100%' }}>
|
|
||||||
<Option value="0">关闭</Option>
|
|
||||||
<Option value="1">运行中</Option>
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
</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();
|
|
||||||
}
|
|
||||||
|
|
||||||
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 (
|
|
||||||
<PageHeaderWrapper title="分词管理">
|
|
||||||
<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>批量操作</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}
|
|
||||||
</PageHeaderWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AnalyzerManage;
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,675 +0,0 @@
|
||||||
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 './DictManage.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;
|
|
||||||
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 DictManage extends PureComponent {
|
|
||||||
state = {
|
|
||||||
modalVisible: false,
|
|
||||||
updateModalVisible: false,
|
|
||||||
expandForm: false,
|
|
||||||
selectedRows: [],
|
|
||||||
formValues: {},
|
|
||||||
stepFormValues: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
if (sorter.field) {
|
|
||||||
params.sorter = `${sorter.field}_${sorter.order}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({
|
|
||||||
type: 'rule/fetch',
|
|
||||||
payload: params,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleFormReset = () => {
|
|
||||||
const { form, dispatch } = this.props;
|
|
||||||
form.resetFields();
|
|
||||||
this.setState({
|
|
||||||
formValues: {},
|
|
||||||
});
|
|
||||||
dispatch({
|
|
||||||
type: 'rule/fetch',
|
|
||||||
payload: {},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
toggleForm = () => {
|
|
||||||
const { expandForm } = this.state;
|
|
||||||
this.setState({
|
|
||||||
expandForm: !expandForm,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleMenuClick = e => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
const { selectedRows } = this.state;
|
|
||||||
|
|
||||||
if (!selectedRows) return;
|
|
||||||
switch (e.key) {
|
|
||||||
case 'remove':
|
|
||||||
dispatch({
|
|
||||||
type: 'rule/remove',
|
|
||||||
payload: {
|
|
||||||
key: selectedRows.map(row => row.key),
|
|
||||||
},
|
|
||||||
callback: () => {
|
|
||||||
this.setState({
|
|
||||||
selectedRows: [],
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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}>
|
|
||||||
<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">
|
|
||||||
查询
|
|
||||||
</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('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>
|
|
||||||
<Col md={8} sm={24}>
|
|
||||||
<FormItem label="使用状态">
|
|
||||||
{getFieldDecorator('status3')(
|
|
||||||
<Select placeholder="请选择" style={{ width: '100%' }}>
|
|
||||||
<Option value="0">关闭</Option>
|
|
||||||
<Option value="1">运行中</Option>
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
</FormItem>
|
|
||||||
</Col>
|
|
||||||
<Col md={8} sm={24}>
|
|
||||||
<FormItem label="使用状态">
|
|
||||||
{getFieldDecorator('status4')(
|
|
||||||
<Select placeholder="请选择" style={{ width: '100%' }}>
|
|
||||||
<Option value="0">关闭</Option>
|
|
||||||
<Option value="1">运行中</Option>
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
</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();
|
|
||||||
}
|
|
||||||
|
|
||||||
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 (
|
|
||||||
<PageHeaderWrapper title="词库管理">
|
|
||||||
<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>批量操作</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}
|
|
||||||
</PageHeaderWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DictManage;
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,675 +0,0 @@
|
||||||
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 './NLPManage.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;
|
|
||||||
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 NLPManage extends PureComponent {
|
|
||||||
state = {
|
|
||||||
modalVisible: false,
|
|
||||||
updateModalVisible: false,
|
|
||||||
expandForm: false,
|
|
||||||
selectedRows: [],
|
|
||||||
formValues: {},
|
|
||||||
stepFormValues: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
if (sorter.field) {
|
|
||||||
params.sorter = `${sorter.field}_${sorter.order}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({
|
|
||||||
type: 'rule/fetch',
|
|
||||||
payload: params,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleFormReset = () => {
|
|
||||||
const { form, dispatch } = this.props;
|
|
||||||
form.resetFields();
|
|
||||||
this.setState({
|
|
||||||
formValues: {},
|
|
||||||
});
|
|
||||||
dispatch({
|
|
||||||
type: 'rule/fetch',
|
|
||||||
payload: {},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
toggleForm = () => {
|
|
||||||
const { expandForm } = this.state;
|
|
||||||
this.setState({
|
|
||||||
expandForm: !expandForm,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleMenuClick = e => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
const { selectedRows } = this.state;
|
|
||||||
|
|
||||||
if (!selectedRows) return;
|
|
||||||
switch (e.key) {
|
|
||||||
case 'remove':
|
|
||||||
dispatch({
|
|
||||||
type: 'rule/remove',
|
|
||||||
payload: {
|
|
||||||
key: selectedRows.map(row => row.key),
|
|
||||||
},
|
|
||||||
callback: () => {
|
|
||||||
this.setState({
|
|
||||||
selectedRows: [],
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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}>
|
|
||||||
<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">
|
|
||||||
查询
|
|
||||||
</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('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>
|
|
||||||
<Col md={8} sm={24}>
|
|
||||||
<FormItem label="使用状态">
|
|
||||||
{getFieldDecorator('status3')(
|
|
||||||
<Select placeholder="请选择" style={{ width: '100%' }}>
|
|
||||||
<Option value="0">关闭</Option>
|
|
||||||
<Option value="1">运行中</Option>
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
</FormItem>
|
|
||||||
</Col>
|
|
||||||
<Col md={8} sm={24}>
|
|
||||||
<FormItem label="使用状态">
|
|
||||||
{getFieldDecorator('status4')(
|
|
||||||
<Select placeholder="请选择" style={{ width: '100%' }}>
|
|
||||||
<Option value="0">关闭</Option>
|
|
||||||
<Option value="1">运行中</Option>
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
</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();
|
|
||||||
}
|
|
||||||
|
|
||||||
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 (
|
|
||||||
<PageHeaderWrapper title="自然语言处理">
|
|
||||||
<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>批量操作</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}
|
|
||||||
</PageHeaderWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default NLPManage;
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -609,7 +609,7 @@ class AliasManage extends PureComponent {
|
||||||
handleUpdate: this.handleUpdate,
|
handleUpdate: this.handleUpdate,
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<PageHeaderWrapper title="别名管理">
|
<Fragment>
|
||||||
<Card bordered={false}>
|
<Card bordered={false}>
|
||||||
<div className={styles.tableList}>
|
<div className={styles.tableList}>
|
||||||
<div className={styles.tableListForm}>{this.renderForm()}</div>
|
<div className={styles.tableListForm}>{this.renderForm()}</div>
|
||||||
|
|
@ -643,7 +643,7 @@ class AliasManage extends PureComponent {
|
||||||
values={stepFormValues}
|
values={stepFormValues}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
</PageHeaderWrapper>
|
</Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import router from 'umi/router';
|
||||||
|
import { connect } from 'dva';
|
||||||
|
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
@connect()
|
||||||
|
class Indices extends Component {
|
||||||
|
handleTabChange = key => {
|
||||||
|
const { match } = this.props;
|
||||||
|
switch (key) {
|
||||||
|
case 'index':
|
||||||
|
router.push(`${match.url}/index`);
|
||||||
|
break;
|
||||||
|
case 'param':
|
||||||
|
router.push(`${match.url}/param`);
|
||||||
|
break;
|
||||||
|
case 'rule':
|
||||||
|
router.push(`${match.url}/rule`);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const tabList = [
|
||||||
|
{
|
||||||
|
key: 'index',
|
||||||
|
tab: '索引别名管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'param',
|
||||||
|
tab: '字段别名管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'rule',
|
||||||
|
tab: 'index pattern 对应规则',
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const { match, children, location } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageHeaderWrapper
|
||||||
|
tabList={tabList}
|
||||||
|
tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
|
||||||
|
onTabChange={this.handleTabChange}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</PageHeaderWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Indices;
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class param 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default param;
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class rule 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default rule;
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import router from 'umi/router';
|
||||||
|
import { connect } from 'dva';
|
||||||
|
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
@connect()
|
||||||
|
class Analyzer extends Component {
|
||||||
|
handleTabChange = key => {
|
||||||
|
const { match } = this.props;
|
||||||
|
switch (key) {
|
||||||
|
case 'manage':
|
||||||
|
router.push(`${match.url}/manage`);
|
||||||
|
break;
|
||||||
|
case 'test':
|
||||||
|
router.push(`${match.url}/test`);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const tabList = [
|
||||||
|
{
|
||||||
|
key: 'manage',
|
||||||
|
tab: '分词器管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'test',
|
||||||
|
tab: '分词器测试',
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const { match, children, location } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageHeaderWrapper
|
||||||
|
tabList={tabList}
|
||||||
|
tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
|
||||||
|
onTabChange={this.handleTabChange}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</PageHeaderWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Analyzer;
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AnalyzerTest;
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class Manage 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Manage;
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class Common 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Common;
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import router from 'umi/router';
|
||||||
|
import { connect } from 'dva';
|
||||||
|
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
@connect()
|
||||||
|
class Dict extends Component {
|
||||||
|
handleTabChange = key => {
|
||||||
|
const { match } = this.props;
|
||||||
|
switch (key) {
|
||||||
|
case 'professional':
|
||||||
|
router.push(`${match.url}/professional`);
|
||||||
|
break;
|
||||||
|
case 'common':
|
||||||
|
router.push(`${match.url}/common`);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const tabList = [
|
||||||
|
{
|
||||||
|
key: 'professional',
|
||||||
|
tab: '专业词典管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'common',
|
||||||
|
tab: '常用词管理',
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const { match, children, location } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageHeaderWrapper
|
||||||
|
tabList={tabList}
|
||||||
|
tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
|
||||||
|
onTabChange={this.handleTabChange}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</PageHeaderWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Dict;
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class Professional 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Professional;
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class Intention 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Intention;
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class Knowledge 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Knowledge;
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import router from 'umi/router';
|
||||||
|
import { connect } from 'dva';
|
||||||
|
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
@connect()
|
||||||
|
class NLP extends Component {
|
||||||
|
handleTabChange = key => {
|
||||||
|
const { match } = this.props;
|
||||||
|
switch (key) {
|
||||||
|
case 'query':
|
||||||
|
router.push(`${match.url}/query`);
|
||||||
|
break;
|
||||||
|
case 'intention':
|
||||||
|
router.push(`${match.url}/intention`);
|
||||||
|
break;
|
||||||
|
case 'knowledge':
|
||||||
|
router.push(`${match.url}/knowledge`);
|
||||||
|
break;
|
||||||
|
case 'text':
|
||||||
|
router.push(`${match.url}/text`);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const tabList = [
|
||||||
|
{
|
||||||
|
key: 'query',
|
||||||
|
tab: '查询语义识别',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'intention',
|
||||||
|
tab: '意图识别设置',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'knowledge',
|
||||||
|
tab: '知识图谱管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'text',
|
||||||
|
tab: '文本聚类管理',
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const { match, children, location } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageHeaderWrapper
|
||||||
|
tabList={tabList}
|
||||||
|
tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
|
||||||
|
onTabChange={this.handleTabChange}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</PageHeaderWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NLP;
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class Query 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Query;
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class Text 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Text;
|
||||||
|
|
@ -0,0 +1,285 @@
|
||||||
|
import React, { PureComponent } from 'react';
|
||||||
|
import { findDOMNode } from 'react-dom';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { connect } from 'dva';
|
||||||
|
import {
|
||||||
|
List,
|
||||||
|
Card,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Radio,
|
||||||
|
Input,
|
||||||
|
Progress,
|
||||||
|
Button,
|
||||||
|
Icon,
|
||||||
|
Dropdown,
|
||||||
|
Menu,
|
||||||
|
Avatar,
|
||||||
|
Modal,
|
||||||
|
Form,
|
||||||
|
DatePicker,
|
||||||
|
Select,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
import Result from '@/components/Result';
|
||||||
|
|
||||||
|
import styles from './History.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const RadioButton = Radio.Button;
|
||||||
|
const RadioGroup = Radio.Group;
|
||||||
|
const SelectOption = Select.Option;
|
||||||
|
const { Search, TextArea } = Input;
|
||||||
|
|
||||||
|
@connect(({ list, loading }) => ({
|
||||||
|
list,
|
||||||
|
loading: loading.models.list,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class History extends PureComponent {
|
||||||
|
state = { visible: false, done: false };
|
||||||
|
|
||||||
|
formLayout = {
|
||||||
|
labelCol: { span: 7 },
|
||||||
|
wrapperCol: { span: 13 },
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { dispatch } = this.props;
|
||||||
|
dispatch({
|
||||||
|
type: 'list/fetch',
|
||||||
|
payload: {
|
||||||
|
count: 5,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
showModal = () => {
|
||||||
|
this.setState({
|
||||||
|
visible: true,
|
||||||
|
current: undefined,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
showEditModal = item => {
|
||||||
|
this.setState({
|
||||||
|
visible: true,
|
||||||
|
current: item,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleDone = () => {
|
||||||
|
setTimeout(() => this.addBtn.blur(), 0);
|
||||||
|
this.setState({
|
||||||
|
done: false,
|
||||||
|
visible: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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;
|
||||||
|
this.setState({
|
||||||
|
done: true,
|
||||||
|
});
|
||||||
|
dispatch({
|
||||||
|
type: 'list/submit',
|
||||||
|
payload: { id, ...fieldsValue },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
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>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default History;
|
||||||
|
|
@ -0,0 +1,284 @@
|
||||||
|
import React, { PureComponent } from 'react';
|
||||||
|
import { findDOMNode } from 'react-dom';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { connect } from 'dva';
|
||||||
|
import {
|
||||||
|
List,
|
||||||
|
Card,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Radio,
|
||||||
|
Input,
|
||||||
|
Progress,
|
||||||
|
Button,
|
||||||
|
Icon,
|
||||||
|
Dropdown,
|
||||||
|
Menu,
|
||||||
|
Avatar,
|
||||||
|
Modal,
|
||||||
|
Form,
|
||||||
|
DatePicker,
|
||||||
|
Select,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
import Result from '@/components/Result';
|
||||||
|
|
||||||
|
import styles from './Param.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const RadioButton = Radio.Button;
|
||||||
|
const RadioGroup = Radio.Group;
|
||||||
|
const SelectOption = Select.Option;
|
||||||
|
const { Search, TextArea } = Input;
|
||||||
|
|
||||||
|
@connect(({ list, loading }) => ({
|
||||||
|
list,
|
||||||
|
loading: loading.models.list,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class Param extends PureComponent {
|
||||||
|
state = { visible: false, done: false };
|
||||||
|
|
||||||
|
formLayout = {
|
||||||
|
labelCol: { span: 7 },
|
||||||
|
wrapperCol: { span: 13 },
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { dispatch } = this.props;
|
||||||
|
dispatch({
|
||||||
|
type: 'list/fetch',
|
||||||
|
payload: {
|
||||||
|
count: 5,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
showModal = () => {
|
||||||
|
this.setState({
|
||||||
|
visible: true,
|
||||||
|
current: undefined,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
showEditModal = item => {
|
||||||
|
this.setState({
|
||||||
|
visible: true,
|
||||||
|
current: item,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleDone = () => {
|
||||||
|
setTimeout(() => this.addBtn.blur(), 0);
|
||||||
|
this.setState({
|
||||||
|
done: false,
|
||||||
|
visible: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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;
|
||||||
|
this.setState({
|
||||||
|
done: true,
|
||||||
|
});
|
||||||
|
dispatch({
|
||||||
|
type: 'list/submit',
|
||||||
|
payload: { id, ...fieldsValue },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Param;
|
||||||
|
|
@ -0,0 +1,195 @@
|
||||||
|
@import '~antd/lib/style/themes/default.less';
|
||||||
|
@import '~@/utils/utils.less';
|
||||||
|
|
||||||
|
.standardList {
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.extraContentSearch {
|
||||||
|
margin-left: 16px;
|
||||||
|
width: 272px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
import React, { PureComponent, 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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from '../../List/TableList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class SearchTemplate 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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: [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 },
|
||||||
|
} = 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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SearchTemplate;
|
||||||
|
|
@ -24,7 +24,7 @@ import {
|
||||||
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
import Result from '@/components/Result';
|
import Result from '@/components/Result';
|
||||||
|
|
||||||
import styles from './SearchTemplate.less';
|
import styles from './Summary.less';
|
||||||
|
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
const RadioButton = Radio.Button;
|
const RadioButton = Radio.Button;
|
||||||
|
|
@ -37,7 +37,7 @@ const { Search, TextArea } = Input;
|
||||||
loading: loading.models.list,
|
loading: loading.models.list,
|
||||||
}))
|
}))
|
||||||
@Form.create()
|
@Form.create()
|
||||||
class SearchTemplate extends PureComponent {
|
class Summary extends PureComponent {
|
||||||
state = { visible: false, done: false };
|
state = { visible: false, done: false };
|
||||||
|
|
||||||
formLayout = {
|
formLayout = {
|
||||||
|
|
@ -224,18 +224,17 @@ class SearchTemplate extends PureComponent {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<PageHeaderWrapper>
|
|
||||||
<div className={styles.standardList}>
|
<div className={styles.standardList}>
|
||||||
<Card bordered={false}>
|
<Card bordered={false}>
|
||||||
<Row>
|
<Row>
|
||||||
<Col sm={8} xs={24}>
|
<Col sm={8} xs={24}>
|
||||||
<Info title="模板" value="8个模板" bordered />
|
<Info title="搜索次数" value="80000次" bordered />
|
||||||
</Col>
|
</Col>
|
||||||
<Col sm={8} xs={24}>
|
<Col sm={8} xs={24}>
|
||||||
<Info title="本周新增模板" value="2个模板" bordered />
|
<Info title="来源统计" value="100个" bordered />
|
||||||
</Col>
|
</Col>
|
||||||
<Col sm={8} xs={24}>
|
<Col sm={8} xs={24}>
|
||||||
<Info title="本周通过模板创建的索引" value="24个索引" />
|
<Info title="新词、热词 " value="100个" />
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
@ -292,20 +291,8 @@ class SearchTemplate extends PureComponent {
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
<Modal
|
|
||||||
title={done ? null : `模板${current ? '编辑' : '添加'}`}
|
|
||||||
className={styles.standardListForm}
|
|
||||||
width={640}
|
|
||||||
bodyStyle={done ? { padding: '72px 0' } : { padding: '28px 0 0' }}
|
|
||||||
destroyOnClose
|
|
||||||
visible={visible}
|
|
||||||
{...modalFooter}
|
|
||||||
>
|
|
||||||
{getModalContent()}
|
|
||||||
</Modal>
|
|
||||||
</PageHeaderWrapper>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SearchTemplate;
|
export default Summary;
|
||||||
|
|
@ -0,0 +1,195 @@
|
||||||
|
@import '~antd/lib/style/themes/default.less';
|
||||||
|
@import '~@/utils/utils.less';
|
||||||
|
|
||||||
|
.standardList {
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.extraContentSearch {
|
||||||
|
margin-left: 16px;
|
||||||
|
width: 272px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import router from 'umi/router';
|
||||||
|
import { connect } from 'dva';
|
||||||
|
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
@connect()
|
||||||
|
class Teamplate extends Component {
|
||||||
|
handleTabChange = key => {
|
||||||
|
const { match } = this.props;
|
||||||
|
switch (key) {
|
||||||
|
case 'summary':
|
||||||
|
router.push(`${match.url}/summary`);
|
||||||
|
break;
|
||||||
|
case 'template':
|
||||||
|
router.push(`${match.url}/template`);
|
||||||
|
break;
|
||||||
|
case 'param':
|
||||||
|
router.push(`${match.url}/param`);
|
||||||
|
break;
|
||||||
|
case 'history':
|
||||||
|
router.push(`${match.url}/history`);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const tabList = [
|
||||||
|
{
|
||||||
|
key: 'summary',
|
||||||
|
tab: '搜索概览',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'template',
|
||||||
|
tab: '模板设置',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'param',
|
||||||
|
tab: '参数管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'history',
|
||||||
|
tab: '历史管理',
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const { match, children, location } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageHeaderWrapper
|
||||||
|
tabList={tabList}
|
||||||
|
tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
|
||||||
|
onTabChange={this.handleTabChange}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</PageHeaderWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Teamplate;
|
||||||
Loading…
Reference in New Issue