search template page bind data

This commit is contained in:
shiyang 2021-04-13 00:20:08 +08:00
parent f8540b297a
commit 8d10429057
5 changed files with 229 additions and 107 deletions

View File

@ -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',

View File

@ -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",

View File

@ -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,
}
},
},
};

View File

@ -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;

View File

@ -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,
});
}