From 1ee261a265ce0a30dc4f56c1083504983637585e Mon Sep 17 00:00:00 2001
From: bronya0 <tangssst@qq.com>
Date: Mon, 4 Nov 2024 00:40:14 +0800
Subject: [PATCH] =?UTF-8?q?add=EF=BC=9A=E5=A2=9E=E5=8A=A015=E7=A7=8D?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/components/Index.vue    |   2 +-
 app/frontend/src/components/Nodes.vue    |  15 ++
 app/frontend/src/components/Rest.vue     | 250 ++++++++++++++++++++++-
 app/frontend/src/components/Snapshot.vue |   3 -
 4 files changed, 263 insertions(+), 7 deletions(-)

diff --git a/app/frontend/src/components/Index.vue b/app/frontend/src/components/Index.vue
index 1ae202d..9f39415 100644
--- a/app/frontend/src/components/Index.vue
+++ b/app/frontend/src/components/Index.vue
@@ -24,7 +24,6 @@
           :pagination="pagination"
           size="small"
           :bordered="false"
-          :max-height="600"
           striped
           :row-key="rowKey"
           v-model:checked-row-keys="selectedRowKeys"
@@ -353,6 +352,7 @@ const mergeSegments = async (row) => {
     json_data.value = formattedJson(res.result)
     drawer_title.value = row.index
     drawerVisible.value = true
+    message.success("已提交段合并请求，段合并是重IO任务，请注意集群负载")
     await search()
   }
 }
diff --git a/app/frontend/src/components/Nodes.vue b/app/frontend/src/components/Nodes.vue
index e3566ba..d75d425 100644
--- a/app/frontend/src/components/Nodes.vue
+++ b/app/frontend/src/components/Nodes.vue
@@ -15,6 +15,7 @@
           size="small"
           :bordered="false"
           striped
+          :pagination="pagination"
       />
     </n-spin>
   </n-flex>
@@ -79,6 +80,20 @@ const renderProgress = (row, key) => {
   })
 }
 
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+  showSizePicker: true,
+  pageSizes: [5, 10, 20, 30, 40],
+  onChange: (page) => {
+    pagination.value.page = page
+  },
+  onUpdatePageSize: (pageSize) => {
+    pagination.value.pageSize = pageSize
+    pagination.value.page = 1
+  },
+})
+
 const columns = [
   { title: 'IP', key: 'ip', sorter: 'default',width: 100,resizable: true },
   { title: '名称', key: 'name', sorter: 'default',width: 100,resizable: true },
diff --git a/app/frontend/src/components/Rest.vue b/app/frontend/src/components/Rest.vue
index 60cf4de..ad7b022 100644
--- a/app/frontend/src/components/Rest.vue
+++ b/app/frontend/src/components/Rest.vue
@@ -1,7 +1,8 @@
 <template>
   <n-flex vertical>
-    <n-flex  align="center">
-      <h2 style="max-width: 60px;">REST</h2>
+    <n-flex align="center">
+      <h2 style="max-width: 200px;">REST</h2>
+      <n-text>一个 Restful 调试工具</n-text>
     </n-flex>
     <n-flex  align="center">
       <n-select v-model:value="method" :options="methodOptions" style="width: 120px;"/>
@@ -9,6 +10,7 @@
                style="min-width: 300px;text-align: left"/>
       <n-button @click="sendRequest" :loading="send_loading" :render-icon="renderIcon(SendSharp)">Send</n-button>
       <n-button @click="exportJson" :render-icon="renderIcon(ArrowDownwardOutlined)">导出结果</n-button>
+      <n-button @click="showDrawer = true" :render-icon="renderIcon(MenuBookTwotone)">ES查询示例</n-button>
     </n-flex>
     <n-grid x-gap="20" :cols="2">
       <n-grid-item>
@@ -20,6 +22,74 @@
     </n-grid>
   </n-flex>
 
+  <n-drawer v-model:show="showDrawer" :width="500" placement="right">
+    <n-drawer-content title="ES DSL查询示例" style="text-align: left;">
+      <n-flex vertical>
+        <n-collapse>
+          <n-collapse-item title="1. Term查询" name="1">
+            <n-code :code="dslExamples.term" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="2. Terms查询" name="2">
+            <n-code :code="dslExamples.terms" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="3. Match查询" name="3">
+            <n-code :code="dslExamples.match" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="4. Match Phrase查询" name="4">
+            <n-code :code="dslExamples.matchPhrase" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="5. Range查询" name="5">
+            <n-code :code="dslExamples.range" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="6. Bool复合查询" name="6">
+            <n-code :code="dslExamples.bool" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="7. Terms Aggregation" name="7">
+            <n-code :code="dslExamples.termsAggs" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="8. Date Histogram聚合" name="8">
+            <n-code :code="dslExamples.dateHistogram" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="9. Nested查询" name="9">
+            <n-code :code="dslExamples.nested" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="10. Exists查询" name="10">
+            <n-code :code="dslExamples.exists" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="11. Multi-match查询" name="11">
+            <n-code :code="dslExamples.multiMatch" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="12. Wildcard查询" name="12">
+            <n-code :code="dslExamples.wildcard" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="13. Metrics聚合" name="13">
+            <n-code :code="dslExamples.metrics" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="14. Cardinality聚合" name="14">
+            <n-code :code="dslExamples.cardinality" language="json" />
+          </n-collapse-item>
+
+          <n-collapse-item title="15. Script查询" name="15">
+            <n-code :code="dslExamples.script" language="json" />
+          </n-collapse-item>
+        </n-collapse>
+      </n-flex>
+    </n-drawer-content>
+  </n-drawer>
+
 </template>
 
 <script setup>
@@ -34,7 +104,7 @@ import '../assets/css/jsoneditor.min.css'
 import {
   Search
 } from "../../wailsjs/go/service/ESService";
-import {SendSharp, ArrowDownwardOutlined} from "@vicons/material";
+import {SendSharp, ArrowDownwardOutlined, MenuBookTwotone} from "@vicons/material";
 import {renderIcon} from "../utils/common";
 import 'ace-builds/src-noconflict/theme-tomorrow_night';
 import 'ace-builds/src-noconflict/theme-monokai';
@@ -48,6 +118,7 @@ const path = ref('')
 const editor = ref(null);
 const response = ref(null)
 const send_loading = ref(false)
+const showDrawer = ref(false)
 
 const methodOptions = [
   {label: 'GET', value: 'GET'},
@@ -140,6 +211,179 @@ function exportJson() {
   URL.revokeObjectURL(url)
 }
 
+
+const dslExamples = {
+  term: JSON.stringify({
+    "query": {
+      "term": {
+        "status": "active"
+      }
+    },
+    "size": 10,
+    "track_total_hits": true
+  }, null, 2),
+
+  terms: JSON.stringify({
+    "query": {
+      "terms": {
+        "user_id": [1, 2, 3, 4]
+      }
+    },
+    "size": 10
+  }, null, 2),
+
+  match: JSON.stringify({
+    "query": {
+      "match": {
+        "description": "quick brown fox"
+      }
+    },
+    "size": 20
+  }, null, 2),
+
+  matchPhrase: JSON.stringify({
+    "query": {
+      "match_phrase": {
+        "description": {
+          "query": "quick brown fox",
+          "slop": 1
+        }
+      }
+    }
+  }, null, 2),
+
+  range: JSON.stringify({
+    "query": {
+      "range": {
+        "age": {
+          "gte": 20,
+          "lte": 30
+        }
+      }
+    }
+  }, null, 2),
+
+  bool: JSON.stringify({
+    "query": {
+      "bool": {
+        "must": [
+          { "term": { "status": "active" } }
+        ],
+        "must_not": [
+          { "term": { "type": "deleted" } }
+        ],
+        "should": [
+          { "term": { "category": "electronics" } },
+          { "term": { "category": "computers" } }
+        ],
+        "minimum_should_match": 1
+      }
+    }
+  }, null, 2),
+
+  termsAggs: JSON.stringify({
+    "aggs": {
+      "status_counts": {
+        "terms": {
+          "field": "status",
+          "missing": "N/A",
+          "size": 10
+        }
+      }
+    },
+    "size": 0
+  }, null, 2),
+
+  dateHistogram: JSON.stringify({
+    "aggs": {
+      "sales_over_time": {
+        "date_histogram": {
+          "field": "created_at",
+          "calendar_interval": "1d",
+          "format": "yyyy-MM-dd"
+        }
+      }
+    },
+    "size": 0
+  }, null, 2),
+
+  nested: JSON.stringify({
+    "query": {
+      "nested": {
+        "path": "comments",
+        "query": {
+          "bool": {
+            "must": [
+              { "match": { "comments.text": "great" } },
+              { "term": { "comments.rating": 5 } }
+            ]
+          }
+        }
+      }
+    }
+  }, null, 2),
+
+  exists: JSON.stringify({
+    "query": {
+      "exists": {
+        "field": "email"
+      }
+    }
+  }, null, 2),
+
+  multiMatch: JSON.stringify({
+    "query": {
+      "multi_match": {
+        "query": "quick brown fox",
+        "fields": ["title", "description^2"],
+        "type": "best_fields"
+      }
+    }
+  }, null, 2),
+
+  wildcard: JSON.stringify({
+    "query": {
+      "wildcard": {
+        "email": "*@gmail.com"
+      }
+    }
+  }, null, 2),
+
+  metrics: JSON.stringify({
+    "aggs": {
+      "avg_price": { "avg": { "field": "price" } },
+      "max_price": { "max": { "field": "price" } },
+      "min_price": { "min": { "field": "price" } },
+      "sum_quantity": { "sum": { "field": "quantity" } }
+    },
+    "size": 0
+  }, null, 2),
+
+  cardinality: JSON.stringify({
+    "aggs": {
+      "unique_users": {
+        "cardinality": {
+          "field": "user_id",
+          "precision_threshold": 100
+        }
+      }
+    },
+    "size": 0
+  }, null, 2),
+
+  script: JSON.stringify({
+    "query": {
+      "script_score": {
+        "query": { "match_all": {} },
+        "script": {
+          "source": "doc['price'].value * doc['rating'].value",
+          "lang": "painless"
+        }
+      }
+    }
+  }, null, 2)
+}
+
 </script>
 
 <style scoped>
diff --git a/app/frontend/src/components/Snapshot.vue b/app/frontend/src/components/Snapshot.vue
index f757e76..84b7186 100644
--- a/app/frontend/src/components/Snapshot.vue
+++ b/app/frontend/src/components/Snapshot.vue
@@ -1,9 +1,6 @@
 <script setup>
 import {onMounted} from "vue";
 import emitter from "../utils/eventBus";
-import {BrowserOpenURL} from "../../wailsjs/runtime";
-import {renderIcon} from "../utils/common";
-import {HouseTwotone} from "@vicons/material";
 
 onMounted(async () => {
   emitter.on('selectNode', selectNode)