update

src/store/modules/async-profiling.ts

@@ -82,13 +82,12 @@ export const asyncProfilingStore = defineStore({
       this.taskProgress = res.data.data.taskProgress;
       return res.data;
     },
-    async getServiceInstances(param?: { serviceId: string; isRelation: boolean }): Promise<Nullable<AxiosResponse>> {
-      const serviceId = param ? param.serviceId : this.currentService?.id;
-      if (!serviceId) {
+    async getServiceInstances(param: { serviceId: string; isRelation: boolean }): Promise<Nullable<AxiosResponse>> {
+      if (!param.serviceId) {
         return null;
       }
       const res: AxiosResponse = await graphql.query("queryInstances").params({
-        serviceId,
+        serviceId: param.serviceId,
         duration: useAppStoreWithOut().durationTime,
       });
       if (!res.data.errors) {

src/views/dashboard/related/async-profiling/Content.vue

@@ -29,16 +29,18 @@ limitations under the License. -->
   import { onMounted } from "vue";
   import { ElMessage } from "element-plus";
   import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
+  import { useSelectorStore } from "@/store/modules/selectors";
   import TaskList from "./components/TaskList.vue";
   import Filter from "./components/Filter.vue";
   import EBPFStack from "@/views/dashboard/related/ebpf/components/EBPFStack.vue";
   import { ComponentType } from "@/views/dashboard/related/ebpf/components/data";
 
   const asyncProfilingStore = useAsyncProfilingStore();
+  const selectorStore = useSelectorStore();
 
   onMounted(async () => {
-    const resp = await asyncProfilingStore.getServiceInstances();
-    if (resp.errors) {
+    const resp = await asyncProfilingStore.getServiceInstances({ serviceId: selectorStore.currentService.id });
+    if (resp && resp.errors) {
       ElMessage.error(resp.errors);
     }
   });

src/views/dashboard/related/async-profiling/Header.vue

@@ -19,6 +19,7 @@ limitations under the License. -->
       style="width: 240px"
       placeholder="Please input create time to search"
       @change="searchTasks()"
+      size="small"
     >
       <template #append>
         <el-button size="small">
@@ -26,7 +27,7 @@ limitations under the License. -->
         </el-button>
       </template>
     </el-input>
-    <el-button class="search-btn ml-10" @click="createTask">
+    <el-button class="search-btn ml-10" size="small" @click="createTask">
       {{ t("newTask") }}
     </el-button>
   </div>

src/views/dashboard/related/async-profiling/components/Filter.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="flex-h">
     <Selector
-      class="profile-input"
+      class="filter-selector"
       :multiple="true"
       :value="serviceInstanceIds"
       size="small"
@@ -24,7 +24,7 @@ limitations under the License. -->
       @change="changeInstances"
     />
     <Selector
-      class="profile-input"
+      class="filter-selector"
       :value="selectedEventType"
       size="small"
       :options="eventTypes"
@@ -49,11 +49,11 @@ limitations under the License. -->
   const serviceInstanceIds = ref<string[]>([]);
   const selectedEventType = ref<string>("");
   const eventTypes = computed(() =>
-    (asyncProfilingStore.selectedTask.eventTypes || []).map((d: string) => ({ label: d, value: d })),
+    (asyncProfilingStore.selectedTask.eventTypes ?? []).map((d: string) => ({ label: d, value: d })),
   );
   const instances = computed(() =>
     asyncProfilingStore.instances.filter((d: Instance) =>
-      asyncProfilingStore.selectedTask.serviceInstanceIds.includes(d.id),
+      (asyncProfilingStore.selectedTask.serviceInstanceIds ?? []).includes(d.id),
     ),
   );
 
@@ -78,7 +78,8 @@ limitations under the License. -->
   }
 </script>
 <style>
-  .profile-input {
+  .filter-selector {
     width: 300px;
+    margin-right: 10px;
   }
 </style>