From 93b76e7762f21767c47610e77b53ae4072c370fd Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 4 Aug 2022 15:04:02 +0800
Subject: [PATCH] refactor task list

---
 src/store/modules/ebpf.ts                     |  6 ++--
 .../related/ebpf/components/TaskList.vue      | 33 +++++++++----------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index c4ee5b8a..fae47281 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -135,17 +135,19 @@ export const ebpfStore = defineStore({
           return res.data;
         }
         this.networkTasks = res.data.data.queryEBPFTasks || [];
+        this.selectedNetworkTask = this.networkTasks[0] || {};
+        this.setSelectedNetworkTask(this.selectedNetworkTask);
         if (!this.networkTasks.length) {
           return res.data;
         }
-        this.selectedNetworkTask = this.networkTasks[0] || {};
-        this.setSelectedNetworkTask(this.selectedNetworkTask);
       } else {
         this.tip = "";
         if (res.data.errors) {
           return res.data;
         }
         this.taskList = res.data.data.queryEBPFTasks || [];
+        this.selectedTask = this.taskList[0] || {};
+        this.setSelectedTask(this.selectedTask);
         if (!this.taskList.length) {
           return res.data;
         }
diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue
index 82427b88..7a2d71b2 100644
--- a/src/views/dashboard/related/ebpf/components/TaskList.vue
+++ b/src/views/dashboard/related/ebpf/components/TaskList.vue
@@ -30,7 +30,7 @@ limitations under the License. -->
             <td
               class="profile-td"
               :class="{
-                selected: selectedTask.taskId === i.taskId,
+                selected: ebpfStore.selectedTask.taskId === i.taskId,
               }"
             >
               <div class="ell">
@@ -73,45 +73,51 @@ limitations under the License. -->
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("taskId") }}:</span>
           <span class="g-sm-8 wba">
-            {{ selectedTask.taskId }}
+            {{ ebpfStore.selectedTask.taskId }}
           </span>
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("service") }}:</span>
-          <span class="g-sm-8 wba">{{ selectedTask.serviceName }}</span>
+          <span class="g-sm-8 wba">{{
+            ebpfStore.selectedTask.serviceName
+          }}</span>
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("labels") }}:</span>
           <span class="g-sm-8 wba">
-            {{ selectedTask.processLabels.join(";") }}
+            {{ ebpfStore.selectedTask.processLabels.join(";") }}
           </span>
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
           <span class="g-sm-8 wba">
-            {{ dateFormat(selectedTask.taskStartTime) }}
+            {{ dateFormat(ebpfStore.selectedTask.taskStartTime) }}
           </span>
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span>
           <span class="g-sm-8 wba">
-            {{ selectedTask.fixedTriggerDuration / 60 }} min
+            {{ ebpfStore.selectedTask.fixedTriggerDuration / 60 }} min
           </span>
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("triggerType") }}:</span>
-          <span class="g-sm-8 wba">{{ selectedTask.triggerType }}</span>
+          <span class="g-sm-8 wba">{{
+            ebpfStore.selectedTask.triggerType
+          }}</span>
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("targetType") }}:</span>
-          <span class="g-sm-8 wba">{{ selectedTask.targetType }}</span>
+          <span class="g-sm-8 wba">{{
+            ebpfStore.selectedTask.targetType
+          }}</span>
         </div>
       </div>
     </div>
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { useEbpfStore } from "@/store/modules/ebpf";
@@ -122,11 +128,9 @@ const { t } = useI18n();
 const ebpfStore = useEbpfStore();
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
-const selectedTask = ref<EBPFTaskList | Record<string, never>>({});
 const viewDetail = ref<boolean>(false);
 
 async function changeTask(item: EBPFTaskList) {
-  selectedTask.value = item;
   ebpfStore.setSelectedTask(item);
   const res = await ebpfStore.getEBPFSchedules({
     taskId: item.taskId,
@@ -135,13 +139,6 @@ async function changeTask(item: EBPFTaskList) {
     ElMessage.error(res.errors);
   }
 }
-watch(
-  () => ebpfStore.taskList,
-  () => {
-    selectedTask.value = ebpfStore.taskList[0] || {};
-    ebpfStore.setSelectedTask(selectedTask.value);
-  }
-);
 </script>
 <style lang="scss" scoped>
 .profile-task-list {