From 8c9c339417a15b2c7fdeee6f1c88cee357d2281d Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Tue, 13 Jun 2023 14:48:38 +0800
Subject: [PATCH] feat: filter tasks with current process ID (#282)

---
 src/graphql/fragments/ebpf.ts                 | 16 ++++++++++++++++
 src/store/modules/continous-profiling.ts      |  2 +-
 src/store/modules/task-timeline.ts            |  5 ++++-
 .../components/Policy.vue                     |  8 ++++----
 .../components/ProfilingPanel.vue             |  2 +-
 .../task-timeline/components/Timeline.vue     | 19 ++++++++-----------
 6 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/graphql/fragments/ebpf.ts b/src/graphql/fragments/ebpf.ts
index 252214b0..7f635650 100644
--- a/src/graphql/fragments/ebpf.ts
+++ b/src/graphql/fragments/ebpf.ts
@@ -43,11 +43,27 @@ export const queryEBPFTasks = {
     serviceInstanceId
     serviceInstanceName
     processLabels
+    processName
+    processId
     taskStartTime
     triggerType
     fixedTriggerDuration
     targetType
     createTime
+    continuousProfilingCauses {
+      type
+      singleValue {
+        threshold
+        current
+      }
+      uri {
+        uriRegex
+        uriPath
+        threshold
+        current
+      }
+      message
+    }
   }`,
 };
 export const queryEBPFSchedules = {
diff --git a/src/store/modules/continous-profiling.ts b/src/store/modules/continous-profiling.ts
index 19f74f37..2c6bc58a 100644
--- a/src/store/modules/continous-profiling.ts
+++ b/src/store/modules/continous-profiling.ts
@@ -121,7 +121,7 @@ export const continousProfilingStore = defineStore({
           id: index,
         };
       });
-      this.setSelectedStrategy(list[0] || {});
+      this.setSelectedStrategy(this.strategyList[0]);
       if (!this.selectedStrategy.type) {
         return res.data;
       }
diff --git a/src/store/modules/task-timeline.ts b/src/store/modules/task-timeline.ts
index 14272164..25a411a7 100644
--- a/src/store/modules/task-timeline.ts
+++ b/src/store/modules/task-timeline.ts
@@ -64,7 +64,10 @@ export const taskTimelineStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.taskList = res.data.data.queryEBPFTasks || [];
+      const selectorStore = useSelectorStore();
+      this.taskList = (res.data.data.queryEBPFTasks || []).filter(
+        (d: EBPFTaskList) => selectorStore.currentProcess && d.processId === selectorStore.currentProcess.id,
+      );
       // this.selectedTask = this.taskList[0] || {};
       // await this.getGraphData();
       return res.data;
diff --git a/src/views/dashboard/related/continuous-profiling/components/Policy.vue b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
index 8e315dbe..231cedc6 100644
--- a/src/views/dashboard/related/continuous-profiling/components/Policy.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
@@ -53,10 +53,6 @@ limitations under the License. -->
         @change="changeMonitorType($event, index)"
       />
     </div>
-    <div>
-      <div class="label">{{ t("count") }}</div>
-      <el-input-number size="small" class="profile-input" :min="0" v-model="item.count" @change="changeParam" />
-    </div>
     <div>
       <div class="label">
         <span class="mr-5">{{ t("threshold") }}</span>
@@ -70,6 +66,10 @@ limitations under the License. -->
         @change="changeThreshold(index)"
       />
     </div>
+    <div>
+      <div class="label">{{ t("count") }}</div>
+      <el-input-number size="small" class="profile-input" :min="0" v-model="item.count" @change="changeParam" />
+    </div>
     <div>
       <div class="label">{{ t("period") }}</div>
       <el-input-number size="small" class="profile-input" :min="0" v-model="item.period" @change="changeParam" />
diff --git a/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue b/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue
index cf2bc4a3..1c1af5e4 100644
--- a/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue
+++ b/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue
@@ -71,7 +71,7 @@ limitations under the License. -->
   .item {
     width: 100%;
     overflow: auto;
-    height: calc(100% - 100px);
+    height: calc(100% - 270px);
     padding-bottom: 10px;
   }
 
diff --git a/src/views/dashboard/related/task-timeline/components/Timeline.vue b/src/views/dashboard/related/task-timeline/components/Timeline.vue
index bc8afcad..208586fa 100644
--- a/src/views/dashboard/related/task-timeline/components/Timeline.vue
+++ b/src/views/dashboard/related/task-timeline/components/Timeline.vue
@@ -101,22 +101,19 @@ limitations under the License. -->
         template(item: EBPFTaskList | any) {
           const data = item.data || {};
           const end = data.taskStartTime ? visDate(data.taskStartTime + data.fixedTriggerDuration * 1000) : "";
-
+          let str = "";
+          for (const item of data.continuousProfilingCauses || []) {
+            str += `${item.message};`;
+          }
           let tmp = `
           <div>Task ID: ${data.taskId || ""}</div>
-          <div>Service Name: ${data.serviceName || ""}</div>
-          <div>Service Instance Name: ${data.serviceInstanceName || ""}</div>
-          <div>Service Process Name: ${data.processName || ""}</div>
           <div>Target Type: ${data.targetType || ""}</div>
           <div>Trigger Type: ${data.triggerType || ""}</div>
           <div>Start Time: ${data.taskStartTime ? visDate(data.taskStartTime) : ""}</div>
           <div>End Time: ${end}</div>
+          <div>Causes: ${str}</div>
           <div>Process Labels: ${data.processLabels.join("; ") || ""}</div>`;
-          let str = "";
-          for (const item of data.continuousProfilingCauses || []) {
-            str += `<div>${item.type}: ${getURI(item.uri)}${item.uri.threshold}>=${item.uri.current}</div>`;
-          }
-          return tmp + str;
+          return tmp;
         },
       },
     };
@@ -132,7 +129,7 @@ limitations under the License. -->
   }
 
   function getURI(uri: { uriRegex: string; uriPath: string }) {
-    return uri ? `(${uri.uriRegex || ""} | ${uri.uriPath || ""})` : "";
+    return uri && uri.uriRegex && uri.uriPath ? `(${uri.uriRegex || ""} | ${uri.uriPath || ""})` : "";
   }
 
   function resize() {
@@ -156,7 +153,7 @@ limitations under the License. -->
     taskTimelineStore.setTaskList([]);
   });
   watch(
-    () => selectorStore.currentPod,
+    () => selectorStore.currentProcess,
     () => {
       init();
     },