search template page bind data
This commit is contained in:
shiyang
parent
f8540b297a
commit
8d10429057
|
|
@ -146,6 +146,10 @@ export default [
|
|||
path: '/search/template/template',
|
||||
component: './SearchManage/template/SearchTemplate',
|
||||
},
|
||||
{
|
||||
path: '/search/template/:cluster_id',
|
||||
component: './SearchManage/template/SearchTemplate',
|
||||
},
|
||||
{
|
||||
path: '/search/template/history',
|
||||
component: './SearchManage/template/History',
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default {
|
|||
res.send({
|
||||
"_id": "c1nc0dkagrh0jobkn6s0",
|
||||
"_source": {
|
||||
"name": "test_search_template",
|
||||
"name": "test_search_template_new",
|
||||
"source": "{\"query\":{\"match\":{\"{{my_field}}\":\"{{my_value}}\"}},\"size\":\"{{my_size}}\"}",
|
||||
"cluster_id": "c0octmtath23m973pf4g",
|
||||
"created": "2021-04-08T16:35:02.746223+08:00",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
import { getTemplateList,addTemplate,updateTemplate,deleteTemplate } from '@/services/searchTemplate';
|
||||
import { message } from 'antd';
|
||||
|
||||
export default {
|
||||
namespace: 'searchTemplate',
|
||||
|
||||
state: {
|
||||
list: [],
|
||||
pagination: {
|
||||
from:0,
|
||||
size:10
|
||||
},
|
||||
total:0,
|
||||
},
|
||||
|
||||
effects: {
|
||||
*fetchList({ payload }, { call, put }) {
|
||||
const res = yield call(getTemplateList, payload);
|
||||
console.log("fetchList response:",res);
|
||||
if (res.hits) {
|
||||
let newList = [];
|
||||
let hits = res.hits.hits;
|
||||
for (let item of hits) {
|
||||
item._source.id = item._id;
|
||||
newList.push(item._source);
|
||||
}
|
||||
console.log("fetchList list:",newList);
|
||||
yield put({
|
||||
type: 'save',
|
||||
payload: {
|
||||
list:newList,
|
||||
total:res.hits.total.value,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
message.warning(res.msg);
|
||||
}
|
||||
},
|
||||
*add({ payload, callback }, { call, put }) {
|
||||
const res = yield call(addTemplate, payload);
|
||||
console.log("add res:",res);
|
||||
//业务数据格式化处理
|
||||
if (res.result === 'created') {
|
||||
let item = res._source;
|
||||
item.id = res._id;
|
||||
|
||||
yield put({
|
||||
type: 'create',
|
||||
payload: {
|
||||
item:item
|
||||
},
|
||||
});
|
||||
} else {
|
||||
message.warning(res.msg);
|
||||
}
|
||||
|
||||
if (callback) callback();
|
||||
},
|
||||
*update({ payload, callback }, { call, put }) {
|
||||
const res = yield call(updateTemplate, payload);
|
||||
console.log("update res:",res);
|
||||
//业务数据格式化处理
|
||||
if (res.result === 'updated') {
|
||||
console.log("update successful");
|
||||
}
|
||||
|
||||
if (callback) callback();
|
||||
},
|
||||
*delete({ payload, callback }, { call, put }) {
|
||||
const payloadNew = {...payload};
|
||||
if (Array.isArray(payload.id)) {
|
||||
payloadNew.id = payload.id.toString();
|
||||
}
|
||||
let res = yield call(deleteTemplate, payloadNew);
|
||||
res = JSON.parse(res);//这个接口返回的res不是对象而是json字符串？？
|
||||
console.log("deleted res:",res);
|
||||
//业务数据格式化处理
|
||||
if (res.result === 'deleted') {
|
||||
const item = {};
|
||||
item.id = res._id;
|
||||
|
||||
yield put({
|
||||
type: 'del',
|
||||
payload: {
|
||||
item:item
|
||||
},
|
||||
});
|
||||
} else {
|
||||
message.warn("deleted failure")
|
||||
}
|
||||
|
||||
if (callback) callback();
|
||||
},
|
||||
},
|
||||
|
||||
reducers: {
|
||||
save(state, { payload }) {
|
||||
return {
|
||||
...state,
|
||||
...payload,
|
||||
};
|
||||
},
|
||||
create(state, {payload}){
|
||||
console.log("create payload:",payload);
|
||||
let list = state.list || [];
|
||||
list.unshift(payload.item);
|
||||
return {
|
||||
...state,
|
||||
list:list,
|
||||
total: state.total + 1,
|
||||
};
|
||||
},
|
||||
del(state, {payload}){
|
||||
console.log("del payload:",payload);
|
||||
let list = state.list;
|
||||
let idx = state.list.findIndex((item)=>{
|
||||
return item.id === payload.item.id;
|
||||
})
|
||||
idx > -1 && (state.list.splice(idx, 1));
|
||||
return {
|
||||
...state,
|
||||
total: state.total - 1,
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -23,6 +23,7 @@ const CreateForm = Form.create()(props => {
|
|||
const { modalVisible, form, handleAdd, handleModalVisible } = props;
|
||||
const okHandle = () => {
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
console.log('create form:',fieldsValue);
|
||||
if (err) return;
|
||||
form.resetFields();
|
||||
handleAdd(fieldsValue);
|
||||
|
|
@ -43,7 +44,7 @@ const CreateForm = Form.create()(props => {
|
|||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
{form.getFieldDecorator('source', {
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
style={{ minHeight: 24 }}
|
||||
|
|
@ -82,8 +83,8 @@ const UpdateForm = Form.create()(props => {
|
|||
})(<Input placeholder="请输入名称" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
|
||||
{form.getFieldDecorator('settings', {
|
||||
initialValue: values.processors,
|
||||
{form.getFieldDecorator('source', {
|
||||
initialValue: values.source,
|
||||
rules: [{ required: true }],
|
||||
})(<TextArea
|
||||
style={{ minHeight: 24 }}
|
||||
|
|
@ -96,9 +97,12 @@ const UpdateForm = Form.create()(props => {
|
|||
});
|
||||
|
||||
/* eslint react/no-multi-comp:0 */
|
||||
@connect(({ pipeline, loading }) => ({
|
||||
pipeline,
|
||||
loading: loading.models.pipeline,
|
||||
@connect(({ searchTemplate, loading ,global}) => ({
|
||||
searchTemplate,
|
||||
loading: loading.effects['searchTemplate/fetchList'],
|
||||
list:searchTemplate.list,
|
||||
pagination: searchTemplate.pagination,
|
||||
clusterID:global.selectedCluster.id,
|
||||
}))
|
||||
@Form.create()
|
||||
class SearchTemplate extends PureComponent {
|
||||
|
|
@ -110,83 +114,19 @@ class SearchTemplate extends PureComponent {
|
|||
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" : "[template6,search_template2,template2]",
|
||||
"order" : "1",
|
||||
"version" : 70002,
|
||||
"composed_of" : ""
|
||||
},
|
||||
{
|
||||
"name" : "apm-7.9.1-span",
|
||||
"index_patterns" : "[search_template2,template3,template2]",
|
||||
"order" : "2",
|
||||
"version" : 70002,
|
||||
"composed_of" : "70002"
|
||||
},
|
||||
{
|
||||
"name" : ".lists-default",
|
||||
"index_patterns" : "[template3,search_template2,template2]",
|
||||
"order" : "0",
|
||||
"version" : 700034,
|
||||
"composed_of" : "70001"
|
||||
},
|
||||
{
|
||||
"name" : ".monitoring-es",
|
||||
"index_patterns" : "[template1,search_template2,search_template2]",
|
||||
"order" : "0",
|
||||
"version" : "7000199",
|
||||
"composed_of" : ""
|
||||
},
|
||||
{
|
||||
"name" : ".monitoring-beats",
|
||||
"index_patterns" : "[template3,search_template2,template2]",
|
||||
"order" : "0",
|
||||
"version" : "7000199",
|
||||
"composed_of" : ""
|
||||
}]`;
|
||||
|
||||
columns = [
|
||||
{
|
||||
title: '索引名称',
|
||||
title: '模板名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'index_patterns',
|
||||
title: '创建时间',
|
||||
dataIndex: 'created'
|
||||
},
|
||||
{
|
||||
title: '版本',
|
||||
dataIndex: 'version'
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
|
|
@ -204,12 +144,23 @@ class SearchTemplate extends PureComponent {
|
|||
];
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
// dispatch({
|
||||
// type: 'pipeline/fetch',
|
||||
// });
|
||||
//初始化拉取模版表格数据
|
||||
this.handleGetListData();
|
||||
}
|
||||
|
||||
//获取基本数据列表
|
||||
handleGetListData = () => {
|
||||
const {dispatch,clusterID} = this.props;
|
||||
let payload = {size: 10, from: 0,cluster_id:clusterID};
|
||||
if (this.state.formValues.name) {
|
||||
payload.name = this.state.formValues.name;
|
||||
}
|
||||
dispatch({
|
||||
type: 'searchTemplate/fetchList',
|
||||
payload: payload,
|
||||
});
|
||||
};
|
||||
|
||||
handleStandardTableChange = (pagination, filtersArg, sorter) => {
|
||||
const { dispatch } = this.props;
|
||||
const { formValues } = this.state;
|
||||
|
|
@ -230,10 +181,10 @@ class SearchTemplate extends PureComponent {
|
|||
params.sorter = `${sorter.field}_${sorter.order}`;
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: 'pipeline/fetch',
|
||||
payload: params,
|
||||
});
|
||||
// dispatch({
|
||||
// type: 'pipeline/fetch',
|
||||
// payload: params,
|
||||
// });
|
||||
};
|
||||
|
||||
handleFormReset = () => {
|
||||
|
|
@ -242,21 +193,18 @@ class SearchTemplate extends PureComponent {
|
|||
this.setState({
|
||||
formValues: {},
|
||||
});
|
||||
dispatch({
|
||||
type: 'pipeline/fetch',
|
||||
payload: {},
|
||||
});
|
||||
};
|
||||
|
||||
handleDeleteClick = e => {
|
||||
const { dispatch } = this.props;
|
||||
const { dispatch,clusterID } = this.props;
|
||||
const { selectedRows } = this.state;
|
||||
|
||||
if (!selectedRows) return;
|
||||
if (!selectedRows) return message.warn("请选择需要删除的行");
|
||||
dispatch({
|
||||
type: 'pipeline/delete',
|
||||
type: 'searchTemplate/delete',
|
||||
payload: {
|
||||
key: selectedRows.map(row => row.name),
|
||||
cluster_id: clusterID,
|
||||
id: selectedRows.map(row => row.id),
|
||||
},
|
||||
callback: () => {
|
||||
this.setState({
|
||||
|
|
@ -288,11 +236,11 @@ class SearchTemplate extends PureComponent {
|
|||
this.setState({
|
||||
formValues: values,
|
||||
});
|
||||
|
||||
dispatch({
|
||||
type: 'rule/fetch',
|
||||
payload: values,
|
||||
});
|
||||
if (! values.name) {
|
||||
message.warn("请输入模版名称");
|
||||
return;
|
||||
}
|
||||
this.handleGetListData();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -310,13 +258,13 @@ class SearchTemplate extends PureComponent {
|
|||
};
|
||||
|
||||
handleAdd = fields => {
|
||||
const { dispatch } = this.props;
|
||||
const { dispatch,clusterID } = this.props;
|
||||
dispatch({
|
||||
type: 'pipeline/add',
|
||||
type: 'searchTemplate/add',
|
||||
payload: {
|
||||
cluster_id: clusterID,
|
||||
name: fields.name,
|
||||
desc: fields.desc,
|
||||
processors: fields.processors,
|
||||
source: fields.source,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -325,13 +273,13 @@ class SearchTemplate extends PureComponent {
|
|||
};
|
||||
|
||||
handleUpdate = fields => {
|
||||
const { dispatch } = this.props;
|
||||
const { dispatch,clusterID } = this.props;
|
||||
dispatch({
|
||||
type: 'pipeline/update',
|
||||
type: 'searchTemplate/update',
|
||||
payload: {
|
||||
cluster_id: clusterID,
|
||||
name: fields.name,
|
||||
desc: fields.desc,
|
||||
processors: fields.processors,
|
||||
source: fields.source,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -371,10 +319,13 @@ class SearchTemplate extends PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const {pagination, list} = this.props;
|
||||
|
||||
|
||||
const data = {
|
||||
list: JSON.parse(this.datasource),
|
||||
list: list,
|
||||
pagination: {
|
||||
pageSize: 5,
|
||||
size: pagination.size,
|
||||
},
|
||||
};
|
||||
const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import request from '@/utils/request';
|
||||
|
||||
|
||||
export async function getTemplateList(payload){
|
||||
let url = `/elasticsearch/${payload.cluster_id}/search_template/_search?from=${payload.from}&size=${payload.size}`;
|
||||
payload.name && (url+= `&name=${payload.name}`);
|
||||
console.log("url:",url);
|
||||
return request(url,{
|
||||
method: 'GET',
|
||||
// body: payload,
|
||||
expirys: 0,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export async function addTemplate(payload){
|
||||
console.log("url:addTemplate",payload);
|
||||
return request(`/elasticsearch/${payload.cluster_id}/search_template`,{
|
||||
method: 'POST',
|
||||
body: payload,
|
||||
expirys: 0,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export async function updateTemplate(payload){
|
||||
console.log("url:updateTemplate",payload);
|
||||
return request(`/elasticsearch/${payload.cluster_id}/search_template/${payload.id}`,{
|
||||
method: 'PUT',
|
||||
body: payload,
|
||||
expirys: 0,
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteTemplate(payload){
|
||||
console.log("url:deleteTemplate",payload);
|
||||
return request(`/elasticsearch/${payload.cluster_id}/search_template/${payload.id}`,{
|
||||
method: 'DELETE',
|
||||
expirys: 0,
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue