init data management other ui page
This commit is contained in:
silenceqi
parent
6595fe1b19
commit
f948218595
|
|
@ -23,8 +23,8 @@ export default [
|
|||
path: '/platform',
|
||||
name: 'platform',
|
||||
icon: 'dashboard',
|
||||
component: './Dashboard/Analysis',
|
||||
routes: [
|
||||
// { path: '/', redirect: '/platform/gateway' },
|
||||
{
|
||||
path: '/platform/gateway',
|
||||
name: 'gateway',
|
||||
|
|
@ -72,41 +72,54 @@ export default [
|
|||
},{
|
||||
path: '/data/indices',
|
||||
name: 'index',
|
||||
// component: './DataManagement/Indices',
|
||||
// routes: [
|
||||
// {
|
||||
// path: '/data/indices',
|
||||
// redirect: '/data/indices/summary',
|
||||
// },
|
||||
// {
|
||||
// path: '/data/indices/summary',
|
||||
// component: './DataManagement/IndexSummary',
|
||||
// },
|
||||
// {
|
||||
// path: '/data/indices/doc',
|
||||
// component: './DataManagement/Document',
|
||||
// },
|
||||
// {
|
||||
// path: '/data/indices/template',
|
||||
// component: './DataManagement/IndexTemplate',
|
||||
// },
|
||||
// {
|
||||
// path: '/data/indices/ilm',
|
||||
// component: './DataManagement/IndexLifeCycle',
|
||||
// },
|
||||
// ]
|
||||
component: './DataManagement/Indices',
|
||||
routes: [
|
||||
{
|
||||
path: '/data/indices',
|
||||
redirect: '/data/indices/summary',
|
||||
},
|
||||
{
|
||||
path: '/data/indices/summary',
|
||||
component: './DataManagement/IndexSummary',
|
||||
},
|
||||
{
|
||||
path: '/data/indices/doc',
|
||||
component: './DataManagement/Document',
|
||||
},
|
||||
{
|
||||
path: '/data/indices/template',
|
||||
component: './DataManagement/IndexTemplate',
|
||||
},
|
||||
{
|
||||
path: '/data/indices/ilm',
|
||||
component: './DataManagement/IndexLifeCycle',
|
||||
},
|
||||
]
|
||||
}, {
|
||||
path: '/list/table-list',
|
||||
path: '/data/backup',
|
||||
name: 'snapshot',
|
||||
component: './List/TableList',
|
||||
component: './DataManagement/Backup',
|
||||
routes: [
|
||||
{
|
||||
path: '/data/backup',
|
||||
redirect: '/data/backup/bakandrestore',
|
||||
},
|
||||
{
|
||||
path: '/data/backup/bakandrestore',
|
||||
component: './DataManagement/backup/BakAndRestore',
|
||||
},{
|
||||
path: '/data/backup/bakcycle',
|
||||
component: './DataManagement/backup/BakCycle',
|
||||
}
|
||||
]
|
||||
}, {
|
||||
path: '/list/table-list',
|
||||
path: '/data/rebuild',
|
||||
name: 'rebuild',
|
||||
component: './List/TableList',
|
||||
component: './DataManagement/Rebuild',
|
||||
}, {
|
||||
path: '/list/table-list',
|
||||
path: '/data/import',
|
||||
name: 'export',
|
||||
component: './List/TableList',
|
||||
component: './DataManagement/Import',
|
||||
},
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 Backup extends Component {
|
||||
handleTabChange = key => {
|
||||
const { match } = this.props;
|
||||
switch (key) {
|
||||
case 'bakandrestore':
|
||||
router.push(`${match.url}/bakandrestore`);
|
||||
break;
|
||||
case 'bakcycle':
|
||||
router.push(`${match.url}/bakcycle`);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const tabList = [
|
||||
{
|
||||
key: 'bakandrestore',
|
||||
tab: '索引备份与还原',
|
||||
},
|
||||
{
|
||||
key: 'bakcycle',
|
||||
tab: '备份周期管理',
|
||||
}
|
||||
];
|
||||
|
||||
const { match, children, location } = this.props;
|
||||
|
||||
return (
|
||||
<PageHeaderWrapper
|
||||
tabList={tabList}
|
||||
tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
|
||||
onTabChange={this.handleTabChange}
|
||||
>
|
||||
{children}
|
||||
</PageHeaderWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Backup;
|
||||
|
|
@ -0,0 +1,376 @@
|
|||
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('index', {
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
style={{ minHeight: 24 }}
|
||||
placeholder="请输入"
|
||||
rows={9}
|
||||
/>)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
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('index', {
|
||||
initialValue: values.index,
|
||||
rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
|
||||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="索引设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
initialValue: values.processors,
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
style={{ minHeight: 24 }}
|
||||
placeholder="请输入"
|
||||
rows={9}
|
||||
/>)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
/* eslint react/no-multi-comp:0 */
|
||||
@connect(({ pipeline, loading }) => ({
|
||||
pipeline,
|
||||
loading: loading.models.pipeline,
|
||||
}))
|
||||
@Form.create()
|
||||
class Document extends PureComponent {
|
||||
state = {
|
||||
modalVisible: false,
|
||||
updateModalVisible: false,
|
||||
expandForm: false,
|
||||
selectedRows: [],
|
||||
formValues: {},
|
||||
updateFormValues: {},
|
||||
};
|
||||
datasource = `[{"health":"green","status":"open","index":"blogs_fixed","uuid":"Q6zngGf9QVaWqpV0lF-0nw","pri":"1","rep":"1","docs.count":"1594","docs.deleted":"594","store.size":"17.9mb","pri.store.size":"8.9mb"},{"health":"red","status":"open","index":"elastic_qa","uuid":"_qkVlQ5LRoOKffV-nFj8Uw","pri":"1","rep":"1","docs.count":null,"docs.deleted":null,"store.size":null,"pri.store.size":null},{"health":"green","status":"open","index":".kibana-event-log-7.9.0-000001","uuid":"fgTtyl62Tc6F1ddJfPwqHA","pri":"1","rep":"1","docs.count":"20","docs.deleted":"0","store.size":"25kb","pri.store.size":"12.5kb"},{"health":"green","status":"open","index":"blogs","uuid":"Mb2n4wnNQSKqSToI_QO0Yg","pri":"1","rep":"1","docs.count":"1594","docs.deleted":"0","store.size":"11mb","pri.store.size":"5.5mb"},{"health":"green","status":"open","index":".kibana-event-log-7.9.0-000002","uuid":"8GpbwnDXR2KJUsw6srLnWw","pri":"1","rep":"1","docs.count":"9","docs.deleted":"0","store.size":"96.9kb","pri.store.size":"48.4kb"},{"health":"green","status":"open","index":".apm-agent-configuration","uuid":"vIaV9k2VS-W48oUOe2xNWA","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":"logs_server1","uuid":"u56jv2AyR2KOkruOfxIAnA","pri":"1","rep":"1","docs.count":"5386","docs.deleted":"0","store.size":"5.1mb","pri.store.size":"2.5mb"},{"health":"green","status":"open","index":".kibana_1","uuid":"dBCrfVblRPGVlYAIlP_Duw","pri":"1","rep":"1","docs.count":"3187","docs.deleted":"50","store.size":"24.8mb","pri.store.size":"12.4mb"},{"health":"green","status":"open","index":".tasks","uuid":"3RafayGeSNiqglO2BHof9Q","pri":"1","rep":"1","docs.count":"3","docs.deleted":"0","store.size":"39.9kb","pri.store.size":"19.9kb"},{"health":"green","status":"open","index":"filebeat-7.9.0-elastic_qa","uuid":"tktSYU14S3CrsrJb0ybpSQ","pri":"1","rep":"1","docs.count":"3009880","docs.deleted":"0","store.size":"1.6gb","pri.store.size":"850.1mb"},{"health":"green","status":"open","index":"analysis_test","uuid":"6ZHEAW1ST_qfg7mo4Bva4w","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":".apm-custom-link","uuid":"Y4N2TeVERrGacEGwY-NPAQ","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":"kibana_sample_data_ecommerce","uuid":"4FIWJKhGSr6bE72R0xEQyA","pri":"1","rep":"1","docs.count":"4675","docs.deleted":"0","store.size":"9.2mb","pri.store.size":"4.6mb"},{"health":"green","status":"open","index":".kibana_task_manager_1","uuid":"9afyndU_Q26oqOiEIoqRJw","pri":"1","rep":"1","docs.count":"6","docs.deleted":"2","store.size":"378.8kb","pri.store.size":"12.5kb"},{"health":"green","status":"open","index":".async-search","uuid":"2VbJgnN7SsqC-DWN64yXUQ","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"3.9kb","pri.store.size":"3.7kb"}]`;
|
||||
|
||||
columns = [
|
||||
{
|
||||
title: '索引名称',
|
||||
dataIndex: 'index',
|
||||
},
|
||||
{
|
||||
title: '文档数',
|
||||
dataIndex: 'docs.count',
|
||||
},
|
||||
{
|
||||
title: '主分片数',
|
||||
dataIndex: 'pri'
|
||||
},
|
||||
{
|
||||
title: '从分片数',
|
||||
dataIndex: 'rep'
|
||||
},
|
||||
{
|
||||
title: '存储大小',
|
||||
dataIndex: 'store.size'
|
||||
},
|
||||
{
|
||||
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>
|
||||
<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 Document;
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
import React, { Component,Fragment } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import { Card,Form,Input, Select,Button,message,Upload, Icon } from 'antd';
|
||||
const { Option } = Select;
|
||||
import { formatMessage, FormattedMessage } from 'umi/locale';
|
||||
import DescriptionList from '@/components/DescriptionList';
|
||||
import styles from '../profile/AdvancedProfile.less';
|
||||
const { Description } = DescriptionList;
|
||||
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||
const FormItem = Form.Item;
|
||||
const { TextArea } = Input;
|
||||
const { Dragger } = Upload;
|
||||
const operationTabList = [
|
||||
{
|
||||
key: 'tab1',
|
||||
tab: 'API',
|
||||
},
|
||||
{
|
||||
key: 'tab2',
|
||||
tab: '文件上传',
|
||||
}
|
||||
];
|
||||
|
||||
@connect(({logstash,loading }) => ({
|
||||
data: logstash.logstash,
|
||||
loading: loading.models.logstash,
|
||||
submitting: loading.effects['logstash/submitLogstashConfig'],
|
||||
}))
|
||||
|
||||
@Form.create()
|
||||
class Import extends Component {
|
||||
state = {
|
||||
operationkey: 'tab1',
|
||||
};
|
||||
componentDidMount() {
|
||||
// message.loading('数据加载中..', 'initdata');
|
||||
// const { dispatch } = this.props;
|
||||
// dispatch({
|
||||
// type: 'logstash/queryInitialLogstashConfig',
|
||||
// });
|
||||
}
|
||||
onOperationTabChange = key => {
|
||||
this.setState({ operationkey: key });
|
||||
};
|
||||
handleSubmit = e => {
|
||||
const { dispatch, form } = this.props;
|
||||
e.preventDefault();
|
||||
form.validateFieldsAndScroll((err, values) => {
|
||||
if (!err) {
|
||||
let pdata = {
|
||||
jdbc:{
|
||||
type: values.dbtype,
|
||||
config: values.logstash.jdbcconf,
|
||||
},
|
||||
};
|
||||
if(e.target.name="kafka"){
|
||||
pdata={
|
||||
kafka:{
|
||||
config: values.logstash.kafkaconf,
|
||||
},
|
||||
}
|
||||
}
|
||||
dispatch({
|
||||
type: 'logstash/submitLogstashConfig',
|
||||
payload: pdata,
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { operationkey } = this.state;
|
||||
const { submitting, data, loading } = this.props;
|
||||
const {
|
||||
form: { getFieldDecorator, getFieldValue },
|
||||
} = this.props;
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 7 },
|
||||
md:{span:5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 12 },
|
||||
md: { span: 15 },
|
||||
},
|
||||
};
|
||||
const submitFormLayout = {
|
||||
wrapperCol: {
|
||||
xs: { span: 24, offset: 0 },
|
||||
sm: { span: 10, offset: 7 },
|
||||
},
|
||||
};
|
||||
const uploadProps = {
|
||||
name: 'file',
|
||||
multiple: true,
|
||||
action: '',
|
||||
onChange(info) {
|
||||
const { status } = info.file;
|
||||
if (status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (status === 'done') {
|
||||
message.success(`${info.file.name} file uploaded successfully.`);
|
||||
} else if (status === 'error') {
|
||||
message.error(`${info.file.name} file upload failed.`);
|
||||
}
|
||||
},
|
||||
};
|
||||
const contentList = {
|
||||
tab1: (
|
||||
<div>
|
||||
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
|
||||
<FormItem {...formItemLayout} label="选择索引">
|
||||
{getFieldDecorator('index', {
|
||||
initialValue: data.index,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择索引",
|
||||
},
|
||||
],
|
||||
})(
|
||||
<Select placeholder="Please select" style={{ width: 150 }}>
|
||||
<Option value="blogs">blogs</Option>
|
||||
<Option value="logs">logs</Option>
|
||||
<Option value="filebeat">filebeat</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem {...formItemLayout} label="_bulk数据">
|
||||
{getFieldDecorator('bulk', {
|
||||
initialValue: data.bulk,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入导入数据',
|
||||
},
|
||||
],
|
||||
})(
|
||||
<TextArea
|
||||
style={{ minHeight: 32, width: '100%' }}
|
||||
placeholder=''
|
||||
rows={12}
|
||||
/>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
|
||||
<Button type="primary" htmlType="submit" loading={submitting}>
|
||||
<FormattedMessage id="form.submit" />
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
),
|
||||
tab2: (
|
||||
<Dragger {...uploadProps}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox" />
|
||||
</p>
|
||||
<p className="ant-upload-text">点击或拖拽文件至该区域上传</p>
|
||||
<p className="ant-upload-hint">
|
||||
支持多文件上传
|
||||
</p>
|
||||
</Dragger>
|
||||
)
|
||||
};
|
||||
|
||||
return (
|
||||
<PageHeaderWrapper>
|
||||
<Card
|
||||
className={styles.tabsCard}
|
||||
bordered={false}
|
||||
tabList={operationTabList}
|
||||
onTabChange={this.onOperationTabChange}
|
||||
>
|
||||
{contentList[operationkey]}
|
||||
</Card>
|
||||
</PageHeaderWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Import;
|
||||
|
|
@ -0,0 +1,373 @@
|
|||
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 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('policy', {
|
||||
initialValue: values.policy,
|
||||
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 IndexLifeCycle extends PureComponent {
|
||||
state = {
|
||||
modalVisible: false,
|
||||
updateModalVisible: false,
|
||||
expandForm: false,
|
||||
selectedRows: [],
|
||||
formValues: {},
|
||||
updateFormValues: {},
|
||||
};
|
||||
datasource = `{"ilm-history-ilm-policy":{"version":1,"modified_date":"2020-08-28T13:19:39.550Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}},"delete":{"min_age":"90d","actions":{"delete":{"delete_searchable_snapshot":true}}}}}},"watch-history-ilm-policy":{"version":1,"modified_date":"2020-08-28T13:19:39.460Z","policy":{"phases":{"delete":{"min_age":"7d","actions":{"delete":{"delete_searchable_snapshot":true}}}}}},"kibana-event-log-policy":{"version":1,"modified_date":"2020-08-28T13:43:28.035Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}},"delete":{"min_age":"90d","actions":{"delete":{"delete_searchable_snapshot":true}}}}}},"metrics":{"version":1,"modified_date":"2020-08-28T13:19:39.367Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}}}}},"ml-size-based-ilm-policy":{"version":1,"modified_date":"2020-08-28T13:19:39.166Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb"}}}}}},"filebeat":{"version":1,"modified_date":"2020-08-29T10:49:38.774Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}}}}},"logs":{"version":1,"modified_date":"2020-08-28T13:19:39.289Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}}}}},"slm-history-ilm-policy":{"version":1,"modified_date":"2020-08-28T13:19:39.637Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}},"delete":{"min_age":"90d","actions":{"delete":{"delete_searchable_snapshot":true}}}}}}}`;
|
||||
parseData = ()=>{
|
||||
let ds = JSON.parse(this.datasource);
|
||||
var values = [];
|
||||
for(let key in ds){
|
||||
values.push({
|
||||
name: key,
|
||||
...ds[key],
|
||||
policy: JSON.stringify(ds[key].policy),
|
||||
});
|
||||
}
|
||||
return values;
|
||||
}
|
||||
columns = [
|
||||
{
|
||||
title: '策略名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '修改日期',
|
||||
dataIndex: 'modified_date',
|
||||
},
|
||||
{
|
||||
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: this.parseData(),
|
||||
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 IndexLifeCycle;
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
import React, { Component,Fragment,useState, useEffect } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import { Card, Select,Button,Table,Row,Col } from 'antd';
|
||||
import { formatMessage, FormattedMessage } from 'umi/locale';
|
||||
import DescriptionList from '@/components/DescriptionList';
|
||||
const { Description } = DescriptionList;
|
||||
|
||||
import { Pie,Line } from '@ant-design/charts';
|
||||
|
||||
const piedata =[
|
||||
{
|
||||
health: 'green',
|
||||
value: 27,
|
||||
},
|
||||
{
|
||||
health: 'yellow',
|
||||
value: 25,
|
||||
},
|
||||
{
|
||||
health: 'red',
|
||||
value: 18,
|
||||
}
|
||||
];
|
||||
const config = {
|
||||
appendPadding: 10,
|
||||
data: piedata,
|
||||
angleField: 'value',
|
||||
colorField: 'health',
|
||||
color: (field) => {
|
||||
return field.health;
|
||||
},
|
||||
height: 300,
|
||||
radius: 1,
|
||||
innerRadius: 0.56,
|
||||
label: {
|
||||
type: 'inner',
|
||||
offset: -25,
|
||||
autoRotate: false,
|
||||
content: '{value}',
|
||||
style: {
|
||||
fill: '#333',
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1,
|
||||
fontSize: 24,
|
||||
},
|
||||
},
|
||||
interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
|
||||
statistic: {
|
||||
title: {
|
||||
offsetY: -20,
|
||||
style: { fontSize: 44 },
|
||||
formatter: function formatter(datum) {
|
||||
return datum ? datum.type : '总计';
|
||||
},
|
||||
},
|
||||
content: {
|
||||
offsetY: 30,
|
||||
style: { fontSize: 44 },
|
||||
formatter: function(datum, data) {
|
||||
return datum
|
||||
? ' '.concat(datum.value)
|
||||
: ' '.concat(
|
||||
data.reduce(function (r, d) {
|
||||
return r + d.value;
|
||||
}, 0),
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const shardData =[
|
||||
{
|
||||
shard: 'pri',
|
||||
value: 27,
|
||||
},
|
||||
{
|
||||
shard: 'rep',
|
||||
value: 54,
|
||||
}
|
||||
];
|
||||
const shardConfig = {
|
||||
appendPadding: 10,
|
||||
data: shardData,
|
||||
angleField: 'value',
|
||||
colorField: 'shard',
|
||||
height: 300,
|
||||
radius: 1,
|
||||
innerRadius: 0.56,
|
||||
label: {
|
||||
type: 'inner',
|
||||
offset: -25,
|
||||
autoRotate: false,
|
||||
content: '{value}',
|
||||
style: {
|
||||
fill: '#333',
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1,
|
||||
fontSize: 24,
|
||||
},
|
||||
},
|
||||
interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
|
||||
statistic: {
|
||||
title: {
|
||||
offsetY: -20,
|
||||
style: { fontSize: 44 },
|
||||
formatter: function formatter(datum) {
|
||||
return datum ? datum.type : '总计';
|
||||
},
|
||||
},
|
||||
content: {
|
||||
offsetY: 30,
|
||||
style: { fontSize: 44 },
|
||||
formatter: function(datum, data) {
|
||||
return datum
|
||||
? ' '.concat(datum.value)
|
||||
: ' '.concat(
|
||||
data.reduce(function (r, d) {
|
||||
return r + d.value;
|
||||
}, 0),
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const datasource = `[{"health":"green","status":"open","index":"blogs_fixed","uuid":"Q6zngGf9QVaWqpV0lF-0nw","pri":"1","rep":"1","docs.count":"1594","docs.deleted":"594","store.size":"17.9mb","pri.store.size":"8.9mb"},{"health":"red","status":"open","index":"elastic_qa","uuid":"_qkVlQ5LRoOKffV-nFj8Uw","pri":"1","rep":"1","docs.count":null,"docs.deleted":null,"store.size":null,"pri.store.size":null},{"health":"green","status":"open","index":".kibana-event-log-7.9.0-000001","uuid":"fgTtyl62Tc6F1ddJfPwqHA","pri":"1","rep":"1","docs.count":"20","docs.deleted":"0","store.size":"25kb","pri.store.size":"12.5kb"},{"health":"green","status":"open","index":"blogs","uuid":"Mb2n4wnNQSKqSToI_QO0Yg","pri":"1","rep":"1","docs.count":"1594","docs.deleted":"0","store.size":"11mb","pri.store.size":"5.5mb"},{"health":"green","status":"open","index":".kibana-event-log-7.9.0-000002","uuid":"8GpbwnDXR2KJUsw6srLnWw","pri":"1","rep":"1","docs.count":"9","docs.deleted":"0","store.size":"96.9kb","pri.store.size":"48.4kb"},{"health":"green","status":"open","index":".apm-agent-configuration","uuid":"vIaV9k2VS-W48oUOe2xNWA","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":"logs_server1","uuid":"u56jv2AyR2KOkruOfxIAnA","pri":"1","rep":"1","docs.count":"5386","docs.deleted":"0","store.size":"5.1mb","pri.store.size":"2.5mb"},{"health":"green","status":"open","index":".kibana_1","uuid":"dBCrfVblRPGVlYAIlP_Duw","pri":"1","rep":"1","docs.count":"3187","docs.deleted":"50","store.size":"24.8mb","pri.store.size":"12.4mb"},{"health":"green","status":"open","index":".tasks","uuid":"3RafayGeSNiqglO2BHof9Q","pri":"1","rep":"1","docs.count":"3","docs.deleted":"0","store.size":"39.9kb","pri.store.size":"19.9kb"},{"health":"green","status":"open","index":"filebeat-7.9.0-elastic_qa","uuid":"tktSYU14S3CrsrJb0ybpSQ","pri":"1","rep":"1","docs.count":"3009880","docs.deleted":"0","store.size":"1.6gb","pri.store.size":"850.1mb"},{"health":"green","status":"open","index":"analysis_test","uuid":"6ZHEAW1ST_qfg7mo4Bva4w","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":".apm-custom-link","uuid":"Y4N2TeVERrGacEGwY-NPAQ","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":"kibana_sample_data_ecommerce","uuid":"4FIWJKhGSr6bE72R0xEQyA","pri":"1","rep":"1","docs.count":"4675","docs.deleted":"0","store.size":"9.2mb","pri.store.size":"4.6mb"},{"health":"green","status":"open","index":".kibana_task_manager_1","uuid":"9afyndU_Q26oqOiEIoqRJw","pri":"1","rep":"1","docs.count":"6","docs.deleted":"2","store.size":"378.8kb","pri.store.size":"12.5kb"},{"health":"green","status":"open","index":".async-search","uuid":"2VbJgnN7SsqC-DWN64yXUQ","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"3.9kb","pri.store.size":"3.7kb"}]`;
|
||||
const columns = [
|
||||
{
|
||||
title: '索引名称',
|
||||
dataIndex: 'index',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'UUID',
|
||||
dataIndex: 'uuid',
|
||||
key: 'uuid',
|
||||
},
|
||||
{
|
||||
title: '文档数',
|
||||
dataIndex: 'docs.count',
|
||||
key: 'docs',
|
||||
},
|
||||
{
|
||||
title: '主分片数',
|
||||
dataIndex: 'pri',
|
||||
key: 'pri',
|
||||
},
|
||||
{
|
||||
title: '从分片数',
|
||||
dataIndex: 'rep',
|
||||
key: 'rep',
|
||||
},
|
||||
{
|
||||
title: '存储大小',
|
||||
dataIndex: 'store.size',
|
||||
key: 'size',
|
||||
},
|
||||
];
|
||||
@connect(({ profile, loading }) => ({
|
||||
profile,
|
||||
loading: loading.effects['profile/fetchBasic'],
|
||||
}))
|
||||
|
||||
class IndexSummary extends Component {
|
||||
state = {
|
||||
};
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'profile/fetchBasic',
|
||||
});
|
||||
}
|
||||
render() {
|
||||
let data = JSON.parse(datasource);
|
||||
return (
|
||||
<Fragment>
|
||||
<Card>
|
||||
<div>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Pie {...config} />
|
||||
<div style={{textAlign:"center", marginBottom:"10px",fontWeight:"1em", fontSize:"16px"}}>健康状态</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Pie {...shardConfig} />
|
||||
<div style={{textAlign:"center", marginBottom:"10px",fontWeight:"1em", fontSize:"16px"}}>分片数</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<div>
|
||||
<Table columns={columns} dataSource={data} />
|
||||
</div>
|
||||
</Card>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default IndexSummary;
|
||||
|
|
@ -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 IndexTemplate 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 IndexTemplate;
|
||||
|
|
@ -34,8 +34,6 @@ 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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,222 @@
|
|||
import React, { Component } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||
import {Steps, Card, Form, Select, Input,Button, Divider,message,Spin} from 'antd';
|
||||
|
||||
const {Step} = Steps;
|
||||
const {Option} = Select;
|
||||
const {TextArea} = Input;
|
||||
|
||||
@Form.create()
|
||||
@connect()
|
||||
class Rebuild extends Component {
|
||||
state = {
|
||||
currentStep: 0,
|
||||
configData: {},
|
||||
}
|
||||
renderSteps(currentStep){
|
||||
var stepDom = '';
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 8 },
|
||||
sm: { span: 8 },
|
||||
md:{span:4},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 16 },
|
||||
sm: { span: 16 },
|
||||
md:{span:20},
|
||||
},
|
||||
};
|
||||
const tailFormItemLayout = {
|
||||
wrapperCol: {
|
||||
xs: {
|
||||
span: 24,
|
||||
offset: 0,
|
||||
},
|
||||
sm: {
|
||||
span: 16,
|
||||
offset: 8,
|
||||
},
|
||||
md:{
|
||||
span: 20,
|
||||
offset: 4,
|
||||
}
|
||||
},
|
||||
};
|
||||
switch(currentStep){
|
||||
case 0:
|
||||
stepDom = (
|
||||
<div style={{marginTop:20}}>
|
||||
<Form.Item {...formItemLayout} label="选择源索引">
|
||||
{getFieldDecorator('source_index', {
|
||||
initialValue: this.state.configData.source_index,
|
||||
rules: [{ required: true, message: '请选择要重建的索引' }],
|
||||
})(
|
||||
<Select
|
||||
showSearch
|
||||
style={{ width: 200 }}
|
||||
optionFilterProp="children"
|
||||
filterOption={(input, option) =>
|
||||
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
>
|
||||
<Option value="logs">logs</Option>
|
||||
<Option value="blogs">blogs</Option>
|
||||
<Option value="filebeat">filebeat</Option>
|
||||
</Select>,
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item {...formItemLayout} label="过滤条件">
|
||||
{getFieldDecorator('creterial', {
|
||||
initialValue: this.state.configData.creterial,
|
||||
rules: [
|
||||
{required: true, },
|
||||
],
|
||||
})(
|
||||
<TextArea
|
||||
style={{ width: '80%' }}
|
||||
rows={8}
|
||||
/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item {...tailFormItemLayout}>
|
||||
{this.renderFooter(currentStep)}
|
||||
</Form.Item>
|
||||
</div>
|
||||
)
|
||||
break;
|
||||
case 1:
|
||||
stepDom = (
|
||||
<div style={{marginTop:20}}>
|
||||
<Form.Item {...formItemLayout} label="目标索引名">
|
||||
{getFieldDecorator('target_index', {
|
||||
initialValue: this.state.configData.target_index,
|
||||
rules: [{ required: true, message: '请输入目标索引名称' }],
|
||||
})(
|
||||
<Input style={{width:200}} />
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item {...formItemLayout} label="目标索引设置">
|
||||
{getFieldDecorator('target_setting', {
|
||||
initialValue: this.state.configData.target_setting,
|
||||
rules: [
|
||||
{required: true, },
|
||||
],
|
||||
})(
|
||||
<TextArea
|
||||
style={{ width: '80%' }}
|
||||
rows={8}
|
||||
/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item {...tailFormItemLayout}>
|
||||
{this.renderFooter(currentStep)}
|
||||
</Form.Item>
|
||||
</div>
|
||||
)
|
||||
break;
|
||||
case 2:
|
||||
stepDom = (
|
||||
<div>
|
||||
<Spin tip="数据正在重建，请稍等...">
|
||||
<div style={{width:'100%', height: 200}}></div>
|
||||
</Spin>
|
||||
<div style={{textAlign:'center',}}>
|
||||
{this.renderFooter(currentStep)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return stepDom;
|
||||
}
|
||||
|
||||
handleNext(currentStep){
|
||||
const { form } = this.props;
|
||||
const { configData: oldValue } = this.state;
|
||||
var formValues = {};
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
switch(currentStep){
|
||||
case 0:
|
||||
break;
|
||||
case 1:
|
||||
|
||||
break;
|
||||
}
|
||||
formValues = fieldsValue;
|
||||
});
|
||||
this.setState({
|
||||
configData: {
|
||||
...oldValue,
|
||||
...formValues,
|
||||
},
|
||||
currentStep: currentStep+1
|
||||
},()=>{
|
||||
message.info(JSON.stringify(this.state));
|
||||
});
|
||||
}
|
||||
backward(currentStep){
|
||||
if(currentStep > 0){
|
||||
currentStep = currentStep - 1;
|
||||
}
|
||||
this.setState({
|
||||
currentStep: currentStep,
|
||||
});
|
||||
}
|
||||
renderFooter = currentStep => {
|
||||
if (currentStep === 1 || currentStep ==2) {
|
||||
return [
|
||||
<Button key="back" onClick={()=>this.backward(currentStep)}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" style={{margin:'auto 2em'}} onClick={() =>{}}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
下一步
|
||||
</Button>,
|
||||
];
|
||||
}
|
||||
if (currentStep === 3) {
|
||||
return [
|
||||
<Button key="back" style={{ float: 'left' }} onClick={()=>this.backward(currentStep)}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" style={{margin:'auto 2em'}} onClick={() => {}}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" onClick={() =>{}}>
|
||||
完成
|
||||
</Button>,
|
||||
];
|
||||
}
|
||||
return [
|
||||
<Button key="cancel" onClick={() => {}}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button style={{marginLeft:'2em'}} key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
|
||||
下一步
|
||||
</Button>,
|
||||
];
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<PageHeaderWrapper >
|
||||
<Card>
|
||||
<Steps current={this.state.currentStep}>
|
||||
<Step title="源索引信息" description="This is a description." />
|
||||
<Step title="目标索引信息" description="This is a description." />
|
||||
<Step title="数据重建中" subTitle="Left 00:00:08" description="This is a description." />
|
||||
<Step title="重建结果" description="This is a description." />
|
||||
</Steps>
|
||||
<Divider/>
|
||||
{this.renderSteps(this.state.currentStep)}
|
||||
</Card>
|
||||
</PageHeaderWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Rebuild;
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
import React, { Component,Fragment } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import { Card,Form,Input, Select,Button,message,Divider,Drawer,Descriptions } from 'antd';
|
||||
const { Option } = Select;
|
||||
import { formatMessage, FormattedMessage } from 'umi/locale';
|
||||
import StandardTable from '@/components/StandardTable';
|
||||
import styles from './BakAndRestore.less';
|
||||
const FormItem = Form.Item;
|
||||
const { TextArea } = Input;
|
||||
const operationTabList = [
|
||||
{
|
||||
key: 'tab1',
|
||||
tab: '快照',
|
||||
},
|
||||
{
|
||||
key: 'tab2',
|
||||
tab: '仓库',
|
||||
}
|
||||
];
|
||||
|
||||
@connect(({logstash,loading }) => ({
|
||||
data: logstash.logstash,
|
||||
loading: loading.models.logstash,
|
||||
submitting: loading.effects['logstash/submitLogstashConfig'],
|
||||
}))
|
||||
|
||||
@Form.create()
|
||||
class BakAndRestore extends Component {
|
||||
state = {
|
||||
operationkey: 'tab1',
|
||||
snapshotVisible: false,
|
||||
repVisible: false,
|
||||
};
|
||||
componentDidMount() {
|
||||
// message.loading('数据加载中..', 'initdata');
|
||||
// const { dispatch } = this.props;
|
||||
// dispatch({
|
||||
// type: 'logstash/queryInitialLogstashConfig',
|
||||
// });
|
||||
}
|
||||
onOperationTabChange = key => {
|
||||
this.setState({ operationkey: key });
|
||||
};
|
||||
|
||||
handleSnapshotClick(record){
|
||||
this.setState({
|
||||
snapshotVisible: true,
|
||||
});
|
||||
}
|
||||
|
||||
repoColumns = [
|
||||
{
|
||||
title: '仓库名',
|
||||
dataIndex: 'id',
|
||||
render: (text, record) => (<Fragment>
|
||||
<a onClick={() => this.handleSnapshotClick(record)}>{record.id}</a>
|
||||
</Fragment>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'dateCreated'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
{/* <a onClick={() => this.handleDownload(record)}>下载</a>
|
||||
<Divider type="vertical" /> */}
|
||||
<a onClick={() => {
|
||||
this.state.selectedRows.push(record);
|
||||
this.handleDeleteClick();
|
||||
}}>删除</a>
|
||||
</Fragment>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
repoData = [{
|
||||
id: "my_local_repo",
|
||||
dateCreated: "2020-10-09 20:30:23",
|
||||
}];
|
||||
|
||||
repoTable = () =>{
|
||||
var data = {
|
||||
list: this.repoData,
|
||||
pagination: {
|
||||
pageSize: 5,
|
||||
}
|
||||
};
|
||||
return (
|
||||
<StandardTable
|
||||
selectedRows={[]}
|
||||
data={data}
|
||||
columns={this.repoColumns}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
onCloseRep = () => {
|
||||
this.setState({
|
||||
repVisible: false,
|
||||
});
|
||||
};
|
||||
|
||||
snapshotColumns = [
|
||||
{
|
||||
title: '快照',
|
||||
dataIndex: 'id',
|
||||
render: (text, record) => (<Fragment>
|
||||
<a onClick={() => this.handleSnapshotClick(record)}>{record.id}</a>
|
||||
</Fragment>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '仓库',
|
||||
dataIndex: 'repository',
|
||||
},
|
||||
{
|
||||
title: '索引个数',
|
||||
dataIndex: 'indices'
|
||||
},
|
||||
{
|
||||
title: '分片个数',
|
||||
dataIndex: 'shards'
|
||||
},
|
||||
{
|
||||
title: '时长',
|
||||
dataIndex: 'duration'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'dateCreated'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
<a onClick={() => this.handleDownload(record)}>下载</a>
|
||||
<Divider type="vertical" />
|
||||
<a onClick={() => {
|
||||
this.state.selectedRows.push(record);
|
||||
this.handleDeleteClick();
|
||||
}}>删除</a>
|
||||
</Fragment>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
snapshotData = [{
|
||||
id: "cluster_snapshot_1",
|
||||
repository: "my_local_repo",
|
||||
indices: 5,
|
||||
shards: 5,
|
||||
duration: "2s",
|
||||
dateCreated: "2020-10-09 20:30:23",
|
||||
}];
|
||||
|
||||
snapshotTable = () =>{
|
||||
var data = {
|
||||
list: this.snapshotData,
|
||||
pagination: {
|
||||
pageSize: 5,
|
||||
}
|
||||
};
|
||||
return (
|
||||
<StandardTable
|
||||
selectedRows={[]}
|
||||
data={data}
|
||||
columns={this.snapshotColumns}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
onCloseSnapshot = () => {
|
||||
this.setState({
|
||||
snapshotVisible: false,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { operationkey } = this.state;
|
||||
const contentList = {
|
||||
tab1: (
|
||||
<div>
|
||||
{this.snapshotTable()}
|
||||
</div>
|
||||
),
|
||||
tab2: (
|
||||
<div>
|
||||
{this.repoTable()}
|
||||
<Drawer
|
||||
title="仓库"
|
||||
placement="right"
|
||||
width={720}
|
||||
onClose={this.onCloseRepo}
|
||||
visible={this.state.repoVisible}
|
||||
>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Drawer>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<Card
|
||||
className={styles.tabsCard}
|
||||
bordered={false}
|
||||
tabList={operationTabList}
|
||||
onTabChange={this.onOperationTabChange}
|
||||
>
|
||||
{contentList[operationkey]}
|
||||
</Card>
|
||||
<Drawer
|
||||
title="快照"
|
||||
placement="right"
|
||||
width={720}
|
||||
onClose={this.onCloseSnapshot}
|
||||
className={styles.snapshotDrawer}
|
||||
visible={this.state.snapshotVisible}
|
||||
>
|
||||
<div>
|
||||
<Descriptions>
|
||||
<Descriptions.Item label="快照名称">Zhou Maomao</Descriptions.Item>
|
||||
<Descriptions.Item label="仓库">1810000000</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Button type="primary" className={styles.btnRestore}>恢复</Button>
|
||||
</div>
|
||||
</Drawer>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BakAndRestore;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
.tabsCard {
|
||||
:global {
|
||||
.ant-card-head {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnRestore{
|
||||
position:absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,386 @@
|
|||
import React, { PureComponent, Fragment } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Modal,
|
||||
message,
|
||||
Divider,
|
||||
Drawer,
|
||||
} from 'antd';
|
||||
import StandardTable from '@/components/StandardTable';
|
||||
|
||||
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('policy', {
|
||||
initialValue: values.policy,
|
||||
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 BakCycle extends PureComponent {
|
||||
state = {
|
||||
modalVisible: false,
|
||||
updateModalVisible: false,
|
||||
expandForm: false,
|
||||
selectedRows: [],
|
||||
formValues: {},
|
||||
updateFormValues: {},
|
||||
drawerVisible: false,
|
||||
};
|
||||
datasource = `{"ilm-history-ilm-policy":{"version":1,"modified_date":"2020-08-28T13:19:39.550Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}},"delete":{"min_age":"90d","actions":{"delete":{"delete_searchable_snapshot":true}}}}}},"watch-history-ilm-policy":{"version":1,"modified_date":"2020-08-28T13:19:39.460Z","policy":{"phases":{"delete":{"min_age":"7d","actions":{"delete":{"delete_searchable_snapshot":true}}}}}},"kibana-event-log-policy":{"version":1,"modified_date":"2020-08-28T13:43:28.035Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}},"delete":{"min_age":"90d","actions":{"delete":{"delete_searchable_snapshot":true}}}}}},"metrics":{"version":1,"modified_date":"2020-08-28T13:19:39.367Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}}}}},"ml-size-based-ilm-policy":{"version":1,"modified_date":"2020-08-28T13:19:39.166Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb"}}}}}},"filebeat":{"version":1,"modified_date":"2020-08-29T10:49:38.774Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}}}}},"logs":{"version":1,"modified_date":"2020-08-28T13:19:39.289Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}}}}},"slm-history-ilm-policy":{"version":1,"modified_date":"2020-08-28T13:19:39.637Z","policy":{"phases":{"hot":{"min_age":"0ms","actions":{"rollover":{"max_size":"50gb","max_age":"30d"}}},"delete":{"min_age":"90d","actions":{"delete":{"delete_searchable_snapshot":true}}}}}}}`;
|
||||
parseData = ()=>{
|
||||
let ds = JSON.parse(this.datasource);
|
||||
var values = [];
|
||||
for(let key in ds){
|
||||
values.push({
|
||||
name: key,
|
||||
...ds[key],
|
||||
policy: JSON.stringify(ds[key].policy),
|
||||
});
|
||||
}
|
||||
return values;
|
||||
}
|
||||
columns = [
|
||||
{
|
||||
title: '策略名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '修改日期',
|
||||
dataIndex: 'modified_date',
|
||||
},
|
||||
{
|
||||
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: this.parseData(),
|
||||
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}
|
||||
<Drawer
|
||||
title="备份策略"
|
||||
placement="right"
|
||||
width={720}
|
||||
onClose={this.onCloseDrawer}
|
||||
visible={this.state.drawerVisible}
|
||||
>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Drawer>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BakCycle;
|
||||
|
|
@ -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 Indices extends Component {
|
||||
handleTabChange = key => {
|
||||
const { match } = this.props;
|
||||
switch (key) {
|
||||
case 'summary':
|
||||
router.push(`${match.url}/summary`);
|
||||
break;
|
||||
case 'doc':
|
||||
router.push(`${match.url}/doc`);
|
||||
break;
|
||||
case 'template':
|
||||
router.push(`${match.url}/template`);
|
||||
break;
|
||||
case 'ilm':
|
||||
router.push(`${match.url}/ilm`);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const tabList = [
|
||||
{
|
||||
key: 'summary',
|
||||
tab: '索引概览',
|
||||
},
|
||||
{
|
||||
key: 'doc',
|
||||
tab: '索引文档管理',
|
||||
},
|
||||
{
|
||||
key: 'template',
|
||||
tab: '索引模板管理',
|
||||
},
|
||||
{
|
||||
key: 'ilm',
|
||||
tab: '索引生命周期管理',
|
||||
}
|
||||
];
|
||||
|
||||
const { match, children, location } = this.props;
|
||||
|
||||
return (
|
||||
<PageHeaderWrapper
|
||||
tabList={tabList}
|
||||
tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
|
||||
onTabChange={this.handleTabChange}
|
||||
>
|
||||
{children}
|
||||
</PageHeaderWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Indices;
|
||||
Loading…
Reference in New Issue