search template page bind data

web/config/router.config.js

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

web/mock/search/template.js

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

web/src/pages/SearchManage/models/searchTemplate.js

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

web/src/pages/SearchManage/template/SearchTemplate.js

@@ -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', {
+        {form.getFieldDecorator('source', {
-          initialValue: values.processors,
+          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 }) => ({
+@connect(({ searchTemplate, loading ,global}) => ({
-  pipeline,
+  searchTemplate,
-  loading: loading.models.pipeline,
+  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: '模板名称',
+      title: '创建时间',
-      dataIndex: 'index_patterns',
+      dataIndex: 'created'
     },
     {
-      title: '版本',
+      title: '更新时间',
-      dataIndex: 'version'
+      dataIndex: 'updated'
     },
     {
       title: '操作',
@@ -204,12 +144,23 @@ class SearchTemplate extends PureComponent {
   ];
 
   componentDidMount() {
-    const { dispatch } = this.props;
+    //初始化拉取模版表格数据
-    // dispatch({
+    this.handleGetListData();
-    //   type: 'pipeline/fetch',
-    // });
   }
 
+  //获取基本数据列表
+  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({
+    // dispatch({
-      type: 'pipeline/fetch',
+    //   type: 'pipeline/fetch',
-      payload: params,
+    //   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,
       });
-
+      if (! values.name) {
-      dispatch({
+        message.warn("请输入模版名称");
-        type: 'rule/fetch',
+        return;
-        payload: values,
+      }
-      });
+      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,
+        source: fields.source,
-        processors: fields.processors,
       },
     });
 
@@ -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,
+        source: fields.source,
-        processors: fields.processors,
       },
     });
 
@@ -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;

web/src/services/searchTemplate.js

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