feat: Support searching endpoints with keyword (#43)

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -219,8 +219,8 @@ async function setMetricType(chart?: any) {
   }
 }
 
-function setDashboards() {
-  const { graph } = dashboardStore.selectedGrid;
+function setDashboards(type?: string) {
+  const graph = type || dashboardStore.selectedGrid.graph;
   const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
   const arr = list.reduce(
     (
@@ -279,7 +279,7 @@ function changeChartType(item: Option) {
     defaultLen.value = 5;
   }
   setMetricType(graph);
-  setDashboards();
+  setDashboards(graph.type);
   states.dashboardName = "";
   defaultLen.value = 10;
 }

src/views/dashboard/panel/Tool.vue

@@ -40,7 +40,11 @@ limitations under the License. -->
           size="small"
           placeholder="Select a data"
           @change="changePods"
+          @query="searchPods"
           class="selectorPod"
+          :isRemote="
+            ['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)
+          "
         />
       </div>
       <div class="selectors-item" v-if="states.key === 2 || states.key === 4">
@@ -60,15 +64,17 @@ limitations under the License. -->
             dashboardStore.entity === "EndpointRelation"
               ? "$DestinationEndpoint"
               : "$DestinationServiceInstance"
-          }}</span
-        >
+          }}
+        </span>
         <Selector
           v-model="states.currentDestPod"
           :options="selectorStore.destPods"
           size="small"
           placeholder="Select a data"
-          @change="changePods"
+          @change="changeDestPods"
           class="selectorPod"
+          @query="searchDestPods"
+          :isRemote="dashboardStore.entity === 'EndpointRelation'"
         />
       </div>
     </div>
@@ -126,7 +132,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;
@@ -320,6 +325,14 @@ function changePods(pod: any) {
   }
 }
 
+function changeDestPods(pod: any) {
+  if (pod[0]) {
+    selectorStore.setCurrentDestPod(pod[0]);
+  } else {
+    selectorStore.setCurrentDestPod(null);
+  }
+}
+
 function changeMode() {
   if (dashboardStore.editMode) {
     ElMessage.warning(t("editWarning"));
@@ -403,11 +416,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 +446,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 +501,23 @@ function getTools() {
       toolIcons.value = EndpointRelationTools;
   }
 }
+function searchPods(query: string) {
+  const param = {
+    keyword: query,
+  };
+  fetchPods(EntityType[2].value, selectorStore.currentService.id, false, param);
+}
+function searchDestPods(query: string) {
+  const param = {
+    keyword: query,
+  };
+  fetchPods(
+    EntityType[6].value,
+    selectorStore.currentDestService.id,
+    false,
+    param
+  );
+}
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {

src/views/dashboard/related/log/Header.vue

@@ -46,6 +46,8 @@ limitations under the License. -->
         :options="logStore.endpoints"
         placeholder="Select a endpoint"
         @change="changeField('endpoint', $event)"
+        :isRemote="true"
+        @query="searchEndpoints"
       />
     </div>
   </div>
@@ -243,6 +245,12 @@ function changeField(type: string, opt: any) {
     getInstances(state.service.id);
   }
 }
+async function searchEndpoints(keyword: string) {
+  const resp = await logStore.getEndpoints(state.service.id, keyword);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+  }
+}
 function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
   tagsList.value = data.tagsList;
   tagsMap.value = data.tagsMap;

src/views/dashboard/related/trace/Filter.vue

@@ -41,7 +41,9 @@ limitations under the License. -->
         :value="state.endpoint.value"
         :options="traceStore.endpoints"
         placeholder="Select a endpoint"
+        :isRemote="true"
         @change="changeField('endpoint', $event)"
+        @query="searchEndpoints"
       />
     </div>
     <div class="mr-5">
@@ -149,8 +151,8 @@ async function getServices() {
   getInstances(state.service.id);
 }
 
-async function getEndpoints(id?: string) {
-  const resp = await traceStore.getEndpoints(id);
+async function getEndpoints(id?: string, keyword?: string) {
+  const resp = await traceStore.getEndpoints(id, keyword);
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return;
@@ -208,6 +210,12 @@ function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
   tagsList.value = data.tagsList;
   tagsMap.value = data.tagsMap;
 }
+async function searchEndpoints(keyword: string) {
+  const resp = await traceStore.getEndpoints(state.service.id, keyword);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+  }
+}
 watch(
   () => [selectorStore.currentPod],
   () => {