From fadf52cec84308c8a8a2beba9eff5a69bcd4372f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9A=AE=E5=85=89=EF=BC=9A=E5=9F=8E=E4=B8=AD=E5=9F=8E?=
 <806783409@qq.com>
Date: Sat, 27 Jul 2019 22:58:16 +0800
Subject: [PATCH] =?UTF-8?q?es=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91=EF=BC=8C?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=8F=AF=E7=94=A8=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/EsMappingController.java       |  19 ++-
 zyplayer-doc-ui/es-ui/src/App.vue             |  34 ++++-
 .../es-ui/src/views/data/DatasourceManage.vue |   6 +-
 zyplayer-doc-ui/es-ui/src/views/home/Home.vue |   2 +-
 .../es-ui/src/views/index/Executer.vue        | 127 ++++++++++++------
 5 files changed, 129 insertions(+), 59 deletions(-)

diff --git a/zyplayer-doc-es/src/main/java/com/zyplayer/doc/elasticsearch/controller/EsMappingController.java b/zyplayer-doc-es/src/main/java/com/zyplayer/doc/elasticsearch/controller/EsMappingController.java
index f7590d95..56085cc3 100644
--- a/zyplayer-doc-es/src/main/java/com/zyplayer/doc/elasticsearch/controller/EsMappingController.java
+++ b/zyplayer-doc-es/src/main/java/com/zyplayer/doc/elasticsearch/controller/EsMappingController.java
@@ -2,7 +2,9 @@ package com.zyplayer.doc.elasticsearch.controller;
 
 import com.zyplayer.doc.core.json.DocResponseJson;
 import com.zyplayer.doc.core.json.ResponseJson;
+import com.zyplayer.doc.data.repository.manage.entity.EsDatasource;
 import com.zyplayer.doc.data.service.elasticsearch.support.ElasticSearchUtil;
+import com.zyplayer.doc.data.service.manage.EsDatasourceService;
 import org.apache.commons.lang3.StringUtils;
 import org.elasticsearch.action.search.SearchRequest;
 import org.elasticsearch.client.RequestOptions;
@@ -45,16 +47,19 @@ public class EsMappingController {
 	
 	@Resource
 	ElasticSearchUtil elasticSearchUtil;
+	@Resource
+	EsDatasourceService esDatasourceService;
 	
 	@PostMapping("/mappings")
-	public ResponseJson<Object> mappings(String index) throws IOException {
+	public ResponseJson<Object> mappings(Long id, String index) {
+		EsDatasource esDatasource = esDatasourceService.getById(id);
 		GetMappingsRequest request = new GetMappingsRequest();
 		request.setMasterTimeout(TimeValue.timeValueMinutes(1));
 		if (StringUtils.isNotBlank(index)) {
 			request.indices(index);
 		}
 		try {
-			RestHighLevelClient client = elasticSearchUtil.getEsClient("127.0.0.1:9200", "http");
+			RestHighLevelClient client = elasticSearchUtil.getEsClient(esDatasource.getHostPort(), esDatasource.getScheme());
 			GetMappingsResponse getMappingResponse = client.indices().getMapping(request, RequestOptions.DEFAULT);
 			Map<String, MappingMetaData> allMappings = getMappingResponse.mappings();
 			return DocResponseJson.ok(allMappings);
@@ -65,14 +70,15 @@ public class EsMappingController {
 	}
 	
 	@PostMapping("/execute")
-	public ResponseJson<Object> execute(String index, String sql) throws IOException {
+	public ResponseJson<Object> execute(Long id, String index, String sql) {
+		EsDatasource esDatasource = esDatasourceService.getById(id);
 		SearchTemplateRequest request = new SearchTemplateRequest();
 		request.setRequest(new SearchRequest().indices(index));
 		request.setScriptType(ScriptType.INLINE);
 		request.setScript(sql);
 		request.setScriptParams(new HashMap<>());
 		try {
-			RestHighLevelClient client = elasticSearchUtil.getEsClient("127.0.0.1:9200", "http");
+			RestHighLevelClient client = elasticSearchUtil.getEsClient(esDatasource.getHostPort(), esDatasource.getScheme());
 			SearchTemplateResponse response = client.searchTemplate(request, RequestOptions.DEFAULT);
 			List<Map<String, Object>> resultList = new LinkedList<>();
 			for (SearchHit searchHit : response.getResponse().getHits()) {
@@ -85,11 +91,12 @@ public class EsMappingController {
 	}
 	
 	@GetMapping("/index")
-	public ResponseJson<Object> index(String index) throws IOException {
+	public ResponseJson<Object> index(Long id, String index) throws IOException {
+		EsDatasource esDatasource = esDatasourceService.getById(id);
 		GetIndexRequest request = new GetIndexRequest(index);
 		request.setMasterTimeout(TimeValue.timeValueMinutes(1));
 		try {
-			RestHighLevelClient client = elasticSearchUtil.getEsClient("127.0.0.1:9200", "http");
+			RestHighLevelClient client = elasticSearchUtil.getEsClient(esDatasource.getHostPort(), esDatasource.getScheme());
 			GetIndexResponse indexResponse = client.indices().get(request, RequestOptions.DEFAULT);
 			Map<String, Object> resultMap = new HashMap<>();
 			resultMap.put("mapping", indexResponse.getMappings().get(index));
diff --git a/zyplayer-doc-ui/es-ui/src/App.vue b/zyplayer-doc-ui/es-ui/src/App.vue
index 701ac645..810fd6ca 100644
--- a/zyplayer-doc-ui/es-ui/src/App.vue
+++ b/zyplayer-doc-ui/es-ui/src/App.vue
@@ -6,8 +6,13 @@
         <el-container v-else>
             <el-aside>
                 <div style="padding: 10px;height: 100%;box-sizing: border-box;background: #fafafa;">
+                    <div style="margin-bottom: 10px;">
+                        <el-select v-model="choiceDatasource" @change="datasourceChangeEvents" filterable placeholder="选择数据源查看索引列表" style="width: 100%;">
+                            <el-option v-for="item in datasourceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </div>
                     <el-menu :router="true" class="el-menu-vertical" style="height: auto;">
-                        <el-menu-item index="/"><i class="el-icon-s-home"></i>控制台</el-menu-item>
+<!--                        <el-menu-item index="/"><i class="el-icon-s-home"></i>控制台</el-menu-item>-->
                         <el-submenu index="1">
                             <template slot="title">
                                 <i class="el-icon-s-platform"></i>
@@ -27,7 +32,7 @@
                              ref="databaseTree" highlight-current draggable
                              :default-expanded-keys="esIndexExpandedKeys"
                              node-key="id" @node-expand="handleNodeExpand"
-                             style="background-color: #fafafa;">
+                             style="background-color: #fafafa;" empty-text="">
                         <span slot-scope="{node, data}">
                             <span>{{node.label}}</span>
                         </span>
@@ -92,6 +97,9 @@
                 defaultProps: {children: 'children', label: 'name'},
                 esIndexList: [],
                 esIndexExpandedKeys: [],
+                // 数据源相关
+                datasourceOptions: [],
+                choiceDatasource: "",
                 // 升级信息
                 upgradeInfo: {},
             }
@@ -101,7 +109,7 @@
             global.vue.$app = this;
             this.getSelfUserInfo();
             this.checkSystemUpgrade();
-            this.loadEsMappingList();
+            this.loadDatasourceList();
         },
         methods: {
             userSettingDropdown(command) {
@@ -131,7 +139,7 @@
             handleNodeClick(node) {
                 console.log("点击节点：", node);
                 if (node.type == 1) {
-                    this.nowClickPath = {index: node.name};
+                    this.nowClickPath = {id: this.choiceDatasource, index: node.name};
                     this.$router.push({path: '/index/show', query: this.nowClickPath});
                 }
             },
@@ -140,8 +148,12 @@
                     console.log("加载节点：", node);
                 }
             },
+            datasourceChangeEvents() {
+                app.loadEsMappingList();
+            },
             loadEsMappingList() {
-                this.common.post(this.apilist1.esMappings, {}, function (json) {
+                var param = {id: this.choiceDatasource};
+                this.common.post(this.apilist1.esMappings, param, function (json) {
                     var result = json.data || {};
                     var pathIndex = [], pathChildren = [];
                     for (var key in result) {
@@ -160,6 +172,18 @@
                     app.esIndexList = pathIndex;
                 });
             },
+            loadDatasourceList() {
+                this.common.post(this.apilist1.manageDatasourceList, {}, function (json) {
+                    var datasourceList = json.data || [];
+                    var datasourceOptions = [];
+                    for (var i = 0; i < datasourceList.length; i++) {
+                        datasourceOptions.push({
+                            label: datasourceList[i].name, value: datasourceList[i].id
+                        });
+                    }
+                    app.datasourceOptions = datasourceOptions;
+                });
+            },
             checkSystemUpgrade() {
                 this.common.post(this.apilist1.systemUpgradeInfo, {}, function (json) {
                     if (!!json.data) {
diff --git a/zyplayer-doc-ui/es-ui/src/views/data/DatasourceManage.vue b/zyplayer-doc-ui/es-ui/src/views/data/DatasourceManage.vue
index f09e324e..40ad3532 100644
--- a/zyplayer-doc-ui/es-ui/src/views/data/DatasourceManage.vue
+++ b/zyplayer-doc-ui/es-ui/src/views/data/DatasourceManage.vue
@@ -21,13 +21,13 @@
             </el-card>
         </div>
         <!--增加数据源弹窗-->
-        <el-dialog :inline="true" :title="newDatasource.id>0?'编辑数据源':'新增数据源'" :visible.sync="datasourceDialogVisible" width="600px">
+        <el-dialog :inline="true" :title="newDatasource.id>0?'编辑数据源':'新增数据源'" :visible.sync="datasourceDialogVisible" width="650px">
             <el-form label-width="120px">
                 <el-form-item label="名字：">
                     <el-input v-model="newDatasource.name" placeholder="中文名字"></el-input>
                 </el-form-item>
                 <el-form-item label="数据源URL：">
-                    <el-input v-model="newDatasource.hostPort" placeholder="地址和端口"></el-input>
+                    <el-input v-model="newDatasource.hostPort" placeholder="地址和端口，集群使用英文逗号分隔，例：127.0.0.1:7200,127.0.0.1:7201"></el-input>
                 </el-form-item>
                 <el-form-item label="scheme：">
                     <el-select v-model="newDatasource.scheme" placeholder="scheme" style="width: 100%">
@@ -68,7 +68,7 @@
                 this.newDatasource = {name: "", hostPort: "", scheme: "http"};
             },
             editDatasource(row) {
-                this.newDatasource = row;
+                this.newDatasource = JSON.parse(JSON.stringify(row));
                 this.datasourceDialogVisible = true;
             },
             deleteDatasource(row) {
diff --git a/zyplayer-doc-ui/es-ui/src/views/home/Home.vue b/zyplayer-doc-ui/es-ui/src/views/home/Home.vue
index b7a1e677..c01c6f82 100644
--- a/zyplayer-doc-ui/es-ui/src/views/home/Home.vue
+++ b/zyplayer-doc-ui/es-ui/src/views/home/Home.vue
@@ -1,7 +1,7 @@
 <template>
     <div style="padding: 10px;">
         <div style="max-width: 1200px;margin: 20px auto;">
-            <div style="text-align: center;">欢迎使用ヾ(๑╹◡╹)ﾉ" - 在左上角选择一个数据源吧~</div>
+            <div style="text-align: center;">欢迎使用鸭ヾ(๑╹◡╹)ﾉ"</div>
         </div>
     </div>
 </template>
diff --git a/zyplayer-doc-ui/es-ui/src/views/index/Executer.vue b/zyplayer-doc-ui/es-ui/src/views/index/Executer.vue
index 6a6f2e9d..f64be9ad 100644
--- a/zyplayer-doc-ui/es-ui/src/views/index/Executer.vue
+++ b/zyplayer-doc-ui/es-ui/src/views/index/Executer.vue
@@ -1,29 +1,52 @@
 <template>
     <div class="index-executer-vue">
         <el-card style="margin: 10px;">
-            <div style="margin: 10px 0;">
-                <span>选择索引：</span>
-                <el-select v-model="executeParam.index" filterable placeholder="选择索引">
-                    <el-option label="zyplayer_doc_wiki" value="zyplayer_doc_wiki"></el-option>
-                </el-select>
+            <div style="margin-bottom: 20px;">
+                <el-form :model="executeParam" :inline="true" :rules="paramRules" ref="paramRulesForm">
+                    <el-form-item label="选择数据源：" prop="id">
+                        <el-select v-model="executeParam.id" @change="loadIndexList" filterable placeholder="选择数据源">
+                            <el-option v-for="item in datasourceOptions" :label="item.name" :value="item.id"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="选择索引：">
+                        <el-select v-model="executeParam.index" filterable placeholder="选择索引">
+                            <el-option label="全部" value=""></el-option>
+                            <el-option v-for="item in esIndexList" :label="item.name" :value="item.index"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
             </div>
-            <el-input type="textarea" v-model="executeParam.sql" :rows="10" placeholder="请输入"></el-input>
-            <div style="text-align: center;margin: 10px 0;">
+<!--            例：{"_source":["id","name","createUserName","viewNum"]}-->
+            <el-input type="textarea" v-model="executeParam.sql" :rows="10" placeholder="请输入DSL查询条件"></el-input>
+            <div style="text-align: center;margin-top: 10px;">
                 <el-button type="primary" icon="el-icon-video-play" v-on:click="submitExecute">执行</el-button>
             </div>
         </el-card>
         <el-card style="margin: 10px;" v-loading="executeLoading">
-            <div style="margin: 10px 0;">
-                <span>执行状态：{{executeResult.errCode == 200 ? '成功' : '失败'}}</span>
-            </div>
-            <div style="margin: 10px 0;" v-if="executeResult.errCode == 200">
-                <div style="margin: 10px 0;">返回结果：</div>
-                <div v-html="executeResult.data" @click="executeResultClick($event)"></div>
-            </div>
-            <div style="margin: 10px 0;" v-else>
-                <div style="margin: 10px 0;">错误信息：</div>
-                <div class="error-text">{{executeResult.errMsg}}</div>
-            </div>
+            <el-tabs value="first">
+                <el-tab-pane label="返回结果" name="first">
+                    <div v-if="!!executeResult.errCode">
+                        <div v-if="executeResult.errCode == 200">
+                            <el-table :data="executeResult.data" stripe border style="width: 100%;">
+                                <el-table-column v-for="item in executeResultCols" :prop="item.prop" :label="item.prop"></el-table-column>
+                            </el-table>
+                        </div>
+                        <div class="error-text" v-else>{{executeResult.errMsg}}</div>
+                    </div>
+                    <div v-else>请先执行</div>
+                </el-tab-pane>
+                <el-tab-pane label="JSON结果" name="second">
+                    <div v-if="!!executeResult.errCode">
+                        <div v-html="executeResult.jsonHtmlStr" @click="executeResultClick($event)" v-if="executeResult.errCode == 200"></div>
+                        <div class="error-text" v-else>{{executeResult.errMsg}}</div>
+                    </div>
+                    <div v-else>请先执行</div>
+                </el-tab-pane>
+                <el-tab-pane label="执行状态" name="third">
+                    <div v-if="!!executeResult.errCode">{{executeResult.errCode == 200 ? '成功' : '失败'}}</div>
+                    <div v-else>请先执行</div>
+                </el-tab-pane>
+            </el-tabs>
         </el-card>
     </div>
 </template>
@@ -37,39 +60,57 @@
         data() {
             return {
                 vueQueryParam: {},
-                indexMappingList: [],
+                datasourceOptions: [],
+                esIndexList: [],
                 executeParam: {
+                    id: '',
                     sql: '',
                     index: '',
                 },
                 executeResult: {},
+                executeResultCols: [],
                 executeLoading: false,
+                paramRules: {
+                    id: [
+                        {required: true, message: '请选择数据源', trigger: 'change'},
+                    ],
+                },
             };
         },
         beforeRouteUpdate(to, from, next) {
-            this.initQueryParam(to);
             next();
         },
         mounted: function () {
             app = this;
-            this.initQueryParam(this.$route);
-            // 延迟设置展开的目录，edit比app先初始化
-            setTimeout(function () {
-                //global.vue.$app.initLoadDataList(app.vueQueryParam.host, app.vueQueryParam.dbName);
-            }, 500);
+            this.loadDatasourceList();
         },
         methods: {
             submitExecute() {
+                this.$refs.paramRulesForm.validate((valid) => {
+                    if (!valid) return;
+                    app.doSubmitExecute();
+                });
+            },
+            doSubmitExecute() {
                 this.executeLoading = true;
                 this.executeResult = {};
                 this.common.postNonCheck(this.apilist1.esExecuter, this.executeParam, function (json) {
                     var executeResult = json;
                     try {
-                        executeResult.data = formatjson.processObjectToHtmlPre(json.data, 0, false, false, false, false);
+                        executeResult.jsonHtmlStr = formatjson.processObjectToHtmlPre(json.data, 0, false, false, false, false);
                     } catch (e) {
-                        executeResult.data = "结果解析失败";
+                        executeResult.jsonHtmlStr = "结果解析失败";
                     }
                     app.executeResult = executeResult;
+                    var executeResultCols = [];
+                    if (!!json.data && json.data.length > 0) {
+                        var colItem = json.data[0];
+                        for (var key in colItem) {
+                            executeResultCols.push({prop: key});
+                        }
+                    }
+                    // reverse 反转下，不然查询出来的结果字段反的
+                    app.executeResultCols = executeResultCols.reverse();
                     // 防止遮罩消失太快~
                     setTimeout(()=>{app.executeLoading = false;}, 500);
                 });
@@ -79,23 +120,21 @@
                     formatjson.expImgClicked(e.target);
                 }
             },
-            initQueryParam(to) {
-                // this.indexMappingListLoading = true;
-                // this.vueQueryParam = to.query;
-                // this.common.post(this.apilist1.esMappings, this.vueQueryParam, function (json) {
-                //     var data = json.data || {};
-                //     var properties = data[app.vueQueryParam.index].sourceAsMap.properties;
-                //     var propertiesArr = [];
-                //     for (var propertiesKey in properties) {
-                //         var propertiesItem = properties[propertiesKey];
-                //         var item = {
-                //             name: propertiesKey, type: propertiesItem.type
-                //         };
-                //         propertiesArr.push(item);
-                //     }
-                //     app.indexMappingList = propertiesArr;
-                //     app.indexMappingListLoading = false;
-                // });
+            loadDatasourceList() {
+                this.common.post(this.apilist1.manageDatasourceList, {}, function (json) {
+                    app.datasourceOptions = json.data || [];
+                });
+            },
+            loadIndexList() {
+                var param = {id: this.executeParam.id};
+                this.common.post(this.apilist1.esMappings, param, function (json) {
+                    var result = json.data || {};
+                    var propertiesArr = [];
+                    for (var key in result) {
+                        propertiesArr.push({name: key, index: key});
+                    }
+                    app.esIndexList = propertiesArr;
+                });
             },
         }
     }