update endpoint

src/store/modules/profile.ts

@@ -16,7 +16,7 @@
  */
 import { defineStore } from "pinia";
 import { Duration } from "@/types/app";
-import { Service } from "@/types/selector";
+import { Endpoint } from "@/types/selector";
 import {
   TaskListItem,
   SegmentSpan,
@@ -31,7 +31,7 @@ import { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
 interface ProfileState {
-  services: Service[];
+  endpoints: Endpoint[];
   durationTime: Duration;
   condition: { serviceId: string; endpointName: string };
   taskList: TaskListItem[];
@@ -47,7 +47,7 @@ interface ProfileState {
 export const profileStore = defineStore({
   id: "profile",
   state: (): ProfileState => ({
-    services: [{ value: "0", label: "All" }],
+    endpoints: [{ value: "", label: "All" }],
     durationTime: useAppStoreWithOut().durationTime,
     condition: { serviceId: "", endpointName: "" },
     taskList: [],
@@ -75,14 +75,16 @@ export const profileStore = defineStore({
     setHighlightTop() {
       this.highlightTop = !this.highlightTop;
     },
-    async getServices(layer: string) {
-      const res: AxiosResponse = await graphql.query("queryServices").params({
-        layer,
+    async getEndpoints(serviceId: string, keyword?: string) {
+      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
+        serviceId,
+        duration: this.durationTime,
+        keyword: keyword || "",
       });
       if (res.data.errors) {
         return res.data;
       }
-      this.services = res.data.data.services;
+      this.endpoints = [{ value: "", label: "All" }, ...res.data.data.pods];
       return res.data;
     },
     async getTaskList() {

src/store/modules/trace.ts

@@ -95,10 +95,7 @@ export const traceStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.instances = [
-        { value: "0", label: "All" },
-        ...res.data.data.pods,
-      ] || [{ value: " 0", label: "All" }];
+      this.instances = [{ value: "0", label: "All" }, ...res.data.data.pods];
       return res.data;
     },
     async getEndpoints(id: string, keyword?: string) {
@@ -113,10 +110,7 @@ export const traceStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.endpoints = [
-        { value: "0", label: "All" },
-        ...res.data.data.pods,
-      ] || [{ value: "0", label: "All" }];
+      this.endpoints = [{ value: "0", label: "All" }, ...res.data.data.pods];
       return res.data;
     },
     async getTraces() {

src/views/dashboard/panel/Tool.vue

@@ -465,7 +465,7 @@ function setControls(id: string) {
       dashboardStore.addControl("Profile");
       break;
     case "addEbpf":
-      dashboardStore.addTabControls("Ebpf");
+      dashboardStore.addControl("Ebpf");
       break;
     case "addLog":
       dashboardStore.addControl("Log");

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

@@ -14,19 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h header">
-    <!-- <div class="mr-10" v-if="dashboardStore.entity==='All'">
-      <span class="grey mr-5">{{ t("service") }}:</span>
-      <Selector
-        size="small"
-        :value="service.value"
-        :options="profileStore.services"
-        placeholder="Select a service"
-        @change="changeService"
-      />
-    </div> -->
     <div class="mr-10">
       <span class="grey mr-5">{{ t("endpointName") }}:</span>
-      <el-input v-model="endpointName" class="name" size="small" />
+      <Selector
+        class="name"
+        size="small"
+        :value="endpointName"
+        :options="profileStore.endpoints"
+        placeholder="Select a endpoint"
+        :isRemote="true"
+        @change="changeEndpoint"
+        @query="searchEndpoints"
+      />
     </div>
     <el-button
       class="search-btn"
@@ -65,27 +64,30 @@ const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const { t } = useI18n();
-// const service = ref<any>({});
 const endpointName = ref<string>("");
 const newTask = ref<boolean>(false);
 
 searchTasks();
-// getServices();
+searchEndpoints("");
 
-// async function getServices() {
-//   const res = await profileStore.getServices(dashboardStore.layerId);
+async function searchEndpoints(keyword: string) {
+  if (!selectorStore.currentService) {
+    return;
+  }
+  const service = selectorStore.currentService.value;
+  const res = await profileStore.getEndpoints(service, keyword);
 
-//   if (res.errors) {
-//     ElMessage.error(res.errors);
-//     return;
-//   }
-//   service.value = profileStore.services[0];
-//   searchTasks();
-// }
+  if (res.errors) {
+    ElMessage.error(res.errors);
+    return;
+  }
+  endpointName.value = profileStore.endpoints[0].value;
+}
+
+function changeEndpoint(opt: any[]) {
+  endpointName.value = opt[0].value;
+}
 
-// function changeService(opt: any[]) {
-//   service.value = opt[0];
-// }
 async function searchTasks() {
   profileStore.setConditions({
     serviceId: