From 6ffd2a467394498841f95a74f86c2acae632a1fd Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sat, 21 May 2022 17:22:46 +0800
Subject: [PATCH] polish ebpf

---
 src/store/modules/ebpf.ts                     |  6 ++++--
 .../related/ebpf/components/EBPFSchedules.vue | 21 +++++++++++++------
 .../related/ebpf/components/TaskList.vue      | 10 ++++++++-
 .../dashboard/related/ebpf/components/data.ts |  2 +-
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index 22995aed..709614b5 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -35,6 +35,7 @@ interface EbpfStore {
   labels: Option[];
   couldProfiling: boolean;
   tip: string;
+  selectedTask: Recordable<EBPFTaskList>;
 }
 
 export const ebpfStore = defineStore({
@@ -47,10 +48,11 @@ export const ebpfStore = defineStore({
     labels: [{ value: "", label: "" }],
     couldProfiling: false,
     tip: "",
+    selectedTask: {},
   }),
   actions: {
-    setCurrentSpan(span: Span) {
-      this.currentSpan = span;
+    setSelectedTask(task: EBPFTaskList) {
+      this.selectedTask = task;
     },
     setCurrentSchedule(s: Trace) {
       this.currentSchedule = s;
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index 589d4c45..fb25c1b1 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -27,6 +27,7 @@ limitations under the License. -->
     </div>
     <div class="flex-h">
       <Selector
+        v-if="ebpfStore.selectedTask.targetType === 'OFF_CPU'"
         :value="aggregateType"
         :options="AggregateTypes"
         size="small"
@@ -34,11 +35,11 @@ limitations under the License. -->
         @change="changeAggregateType"
         class="selector mr-10"
       />
-      <el-button type="primary" size="small">
+      <div class="mr-5 duration" v-if="duration.length">
         <span>{{ duration[0] }}</span>
         <span> ~ </span>
         <span>{{ duration[1] }}</span>
-      </el-button>
+      </div>
       <el-popover placement="bottom" :width="680" trigger="click">
         <template #reference>
           <el-button type="primary" size="small">
@@ -189,10 +190,14 @@ function visTimeline() {
     processes.value.push(d.process);
     return [d.startTime / 10000, d.endTime / 10000];
   });
-  const arr = ranges.flat(1);
-  const min = Math.min(...arr);
-  const max = Math.max(...arr);
-  duration.value = [dateFormat(min * 10000), dateFormat(max * 10000)];
+  if (ranges.length) {
+    const arr = ranges.flat(1);
+    const min = Math.min(...arr);
+    const max = Math.max(...arr);
+    duration.value = [dateFormat(min * 10000), dateFormat(max * 10000)];
+  } else {
+    duration.value = [];
+  }
   searchProcesses(0);
 }
 
@@ -269,4 +274,8 @@ watch(
 .selector {
   width: 120px;
 }
+
+.duration {
+  line-height: 24px;
+}
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue
index 56f298d8..464485ec 100644
--- a/src/views/dashboard/related/ebpf/components/TaskList.vue
+++ b/src/views/dashboard/related/ebpf/components/TaskList.vue
@@ -34,7 +34,13 @@ limitations under the License. -->
               }"
             >
               <div class="ell">
-                <span>{{ i.processLabels.join(" ") || "No Labels" }}</span>
+                <span>
+                  {{
+                    i.processLabels.length
+                      ? i.targetType + ": " + i.processLabels.join(" ")
+                      : `All Processes`
+                  }}
+                </span>
                 <a class="profile-btn r" @click="viewDetail = true">
                   <Icon iconName="view" size="middle" />
                 </a>
@@ -117,6 +123,7 @@ const viewDetail = ref<boolean>(false);
 
 async function changeTask(item: EBPFTaskList) {
   selectedTask.value = item;
+  ebpfStore.setSelectedTask(item);
   const res = await ebpfStore.getEBPFSchedules({
     taskId: item.taskId,
   });
@@ -128,6 +135,7 @@ watch(
   () => ebpfStore.taskList,
   () => {
     selectedTask.value = ebpfStore.taskList[0] || {};
+    ebpfStore.setSelectedTask(selectedTask.value);
   }
 );
 </script>
diff --git a/src/views/dashboard/related/ebpf/components/data.ts b/src/views/dashboard/related/ebpf/components/data.ts
index 7f8b4dc3..1ebc5f4c 100644
--- a/src/views/dashboard/related/ebpf/components/data.ts
+++ b/src/views/dashboard/related/ebpf/components/data.ts
@@ -34,8 +34,8 @@ export const TargetTypes = [
 ];
 
 export const AggregateTypes = [
-  { label: "Duration", value: "DURATION" },
   { label: "Count", value: "COUNT" },
+  { label: "Duration", value: "DURATION" },
 ];
 
 export const InitTaskField = {