From 4f05b20f742344a88853cf8c60ca2713364c7714 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 30 May 2022 16:59:41 +0800
Subject: [PATCH] add rates

---
 src/types/ebpf.d.ts                           |  2 ++
 .../related/ebpf/components/EBPFSchedules.vue |  2 +-
 .../related/ebpf/components/EBPFStack.vue     | 22 +++++++++++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/types/ebpf.d.ts b/src/types/ebpf.d.ts
index 4598528e..40852074 100644
--- a/src/types/ebpf.d.ts
+++ b/src/types/ebpf.d.ts
@@ -65,6 +65,8 @@ export type StackElement = {
   stackType: string;
   value: number;
   children?: StackElement[];
+  rateOfRoot?: string;
+  rateOfParent: string;
 };
 export type AnalyzationTrees = {
   id: string;
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index 7609aba8..d58dfe91 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -173,7 +173,7 @@ async function analyzeEBPF() {
     timeRanges,
     aggregateType: aggregateType.value,
   });
-  if (res.data.errors) {
+  if (res.data && res.data.errors) {
     ElMessage.error(res.data.errors);
     return;
   }
diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
index b69d62f6..01760a75 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -52,6 +52,8 @@ function drawGraph() {
     symbol: "Virtual Root",
     dumpCount: 0,
     stackType: "",
+    rateOfRoot: "",
+    rateOfParent: "",
   };
   countRange();
   for (const tree of ebpfStore.analyzeTrees) {
@@ -87,12 +89,27 @@ function drawGraph() {
   const tip = (d3tip as any)()
     .attr("class", "d3-tip")
     .direction("w")
-    .html((d: { data: StackElement }) => {
+    .html((d: { data: StackElement } & { parent: { data: StackElement } }) => {
+      const name = d.data.name.replace("<", "&lt;").replace(">", "&gt;");
       const valStr =
         ebpfStore.aggregateType === AggregateTypes[0].value
           ? `<div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
           : `<div class="mb-5">Duration: ${d.data.dumpCount} ns</div>`;
-      return `<div class="mb-5 name">Symbol: ${d.data.name}</div>${valStr}`;
+      const rateOfParent =
+        (d.parent &&
+          `<div class="mb-5">Rate Of Parent: ${
+            ((d.data.dumpCount / d.parent.data.dumpCount) * 100).toFixed(3) +
+            "%"
+          }</div>`) ||
+        "";
+      const rateOfRoot =
+        (d.parent &&
+          `<div class="mb-5">Rate Of Root: ${
+            ((d.data.dumpCount / root.dumpCount) * 100).toFixed(3) + "%"
+          }</div>`) ||
+        "";
+
+      return `<div class="mb-5 name">Symbol: ${name}</div>${valStr}${rateOfParent}${rateOfRoot}`;
     })
     .style("max-width", "500px");
   flameChart.value.tooltip(tip);
@@ -122,6 +139,7 @@ function processTree(arr: StackElement[]) {
     obj[item.originId] = item;
   }
   const scale = d3.scaleLinear().domain([min.value, max.value]).range([1, 200]);
+
   for (const item of copyArr) {
     if (item.parentId === "1") {
       const val = Number(scale(item.dumpCount).toFixed(4));