From 10fbf33d5d9dddd75846c6bbbebe208e4efc4e3f Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 28 Mar 2022 17:07:10 +0800
Subject: [PATCH] set endpoints

---
 .../{Select.vue => SelectSingle.vue}          |  0
 src/components/Selector.vue                   | 13 +++++++++-
 src/components/index.ts                       |  2 +-
 src/graphql/fragments/selector.ts             |  2 +-
 src/layout/components/SideBar.vue             |  1 -
 src/views/dashboard/panel/Tool.vue            | 25 ++++++++++++++++---
 6 files changed, 35 insertions(+), 8 deletions(-)
 rename src/components/{Select.vue => SelectSingle.vue} (100%)

diff --git a/src/components/Select.vue b/src/components/SelectSingle.vue
similarity index 100%
rename from src/components/Select.vue
rename to src/components/SelectSingle.vue
diff --git a/src/components/Selector.vue b/src/components/Selector.vue
index 908b2f65..a925bb27 100644
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@@ -23,6 +23,9 @@ limitations under the License. -->
     :disabled="disabled"
     :style="{ borderRadius }"
     :clearable="clearable"
+    :remote="isRemote"
+    :reserve-keyword="isRemote"
+    :remote-method="remoteMethod"
   >
     <el-option
       v-for="item in options"
@@ -43,7 +46,7 @@ interface Option {
 }
 
 /*global  defineProps, defineEmits*/
-const emit = defineEmits(["change"]);
+const emit = defineEmits(["change", "query"]);
 const props = defineProps({
   options: {
     type: Array as PropType<(Option & { disabled: boolean })[]>,
@@ -62,6 +65,7 @@ const props = defineProps({
   multiple: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
   clearable: { type: Boolean, default: false },
+  isRemote: { type: Boolean, default: false },
 });
 
 const selected = ref<string[] | string>(props.value);
@@ -73,6 +77,13 @@ function changeSelected() {
   );
   emit("change", options);
 }
+
+function remoteMethod(query: string) {
+  if (props.isRemote) {
+    emit("query", query);
+  }
+}
+
 watch(
   () => props.value,
   (data) => {
diff --git a/src/components/index.ts b/src/components/index.ts
index 0ce63ae1..6417e237 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -19,7 +19,7 @@ import TimePicker from "./TimePicker.vue";
 import Selector from "./Selector.vue";
 import Graph from "./Graph.vue";
 import Radio from "./Radio.vue";
-import SelectSingle from "./Select.vue";
+import SelectSingle from "./SelectSingle.vue";
 import type { App } from "vue";
 import VueGridLayout from "vue-grid-layout";
 
diff --git a/src/graphql/fragments/selector.ts b/src/graphql/fragments/selector.ts
index 4b90d4f9..f855d8f3 100644
--- a/src/graphql/fragments/selector.ts
+++ b/src/graphql/fragments/selector.ts
@@ -52,7 +52,7 @@ export const Instances = {
 export const Endpoints = {
   variable: "$serviceId: ID!, $keyword: String!",
   query: `
-  pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) {
+  pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 20) {
     id
     value: name
      label: name
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index b5eb1be8..ea047d45 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -101,7 +101,6 @@ limitations under the License. -->
         @click="controlMenu"
       />
     </div>
-    <!-- <div class="empty"></div> -->
   </div>
 </template>
 
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index b3823d1d..b0f00231 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -40,7 +40,9 @@ limitations under the License. -->
           size="small"
           placeholder="Select a data"
           @change="changePods"
+          @query="searchPods"
           class="selectorPod"
+          :isRemote="true"
         />
       </div>
       <div class="selectors-item" v-if="states.key === 2 || states.key === 4">
@@ -126,7 +128,6 @@ const params = useRoute().params;
 const toolIcons = ref<{ name: string; content: string; id: string }[]>(
   EndpointRelationTools
 );
-const limit = ref<number>(10);
 const loading = ref<boolean>(false);
 const states = reactive<{
   destService: string;
@@ -403,11 +404,16 @@ function setControls(id: string) {
   }
 }
 
-async function fetchPods(type: string, serviceId: string, setPod: boolean) {
+async function fetchPods(
+  type: string,
+  serviceId: string,
+  setPod: boolean,
+  param?: { keyword?: string }
+) {
   let resp;
   switch (type) {
     case EntityType[2].value:
-      resp = await selectorStore.getEndpoints({ serviceId, limit });
+      resp = await selectorStore.getEndpoints({ serviceId, ...param });
       if (setPod) {
         selectorStore.setCurrentPod(
           selectorStore.pods.length ? selectorStore.pods[0] : null
@@ -428,7 +434,7 @@ async function fetchPods(type: string, serviceId: string, setPod: boolean) {
       resp = await selectorStore.getEndpoints({
         serviceId,
         isRelation: true,
-        limit,
+        ...param,
       });
       if (setPod) {
         selectorStore.setCurrentDestPod(
@@ -483,6 +489,17 @@ function getTools() {
       toolIcons.value = EndpointRelationTools;
   }
 }
+function searchPods(query: string) {
+  const param = {
+    keyword: query,
+  };
+  fetchPods(
+    dashboardStore.entity,
+    selectorStore.currentService.id,
+    false,
+    param
+  );
+}
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {