polish ebpf

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) {
+    setSelectedTask(task: EBPFTaskList) {
-      this.currentSpan = span;
+      this.selectedTask = task;
     },
     setCurrentSchedule(s: Trace) {
       this.currentSchedule = s;

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);
+  if (ranges.length) {
-  const min = Math.min(...arr);
+    const arr = ranges.flat(1);
-  const max = Math.max(...arr);
+    const min = Math.min(...arr);
-  duration.value = [dateFormat(min * 10000), dateFormat(max * 10000)];
+    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>

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>

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 = {