set endpoints

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) => {

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

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

src/layout/components/SideBar.vue

@@ -101,7 +101,6 @@ limitations under the License. -->
         @click="controlMenu"
       />
     </div>
-    <!-- <div class="empty"></div> -->
   </div>
 </template>
 

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 {