From 21523b8cb52be9bbd436a3e1a2ce276a3455e254 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Wed, 18 May 2022 17:40:40 +0800
Subject: [PATCH] fix: polish the eBPF profiling widget (#90)

---
 src/types/ebpf.d.ts                           |  2 +-
 src/views/dashboard/related/ebpf/Content.vue  |  8 +++-
 .../related/ebpf/components/EBPFSchedules.vue | 38 +++++++++++++++----
 .../related/ebpf/components/EBPFStack.vue     | 10 ++++-
 .../related/ebpf/components/NewTask.vue       |  4 --
 5 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/types/ebpf.d.ts b/src/types/ebpf.d.ts
index b40597ef..4598528e 100644
--- a/src/types/ebpf.d.ts
+++ b/src/types/ebpf.d.ts
@@ -52,7 +52,7 @@ export type Process = {
   instanceName: string;
   agentId: string;
   detectType: string;
-  attributes: { name: string; value: string };
+  attributes: { name: string; value: string }[];
   labels: string[];
 };
 export type StackElement = {
diff --git a/src/views/dashboard/related/ebpf/Content.vue b/src/views/dashboard/related/ebpf/Content.vue
index e4b0653b..024ecf04 100644
--- a/src/views/dashboard/related/ebpf/Content.vue
+++ b/src/views/dashboard/related/ebpf/Content.vue
@@ -16,7 +16,7 @@ limitations under the License. -->
   <div class="flex-h content">
     <TaskList />
     <div class="vis-graph ml-5">
-      <div class="item">
+      <div class="schedules">
         <EBPFSchedules />
       </div>
       <div class="item">
@@ -44,7 +44,11 @@ import EBPFStack from "./components/EBPFStack.vue";
 .item {
   width: 100%;
   overflow: auto;
-  height: calc(50% - 10px);
+  height: calc(100% - 200px);
   padding-bottom: 10px;
 }
+
+.schedules {
+  height: 190px;
+}
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index a584e40f..2e144ad4 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -34,7 +34,7 @@ limitations under the License. -->
         placeholder="Please input name"
         class="input-with-search"
         size="small"
-        @change="searchProcesses"
+        @change="searchProcesses(0)"
       >
         <template #append>
           <el-button size="small">
@@ -180,7 +180,7 @@ function visTimeline() {
       };
     }
   );
-  searchProcesses();
+  searchProcesses(0);
   if (!timeline.value) {
     return;
   }
@@ -190,6 +190,8 @@ function visTimeline() {
     height: h,
     width: "100%",
     locale: "en",
+    selectable: false,
+    zoomable: false,
   };
   visGraph.value = new Timeline(timeline.value, items, options);
 }
@@ -198,18 +200,38 @@ function changePage(pageIndex: number) {
   searchProcesses(pageIndex);
 }
 
-function searchProcesses(pageIndex?: any) {
+function searchProcesses(pageIndex: number) {
   const arr = processes.value.filter(
-    (d: { name: string; instanceName: string }) =>
+    (d: {
+      name: string;
+      instanceName: string;
+      attributes: { name: string; value: string }[];
+    }) =>
       d.name.includes(searchText.value) ||
-      d.instanceName.includes(searchText.value)
+      d.instanceName.includes(searchText.value) ||
+      searchAttribute(d.attributes, searchText.value)
   );
-  currentProcesses.value = arr.splice(
-    (pageIndex - 1 || 0) * pageSize,
-    pageSize * (pageIndex || 1)
+  currentProcesses.value = arr.filter(
+    (d, index: number) =>
+      (pageIndex - 1 || 0) * pageSize <= index &&
+      pageSize * (pageIndex || 1) > index
   );
 }
 
+function searchAttribute(
+  attributes: { name: string; value: string }[],
+  text: string
+) {
+  const item = attributes.find(
+    (d: { name: string; value: string }) => d.name === "command_line"
+  );
+
+  if (!item) {
+    return false;
+  }
+  return item.value.includes(text);
+}
+
 watch(
   () => ebpfStore.eBPFSchedules,
   () => {
diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
index 9ff7832a..a363b19f 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -78,6 +78,7 @@ function drawGraph() {
     .sort(true)
     .title("")
     .selfValue(false)
+    .inverted(true)
     .setColorMapper((d, originalColor) =>
       d.highlight ? "#6aff8f" : originalColor
     );
@@ -86,8 +87,9 @@ function drawGraph() {
     .direction("w")
     .html(
       (d: { data: StackElement }) =>
-        `<div class="mb-5">Symbol: ${d.data.name}</div><div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
-    );
+        `<div class="mb-5 name">Symbol: ${d.data.name}</div><div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
+    )
+    .style("max-width", "500px");
   flameChart.value.tooltip(tip);
   d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);
 }
@@ -176,4 +178,8 @@ watch(
   color: red;
   margin-top: 20px;
 }
+
+.name {
+  word-wrap: break-word;
+}
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/NewTask.vue b/src/views/dashboard/related/ebpf/components/NewTask.vue
index 5a0e63cc..f5d2597b 100644
--- a/src/views/dashboard/related/ebpf/components/NewTask.vue
+++ b/src/views/dashboard/related/ebpf/components/NewTask.vue
@@ -111,10 +111,6 @@ function changeType(opt: any[]) {
 }
 
 async function createTask() {
-  if (!labels.value.length) {
-    ElMessage.warning("no labels");
-    return;
-  }
   const date = monitorTime.value === "0" ? new Date() : time.value;
   const params = {
     serviceId: selectorStore.currentService.id,