From fac72364f52a2f6c04bfe263656d36a6f4b79b52 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 18 Apr 2022 14:59:54 +0800
Subject: [PATCH] add ebpf profile entry

---
 src/store/modules/dashboard.ts        |  7 +-
 src/views/dashboard/controls/Ebpf.vue | 95 +++++++++++++++++++++++++++
 src/views/dashboard/panel/Tool.vue    |  6 ++
 3 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 src/views/dashboard/controls/Ebpf.vue

diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 93df9a64..17bf3fde 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -114,7 +114,12 @@ export const dashboardStore = defineStore({
               : 3,
         };
       }
-      if (type === "Trace" || type === "Profile" || type === "Log") {
+      if (
+        type === "Trace" ||
+        type === "Profile" ||
+        type === "Log" ||
+        type === "Ebpf"
+      ) {
         newItem.h = 36;
       }
       if (type === "Text") {
diff --git a/src/views/dashboard/controls/Ebpf.vue b/src/views/dashboard/controls/Ebpf.vue
new file mode 100644
index 00000000..1faca451
--- /dev/null
+++ b/src/views/dashboard/controls/Ebpf.vue
@@ -0,0 +1,95 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="profile-wrapper flex-v">
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      :width="100"
+      v-if="dashboardStore.editMode"
+    >
+      <template #reference>
+        <span class="delete cp">
+          <Icon iconName="ellipsis_v" size="middle" class="operation" />
+        </span>
+      </template>
+      <div class="tools" @click="removeWidget">
+        <span>{{ t("delete") }}</span>
+      </div>
+    </el-popover>
+    <Header />
+    <Content />
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import Header from "../related/profile/Header.vue";
+import Content from "../related/profile/Content.vue";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+  activeIndex: { type: String, default: "" },
+});
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+
+function removeWidget() {
+  dashboardStore.removeControls(props.data);
+}
+</script>
+<style lang="scss" scoped>
+.profile-wrapper {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  position: relative;
+}
+
+.delete {
+  position: absolute;
+  top: 5px;
+  right: 3px;
+}
+
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+
+.trace {
+  width: 100%;
+  overflow: auto;
+}
+</style>
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 56e1cd96..0752485e 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -435,6 +435,9 @@ function setTabControls(id: string) {
     case "addProfile":
       dashboardStore.addTabControls("Profile");
       break;
+    case "addEbpf":
+      dashboardStore.addTabControls("Ebpf");
+      break;
     case "addTopology":
       dashboardStore.addTabControls("Topology");
       break;
@@ -461,6 +464,9 @@ function setControls(id: string) {
     case "addProfile":
       dashboardStore.addControl("Profile");
       break;
+    case "addEbpf":
+      dashboardStore.addTabControls("Ebpf");
+      break;
     case "addLog":
       dashboardStore.addControl("Log");
       break;