From 7d1bb43adb0e3db02327c8cd55e6812955754592 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Wed, 4 May 2022 14:28:27 +0800
Subject: [PATCH 01/37] fix: view spans details and task logs (#76)

---
 src/store/modules/profile.ts                  |  8 ++++++-
 .../components/LogTable/LogService.vue        |  4 ++--
 .../related/profile/components/TaskList.vue   |  4 +++-
 .../trace/components/D3Graph/SpanDetail.vue   |  2 +-
 .../trace/components/Table/TableItem.vue      | 22 ++++++++++++++-----
 5 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts
index 9209e395..6dc8301a 100644
--- a/src/store/modules/profile.ts
+++ b/src/store/modules/profile.ts
@@ -161,7 +161,13 @@ export const profileStore = defineStore({
         this.analyzeTrees = [];
         return res.data;
       }
-      this.segmentSpans = segment.spans;
+      this.segmentSpans = segment.spans.map((d: SegmentSpan) => {
+        return {
+          ...d,
+          segmentId: this.currentSegment.segmentId,
+          traceId: this.currentSegment.traceIds[0],
+        };
+      });
       if (!(segment.spans && segment.spans.length)) {
         this.analyzeTrees = [];
         return res.data;
diff --git a/src/views/dashboard/related/components/LogTable/LogService.vue b/src/views/dashboard/related/components/LogTable/LogService.vue
index c91b1efe..4b40ff80 100644
--- a/src/views/dashboard/related/components/LogTable/LogService.vue
+++ b/src/views/dashboard/related/components/LogTable/LogService.vue
@@ -22,12 +22,12 @@ limitations under the License. -->
       <span v-else-if="item.label === 'tags'">
         {{ tags }}
       </span>
-      <router-link
+      <!-- <router-link
         v-else-if="item.label === 'traceId' && !noLink"
         :to="{ name: 'trace', query: { traceid: data[item.label] } }"
       >
         <span :class="noLink ? '' : 'blue'">{{ data[item.label] }}</span>
-      </router-link>
+      </router-link> -->
       <span v-else>{{ data[item.label] }}</span>
     </div>
   </div>
diff --git a/src/views/dashboard/related/profile/components/TaskList.vue b/src/views/dashboard/related/profile/components/TaskList.vue
index efcbb03f..ce18c162 100644
--- a/src/views/dashboard/related/profile/components/TaskList.vue
+++ b/src/views/dashboard/related/profile/components/TaskList.vue
@@ -124,12 +124,14 @@ limitations under the License. -->
 import { ref } from "vue";
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
+import { useSelectorStore } from "@/store/modules/selectors";
 import { useProfileStore } from "@/store/modules/profile";
 import { TaskLog, TaskListItem } from "@/types/profile";
 import { ElMessage } from "element-plus";
 
 const { t } = useI18n();
 const profileStore = useProfileStore();
+const selectorStore = useSelectorStore();
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 const viewDetail = ref<boolean>(false);
@@ -150,7 +152,7 @@ async function viewTask(e: Event, item: TaskListItem) {
   viewDetail.value = true;
   selectedTask.value = item;
   service.value = (
-    profileStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}
+    selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}
   ).label;
   const res = await profileStore.getTaskLogs({ taskID: item.id });
 
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index e6390ff7..a34db4e9 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -40,7 +40,7 @@ limitations under the License. -->
       <span class="g-sm-8 wba">{{ currentSpan.peer || "No Peer" }}</span>
     </div>
     <div class="mb-10 clear item">
-      <span class="g-sm-4 grey">{{ t("error") }}:</span>
+      <span class="g-sm-4 grey">{{ t("isError") }}:</span>
       <span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
     </div>
     <div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index 7f032fda..4becc9a1 100644
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -105,8 +105,12 @@ limitations under the License. -->
           <span>{{ data.serviceCode }}</span>
         </el-tooltip>
       </div>
-      <div class="application" v-show="headerType === 'profile'">
-        <span @click="viewSpanDetail">{{ t("view") }}</span>
+      <div
+        class="application"
+        v-show="headerType === 'profile'"
+        @click="viewSpan($event)"
+      >
+        <span>{{ t("view") }}</span>
       </div>
     </div>
     <div
@@ -185,7 +189,7 @@ export default defineComponent({
     function toggle() {
       displayChildren.value = !displayChildren.value;
     }
-    function showSelectSpan(dom: any) {
+    function showSelectSpan(dom: HTMLSpanElement) {
       if (!dom) {
         return;
       }
@@ -207,11 +211,18 @@ export default defineComponent({
       }
       viewSpanDetail(dom);
     }
+    function viewSpan(event: any) {
+      const dom = event.path.find((d: any) =>
+        d.className.includes("trace-item")
+      );
+      emit("select", props.data);
+      viewSpanDetail(dom);
+    }
 
-    function selectedItem(data: any) {
+    function selectedItem(data: HTMLSpanElement) {
       emit("select", data);
     }
-    function viewSpanDetail(dom: any) {
+    function viewSpanDetail(dom: HTMLSpanElement) {
       showSelectSpan(dom);
       showDetail.value = true;
     }
@@ -226,6 +237,7 @@ export default defineComponent({
       showDetail,
       selectSpan,
       selectedItem,
+      viewSpan,
       t,
     };
   },

From 2a2500a28d28e52e989891b5b03c4f4466eeaa64 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Thu, 5 May 2022 19:12:32 +0800
Subject: [PATCH 02/37] fix: verify query params to avoid invalid queries (#77)

---
 src/store/modules/ebpf.ts                            | 12 ++++++++++++
 src/store/modules/profile.ts                         | 12 ++++++++++++
 .../related/profile/components/TaskList.vue          |  1 +
 3 files changed, 25 insertions(+)

diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index b03bed73..d59f317b 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -85,6 +85,9 @@ export const ebpfStore = defineStore({
       return res.data;
     },
     async getTaskList(serviceId: string) {
+      if (!serviceId) {
+        return new Promise((resolve) => resolve({}));
+      }
       const res: AxiosResponse = await graphql
         .query("getEBPFTasks")
         .params({ serviceId });
@@ -101,6 +104,9 @@ export const ebpfStore = defineStore({
       return res.data;
     },
     async getEBPFSchedules(params: { taskId: string; duration?: Duration }) {
+      if (!params.taskId) {
+        return new Promise((resolve) => resolve({}));
+      }
       const duration = useAppStoreWithOut().durationTime;
       const res: AxiosResponse = await graphql
         .query("getEBPFSchedules")
@@ -124,6 +130,12 @@ export const ebpfStore = defineStore({
       scheduleIdList: string[];
       timeRanges: Array<{ start: number; end: number }>;
     }) {
+      if (!params.scheduleIdList.length) {
+        return new Promise((resolve) => resolve({}));
+      }
+      if (!params.timeRanges.length) {
+        return new Promise((resolve) => resolve({}));
+      }
       const res: AxiosResponse = await graphql
         .query("getEBPFResult")
         .params(params);
diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts
index 6dc8301a..670ccdb3 100644
--- a/src/store/modules/profile.ts
+++ b/src/store/modules/profile.ts
@@ -122,6 +122,9 @@ export const profileStore = defineStore({
       return res.data;
     },
     async getSegmentList(params: { taskID: string }) {
+      if (!params.taskID) {
+        return new Promise((resolve) => resolve({}));
+      }
       const res: AxiosResponse = await graphql
         .query("getProfileTaskSegmentList")
         .params(params);
@@ -148,6 +151,9 @@ export const profileStore = defineStore({
       return res.data;
     },
     async getSegmentSpans(params: { segmentId: string }) {
+      if (!params.segmentId) {
+        return new Promise((resolve) => resolve({}));
+      }
       const res: AxiosResponse = await graphql
         .query("queryProfileSegment")
         .params(params);
@@ -180,6 +186,12 @@ export const profileStore = defineStore({
       segmentId: string;
       timeRanges: Array<{ start: number; end: number }>;
     }) {
+      if (!params.segmentId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      if (!params.timeRanges.length) {
+        return new Promise((resolve) => resolve({}));
+      }
       const res: AxiosResponse = await graphql
         .query("getProfileAnalyze")
         .params(params);
diff --git a/src/views/dashboard/related/profile/components/TaskList.vue b/src/views/dashboard/related/profile/components/TaskList.vue
index ce18c162..1b4bd5bc 100644
--- a/src/views/dashboard/related/profile/components/TaskList.vue
+++ b/src/views/dashboard/related/profile/components/TaskList.vue
@@ -140,6 +140,7 @@ const selectedTask = ref<TaskListItem | Record<string, never>>({});
 const instanceLogs = ref<TaskLog | any>({});
 
 async function changeTask(item: TaskListItem) {
+  profileStore.setCurrentSegment({});
   selectedTask.value = item;
   const res = await profileStore.getSegmentList({ taskID: item.id });
   if (res.errors) {

From d93a7cead2a9e3a5e98172c960d6818fa2207afa Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Mon, 9 May 2022 14:54:08 +0800
Subject: [PATCH 03/37] feat: mobile terminal adaptation (#78)

---
 src/App.vue                                   |   2 +
 src/layout/components/SideBar.vue             |   9 +-
 src/store/modules/app.ts                      |   5 +
 src/styles/grid.scss                          | 418 +-----------------
 src/styles/lib.scss                           |  18 +
 src/styles/reset.scss                         |   1 +
 src/views/dashboard/controls/Log.vue          |   3 +-
 src/views/dashboard/controls/Tab.vue          |  11 +-
 src/views/dashboard/controls/Trace.vue        |   3 +
 src/views/dashboard/panel/Tool.vue            |   2 +-
 .../related/components/LogTable/Index.vue     |   2 +-
 .../related/ebpf/components/EBPFSchedules.vue |   2 +
 .../dashboard/related/profile/Content.vue     |   1 +
 .../related/profile/components/SpanTree.vue   |   2 +
 src/views/dashboard/related/trace/Filter.vue  |   9 -
 15 files changed, 56 insertions(+), 432 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3f4af22a..edb2bce3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,5 +19,7 @@ limitations under the License. -->
 #app {
   color: #2c3e50;
   height: 100%;
+  overflow: auto;
+  min-width: 1024px;
 }
 </style>
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 6bb75048..138082fc 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -109,14 +109,21 @@ import { ref } from "vue";
 import { useRouter, RouteRecordRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
 import Icon from "@/components/Icon.vue";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
+const appStore = useAppStoreWithOut();
 const { t } = useI18n();
 const name = ref<any>(String(useRouter().currentRoute.value.name));
 const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
   ? ref("light")
   : ref("black");
 const routes = ref<any>(useRouter().options.routes);
-const isCollapse = ref(false);
+if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
+  appStore.setIsMobile(true);
+} else {
+  appStore.setIsMobile(false);
+}
+const isCollapse = ref(appStore.isMobile ? true : false);
 const controlMenu = () => {
   isCollapse.value = !isCollapse.value;
 };
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 8e3de407..e3121c0a 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -33,6 +33,7 @@ interface AppState {
   autoRefresh: boolean;
   pageTitle: string;
   version: string;
+  isMobile: boolean;
 }
 
 export const appStore = defineStore({
@@ -51,6 +52,7 @@ export const appStore = defineStore({
     autoRefresh: false,
     pageTitle: "",
     version: "",
+    isMobile: false,
   }),
   getters: {
     duration(): Duration {
@@ -121,6 +123,9 @@ export const appStore = defineStore({
       this.utcHour = utcHour;
       this.utc = `${utcHour}:${utcMin}`;
     },
+    setIsMobile(mode: boolean) {
+      this.isMobile = mode;
+    },
     setEventStack(funcs: (() => void)[]): void {
       this.eventStack = funcs;
     },
diff --git a/src/styles/grid.scss b/src/styles/grid.scss
index 29b4dac9..be0d07e3 100644
--- a/src/styles/grid.scss
+++ b/src/styles/grid.scss
@@ -15,10 +15,7 @@
  * limitations under the License.
  */
 
-.show-xs,
-.show-sm,
-.show-md,
-.show-lg {
+.show-xs {
   display: none !important;
 }
 @media (max-width: 767px) {
@@ -30,145 +27,6 @@
     display: none !important;
   }
 }
-@media (min-width: 768px) and (max-width: 1023px) {
-  .show-sm {
-    display: block !important;
-  }
-
-  .hide-sm {
-    display: none !important;
-  }
-}
-@media (min-width: 1024px) and (max-width: 1279px) {
-  .show-md {
-    display: block !important;
-  }
-
-  .hide-md {
-    display: none !important;
-  }
-}
-@media (min-width: 1280px) {
-  .show-lg {
-    display: block !important;
-  }
-
-  .hide-lg {
-    display: none !important;
-  }
-}
-
-.g-xs-1,
-.g-xs-2,
-.g-xs-3,
-.g-xs-4,
-.g-xs-5,
-.g-xs-6,
-.g-xs-7,
-.g-xs-8,
-.g-xs-9,
-.g-xs-10,
-.g-xs-11,
-.g-xs-12 {
-  float: left;
-  min-height: 1px;
-}
-
-.g-xs-12 {
-  width: 100%;
-}
-
-.g-xs-11 {
-  width: 91.666%;
-}
-
-.g-xs-10 {
-  width: 83.333%;
-}
-
-.g-xs-9 {
-  width: 75%;
-}
-
-.g-xs-8 {
-  width: 66.666%;
-}
-
-.g-xs-7 {
-  width: 58.333%;
-}
-
-.g-xs-6 {
-  width: 50%;
-}
-
-.g-xs-5 {
-  width: 41.666%;
-}
-
-.g-xs-4 {
-  width: 33.333%;
-}
-
-.g-xs-3 {
-  width: 25%;
-}
-
-.g-xs-2 {
-  width: 16.666%;
-}
-
-.g-xs-1 {
-  width: 8.333%;
-}
-
-.g-xs-space-12 {
-  margin-left: 100%;
-}
-
-.g-xs-space-11 {
-  margin-left: 91.666%;
-}
-
-.g-xs-space-10 {
-  margin-left: 83.333%;
-}
-
-.g-xs-space-9 {
-  margin-left: 75%;
-}
-
-.g-xs-space-8 {
-  margin-left: 66.666%;
-}
-
-.g-xs-space-7 {
-  margin-left: 58.333%;
-}
-
-.g-xs-space-6 {
-  margin-left: 50%;
-}
-
-.g-xs-space-5 {
-  margin-left: 41.666%;
-}
-
-.g-xs-space-4 {
-  margin-left: 33.333%;
-}
-
-.g-xs-space-3 {
-  margin-left: 25%;
-}
-
-.g-xs-space-2 {
-  margin-left: 16.666%;
-}
-
-.g-xs-space-1 {
-  margin-left: 8.333%;
-}
 @media (min-width: 768px) {
   .g-sm-1,
   .g-sm-2,
@@ -233,278 +91,4 @@
   .g-sm-1 {
     width: 8.333%;
   }
-
-  .g-sm-space-12 {
-    margin-left: 100%;
-  }
-
-  .g-sm-space-11 {
-    margin-left: 91.666%;
-  }
-
-  .g-sm-space-10 {
-    margin-left: 83.333%;
-  }
-
-  .g-sm-space-9 {
-    margin-left: 75%;
-  }
-
-  .g-sm-space-8 {
-    margin-left: 66.666%;
-  }
-
-  .g-sm-space-7 {
-    margin-left: 58.333%;
-  }
-
-  .g-sm-space-6 {
-    margin-left: 50%;
-  }
-
-  .g-sm-space-5 {
-    margin-left: 41.666%;
-  }
-
-  .g-sm-space-4 {
-    margin-left: 33.333%;
-  }
-
-  .g-sm-space-3 {
-    margin-left: 25%;
-  }
-
-  .g-sm-space-2 {
-    margin-left: 16.666%;
-  }
-
-  .g-sm-space-1 {
-    margin-left: 8.333%;
-  }
-}
-@media (min-width: 1024px) {
-  .g-md-1,
-  .g-md-2,
-  .g-md-3,
-  .g-md-4,
-  .g-md-5,
-  .g-md-6,
-  .g-md-7,
-  .g-md-8,
-  .g-md-9,
-  .g-md-10,
-  .g-md-11,
-  .g-md-12 {
-    float: left;
-    min-height: 1px;
-  }
-
-  .g-md-12 {
-    width: 100%;
-  }
-
-  .g-md-11 {
-    width: 91.666%;
-  }
-
-  .g-md-10 {
-    width: 83.333%;
-  }
-
-  .g-md-9 {
-    width: 75%;
-  }
-
-  .g-md-8 {
-    width: 66.666%;
-  }
-
-  .g-md-7 {
-    width: 58.333%;
-  }
-
-  .g-md-6 {
-    width: 50%;
-  }
-
-  .g-md-5 {
-    width: 41.666%;
-  }
-
-  .g-md-4 {
-    width: 33.333%;
-  }
-
-  .g-md-3 {
-    width: 25%;
-  }
-
-  .g-md-2 {
-    width: 16.666%;
-  }
-
-  .g-md-1 {
-    width: 8.333%;
-  }
-
-  .g-md-space-12 {
-    margin-left: 100%;
-  }
-
-  .g-md-space-11 {
-    margin-left: 91.666%;
-  }
-
-  .g-md-space-10 {
-    margin-left: 83.333%;
-  }
-
-  .g-md-space-9 {
-    margin-left: 75%;
-  }
-
-  .g-md-space-8 {
-    margin-left: 66.666%;
-  }
-
-  .g-md-space-7 {
-    margin-left: 58.333%;
-  }
-
-  .g-md-space-6 {
-    margin-left: 50%;
-  }
-
-  .g-md-space-5 {
-    margin-left: 41.666%;
-  }
-
-  .g-md-space-4 {
-    margin-left: 33.333%;
-  }
-
-  .g-md-space-3 {
-    margin-left: 25%;
-  }
-
-  .g-md-space-2 {
-    margin-left: 16.666%;
-  }
-
-  .g-md-space-1 {
-    margin-left: 8.333%;
-  }
-}
-@media (min-width: 1280px) {
-  .g-lg-1,
-  .g-lg-2,
-  .g-lg-3,
-  .g-lg-4,
-  .g-lg-5,
-  .g-lg-6,
-  .g-lg-7,
-  .g-lg-8,
-  .g-lg-9,
-  .g-lg-10,
-  .g-lg-11,
-  .g-lg-12 {
-    float: left;
-    min-height: 1px;
-  }
-
-  .g-lg-12 {
-    width: 100%;
-  }
-
-  .g-lg-11 {
-    width: 91.666%;
-  }
-
-  .g-lg-10 {
-    width: 83.333%;
-  }
-
-  .g-lg-9 {
-    width: 75%;
-  }
-
-  .g-lg-8 {
-    width: 66.666%;
-  }
-
-  .g-lg-7 {
-    width: 58.333%;
-  }
-
-  .g-lg-6 {
-    width: 50%;
-  }
-
-  .g-lg-5 {
-    width: 41.666%;
-  }
-
-  .g-lg-4 {
-    width: 33.333%;
-  }
-
-  .g-lg-3 {
-    width: 25%;
-  }
-
-  .g-lg-2 {
-    width: 16.666%;
-  }
-
-  .g-lg-1 {
-    width: 8.333%;
-  }
-
-  .g-lg-space-12 {
-    margin-left: 100%;
-  }
-
-  .g-lg-space-11 {
-    margin-left: 91.666%;
-  }
-
-  .g-lg-space-10 {
-    margin-left: 83.333%;
-  }
-
-  .g-lg-space-9 {
-    margin-left: 75%;
-  }
-
-  .g-lg-space-8 {
-    margin-left: 66.666%;
-  }
-
-  .g-lg-space-7 {
-    margin-left: 58.333%;
-  }
-
-  .g-lg-space-6 {
-    margin-left: 50%;
-  }
-
-  .g-lg-space-5 {
-    margin-left: 41.666%;
-  }
-
-  .g-lg-space-4 {
-    margin-left: 33.333%;
-  }
-
-  .g-lg-space-3 {
-    margin-left: 25%;
-  }
-
-  .g-lg-space-2 {
-    margin-left: 16.666%;
-  }
-
-  .g-lg-space-1 {
-    margin-left: 8.333%;
-  }
 }
diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index 34083a5b..1d2a5084 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -171,3 +171,21 @@
     color: #ddd;
   }
 }
+
+.scroll_bar_style::-webkit-scrollbar {
+  width: 9px;
+  height: 4px;
+  background-color: #eee;
+}
+
+.scroll_bar_style::-webkit-scrollbar-track {
+  background-color: #eee;
+  border-radius: 3px;
+  box-shadow: inset 0 0 6px #ccc;
+}
+
+.scroll_bar_style::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  box-shadow: inset 0 0 6px #ccc;
+  background-color: #aaa;
+}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 0446f4fb..9a95d713 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -29,6 +29,7 @@ body {
 html,
 body {
   height: 100%;
+  overflow-y: hidden;
 }
 
 div,
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index ead077b8..ea80a786 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -64,6 +64,7 @@ function removeWidget() {
   height: 100%;
   font-size: 12px;
   position: relative;
+  overflow: auto;
 }
 
 .delete {
@@ -76,6 +77,7 @@ function removeWidget() {
   padding: 10px;
   font-size: 12px;
   border-bottom: 1px solid #dcdfe6;
+  min-width: 1024px;
 }
 
 .tools {
@@ -93,6 +95,5 @@ function removeWidget() {
 
 .log {
   width: 100%;
-  overflow: auto;
 }
 </style>
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 3ce22394..e500337a 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h tab-header">
-    <div class="tabs">
+    <div class="tabs scroll_bar_style">
       <span
         v-for="(child, idx) in data.children || []"
         :key="idx"
@@ -259,6 +259,10 @@ export default defineComponent({
 .tabs {
   height: 40px;
   color: #ccc;
+  width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+  overflow-y: hidden;
 
   span {
     display: inline-block;
@@ -297,7 +301,10 @@ export default defineComponent({
 
   span.active {
     border-bottom: 1px solid #409eff;
-    color: #409eff;
+
+    .tab-name {
+      color: #409eff;
+    }
   }
 }
 
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 0682fcf4..f740453d 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -66,6 +66,7 @@ function removeWidget() {
   height: 100%;
   font-size: 12px;
   position: relative;
+  overflow: auto;
 }
 
 .delete {
@@ -78,6 +79,7 @@ function removeWidget() {
   padding: 10px;
   font-size: 12px;
   border-bottom: 1px solid #dcdfe6;
+  min-width: 1200px;
 }
 
 .tools {
@@ -96,5 +98,6 @@ function removeWidget() {
 .trace {
   width: 100%;
   overflow: auto;
+  min-width: 1200px;
 }
 </style>
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 6d0339b0..2c785202 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -78,7 +78,7 @@ limitations under the License. -->
         />
       </div>
     </div>
-    <div class="flex-h tools" v-loading="loading">
+    <div class="flex-h tools" v-loading="loading" v-if="!appStore.isMobile">
       <div class="tool-icons flex-h" v-if="dashboardStore.editMode">
         <el-dropdown content="Controls" placement="bottom">
           <i>
diff --git a/src/views/dashboard/related/components/LogTable/Index.vue b/src/views/dashboard/related/components/LogTable/Index.vue
index c6d6fd90..b507b0be 100644
--- a/src/views/dashboard/related/components/LogTable/Index.vue
+++ b/src/views/dashboard/related/components/LogTable/Index.vue
@@ -93,7 +93,7 @@ function setCurrentLog(log: any) {
 .log {
   font-size: 12px;
   height: 100%;
-  overflow: auto;
+  border-bottom: 1px solid #eee;
 }
 
 .log-header {
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index cfdcd91c..a584e40f 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -220,6 +220,8 @@ watch(
 <style lang="scss" scoped>
 .filters {
   margin: 5px 0;
+  width: 100%;
+  min-width: 560px;
 }
 
 .schedules {
diff --git a/src/views/dashboard/related/profile/Content.vue b/src/views/dashboard/related/profile/Content.vue
index 18bd2658..de5cc6ce 100644
--- a/src/views/dashboard/related/profile/Content.vue
+++ b/src/views/dashboard/related/profile/Content.vue
@@ -57,6 +57,7 @@ function loadTrees(l: boolean) {
 .item {
   height: 100%;
   width: calc(100% - 300px);
+  overflow: auto;
 }
 
 .list {
diff --git a/src/views/dashboard/related/profile/components/SpanTree.vue b/src/views/dashboard/related/profile/components/SpanTree.vue
index 0913b7dc..56dcd077 100644
--- a/src/views/dashboard/related/profile/components/SpanTree.vue
+++ b/src/views/dashboard/related/profile/components/SpanTree.vue
@@ -161,6 +161,7 @@ function updateTimeRange() {
   flex-shrink: 0;
   height: 50%;
   width: 100%;
+  min-width: 800px;
 }
 
 .profile-table {
@@ -171,6 +172,7 @@ function updateTimeRange() {
 .profile-trace-detail-wrapper {
   padding: 5px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  width: 100%;
 }
 
 .profile-trace-detail-ids {
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index d527569c..ee157f9f 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -62,15 +62,6 @@ limitations under the License. -->
     </div>
   </div>
   <div class="flex-h">
-    <!-- <div class="mr-5">
-      <span class="grey mr-5">{{ t("timeRange") }}:</span>
-      <TimePicker
-        :value="dateTime"
-        position="bottom"
-        format="YYYY-MM-DD HH:mm"
-        @input="changeTimeRange"
-      />
-    </div> -->
     <div class="mr-5">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
       <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />

From 918b0551adc44a6874caf92c7e0b0f5826235260 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Mon, 9 May 2022 20:18:20 +0800
Subject: [PATCH 04/37] fix: set dropdown for the Tab widget, init instance
 relation selectors, update sankey graph (#79)

---
 src/components/Graph.vue                      |  3 -
 src/layout/components/SideBar.vue             |  2 +-
 src/views/dashboard/controls/Tab.vue          | 70 ++++++-------------
 src/views/dashboard/panel/Tool.vue            | 23 ++++--
 .../topology/components/PodTopology.vue       |  3 -
 5 files changed, 41 insertions(+), 60 deletions(-)

diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 9b51be12..7d1ba978 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -53,9 +53,6 @@ const available = computed(
     (Array.isArray(props.option.series.data) && props.option.series.data[0])
 );
 onMounted(async () => {
-  if (!available.value) {
-    return;
-  }
   await setOptions(props.option);
   chartRef.value && addResizeListener(unref(chartRef), resize);
   setTimeout(() => {
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 138082fc..8a997626 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -118,7 +118,7 @@ const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
   ? ref("light")
   : ref("black");
 const routes = ref<any>(useRouter().options.routes);
-if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
+if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
   appStore.setIsMobile(true);
 } else {
   appStore.setIsMobile(false);
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index e500337a..524e9f7e 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h tab-header">
-    <div class="tabs scroll_bar_style">
+    <div class="tabs scroll_bar_style" @click="handleClick">
       <span
         v-for="(child, idx) in data.children || []"
         :key="idx"
@@ -26,15 +26,15 @@ limitations under the License. -->
           v-model="child.name"
           placeholder="Please input"
           class="tab-name"
-          :readonly="isNaN(editTabIndex)"
-          :class="{ view: isNaN(editTabIndex) }"
+          :readonly="isNaN(editTabIndex) && !canEditTabName"
+          :class="{ view: !canEditTabName }"
         />
         <Icon
           v-show="activeTabIndex === idx"
           size="sm"
           iconName="cancel"
           @click="deleteTabItem($event, idx)"
-          v-if="dashboardStore.editMode"
+          v-if="dashboardStore.editMode && canEditTabName"
         />
       </span>
       <span class="tab-icons" v-if="dashboardStore.editMode">
@@ -46,35 +46,21 @@ limitations under the License. -->
       </span>
     </div>
     <div class="operations" v-if="dashboardStore.editMode">
-      <el-popover
-        placement="bottom"
-        trigger="click"
-        :width="200"
-        v-model:visible="showTools"
-      >
-        <template #reference>
-          <span>
-            <Icon
-              iconName="ellipsis_v"
-              size="middle"
-              class="operation"
-              @click="showTools = true"
-            />
-          </span>
+      <el-dropdown placement="bottom" trigger="click" :width="200">
+        <span class="icon-operation">
+          <Icon iconName="ellipsis_v" size="middle" />
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="canEditTabName = true">
+              <span class="edit-tab">{{ t("editTab") }}</span>
+            </el-dropdown-item>
+            <el-dropdown-item @click="removeTab">
+              <span>{{ t("delete") }}</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
         </template>
-        <div
-          class="tools"
-          @click="
-            canEditTabName = true;
-            showTools = false;
-          "
-        >
-          <span class="edit-tab">{{ t("editTab") }}</span>
-        </div>
-        <div class="tools" @click="removeTab">
-          <span>{{ t("delete") }}</span>
-        </div>
-      </el-popover>
+      </el-dropdown>
     </div>
   </div>
   <div class="tab-layout" @click="handleClick">
@@ -144,7 +130,6 @@ export default defineComponent({
     const editTabIndex = ref<number>(NaN); // edit tab item name
     const canEditTabName = ref<boolean>(false);
     const needQuery = ref<boolean>(false);
-    const showTools = ref<boolean>(false);
     const l = dashboardStore.layout.findIndex(
       (d: LayoutConfig) => d.i === props.data.i
     );
@@ -248,7 +233,6 @@ export default defineComponent({
       editTabIndex,
       needQuery,
       canEditTabName,
-      showTools,
       t,
       dragIgnoreFrom,
     };
@@ -316,6 +300,11 @@ export default defineComponent({
   padding-right: 10px;
 }
 
+.icon-operation {
+  display: inline-block;
+  margin-top: 8px;
+}
+
 .tab-header {
   justify-content: space-between;
   width: 100%;
@@ -349,17 +338,4 @@ export default defineComponent({
   padding-top: 30px;
   color: #888;
 }
-
-.tools {
-  padding: 5px 0;
-  color: #999;
-  cursor: pointer;
-  position: relative;
-  text-align: center;
-
-  &:hover {
-    color: #409eff;
-    background-color: #eee;
-  }
-}
 </style>
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 2c785202..bc96d8c3 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -342,7 +342,12 @@ async function getServices() {
   states.currentService = selectorStore.currentService.value;
   const e = dashboardStore.entity.split("Relation")[0];
   if (
-    [EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)
+    [
+      EntityType[2].value,
+      EntityType[3].value,
+      EntityType[5].value,
+      EntityType[6].value,
+    ].includes(dashboardStore.entity)
   ) {
     fetchPods(e, selectorStore.currentService.id, true);
   }
@@ -361,7 +366,10 @@ async function changeService(service: any) {
   if (service[0]) {
     states.currentService = service[0].value;
     selectorStore.setCurrentService(service[0]);
-    fetchPods(dashboardStore.entity, selectorStore.currentService.id, true);
+    const e = dashboardStore.entity.split("Relation")[0];
+    selectorStore.setCurrentPod(null);
+    states.currentPod = "";
+    fetchPods(e, selectorStore.currentService.id, true);
   } else {
     selectorStore.setCurrentService(null);
   }
@@ -371,6 +379,9 @@ function changeDestService(service: any) {
   if (service[0]) {
     states.currentDestService = service[0].value;
     selectorStore.setCurrentDestService(service[0]);
+    selectorStore.setCurrentDestPod(null);
+    states.currentDestPod = "";
+    fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true);
   } else {
     selectorStore.setCurrentDestService(null);
   }
@@ -532,11 +543,11 @@ async function fetchPods(
       if (setPod) {
         let p;
         if (states.currentDestPod) {
-          p = selectorStore.pods.find(
+          p = selectorStore.destPods.find(
             (d: { label: string }) => d.label === states.currentDestPod
           );
         } else {
-          p = selectorStore.pods.find(
+          p = selectorStore.destPods.find(
             (d: { label: string }, index: number) => index === 0
           );
         }
@@ -552,11 +563,11 @@ async function fetchPods(
       if (setPod) {
         let p;
         if (states.currentDestPod) {
-          p = selectorStore.pods.find(
+          p = selectorStore.destPods.find(
             (d: { label: string }) => d.label === states.currentDestPod
           );
         } else {
-          p = selectorStore.pods.find(
+          p = selectorStore.destPods.find(
             (d: { label: string }, index: number) => index === 0
           );
         }
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index ab387612..d4340940 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -178,8 +178,6 @@ function goDashboard() {
     layer: dashboardStore.layerId,
     entity,
   });
-  dashboardStore.setEntity(entity);
-  dashboardStore.setCurrentDashboard(d);
   const path = `/dashboard/${d.layer}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${d.name}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
@@ -218,7 +216,6 @@ function selectNodeLink(d: any) {
       layer: dashboardStore.layerId,
       entity,
     });
-    dashboardStore.setEntity(entity);
     const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${p.name}`;
     const routeUrl = router.resolve({ path });
     window.open(routeUrl.href, "_blank");

From 024a0fe44c9d8acac47fac494ff94a66370cd5ea Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Tue, 10 May 2022 11:07:36 +0800
Subject: [PATCH 05/37]  fix: set graph options(#80)

---
 .../dashboard/configuration/widget/WidgetOptions.vue |  2 +-
 .../dashboard/related/topology/components/Graph.vue  |  6 ++++++
 .../related/topology/components/PodTopology.vue      | 12 ++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/views/dashboard/configuration/widget/WidgetOptions.vue b/src/views/dashboard/configuration/widget/WidgetOptions.vue
index 5372a649..5a77ff5e 100644
--- a/src/views/dashboard/configuration/widget/WidgetOptions.vue
+++ b/src/views/dashboard/configuration/widget/WidgetOptions.vue
@@ -41,7 +41,6 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
 const widget = dashboardStore.selectedGrid.widget || {};
 const title = ref<string>(widget.title || "");
 const tips = ref<string>(widget.tips || "");
@@ -51,6 +50,7 @@ function updateWidgetConfig(param: { [key: string]: string }) {
   if (!key) {
     return;
   }
+  const { selectedGrid } = dashboardStore;
   const widget = {
     ...dashboardStore.selectedGrid.widget,
     [key]: decodeURIComponent(param[key]),
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index d057d35c..c075a5d0 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -277,6 +277,12 @@ function handleLinkClick(event: any, d: Call) {
     layer: dashboardStore.layerId,
     entity: `${e}Relation`,
   });
+  if (!p) {
+    ElMessage.error(
+      `The dashboard named ${settings.value.linkDashboard} doesn't exist`
+    );
+    return;
+  }
   dashboardStore.setEntity(p.entity);
   const path = `/dashboard/related/${p.layer}/${e}Relation/${d.source.id}/${d.target.id}/${p.name}`;
   const routeUrl = router.resolve({ path });
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index d4340940..917dd233 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -178,6 +178,12 @@ function goDashboard() {
     layer: dashboardStore.layerId,
     entity,
   });
+  if (!d) {
+    ElMessage.error(
+      `The dashboard named ${settings.value.nodeDashboard} doesn't exist`
+    );
+    return;
+  }
   const path = `/dashboard/${d.layer}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${d.name}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
@@ -216,6 +222,12 @@ function selectNodeLink(d: any) {
       layer: dashboardStore.layerId,
       entity,
     });
+    if (!p) {
+      ElMessage.error(
+        `The dashboard named ${settings.value.linkDashboard} doesn't exist`
+      );
+      return;
+    }
     const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${p.name}`;
     const routeUrl = router.resolve({ path });
     window.open(routeUrl.href, "_blank");

From a0b57d0a5abc008afc0f8b51a64e3973a796be48 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Tue, 10 May 2022 17:03:47 +0800
Subject: [PATCH 06/37] feat: remove the layer filed for instance query (#81)

---
 src/graphql/fragments/selector.ts | 60 +++++++++++++++----------------
 src/types/selector.d.ts           |  1 -
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/graphql/fragments/selector.ts b/src/graphql/fragments/selector.ts
index f855d8f3..a5c70392 100644
--- a/src/graphql/fragments/selector.ts
+++ b/src/graphql/fragments/selector.ts
@@ -20,10 +20,10 @@ export const Services = {
   services: listServices(layer: $layer) {
     id
     value: name
-      label: name
-      group
-      layers
-      normal
+    label: name
+    group
+    layers
+    normal
   }
   `,
 };
@@ -36,17 +36,16 @@ export const Instances = {
   variable: "$serviceId: ID!, $duration: Duration!",
   query: `
   pods: listInstances(duration: $duration, serviceId: $serviceId) {
-     id
-     value: name
-      label: name
-      language
-      instanceUUID
-      layer
-      attributes {
-        name
-        value
-      }
+    id
+    value: name
+    label: name
+    language
+    instanceUUID
+    attributes {
+      name
+      value
     }
+  }
   `,
 };
 export const Endpoints = {
@@ -66,10 +65,10 @@ export const getService = {
   service: getService(serviceId: $serviceId) {
     id
     value: name
-      label: name
-      group
-      layers
-      normal
+    label: name
+    group
+    layers
+    normal
   }
   `,
 };
@@ -79,16 +78,15 @@ export const getInstance = {
   query: `
   instance: getInstance(instanceId: $instanceId) {
     id
-     value: name
-      label: name
-      language
-      instanceUUID
-      layer
-      attributes {
-        name
-        value
-      }
+    value: name
+    label: name
+    language
+    instanceUUID
+    attributes {
+      name
+      value
     }
+  }
   `,
 };
 
@@ -97,10 +95,10 @@ export const getEndpoint = {
   query: `
   endpoint: getEndpointInfo(endpointId: $endpointId) {
     id
-     value: name
-      label: name
-      serviceId
-      serviceName
+    value: name
+    label: name
+    serviceId
+    serviceName
   }
   `,
 };
diff --git a/src/types/selector.d.ts b/src/types/selector.d.ts
index 4e1439cd..293ef469 100644
--- a/src/types/selector.d.ts
+++ b/src/types/selector.d.ts
@@ -26,7 +26,6 @@ export type Service = {
 export type Instance = {
   value: string;
   label: string;
-  layer?: string;
   language?: string;
   instanceUUID?: string;
   attributes?: { name: string; value: string }[];

From 49c4c96a6aa9df6d0bb1e29315e8bb9499969d18 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Tue, 10 May 2022 17:25:56 +0800
Subject: [PATCH 07/37] remove process layer (#82)

---
 src/graphql/fragments/ebpf.ts | 1 -
 src/types/ebpf.d.ts           | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/graphql/fragments/ebpf.ts b/src/graphql/fragments/ebpf.ts
index 662cfb31..4a80777a 100644
--- a/src/graphql/fragments/ebpf.ts
+++ b/src/graphql/fragments/ebpf.ts
@@ -60,7 +60,6 @@ export const queryEBPFSchedules = {
       serviceName
       instanceId
       instanceName
-      layer
       agentId
       detectType
       attributes {
diff --git a/src/types/ebpf.d.ts b/src/types/ebpf.d.ts
index 7ca3febc..b40597ef 100644
--- a/src/types/ebpf.d.ts
+++ b/src/types/ebpf.d.ts
@@ -50,7 +50,6 @@ export type Process = {
   serviceName: string;
   instanceId: string;
   instanceName: string;
-  layer: string;
   agentId: string;
   detectType: string;
   attributes: { name: string; value: string };

From ca14a7d2c2f1c6cc2ff10485dc27eeaf1292d0a6 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Wed, 11 May 2022 15:05:58 +0800
Subject: [PATCH 08/37] fix: set date to 0 and remove duration filed (#83)

---
 src/components/DateCalendar.vue | 7 +++----
 src/store/modules/ebpf.ts       | 5 ++---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue
index 3e3a150f..f331192e 100755
--- a/src/components/DateCalendar.vue
+++ b/src/components/DateCalendar.vue
@@ -247,7 +247,7 @@ limitations under the License. -->
               (state.showMinutes = state.showSeconds = false)
           "
           :class="{ on: state.showHours }"
-          >{{ state.hour || dd }}</a
+          >{{ dd(state.hour) }}</a
         >
         <span>:</span>
         <a
@@ -257,7 +257,7 @@ limitations under the License. -->
               (state.showHours = state.showSeconds = false)
           "
           :class="{ on: state.showMinutes }"
-          >{{ state.minute || dd }}</a
+          >{{ dd(state.minute) }}</a
         >
         <span v-show="state.m !== 'D'">
           <span>:</span>
@@ -268,7 +268,7 @@ limitations under the License. -->
                 (state.showHours = state.showMinutes = false)
             "
             :class="{ on: state.showSeconds }"
-            >{{ state.second || dd }}</a
+            >{{ dd(state.second) }}</a
           >
         </span>
       </div>
@@ -464,7 +464,6 @@ const status = (
     const minutes = time.getMinutes();
     const seconds = time.getSeconds();
     const milliseconds = time.getMilliseconds();
-    const dd = (t: number) => `0${t}`.slice(-2);
     const map: { [key: string]: string | number } = {
       YYYY: year,
       MM: dd(month + 1),
diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index d59f317b..897abf12 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -103,14 +103,13 @@ export const ebpfStore = defineStore({
       this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
       return res.data;
     },
-    async getEBPFSchedules(params: { taskId: string; duration?: Duration }) {
+    async getEBPFSchedules(params: { taskId: string }) {
       if (!params.taskId) {
         return new Promise((resolve) => resolve({}));
       }
-      const duration = useAppStoreWithOut().durationTime;
       const res: AxiosResponse = await graphql
         .query("getEBPFSchedules")
-        .params({ ...params, duration });
+        .params({ ...params });
 
       if (res.data.errors) {
         this.eBPFSchedules = [];

From 0e0f2704b3f40c01d0f389c26d6253389cfea0e3 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Wed, 11 May 2022 20:02:45 +0800
Subject: [PATCH 09/37] fix graphql query (#84)

---
 src/graphql/fragments/ebpf.ts | 4 ++--
 src/locales/lang/en.ts        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/graphql/fragments/ebpf.ts b/src/graphql/fragments/ebpf.ts
index 4a80777a..7479b623 100644
--- a/src/graphql/fragments/ebpf.ts
+++ b/src/graphql/fragments/ebpf.ts
@@ -48,9 +48,9 @@ export const queryEBPFTasks = {
   }`,
 };
 export const queryEBPFSchedules = {
-  variable: "$taskId: ID!, $duration: Duration!",
+  variable: "$taskId: ID!",
   query: `
-  eBPFSchedules: queryEBPFProfilingSchedules(taskId: $taskId, duration: $duration) {
+  eBPFSchedules: queryEBPFProfilingSchedules(taskId: $taskId) {
     scheduleId
     taskId
     process {
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 9bed54dc..b04edd50 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -134,7 +134,7 @@ const msg = {
   taskId: "Task ID",
   triggerType: "Trigger Type",
   targetType: "Target Type",
-  ebpfTip: "Don't have process could profiling",
+  ebpfTip: "Don't have a process for profiling",
   processSelect: "Click to select processes",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

From b49278702757db8b8d5bf56ffb470d8336fd7f4a Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Thu, 12 May 2022 17:00:07 +0800
Subject: [PATCH 10/37] feat: Implement tags auto-complete for Trace and Log
 (#85)

---
 src/graphql/fragments/log.ts                  |  12 ++
 src/graphql/fragments/trace.ts                |  11 ++
 src/graphql/query/log.ts                      |   4 +
 src/graphql/query/trace.ts                    |  11 +-
 src/locales/lang/en.ts                        |   2 +-
 src/locales/lang/zh.ts                        |   2 +-
 src/store/modules/log.ts                      |  14 ++
 src/store/modules/trace.ts                    |  14 ++
 src/views/components/ConditionTags.vue        | 174 +++++++++++++-----
 src/views/dashboard/related/log/Header.vue    |  28 +--
 src/views/dashboard/related/trace/Filter.vue  |  44 ++---
 .../trace/components/Table/TableItem.vue      |  12 +-
 12 files changed, 244 insertions(+), 84 deletions(-)

diff --git a/src/graphql/fragments/log.ts b/src/graphql/fragments/log.ts
index cfc505d5..78738d8e 100644
--- a/src/graphql/fragments/log.ts
+++ b/src/graphql/fragments/log.ts
@@ -63,3 +63,15 @@ export const QueryLogsByKeywords = {
   query: `
   support: supportQueryLogsByKeywords`,
 };
+
+export const LogTagKeys = {
+  variable: "$duration: Duration!",
+  query: `
+  tagKeys: queryLogTagAutocompleteKeys(duration: $duration)`,
+};
+
+export const LogTagValues = {
+  variable: "$tagKey: String!, $duration: Duration!",
+  query: `
+  tagValues: queryLogTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`,
+};
diff --git a/src/graphql/fragments/trace.ts b/src/graphql/fragments/trace.ts
index 2dd391a1..04f718e0 100644
--- a/src/graphql/fragments/trace.ts
+++ b/src/graphql/fragments/trace.ts
@@ -74,3 +74,14 @@ export const TraceSpans = {
   }
   `,
 };
+export const TraceTagKeys = {
+  variable: "$duration: Duration!",
+  query: `
+  tagKeys: queryTraceTagAutocompleteKeys(duration: $duration)`,
+};
+
+export const TraceTagValues = {
+  variable: "$tagKey: String!, $duration: Duration!",
+  query: `
+  tagValues: queryTraceTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`,
+};
diff --git a/src/graphql/query/log.ts b/src/graphql/query/log.ts
index cac2e2e1..dfe8c002 100644
--- a/src/graphql/query/log.ts
+++ b/src/graphql/query/log.ts
@@ -19,9 +19,13 @@ import {
   QueryBrowserErrorLogs,
   QueryServiceLogs,
   QueryLogsByKeywords,
+  LogTagValues,
+  LogTagKeys,
 } from "../fragments/log";
 
 export const queryBrowserErrorLogs = `query queryBrowserErrorLogs(${QueryBrowserErrorLogs.variable}) {
   ${QueryBrowserErrorLogs.query}}`;
 export const queryServiceLogs = `query queryLogs(${QueryServiceLogs.variable}) {${QueryServiceLogs.query}}`;
 export const queryLogsByKeywords = `query queryLogsByKeywords {${QueryLogsByKeywords.query}}`;
+export const queryLogTagValues = `query queryTagValues(${LogTagValues.variable}) {${LogTagValues.query}}`;
+export const queryLogTagKeys = `query queryTagKeys(${LogTagKeys.variable}) {${LogTagKeys.query}}`;
diff --git a/src/graphql/query/trace.ts b/src/graphql/query/trace.ts
index 6195160a..c4ce706f 100644
--- a/src/graphql/query/trace.ts
+++ b/src/graphql/query/trace.ts
@@ -15,8 +15,17 @@
  * limitations under the License.
  */
 
-import { Traces, TraceSpans } from "../fragments/trace";
+import {
+  Traces,
+  TraceSpans,
+  TraceTagKeys,
+  TraceTagValues,
+} from "../fragments/trace";
 
 export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`;
 
 export const queryTrace = `query queryTrace(${TraceSpans.variable}) {${TraceSpans.query}}`;
+
+export const queryTraceTagKeys = `query queryTraceTagKeys(${TraceTagKeys.variable}) {${TraceTagKeys.query}}`;
+
+export const queryTraceTagValues = `query queryTraceTagValues(${TraceTagValues.variable}) {${TraceTagValues.query}}`;
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index b04edd50..6e3041e0 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -326,7 +326,7 @@ const msg = {
   addExcludingKeywordsOfContent: "Please input a keyword of excluding content",
   noticeTag: "Please press Enter after inputting a tag(key=value).",
   conditionNotice:
-    "Notice: Please press Enter after inputting a tag, key of content, exclude key of content(key=value).",
+    "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
   language: "Language",
 };
 export default msg;
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 3e222342..a2d9ecd5 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -327,7 +327,7 @@ const msg = {
   addExcludingKeywordsOfContent: "请输入一个内容不包含的关键词",
   noticeTag: "请输入一个标签(key=value)之后回车",
   conditionNotice:
-    "请输入一个标签、内容关键词或者内容不包含的关键词(key=value)之后回车",
+    "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
   language: "语言",
 };
 export default msg;
diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts
index b9934976..9790ac22 100644
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -151,6 +151,20 @@ export const logStore = defineStore({
       this.logsTotal = res.data.data.queryBrowserErrorLogs.total;
       return res.data;
     },
+    async getLogTagKeys() {
+      const res: AxiosResponse = await graphql
+        .query("queryLogTagKeys")
+        .params({ duration: useAppStoreWithOut().durationTime });
+
+      return res.data;
+    },
+    async getLogTagValues(tagKey: string) {
+      const res: AxiosResponse = await graphql
+        .query("queryLogTagValues")
+        .params({ tagKey, duration: useAppStoreWithOut().durationTime });
+
+      return res.data;
+    },
   },
 });
 
diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts
index 794cdffa..85a3fec3 100644
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -161,6 +161,20 @@ export const traceStore = defineStore({
       this.traceSpanLogsTotal = res.data.data.queryLogs.total;
       return res.data;
     },
+    async getTagKeys() {
+      const res: AxiosResponse = await graphql
+        .query("queryTraceTagKeys")
+        .params({ duration: useAppStoreWithOut().durationTime });
+
+      return res.data;
+    },
+    async getTagValues(tagKey: string) {
+      const res: AxiosResponse = await graphql
+        .query("queryTraceTagValues")
+        .params({ tagKey, duration: useAppStoreWithOut().durationTime });
+
+      return res.data;
+    },
   },
 });
 
diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index 19b58548..c85ada38 100644
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -13,65 +13,97 @@ 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="flex-h" :class="{ light: theme === 'light' }">
-    <div class="mr-5">
-      <span class="sm grey" v-show="theme === 'dark'">{{ t("tags") }}: </span>
-      <span
-        class="trace-tags"
-        :style="type === 'LOG' ? `min-width: 122px;` : ''"
-      >
-        <span class="selected" v-for="(item, index) in tagsList" :key="index">
-          <span>{{ item }}</span>
-          <span class="remove-icon" @click="removeTags(index)">×</span>
-        </span>
+  <div>
+    <span class="grey">{{ t("tags") }}: </span>
+    <span
+      v-if="tagsList.length"
+      class="trace-tags"
+      :style="type === 'LOG' ? `min-width: 122px;` : ''"
+    >
+      <span class="selected" v-for="(item, index) in tagsList" :key="index">
+        <span>{{ item }}</span>
+        <span class="remove-icon" @click="removeTags(index)">×</span>
       </span>
+    </span>
+    <el-input
+      v-if="type === 'ALARM'"
+      size="small"
+      v-model="tags"
+      class="trace-new-tag"
+      @change="addLabels"
+      :placeholder="t('addTags')"
+    />
+    <span v-else>
       <el-input
         size="small"
         v-model="tags"
         class="trace-new-tag"
-        @change="addLabels"
-        :placeholder="t('addTags')"
+        @click="showClick"
       />
-      <span class="tags-tip">
-        <a
-          target="blank"
-          href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
-        >
-          {{ t("tagsLink") }}
-        </a>
-        <el-tooltip
-          :content="
-            t(
-              type === 'LOG'
-                ? 'logTagsTip'
-                : type === 'TRACE'
-                ? 'traceTagsTip'
-                : 'alarmTagsTip'
-            )
-          "
-        >
-          <span>
-            <Icon class="icon-help mr-5" iconName="help" size="middle" />
-          </span>
-        </el-tooltip>
-        <b v-if="type !== 'LOG'">{{ t("noticeTag") }}</b>
-      </span>
-    </div>
+      <el-dropdown
+        ref="dropdownTag"
+        trigger="contextmenu"
+        :hide-on-click="false"
+        style="margin: 20px 0 0 -130px"
+        v-if="tagArr.length"
+      >
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item, index) in tagArr" :key="index">
+              <span @click="selectTag(item)" class="tag-item">
+                {{ item }}
+              </span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </span>
+    <span
+      class="tags-tip"
+      :class="type !== 'ALARM' && tagArr.length ? 'link-tips' : ''"
+    >
+      <a
+        target="blank"
+        href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
+      >
+        {{ t("tagsLink") }}
+      </a>
+      <el-tooltip :content="t(tipsMap[type])">
+        <span>
+          <Icon class="icon-help mr-5" iconName="help" size="middle" />
+        </span>
+      </el-tooltip>
+      <b v-if="type === 'AL'">{{ t("noticeTag") }}</b>
+    </span>
   </div>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { useTraceStore } from "@/store/modules/trace";
+import { useLogStore } from "@/store/modules/log";
+import { ElMessage } from "element-plus";
 
-/*global defineEmits, defineProps */
+/*global Nullable, defineEmits, defineProps */
 const emit = defineEmits(["update"]);
-defineProps({
+const props = defineProps({
   type: { type: String, default: "TRACE" },
 });
+const traceStore = useTraceStore();
+const logStore = useLogStore();
 const { t } = useI18n();
-const theme = ref<string>("dark");
 const tags = ref<string>("");
 const tagsList = ref<string[]>([]);
+const tagArr = ref<string[]>([]);
+const tagKeys = ref<string[]>([]);
+const tipsMap = {
+  LOG: "logTagsTip",
+  TRACE: "traceTagsTip",
+  ALARM: "alarmTagsTip",
+};
+const dropdownTag = ref<Nullable<any>>(null);
+
+fetchTagKeys();
 
 function removeTags(index: number) {
   tagsList.value.splice(index, 1);
@@ -95,6 +127,55 @@ function updateTags() {
   });
   emit("update", { tagsMap, tagsList: tagsList.value });
 }
+async function fetchTagKeys() {
+  let resp: any = {};
+  if (props.type === "TRACE") {
+    resp = await traceStore.getTagKeys();
+  } else {
+    resp = await logStore.getLogTagKeys();
+  }
+
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  tagArr.value = resp.data.tagKeys;
+  tagKeys.value = resp.data.tagKeys;
+}
+
+async function fetchTagValues() {
+  const param = tags.value.split("=")[0];
+  let resp: any = {};
+  if (props.type === "TRACE") {
+    resp = await traceStore.getTagValues(param);
+  } else {
+    resp = await logStore.getLogTagValues(param);
+  }
+
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  tagArr.value = resp.data.tagValues;
+}
+
+function selectTag(item: string) {
+  if (tags.value.includes("=")) {
+    tags.value += item;
+    addLabels();
+    tagArr.value = tagKeys.value;
+    dropdownTag.value.handleClose();
+    return;
+  }
+  tags.value = item + "=";
+  fetchTagValues();
+}
+
+function showClick() {
+  if (dropdownTag.value) {
+    dropdownTag.value.handleOpen();
+  }
+}
 </script>
 <style lang="scss" scoped>
 .trace-tags {
@@ -121,7 +202,6 @@ function updateTags() {
   padding: 2px 5px;
   border-radius: 3px;
   width: 250px;
-  margin-right: 3px;
 }
 
 .remove-icon {
@@ -130,10 +210,20 @@ function updateTags() {
   cursor: pointer;
 }
 
+.tag-item {
+  display: inline-block;
+  min-width: 210px;
+}
+
 .tags-tip {
   color: #a7aebb;
 }
 
+.link-tips {
+  display: inline-block;
+  margin-left: 130px;
+}
+
 .light {
   color: #3d444f;
 
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 05494e27..b03c84e9 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -50,9 +50,14 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-  </div>
-  <div class="row tips">
-    <b>{{ t("conditionNotice") }}</b>
+    <el-button
+      class="search-btn"
+      size="small"
+      type="primary"
+      @click="searchLogs"
+    >
+      {{ t("search") }}
+    </el-button>
   </div>
   <div class="flex-h row">
     <div class="mr-5 traceId" v-show="!isBrowser">
@@ -61,6 +66,9 @@ limitations under the License. -->
     </div>
     <ConditionTags :type="'LOG'" @update="updateTags" />
   </div>
+  <div class="row tips">
+    <b>{{ t("conditionNotice") }}</b>
+  </div>
   <div class="flex-h" v-show="!isBrowser">
     <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
       <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
@@ -109,14 +117,6 @@ limitations under the License. -->
         </span>
       </el-tooltip>
     </div>
-    <el-button
-      class="search-btn"
-      size="small"
-      type="primary"
-      @click="searchLogs"
-    >
-      {{ t("search") }}
-    </el-button>
   </div>
 </template>
 <script lang="ts" setup>
@@ -326,6 +326,7 @@ watch(
 
 .row {
   margin-bottom: 5px;
+  position: relative;
 }
 
 .inputs-max {
@@ -337,8 +338,11 @@ watch(
 }
 
 .search-btn {
-  margin-left: 20px;
+  position: absolute;
+  top: 0;
+  right: 10px;
   cursor: pointer;
+  width: 120px;
 }
 
 .tips {
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index ee157f9f..5128d807 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
+    <div class="mr-10" v-if="dashboardStore.entity === EntityType[1].value">
       <span class="grey mr-5">{{ t("service") }}:</span>
       <Selector
         size="small"
@@ -24,7 +24,7 @@ limitations under the License. -->
         @change="changeField('service', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
+    <div class="mr-10" v-if="dashboardStore.entity !== EntityType[3].value">
       <span class="grey mr-5">{{ t("instance") }}:</span>
       <Selector
         size="small"
@@ -34,7 +34,7 @@ limitations under the License. -->
         @change="changeField('instance', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
+    <div class="mr-10" v-if="dashboardStore.entity !== EntityType[2].value">
       <span class="grey mr-5">{{ t("endpoint") }}:</span>
       <Selector
         size="small"
@@ -46,7 +46,7 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="grey mr-5">{{ t("status") }}:</span>
       <Selector
         size="small"
@@ -56,27 +56,29 @@ limitations under the License. -->
         @change="changeField('status', $event)"
       />
     </div>
-    <div class="mr-5">
+    <el-button
+      size="small"
+      type="primary"
+      @click="searchTraces"
+      class="search-btn"
+    >
+      {{ t("search") }}
+    </el-button>
+  </div>
+  <div class="flex-h row">
+    <div class="mr-10">
       <span class="grey mr-5">{{ t("traceID") }}:</span>
       <el-input size="small" v-model="traceId" class="traceId" />
     </div>
-  </div>
-  <div class="flex-h">
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
       <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
       <span class="grey mr-5">-</span>
       <el-input size="small" class="inputs" v-model="maxTraceDuration" />
     </div>
+  </div>
+  <div class="flex-h">
     <ConditionTags :type="'TRACE'" @update="updateTags" />
-    <el-button
-      class="search-btn"
-      size="small"
-      type="primary"
-      @click="searchTraces"
-    >
-      {{ t("search") }}
-    </el-button>
   </div>
 </template>
 <script lang="ts" setup>
@@ -109,10 +111,6 @@ const state = reactive<any>({
   service: { value: "", label: "" },
 });
 
-// const dateTime = computed(() => [
-//   appStore.durationRow.start,
-//   appStore.durationRow.end,
-// ]);
 init();
 async function init() {
   if (dashboardStore.entity === EntityType[1].value) {
@@ -241,6 +239,7 @@ watch(
 
 .row {
   margin-bottom: 5px;
+  position: relative;
 }
 
 .traceId {
@@ -248,7 +247,10 @@ watch(
 }
 
 .search-btn {
-  margin-left: 20px;
   cursor: pointer;
+  width: 120px;
+  position: absolute;
+  top: 0;
+  right: 10px;
 }
 </style>
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index 4becc9a1..66ce4285 100644
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -200,9 +200,9 @@ export default defineComponent({
       dom.style.background = "rgba(0, 0, 0, 0.1)";
     }
     function selectSpan(event: any) {
-      const dom = event.path.find((d: any) =>
-        d.className.includes("trace-item")
-      );
+      const dom = event
+        .composedPath()
+        .find((d: any) => d.className.includes("trace-item"));
 
       emit("select", props.data);
       if (props.headerType === "profile") {
@@ -212,9 +212,9 @@ export default defineComponent({
       viewSpanDetail(dom);
     }
     function viewSpan(event: any) {
-      const dom = event.path.find((d: any) =>
-        d.className.includes("trace-item")
-      );
+      const dom = event
+        .composedPath()
+        .find((d: any) => d.className.includes("trace-item"));
       emit("select", props.data);
       viewSpanDetail(dom);
     }

From 784c2e97b820a31cc3a13cb36dda3d0f6c038d8d Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Thu, 12 May 2022 20:57:37 +0800
Subject: [PATCH 11/37] feat: support multiple trees for the flame graph (#86)

---
 src/store/modules/ebpf.ts                     |  2 +-
 src/views/components/ConditionTags.vue        | 10 ++-
 .../related/ebpf/components/EBPFStack.vue     | 61 ++++++++++++++-----
 3 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index 897abf12..c27adcf7 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -153,7 +153,7 @@ export const ebpfStore = defineStore({
         this.analyzeTrees = [];
         return res.data;
       }
-      this.analyzeTrees = analysisEBPFResult.trees[0].elements;
+      this.analyzeTrees = analysisEBPFResult.trees;
       return res.data;
     },
   },
diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index c85ada38..34e60fa4 100644
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -78,11 +78,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { useLogStore } from "@/store/modules/log";
 import { ElMessage } from "element-plus";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 /*global Nullable, defineEmits, defineProps */
 const emit = defineEmits(["update"]);
@@ -91,6 +92,7 @@ const props = defineProps({
 });
 const traceStore = useTraceStore();
 const logStore = useLogStore();
+const appStore = useAppStoreWithOut();
 const { t } = useI18n();
 const tags = ref<string>("");
 const tagsList = ref<string[]>([]);
@@ -176,6 +178,12 @@ function showClick() {
     dropdownTag.value.handleOpen();
   }
 }
+watch(
+  () => appStore.durationTime,
+  () => {
+    fetchTagKeys();
+  }
+);
 </script>
 <style lang="scss" scoped>
 .trace-tags {
diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
index d2776e3a..1e3532d6 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import * as d3 from "d3";
 import d3tip from "d3-tip";
 import { flamegraph } from "d3-flame-graph";
@@ -31,6 +31,8 @@ const ebpfStore = useEbpfStore();
 const stackTree = ref<Nullable<StackElement>>(null);
 const graph = ref<Nullable<HTMLDivElement>>(null);
 const flameChart = ref<any>(null);
+const min = ref<number>(1);
+const max = ref<number>(1);
 
 function drawGraph() {
   if (flameChart.value) {
@@ -39,8 +41,33 @@ function drawGraph() {
   if (!ebpfStore.analyzeTrees.length) {
     return (stackTree.value = null);
   }
-  stackTree.value = processTree(ebpfStore.analyzeTrees);
-
+  const root: StackElement = {
+    parentId: "0",
+    originId: "1",
+    name: "Virtual Root",
+    children: [],
+    value: 0,
+    id: "1",
+    symbol: "Virtual Root",
+    dumpCount: 0,
+    stackType: "",
+  };
+  countRange();
+  for (const tree of ebpfStore.analyzeTrees) {
+    const ele = processTree(tree.elements);
+    root.children && root.children.push(ele);
+  }
+  const param = (root.children || []).reduce(
+    (prev: number[], curr: StackElement) => {
+      prev[0] += curr.value;
+      prev[1] += curr.dumpCount;
+      return prev;
+    },
+    [0, 0]
+  );
+  root.value = param[0];
+  root.dumpCount = param[1];
+  stackTree.value = root;
   const w = (graph.value && graph.value.getBoundingClientRect().width) || 10;
   flameChart.value = flamegraph()
     .width(w - 15)
@@ -65,27 +92,31 @@ function drawGraph() {
   d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);
 }
 
+function countRange() {
+  const list = [];
+  for (const tree of ebpfStore.analyzeTrees) {
+    for (const ele of tree.elements) {
+      list.push(ele.dumpCount);
+    }
+  }
+  max.value = Math.max(...list);
+  min.value = Math.min(...list);
+}
+
 function processTree(arr: StackElement[]) {
-  const copyArr = JSON.parse(JSON.stringify(arr));
+  const copyArr = (window as any).structuredClone(arr);
   const obj: any = {};
   let res = null;
-  let min = 1;
-  let max = 1;
   for (const item of copyArr) {
-    item.originId = item.id;
+    item.parentId = String(Number(item.parentId) + 1);
+    item.originId = String(Number(item.id) + 1);
     item.name = item.symbol;
     delete item.id;
     obj[item.originId] = item;
-    if (item.dumpCount > max) {
-      max = item.dumpCount;
-    }
-    if (item.dumpCount < min) {
-      min = item.dumpCount;
-    }
   }
-  const scale = d3.scaleLinear().domain([min, max]).range([1, 200]);
+  const scale = d3.scaleLinear().domain([min.value, max.value]).range([1, 200]);
   for (const item of copyArr) {
-    if (item.parentId === "0") {
+    if (item.parentId === "1") {
       const val = Number(scale(item.dumpCount).toFixed(4));
       res = item;
       res.value = val;

From 918791f7ed8919def7fd0e7620a741dfb981e276 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Fri, 13 May 2022 14:40:18 +0800
Subject: [PATCH 12/37] fix: the page doesn't need to be re-rendered when the
 url changes (#87)

---
 src/App.vue                                               | 2 +-
 src/layout/components/SideBar.vue                         | 4 ++--
 src/views/dashboard/related/ebpf/components/EBPFStack.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index edb2bce3..1fbc2e99 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@ 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>
-  <router-view :key="$route.fullPath" />
+  <router-view />
 </template>
 <style>
 #app {
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 8a997626..278f8172 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -113,11 +113,11 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 
 const appStore = useAppStoreWithOut();
 const { t } = useI18n();
-const name = ref<any>(String(useRouter().currentRoute.value.name));
+const name = ref<string>(String(useRouter().currentRoute.value.name));
 const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
   ? ref("light")
   : ref("black");
-const routes = ref<any>(useRouter().options.routes);
+const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
 if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
   appStore.setIsMobile(true);
 } else {
diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
index 1e3532d6..9ff7832a 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch, computed } from "vue";
+import { ref, watch } from "vue";
 import * as d3 from "d3";
 import d3tip from "d3-tip";
 import { flamegraph } from "d3-flame-graph";

From 7f474984c40a6d4528c48c127580f3ccda2dab8b Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Sun, 15 May 2022 15:14:02 +0800
Subject: [PATCH 13/37] fix: set duration time (#88)

---
 src/layout/components/AppMain.vue | 13 -------------
 src/layout/components/NavBar.vue  |  3 ---
 src/main.ts                       |  9 ++++++++-
 src/store/modules/dashboard.ts    |  4 ----
 src/store/modules/ebpf.ts         |  5 +----
 src/store/modules/event.ts        | 10 ++++++----
 src/store/modules/log.ts          |  7 ++-----
 src/store/modules/profile.ts      |  7 ++-----
 src/store/modules/selectors.ts    |  8 ++------
 src/store/modules/trace.ts        | 14 ++++----------
 10 files changed, 25 insertions(+), 55 deletions(-)

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 812a3bff..f5f4aa91 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -21,19 +21,6 @@ limitations under the License. -->
     </router-view>
   </section>
 </template>
-<script lang="ts" setup>
-import { ElMessage } from "element-plus";
-import { useAppStoreWithOut } from "@/store/modules/app";
-
-const appStore = useAppStoreWithOut();
-if (!appStore.utc) {
-  const res = appStore.queryOAPTimeInfo();
-
-  if (res.errors) {
-    ElMessage.error(res.errors);
-  }
-}
-</script>
 <style lang="scss" scoped>
 .app-main {
   height: calc(100% - 40px);
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 499c39d4..1f3fe066 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -94,9 +94,6 @@ watch(
   }
 );
 async function getVersion() {
-  if (appStore.version) {
-    return;
-  }
   const res = await appStore.fetchVersion();
   if (res.errors) {
     ElMessage.error(res.errors);
diff --git a/src/main.ts b/src/main.ts
index 9e737946..a9f06f2c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -20,11 +20,18 @@ import router from "./router";
 import { store } from "./store";
 import components from "@/components";
 import i18n from "./locales";
+import { useAppStoreWithOut } from "@/store/modules/app";
 import "./styles/index.ts";
 
 const app = createApp(App);
+const appStore = useAppStoreWithOut();
 
 app.use(components);
 app.use(i18n);
 app.use(store);
-app.use(router).mount("#app");
+mountApp();
+
+async function mountApp() {
+  await appStore.queryOAPTimeInfo();
+  app.use(router).mount("#app");
+}
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 17bf3fde..2ed20f17 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -20,10 +20,8 @@ import { LayoutConfig } from "@/types/dashboard";
 import graphql from "@/graphql";
 import query from "@/graphql/fetch";
 import { DashboardItem } from "@/types/dashboard";
-import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { NewControl, TextConfig } from "../data";
-import { Duration } from "@/types/app";
 import { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
@@ -35,7 +33,6 @@ interface DashboardState {
   entity: string;
   layerId: string;
   activedGridItem: string;
-  durationTime: Duration;
   selectorStore: any;
   showTopology: boolean;
   currentTabItems: LayoutConfig[];
@@ -53,7 +50,6 @@ export const dashboardStore = defineStore({
     entity: "",
     layerId: "",
     activedGridItem: "",
-    durationTime: useAppStoreWithOut().durationTime,
     selectorStore: useSelectorStore(),
     showTopology: false,
     currentTabItems: [],
diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index c27adcf7..2e8cf124 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Duration, Option } from "@/types/app";
+import { Option } from "@/types/app";
 import {
   EBPFTaskCreationRequest,
   EBPFProfilingSchedule,
@@ -26,10 +26,8 @@ import { Trace, Span } from "@/types/trace";
 import { store } from "@/store";
 import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
-import { useAppStoreWithOut } from "@/store/modules/app";
 
 interface EbpfStore {
-  durationTime: Duration;
   taskList: EBPFTaskList[];
   eBPFSchedules: EBPFProfilingSchedule[];
   currentSchedule: EBPFProfilingSchedule | Record<string, never>;
@@ -42,7 +40,6 @@ interface EbpfStore {
 export const ebpfStore = defineStore({
   id: "eBPF",
   state: (): EbpfStore => ({
-    durationTime: useAppStoreWithOut().durationTime,
     taskList: [],
     eBPFSchedules: [],
     currentSchedule: {},
diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts
index b65ec064..8adce8f5 100644
--- a/src/store/modules/event.ts
+++ b/src/store/modules/event.ts
@@ -42,7 +42,6 @@ export const eventStore = defineStore({
     instances: [{ value: "", label: "All" }],
     endpoints: [{ value: "", label: "All" }],
     condition: {
-      time: useAppStoreWithOut().durationTime,
       paging: { pageNum: 1, pageSize: 15, needTotal: true },
     },
   }),
@@ -94,9 +93,12 @@ export const eventStore = defineStore({
     },
     async getEvents() {
       this.loading = true;
-      const res: AxiosResponse = await graphql
-        .query("queryEvents")
-        .params({ condition: this.condition });
+      const res: AxiosResponse = await graphql.query("queryEvents").params({
+        condition: {
+          ...this.condition,
+          time: useAppStoreWithOut().durationTime,
+        },
+      });
       this.loading = false;
       if (res.data.errors) {
         return res.data;
diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts
index 9790ac22..a92981cc 100644
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Duration } from "@/types/app";
 import { Instance, Endpoint, Service } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
@@ -29,7 +28,6 @@ interface LogState {
   instances: Instance[];
   endpoints: Endpoint[];
   conditions: any;
-  durationTime: Duration;
   selectorStore: any;
   supportQueryLogsByKeywords: boolean;
   logs: any[];
@@ -48,7 +46,6 @@ export const logStore = defineStore({
       paging: { pageNum: 1, pageSize: 15, needTotal: true },
     },
     supportQueryLogsByKeywords: true,
-    durationTime: useAppStoreWithOut().durationTime,
     selectorStore: useSelectorStore(),
     logs: [],
     logsTotal: 0,
@@ -74,7 +71,7 @@ export const logStore = defineStore({
         : id;
       const res: AxiosResponse = await graphql.query("queryInstances").params({
         serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
       });
 
       if (res.data.errors) {
@@ -92,7 +89,7 @@ export const logStore = defineStore({
         : id;
       const res: AxiosResponse = await graphql.query("queryEndpoints").params({
         serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
         keyword: keyword || "",
       });
       if (res.data.errors) {
diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts
index 670ccdb3..ef9e3613 100644
--- a/src/store/modules/profile.ts
+++ b/src/store/modules/profile.ts
@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Duration } from "@/types/app";
 import { Endpoint } from "@/types/selector";
 import {
   TaskListItem,
@@ -33,7 +32,6 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 interface ProfileState {
   endpoints: Endpoint[];
   taskEndpoints: Endpoint[];
-  durationTime: Duration;
   condition: { serviceId: string; endpointName: string };
   taskList: TaskListItem[];
   segmentList: Trace[];
@@ -50,7 +48,6 @@ export const profileStore = defineStore({
   state: (): ProfileState => ({
     endpoints: [{ value: "", label: "All" }],
     taskEndpoints: [{ value: "", label: "All" }],
-    durationTime: useAppStoreWithOut().durationTime,
     condition: { serviceId: "", endpointName: "" },
     taskList: [],
     segmentList: [],
@@ -80,7 +77,7 @@ export const profileStore = defineStore({
     async getEndpoints(serviceId: string, keyword?: string) {
       const res: AxiosResponse = await graphql.query("queryEndpoints").params({
         serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
         keyword: keyword || "",
       });
       if (res.data.errors) {
@@ -92,7 +89,7 @@ export const profileStore = defineStore({
     async getTaskEndpoints(serviceId: string, keyword?: string) {
       const res: AxiosResponse = await graphql.query("queryEndpoints").params({
         serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
         keyword: keyword || "",
       });
       if (res.data.errors) {
diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts
index db90a72e..f393052c 100644
--- a/src/store/modules/selectors.ts
+++ b/src/store/modules/selectors.ts
@@ -15,13 +15,11 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Duration } from "@/types/app";
 import { Service, Instance, Endpoint } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
-
 interface SelectorState {
   services: Service[];
   destServices: Service[];
@@ -31,7 +29,6 @@ interface SelectorState {
   currentDestService: Nullable<Service>;
   currentDestPod: Nullable<Instance | Endpoint>;
   destPods: Array<Instance | Endpoint>;
-  durationTime: Duration;
 }
 
 export const selectorStore = defineStore({
@@ -45,7 +42,6 @@ export const selectorStore = defineStore({
     currentPod: null,
     currentDestService: null,
     currentDestPod: null,
-    durationTime: useAppStoreWithOut().durationTime,
   }),
   actions: {
     setCurrentService(service: Nullable<Service>) {
@@ -86,7 +82,7 @@ export const selectorStore = defineStore({
       }
       const res: AxiosResponse = await graphql.query("queryInstances").params({
         serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
       });
       if (!res.data.errors) {
         if (param && param.isRelation) {
@@ -112,7 +108,7 @@ export const selectorStore = defineStore({
       }
       const res: AxiosResponse = await graphql.query("queryEndpoints").params({
         serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
         keyword: params.keyword || "",
         limit: params.limit,
       });
diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts
index 85a3fec3..25eacc6d 100644
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Duration } from "@/types/app";
 import { Instance, Endpoint, Service } from "@/types/selector";
 import { Trace, Span } from "@/types/trace";
 import { store } from "@/store";
@@ -35,10 +34,6 @@ interface TraceState {
   conditions: any;
   traceSpanLogs: any[];
   traceSpanLogsTotal: number;
-  // traceListErrors: string;
-  // traceSpanErrors: string;
-  // traceSpanLogErrors: string;
-  durationTime: Duration;
   selectorStore: any;
 }
 
@@ -60,12 +55,11 @@ export const traceStore = defineStore({
     },
     traceSpanLogs: [],
     traceSpanLogsTotal: 0,
-    durationTime: useAppStoreWithOut().durationTime,
     selectorStore: useSelectorStore(),
   }),
   actions: {
     setTraceCondition(data: any) {
-      this.condition = { ...this.condition, ...data };
+      this.conditions = { ...this.conditions, ...data };
     },
     setCurrentTrace(trace: Trace) {
       this.currentTrace = trace;
@@ -89,7 +83,7 @@ export const traceStore = defineStore({
         : id;
       const res: AxiosResponse = await graphql.query("queryInstances").params({
         serviceId: serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
       });
 
       if (res.data.errors) {
@@ -104,7 +98,7 @@ export const traceStore = defineStore({
         : id;
       const res: AxiosResponse = await graphql.query("queryEndpoints").params({
         serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
         keyword: keyword || "",
       });
       if (res.data.errors) {
@@ -116,7 +110,7 @@ export const traceStore = defineStore({
     async getTraces() {
       const res: AxiosResponse = await graphql
         .query("queryTraces")
-        .params({ condition: this.condition });
+        .params({ condition: this.conditions });
       if (res.data.errors) {
         return res.data;
       }

From 8c7fee4d86fd421317916de8ca6025cd009b76f1 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Mon, 16 May 2022 21:38:39 +0800
Subject: [PATCH 14/37] feat: remove unexpected data for exporting dashboards
 (#89)

---
 src/hooks/useProcessor.ts    |  4 +--
 src/types/dashboard.d.ts     |  6 ++--
 src/views/dashboard/List.vue | 68 +++++++++++++++++++++++++++++++++++-
 3 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts
index e8d25f41..018434df 100644
--- a/src/hooks/useProcessor.ts
+++ b/src/hooks/useProcessor.ts
@@ -331,7 +331,7 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
 }
 function calculateExp(
   arr: { value: number }[],
-  config: { calculation: string }
+  config: { calculation?: string }
 ): (number | string)[] {
   const sum = arr
     .map((d: { value: number }) => d.value)
@@ -356,7 +356,7 @@ function calculateExp(
 
 export function aggregation(
   val: number,
-  config: { calculation: string }
+  config: { calculation?: string }
 ): number | string {
   let data: number | string = Number(val);
 
diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index 6f60b6a0..0601c7ad 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -39,9 +39,9 @@ export interface LayoutConfig {
 }
 
 export type MetricConfigOpt = {
-  unit: string;
-  label: string;
-  calculation: string;
+  unit?: string;
+  label?: string;
+  calculation?: string;
   labelsIndex: string;
   sortOrder: string;
   topN?: number;
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index 5224bd37..7d2bf3c6 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -146,9 +146,10 @@ import type { ElTable } from "element-plus";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import router from "@/router";
-import { DashboardItem } from "@/types/dashboard";
+import { DashboardItem, LayoutConfig } from "@/types/dashboard";
 import { saveFile, readFile } from "@/utils/file";
 import { EntityType } from "./data";
+import { isEmptyObject } from "@/utils/is";
 
 /*global Nullable*/
 const { t } = useI18n();
@@ -221,12 +222,77 @@ function exportTemplates() {
     const layout = JSON.parse(sessionStorage.getItem(key) || "{}");
     return layout;
   });
+  for (const item of templates) {
+    optimizeTemplate(item.configuration.children);
+  }
   const name = `dashboards.json`;
   saveFile(templates, name);
   setTimeout(() => {
     multipleTableRef.value!.clearSelection();
   }, 2000);
 }
+function optimizeTemplate(
+  children: (LayoutConfig & { moved?: boolean; standard?: unknown })[]
+) {
+  for (const child of children || []) {
+    delete child.moved;
+    delete child.activedTabIndex;
+    delete child.standard;
+    if (isEmptyObject(child.graph)) {
+      delete child.graph;
+    }
+    if (child.widget) {
+      if (child.widget.title === "") {
+        delete child.widget.title;
+      }
+      if (child.widget.tips === "") {
+        delete child.widget.tips;
+      }
+    }
+    if (isEmptyObject(child.widget)) {
+      delete child.widget;
+    }
+    if (!(child.metrics && child.metrics.length && child.metrics[0])) {
+      delete child.metrics;
+    }
+    if (
+      !(child.metricTypes && child.metricTypes.length && child.metricTypes[0])
+    ) {
+      delete child.metricTypes;
+    }
+    if (child.metricConfig && child.metricConfig.length) {
+      child.metricConfig.forEach((c, index) => {
+        if (!c.calculation) {
+          delete c.calculation;
+        }
+        if (!c.unit) {
+          delete c.unit;
+        }
+        if (!c.label) {
+          delete c.label;
+        }
+        if (isEmptyObject(c)) {
+          (child.metricConfig || []).splice(index, 1);
+        }
+      });
+    }
+    if (!(child.metricConfig && child.metricConfig.length)) {
+      delete child.metricConfig;
+    }
+    if (child.type === "Tab") {
+      for (const item of child.children || []) {
+        optimizeTemplate(item.children);
+      }
+    }
+    if (
+      ["Trace", "Topology", "Tab", "Profile", "Ebpf", "Log"].includes(
+        child.type
+      )
+    ) {
+      delete child.widget;
+    }
+  }
+}
 function handleEdit(row: DashboardItem) {
   dashboardStore.setMode(true);
   dashboardStore.setEntity(row.entity);

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 15/37] 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,

From 7e0d716111cd09f976195435a48fcca9141d2816 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Wed, 18 May 2022 20:47:18 +0800
Subject: [PATCH 16/37] refactor: remove a timeline graph from the eBPF
 profiling widget (#91)

---
 package-lock.json                             | 201 +-----------------
 package.json                                  |   1 -
 src/views/dashboard/related/ebpf/Content.vue  |   6 +-
 .../related/ebpf/components/EBPFSchedules.vue |  55 ++---
 4 files changed, 32 insertions(+), 231 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9993f986..a53afd05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
         "element-plus": "^2.0.2",
         "lodash": "^4.17.21",
         "pinia": "^2.0.5",
-        "vis-timeline": "^7.5.1",
         "vue": "^3.0.0",
         "vue-grid-layout": "^3.0.0-beta1",
         "vue-i18n": "^9.1.9",
@@ -1812,18 +1811,6 @@
         "ms": "^2.1.1"
       }
     },
-    "node_modules/@egjs/hammerjs": {
-      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
-      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
-      "peer": true,
-      "dependencies": {
-        "@types/hammerjs": "^2.0.36"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/@element-plus/icons-vue": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz",
@@ -3313,12 +3300,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/hammerjs": {
-      "version": "2.0.41",
-      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
-      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
-      "peer": true
-    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.8",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@@ -7901,7 +7882,8 @@
     "node_modules/component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
+      "dev": true
     },
     "node_modules/compressible": {
       "version": "2.0.18",
@@ -8713,12 +8695,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/cssfilter": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
-      "integrity": "sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=",
-      "peer": true
-    },
     "node_modules/cssnano": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
@@ -16462,12 +16438,6 @@
         "node": ">=0.6.0"
       }
     },
-    "node_modules/keycharm": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
-      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
-      "peer": true
-    },
     "node_modules/killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -18259,6 +18229,7 @@
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -21727,15 +21698,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/propagating-hammerjs": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-2.0.1.tgz",
-      "integrity": "sha512-PH3zG5whbSxMocphXJzVtvKr+vWAgfkqVvtuwjSJ/apmEACUoiw6auBAT5HYXpZOR0eGcTAfYG5Yl8h91O5Elg==",
-      "peer": true,
-      "peerDependencies": {
-        "@egjs/hammerjs": "^2.0.17"
-      }
-    },
     "node_modules/proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -26875,6 +26837,7 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -26934,59 +26897,6 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
-    "node_modules/vis-data": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.4.tgz",
-      "integrity": "sha512-usy+ePX1XnArNvJ5BavQod7YRuGQE1pjFl+pu7IS6rCom2EBoG0o1ZzCqf3l5US6MW51kYkLR+efxRbnjxNl7w==",
-      "hasInstallScript": true,
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/visjs"
-      },
-      "peerDependencies": {
-        "uuid": "^7.0.0 || ^8.0.0",
-        "vis-util": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/vis-timeline": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/vis-timeline/-/vis-timeline-7.5.1.tgz",
-      "integrity": "sha512-XZMHHbA8xm9/Y/iu3mE9MT7J5tfWgbdsW+PmqrgINU2QRX24AiqifNHZHV4YYzeJstiTSOg9Gs5qRkxQ0BvZJw==",
-      "hasInstallScript": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/visjs"
-      },
-      "peerDependencies": {
-        "@egjs/hammerjs": "^2.0.0",
-        "component-emitter": "^1.3.0",
-        "keycharm": "^0.3.0 || ^0.4.0",
-        "moment": "^2.24.0",
-        "propagating-hammerjs": "^1.4.0 || ^2.0.0",
-        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0",
-        "vis-data": "^6.3.0 || ^7.0.0",
-        "vis-util": "^3.0.0 || ^4.0.0 || ^5.0.0",
-        "xss": "^1.0.0"
-      }
-    },
-    "node_modules/vis-util": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.3.tgz",
-      "integrity": "sha512-Wf9STUcFrDzK4/Zr7B6epW2Kvm3ORNWF+WiwEz2dpf5RdWkLUXFSbLcuB88n1W6tCdFwVN+v3V4/Xmn9PeL39g==",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/visjs"
-      },
-      "peerDependencies": {
-        "@egjs/hammerjs": "^2.0.0",
-        "component-emitter": "^1.3.0"
-      }
-    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -28835,28 +28745,6 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
-    "node_modules/xss": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.11.tgz",
-      "integrity": "sha512-EimjrjThZeK2MO7WKR9mN5ZC1CSqivSl55wvUK5EtU6acf0rzEE1pN+9ZDrFXJ82BRp3JL38pPE6S4o/rpp1zQ==",
-      "peer": true,
-      "dependencies": {
-        "commander": "^2.20.3",
-        "cssfilter": "0.0.10"
-      },
-      "bin": {
-        "xss": "bin/xss"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
-    "node_modules/xss/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "peer": true
-    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -30311,15 +30199,6 @@
         }
       }
     },
-    "@egjs/hammerjs": {
-      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
-      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
-      "peer": true,
-      "requires": {
-        "@types/hammerjs": "^2.0.36"
-      }
-    },
     "@element-plus/icons-vue": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz",
@@ -31583,12 +31462,6 @@
         "@types/node": "*"
       }
     },
-    "@types/hammerjs": {
-      "version": "2.0.41",
-      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
-      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
-      "peer": true
-    },
     "@types/http-proxy": {
       "version": "1.17.8",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@@ -35280,7 +35153,8 @@
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
+      "dev": true
     },
     "compressible": {
       "version": "2.0.18",
@@ -35921,12 +35795,6 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
-    "cssfilter": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
-      "integrity": "sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=",
-      "peer": true
-    },
     "cssnano": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
@@ -42014,12 +41882,6 @@
         "verror": "1.10.0"
       }
     },
-    "keycharm": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
-      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
-      "peer": true
-    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -43406,7 +43268,8 @@
     "moment": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+      "dev": true
     },
     "move-concurrently": {
       "version": "1.0.1",
@@ -46071,13 +45934,6 @@
         "sisteransi": "^1.0.5"
       }
     },
-    "propagating-hammerjs": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-2.0.1.tgz",
-      "integrity": "sha512-PH3zG5whbSxMocphXJzVtvKr+vWAgfkqVvtuwjSJ/apmEACUoiw6auBAT5HYXpZOR0eGcTAfYG5Yl8h91O5Elg==",
-      "peer": true,
-      "requires": {}
-    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -50179,7 +50035,8 @@
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true
     },
     "v8-compile-cache": {
       "version": "2.3.0",
@@ -50228,26 +50085,6 @@
         }
       }
     },
-    "vis-data": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.4.tgz",
-      "integrity": "sha512-usy+ePX1XnArNvJ5BavQod7YRuGQE1pjFl+pu7IS6rCom2EBoG0o1ZzCqf3l5US6MW51kYkLR+efxRbnjxNl7w==",
-      "peer": true,
-      "requires": {}
-    },
-    "vis-timeline": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/vis-timeline/-/vis-timeline-7.5.1.tgz",
-      "integrity": "sha512-XZMHHbA8xm9/Y/iu3mE9MT7J5tfWgbdsW+PmqrgINU2QRX24AiqifNHZHV4YYzeJstiTSOg9Gs5qRkxQ0BvZJw==",
-      "requires": {}
-    },
-    "vis-util": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.3.tgz",
-      "integrity": "sha512-Wf9STUcFrDzK4/Zr7B6epW2Kvm3ORNWF+WiwEz2dpf5RdWkLUXFSbLcuB88n1W6tCdFwVN+v3V4/Xmn9PeL39g==",
-      "peer": true,
-      "requires": {}
-    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -51759,24 +51596,6 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
-    "xss": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.11.tgz",
-      "integrity": "sha512-EimjrjThZeK2MO7WKR9mN5ZC1CSqivSl55wvUK5EtU6acf0rzEE1pN+9ZDrFXJ82BRp3JL38pPE6S4o/rpp1zQ==",
-      "peer": true,
-      "requires": {
-        "commander": "^2.20.3",
-        "cssfilter": "0.0.10"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "peer": true
-        }
-      }
-    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 66a6188d..ece16b3a 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "element-plus": "^2.0.2",
     "lodash": "^4.17.21",
     "pinia": "^2.0.5",
-    "vis-timeline": "^7.5.1",
     "vue": "^3.0.0",
     "vue-grid-layout": "^3.0.0-beta1",
     "vue-i18n": "^9.1.9",
diff --git a/src/views/dashboard/related/ebpf/Content.vue b/src/views/dashboard/related/ebpf/Content.vue
index 024ecf04..91abfd26 100644
--- a/src/views/dashboard/related/ebpf/Content.vue
+++ b/src/views/dashboard/related/ebpf/Content.vue
@@ -39,16 +39,18 @@ import EBPFStack from "./components/EBPFStack.vue";
 .vis-graph {
   height: 100%;
   width: calc(100% - 300px);
+  min-width: 700px;
+  overflow: auto;
 }
 
 .item {
   width: 100%;
   overflow: auto;
-  height: calc(100% - 200px);
+  height: calc(100% - 70px);
   padding-bottom: 10px;
 }
 
 .schedules {
-  height: 190px;
+  height: 60px;
 }
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index 2e144ad4..3caaff0b 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -13,7 +13,7 @@ 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="filters">
+  <div class="filters flex-h">
     <Selector
       :value="selectedLabels"
       :options="labels"
@@ -23,6 +23,11 @@ limitations under the License. -->
       class="inputs mr-10"
       :multiple="true"
     />
+    <el-button type="primary" size="small">
+      <span>{{ duration[0] }}</span>
+      <span> ~ </span>
+      <span>{{ duration[1] }}</span>
+    </el-button>
     <el-popover placement="bottom" :width="680" trigger="click">
       <template #reference>
         <el-button type="primary" size="small">
@@ -77,7 +82,6 @@ limitations under the License. -->
       {{ t("analyze") }}
     </el-button>
   </div>
-  <div ref="timeline" class="schedules"></div>
 </template>
 <script lang="ts" setup>
 import { ref, watch } from "vue";
@@ -87,25 +91,21 @@ import { Option } from "@/types/app";
 import { TableHeader } from "./data";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { EBPFProfilingSchedule, Process } from "@/types/ebpf";
-import { DataSet, Timeline } from "vis-timeline/standalone";
-import "vis-timeline/styles/vis-timeline-graph2d.css";
 import { ElMessage, ElTable } from "element-plus";
 
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();
 const pageSize = 5;
-/*global Nullable */
 const multipleTableRef = ref<InstanceType<typeof ElTable>>();
 const selectedProcesses = ref<string[]>([]);
-const timeline = ref<Nullable<HTMLDivElement>>(null);
-const visGraph = ref<Nullable<any>>(null);
 const labels = ref<Option[]>([{ label: "All", value: "0" }]);
 const processes = ref<Process[]>([]);
 const currentProcesses = ref<Process[]>([]);
 const selectedLabels = ref<string[]>(["0"]);
 const searchText = ref<string>("");
+const duration = ref<string[]>([]);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  new Date(dayjs(date).format(pattern));
+  dayjs(date).format(pattern);
 
 function changeLabels(opt: any[]) {
   const arr = opt.map((d) => d.value);
@@ -160,40 +160,21 @@ async function analyzeEBPF() {
 }
 
 function visTimeline() {
-  if (visGraph.value) {
-    visGraph.value.destroy();
-  }
   labels.value = [{ label: "All", value: "0" }];
   selectedLabels.value = ["0"];
   processes.value = [];
-  const schedules = ebpfStore.eBPFSchedules.map(
-    (d: EBPFProfilingSchedule, index: number) => {
-      for (const l of d.process.labels) {
-        labels.value.push({ label: l, value: l });
-      }
-      processes.value.push(d.process);
-      return {
-        id: index + 1,
-        content: d.process.name,
-        start: dateFormat(d.startTime),
-        end: dateFormat(d.endTime),
-      };
+  const ranges = ebpfStore.eBPFSchedules.map((d: EBPFProfilingSchedule) => {
+    for (const l of d.process.labels) {
+      labels.value.push({ label: l, value: l });
     }
-  );
+    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)];
   searchProcesses(0);
-  if (!timeline.value) {
-    return;
-  }
-  const h = timeline.value.getBoundingClientRect().height;
-  const items: any = new DataSet(schedules);
-  const options = {
-    height: h,
-    width: "100%",
-    locale: "en",
-    selectable: false,
-    zoomable: false,
-  };
-  visGraph.value = new Timeline(timeline.value, items, options);
 }
 
 function changePage(pageIndex: number) {

From b953904c71fabfc019353895ad247a448ef37dc6 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Thu, 19 May 2022 15:49:24 +0800
Subject: [PATCH 17/37] feat: remove the total filed from query conditions
 (#93)

---
 src/graphql/fragments/log.ts                  |  1 -
 src/graphql/fragments/trace.ts                |  1 -
 src/store/modules/log.ts                      |  6 +----
 src/store/modules/trace.ts                    | 10 +-------
 .../related/components/LogTable/Index.vue     |  2 ++
 src/views/dashboard/related/log/Header.vue    |  2 +-
 src/views/dashboard/related/log/List.vue      | 15 ++++++++----
 src/views/dashboard/related/trace/Detail.vue  | 14 ++++++++---
 src/views/dashboard/related/trace/Filter.vue  | 24 +++++++++++++------
 .../dashboard/related/trace/TraceList.vue     | 22 ++++++++++-------
 .../trace/components/D3Graph/SpanDetail.vue   | 13 +++++++---
 11 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/src/graphql/fragments/log.ts b/src/graphql/fragments/log.ts
index 78738d8e..18e814ec 100644
--- a/src/graphql/fragments/log.ts
+++ b/src/graphql/fragments/log.ts
@@ -54,7 +54,6 @@ export const QueryServiceLogs = {
             value
           }
         }
-        total
     }`,
 };
 
diff --git a/src/graphql/fragments/trace.ts b/src/graphql/fragments/trace.ts
index 04f718e0..e1e0af9b 100644
--- a/src/graphql/fragments/trace.ts
+++ b/src/graphql/fragments/trace.ts
@@ -27,7 +27,6 @@ export const Traces = {
       isError
       traceIds
     }
-    total
   }`,
 };
 
diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts
index a92981cc..ce1674d1 100644
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -31,7 +31,6 @@ interface LogState {
   selectorStore: any;
   supportQueryLogsByKeywords: boolean;
   logs: any[];
-  logsTotal: number;
   loadLogs: boolean;
 }
 
@@ -43,12 +42,11 @@ export const logStore = defineStore({
     endpoints: [{ value: "0", label: "All" }],
     conditions: {
       queryDuration: useAppStoreWithOut().durationTime,
-      paging: { pageNum: 1, pageSize: 15, needTotal: true },
+      paging: { pageNum: 1, pageSize: 15 },
     },
     supportQueryLogsByKeywords: true,
     selectorStore: useSelectorStore(),
     logs: [],
-    logsTotal: 0,
     loadLogs: false,
   }),
   actions: {
@@ -131,7 +129,6 @@ export const logStore = defineStore({
       }
 
       this.logs = res.data.data.queryLogs.logs;
-      this.logsTotal = res.data.data.queryLogs.total;
       return res.data;
     },
     async getBrowserLogs() {
@@ -145,7 +142,6 @@ export const logStore = defineStore({
         return res.data;
       }
       this.logs = res.data.data.queryBrowserErrorLogs.logs;
-      this.logsTotal = res.data.data.queryBrowserErrorLogs.total;
       return res.data;
     },
     async getLogTagKeys() {
diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts
index 25eacc6d..4e337351 100644
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -28,12 +28,10 @@ interface TraceState {
   instances: Instance[];
   endpoints: Endpoint[];
   traceList: Trace[];
-  traceTotal: number;
   traceSpans: Span[];
   currentTrace: Trace | any;
   conditions: any;
   traceSpanLogs: any[];
-  traceSpanLogsTotal: number;
   selectorStore: any;
 }
 
@@ -45,16 +43,14 @@ export const traceStore = defineStore({
     endpoints: [{ value: "0", label: "All" }],
     traceList: [],
     traceSpans: [],
-    traceTotal: 0,
     currentTrace: {},
     conditions: {
       queryDuration: useAppStoreWithOut().durationTime,
       traceState: "ALL",
       queryOrder: "BY_START_TIME",
-      paging: { pageNum: 1, pageSize: 15, needTotal: true },
+      paging: { pageNum: 1, pageSize: 20 },
     },
     traceSpanLogs: [],
-    traceSpanLogsTotal: 0,
     selectorStore: useSelectorStore(),
   }),
   actions: {
@@ -115,7 +111,6 @@ export const traceStore = defineStore({
         return res.data;
       }
       if (!res.data.data.data.traces.length) {
-        this.traceTotal = 0;
         this.traceList = [];
         this.setCurrentTrace({});
         this.setTraceSpans([]);
@@ -128,7 +123,6 @@ export const traceStore = defineStore({
         });
         return d;
       });
-      this.traceTotal = res.data.data.data.total;
       this.setCurrentTrace(res.data.data.data.traces[0] || {});
       return res.data;
     },
@@ -148,11 +142,9 @@ export const traceStore = defineStore({
         .params(params);
       if (res.data.errors) {
         this.traceSpanLogs = [];
-        this.traceSpanLogsTotal = 0;
         return res.data;
       }
       this.traceSpanLogs = res.data.data.queryLogs.logs || [];
-      this.traceSpanLogsTotal = res.data.data.queryLogs.total;
       return res.data;
     },
     async getTagKeys() {
diff --git a/src/views/dashboard/related/components/LogTable/Index.vue b/src/views/dashboard/related/components/LogTable/Index.vue
index b507b0be..4d4f75e7 100644
--- a/src/views/dashboard/related/components/LogTable/Index.vue
+++ b/src/views/dashboard/related/components/LogTable/Index.vue
@@ -94,6 +94,8 @@ function setCurrentLog(log: any) {
   font-size: 12px;
   height: 100%;
   border-bottom: 1px solid #eee;
+  width: 100%;
+  overflow: auto;
 }
 
 .log-header {
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index b03c84e9..023d964e 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -229,7 +229,7 @@ function searchLogs() {
     keywordsOfContent: keywordsOfContent.value,
     excludingKeywordsOfContent: excludingKeywordsOfContent.value,
     tags: tagsMap.value.length ? tagsMap.value : undefined,
-    paging: { pageNum: 1, pageSize: 15, needTotal: true },
+    paging: { pageNum: 1, pageSize: 15 },
     relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
   });
   queryLogs();
diff --git a/src/views/dashboard/related/log/List.vue b/src/views/dashboard/related/log/List.vue
index acc3cfb5..583b30a1 100644
--- a/src/views/dashboard/related/log/List.vue
+++ b/src/views/dashboard/related/log/List.vue
@@ -26,8 +26,10 @@ limitations under the License. -->
       <el-pagination
         v-model:currentPage="logStore.conditions.paging.pageNum"
         v-model:page-size="pageSize"
-        layout="prev, pager, next, jumper"
-        :total="logStore.logsTotal"
+        :small="true"
+        layout="prev, pager, next"
+        :pager-count="5"
+        :total="total"
         @current-change="updatePage"
         :style="`float: right`"
       />
@@ -35,7 +37,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
 import { useLogStore } from "@/store/modules/log";
@@ -49,9 +51,14 @@ const type = ref<string>(
   dashboardStore.layerId === "BROWSER" ? "browser" : "service"
 );
 const pageSize = ref<number>(15);
+const total = computed(() =>
+  logStore.logs.length === pageSize.value
+    ? pageSize.value * logStore.conditions.paging.pageNum + 1
+    : pageSize.value * logStore.conditions.paging.pageNum
+);
 function updatePage(p: number) {
   logStore.setLogCondition({
-    paging: { pageNum: p, pageSize: pageSize.value, needTotal: true },
+    paging: { pageNum: p, pageSize: pageSize.value },
   });
   queryLogs();
 }
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index d44b01a5..4b2cda82 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -44,7 +44,9 @@ limitations under the License. -->
               v-model:currentPage="pageNum"
               v-model:page-size="pageSize"
               :small="true"
-              :total="traceStore.traceSpanLogsTotal"
+              layout="prev, pager, next"
+              :pager-count="5"
+              :total="total"
               @current-change="turnLogsPage"
             />
             <LogTable
@@ -146,7 +148,7 @@ limitations under the License. -->
 </template>
 <script lang="ts">
 import dayjs from "dayjs";
-import { ref, defineComponent } from "vue";
+import { ref, defineComponent, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { Option } from "@/types/app";
@@ -171,6 +173,11 @@ export default defineComponent({
     const displayMode = ref<string>("List");
     const pageNum = ref<number>(1);
     const pageSize = 10;
+    const total = computed(() =>
+      traceStore.traceList.length === pageSize
+        ? pageSize * pageNum.value + 1
+        : pageSize * pageNum.value
+    );
     const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
       dayjs(date).format(pattern);
     const showTraceLogs = ref<boolean>(false);
@@ -202,7 +209,7 @@ export default defineComponent({
           relatedTrace: {
             traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
           },
-          paging: { pageNum: pageNum.value, pageSize, needTotal: true },
+          paging: { pageNum: pageNum.value, pageSize },
         },
       });
       if (res.errors) {
@@ -227,6 +234,7 @@ export default defineComponent({
       pageSize,
       pageNum,
       loading,
+      total,
     };
   },
 });
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index 5128d807..b399fc51 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -72,9 +72,19 @@ limitations under the License. -->
     </div>
     <div class="mr-10">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
-      <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
+      <el-input
+        size="small"
+        class="inputs mr-5"
+        v-model="minTraceDuration"
+        type="number"
+      />
       <span class="grey mr-5">-</span>
-      <el-input size="small" class="inputs" v-model="maxTraceDuration" />
+      <el-input
+        size="small"
+        class="inputs"
+        v-model="maxTraceDuration"
+        type="number"
+      />
     </div>
   </div>
   <div class="flex-h">
@@ -100,8 +110,8 @@ const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const traceStore = useTraceStore();
 const traceId = ref<string>("");
-const minTraceDuration = ref<string>("");
-const maxTraceDuration = ref<string>("");
+const minTraceDuration = ref<number>(NaN);
+const maxTraceDuration = ref<number>(NaN);
 const tagsList = ref<string[]>([]);
 const tagsMap = ref<Option[]>([]);
 const state = reactive<any>({
@@ -174,11 +184,11 @@ function searchTraces() {
     serviceInstanceId: instance || state.instance.id || undefined,
     traceState: state.status.value || "ALL",
     queryDuration: appStore.durationTime,
-    minTraceDuration: appStore.minTraceDuration || undefined,
-    maxTraceDuration: appStore.maxTraceDuration || undefined,
+    minTraceDuration: Number(minTraceDuration.value),
+    maxTraceDuration: Number(maxTraceDuration.value),
     queryOrder: "BY_DURATION",
     tags: tagsMap.value.length ? tagsMap.value : undefined,
-    paging: { pageNum: 1, pageSize: 15, needTotal: true },
+    paging: { pageNum: 1, pageSize: 20 },
   });
   queryTraces();
 }
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index 9240e5de..6e6dd7d5 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -17,9 +17,9 @@ limitations under the License. -->
         v-model:currentPage="traceStore.conditions.paging.pageNum"
         v-model:page-size="pageSize"
         :small="true"
-        layout="prev, pager, next, jumper"
-        :total="traceStore.traceTotal"
-        v-model:pager-count="pageCount"
+        layout="prev, pager, next"
+        :pager-count="5"
+        :total="total"
         @current-change="updatePage"
       />
       <div class="selectors">
@@ -71,7 +71,7 @@ limitations under the License. -->
 
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { ElMessage } from "element-plus";
@@ -83,8 +83,12 @@ const { t } = useI18n();
 const traceStore = useTraceStore();
 const loading = ref<boolean>(false);
 const selectedKey = ref<string>("");
-const pageSize = ref<number>(15);
-const pageCount = ref<number>(5);
+const pageSize = ref<number>(20);
+const total = computed(() =>
+  traceStore.traceList.length === pageSize.value
+    ? pageSize.value * traceStore.conditions.paging.pageNum + 1
+    : pageSize.value * traceStore.conditions.paging.pageNum
+);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 
@@ -96,7 +100,7 @@ function searchTrace() {
 
 function updatePage(p: number) {
   traceStore.setTraceCondition({
-    paging: { pageNum: p, pageSize: pageSize.value, needTotal: true },
+    paging: { pageNum: p, pageSize: pageSize.value },
   });
   searchTrace();
 }
@@ -104,7 +108,7 @@ function updatePage(p: number) {
 function changeSort(opt: Option[] | any) {
   traceStore.setTraceCondition({
     queryOrder: opt[0].value,
-    paging: { pageNum: 1, pageSize: pageSize.value, needTotal: true },
+    paging: { pageNum: 1, pageSize: pageSize.value },
   });
   searchTrace();
 }
@@ -167,7 +171,7 @@ async function queryTraces() {
 }
 
 .list {
-  width: 400px;
+  width: 300px;
 }
 
 .trace-tr {
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index a34db4e9..89a1046d 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -91,7 +91,9 @@ limitations under the License. -->
       v-model:currentPage="pageNum"
       v-model:page-size="pageSize"
       :small="true"
-      :total="traceStore.traceSpanLogsTotal"
+      layout="prev, pager, next"
+      :pager-count="5"
+      :total="total"
       @current-change="turnPage"
     />
     <LogTable
@@ -106,7 +108,7 @@ limitations under the License. -->
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
 import dayjs from "dayjs";
@@ -124,6 +126,11 @@ const traceStore = useTraceStore();
 const pageNum = ref<number>(1);
 const showRelatedLogs = ref<boolean>(false);
 const pageSize = 10;
+const total = computed(() =>
+  traceStore.traceList.length === pageSize
+    ? pageSize * pageNum.value + 1
+    : pageSize * pageNum.value
+);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 async function getTaceLogs() {
@@ -135,7 +142,7 @@ async function getTaceLogs() {
         segmentId: props.currentSpan.segmentId,
         spanId: props.currentSpan.spanId,
       },
-      paging: { pageNum: pageNum.value, pageSize, needTotal: true },
+      paging: { pageNum: pageNum.value, pageSize },
     },
   });
   if (res.errors) {

From b544decbbbb5c656118f2d45564dbea59c96d7e7 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Thu, 19 May 2022 19:29:02 +0800
Subject: [PATCH 18/37] feat: remove needTotal and total fields from query
 conditions (#94)

---
 src/graphql/fragments/alarm.ts             |  1 -
 src/graphql/fragments/event.ts             |  1 -
 src/graphql/fragments/log.ts               |  1 -
 src/store/modules/event.ts                 |  5 +----
 src/views/alarm/Header.vue                 | 12 ++++++++----
 src/views/dashboard/related/log/Header.vue |  6 +++---
 src/views/event/Header.vue                 | 12 ++++++++----
 7 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/graphql/fragments/alarm.ts b/src/graphql/fragments/alarm.ts
index bf4421e8..49d1bbb5 100644
--- a/src/graphql/fragments/alarm.ts
+++ b/src/graphql/fragments/alarm.ts
@@ -45,6 +45,5 @@ export const Alarm = {
           endTime
         }
       }
-      total
     }`,
 };
diff --git a/src/graphql/fragments/event.ts b/src/graphql/fragments/event.ts
index 00d5bb09..49262e45 100644
--- a/src/graphql/fragments/event.ts
+++ b/src/graphql/fragments/event.ts
@@ -35,6 +35,5 @@ export const FetchEvents = {
       startTime
       endTime
     }
-    total
   }`,
 };
diff --git a/src/graphql/fragments/log.ts b/src/graphql/fragments/log.ts
index 18e814ec..e348668f 100644
--- a/src/graphql/fragments/log.ts
+++ b/src/graphql/fragments/log.ts
@@ -30,7 +30,6 @@ export const QueryBrowserErrorLogs = {
            stack
            grade
         }
-        total
     }`,
 };
 
diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts
index 8adce8f5..01b6788a 100644
--- a/src/store/modules/event.ts
+++ b/src/store/modules/event.ts
@@ -25,7 +25,6 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 interface eventState {
   loading: boolean;
   events: Event[];
-  total: number;
   services: Service[];
   instances: Instance[];
   endpoints: Endpoint[];
@@ -37,12 +36,11 @@ export const eventStore = defineStore({
   state: (): eventState => ({
     loading: false,
     events: [],
-    total: 0,
     services: [{ value: "", label: "All" }],
     instances: [{ value: "", label: "All" }],
     endpoints: [{ value: "", label: "All" }],
     condition: {
-      paging: { pageNum: 1, pageSize: 15, needTotal: true },
+      paging: { pageNum: 1, pageSize: 15 },
     },
   }),
   actions: {
@@ -117,7 +115,6 @@ export const eventStore = defineStore({
             return item;
           }
         );
-        this.total = res.data.data.fetchEvents.total;
       }
       return res.data;
     },
diff --git a/src/views/alarm/Header.vue b/src/views/alarm/Header.vue
index 3b9bb4ca..15e9be6e 100644
--- a/src/views/alarm/Header.vue
+++ b/src/views/alarm/Header.vue
@@ -39,8 +39,8 @@ limitations under the License. -->
         <el-pagination
           v-model:currentPage="pageNum"
           v-model:page-size="pageSize"
-          layout="prev, jumper, total, next"
-          :total="alarmStore.total"
+          layout="prev, pager, next"
+          :total="total"
           @current-change="changePage"
           :pager-count="5"
           small
@@ -55,7 +55,7 @@ limitations under the License. -->
   </nav>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import ConditionTags from "@/views/components/ConditionTags.vue";
 import { AlarmOptions } from "./data";
@@ -70,6 +70,11 @@ const pageSize = 20;
 const entity = ref<string>("");
 const keyword = ref<string>("");
 const pageNum = ref<number>(1);
+const total = computed(() =>
+  alarmStore.alarms.length === pageSize
+    ? pageSize * pageNum.value + 1
+    : pageSize * pageNum.value
+);
 
 refreshAlarms({ pageNum: 1 });
 
@@ -79,7 +84,6 @@ async function refreshAlarms(param: { pageNum: number; tagsMap?: any }) {
     paging: {
       pageNum: param.pageNum,
       pageSize,
-      needTotal: true,
     },
     tags: param.tagsMap,
   };
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 023d964e..a2cc9b76 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -37,9 +37,9 @@ limitations under the License. -->
       />
     </div>
     <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
-      <span class="grey mr-5"
-        >{{ isBrowser ? t("page") : t("endpoint") }}:</span
-      >
+      <span class="grey mr-5">
+        {{ isBrowser ? t("page") : t("endpoint") }}:
+      </span>
       <Selector
         size="small"
         :value="state.endpoint.value"
diff --git a/src/views/event/Header.vue b/src/views/event/Header.vue
index 235da4ba..3b2da10f 100644
--- a/src/views/event/Header.vue
+++ b/src/views/event/Header.vue
@@ -75,8 +75,8 @@ limitations under the License. -->
       <el-pagination
         v-model:currentPage="pageNum"
         v-model:page-size="pageSize"
-        layout="prev, jumper, total, next"
-        :total="eventStore.total"
+        layout="prev, pager, next"
+        :total="total"
         @current-change="updatePage"
         :pager-count="5"
         small
@@ -92,7 +92,7 @@ limitations under the License. -->
   </nav>
 </template>
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { EventTypes } from "./data";
 import { useEventStore } from "@/store/modules/event";
@@ -119,6 +119,11 @@ const state = reactive<{
   instance: "",
   endpoint: "",
 });
+const total = computed(() =>
+  eventStore.events.length === pageSize
+    ? pageSize * pageNum.value + 1
+    : pageSize * pageNum.value
+);
 
 getSelectors();
 
@@ -180,7 +185,6 @@ async function queryEvents() {
     paging: {
       pageNum: pageNum.value,
       pageSize: pageSize,
-      needTotal: true,
     },
     source: {
       service: state.service || "",

From f2e75f2b9fd47ef771fae5a9e381d520f2c5356a Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Fri, 20 May 2022 10:51:19 +0800
Subject: [PATCH 19/37] fix: update query conditions for browser logs (#95)

---
 src/locales/lang/en.ts                       |  1 +
 src/locales/lang/zh.ts                       |  1 +
 src/views/dashboard/related/log/Header.vue   | 10 ++++++++--
 src/views/dashboard/related/trace/Filter.vue |  4 ++--
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 6e3041e0..7f55d4a0 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -136,6 +136,7 @@ const msg = {
   targetType: "Target Type",
   ebpfTip: "Don't have a process for profiling",
   processSelect: "Click to select processes",
+  page: "Page",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index a2d9ecd5..88af9d13 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -134,6 +134,7 @@ const msg = {
   targetType: "目标类型",
   processSelect: "点击选择进程",
   ebpfTip: "没有进程可以分析",
+  page: "页面",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index a2cc9b76..fdafdb34 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -226,8 +226,14 @@ function searchLogs() {
     endpointId: endpoint || state.endpoint.id || undefined,
     serviceInstanceId: instance || state.instance.id || undefined,
     queryDuration: appStore.durationTime,
-    keywordsOfContent: keywordsOfContent.value,
-    excludingKeywordsOfContent: excludingKeywordsOfContent.value,
+    keywordsOfContent:
+      dashboardStore.layerId === "BROWSER"
+        ? undefined
+        : keywordsOfContent.value,
+    excludingKeywordsOfContent:
+      dashboardStore.layerId === "BROWSER"
+        ? undefined
+        : excludingKeywordsOfContent.value,
     tags: tagsMap.value.length ? tagsMap.value : undefined,
     paging: { pageNum: 1, pageSize: 15 },
     relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index b399fc51..a97da90b 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -110,8 +110,8 @@ const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const traceStore = useTraceStore();
 const traceId = ref<string>("");
-const minTraceDuration = ref<number>(NaN);
-const maxTraceDuration = ref<number>(NaN);
+const minTraceDuration = ref<number>();
+const maxTraceDuration = ref<number>();
 const tagsList = ref<string[]>([]);
 const tagsMap = ref<Option[]>([]);
 const state = reactive<any>({

From f334985cf04a57f52c95700786e61b581229269c Mon Sep 17 00:00:00 2001
From: Marc Navarro <morfeo8marc@gmail.com>
Date: Sun, 22 May 2022 09:07:51 +0200
Subject: [PATCH 20/37] Add Spanish Translation (#96)

---
 src/locales/lang/es.ts | 333 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 333 insertions(+)
 create mode 100644 src/locales/lang/es.ts

diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
new file mode 100644
index 00000000..40ef1fda
--- /dev/null
+++ b/src/locales/lang/es.ts
@@ -0,0 +1,333 @@
+/**
+ * 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.
+ */
+const msg = {
+  general: "Servicio General",
+  services: "Servicios",
+  service: "Servicio",
+  traces: "Trazas",
+  metrics: "Métricas",
+  serviceMesh: "Malla de Servicios",
+  infrastructure: "Infraestructura",
+  virtualMachine: "Máquina Virtual",
+  dashboardNew: "Nuevo Panel",
+  dashboardList: "Listado Paneles",
+  logs: "Logs",
+  events: "Eventos",
+  alerts: "Alertas",
+  settings: "Ajustes",
+  dashboards: "Paneles",
+  profiles: "Perfiles",
+  database: "Base de Datos",
+  serviceName: "Nombre Servicio",
+  technologies: "Tecnologías",
+  generalServicePanel: "Panel Servicio General",
+  health: "Salud",
+  groupName: "Nombre Grupo",
+  topologies: "Topologías",
+  dataPanel: "Plano de Datos",
+  controlPanel: "Plano de Control",
+  eventList: "Listado Eventos",
+  newDashboard: "Crear panel nuevo",
+  dashboardEdit: "Editar el panel",
+  edit: "Editar",
+  delete: "Eliminar",
+  confirm: "Confirmar",
+  layer: "Capa",
+  endpoint: "Endpoint",
+  instance: "Instancia",
+  create: "Crear",
+  loading: "Cargando",
+  selectVisualization: "Visualiza tus métricas",
+  visualization: "Visualizaciones",
+  graphStyles: "Estilo de gráficas",
+  widgetOptions: "Opciones widget",
+  standardOptions: "Opciones estandar",
+  max: "Máx",
+  min: "Mín",
+  plus: "Más",
+  minus: "Menoss",
+  multiply: "Multiplcar",
+  divide: "Dividir",
+  convertToMilliseconds: "Convertir Unix Timestamp(milisegundos)",
+  convertToSeconds: "Convertir Unix Timestamp(segundos)",
+  smooth: "Suabe",
+  showSymbol: "Mostrar Símbolo",
+  step: "Paso",
+  showValues: "Mostrar Valores",
+  fontSize: "Tamaño Fuente",
+  showBackground: "Mostrar Fondo",
+  areaOpacity: "Opacidad Área",
+  editGraph: "Editar Opciones",
+  dashboardName: "Selecciona Nombre del Panel",
+  linkDashboard: "Nombre del panel relacionado con llamadas de la topología",
+  linkServerMetrics: "Métricas de servidor relacionadas con llamadas de la topología",
+  linkClientMetrics: "Métricas de cliente relacionadas con llamadas de la topología",
+  nodeDashboard: "Nombre del panel relacionado con nodos de la topología",
+  nodeMetrics: "Mêtricas relacionas con nodos de la topología",
+  instanceDashboard: "Nombre del panel relacionado con instancias de servicio",
+  endpointDashboard: "Nombre del panel relacionado con endpoints",
+  callSettings: "Ajustes Llamada",
+  nodeSettings: "Ajustes Nodo",
+  conditions: "Condiciones",
+  legendSettings: "Ajustes Leyenda",
+  setLegend: "Poner Leyenda",
+  backgroundColors: "Colores Fondo",
+  fontColors: "Colores Fuente",
+  iconTheme: "Tema Iconos",
+  default: "Por Defecto",
+  topSlow: "Top 5 lentos",
+  topChildren: "Top 5 hijos",
+  taskList: "Listado Tareas",
+  sampledTraces: "Trazas Muestreadas",
+  editTab: "Habilitar edición nombre pestanyas",
+  label: "Nombre Servicio",
+  id: "ID Servicio",
+  setRoot: "Ponerlo a raíz",
+  setNormal: "Ponerlo a normal",
+  export: "Exportar Plantilla Panel",
+  import: "Importar Plantilla Panel",
+  yes: "Sí",
+  no: "No",
+  tableHeaderCol1: "Nombre de la primera columna de la tabla",
+  tableHeaderCol2: "Nombre de la segunda columna de la tabla",
+  showXAxis: "Mostrar Eje X",
+  showYAxis: "Mostrar Eje Y",
+  nameError: "El nombre del panel no puede ser duplicado",
+  showGroup: "Mostrar Grupo",
+  noRoot: "Por favor ponga la raíz del panel",
+  noWidget: "Por favor añada widgets.",
+  rename: "Renombrar",
+  deleteTitle: "¿Está seguro que quiere eliminarlo?",
+  rootTitle: "¿Está seguro que quiere establecerlo?",
+  selfObservability: "Autoobservabilidad",
+  satellite: "Satéllite",
+  skyWalkingServer: "Servidor SkyWalking",
+  functions: "Funciones",
+  browser: "Navegador",
+  linux: "Linux",
+  editWarning: "Estás entrando en modo edición",
+  viewWarning: "Estás entrando en modo visualización",
+  virtualDatabase: "Base de Datos Virtual",
+  reloadDashboards: "Recargar Panel",
+  kubernetesService: "Servicio",
+  kubernetesCluster: "Cluster",
+  kubernetes: "Kubernetes",
+  textUrl: "Hipervínculo de Texto",
+  textAlign: "Alineación de Texto",
+  metricLabel: "Etiqueta de Métrica",
+  showUnit: "Mostrar Unidad",
+  noGraph: "Ningún Gráfico",
+  taskId: "ID Tarea",
+  triggerType: "Tipo de Disparador",
+  targetType: "Tipo de Objetivo",
+  ebpfTip: "Le falta el proceso para perfilar",
+  processSelect: "Click para seleccionar proceso",
+  page: "Página",
+  hourTip: "Seleccione Hora",
+  minuteTip: "Seleccione Minuto",
+  secondTip: "Seleccione Segundo",
+  second: "s",
+  yearSuffix: "Año",
+  monthsHead: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",
+  months: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",
+  weeks: "Lun_Mar_Mier_Jue_Vie_Sáb_Dom",
+  hello: "Hola",
+  helloMessage: "Bienvenido de vuelta, Apache SkyWalking APM System !",
+  username: "Usuario",
+  password: "Contraseña",
+  title: "Título",
+  width: "Ancho",
+  height: "Alto",
+  dashboard: "Panel",
+  topology: "Topología",
+  trace: "Traza",
+  alarm: "Alarmas",
+  auto: "Auto",
+  reload: "Recargar",
+  version: "Versión",
+  copy: "Copiar",
+  reset: "Resetear",
+  apply: "Aplicar",
+  template: "Plantilla",
+  cancel: "Cancelar",
+  createTab: "Crear Pestanya",
+  tabName: "Nombre de la Pestaña",
+  detectPoint: "Detectar Punto",
+  name: "Nombre",
+  types: "Tipos",
+  all: "Todo",
+  endpoints: "Endpoints",
+  cache: "Cache",
+  serviceinstance: "InstanciaServicio",
+  databaseaccess: "AccesoBaseDeDatos",
+  servicerelation: "RelaciónServicio",
+  serviceinstancerelation: "RelaciónInstanciaServicio",
+  endpointrelation: "RelaciónEndpoint",
+  status: "Estado",
+  endpointName: "Nombre Endpoint",
+  search: "Buscar",
+  clear: "Limpiar",
+  more: "Más",
+  traceID: "ID Traza",
+  range: "Rango",
+  timeRange: "Rango de Tiempo",
+  duration: "Duración",
+  startTime: "Hora Inicio",
+  start: "Incio",
+  spans: "Lapso",
+  spanInfo: "Info Lapso",
+  spanType: "Tipo de Lapso",
+  time: "Tiempo",
+  tags: "Etiquetas",
+  component: "Componente",
+  table: "Tabla",
+  list: "Lista",
+  tree: "Árbol",
+  filterScope: "Alcance de Filtro",
+  searchKeyword: "Palabra Clave",
+  quarterHourCutTip: "Últimos 15 mins",
+  halfHourCutTip: "Últimos 30 mins",
+  hourCutTip: "Última 1 hora",
+  dayCutTip: "Último 1 día",
+  weekCutTip: "Última 1 semana",
+  monthCutTip: "Última 1 mes",
+  serverZone: "Zona Horaria Servidor OAP",
+  exportImage: "Exportar imagen",
+  object: "Objecto",
+  profile: "Perfil",
+  newTask: "Nueva Tarea",
+  monitorTime: "Tiempo Monitorización",
+  monitorDuration: "Duración Monitorización",
+  minThreshold: "Mínn Umbral Duración",
+  dumpPeriod: "Volcar Periodo",
+  createTask: "Crear Tarea",
+  maxSamplingCount: "Máx Cantidad Mostreo",
+  analyze: "Analizar",
+  noData: "Ningún Dato",
+  taskInfo: "Información Tarea",
+  task: "Tarea",
+  operationType: "Tipo Operación",
+  operationTime: "Tiempo Operación",
+  taskView: "Ver Tarea",
+  includeChildren: "Incluir Hijos",
+  excludeChildren: "Excluir Hijos",
+  view: "Ver",
+  timeTips: "Intervalo de tiempo no puede excedir 60 dias",
+  entityType: "Tipo Entidad",
+  maxItemNum: "Máx número artículos",
+  unknownMetrics: "Métrica desconocida",
+  labels: "Etiquetas",
+  aggregation: "Cálculo",
+  unit: "Unidad",
+  labelsIndex: "Subíndice Etiqueta",
+  group: "Grupo Servicio",
+  browserView: "Navegador",
+  sortOrder: "Orden de clasificación",
+  chartType: "Tipo Gráfico",
+  currentDepth: "Profundidad actual",
+  showDepth: "Mostrar Selector Profundidad",
+  defaultDepth: "Profundidad Por Defecto",
+  traceTagsTip: `Solamente etiquetas definidas en core/default/searchableTracesTags pueden ser buscadas.
+  Más información en la página de Vocabulario de Configuración`,
+  logTagsTip: `Solamente etiquetas definidas en core/default/searchableLogsTags pueden ser buscadas.
+  Más información en la página de Vocabulario de Configuración`,
+  alarmTagsTip: `Solamente etiquetas definidas en core/default/searchableAlarmTags pueden ser buscadas.
+  Más información en la página de Vocabulario de Configuración`,
+  tagsLink: "Página de Vocabulario de Configuración",
+  addTag: "Por favor introduzca una etiqueta",
+  log: "Registro de Datos",
+  logCategory: "Categoría Registro de Datos",
+  errorCatalog: "Catálogo de Errores",
+  logDetail: "Detalle Registro de Datos",
+  timeReload: "Aviso: El intervalo de tiempo tiene que ser mayor que 0",
+  errorInfo: "Info Error",
+  stack: "Pila",
+  serviceVersion: "Versión Servicio",
+  errorPage: "Página de Error",
+  category: "Categoría",
+  grade: "Grado",
+  relatedTraceLogs: "Registro de Datos Relacionados",
+  setConditions: "Más Condiciones",
+  metricName: "Seleccionar Nombre Métrica",
+  keywordsOfContent: "Claves de Contenido",
+  excludingKeywordsOfContent: "Excluir Claves de Contenido",
+  return: "Volver",
+  isError: "Error",
+  contentType: "Tipo de Contenido",
+  content: "Contenido",
+  viewLogs: "Ver Registro de Datos",
+  logsTagsTip: `Solamente etiquetas definidas en core/default/searchableLogsTags pueden ser buscadas.
+  Más información en la página de Vocabulario de Configuración`,
+  keywordsOfContentLogTips:
+    "El almacenamiento actual del servidor SkyWalking OAP no lo soporta.",
+  setEvent: "Establecer Evento",
+  viewAttributes: "Ver",
+  serviceEvents: "Eventos Servico",
+  select: "Seleccionar",
+  eventID: "ID Evento",
+  eventName: "Nombre Evento",
+  endTime: "Hora Finalización",
+  instanceEvents: "Eventos Instancia",
+  endpointEvents: "Eventos Endpoint",
+  enableEvents: "Habilitar Eventos",
+  disableEvents: "Deshabilitar Eventos",
+  eventSeries: "Serie de Eventos",
+  eventsType: "Tipo de Evento",
+  eventsMessage: "Mensaje del Evento",
+  eventsParameters: "Parámetro del Evento",
+  eventDetail: "Detalle del Evento",
+  value: "Valor",
+  show: "Mostrar",
+  hide: "Oculatr",
+  statistics: "Estadísticas",
+  message: "Mensaje",
+  tooltipsContent: "Contenido de Información de Herramienta",
+  alarmDetail: "Detalle Alarma",
+  scope: "Alcance",
+  destService: "Servicio Destinación",
+  destServiceInstance: "Instancia Servicio Destinación",
+  destEndpoint: "Endpoint Destinación",
+  eventSource: "Fuente Envento",
+  modalTitle: "Inspección",
+  selectRedirectPage: "Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
+  logAnalysis: "Lenguaje de Análisis de Registro de Datos",
+  logDataBody: "Contenido del Registro de Datos",
+  addType: "Por favor introduzca un tipo",
+  traceContext: "Registro de datos con contexto de traza",
+  traceSegmentId: "ID Segmento Traza",
+  spanId: "ID Lapso",
+  inputTraceSegmentId: "Por favor introduzca el ID del segmento de la traza",
+  inputSpanId: "Por favor introduzca el ID del lapso",
+  inputTraceId: "Por favor introduzca el ID de la traza",
+  dsl: "Entrada de guión para LAL",
+  logContentType: "Tipo del registro de datos",
+  logRespContent: "Contenido Registro de Datos",
+  analysis: "Análisis",
+  waitLoading: "Cargando",
+  dslEmpty: "Entrada de guión de LAL no puede estar vacio",
+  logContentEmpty: "El contenido del registro de datos no puede estar vacio.",
+  debug: "Debugar",
+  addTraceID: "Por favor introduzca el ID de la traza",
+  addTags: "Por favor introduzaca una etiqueta",
+  addKeywordsOfContent: "Por favor introduzca una clave de contenido",
+  addExcludingKeywordsOfContent: "Por favor introduzca una clave excluyente de contenido",
+  noticeTag: "Por favor presione Intro después de introducir una etiqueta(clave=valor).",
+  conditionNotice:
+    "Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).",
+  language: "Lenguaje",
+};
+export default msg;

From 45f896bf3673edaa7f6aa4397bd03120b1d45059 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Mon, 23 May 2022 16:00:30 +0800
Subject: [PATCH 21/37] feat: visualize the OFF CPU eBPF profiling  (#97)

---
 src/graphql/fragments/ebpf.ts                 |   4 +-
 src/store/modules/ebpf.ts                     |  17 +-
 src/views/dashboard/related/ebpf/Content.vue  |   6 +-
 .../related/ebpf/components/EBPFSchedules.vue | 177 +++++++++++-------
 .../related/ebpf/components/NewTask.vue       |   9 +-
 .../related/ebpf/components/TaskList.vue      |  16 +-
 .../dashboard/related/ebpf/components/data.ts |  10 +-
 7 files changed, 153 insertions(+), 86 deletions(-)

diff --git a/src/graphql/fragments/ebpf.ts b/src/graphql/fragments/ebpf.ts
index 7479b623..920065d4 100644
--- a/src/graphql/fragments/ebpf.ts
+++ b/src/graphql/fragments/ebpf.ts
@@ -75,9 +75,9 @@ export const queryEBPFSchedules = {
 
 export const analysisEBPFResult = {
   variable:
-    "$scheduleIdList: [ID!]!, $timeRanges: [EBPFProfilingAnalyzeTimeRange!]!",
+    "$scheduleIdList: [ID!]!, $timeRanges: [EBPFProfilingAnalyzeTimeRange!]!, $aggregateType: EBPFProfilingAnalyzeAggregateType",
   query: `
-  analysisEBPFResult: analysisEBPFProfilingResult(scheduleIdList: $scheduleIdList, timeRanges: $timeRanges) {
+  analysisEBPFResult: analysisEBPFProfilingResult(scheduleIdList: $scheduleIdList, timeRanges: $timeRanges, aggregateType: $aggregateType) {
     tip
     trees {
       elements {
diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index 2e8cf124..f43c649f 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -22,7 +22,6 @@ import {
   EBPFTaskList,
   AnalyzationTrees,
 } from "@/types/ebpf";
-import { Trace, Span } from "@/types/trace";
 import { store } from "@/store";
 import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
@@ -35,6 +34,7 @@ interface EbpfStore {
   labels: Option[];
   couldProfiling: boolean;
   tip: string;
+  selectedTask: Recordable<EBPFTaskList>;
 }
 
 export const ebpfStore = defineStore({
@@ -47,14 +47,18 @@ 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) {
+    setCurrentSchedule(s: EBPFProfilingSchedule) {
       this.currentSchedule = s;
     },
+    setAnalyzeTrees(tree: AnalyzationTrees[]) {
+      this.analyzeTrees = tree;
+    },
     async getCreateTaskData(serviceId: string) {
       const res: AxiosResponse = await graphql
         .query("getCreateTaskData")
@@ -93,7 +97,7 @@ export const ebpfStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.taskList = res.data.data.queryEBPFTasks.reverse() || [];
+      this.taskList = res.data.data.queryEBPFTasks || [];
       if (!this.taskList.length) {
         return res.data;
       }
@@ -118,13 +122,14 @@ export const ebpfStore = defineStore({
       this.eBPFSchedules = eBPFSchedules;
       if (!eBPFSchedules.length) {
         this.eBPFSchedules = [];
+        this.analyzeTrees = [];
       }
-      this.analyzeTrees = [];
       return res.data;
     },
     async getEBPFAnalyze(params: {
       scheduleIdList: string[];
       timeRanges: Array<{ start: number; end: number }>;
+      aggregateType: string;
     }) {
       if (!params.scheduleIdList.length) {
         return new Promise((resolve) => resolve({}));
diff --git a/src/views/dashboard/related/ebpf/Content.vue b/src/views/dashboard/related/ebpf/Content.vue
index 91abfd26..019a20c4 100644
--- a/src/views/dashboard/related/ebpf/Content.vue
+++ b/src/views/dashboard/related/ebpf/Content.vue
@@ -46,11 +46,13 @@ import EBPFStack from "./components/EBPFStack.vue";
 .item {
   width: 100%;
   overflow: auto;
-  height: calc(100% - 70px);
+  height: calc(100% - 100px);
   padding-bottom: 10px;
 }
 
 .schedules {
-  height: 60px;
+  height: 90px;
+  border-bottom: 1px solid #ccc;
+  padding-right: 10px;
 }
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index 3caaff0b..191b0097 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -13,74 +13,87 @@ 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="filters flex-h">
-    <Selector
-      :value="selectedLabels"
-      :options="labels"
-      size="small"
-      placeholder="Please select labels"
-      @change="changeLabels"
-      class="inputs mr-10"
-      :multiple="true"
-    />
-    <el-button type="primary" size="small">
-      <span>{{ duration[0] }}</span>
-      <span> ~ </span>
-      <span>{{ duration[1] }}</span>
-    </el-button>
-    <el-popover placement="bottom" :width="680" trigger="click">
-      <template #reference>
-        <el-button type="primary" size="small">
-          {{ t("processSelect") }}
-        </el-button>
-      </template>
-      <el-input
-        v-model="searchText"
-        placeholder="Please input name"
-        class="input-with-search"
+  <div class="filters">
+    <div class="mb-10 flex-h">
+      <Selector
+        :value="selectedLabels"
+        :options="labels"
         size="small"
-        @change="searchProcesses(0)"
-      >
-        <template #append>
-          <el-button size="small">
-            <Icon size="sm" iconName="search" />
+        placeholder="Please select labels"
+        @change="changeLabels"
+        class="inputs mr-10"
+        :multiple="true"
+      />
+      <div class="mr-5 duration" v-if="duration.length">
+        <span>{{ duration[0] }}</span>
+        <span> ~ </span>
+        <span>{{ duration[1] }}</span>
+      </div>
+    </div>
+    <div class="flex-h">
+      <Selector
+        v-if="ebpfStore.selectedTask.targetType === 'OFF_CPU'"
+        :value="aggregateType"
+        :options="AggregateTypes"
+        size="small"
+        placeholder="Please select a type"
+        @change="changeAggregateType"
+        class="selector mr-10"
+      />
+      <el-popover placement="bottom" :width="680" trigger="click">
+        <template #reference>
+          <el-button type="primary" size="small">
+            {{ t("processSelect") }}
           </el-button>
         </template>
-      </el-input>
-      <el-table
-        :data="currentProcesses"
-        ref="multipleTableRef"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="55" />
-        <el-table-column
-          v-for="(h, index) of TableHeader"
-          :property="h.property"
-          :label="h.label"
-          :key="index"
-          width="150"
-        />
-        <el-table-column width="300" label="Attributes">
-          <template #default="scope">
-            {{ scope.row.attributes.map((d: {name: string, value: string}) => `${d.name}=${d.value}`).join("; ") }}
+        <el-input
+          v-model="searchText"
+          placeholder="Please input name"
+          class="input-with-search"
+          size="small"
+          @change="searchProcesses(0)"
+        >
+          <template #append>
+            <el-button size="small">
+              <Icon size="sm" iconName="search" />
+            </el-button>
           </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination
-        class="pagination"
-        background
-        small
-        layout="prev, pager, next"
-        :page-size="pageSize"
-        :total="processes.length"
-        @current-change="changePage"
-        @prev-click="changePage"
-        @next-click="changePage"
-      />
-    </el-popover>
-    <el-button type="primary" size="small" @click="analyzeEBPF">
-      {{ t("analyze") }}
-    </el-button>
+        </el-input>
+        <el-table
+          :data="currentProcesses"
+          ref="multipleTableRef"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column
+            v-for="(h, index) of TableHeader"
+            :property="h.property"
+            :label="h.label"
+            :key="index"
+            width="150"
+          />
+          <el-table-column width="300" label="Attributes">
+            <template #default="scope">
+              {{ scope.row.attributes.map((d: {name: string, value: string}) => `${d.name}=${d.value}`).join("; ") }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          class="pagination"
+          background
+          small
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :total="processes.length"
+          @current-change="changePage"
+          @prev-click="changePage"
+          @next-click="changePage"
+        />
+      </el-popover>
+      <el-button type="primary" size="small" @click="analyzeEBPF">
+        {{ t("analyze") }}
+      </el-button>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -88,7 +101,7 @@ import { ref, watch } from "vue";
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
-import { TableHeader } from "./data";
+import { TableHeader, AggregateTypes } from "./data";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { EBPFProfilingSchedule, Process } from "@/types/ebpf";
 import { ElMessage, ElTable } from "element-plus";
@@ -103,6 +116,7 @@ const processes = ref<Process[]>([]);
 const currentProcesses = ref<Process[]>([]);
 const selectedLabels = ref<string[]>(["0"]);
 const searchText = ref<string>("");
+const aggregateType = ref<string>(AggregateTypes[0].value);
 const duration = ref<string[]>([]);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
@@ -112,6 +126,11 @@ function changeLabels(opt: any[]) {
   selectedLabels.value = arr;
 }
 
+function changeAggregateType(opt: any[]) {
+  aggregateType.value = opt[0].value;
+  ebpfStore.setAnalyzeTrees([]);
+}
+
 const handleSelectionChange = (arr: Process[]) => {
   selectedProcesses.value = arr.map((d: Process) => d.id);
 };
@@ -152,6 +171,7 @@ async function analyzeEBPF() {
   const res = await ebpfStore.getEBPFAnalyze({
     scheduleIdList,
     timeRanges,
+    aggregateType: aggregateType.value,
   });
   if (res.data.errors) {
     ElMessage.error(res.data.errors);
@@ -159,7 +179,7 @@ async function analyzeEBPF() {
   }
 }
 
-function visTimeline() {
+function getSchedules() {
   labels.value = [{ label: "All", value: "0" }];
   selectedLabels.value = ["0"];
   processes.value = [];
@@ -170,11 +190,16 @@ 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);
+  analyzeEBPF();
 }
 
 function changePage(pageIndex: number) {
@@ -216,7 +241,7 @@ function searchAttribute(
 watch(
   () => ebpfStore.eBPFSchedules,
   () => {
-    visTimeline();
+    getSchedules();
   }
 );
 </script>
@@ -235,7 +260,7 @@ watch(
 }
 
 .inputs {
-  width: 300px;
+  width: 350px;
 }
 
 .input-with-search {
@@ -246,4 +271,12 @@ watch(
 .pagination {
   margin-top: 10px;
 }
+
+.selector {
+  width: 120px;
+}
+
+.duration {
+  line-height: 30px;
+}
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/NewTask.vue b/src/views/dashboard/related/ebpf/components/NewTask.vue
index f5d2597b..5313e33c 100644
--- a/src/views/dashboard/related/ebpf/components/NewTask.vue
+++ b/src/views/dashboard/related/ebpf/components/NewTask.vue
@@ -86,6 +86,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { ElMessage } from "element-plus";
 import { InitTaskField, TargetTypes } from "./data";
+
 /* global defineEmits */
 const emits = defineEmits(["close"]);
 const eBPFStore = useEbpfStore();
@@ -97,6 +98,7 @@ const type = ref<string>(TargetTypes[0].value);
 const monitorTime = ref<string>(InitTaskField.monitorTimeEn[0].value);
 const monitorDuration = ref<number>(10);
 const time = ref<Date>(appStore.durationRow.start);
+const disabled = ref<boolean>(false);
 
 function changeMonitorTime(opt: string) {
   monitorTime.value = opt;
@@ -111,19 +113,24 @@ function changeType(opt: any[]) {
 }
 
 async function createTask() {
+  if (disabled.value) {
+    return;
+  }
+  disabled.value = true;
   const date = monitorTime.value === "0" ? new Date() : time.value;
   const params = {
     serviceId: selectorStore.currentService.id,
     processLabels: labels.value,
     startTime: date.getTime(),
     duration: monitorDuration.value * 60,
-    targetType: "ON_CPU",
+    targetType: type.value,
   };
   const res = await eBPFStore.createTask(params);
   if (res.errors) {
     ElMessage.error(res.errors);
     return;
   }
+  disabled.value = false;
   if (!res.data.createTaskData.status) {
     ElMessage.error(res.data.createTaskData.errorReason);
     return;
diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue
index 65c93ce5..82427b88 100644
--- a/src/views/dashboard/related/ebpf/components/TaskList.vue
+++ b/src/views/dashboard/related/ebpf/components/TaskList.vue
@@ -34,7 +34,15 @@ limitations under the License. -->
               }"
             >
               <div class="ell">
-                <span>{{ i.processLabels.join(" ") }}</span>
+                <span>
+                  {{
+                    i.targetType +
+                    ": " +
+                    (i.processLabels.length
+                      ? i.processLabels.join(" ")
+                      : `All Processes`)
+                  }}
+                </span>
                 <a class="profile-btn r" @click="viewDetail = true">
                   <Icon iconName="view" size="middle" />
                 </a>
@@ -74,7 +82,9 @@ limitations under the License. -->
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("labels") }}:</span>
-          <span class="g-sm-8 wba">{{ selectedTask.processLabels }}</span>
+          <span class="g-sm-8 wba">
+            {{ selectedTask.processLabels.join(";") }}
+          </span>
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
@@ -117,6 +127,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 +139,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 a538897c..1ebc5f4c 100644
--- a/src/views/dashboard/related/ebpf/components/data.ts
+++ b/src/views/dashboard/related/ebpf/components/data.ts
@@ -28,7 +28,15 @@ export const NewTaskField = {
   maxSamplingCount: { key: 5, label: "5" },
 };
 
-export const TargetTypes = [{ label: "ON_CPU", value: "ON_CPU" }];
+export const TargetTypes = [
+  { label: "ON_CPU", value: "ON_CPU" },
+  { label: "OFF_CPU", value: "OFF_CPU" },
+];
+
+export const AggregateTypes = [
+  { label: "Count", value: "COUNT" },
+  { label: "Duration", value: "DURATION" },
+];
 
 export const InitTaskField = {
   monitorTimeEn: [

From b34c0b0c728beb60b8edb7332a0e305b2650c13f Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Tue, 24 May 2022 11:53:41 +0800
Subject: [PATCH 22/37] feat: add a Spanish option in the lang selector (#98)

---
 src/constants/data.ts                               |  1 +
 src/layout/components/SideBar.vue                   | 13 ++++++++++---
 src/locales/index.ts                                |  2 ++
 src/views/Settings.vue                              |  3 ++-
 .../dashboard/related/ebpf/components/EBPFStack.vue |  5 +++--
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/constants/data.ts b/src/constants/data.ts
index 4aa4f82a..5a8bf137 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -23,6 +23,7 @@ export enum TimeType {
 export const Languages = [
   { label: "English", value: "en" },
   { label: "Chinese", value: "zh" },
+  { label: "Spanish", value: "es" },
 ];
 
 export const RoutesMap: { [key: string]: string } = {
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 278f8172..34ad6852 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -41,7 +41,7 @@ limitations under the License. -->
               <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
                 <Icon size="lg" :iconName="menu.meta.icon" />
               </el-icon>
-              <span :class="isCollapse ? 'collapse' : ''">
+              <span class="title" :class="isCollapse ? 'collapse' : ''">
                 {{ t(menu.meta.title) }}
               </span>
             </router-link>
@@ -57,7 +57,7 @@ limitations under the License. -->
                 :to="m.path"
                 :exact="m.meta.exact || false"
               >
-                <span>{{ t(m.meta.title) }}</span>
+                <span class="title">{{ t(m.meta.title) }}</span>
               </router-link>
             </el-menu-item>
           </el-menu-item-group>
@@ -82,7 +82,7 @@ limitations under the License. -->
               :to="menu.children[0].path"
               :exact="menu.meta.exact"
             >
-              <span>{{ t(menu.meta.title) }}</span>
+              <span class="title">{{ t(menu.meta.title) }}</span>
             </router-link>
           </template>
         </el-menu-item>
@@ -208,4 +208,11 @@ span.collapse {
   width: 100%;
   height: 60px;
 }
+
+.title {
+  display: inline-block;
+  max-width: 110px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 </style>
diff --git a/src/locales/index.ts b/src/locales/index.ts
index 4480c941..9d161104 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -17,10 +17,12 @@
 import { createI18n } from "vue-i18n";
 import zh from "./lang/zh";
 import en from "./lang/en";
+import es from "./lang/es";
 
 const messages = {
   en,
   zh,
+  es,
 };
 
 const savedLanguage = window.localStorage.getItem("language");
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 5e06286b..056c83e6 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -194,10 +194,11 @@ const setUTCMin = () => {
   }
 
   .label {
-    width: 160px;
+    width: 180px;
     display: inline-block;
     font-weight: 500;
     color: #000;
+    line-height: 25px;
   }
 }
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
index a363b19f..adccea90 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -68,12 +68,13 @@ function drawGraph() {
   root.value = param[0];
   root.dumpCount = param[1];
   stackTree.value = root;
-  const w = (graph.value && graph.value.getBoundingClientRect().width) || 10;
+  const width = (graph.value && graph.value.getBoundingClientRect().width) || 0;
+  const w = width < 800 ? 802 : width;
   flameChart.value = flamegraph()
     .width(w - 15)
     .cellHeight(18)
     .transitionDuration(750)
-    .minFrameSize(5)
+    .minFrameSize(1)
     .transitionEase(d3.easeCubic as any)
     .sort(true)
     .title("")

From 74cb089271faad911d1e724ff655b8b75a73bfe8 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Thu, 26 May 2022 13:04:43 +0800
Subject: [PATCH 23/37] feat: sort spans with `startTime` or `spanId` in a
 segment  (#100)

---
 src/store/modules/ebpf.ts                     |  3 ++
 src/types/trace.d.ts                          |  9 ++++-
 src/views/dashboard/graphs/TopList.vue        | 14 ++++++--
 .../graphs/components/ColumnGraph.vue         |  2 +-
 src/views/dashboard/related/ebpf/Content.vue  |  2 +-
 .../related/ebpf/components/EBPFSchedules.vue |  7 ----
 .../related/ebpf/components/EBPFStack.vue     | 12 ++++---
 .../dashboard/related/profile/Content.vue     |  2 +-
 src/views/dashboard/related/trace/Detail.vue  | 13 ++-----
 .../trace/components/D3Graph/Index.vue        | 36 +++++++++++++++----
 .../trace/components/D3Graph/SpanDetail.vue   |  2 +-
 11 files changed, 68 insertions(+), 34 deletions(-)

diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index f43c649f..987422b8 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -35,6 +35,7 @@ interface EbpfStore {
   couldProfiling: boolean;
   tip: string;
   selectedTask: Recordable<EBPFTaskList>;
+  aggregateType: string;
 }
 
 export const ebpfStore = defineStore({
@@ -48,6 +49,7 @@ export const ebpfStore = defineStore({
     couldProfiling: false,
     tip: "",
     selectedTask: {},
+    aggregateType: "COUNT",
   }),
   actions: {
     setSelectedTask(task: EBPFTaskList) {
@@ -131,6 +133,7 @@ export const ebpfStore = defineStore({
       timeRanges: Array<{ start: number; end: number }>;
       aggregateType: string;
     }) {
+      this.aggregateType = params.aggregateType;
       if (!params.scheduleIdList.length) {
         return new Promise((resolve) => resolve({}));
       }
diff --git a/src/types/trace.d.ts b/src/types/trace.d.ts
index 82e0f669..569e7173 100644
--- a/src/types/trace.d.ts
+++ b/src/types/trace.d.ts
@@ -46,8 +46,15 @@ export interface Span {
   children?: Span[];
   tags?: Array<Map<string, string>>;
   logs?: log[];
+  parentSegmentId?: string;
+  refs?: Ref[];
 }
-
+export type Ref = {
+  type: string;
+  parentSegmentId: string;
+  parentSpanId: number;
+  traceId: string;
+};
 export interface log {
   time: number;
   data: Map<string, string>;
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 8fe0f72f..dcfcab29 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -17,13 +17,13 @@ limitations under the License. -->
   <div class="top-list" v-if="available">
     <div class="chart-slow-i" v-for="(i, index) in data[key]" :key="index">
       <div class="ell tools flex-h">
-        <div>
+        <div class="desc">
           <span class="calls mr-10">{{ i.value }}</span>
           <span class="cp mr-20">
             {{ i.name }}
           </span>
         </div>
-        <div>
+        <div class="copy">
           <Icon
             iconName="review-list"
             size="middle"
@@ -103,6 +103,16 @@ function handleClick(i: string) {
   height: 100%;
 }
 
+.desc {
+  flex-grow: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.copy {
+  width: 30px;
+}
+
 .calls {
   font-size: 12px;
   padding: 0 5px;
diff --git a/src/views/dashboard/graphs/components/ColumnGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue
index 7801f6e4..c5086e55 100644
--- a/src/views/dashboard/graphs/components/ColumnGraph.vue
+++ b/src/views/dashboard/graphs/components/ColumnGraph.vue
@@ -155,7 +155,7 @@ function getLabel(metric: string, index: string) {
 
 .value {
   display: inline-block;
-  width: calc(100% - 30px);
+  flex-grow: 2;
   height: 100%;
 }
 </style>
diff --git a/src/views/dashboard/related/ebpf/Content.vue b/src/views/dashboard/related/ebpf/Content.vue
index 019a20c4..f308004e 100644
--- a/src/views/dashboard/related/ebpf/Content.vue
+++ b/src/views/dashboard/related/ebpf/Content.vue
@@ -38,7 +38,7 @@ import EBPFStack from "./components/EBPFStack.vue";
 
 .vis-graph {
   height: 100%;
-  width: calc(100% - 300px);
+  flex-grow: 2;
   min-width: 700px;
   overflow: auto;
 }
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index 191b0097..7609aba8 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -252,13 +252,6 @@ watch(
   min-width: 560px;
 }
 
-.schedules {
-  width: calc(100% - 5px);
-  margin: 0 5px 5px 0;
-  height: calc(100% - 60px);
-  min-height: 150px;
-}
-
 .inputs {
   width: 350px;
 }
diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
index adccea90..b69d62f6 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -24,6 +24,7 @@ import d3tip from "d3-tip";
 import { flamegraph } from "d3-flame-graph";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { StackElement } from "@/types/ebpf";
+import { AggregateTypes } from "./data";
 import "d3-flame-graph/dist/d3-flamegraph.css";
 
 /*global Nullable*/
@@ -86,10 +87,13 @@ function drawGraph() {
   const tip = (d3tip as any)()
     .attr("class", "d3-tip")
     .direction("w")
-    .html(
-      (d: { data: StackElement }) =>
-        `<div class="mb-5 name">Symbol: ${d.data.name}</div><div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
-    )
+    .html((d: { data: StackElement }) => {
+      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}`;
+    })
     .style("max-width", "500px");
   flameChart.value.tooltip(tip);
   d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);
diff --git a/src/views/dashboard/related/profile/Content.vue b/src/views/dashboard/related/profile/Content.vue
index de5cc6ce..c5260ba7 100644
--- a/src/views/dashboard/related/profile/Content.vue
+++ b/src/views/dashboard/related/profile/Content.vue
@@ -56,7 +56,7 @@ function loadTrees(l: boolean) {
 
 .item {
   height: 100%;
-  width: calc(100% - 300px);
+  flex-grow: 2;
   overflow: auto;
 }
 
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 4b2cda82..4d217ce1 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -153,7 +153,6 @@ import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { Option } from "@/types/app";
 import copy from "@/utils/copy";
-import List from "./components/List.vue";
 import graphs from "./components/index";
 import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
 import { ElMessage } from "element-plus";
@@ -162,7 +161,6 @@ export default defineComponent({
   name: "TraceDetail",
   components: {
     ...graphs,
-    List,
     LogTable,
   },
   setup() {
@@ -182,14 +180,8 @@ export default defineComponent({
       dayjs(date).format(pattern);
     const showTraceLogs = ref<boolean>(false);
 
-    function handleClick(ids: string[] | any) {
-      let copyValue = null;
-      if (ids.length === 1) {
-        copyValue = ids[0];
-      } else {
-        copyValue = ids.join(",");
-      }
-      copy(copyValue);
+    function handleClick() {
+      copy(traceId.value || traceStore.currentTrace.traceIds[0].value);
     }
 
     async function changeTraceId(opt: Option[] | any) {
@@ -235,6 +227,7 @@ export default defineComponent({
       pageNum,
       loading,
       total,
+      traceId,
     };
   },
 });
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index 893a45fb..35f3db68 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -31,7 +31,7 @@ import _ from "lodash";
 import * as d3 from "d3";
 import ListGraph from "../../utils/d3-trace-list";
 import TreeGraph from "../../utils/d3-trace-tree";
-import { Span } from "@/types/trace";
+import { Span, Ref } from "@/types/trace";
 import SpanDetail from "./SpanDetail.vue";
 
 /* global defineProps, Nullable, defineExpose*/
@@ -45,6 +45,7 @@ const showDetail = ref<boolean>(false);
 const fixSpansSize = ref<number>(0);
 const segmentId = ref<any>([]);
 const currentSpan = ref<Array<Span>>([]);
+const refSpans = ref<Array<Ref>>([]);
 const tree = ref<any>(null);
 const traceGraph = ref<Nullable<HTMLDivElement>>(null);
 defineExpose({
@@ -103,14 +104,17 @@ function changeTree() {
   segmentId.value = [];
   const segmentGroup: any = {};
   const segmentIdGroup: any = [];
-  const fixSpans: any[] = [];
-  const segmentHeaders: any = [];
+  const fixSpans: Span[] = [];
+  const segmentHeaders: Span[] = [];
   for (const span of props.data) {
+    if (span.refs.length) {
+      refSpans.value.push(...span.refs);
+    }
     if (span.parentSpanId === -1) {
       segmentHeaders.push(span);
     } else {
-      const index = props.data.findIndex(
-        (i: any) =>
+      const item = props.data.find(
+        (i: Span) =>
           i.segmentId === span.segmentId && i.spanId === span.spanId - 1
       );
       const fixSpanKeyContent = {
@@ -119,7 +123,7 @@ function changeTree() {
         spanId: span.spanId - 1,
         parentSpanId: span.spanId - 2,
       };
-      if (index === -1 && !_.find(fixSpans, fixSpanKeyContent)) {
+      if (!item && !_.find(fixSpans, fixSpanKeyContent)) {
         fixSpans.push({
           ...fixSpanKeyContent,
           refs: [],
@@ -133,6 +137,8 @@ function changeTree() {
           layer: "Broken",
           tags: [],
           logs: [],
+          startTime: 0,
+          endTime: 0,
         });
       }
     }
@@ -167,6 +173,8 @@ function changeTree() {
               layer: "Broken",
               tags: [],
               logs: [],
+              startTime: 0,
+              endTime: 0,
             });
           }
           // if root broken node is not exist, create a root broken node.
@@ -191,6 +199,8 @@ function changeTree() {
                 layer: "Broken",
                 tags: [],
                 logs: [],
+                startTime: 0,
+                endTime: 0,
               });
             }
           }
@@ -268,14 +278,28 @@ function changeTree() {
 }
 function collapse(d: Span) {
   if (d.children) {
+    const item = refSpans.value.find(
+      (s: Ref) =>
+        s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId
+    );
     let dur = d.endTime - d.startTime;
     d.children.forEach((i: Span) => {
       dur -= i.endTime - i.startTime;
     });
     d.dur = dur < 0 ? 0 : dur;
+    if (item) {
+      d.children = d.children.sort(compare("startTime"));
+    }
     d.children.forEach((i: Span) => collapse(i));
   }
 }
+function compare(p: string) {
+  return (m: any, n: any) => {
+    const a = m[p];
+    const b = n[p];
+    return a - b;
+  };
+}
 onBeforeUnmount(() => {
   d3.selectAll(".d3-tip").remove();
   window.removeEventListener("resize", resize);
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index 89a1046d..6aee1770 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -52,7 +52,7 @@ limitations under the License. -->
           class="grey link-hover cp ml-5"
           @click="copy(i.value)"
         >
-          <Icon iconName="review-list" />
+          <Icon size="middle" iconName="review-list" />
         </span>
       </span>
     </div>

From 4d26728eb5bf409ddaa21dde3967fe3b24ce29e6 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Mon, 30 May 2022 18:18:37 +0800
Subject: [PATCH 24/37] feat: add `Percentage Of Root` and `Percentage Of
 Selected` in the eBPF widget (#101)

---
 src/types/ebpf.d.ts                           |  2 ++
 .../related/ebpf/components/EBPFSchedules.vue |  2 +-
 .../related/ebpf/components/EBPFStack.vue     | 26 +++++++++++++++++--
 3 files changed, 27 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..9d8b6ab9 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -30,6 +30,7 @@ import "d3-flame-graph/dist/d3-flamegraph.css";
 /*global Nullable*/
 const ebpfStore = useEbpfStore();
 const stackTree = ref<Nullable<StackElement>>(null);
+const selectStack = ref<Nullable<StackElement>>(null);
 const graph = ref<Nullable<HTMLDivElement>>(null);
 const flameChart = ref<any>(null);
 const min = ref<number>(1);
@@ -52,6 +53,8 @@ function drawGraph() {
     symbol: "Virtual Root",
     dumpCount: 0,
     stackType: "",
+    rateOfRoot: "",
+    rateOfParent: "",
   };
   countRange();
   for (const tree of ebpfStore.analyzeTrees) {
@@ -81,18 +84,36 @@ function drawGraph() {
     .title("")
     .selfValue(false)
     .inverted(true)
+    .onClick((d: { data: StackElement }) => {
+      selectStack.value = d.data;
+    })
     .setColorMapper((d, originalColor) =>
       d.highlight ? "#6aff8f" : originalColor
     );
   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">Percentage Of Selected: ${
+            (
+              (d.data.dumpCount /
+                ((selectStack.value && selectStack.value.dumpCount) ||
+                  root.dumpCount)) *
+              100
+            ).toFixed(3) + "%"
+          }</div>`) ||
+        "";
+      const rateOfRoot = `<div class="mb-5">Percentage 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 +143,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));

From 0a746a125be69bfad68c43d4d8d8502cfec1f3b9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 2 Jun 2022 10:00:40 +0800
Subject: [PATCH 25/37] build(deps): bump eventsource from 1.1.0 to 1.1.1
 (#102)

---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a53afd05..fe87d6cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11080,9 +11080,9 @@
       }
     },
     "node_modules/eventsource": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.0.tgz",
-      "integrity": "sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.1.tgz",
+      "integrity": "sha512-qV5ZC0h7jYIAOhArFJgSfdyz6rALJyb270714o7ZtNnw2WSJ+eexhKtE0O8LYPRsHZHf2osHKZBxGPvm3kPkCA==",
       "dev": true,
       "dependencies": {
         "original": "^1.0.0"
@@ -37656,9 +37656,9 @@
       "dev": true
     },
     "eventsource": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.0.tgz",
-      "integrity": "sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.1.tgz",
+      "integrity": "sha512-qV5ZC0h7jYIAOhArFJgSfdyz6rALJyb270714o7ZtNnw2WSJ+eexhKtE0O8LYPRsHZHf2osHKZBxGPvm3kPkCA==",
       "dev": true,
       "requires": {
         "original": "^1.0.0"

From 30069ce82505c973b624531209611cea32d6db10 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Thu, 2 Jun 2022 20:09:38 +0800
Subject: [PATCH 26/37] feat: visualize a on-demand log widget (#99)

---
 package-lock.json                             |  61 +++
 package.json                                  |   2 +
 src/assets/icons/demand.svg                   |  16 +
 src/graphql/fragments/demand-log.ts           |  38 ++
 src/graphql/index.ts                          |   2 +
 src/graphql/query/demand-log.ts               |  22 +
 src/hooks/useEcharts.ts                       |   4 +
 src/locales/lang/en.ts                        |   6 +
 src/locales/lang/es.ts                        |  19 +-
 src/locales/lang/zh.ts                        |   6 +
 src/store/modules/dashboard.ts                |  11 +-
 src/store/modules/demand-log.ts               | 124 ++++++
 src/types/app.d.ts                            |   4 +
 src/types/demand-log.ts                       |  31 ++
 src/types/monaco-editor.ts                    |  17 +
 src/views/dashboard/controls/DemandLog.vue    |  93 ++++
 src/views/dashboard/controls/Tab.vue          |  11 +-
 src/views/dashboard/controls/index.ts         |  13 +-
 src/views/dashboard/data.ts                   |   2 +
 src/views/dashboard/panel/Tool.vue            |   6 +
 .../dashboard/related/demand-log/Content.vue  |  78 ++++
 .../dashboard/related/demand-log/Header.vue   | 412 ++++++++++++++++++
 .../dashboard/related/demand-log/data.ts      |  37 ++
 .../related/ebpf/components/EBPFSchedules.vue |   2 +-
 vue.config.js                                 |   9 +-
 25 files changed, 1012 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/icons/demand.svg
 create mode 100644 src/graphql/fragments/demand-log.ts
 create mode 100644 src/graphql/query/demand-log.ts
 create mode 100644 src/store/modules/demand-log.ts
 create mode 100644 src/types/demand-log.ts
 create mode 100644 src/types/monaco-editor.ts
 create mode 100644 src/views/dashboard/controls/DemandLog.vue
 create mode 100644 src/views/dashboard/related/demand-log/Content.vue
 create mode 100644 src/views/dashboard/related/demand-log/Header.vue
 create mode 100644 src/views/dashboard/related/demand-log/data.ts

diff --git a/package-lock.json b/package-lock.json
index fe87d6cc..c908f59a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "echarts": "^5.2.2",
         "element-plus": "^2.0.2",
         "lodash": "^4.17.21",
+        "monaco-editor": "^0.27.0",
         "pinia": "^2.0.5",
         "vue": "^3.0.0",
         "vue-grid-layout": "^3.0.0-beta1",
@@ -50,6 +51,7 @@
         "eslint-plugin-vue": "^7.0.0",
         "husky": "^7.0.4",
         "lint-staged": "^12.1.3",
+        "monaco-editor-webpack-plugin": "^4.1.2",
         "node-sass": "^6.0.1",
         "postcss-html": "^1.3.0",
         "postcss-scss": "^4.0.2",
@@ -18234,6 +18236,38 @@
         "node": "*"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.27.0.tgz",
+      "integrity": "sha512-UhwP78Wb8w0ZSYoKXQNTV/0CHObp6NS3nCt51QfKE6sKyBo5PBsvuDOHoI2ooBakc6uIwByRLHVeT7+yXQe2fQ=="
+    },
+    "node_modules/monaco-editor-webpack-plugin": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-4.1.2.tgz",
+      "integrity": "sha512-snmHecygICKT0UlHhva+Cs2WaLPpxy3111xbvInhjjTr5m0xQTFHlmJ2QQDcB14Vzmm7f07uc1TtbvOpmL50BA==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": "0.25.x || 0.26.x || 0.27.x",
+        "webpack": "^4.5.0 || 5.x"
+      }
+    },
+    "node_modules/monaco-editor-webpack-plugin/node_modules/loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -43271,6 +43305,33 @@
       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
       "dev": true
     },
+    "monaco-editor": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.27.0.tgz",
+      "integrity": "sha512-UhwP78Wb8w0ZSYoKXQNTV/0CHObp6NS3nCt51QfKE6sKyBo5PBsvuDOHoI2ooBakc6uIwByRLHVeT7+yXQe2fQ=="
+    },
+    "monaco-editor-webpack-plugin": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-4.1.2.tgz",
+      "integrity": "sha512-snmHecygICKT0UlHhva+Cs2WaLPpxy3111xbvInhjjTr5m0xQTFHlmJ2QQDcB14Vzmm7f07uc1TtbvOpmL50BA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/package.json b/package.json
index ece16b3a..e1f48cc3 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "echarts": "^5.2.2",
     "element-plus": "^2.0.2",
     "lodash": "^4.17.21",
+    "monaco-editor": "^0.27.0",
     "pinia": "^2.0.5",
     "vue": "^3.0.0",
     "vue-grid-layout": "^3.0.0-beta1",
@@ -52,6 +53,7 @@
     "eslint-plugin-vue": "^7.0.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.1.3",
+    "monaco-editor-webpack-plugin": "^4.1.2",
     "node-sass": "^6.0.1",
     "postcss-html": "^1.3.0",
     "postcss-scss": "^4.0.2",
diff --git a/src/assets/icons/demand.svg b/src/assets/icons/demand.svg
new file mode 100644
index 00000000..4b1b60db
--- /dev/null
+++ b/src/assets/icons/demand.svg
@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<svg t="1654161407133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1721" width="16" height="16"><path d="M804.224 86.144c0-19.264-15.616-34.944-34.944-34.944l-734.336 0c-19.264 0-34.944 15.68-34.944 34.944l0 82.048 804.224 0 0-82.048zM738.88 602.432c0 47.072-38.176 85.248-85.248 85.248s-85.248-38.176-85.248-85.248c0-47.072 38.176-85.248 85.248-85.248s85.248 38.176 85.248 85.248zM804.992 264.64l0-62.976-804.224 0 0 665.408c0 18.56 14.656 33.472 32.96 34.56l402.24 0c61.12 44.544 136.192 71.168 217.664 71.168 204.544 0 370.368-165.824 370.368-370.368 0-150.592-89.984-279.936-219.008-337.792zM412.096 298.24l30.528 0c-10.624 7.36-20.8 15.36-30.528 23.744l0-23.744zM63.04 298.24l153.024 0 0 153.024-153.024 0 0-153.024zM216.064 805.056l-153.024 0 0-153.024 153.024 0 0 153.024zM219.136 631.232l-153.024 0 0-153.024 153.024 0 0 153.024zM237.568 805.056l0-153.024 49.408 0c7.488 55.936 27.264 107.904 56.832 153.024l-106.24 0zM284.672 631.232l-44.032 0 0-153.024 64.384 0c-13.824 38.848-21.824 80.576-21.824 124.224 0 9.728 0.768 19.264 1.472 28.8zM390.592 341.76c-31.168 31.424-56.512 68.544-74.88 109.44l-78.144 0 0-152.96 153.024 0 0 43.52zM899.136 638.4l-63.36 12.864c-4.288 16.064-10.688 31.296-18.816 45.376l35.712 53.888-50.944 50.944-53.888-35.712c-14.08 8.128-29.312 14.528-45.376 18.816l-12.864 63.36-72 0-12.864-63.36c-16.064-4.288-31.296-10.688-45.376-18.816l-53.888 35.712-50.944-50.944 35.712-53.888c-8.128-14.08-14.528-29.312-18.816-45.376l-63.36-12.864 0-72 63.36-12.864c4.352-16.064 10.688-31.296 18.816-45.312l-35.712-53.952 50.944-50.944 53.888 35.776c14.08-8.128 29.312-14.464 45.376-18.816l12.864-63.36 72 0 12.864 63.36c16.064 4.288 31.296 10.688 45.376 18.816l53.888-35.712 50.944 50.944-35.712 53.824c8.128 14.08 14.528 29.312 18.816 45.376l63.36 12.864 0 72z" p-id="1722" fill="#707070"></path></svg>
\ No newline at end of file
diff --git a/src/graphql/fragments/demand-log.ts b/src/graphql/fragments/demand-log.ts
new file mode 100644
index 00000000..40df4977
--- /dev/null
+++ b/src/graphql/fragments/demand-log.ts
@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+export const queryContainers = {
+  variable: "$condition: OndemandContainergQueryCondition!",
+  query: `
+  containers: listContainers(condition: $condition) {
+    errorReason
+    containers
+  }`,
+};
+
+export const queryStreamingLogs = {
+  variable: "$condition: OndemandLogQueryCondition",
+  query: `
+  logs: ondemandPodLogs(condition: $condition) {
+    errorReason
+    logs {
+      timestamp
+      contentType
+      content
+    }
+  }`,
+};
diff --git a/src/graphql/index.ts b/src/graphql/index.ts
index 3b76c9fb..19271544 100644
--- a/src/graphql/index.ts
+++ b/src/graphql/index.ts
@@ -26,6 +26,7 @@ import * as profile from "./query/profile";
 import * as alarm from "./query/alarm";
 import * as event from "./query/event";
 import * as ebpf from "./query/ebpf";
+import * as demandLog from "./query/demand-log";
 
 const query: { [key: string]: string } = {
   ...app,
@@ -38,6 +39,7 @@ const query: { [key: string]: string } = {
   ...alarm,
   ...event,
   ...ebpf,
+  ...demandLog,
 };
 class Graphql {
   private queryData = "";
diff --git a/src/graphql/query/demand-log.ts b/src/graphql/query/demand-log.ts
new file mode 100644
index 00000000..94fd1432
--- /dev/null
+++ b/src/graphql/query/demand-log.ts
@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+import { queryContainers, queryStreamingLogs } from "../fragments/demand-log";
+
+export const fetchContainers = `query listContainers(${queryContainers.variable}) {${queryContainers.query}}`;
+
+export const fetchDemandPodLogs = `query ondemandPodLogs(${queryStreamingLogs.variable}) {${queryStreamingLogs.query}}`;
diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts
index 16b505b2..01f7d7ed 100644
--- a/src/hooks/useEcharts.ts
+++ b/src/hooks/useEcharts.ts
@@ -79,7 +79,11 @@ export function useECharts(
     if (!el || !unref(el)) {
       return;
     }
+    const { width, height } = el.getBoundingClientRect();
 
+    if (!width || !height) {
+      return;
+    }
     chartInstance = echarts.init(el, t);
     const { removeEvent } = useEventListener({
       el: window,
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 7f55d4a0..7749d634 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -136,7 +136,13 @@ const msg = {
   targetType: "Target Type",
   ebpfTip: "Don't have a process for profiling",
   processSelect: "Click to select processes",
+  container: "Container",
+  limit: "Limit",
   page: "Page",
+  interval: "Refresh Interval",
+  pause: "Pause",
+  begin: "Start",
+  seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 40ef1fda..c5c8a58e 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -74,8 +74,10 @@ const msg = {
   editGraph: "Editar Opciones",
   dashboardName: "Selecciona Nombre del Panel",
   linkDashboard: "Nombre del panel relacionado con llamadas de la topología",
-  linkServerMetrics: "Métricas de servidor relacionadas con llamadas de la topología",
-  linkClientMetrics: "Métricas de cliente relacionadas con llamadas de la topología",
+  linkServerMetrics:
+    "Métricas de servidor relacionadas con llamadas de la topología",
+  linkClientMetrics:
+    "Métricas de cliente relacionadas con llamadas de la topología",
   nodeDashboard: "Nombre del panel relacionado con nodos de la topología",
   nodeMetrics: "Mêtricas relacionas con nodos de la topología",
   instanceDashboard: "Nombre del panel relacionado con instancias de servicio",
@@ -137,6 +139,10 @@ const msg = {
   ebpfTip: "Le falta el proceso para perfilar",
   processSelect: "Click para seleccionar proceso",
   page: "Página",
+  interval: "Intervalo de actualización",
+  pause: "Pausa",
+  begin: "Inicio",
+  seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",
   secondTip: "Seleccione Segundo",
@@ -303,7 +309,8 @@ const msg = {
   destEndpoint: "Endpoint Destinación",
   eventSource: "Fuente Envento",
   modalTitle: "Inspección",
-  selectRedirectPage: "Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
+  selectRedirectPage:
+    "Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
   logAnalysis: "Lenguaje de Análisis de Registro de Datos",
   logDataBody: "Contenido del Registro de Datos",
   addType: "Por favor introduzca un tipo",
@@ -324,8 +331,10 @@ const msg = {
   addTraceID: "Por favor introduzca el ID de la traza",
   addTags: "Por favor introduzaca una etiqueta",
   addKeywordsOfContent: "Por favor introduzca una clave de contenido",
-  addExcludingKeywordsOfContent: "Por favor introduzca una clave excluyente de contenido",
-  noticeTag: "Por favor presione Intro después de introducir una etiqueta(clave=valor).",
+  addExcludingKeywordsOfContent:
+    "Por favor introduzca una clave excluyente de contenido",
+  noticeTag:
+    "Por favor presione Intro después de introducir una etiqueta(clave=valor).",
   conditionNotice:
     "Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).",
   language: "Lenguaje",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 88af9d13..10d8837a 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -134,7 +134,13 @@ const msg = {
   targetType: "目标类型",
   processSelect: "点击选择进程",
   ebpfTip: "没有进程可以分析",
+  container: "容器",
+  limit: "范围",
   page: "页面",
+  interval: "刷新间隔时间",
+  pause: "暂停",
+  begin: "开始",
+  seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 2ed20f17..596ac8b6 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -114,7 +114,8 @@ export const dashboardStore = defineStore({
         type === "Trace" ||
         type === "Profile" ||
         type === "Log" ||
-        type === "Ebpf"
+        type === "Ebpf" ||
+        type === "DemandLog"
       ) {
         newItem.h = 36;
       }
@@ -170,7 +171,13 @@ export const dashboardStore = defineStore({
           showDepth: true,
         };
       }
-      if (type === "Trace" || type === "Profile" || type === "Log") {
+      if (
+        type === "Trace" ||
+        type === "Profile" ||
+        type === "Log" ||
+        type === "DemandLog" ||
+        type === "Ebpf"
+      ) {
         newItem.h = 32;
       }
       if (type === "Text") {
diff --git a/src/store/modules/demand-log.ts b/src/store/modules/demand-log.ts
new file mode 100644
index 00000000..0eaf7d1e
--- /dev/null
+++ b/src/store/modules/demand-log.ts
@@ -0,0 +1,124 @@
+import { ElMessage } from "element-plus";
+/**
+ * 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.
+ */
+import { defineStore } from "pinia";
+import { Instance } from "@/types/selector";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import { AxiosResponse } from "axios";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { Conditions, Log } from "@/types/demand-log";
+
+interface DemandLogState {
+  containers: Instance[];
+  instances: Instance[];
+  conditions: Conditions;
+  selectorStore: any;
+  logs: Log[];
+  loadLogs: boolean;
+  message: string;
+}
+
+export const demandLogStore = defineStore({
+  id: "demandLog",
+  state: (): DemandLogState => ({
+    containers: [{ label: "", value: "" }],
+    instances: [{ value: "", label: "" }],
+    conditions: {
+      container: "",
+      serviceInstanceId: "",
+      duration: useAppStoreWithOut().durationTime,
+    },
+    selectorStore: useSelectorStore(),
+    logs: [],
+    loadLogs: false,
+    message: "",
+  }),
+  actions: {
+    setLogCondition(data: Conditions) {
+      this.conditions = { ...this.conditions, ...data };
+    },
+    setLogs(logs: Log[], message?: string) {
+      this.logs = logs;
+      this.message = message || "";
+    },
+    async getInstances(id: string) {
+      const serviceId = this.selectorStore.currentService
+        ? this.selectorStore.currentService.id
+        : id;
+      const res: AxiosResponse = await graphql.query("queryInstances").params({
+        serviceId,
+        duration: useAppStoreWithOut().durationTime,
+      });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.instances = res.data.data.pods || [];
+      return res.data;
+    },
+    async getContainers(serviceInstanceId: string) {
+      if (!serviceInstanceId) {
+        return new Promise((resolve) =>
+          resolve({ errors: "No service instance" })
+        );
+      }
+      const condition = {
+        serviceInstanceId,
+      };
+      const res: AxiosResponse = await graphql
+        .query("fetchContainers")
+        .params({ condition });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      if (res.data.data.containers.errorReason) {
+        this.containers = [{ label: "", value: "" }];
+        return res.data;
+      }
+      this.containers = res.data.data.containers.containers.map((d: string) => {
+        return { label: d, value: d };
+      });
+      return res.data;
+    },
+    async getDemandLogs() {
+      this.loadLogs = true;
+      const res: AxiosResponse = await graphql
+        .query("fetchDemandPodLogs")
+        .params({ condition: this.conditions });
+      this.loadLogs = false;
+      if (res.data.errors) {
+        return res.data;
+      }
+      if (res.data.data.logs.errorReason) {
+        this.setLogs("", res.data.data.logs.errorReason);
+        return res.data;
+      }
+      const logs = res.data.data.logs.logs
+        .map((d: Log) => d.content)
+        .join("\n");
+      this.setLogs(logs);
+      return res.data;
+    },
+  },
+});
+
+export function useDemandLogStore(): any {
+  return demandLogStore(store);
+}
diff --git a/src/types/app.d.ts b/src/types/app.d.ts
index 74e69c32..ee35299a 100644
--- a/src/types/app.d.ts
+++ b/src/types/app.d.ts
@@ -28,3 +28,7 @@ export interface DurationTime {
   end: string;
   step: string;
 }
+export type Paging = {
+  pageNum: number;
+  pageSize: number;
+};
diff --git a/src/types/demand-log.ts b/src/types/demand-log.ts
new file mode 100644
index 00000000..44a24ab7
--- /dev/null
+++ b/src/types/demand-log.ts
@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+import { DurationTime } from "./app";
+
+export interface Conditions {
+  container: string;
+  serviceInstanceId: string;
+  duration: DurationTime;
+  keywordsOfContent?: string[];
+  excludingKeywordsOfContent?: string;
+}
+
+export interface Log {
+  content: string;
+  timestamp: number;
+  contentType: string;
+}
diff --git a/src/types/monaco-editor.ts b/src/types/monaco-editor.ts
new file mode 100644
index 00000000..0e7645a5
--- /dev/null
+++ b/src/types/monaco-editor.ts
@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+declare module "monaco-editor";
diff --git a/src/views/dashboard/controls/DemandLog.vue b/src/views/dashboard/controls/DemandLog.vue
new file mode 100644
index 00000000..543bad00
--- /dev/null
+++ b/src/views/dashboard/controls/DemandLog.vue
@@ -0,0 +1,93 @@
+<!-- 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="log-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>
+    <div class="header">
+      <Header />
+    </div>
+    <Content />
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import Header from "../related/demand-log/Header.vue";
+import Content from "../related/demand-log/Content.vue";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  activeIndex: { type: String, default: "" },
+});
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+
+function removeWidget() {
+  dashboardStore.removeControls(props.data);
+}
+</script>
+<style lang="scss" scoped>
+.log-wrapper {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  position: relative;
+  overflow: auto;
+}
+
+.delete {
+  position: absolute;
+  top: 5px;
+  right: 3px;
+}
+
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+  min-width: 1024px;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+</style>
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 524e9f7e..50642870 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -110,6 +110,7 @@ import Log from "./Log.vue";
 import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
 import { dragIgnoreFrom } from "../data";
+import DemandLog from "./DemandLog.vue";
 
 const props = {
   data: {
@@ -120,7 +121,7 @@ const props = {
 };
 export default defineComponent({
   name: "Tab",
-  components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf },
+  components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf, DemandLog },
   props,
   setup(props) {
     const { t } = useI18n();
@@ -250,21 +251,23 @@ export default defineComponent({
 
   span {
     display: inline-block;
-    padding: 0 10px;
-    margin: 0 10px;
     height: 40px;
     line-height: 40px;
     cursor: pointer;
+    text-align: center;
   }
 
   .tab-name {
-    max-width: 130px;
+    max-width: 110px;
     height: 20px;
     line-height: 20px;
     outline: none;
     color: #333;
     font-style: normal;
     margin-right: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
   }
 
   .tab-icons {
diff --git a/src/views/dashboard/controls/index.ts b/src/views/dashboard/controls/index.ts
index 01fc5dc5..858bc5c5 100644
--- a/src/views/dashboard/controls/index.ts
+++ b/src/views/dashboard/controls/index.ts
@@ -22,5 +22,16 @@ import Profile from "./Profile.vue";
 import Log from "./Log.vue";
 import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
+import DemandLog from "./DemandLog.vue";
 
-export default { Tab, Widget, Trace, Topology, Profile, Log, Text, Ebpf };
+export default {
+  Tab,
+  Widget,
+  Trace,
+  Topology,
+  Profile,
+  Log,
+  Text,
+  Ebpf,
+  DemandLog,
+};
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index c6e4bc32..b19f65e7 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -186,6 +186,7 @@ export const ServiceTools = [
   { name: "timeline", content: "Trace Profiling", id: "addProfile" },
   { name: "insert_chart", content: "eBPF Profiling", id: "addEbpf" },
   { name: "assignment", content: "Log", id: "addLog" },
+  { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
 ];
 export const InstanceTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
@@ -193,6 +194,7 @@ export const InstanceTools = [
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
   { name: "assignment", content: "Add Log", id: "addLog" },
+  { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
 ];
 export const EndpointTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index bc96d8c3..8d8ed374 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -455,6 +455,9 @@ function setTabControls(id: string) {
     case "addText":
       dashboardStore.addTabControls("Text");
       break;
+    case "addDemandLog":
+      dashboardStore.addTabControls("DemandLog");
+      break;
     default:
       ElMessage.info("Don't support this control");
       break;
@@ -487,6 +490,9 @@ function setControls(id: string) {
     case "addText":
       dashboardStore.addControl("Text");
       break;
+    case "addDemandLog":
+      dashboardStore.addControl("DemandLog");
+      break;
     default:
       dashboardStore.addControl("Widget");
   }
diff --git a/src/views/dashboard/related/demand-log/Content.vue b/src/views/dashboard/related/demand-log/Content.vue
new file mode 100644
index 00000000..a3577f97
--- /dev/null
+++ b/src/views/dashboard/related/demand-log/Content.vue
@@ -0,0 +1,78 @@
+<!-- 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
+    v-loading="demandLogStore.loadLogs"
+    class="log-content"
+    ref="logContent"
+    style="width: calc(100% - 10px); height: calc(100% - 140px)"
+  >
+    <span v-if="demandLogStore.message">{{ demandLogStore.message }}</span>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
+import { useDemandLogStore } from "@/store/modules/demand-log";
+
+/*global Nullable */
+const demandLogStore = useDemandLogStore();
+const monacoInstance = ref();
+const logContent = ref<Nullable<HTMLDivElement>>(null);
+
+onMounted(async () => {
+  const monaco = await import("monaco-editor");
+  monacoInstanceGen(monaco);
+  window.addEventListener("resize", () => {
+    editorLayout();
+  });
+});
+function monacoInstanceGen(monaco: any) {
+  monacoInstance.value = monaco.editor.create(logContent.value, {
+    value: "",
+    language: "text",
+    wordWrap: true,
+    minimap: { enabled: false },
+  });
+}
+function editorLayout() {
+  if (!logContent.value) {
+    return;
+  }
+  const { width, height } = logContent.value.getBoundingClientRect();
+  toRaw(monacoInstance.value).layout({
+    height: height,
+    width: width,
+  });
+}
+onUnmounted(() => {
+  if (!toRaw(monacoInstance.value)) {
+    return;
+  }
+  toRaw(monacoInstance.value).dispose();
+  monacoInstance.value = null;
+});
+watch(
+  () => demandLogStore.logs,
+  () => {
+    toRaw(monacoInstance.value).setValue(demandLogStore.logs);
+  }
+);
+</script>
+<style lang="scss" scoped>
+.log-content {
+  min-width: 600px;
+  min-height: 400px;
+}
+</style>
diff --git a/src/views/dashboard/related/demand-log/Header.vue b/src/views/dashboard/related/demand-log/Header.vue
new file mode 100644
index 00000000..3164bc9c
--- /dev/null
+++ b/src/views/dashboard/related/demand-log/Header.vue
@@ -0,0 +1,412 @@
+<!-- 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="flex-h row">
+    <div class="mr-5 mb-5" v-if="dashboardStore.entity !== EntityType[3].value">
+      <span class="grey mr-5"> {{ t("instance") }}: </span>
+      <Selector
+        size="small"
+        :value="state.instance.value"
+        :options="demandLogStore.instances"
+        placeholder="Select a instance"
+        @change="changeField('instance', $event)"
+        class="selectors"
+      />
+    </div>
+    <div class="mr-5 mb-5" v-if="state.container">
+      <span class="grey mr-5">{{ t("container") }}:</span>
+      <Selector
+        size="small"
+        :value="state.container.value"
+        :options="demandLogStore.containers"
+        placeholder="Select a container"
+        @change="changeField('container', $event)"
+        class="selectors"
+      />
+    </div>
+    <!-- <div class="mr-5">
+      <span class="grey mr-5">{{ t("limit") }}:</span>
+      <el-input-number
+        v-model="limit"
+        :min="1"
+        :max="1000"
+        size="small"
+        controls-position="right"
+        @change="changeField('limit', $event)"
+      />
+    </div> -->
+    <div class="mr-5">
+      <span class="grey mr-5">{{ t("duration") }}:</span>
+      <Selector
+        size="small"
+        :value="state.duration.value"
+        :options="TimeRanges"
+        placeholder="Select a time range"
+        @change="changeField('duration', $event)"
+        class="duration-range"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey mr-5">{{ t("interval") }}:</span>
+      <Selector
+        size="small"
+        :value="state.interval.value"
+        :options="IntervalOpts"
+        @change="changeField('interval', $event)"
+      />
+    </div>
+  </div>
+  <div class="flex-h row">
+    <div class="mr-5">
+      <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
+      <span class="log-tags">
+        <span
+          class="selected"
+          v-for="(item, index) in keywordsOfContent"
+          :key="`keywordsOfContent${index}`"
+        >
+          <span>{{ item }}</span>
+          <span class="remove-icon" @click="removeContent(index)">×</span>
+        </span>
+      </span>
+      <el-input
+        size="small"
+        class="inputs-max"
+        :placeholder="t('addKeywordsOfContent')"
+        v-model="contentStr"
+        @change="addLabels('keywordsOfContent')"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
+      <span class="log-tags">
+        <span
+          class="selected"
+          v-for="(item, index) in excludingKeywordsOfContent"
+          :key="`excludingKeywordsOfContent${index}`"
+        >
+          <span>{{ item }}</span>
+          <span class="remove-icon" @click="removeExcludeContent(index)">
+            ×
+          </span>
+        </span>
+      </span>
+      <el-input
+        class="inputs-max"
+        size="small"
+        :placeholder="t('addExcludingKeywordsOfContent')"
+        v-model="excludingContentStr"
+        @change="addLabels('excludingKeywordsOfContent')"
+      />
+      <el-tooltip :content="t('keywordsOfContentLogTips')">
+        <span class="log-tips">
+          <Icon size="middle" iconName="help" class="ml-5 help" />
+        </span>
+      </el-tooltip>
+    </div>
+  </div>
+  <div class="flex-h row btn-row">
+    <el-button
+      class="search-btn mt-10"
+      size="small"
+      type="primary"
+      @click="runInterval"
+    >
+      <Icon
+        size="middle"
+        iconName="retry"
+        :loading="!!intervalFn"
+        class="mr-5"
+      />
+      {{ intervalFn ? t("pause") : t("start") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, watch, computed, onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDemandLogStore } from "@/store/modules/demand-log";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
+import { EntityType } from "../../data";
+import { TimeRanges, IntervalOpts } from "./data";
+import getLocalTime from "@/utils/localtime";
+import dateFormatStep from "@/utils/dateFormat";
+
+const { t } = useI18n();
+const appStore = useAppStoreWithOut();
+const selectorStore = useSelectorStore();
+const dashboardStore = useDashboardStore();
+const demandLogStore = useDemandLogStore();
+const keywordsOfContent = ref<string[]>([]);
+const excludingKeywordsOfContent = ref<string[]>([]);
+const contentStr = ref<string>("");
+const excludingContentStr = ref<string>("");
+// const limit = ref<number>(20);
+const state = reactive<any>({
+  instance: { value: "", label: "" },
+  container: { value: "", label: "" },
+  duration: { label: "From 30 minutes ago", value: 1800 },
+  interval: { label: "30 seconds", value: 30 },
+});
+/*global Nullable */
+const intervalFn = ref<Nullable<any>>(null);
+const rangeTime = computed(() => {
+  const times = {
+    start: getLocalTime(
+      appStore.utc,
+      new Date(new Date().getTime() - state.duration.value * 1000)
+    ),
+    end: getLocalTime(appStore.utc, new Date()),
+    step: "SECOND",
+  };
+  return {
+    start: dateFormatStep(times.start, times.step, false),
+    end: dateFormatStep(times.end, times.step, false),
+    step: times.step,
+  };
+});
+
+onMounted(() => {
+  fetchSelectors();
+});
+
+async function fetchSelectors() {
+  if (dashboardStore.entity !== EntityType[3].value) {
+    await getInstances();
+  }
+  getContainers();
+  if (intervalFn.value) {
+    clearTimer();
+  }
+}
+async function getContainers() {
+  const resp = await demandLogStore.getContainers(
+    state.instance.id || selectorStore.currentPod.id || ""
+  );
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  if (demandLogStore.containers.length) {
+    state.container = demandLogStore.containers[0];
+  }
+}
+async function getInstances() {
+  const resp = await demandLogStore.getInstances();
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.instance = demandLogStore.instances[0];
+}
+function runInterval() {
+  if (intervalFn.value) {
+    clearTimer();
+    return;
+  }
+  searchLogs();
+  if (state.interval.value === 0) {
+    return;
+  }
+  intervalFn.value = setInterval(searchLogs, state.interval.value * 1000);
+  setTimeout(() => {
+    clearTimer();
+  }, state.duration.value * 1000);
+}
+function searchLogs() {
+  let instance = state.instance.id;
+  if (dashboardStore.entity === EntityType[3].value) {
+    instance = selectorStore.currentPod.id;
+  }
+  demandLogStore.setLogCondition({
+    serviceInstanceId: instance || state.instance.id || "",
+    container: state.container.value,
+    duration: rangeTime.value,
+    keywordsOfContent: keywordsOfContent.value.length
+      ? keywordsOfContent.value
+      : undefined,
+    excludingKeywordsOfContent: excludingKeywordsOfContent.value.length
+      ? excludingKeywordsOfContent.value
+      : undefined,
+  });
+  queryLogs();
+}
+async function queryLogs() {
+  const res = await demandLogStore.getDemandLogs();
+  if (res && res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+function changeField(type: string, opt: any) {
+  clearTimer();
+  // if (["limit"].includes(type)) {
+  //   state[type] = opt;
+  //   return;
+  // }
+  state[type] = opt[0];
+  if (type === "instance") {
+    getContainers();
+  }
+}
+function removeContent(index: number) {
+  const keywordsOfContentList = keywordsOfContent.value || [];
+  keywordsOfContentList.splice(index, 1);
+  demandLogStore.setLogCondition({
+    keywordsOfContent: keywordsOfContentList,
+  });
+  contentStr.value = "";
+  clearTimer();
+}
+function addLabels(type: string) {
+  if (type === "keywordsOfContent" && !contentStr.value) {
+    return;
+  }
+  if (type === "excludingKeywordsOfContent" && !excludingContentStr.value) {
+    return;
+  }
+  if (type === "keywordsOfContent") {
+    keywordsOfContent.value.push(contentStr.value);
+    demandLogStore.setLogCondition({
+      [type]: keywordsOfContent.value,
+    });
+    contentStr.value = "";
+  } else if (type === "excludingKeywordsOfContent") {
+    excludingKeywordsOfContent.value.push(excludingContentStr.value);
+    demandLogStore.setLogCondition({
+      [type]: excludingKeywordsOfContent.value,
+    });
+    excludingContentStr.value = "";
+  }
+  clearTimer();
+}
+function removeExcludeContent(index: number) {
+  excludingKeywordsOfContent.value.splice(index, 1);
+  demandLogStore.setLogCondition({
+    excludingKeywordsOfContent: excludingKeywordsOfContent.value,
+  });
+  excludingContentStr.value = "";
+  clearTimer();
+}
+function clearTimer() {
+  if (!intervalFn.value) {
+    return;
+  }
+  clearInterval(intervalFn.value);
+  intervalFn.value = null;
+}
+onUnmounted(() => {
+  clearTimer();
+});
+watch(
+  () => selectorStore.currentService,
+  () => {
+    if (dashboardStore.entity === EntityType[0].value) {
+      fetchSelectors();
+      demandLogStore.setLogs("");
+    }
+  }
+);
+watch(
+  () => [selectorStore.currentPod],
+  () => {
+    if (dashboardStore.entity === EntityType[3].value) {
+      fetchSelectors();
+      demandLogStore.setLogs("");
+    }
+  }
+);
+</script>
+<style lang="scss" scoped>
+.inputs {
+  width: 120px;
+}
+
+.row {
+  margin-bottom: 5px;
+  position: relative;
+  flex-wrap: wrap;
+}
+
+.inputs-max {
+  width: 270px;
+}
+
+.traceId {
+  margin-top: 2px;
+}
+
+.search-btn {
+  cursor: pointer;
+  width: 120px;
+}
+
+.tips {
+  color: #888;
+}
+
+.log-tag {
+  width: 30%;
+  border-style: unset;
+  outline: 0;
+  border: 1px solid #ccc;
+  height: 30px;
+  padding: 0 5px;
+}
+
+.log-tags {
+  padding: 1px 5px 0 0;
+  border-radius: 3px;
+  height: 24px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.selected {
+  display: inline-block;
+  padding: 0 3px;
+  border-radius: 3px;
+  overflow: hidden;
+  color: #3d444f;
+  border: 1px dashed #aaa;
+  font-size: 12px;
+  margin: 0 2px;
+}
+
+.remove-icon {
+  display: inline-block;
+  margin-left: 3px;
+  cursor: pointer;
+}
+
+.selectors {
+  width: 250px;
+}
+
+.duration-range {
+  width: 210px;
+}
+
+.btn-row {
+  justify-content: flex-end;
+}
+
+.help {
+  color: #999;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/dashboard/related/demand-log/data.ts b/src/views/dashboard/related/demand-log/data.ts
new file mode 100644
index 00000000..0ef8c235
--- /dev/null
+++ b/src/views/dashboard/related/demand-log/data.ts
@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+export const TimeRanges = [
+  { label: "From 5 seconds ago -- Now", value: 5 },
+  { label: "From 10 seconds ago -- Now", value: 10 },
+  { label: "From 15 seconds ago -- Now", value: 15 },
+  { label: "From 30 seconds ago -- Now", value: 30 },
+  { label: "From 45 seconds ago -- Now", value: 45 },
+  { label: "From 1 minute ago -- Now", value: 60 },
+  { label: "From 5 minutes ago -- Now", value: 300 },
+  { label: "From 15 minutes ago -- Now", value: 900 },
+  { label: "From 30 minutes ago -- Now", value: 1800 },
+];
+export const IntervalOpts = [
+  { label: "None", value: 0 },
+  { label: "5 seconds", value: 5 },
+  { label: "10 seconds", value: 10 },
+  { label: "15 seconds", value: 15 },
+  { label: "30 seconds", value: 30 },
+  { label: "45 seconds", value: 45 },
+  { label: "1 minute", value: 60 },
+];
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index d58dfe91..21539fd1 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -253,7 +253,7 @@ watch(
 }
 
 .inputs {
-  width: 350px;
+  width: 400px;
 }
 
 .input-with-search {
diff --git a/vue.config.js b/vue.config.js
index dd9d016c..d26454e6 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
 const AutoImport = require("unplugin-auto-import/webpack");
 const Components = require("unplugin-vue-components/webpack");
 const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
@@ -64,6 +65,11 @@ module.exports = {
             test: /[\\/]node_modules[\\/]echarts|zrender[\\/]/,
             priority: 30,
           },
+          monacoEditor: {
+            name: "monaco-editor",
+            test: /[\\/]node_modules[\\/]monaco-editor[\\/]/,
+            priority: 40,
+          },
           elementPlus: {
             name: "element-plus",
             test: /[\\/]node_modules[\\/]element-plus|@element-plus[\\/]/,
@@ -98,7 +104,8 @@ module.exports = {
       Components({
         resolvers: [ElementPlusResolver({ importStyle: "css" })],
         dts: "./src/types/components.d.ts",
-      })
+      }),
+      new MonacoWebpackPlugin()
     );
   },
 };

From c875c95c20f3ffba47130f14a785f9392ce67d96 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Mon, 6 Jun 2022 16:36:04 +0800
Subject: [PATCH 27/37] fix: activate the correct tab index after renaming a
 Tabs name (#103)

---
 src/store/modules/demand-log.ts                          | 1 -
 src/views/dashboard/panel/Layout.vue                     | 9 ++++++---
 src/views/dashboard/panel/Tool.vue                       | 2 +-
 .../dashboard/related/ebpf/components/EBPFSchedules.vue  | 7 ++++++-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/store/modules/demand-log.ts b/src/store/modules/demand-log.ts
index 0eaf7d1e..87565091 100644
--- a/src/store/modules/demand-log.ts
+++ b/src/store/modules/demand-log.ts
@@ -1,4 +1,3 @@
-import { ElMessage } from "element-plus";
 /**
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index b54a23f2..02b93fea 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -29,7 +29,7 @@ limitations under the License. -->
       :h="item.h"
       :i="item.i"
       :key="item.i"
-      @click="clickGrid(item)"
+      @click="clickGrid(item, $event)"
       :class="{ active: dashboardStore.activedGridItem === item.i }"
       :drag-ignore-from="dragIgnoreFrom"
     >
@@ -55,10 +55,13 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
-    function clickGrid(item: LayoutConfig) {
+    function clickGrid(item: LayoutConfig, event: Event) {
       dashboardStore.activeGridItem(item.i);
       dashboardStore.selectWidget(item);
-      if (item.type === "Tab") {
+      if (
+        item.type === "Tab" &&
+        (event.target as HTMLDivElement)?.className !== "tab-layout"
+      ) {
         dashboardStore.setActiveTabIndex(0);
       }
     }
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 8d8ed374..31ea55b5 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -80,7 +80,7 @@ limitations under the License. -->
     </div>
     <div class="flex-h tools" v-loading="loading" v-if="!appStore.isMobile">
       <div class="tool-icons flex-h" v-if="dashboardStore.editMode">
-        <el-dropdown content="Controls" placement="bottom">
+        <el-dropdown content="Controls" placement="bottom" :persistent="false">
           <i>
             <Icon class="icon-btn" size="sm" iconName="control" />
           </i>
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index 21539fd1..0cd8f9d0 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -40,7 +40,12 @@ limitations under the License. -->
         @change="changeAggregateType"
         class="selector mr-10"
       />
-      <el-popover placement="bottom" :width="680" trigger="click">
+      <el-popover
+        placement="bottom"
+        :width="680"
+        trigger="click"
+        :persistent="false"
+      >
         <template #reference>
           <el-button type="primary" size="small">
             {{ t("processSelect") }}

From 3c37d7c1977d7a644ea235133c5a16f56e1f1579 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Tue, 7 Jun 2022 21:54:29 +0800
Subject: [PATCH 28/37] fix: set the duration and scroll position for on-demand
 logs (#104)

---
 src/graphql/fragments/demand-log.ts           |  2 -
 src/store/modules/demand-log.ts               |  3 +
 .../dashboard/related/demand-log/Content.vue  | 21 ++++++-
 .../dashboard/related/demand-log/Header.vue   | 62 +++++++++++--------
 4 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/src/graphql/fragments/demand-log.ts b/src/graphql/fragments/demand-log.ts
index 40df4977..3579f8c5 100644
--- a/src/graphql/fragments/demand-log.ts
+++ b/src/graphql/fragments/demand-log.ts
@@ -30,8 +30,6 @@ export const queryStreamingLogs = {
   logs: ondemandPodLogs(condition: $condition) {
     errorReason
     logs {
-      timestamp
-      contentType
       content
     }
   }`,
diff --git a/src/store/modules/demand-log.ts b/src/store/modules/demand-log.ts
index 87565091..3aa37ac7 100644
--- a/src/store/modules/demand-log.ts
+++ b/src/store/modules/demand-log.ts
@@ -31,6 +31,7 @@ interface DemandLogState {
   logs: Log[];
   loadLogs: boolean;
   message: string;
+  total: number;
 }
 
 export const demandLogStore = defineStore({
@@ -47,6 +48,7 @@ export const demandLogStore = defineStore({
     logs: [],
     loadLogs: false,
     message: "",
+    total: 0,
   }),
   actions: {
     setLogCondition(data: Conditions) {
@@ -109,6 +111,7 @@ export const demandLogStore = defineStore({
         this.setLogs("", res.data.data.logs.errorReason);
         return res.data;
       }
+      this.total = res.data.data.logs.logs.length;
       const logs = res.data.data.logs.logs
         .map((d: Log) => d.content)
         .join("\n");
diff --git a/src/views/dashboard/related/demand-log/Content.vue b/src/views/dashboard/related/demand-log/Content.vue
index a3577f97..b06d49d3 100644
--- a/src/views/dashboard/related/demand-log/Content.vue
+++ b/src/views/dashboard/related/demand-log/Content.vue
@@ -31,20 +31,25 @@ const demandLogStore = useDemandLogStore();
 const monacoInstance = ref();
 const logContent = ref<Nullable<HTMLDivElement>>(null);
 
-onMounted(async () => {
+onMounted(() => {
+  init();
+});
+async function init() {
   const monaco = await import("monaco-editor");
   monacoInstanceGen(monaco);
   window.addEventListener("resize", () => {
     editorLayout();
   });
-});
+}
 function monacoInstanceGen(monaco: any) {
   monacoInstance.value = monaco.editor.create(logContent.value, {
     value: "",
     language: "text",
     wordWrap: true,
     minimap: { enabled: false },
+    readonly: true,
   });
+  toRaw(monacoInstance.value).updateOptions({ readOnly: true });
 }
 function editorLayout() {
   if (!logContent.value) {
@@ -66,7 +71,19 @@ onUnmounted(() => {
 watch(
   () => demandLogStore.logs,
   () => {
+    if (!toRaw(monacoInstance.value)) {
+      return;
+    }
     toRaw(monacoInstance.value).setValue(demandLogStore.logs);
+    if (!demandLogStore.logs) {
+      return;
+    }
+    setTimeout(() => {
+      toRaw(monacoInstance.value).revealPosition({
+        column: 1,
+        lineNumber: demandLogStore.total,
+      });
+    }, 1000);
   }
 );
 </script>
diff --git a/src/views/dashboard/related/demand-log/Header.vue b/src/views/dashboard/related/demand-log/Header.vue
index 3164bc9c..b7f26cec 100644
--- a/src/views/dashboard/related/demand-log/Header.vue
+++ b/src/views/dashboard/related/demand-log/Header.vue
@@ -110,11 +110,6 @@ limitations under the License. -->
         v-model="excludingContentStr"
         @change="addLabels('excludingKeywordsOfContent')"
       />
-      <el-tooltip :content="t('keywordsOfContentLogTips')">
-        <span class="log-tips">
-          <Icon size="middle" iconName="help" class="ml-5 help" />
-        </span>
-      </el-tooltip>
     </div>
   </div>
   <div class="flex-h row btn-row">
@@ -135,7 +130,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch, computed, onMounted, onUnmounted } from "vue";
+import { ref, reactive, watch, onMounted, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDemandLogStore } from "@/store/modules/demand-log";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -165,21 +160,6 @@ const state = reactive<any>({
 });
 /*global Nullable */
 const intervalFn = ref<Nullable<any>>(null);
-const rangeTime = computed(() => {
-  const times = {
-    start: getLocalTime(
-      appStore.utc,
-      new Date(new Date().getTime() - state.duration.value * 1000)
-    ),
-    end: getLocalTime(appStore.utc, new Date()),
-    step: "SECOND",
-  };
-  return {
-    start: dateFormatStep(times.start, times.step, false),
-    end: dateFormatStep(times.end, times.step, false),
-    step: times.step,
-  };
-});
 
 onMounted(() => {
   fetchSelectors();
@@ -195,8 +175,16 @@ async function fetchSelectors() {
   }
 }
 async function getContainers() {
+  if (
+    !(
+      state.instance.id ||
+      (selectorStore.currentPod && selectorStore.currentPod.id)
+    )
+  ) {
+    return;
+  }
   const resp = await demandLogStore.getContainers(
-    state.instance.id || selectorStore.currentPod.id || ""
+    state.instance.id || selectorStore.currentPod.id
   );
   if (resp.errors) {
     ElMessage.error(resp.errors);
@@ -229,14 +217,16 @@ function runInterval() {
   }, state.duration.value * 1000);
 }
 function searchLogs() {
-  let instance = state.instance.id;
+  let instance = "";
   if (dashboardStore.entity === EntityType[3].value) {
     instance = selectorStore.currentPod.id;
   }
+  const serviceInstanceId =
+    instance || (state.instance && state.instance.id) || "";
   demandLogStore.setLogCondition({
-    serviceInstanceId: instance || state.instance.id || "",
+    serviceInstanceId,
     container: state.container.value,
-    duration: rangeTime.value,
+    duration: rangeTime(),
     keywordsOfContent: keywordsOfContent.value.length
       ? keywordsOfContent.value
       : undefined,
@@ -244,8 +234,30 @@ function searchLogs() {
       ? excludingKeywordsOfContent.value
       : undefined,
   });
+  if (!serviceInstanceId) {
+    return;
+  }
   queryLogs();
 }
+
+function rangeTime() {
+  {
+    const times = {
+      start: getLocalTime(
+        appStore.utc,
+        new Date(new Date().getTime() - state.duration.value * 1000)
+      ),
+      end: getLocalTime(appStore.utc, new Date()),
+      step: "SECOND",
+    };
+    return {
+      start: dateFormatStep(times.start, times.step, false),
+      end: dateFormatStep(times.end, times.step, false),
+      step: times.step,
+    };
+  }
+}
+
 async function queryLogs() {
   const res = await demandLogStore.getDemandLogs();
   if (res && res.errors) {

From f9aa6600a7070769040d1cd14cc5158dcd9b4299 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Wed, 8 Jun 2022 12:07:21 +0800
Subject: [PATCH 29/37] fix: disable the query button without containers on the
 on-demand log widget. (#105)

---
 src/views/dashboard/related/demand-log/Content.vue | 12 ++++++++----
 src/views/dashboard/related/demand-log/Header.vue  |  9 +++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/views/dashboard/related/demand-log/Content.vue b/src/views/dashboard/related/demand-log/Content.vue
index b06d49d3..c92b8b36 100644
--- a/src/views/dashboard/related/demand-log/Content.vue
+++ b/src/views/dashboard/related/demand-log/Content.vue
@@ -13,14 +13,14 @@ 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>
+  <span v-if="demandLogStore.message">{{ demandLogStore.message }}</span>
   <div
+    v-else
     v-loading="demandLogStore.loadLogs"
     class="log-content"
     ref="logContent"
     style="width: calc(100% - 10px); height: calc(100% - 140px)"
-  >
-    <span v-if="demandLogStore.message">{{ demandLogStore.message }}</span>
-  </div>
+  ></div>
 </template>
 <script lang="ts" setup>
 import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
@@ -36,7 +36,9 @@ onMounted(() => {
 });
 async function init() {
   const monaco = await import("monaco-editor");
-  monacoInstanceGen(monaco);
+  setTimeout(() => {
+    monacoInstanceGen(monaco);
+  }, 500);
   window.addEventListener("resize", () => {
     editorLayout();
   });
@@ -50,6 +52,7 @@ function monacoInstanceGen(monaco: any) {
     readonly: true,
   });
   toRaw(monacoInstance.value).updateOptions({ readOnly: true });
+  editorLayout();
 }
 function editorLayout() {
   if (!logContent.value) {
@@ -67,6 +70,7 @@ onUnmounted(() => {
   }
   toRaw(monacoInstance.value).dispose();
   monacoInstance.value = null;
+  demandLogStore.setLogs("");
 });
 watch(
   () => demandLogStore.logs,
diff --git a/src/views/dashboard/related/demand-log/Header.vue b/src/views/dashboard/related/demand-log/Header.vue
index b7f26cec..3e25b193 100644
--- a/src/views/dashboard/related/demand-log/Header.vue
+++ b/src/views/dashboard/related/demand-log/Header.vue
@@ -118,6 +118,7 @@ limitations under the License. -->
       size="small"
       type="primary"
       @click="runInterval"
+      :disabled="disabled"
     >
       <Icon
         size="middle"
@@ -158,6 +159,7 @@ const state = reactive<any>({
   duration: { label: "From 30 minutes ago", value: 1800 },
   interval: { label: "30 seconds", value: 30 },
 });
+const disabled = ref<boolean>(true);
 /*global Nullable */
 const intervalFn = ref<Nullable<any>>(null);
 
@@ -187,11 +189,18 @@ async function getContainers() {
     state.instance.id || selectorStore.currentPod.id
   );
   if (resp.errors) {
+    disabled.value = true;
     ElMessage.error(resp.errors);
     return;
   }
+  if (resp.data.containers.errorReason) {
+    disabled.value = true;
+    ElMessage.warning(resp.data.containers.errorReason);
+    return;
+  }
   if (demandLogStore.containers.length) {
     state.container = demandLogStore.containers[0];
+    disabled.value = false;
   }
 }
 async function getInstances() {

From 0828f8a7aaae65ed673632689833fa17af7b8097 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Tue, 14 Jun 2022 11:26:53 +0800
Subject: [PATCH 30/37] fix: update query conditions for the browser logs
 (#106)

---
 src/locales/lang/en.ts                     |  2 +-
 src/locales/lang/es.ts                     |  2 +-
 src/router/alarm.ts                        |  4 +-
 src/views/Alarm.vue                        |  2 +-
 src/views/dashboard/related/log/Header.vue | 63 ++++++++++++++--------
 src/views/dashboard/related/log/data.ts    | 26 +++++++++
 6 files changed, 72 insertions(+), 27 deletions(-)
 create mode 100644 src/views/dashboard/related/log/data.ts

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 7749d634..8c62373e 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -161,7 +161,7 @@ const msg = {
   dashboard: "Dashboard",
   topology: "Topology",
   trace: "Trace",
-  alarm: "Alarms",
+  alarm: "Alerting",
   auto: "Auto",
   reload: "Reload",
   version: "Version",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index c5c8a58e..794980e0 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -161,7 +161,7 @@ const msg = {
   dashboard: "Panel",
   topology: "Topología",
   trace: "Traza",
-  alarm: "Alarmas",
+  alarm: "Recordatorio en curso",
   auto: "Auto",
   reload: "Recargar",
   version: "Versión",
diff --git a/src/router/alarm.ts b/src/router/alarm.ts
index 6880e099..debaa61a 100644
--- a/src/router/alarm.ts
+++ b/src/router/alarm.ts
@@ -30,13 +30,13 @@ export const routesAlarm: Array<RouteRecordRaw> = [
     component: Layout,
     children: [
       {
-        path: "/alarm",
+        path: "/alerting",
         name: "Alarm",
         meta: {
           exact: false,
         },
         component: () =>
-          import(/* webpackChunkName: "alarms" */ "@/views/Alarm.vue"),
+          import(/* webpackChunkName: "alerting" */ "@/views/Alarm.vue"),
       },
     ],
   },
diff --git a/src/views/Alarm.vue b/src/views/Alarm.vue
index 87a33ef5..88c00fe9 100644
--- a/src/views/Alarm.vue
+++ b/src/views/Alarm.vue
@@ -24,7 +24,7 @@ import Header from "./alarm/Header.vue";
 import Content from "./alarm/Content.vue";
 
 const appStore = useAppStoreWithOut();
-appStore.setPageTitle("Alarm");
+appStore.setPageTitle("Alerting");
 </script>
 <style lang="scss" scoped>
 .alarm {
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index fdafdb34..ee86a4b3 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -50,6 +50,16 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
+    <div class="mr-5" v-if="isBrowser">
+      <span class="grey mr-5"> {{ t("category") }}: </span>
+      <Selector
+        size="small"
+        :value="state.category.value"
+        :options="ErrorCategory"
+        placeholder="Select a category"
+        @change="changeField('category', $event)"
+      />
+    </div>
     <el-button
       class="search-btn"
       size="small"
@@ -59,14 +69,14 @@ limitations under the License. -->
       {{ t("search") }}
     </el-button>
   </div>
-  <div class="flex-h row">
-    <div class="mr-5 traceId" v-show="!isBrowser">
+  <div class="flex-h row" v-show="!isBrowser">
+    <div class="mr-5 traceId">
       <span class="grey mr-5">{{ t("traceID") }}:</span>
       <el-input v-model="traceId" class="inputs-max" size="small" />
     </div>
     <ConditionTags :type="'LOG'" @update="updateTags" />
   </div>
-  <div class="row tips">
+  <div class="row tips" v-show="!isBrowser">
     <b>{{ t("conditionNotice") }}</b>
   </div>
   <div class="flex-h" v-show="!isBrowser">
@@ -130,6 +140,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import ConditionTags from "@/views/components/ConditionTags.vue";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
+import { ErrorCategory } from "./data";
 
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
@@ -148,6 +159,7 @@ const state = reactive<any>({
   instance: { value: "0", label: "All" },
   endpoint: { value: "0", label: "All" },
   service: { value: "", label: "" },
+  category: { value: "ALL", label: "All" },
 });
 
 init();
@@ -219,25 +231,32 @@ function searchLogs() {
   if (dashboardStore.entity === EntityType[3].value) {
     instance = selectorStore.currentPod.id;
   }
-  logStore.setLogCondition({
-    serviceId: selectorStore.currentService
-      ? selectorStore.currentService.id
-      : state.service.id,
-    endpointId: endpoint || state.endpoint.id || undefined,
-    serviceInstanceId: instance || state.instance.id || undefined,
-    queryDuration: appStore.durationTime,
-    keywordsOfContent:
-      dashboardStore.layerId === "BROWSER"
-        ? undefined
-        : keywordsOfContent.value,
-    excludingKeywordsOfContent:
-      dashboardStore.layerId === "BROWSER"
-        ? undefined
-        : excludingKeywordsOfContent.value,
-    tags: tagsMap.value.length ? tagsMap.value : undefined,
-    paging: { pageNum: 1, pageSize: 15 },
-    relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
-  });
+  if (dashboardStore.layerId === "BROWSER") {
+    logStore.setLogCondition({
+      serviceId: selectorStore.currentService
+        ? selectorStore.currentService.id
+        : state.service.id,
+      pagePathId: endpoint || state.endpoint.id || undefined,
+      serviceVersionId: instance || state.instance.id || undefined,
+      paging: { pageNum: 1, pageSize: 15 },
+      queryDuration: appStore.durationTime,
+      category: state.category.value,
+    });
+  } else {
+    logStore.setLogCondition({
+      serviceId: selectorStore.currentService
+        ? selectorStore.currentService.id
+        : state.service.id,
+      endpointId: endpoint || state.endpoint.id || undefined,
+      serviceInstanceId: instance || state.instance.id || undefined,
+      queryDuration: appStore.durationTime,
+      keywordsOfContent: keywordsOfContent.value,
+      excludingKeywordsOfContent: excludingKeywordsOfContent.value,
+      tags: tagsMap.value.length ? tagsMap.value : undefined,
+      paging: { pageNum: 1, pageSize: 15 },
+      relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
+    });
+  }
   queryLogs();
 }
 async function queryLogs() {
diff --git a/src/views/dashboard/related/log/data.ts b/src/views/dashboard/related/log/data.ts
new file mode 100644
index 00000000..ec454837
--- /dev/null
+++ b/src/views/dashboard/related/log/data.ts
@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+export const ErrorCategory = [
+  { label: "All", value: "ALL" },
+  { label: "AJAX", value: "AJAX" },
+  { label: "Resource", value: "RESOURCE" },
+  { label: "Vue", value: "VUE" },
+  { label: "Promise", value: "PROMISE" },
+  { label: "JS", value: "JS" },
+  { label: "Unknown", value: "UNKNOWN" },
+];

From b697fe471352b9dfa1703191705e32329d592cc8 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Tue, 14 Jun 2022 17:01:11 +0800
Subject: [PATCH 31/37] feat: set a url parameter to activate tab index (#107)

---
 src/constants/data.ts                         |  11 ++
 src/layout/components/SideBar.vue             |   4 +-
 src/router/browser.ts                         |  10 +-
 src/router/dashboard.ts                       | 119 +++++++++++++++---
 src/router/database.ts                        |  10 +-
 src/router/functions.ts                       |   8 +-
 src/router/general.ts                         |  11 +-
 src/router/infrastructure.ts                  |   9 ++
 src/router/k8s.ts                             |  22 ++++
 src/router/selfObservability.ts               |  20 ++-
 src/router/serviceMesh.ts                     |  37 +++++-
 src/views/dashboard/controls/Tab.vue          |  38 +++++-
 .../related/topology/components/Graph.vue     |   3 +
 13 files changed, 270 insertions(+), 32 deletions(-)

diff --git a/src/constants/data.ts b/src/constants/data.ts
index 5a8bf137..33779df9 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -28,15 +28,26 @@ export const Languages = [
 
 export const RoutesMap: { [key: string]: string } = {
   GeneralServices: "GENERAL",
+  GeneralServicesActiveTabIndex: "GENERAL",
   Database: "VIRTUAL_DATABASE",
+  DatabaseActiveTabIndex: "VIRTUAL_DATABASE",
   MeshServices: "MESH",
+  MeshServicesActiveTabIndex: "MESH",
   ControlPanel: "MESH_CP",
+  ControlPanelActiveTabIndex: "MESH_CP",
   DataPanel: "MESH_DP",
+  DataPanelActiveTabIndex: "MESH_DP",
   Linux: "OS_LINUX",
   SkyWalkingServer: "SO11Y_OAP",
+  SkyWalkingServerActiveTabIndex: "SO11Y_OAP",
+  SatelliteActiveTabIndex: "SO11Y_SATELLITE",
   Satellite: "SO11Y_SATELLITE",
   Functions: "FAAS",
+  FunctionsActiveTabIndex: "FAAS",
   Browser: "BROWSER",
+  BrowserActiveTabIndex: "BROWSER",
   KubernetesCluster: "K8S",
+  KubernetesClusterActiveTabIndex: "K8S",
   KubernetesService: "K8S_SERVICE",
+  KubernetesServiceActiveTabIndex: "K8S_SERVICE",
 };
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 34ad6852..44392bc4 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -55,9 +55,9 @@ limitations under the License. -->
               <router-link
                 class="items"
                 :to="m.path"
-                :exact="m.meta.exact || false"
+                :exact="(m.meta && m.meta.exact) || false"
               >
-                <span class="title">{{ t(m.meta.title) }}</span>
+                <span class="title">{{ m.meta && t(m.meta.title) }}</span>
               </router-link>
             </el-menu-item>
           </el-menu-item-group>
diff --git a/src/router/browser.ts b/src/router/browser.ts
index e0633bb6..a7a4eb20 100644
--- a/src/router/browser.ts
+++ b/src/router/browser.ts
@@ -33,12 +33,20 @@ export const routesBrowser: Array<RouteRecordRaw> = [
         name: "Browser",
         meta: {
           title: "browser",
-          headPath: "/browser",
           exact: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/browser/tab/:activeTabIndex",
+        name: "BrowserActiveTabIndex",
+        meta: {
+          notShow: true,
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
     ],
   },
 ];
diff --git a/src/router/dashboard.ts b/src/router/dashboard.ts
index 93fc53ac..c985e2fc 100644
--- a/src/router/dashboard.ts
+++ b/src/router/dashboard.ts
@@ -54,69 +54,156 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         },
       },
       {
-        path: "/dashboard/:layerId/:entity/:name",
+        path: "",
+        redirect: "/dashboard/:layerId/:entity/:name",
+        name: "Create",
         component: () =>
           import(
             /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
           ),
-        name: "Create",
         meta: {
-          title: "dashboardEdit",
-          exact: false,
           notShow: true,
         },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "CreateChild",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "CreateActiveTabIndex",
+          },
+        ],
       },
       {
-        path: "/dashboard/:layerId/:entity/:serviceId/:name",
+        path: "",
         component: () =>
           import(
             /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
           ),
         name: "View",
+        redirect: "/dashboard/:layerId/:entity/:serviceId/:name",
         meta: {
-          title: "dashboardEdit",
-          exact: false,
           notShow: true,
         },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewChild",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewActiveTabIndex",
+          },
+        ],
       },
       {
-        path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
+        path: "",
+        redirect:
+          "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
         component: () =>
           import(
             /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
           ),
         name: "ViewServiceRelation",
         meta: {
-          title: "dashboardEdit",
-          exact: false,
           notShow: true,
         },
+        children: [
+          {
+            path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewServiceRelation",
+          },
+          {
+            path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewServiceRelationActiveTabIndex",
+          },
+        ],
       },
       {
-        path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
+        path: "",
+        redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
         component: () =>
           import(
             /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
           ),
         name: "ViewPod",
         meta: {
-          title: "dashboardEdit",
-          exact: false,
           notShow: true,
         },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewPod",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewPodActiveTabIndex",
+          },
+        ],
       },
       {
-        path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
+        path: "",
+        redirect:
+          "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
         component: () =>
           import(
             /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
           ),
         name: "ViewPodRelation",
         meta: {
-          title: "dashboardEdit",
-          exact: true,
           notShow: true,
         },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewPodRelation",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewPodRelationActiveTabIndex",
+          },
+        ],
       },
     ],
   },
diff --git a/src/router/database.ts b/src/router/database.ts
index 7dc0653c..70b82b35 100644
--- a/src/router/database.ts
+++ b/src/router/database.ts
@@ -34,12 +34,20 @@ export const routesDatabase: Array<RouteRecordRaw> = [
         name: "Database",
         meta: {
           title: "virtualDatabase",
-          headPath: "/database",
           exact: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/database/tab/:activeTabIndex",
+        name: "DatabaseActiveTabIndex",
+        meta: {
+          notShow: true,
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
     ],
   },
 ];
diff --git a/src/router/functions.ts b/src/router/functions.ts
index be1fa338..ddafec92 100644
--- a/src/router/functions.ts
+++ b/src/router/functions.ts
@@ -32,13 +32,17 @@ export const routesFunctions: Array<RouteRecordRaw> = [
         path: "/functions",
         name: "Functions",
         meta: {
-          title: "functions",
-          headPath: "/functions",
           exact: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/functions/tab/:activeTabIndex",
+        name: "FunctionsActiveTabIndex",
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
     ],
   },
 ];
diff --git a/src/router/general.ts b/src/router/general.ts
index 393b94f3..e9bb7b8f 100644
--- a/src/router/general.ts
+++ b/src/router/general.ts
@@ -33,8 +33,15 @@ export const routesGen: Array<RouteRecordRaw> = [
         path: "/general",
         name: "GeneralServices",
         meta: {
-          title: "services",
-          headPath: "/general/service",
+          exact: true,
+        },
+        component: () =>
+          import(/* webpackChunkName: "layers" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/general/tab/:activeTabIndex",
+        name: "GeneralServicesActiveTabIndex",
+        meta: {
           exact: true,
         },
         component: () =>
diff --git a/src/router/infrastructure.ts b/src/router/infrastructure.ts
index 86bb55ee..555953f5 100644
--- a/src/router/infrastructure.ts
+++ b/src/router/infrastructure.ts
@@ -39,6 +39,15 @@ export const routesInfra: Array<RouteRecordRaw> = [
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/linux/tab/:activeTabIndex",
+        name: "LinuxActiveTabIndex",
+        meta: {
+          title: "linux",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
       // {
       //   path: "/infrastructure/vm",
       //   name: "VirtualMachine",
diff --git a/src/router/k8s.ts b/src/router/k8s.ts
index 38adf3f7..a9390bd8 100644
--- a/src/router/k8s.ts
+++ b/src/router/k8s.ts
@@ -33,20 +33,42 @@ export const routesK8s: Array<RouteRecordRaw> = [
         path: "/kubernetes/cluster",
         name: "KubernetesCluster",
         meta: {
+          notShow: false,
           title: "kubernetesCluster",
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/kubernetes/cluster/tab/:activeTabIndex",
+        name: "KubernetesClusterActiveTabIndex",
+        meta: {
+          notShow: true,
+          title: "kubernetesClusterActiveTabIndex",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
       {
         path: "/kubernetes/service",
         name: "KubernetesService",
         meta: {
+          notShow: false,
           title: "kubernetesService",
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/kubernetes/service/tab/:activeTabIndex",
+        name: "KubernetesServiceActiveTabIndex",
+        meta: {
+          notShow: true,
+          title: "kubernetesServiceActiveTabIndex",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
     ],
   },
 ];
diff --git a/src/router/selfObservability.ts b/src/router/selfObservability.ts
index 4174e1bb..b2e610b1 100644
--- a/src/router/selfObservability.ts
+++ b/src/router/selfObservability.ts
@@ -34,7 +34,15 @@ export const routesSelf: Array<RouteRecordRaw> = [
         name: "SkyWalkingServer",
         meta: {
           title: "skyWalkingServer",
-          headPath: "/mesh/services",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/self/skyWalkingServer/tab/:activeTabIndex",
+        name: "SkyWalkingServerActiveTabIndex",
+        meta: {
+          notShow: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
@@ -44,7 +52,15 @@ export const routesSelf: Array<RouteRecordRaw> = [
         name: "Satellite",
         meta: {
           title: "satellite",
-          headPath: "/mesh/controlPanel",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/self/satellite/tab/:activeTabIndex",
+        name: "SatelliteActiveTabIndex",
+        meta: {
+          notShow: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
diff --git a/src/router/serviceMesh.ts b/src/router/serviceMesh.ts
index 719fae43..04df1bb2 100644
--- a/src/router/serviceMesh.ts
+++ b/src/router/serviceMesh.ts
@@ -33,8 +33,17 @@ export const routesMesh: Array<RouteRecordRaw> = [
         path: "/mesh/services",
         name: "MeshServices",
         meta: {
+          notShow: false,
           title: "services",
-          headPath: "/mesh/services",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/mesh/services/tab/:activeTabIndex",
+        name: "MeshServicesActiveTabIndex",
+        meta: {
+          notShow: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
@@ -43,8 +52,17 @@ export const routesMesh: Array<RouteRecordRaw> = [
         path: "/mesh/controlPanel",
         name: "ControlPanel",
         meta: {
+          notShow: false,
           title: "controlPanel",
-          headPath: "/mesh/controlPanel",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/mesh/controlPanel/tab/:activeTabIndex",
+        name: "ControlPanelActiveTabIndex",
+        meta: {
+          notShow: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
@@ -53,10 +71,21 @@ export const routesMesh: Array<RouteRecordRaw> = [
         path: "/mesh/dataPanel",
         name: "DataPanel",
         meta: {
+          notShow: false,
           title: "dataPanel",
-          headPath: "/mesh/dataPanel",
         },
-        component: () => import("@/views/Layer.vue"),
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/mesh/dataPanel/tab/:activeTabIndex",
+        name: "DataPanelActiveTabIndex",
+        meta: {
+          notShow: true,
+          title: "dataPanelActiveTabIndex",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 50642870..2efe3419 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -40,7 +40,14 @@ limitations under the License. -->
       <span class="tab-icons" v-if="dashboardStore.editMode">
         <el-tooltip content="Add tab items" placement="bottom">
           <i @click="addTabItem">
-            <Icon size="middle" iconName="add" />
+            <Icon size="middle" iconName="add" class="tab-icon" />
+          </i>
+        </el-tooltip>
+      </span>
+      <span class="tab-icons">
+        <el-tooltip content="Copy Link" placement="bottom">
+          <i @click="copyLink">
+            <Icon size="middle" iconName="review-list" class="tab-icon" />
           </i>
         </el-tooltip>
       </span>
@@ -99,6 +106,7 @@ limitations under the License. -->
 <script lang="ts">
 import { ref, watch, defineComponent, toRefs } from "vue";
 import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -111,6 +119,7 @@ import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
 import { dragIgnoreFrom } from "../data";
 import DemandLog from "./DemandLog.vue";
+import copy from "@/utils/copy";
 
 const props = {
   data: {
@@ -126,11 +135,16 @@ export default defineComponent({
   setup(props) {
     const { t } = useI18n();
     const dashboardStore = useDashboardStore();
-    const activeTabIndex = ref<number>(0);
+    const route = useRoute();
+    const activeTabIndex = ref<number>(
+      Number(route.params.activeTabIndex) || 0
+    );
     const activeTabWidget = ref<string>("");
     const editTabIndex = ref<number>(NaN); // edit tab item name
     const canEditTabName = ref<boolean>(false);
     const needQuery = ref<boolean>(false);
+
+    dashboardStore.setActiveTabIndex(activeTabIndex);
     const l = dashboardStore.layout.findIndex(
       (d: LayoutConfig) => d.i === props.data.i
     );
@@ -154,6 +168,11 @@ export default defineComponent({
         dashboardStore.layout[l].children[activeTabIndex.value].children
       );
       needQuery.value = true;
+      if (route.params.activeTabIndex) {
+        let p = location.href.split("/tab/")[0];
+        p = p + "/tab/" + activeTabIndex.value;
+        history.replaceState({}, "", p);
+      }
     }
     function removeTab(e: Event) {
       e.stopPropagation();
@@ -202,6 +221,16 @@ export default defineComponent({
         dashboardStore.layout[l].children[activeTabIndex.value].children
       );
     }
+    function copyLink() {
+      let path = "";
+      if (route.params.activeTabIndex === undefined) {
+        path = location.href + "/tab/" + activeTabIndex.value;
+      } else {
+        const p = location.href.split("/tab/")[0];
+        path = p + "/tab/" + activeTabIndex.value;
+      }
+      copy(path);
+    }
     document.body.addEventListener("click", handleClick, false);
     watch(
       () => dashboardStore.activedGridItem,
@@ -227,6 +256,7 @@ export default defineComponent({
       deleteTabItem,
       removeTab,
       clickTabs,
+      copyLink,
       ...toRefs(props),
       activeTabWidget,
       dashboardStore,
@@ -330,6 +360,10 @@ export default defineComponent({
   overflow: auto;
 }
 
+.tab-icon {
+  color: #666;
+}
+
 .vue-grid-item.active {
   border: 1px solid #409eff;
 }
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index c075a5d0..4ebdbf1b 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -538,6 +538,9 @@ function setNodeTools(nodeDashboard: any) {
   }
 }
 async function freshNodes() {
+  if (!svg.value) {
+    return;
+  }
   svg.value.selectAll(".topo-svg-graph").remove();
   await init();
   update();

From f12d7899e4d4777f016cfca3ec5802c99173552c Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Tue, 14 Jun 2022 22:23:23 +0800
Subject: [PATCH 32/37] fix router (#109)

---
 src/router/infrastructure.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/router/infrastructure.ts b/src/router/infrastructure.ts
index 555953f5..fbd38580 100644
--- a/src/router/infrastructure.ts
+++ b/src/router/infrastructure.ts
@@ -44,6 +44,7 @@ export const routesInfra: Array<RouteRecordRaw> = [
         name: "LinuxActiveTabIndex",
         meta: {
           title: "linux",
+          notShow: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),

From 7813c9267338166d83f4f840ed439f816cd41108 Mon Sep 17 00:00:00 2001
From: drgnchan <40224023+drgnchan@users.noreply.github.com>
Date: Wed, 15 Jun 2022 10:06:53 +0800
Subject: [PATCH 33/37] fix:clear interval fail when close autoRefresh (#108)

---
 src/store/modules/app.ts |  5 +++++
 src/views/Settings.vue   | 17 +++++++----------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index e3121c0a..4fd8fe82 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -34,6 +34,7 @@ interface AppState {
   pageTitle: string;
   version: string;
   isMobile: boolean;
+  reloadTimer: Nullable<any>;
 }
 
 export const appStore = defineStore({
@@ -53,6 +54,7 @@ export const appStore = defineStore({
     pageTitle: "",
     version: "",
     isMobile: false,
+    reloadTimer: null,
   }),
   getters: {
     duration(): Duration {
@@ -173,6 +175,9 @@ export const appStore = defineStore({
       this.version = res.data.data.version;
       return res.data;
     },
+    setReloadTimer(timer: any): void {
+      this.reloadTimer = timer;
+    },
   },
 });
 export function useAppStoreWithOut(): any {
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 056c83e6..49a17d07 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -69,7 +69,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import timeFormat from "@/utils/timeFormat";
@@ -78,9 +78,6 @@ import Selector from "@/components/Selector.vue";
 
 const { t, locale } = useI18n();
 const appStore = useAppStoreWithOut();
-const state = reactive<{ timer: ReturnType<typeof setInterval> | null }>({
-  timer: null,
-});
 const lang = ref<string>(locale.value || "en");
 const autoTime = ref<number>(6);
 const auto = ref<boolean>(appStore.autoRefresh || false);
@@ -101,10 +98,10 @@ const handleAuto = () => {
   appStore.setAutoRefresh(auto.value);
   if (auto.value) {
     handleReload();
-    state.timer = setInterval(handleReload, autoTime.value * 1000);
+    appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
   } else {
-    if (state.timer) {
-      clearInterval(state.timer);
+    if (appStore.reloadTimer) {
+      clearInterval(appStore.reloadTimer);
     }
   }
 };
@@ -112,12 +109,12 @@ const changeAutoTime = () => {
   if (autoTime.value < 1) {
     return;
   }
-  if (state.timer) {
-    clearInterval(state.timer);
+  if (appStore.reloadTimer) {
+    clearInterval(appStore.reloadTimer);
   }
   if (auto.value) {
     handleReload();
-    state.timer = setInterval(handleReload, autoTime.value * 1000);
+    appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
   }
 };
 const setLang = (): void => {

From 4c762a2458e094e5b2b48022fa571b9bedc88842 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Wed, 15 Jun 2022 19:24:07 +0800
Subject: [PATCH 34/37] fix: optimize widgets (#110)

---
 src/views/dashboard/controls/Ebpf.vue         |  3 +-
 src/views/dashboard/controls/Log.vue          |  3 +-
 src/views/dashboard/controls/Profile.vue      |  3 +-
 src/views/dashboard/controls/Trace.vue        |  3 +-
 src/views/dashboard/graphs/EndpointList.vue   |  7 ++-
 src/views/dashboard/graphs/InstanceList.vue   |  8 +++-
 src/views/dashboard/graphs/ServiceList.vue    |  6 ++-
 .../related/components/LogTable/Index.vue     | 46 ++++++++++---------
 .../components/LogTable/LogBrowser.vue        | 26 ++++++-----
 .../related/components/LogTable/LogDetail.vue |  9 ++--
 src/views/dashboard/related/ebpf/Header.vue   |  8 +++-
 src/views/dashboard/related/log/Header.vue    |  9 +++-
 .../dashboard/related/profile/Header.vue      | 11 ++++-
 src/views/dashboard/related/trace/Filter.vue  |  9 +++-
 14 files changed, 100 insertions(+), 51 deletions(-)

diff --git a/src/views/dashboard/controls/Ebpf.vue b/src/views/dashboard/controls/Ebpf.vue
index 78f67ef7..2f4f53e2 100644
--- a/src/views/dashboard/controls/Ebpf.vue
+++ b/src/views/dashboard/controls/Ebpf.vue
@@ -29,7 +29,7 @@ limitations under the License. -->
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
-    <Header />
+    <Header :needQuery="needQuery" />
     <Content />
   </div>
 </template>
@@ -47,6 +47,7 @@ const props = defineProps({
     default: () => ({ graph: {} }),
   },
   activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index ea80a786..0d6708ef 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -30,7 +30,7 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Header />
+      <Header :needQuery="needQuery" />
     </div>
     <div class="log">
       <List />
@@ -50,6 +50,7 @@ const props = defineProps({
     default: () => ({}),
   },
   activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
diff --git a/src/views/dashboard/controls/Profile.vue b/src/views/dashboard/controls/Profile.vue
index 1faca451..8a1aa366 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -29,7 +29,7 @@ limitations under the License. -->
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
-    <Header />
+    <Header :needQuery="needQuery" />
     <Content />
   </div>
 </template>
@@ -47,6 +47,7 @@ const props = defineProps({
     default: () => ({ graph: {} }),
   },
   activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index f740453d..724b57f3 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -30,7 +30,7 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Filter />
+      <Filter :needQuery="needQuery" />
     </div>
     <div class="trace flex-h">
       <TraceList />
@@ -53,6 +53,7 @@ const props = defineProps({
     default: () => ({ graph: {} }),
   },
   activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 5ab1b95f..b8d7aa22 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -46,6 +46,7 @@ limitations under the License. -->
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
+          v-if="colMetrics.length"
         />
       </el-table>
     </div>
@@ -96,7 +97,9 @@ const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
 const searchText = ref<string>("");
-const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
+const colMetrics = computed(() =>
+  (props.config.metrics || []).filter((d: string) => d)
+);
 
 if (props.needQuery) {
   queryEndpoints();
@@ -119,7 +122,7 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
   if (!currentPods.length) {
     return;
   }
-  const metrics = (props.config.metrics || []).filter((d: string) => d);
+  const metrics = props.config.metrics || [];
   const metricTypes = props.config.metricTypes || [];
   if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 794b8804..bceeb910 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -43,6 +43,7 @@ limitations under the License. -->
           </template>
         </el-table-column>
         <ColumnGraph
+          v-if="colMetrics.length"
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
@@ -126,7 +127,9 @@ const chartLoading = ref<boolean>(false);
 const instances = ref<Instance[]>([]); // current instances
 const pageSize = 10;
 const searchText = ref<string>("");
-const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
+const colMetrics = computed(() =>
+  (props.config.metrics || []).filter((d: string) => d)
+);
 if (props.needQuery) {
   queryInstance();
 }
@@ -151,7 +154,8 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
   if (!currentInstances.length) {
     return;
   }
-  const { metrics, metricTypes } = props.config;
+  const metrics = props.config.metrics || [];
+  const metricTypes = props.config.metricTypes || [];
 
   if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index c0b393fa..0a4678d2 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -58,6 +58,7 @@ limitations under the License. -->
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
+          v-if="colMetrics.length"
         />
       </el-table>
     </div>
@@ -117,7 +118,7 @@ const searchText = ref<string>("");
 const groups = ref<any>({});
 const sortServices = ref<(Service & { merge: boolean })[]>([]);
 const colMetrics = computed(() =>
-  props.config.metrics.filter((d: string) => d)
+  (props.config.metrics || []).filter((d: string) => d)
 );
 queryServices();
 
@@ -195,7 +196,8 @@ async function queryServiceMetrics(currentServices: Service[]) {
   if (!currentServices.length) {
     return;
   }
-  const { metrics, metricTypes } = props.config;
+  const metrics = props.config.metrics || [];
+  const metricTypes = props.config.metricTypes || [];
 
   if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
diff --git a/src/views/dashboard/related/components/LogTable/Index.vue b/src/views/dashboard/related/components/LogTable/Index.vue
index 4d4f75e7..1e1f257a 100644
--- a/src/views/dashboard/related/components/LogTable/Index.vue
+++ b/src/views/dashboard/related/components/LogTable/Index.vue
@@ -15,20 +15,17 @@ limitations under the License. -->
 
 <template>
   <div class="log">
-    <div class="log-header">
-      <template v-for="(item, index) in columns">
+    <div
+      class="log-header"
+      :class="[type === 'browser' ? 'browser-header' : 'service-header']"
+    >
+      <template v-for="(item, index) in columns" :key="`col${index}`">
         <div
-          class="method"
-          :style="`width: ${item.method}px`"
-          v-if="item.drag"
-          :key="index"
+          :class="[
+            item.label,
+            ['message', 'stack'].includes(item.label) ? 'max-item' : '',
+          ]"
         >
-          <span class="r cp" ref="dragger" :data-index="index">
-            <Icon iconName="settings_ethernet" size="sm" />
-          </span>
-          {{ t(item.value) }}
-        </div>
-        <div v-else :class="item.label" :key="`col${index}`">
           {{ t(item.value) }}
         </div>
       </template>
@@ -58,7 +55,7 @@ limitations under the License. -->
       @closed="showDetail = false"
       :title="t('logDetail')"
     >
-      <LogDetail :currentLog="currentLog" />
+      <LogDetail :currentLog="currentLog" :columns="columns" />
     </el-dialog>
   </div>
 </template>
@@ -70,7 +67,7 @@ import LogBrowser from "./LogBrowser.vue";
 import LogService from "./LogService.vue";
 import LogDetail from "./LogDetail.vue";
 
-/*global defineProps, Nullable */
+/*global defineProps */
 const props = defineProps({
   type: { type: String, default: "service" },
   tableData: { type: Array, default: () => [] },
@@ -79,8 +76,6 @@ const props = defineProps({
 const { t } = useI18n();
 const currentLog = ref<any>({});
 const showDetail = ref<boolean>(false);
-const dragger = ref<Nullable<HTMLSpanElement>>(null);
-// const method = ref<number>(380);
 const columns: any[] =
   props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
 
@@ -99,13 +94,12 @@ function setCurrentLog(log: any) {
 }
 
 .log-header {
-  /*display: flex;*/
   white-space: nowrap;
   user-select: none;
   border-left: 0;
   border-right: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  /*background-color: #f3f4f9;*/
+
   .traceId {
     width: 390px;
   }
@@ -123,9 +117,6 @@ function setCurrentLog(log: any) {
 }
 
 .log-header div {
-  /*min-width: 140px;*/
-  width: 140px;
-  /*flex-grow: 1;*/
   display: inline-block;
   padding: 0 4px;
   border: 1px solid transparent;
@@ -136,4 +127,17 @@ function setCurrentLog(log: any) {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.browser-header div {
+  min-width: 140px;
+  width: 10%;
+}
+
+div.max-item {
+  width: 20%;
+}
+
+.service-header div {
+  width: 140px;
+}
 </style>
diff --git a/src/views/dashboard/related/components/LogTable/LogBrowser.vue b/src/views/dashboard/related/components/LogTable/LogBrowser.vue
index 6a1159ef..0b150477 100644
--- a/src/views/dashboard/related/components/LogTable/LogBrowser.vue
+++ b/src/views/dashboard/related/components/LogTable/LogBrowser.vue
@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div @click="showSelectSpan" :class="['log-item', 'clearfix']" ref="logItem">
+  <div
+    @click="showSelectSpan"
+    :class="['log-item', 'clearfix', 'flex-h']"
+    ref="logItem"
+  >
     <div
       v-for="(item, index) in columns"
       :key="index"
       :class="[
-        'method',
-        ['message', 'stack'].includes(item.label) ? 'autoHeight' : '',
+        'log',
+        ['message', 'stack'].includes(item.label) ? 'max-item' : '',
       ]"
-      :style="{
-        lineHeight: 1.3,
-        width: `${item.drag ? item.method : ''}px`,
-      }"
     >
       <span v-if="item.label === 'time'">{{ dateFormat(data.time) }}</span>
       <span v-else-if="item.label === 'errorUrl'">{{ data.pagePath }}</span>
@@ -44,7 +44,7 @@ import { BrowserLogConstants } from "./data";
 
 /*global defineProps, defineEmits, NodeListOf  */
 const props = defineProps({
-  data: { type: Array as any, default: () => [] },
+  data: { type: Object as any, default: () => ({}) },
 });
 const columns = BrowserLogConstants;
 const emit = defineEmits(["select"]);
@@ -84,7 +84,8 @@ function showSelectSpan() {
 }
 
 .log-item > div {
-  width: 140px;
+  width: 10%;
+  min-width: 140px;
   padding: 0 5px;
   display: inline-block;
   border: 1px solid transparent;
@@ -95,6 +96,10 @@ function showSelectSpan() {
   white-space: nowrap;
 }
 
+.max-item.log {
+  width: 20%;
+}
+
 .log-item .text {
   width: 100% !important;
   display: inline-block;
@@ -103,8 +108,7 @@ function showSelectSpan() {
   white-space: nowrap;
 }
 
-.log-item > div.method {
-  padding: 7px 5px;
+.log-item > div.log {
   line-height: 30px;
 }
 </style>
diff --git a/src/views/dashboard/related/components/LogTable/LogDetail.vue b/src/views/dashboard/related/components/LogTable/LogDetail.vue
index 75104fb5..4323fa30 100644
--- a/src/views/dashboard/related/components/LogTable/LogDetail.vue
+++ b/src/views/dashboard/related/components/LogTable/LogDetail.vue
@@ -20,7 +20,10 @@ limitations under the License. -->
       :key="index"
     >
       <span class="g-sm-4 grey">{{ t(item.value) }}:</span>
-      <span v-if="item.label === 'timestamp'" class="g-sm-8 mb-10">
+      <span
+        v-if="['timestamp', 'time'].includes(item.label)"
+        class="g-sm-8 mb-10"
+      >
         {{ dateFormat(currentLog[item.label]) }}
       </span>
       <textarea
@@ -41,14 +44,14 @@ import { computed } from "vue";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import dayjs from "dayjs";
-import { ServiceLogDetail } from "./data";
+import { Option } from "@/types/app";
 
 /*global defineProps */
 const props = defineProps({
   currentLog: { type: Object as PropType<any>, default: () => ({}) },
+  columns: { type: Array as PropType<Option[]>, default: () => [] },
 });
 const { t } = useI18n();
-const columns = ServiceLogDetail;
 const logTags = computed(() => {
   if (!props.currentLog.tags) {
     return [];
diff --git a/src/views/dashboard/related/ebpf/Header.vue b/src/views/dashboard/related/ebpf/Header.vue
index da7a809f..24fa9bb4 100644
--- a/src/views/dashboard/related/ebpf/Header.vue
+++ b/src/views/dashboard/related/ebpf/Header.vue
@@ -39,6 +39,10 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { EntityType } from "../../data";
 
+/*global defineProps */
+const props = defineProps({
+  needQuery: { type: Boolean, default: true },
+});
 const ebpfStore = useEbpfStore();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
@@ -46,7 +50,9 @@ const dashboardStore = useDashboardStore();
 const { t } = useI18n();
 const newTask = ref<boolean>(false);
 
-searchTasks();
+if (props.needQuery) {
+  searchTasks();
+}
 
 async function searchTasks() {
   const serviceId =
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index ee86a4b3..1cc8045d 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -142,6 +142,10 @@ import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
 import { ErrorCategory } from "./data";
 
+/*global defineProps */
+const props = defineProps({
+  needQuery: { type: Boolean, default: true },
+});
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
@@ -161,8 +165,9 @@ const state = reactive<any>({
   service: { value: "", label: "" },
   category: { value: "ALL", label: "All" },
 });
-
-init();
+if (props.needQuery) {
+  init();
+}
 async function init() {
   const resp = await logStore.getLogsByKeywords();
 
diff --git a/src/views/dashboard/related/profile/Header.vue b/src/views/dashboard/related/profile/Header.vue
index 09bc13b9..999b5efc 100644
--- a/src/views/dashboard/related/profile/Header.vue
+++ b/src/views/dashboard/related/profile/Header.vue
@@ -59,6 +59,10 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { EntityType } from "../../data";
 
+/*global defineProps */
+const props = defineProps({
+  needQuery: { type: Boolean, default: true },
+});
 const profileStore = useProfileStore();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
@@ -67,8 +71,10 @@ const { t } = useI18n();
 const endpointName = ref<string>("");
 const newTask = ref<boolean>(false);
 
-searchTasks();
-searchEndpoints("");
+if (props.needQuery) {
+  searchTasks();
+  searchEndpoints("");
+}
 
 async function searchEndpoints(keyword: string) {
   if (!selectorStore.currentService) {
@@ -109,6 +115,7 @@ watch(
   () => selectorStore.currentService,
   () => {
     searchTasks();
+    console.log("service");
   }
 );
 watch(
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index a97da90b..4901953c 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -104,6 +104,10 @@ import ConditionTags from "@/views/components/ConditionTags.vue";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
 
+/*global defineProps */
+const props = defineProps({
+  needQuery: { type: Boolean, default: true },
+});
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
@@ -121,7 +125,10 @@ const state = reactive<any>({
   service: { value: "", label: "" },
 });
 
-init();
+if (props.needQuery) {
+  init();
+}
+
 async function init() {
   if (dashboardStore.entity === EntityType[1].value) {
     await getServices();

From 2be0a84d4894801b8b32e338b8dd09d71611b23a Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Thu, 16 Jun 2022 15:19:17 +0800
Subject: [PATCH 35/37] fix: optimize widgets (#111)

---
 src/store/modules/log.ts                      |  6 ++++++
 .../related/components/LogTable/Index.vue     | 20 +++++++++++--------
 src/views/dashboard/related/log/Header.vue    |  5 ++++-
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts
index ce1674d1..241297de 100644
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -53,6 +53,12 @@ export const logStore = defineStore({
     setLogCondition(data: any) {
       this.conditions = { ...this.conditions, ...data };
     },
+    resetCondition() {
+      this.conditions = {
+        queryDuration: useAppStoreWithOut().durationTime,
+        paging: { pageNum: 1, pageSize: 15 },
+      };
+    },
     async getServices(layer: string) {
       const res: AxiosResponse = await graphql.query("queryServices").params({
         layer,
diff --git a/src/views/dashboard/related/components/LogTable/Index.vue b/src/views/dashboard/related/components/LogTable/Index.vue
index 1e1f257a..f1658ee4 100644
--- a/src/views/dashboard/related/components/LogTable/Index.vue
+++ b/src/views/dashboard/related/components/LogTable/Index.vue
@@ -17,7 +17,9 @@ limitations under the License. -->
   <div class="log">
     <div
       class="log-header"
-      :class="[type === 'browser' ? 'browser-header' : 'service-header']"
+      :class="
+        type === 'browser' ? ['browser-header', 'flex-h'] : 'service-header'
+      "
     >
       <template v-for="(item, index) in columns" :key="`col${index}`">
         <div
@@ -118,7 +120,7 @@ function setCurrentLog(log: any) {
 
 .log-header div {
   display: inline-block;
-  padding: 0 4px;
+  padding: 0 5px;
   border: 1px solid transparent;
   border-right: 1px dotted silver;
   line-height: 30px;
@@ -128,13 +130,15 @@ function setCurrentLog(log: any) {
   white-space: nowrap;
 }
 
-.browser-header div {
-  min-width: 140px;
-  width: 10%;
-}
+.browser-header {
+  div {
+    min-width: 140px;
+    width: 10%;
+  }
 
-div.max-item {
-  width: 20%;
+  .max-item {
+    width: 20%;
+  }
 }
 
 .service-header div {
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 1cc8045d..0efc3829 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -130,7 +130,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
 import { useLogStore } from "@/store/modules/log";
@@ -323,6 +323,9 @@ function removeExcludeContent(index: number) {
   });
   excludingContentStr.value = "";
 }
+onUnmounted(() => {
+  logStore.resetCondition();
+});
 watch(
   () => selectorStore.currentService,
   () => {

From 9ad9362935e71749a7878e2701743d8b8820361e Mon Sep 17 00:00:00 2001
From: horochx <32632779+horochx@users.noreply.github.com>
Date: Wed, 22 Jun 2022 03:54:31 -0700
Subject: [PATCH 36/37] fix: SpanDetail text overlap (#113)

---
 .../dashboard/related/trace/components/D3Graph/SpanDetail.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index 6aee1770..5a97909a 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -166,7 +166,7 @@ function showCurrentSpanDetail(text: string) {
 }
 
 .item span {
-  height: 21px;
+  min-height: 21px;
 }
 
 .link-hover {

From 2230702d97bc5b3c17b67a7398b2202d0747326c Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Wed, 22 Jun 2022 19:11:02 +0800
Subject: [PATCH 37/37] feat: Implement the Event widget (#112)

---
 package-lock.json                             | 201 +++++++++++++-
 package.json                                  |   1 +
 src/assets/icons/add_fill.svg                 |  15 ++
 src/assets/icons/event.svg                    |  15 ++
 src/router/event.ts                           |  43 ---
 src/router/index.ts                           |   2 -
 src/store/modules/dashboard.ts                |  16 +-
 src/store/modules/event.ts                    |  42 ++-
 src/styles/reset.scss                         |  35 +++
 src/views/dashboard/controls/Event.vue        | 102 +++++++
 src/views/dashboard/controls/Tab.vue          |  28 +-
 src/views/dashboard/controls/index.ts         |   2 +
 src/views/dashboard/data.ts                   |  21 +-
 src/views/dashboard/panel/Tool.vue            |   6 +
 src/views/dashboard/related/event/Content.vue | 129 +++++++++
 src/views/dashboard/related/event/Header.vue  | 235 ++++++++++++++++
 .../{ => dashboard/related}/event/data.ts     |   0
 src/views/event/Content.vue                   | 121 ---------
 src/views/event/Header.vue                    | 251 ------------------
 19 files changed, 782 insertions(+), 483 deletions(-)
 create mode 100644 src/assets/icons/add_fill.svg
 create mode 100644 src/assets/icons/event.svg
 delete mode 100644 src/router/event.ts
 create mode 100644 src/views/dashboard/controls/Event.vue
 create mode 100644 src/views/dashboard/related/event/Content.vue
 create mode 100644 src/views/dashboard/related/event/Header.vue
 rename src/views/{ => dashboard/related}/event/data.ts (100%)
 delete mode 100644 src/views/event/Content.vue
 delete mode 100644 src/views/event/Header.vue

diff --git a/package-lock.json b/package-lock.json
index c908f59a..217941fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "lodash": "^4.17.21",
         "monaco-editor": "^0.27.0",
         "pinia": "^2.0.5",
+        "vis-timeline": "^7.5.1",
         "vue": "^3.0.0",
         "vue-grid-layout": "^3.0.0-beta1",
         "vue-i18n": "^9.1.9",
@@ -1813,6 +1814,18 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@element-plus/icons-vue": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz",
@@ -3302,6 +3315,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.41",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
+      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
+      "peer": true
+    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.8",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@@ -7884,8 +7903,7 @@
     "node_modules/component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
-      "dev": true
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
     "node_modules/compressible": {
       "version": "2.0.18",
@@ -8697,6 +8715,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "peer": true
+    },
     "node_modules/cssnano": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
@@ -16440,6 +16464,12 @@
         "node": ">=0.6.0"
       }
     },
+    "node_modules/keycharm": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
+      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
+      "peer": true
+    },
     "node_modules/killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -18231,7 +18261,6 @@
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
-      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -21732,6 +21761,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/propagating-hammerjs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-2.0.1.tgz",
+      "integrity": "sha512-PH3zG5whbSxMocphXJzVtvKr+vWAgfkqVvtuwjSJ/apmEACUoiw6auBAT5HYXpZOR0eGcTAfYG5Yl8h91O5Elg==",
+      "peer": true,
+      "peerDependencies": {
+        "@egjs/hammerjs": "^2.0.17"
+      }
+    },
     "node_modules/proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -26871,7 +26909,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -26931,6 +26968,59 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "node_modules/vis-data": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.4.tgz",
+      "integrity": "sha512-usy+ePX1XnArNvJ5BavQod7YRuGQE1pjFl+pu7IS6rCom2EBoG0o1ZzCqf3l5US6MW51kYkLR+efxRbnjxNl7w==",
+      "hasInstallScript": true,
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "uuid": "^7.0.0 || ^8.0.0",
+        "vis-util": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/vis-timeline": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/vis-timeline/-/vis-timeline-7.5.1.tgz",
+      "integrity": "sha512-XZMHHbA8xm9/Y/iu3mE9MT7J5tfWgbdsW+PmqrgINU2QRX24AiqifNHZHV4YYzeJstiTSOg9Gs5qRkxQ0BvZJw==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "@egjs/hammerjs": "^2.0.0",
+        "component-emitter": "^1.3.0",
+        "keycharm": "^0.3.0 || ^0.4.0",
+        "moment": "^2.24.0",
+        "propagating-hammerjs": "^1.4.0 || ^2.0.0",
+        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0",
+        "vis-data": "^6.3.0 || ^7.0.0",
+        "vis-util": "^3.0.0 || ^4.0.0 || ^5.0.0",
+        "xss": "^1.0.0"
+      }
+    },
+    "node_modules/vis-util": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.3.tgz",
+      "integrity": "sha512-Wf9STUcFrDzK4/Zr7B6epW2Kvm3ORNWF+WiwEz2dpf5RdWkLUXFSbLcuB88n1W6tCdFwVN+v3V4/Xmn9PeL39g==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "@egjs/hammerjs": "^2.0.0",
+        "component-emitter": "^1.3.0"
+      }
+    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -28779,6 +28869,28 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
+    "node_modules/xss": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.13.tgz",
+      "integrity": "sha512-clu7dxTm1e8Mo5fz3n/oW3UCXBfV89xZ72jM8yzo1vR/pIS0w3sgB3XV2H8Vm6zfGnHL0FzvLJPJEBhd86/z4Q==",
+      "peer": true,
+      "dependencies": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "bin": {
+        "xss": "bin/xss"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/xss/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "peer": true
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -30233,6 +30345,15 @@
         }
       }
     },
+    "@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "requires": {
+        "@types/hammerjs": "^2.0.36"
+      }
+    },
     "@element-plus/icons-vue": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz",
@@ -31496,6 +31617,12 @@
         "@types/node": "*"
       }
     },
+    "@types/hammerjs": {
+      "version": "2.0.41",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
+      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
+      "peer": true
+    },
     "@types/http-proxy": {
       "version": "1.17.8",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@@ -35187,8 +35314,7 @@
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
-      "dev": true
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
     "compressible": {
       "version": "2.0.18",
@@ -35829,6 +35955,12 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "peer": true
+    },
     "cssnano": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
@@ -41916,6 +42048,12 @@
         "verror": "1.10.0"
       }
     },
+    "keycharm": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
+      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
+      "peer": true
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -43302,8 +43440,7 @@
     "moment": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
-      "dev": true
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
     },
     "monaco-editor": {
       "version": "0.27.0",
@@ -45995,6 +46132,13 @@
         "sisteransi": "^1.0.5"
       }
     },
+    "propagating-hammerjs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-2.0.1.tgz",
+      "integrity": "sha512-PH3zG5whbSxMocphXJzVtvKr+vWAgfkqVvtuwjSJ/apmEACUoiw6auBAT5HYXpZOR0eGcTAfYG5Yl8h91O5Elg==",
+      "peer": true,
+      "requires": {}
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -50096,8 +50240,7 @@
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "v8-compile-cache": {
       "version": "2.3.0",
@@ -50146,6 +50289,26 @@
         }
       }
     },
+    "vis-data": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.4.tgz",
+      "integrity": "sha512-usy+ePX1XnArNvJ5BavQod7YRuGQE1pjFl+pu7IS6rCom2EBoG0o1ZzCqf3l5US6MW51kYkLR+efxRbnjxNl7w==",
+      "peer": true,
+      "requires": {}
+    },
+    "vis-timeline": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/vis-timeline/-/vis-timeline-7.5.1.tgz",
+      "integrity": "sha512-XZMHHbA8xm9/Y/iu3mE9MT7J5tfWgbdsW+PmqrgINU2QRX24AiqifNHZHV4YYzeJstiTSOg9Gs5qRkxQ0BvZJw==",
+      "requires": {}
+    },
+    "vis-util": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.3.tgz",
+      "integrity": "sha512-Wf9STUcFrDzK4/Zr7B6epW2Kvm3ORNWF+WiwEz2dpf5RdWkLUXFSbLcuB88n1W6tCdFwVN+v3V4/Xmn9PeL39g==",
+      "peer": true,
+      "requires": {}
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -51657,6 +51820,24 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
+    "xss": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.13.tgz",
+      "integrity": "sha512-clu7dxTm1e8Mo5fz3n/oW3UCXBfV89xZ72jM8yzo1vR/pIS0w3sgB3XV2H8Vm6zfGnHL0FzvLJPJEBhd86/z4Q==",
+      "peer": true,
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "peer": true
+        }
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index e1f48cc3..040092aa 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "lodash": "^4.17.21",
     "monaco-editor": "^0.27.0",
     "pinia": "^2.0.5",
+    "vis-timeline": "^7.5.1",
     "vue": "^3.0.0",
     "vue-grid-layout": "^3.0.0-beta1",
     "vue-i18n": "^9.1.9",
diff --git a/src/assets/icons/add_fill.svg b/src/assets/icons/add_fill.svg
new file mode 100644
index 00000000..5285acaa
--- /dev/null
+++ b/src/assets/icons/add_fill.svg
@@ -0,0 +1,15 @@
+<!-- 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. -->
+<svg t="1655799536378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9286" width="48" height="48"><path d="M563.2 614.4v51.2c0 30.72-20.48 51.2-51.2 51.2s-51.2-20.48-51.2-51.2v-51.2H409.6c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2h51.2V460.8c0-30.72 20.48-51.2 51.2-51.2s51.2 20.48 51.2 51.2v51.2h51.2c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2h-51.2z m51.2-563.2c158.72 15.36 281.6 143.36 281.6 307.2v512c0 56.32-46.08 102.4-102.4 102.4h-563.2c-56.32 0-102.4-46.08-102.4-102.4V153.6c0-56.32 46.08-102.4 102.4-102.4H614.4z m163.84 230.4c-25.6-61.44-76.8-107.52-138.24-122.88v71.68c0 30.72 20.48 51.2 51.2 51.2h87.04zM537.6 153.6h-256c-30.72 0-51.2 20.48-51.2 51.2v614.4c0 30.72 20.48 51.2 51.2 51.2h460.8c30.72 0 51.2-20.48 51.2-51.2V384h-153.6c-56.32 0-102.4-46.08-102.4-102.4V153.6z" fill="#707070" p-id="9287"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/event.svg b/src/assets/icons/event.svg
new file mode 100644
index 00000000..93bf25ec
--- /dev/null
+++ b/src/assets/icons/event.svg
@@ -0,0 +1,15 @@
+<!-- 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. -->
+<svg t="1655695739627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2218" width="48" height="48"><path d="M173.292308 177.230769C86.646154 265.846154 39.384615 382.030769 39.384615 504.123077 39.384615 531.692308 61.046154 551.384615 86.646154 551.384615s47.261538-21.661538 47.261538-47.261538c-1.969231-96.492308 37.415385-189.046154 106.338462-257.969231s163.446154-106.338462 257.969231-106.338461c27.569231 0 47.261538-21.661538 47.261538-47.261539 0-27.569231-21.661538-47.261538-47.261538-47.261538C378.092308 43.323077 259.938462 90.584615 173.292308 177.230769z m57.107692 326.892308c0 27.569231 19.692308 47.261538 47.261538 47.261538s47.261538-21.661538 47.261539-47.261538c0-45.292308 17.723077-90.584615 51.2-122.092308 33.476923-33.476923 76.8-49.230769 122.092308-51.2 27.569231 0 47.261538-21.661538 47.261538-47.261538 0-27.569231-19.692308-47.261538-47.261538-47.261539-70.892308 0-139.815385 27.569231-191.015385 76.8-7.876923 9.846154-80.738462 82.707692-76.8 191.015385z m665.6-204.8c-17.723077-23.630769-41.353846-51.2-45.292308-55.138462-5.907692-3.938462-13.784615-7.876923-21.661538-7.876923-7.876923 0-15.753846 1.969231-19.692308 7.876923L610.461538 441.107692c-47.261538-39.384615-118.153846-37.415385-163.446153 7.876923-45.292308 45.292308-47.261538 116.184615-7.876923 163.446154l-191.015385 191.015385c-5.907692 5.907692-9.846154 13.784615-9.846154 21.661538 0 9.846154 3.938462 19.692308 11.815385 25.6l53.16923 39.384616c72.861538 57.107692 163.446154 88.615385 259.938462 88.615384 232.369231 0 421.415385-189.046154 421.415385-421.415384 0-94.523077-33.476923-185.107692-88.615385-257.969231z" p-id="2219" fill="#707070"></path></svg>
\ No newline at end of file
diff --git a/src/router/event.ts b/src/router/event.ts
deleted file mode 100644
index 6dd2424f..00000000
--- a/src/router/event.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * 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.
- */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
-
-export const routesEvent: Array<RouteRecordRaw> = [
-  {
-    path: "",
-    name: "Events",
-    meta: {
-      title: "events",
-      icon: "av_timer",
-      hasGroup: false,
-      exact: true,
-    },
-    component: Layout,
-    children: [
-      {
-        path: "/events",
-        name: "Events",
-        meta: {
-          exact: false,
-        },
-        component: () =>
-          import(/* webpackChunkName: "events" */ "@/views/Event.vue"),
-      },
-    ],
-  },
-];
diff --git a/src/router/index.ts b/src/router/index.ts
index da15693d..b4a57531 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -20,7 +20,6 @@ import { routesMesh } from "./serviceMesh";
 import { routesDatabase } from "./database";
 import { routesInfra } from "./infrastructure";
 import { routesDashboard } from "./dashboard";
-import { routesEvent } from "./event";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
 import { routesSelf } from "./selfObservability";
@@ -39,7 +38,6 @@ const routes: Array<RouteRecordRaw> = [
   ...routesSelf,
   ...routesDashboard,
   ...routesAlarm,
-  ...routesEvent,
   ...routesSetting,
 ];
 
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 596ac8b6..d324b4c8 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -110,13 +110,7 @@ export const dashboardStore = defineStore({
               : 3,
         };
       }
-      if (
-        type === "Trace" ||
-        type === "Profile" ||
-        type === "Log" ||
-        type === "Ebpf" ||
-        type === "DemandLog"
-      ) {
+      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) {
         newItem.h = 36;
       }
       if (type === "Text") {
@@ -171,13 +165,7 @@ export const dashboardStore = defineStore({
           showDepth: true,
         };
       }
-      if (
-        type === "Trace" ||
-        type === "Profile" ||
-        type === "Log" ||
-        type === "DemandLog" ||
-        type === "Ebpf"
-      ) {
+      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) {
         newItem.h = 32;
       }
       if (type === "Text") {
diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts
index 01b6788a..fed1fa74 100644
--- a/src/store/modules/event.ts
+++ b/src/store/modules/event.ts
@@ -19,16 +19,16 @@ import { store } from "@/store";
 import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
 import { Event, QueryEventCondition } from "@/types/events";
-import { Instance, Endpoint, Service } from "@/types/selector";
+import { Instance, Endpoint } from "@/types/selector";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
 
 interface eventState {
   loading: boolean;
   events: Event[];
-  services: Service[];
   instances: Instance[];
   endpoints: Endpoint[];
-  condition: QueryEventCondition | any;
+  condition: Nullable<QueryEventCondition>;
 }
 
 export const eventStore = defineStore({
@@ -36,32 +36,18 @@ export const eventStore = defineStore({
   state: (): eventState => ({
     loading: false,
     events: [],
-    services: [{ value: "", label: "All" }],
     instances: [{ value: "", label: "All" }],
     endpoints: [{ value: "", label: "All" }],
-    condition: {
-      paging: { pageNum: 1, pageSize: 15 },
-    },
+    condition: null,
   }),
   actions: {
-    setEventCondition(data: any) {
-      this.condition = { ...this.condition, ...data };
+    setEventCondition(data: QueryEventCondition) {
+      this.condition = data;
     },
-    async getServices(layer: string) {
-      if (!layer) {
-        this.services = [{ value: "", label: "All" }];
-        return new Promise((resolve) => resolve([]));
-      }
-      const res: AxiosResponse = await graphql.query("queryServices").params({
-        layer,
-      });
-      if (res.data.errors) {
-        return res.data;
-      }
-      this.services = res.data.data.services;
-      return res.data;
-    },
-    async getInstances(serviceId: string) {
+    async getInstances() {
+      const serviceId = useSelectorStore().currentService
+        ? useSelectorStore().currentService.id
+        : "";
       const res: AxiosResponse = await graphql.query("queryInstances").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
@@ -75,7 +61,13 @@ export const eventStore = defineStore({
       ];
       return res.data;
     },
-    async getEndpoints(serviceId: string) {
+    async getEndpoints() {
+      const serviceId = useSelectorStore().currentService
+        ? useSelectorStore().currentService.id
+        : "";
+      if (!serviceId) {
+        return;
+      }
       const res: AxiosResponse = await graphql.query("queryEndpoints").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 9a95d713..5d732b30 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -154,3 +154,38 @@ pre {
 .switch {
   margin: 0 5px;
 }
+
+div.vis-tooltip {
+  max-width: 600px;
+  overflow: hidden;
+  background-color: #fff !important;
+  white-space: normal !important;
+  font-size: 12px !important;
+}
+
+.vis-item {
+  cursor: pointer;
+  height: 17px;
+}
+
+.vis-item.Error {
+  background-color: #e66;
+  opacity: 0.8;
+  border-color: #e66;
+  color: #fff !important;
+}
+
+.vis-item.Normal {
+  background-color: #fac858;
+  border-color: #fac858;
+  color: #666 !important;
+}
+
+.vis-item .vis-item-content {
+  padding: 0 5px !important;
+}
+
+.vis-item.vis-selected.Error,
+.vis-item.vis-selected.Normal {
+  color: #1a1a1a !important;
+}
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue
new file mode 100644
index 00000000..e510a138
--- /dev/null
+++ b/src/views/dashboard/controls/Event.vue
@@ -0,0 +1,102 @@
+<!-- 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="event-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>
+    <div class="header">
+      <Header :needQuery="needQuery" />
+    </div>
+    <div class="event">
+      <Content />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import Header from "../related/event/Header.vue";
+import Content from "../related/event/Content.vue";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
+});
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+
+function removeWidget() {
+  dashboardStore.removeControls(props.data);
+}
+</script>
+<style lang="scss" scoped>
+.event-wrapper {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  position: relative;
+  overflow: auto;
+}
+
+.delete {
+  position: absolute;
+  top: 5px;
+  right: 3px;
+  z-index: 9999;
+}
+
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+  min-width: 1024px;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+
+.event {
+  width: 100%;
+  height: calc(100% - 80px);
+}
+</style>
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 2efe3419..8c353993 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -37,13 +37,6 @@ limitations under the License. -->
           v-if="dashboardStore.editMode && canEditTabName"
         />
       </span>
-      <span class="tab-icons" v-if="dashboardStore.editMode">
-        <el-tooltip content="Add tab items" placement="bottom">
-          <i @click="addTabItem">
-            <Icon size="middle" iconName="add" class="tab-icon" />
-          </i>
-        </el-tooltip>
-      </span>
       <span class="tab-icons">
         <el-tooltip content="Copy Link" placement="bottom">
           <i @click="copyLink">
@@ -51,6 +44,13 @@ limitations under the License. -->
           </i>
         </el-tooltip>
       </span>
+      <span class="tab-icons" v-if="dashboardStore.editMode">
+        <el-tooltip content="Add tab items" placement="bottom">
+          <i @click="addTabItem">
+            <Icon size="middle" iconName="add_fill" class="tab-icon" />
+          </i>
+        </el-tooltip>
+      </span>
     </div>
     <div class="operations" v-if="dashboardStore.editMode">
       <el-dropdown placement="bottom" trigger="click" :width="200">
@@ -117,6 +117,7 @@ import Profile from "./Profile.vue";
 import Log from "./Log.vue";
 import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
+import Event from "./Event.vue";
 import { dragIgnoreFrom } from "../data";
 import DemandLog from "./DemandLog.vue";
 import copy from "@/utils/copy";
@@ -130,7 +131,17 @@ const props = {
 };
 export default defineComponent({
   name: "Tab",
-  components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf, DemandLog },
+  components: {
+    Topology,
+    Widget,
+    Trace,
+    Profile,
+    Log,
+    Text,
+    Ebpf,
+    DemandLog,
+    Event,
+  },
   props,
   setup(props) {
     const { t } = useI18n();
@@ -199,6 +210,7 @@ export default defineComponent({
       editTabIndex.value = index;
     }
     function handleClick(el: any) {
+      needQuery.value = true;
       if (["tab-name", "edit-tab"].includes(el.target.className)) {
         return;
       }
diff --git a/src/views/dashboard/controls/index.ts b/src/views/dashboard/controls/index.ts
index 858bc5c5..8130b98c 100644
--- a/src/views/dashboard/controls/index.ts
+++ b/src/views/dashboard/controls/index.ts
@@ -23,6 +23,7 @@ import Log from "./Log.vue";
 import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
 import DemandLog from "./DemandLog.vue";
+import Event from "./Event.vue";
 
 export default {
   Tab,
@@ -34,4 +35,5 @@ export default {
   Text,
   Ebpf,
   DemandLog,
+  Event,
 };
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index b19f65e7..2c81d603 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 export const dragIgnoreFrom =
-  "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules";
+  "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item, .vis-timeline";
 
 export const PodsChartTypes = ["EndpointList", "InstanceList"];
 
@@ -178,15 +178,16 @@ export const AllTools = [
   { name: "assignment", content: "Add Log", id: "addLog" },
 ];
 export const ServiceTools = [
-  { name: "playlist_add", content: "Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Tab", id: "addTab" },
-  { name: "library_books", content: "Text", id: "addText" },
-  { name: "device_hub", content: "Topology", id: "addTopology" },
-  { name: "merge", content: "Trace", id: "addTrace" },
-  { name: "timeline", content: "Trace Profiling", id: "addProfile" },
-  { name: "insert_chart", content: "eBPF Profiling", id: "addEbpf" },
-  { name: "assignment", content: "Log", id: "addLog" },
+  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
+  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "library_books", content: "Add Text", id: "addText" },
+  { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "merge", content: "Add Trace", id: "addTrace" },
+  { name: "timeline", content: "Add Trace Profiling", id: "addProfile" },
+  { name: "insert_chart", content: "Add eBPF Profiling", id: "addEbpf" },
+  { name: "assignment", content: "Add Log", id: "addLog" },
   { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
+  { name: "event", content: "Add Event", id: "addEvent" },
 ];
 export const InstanceTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
@@ -195,6 +196,7 @@ export const InstanceTools = [
   { name: "merge", content: "Add Trace", id: "addTrace" },
   { name: "assignment", content: "Add Log", id: "addLog" },
   { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
+  { name: "event", content: "Add Event", id: "addEvent" },
 ];
 export const EndpointTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
@@ -203,6 +205,7 @@ export const EndpointTools = [
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
   { name: "assignment", content: "Add Log", id: "addLog" },
+  { name: "event", content: "Add Event", id: "addEvent" },
 ];
 export const ServiceRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 31ea55b5..b240b93d 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -458,6 +458,9 @@ function setTabControls(id: string) {
     case "addDemandLog":
       dashboardStore.addTabControls("DemandLog");
       break;
+    case "addEvent":
+      dashboardStore.addTabControls("Event");
+      break;
     default:
       ElMessage.info("Don't support this control");
       break;
@@ -493,6 +496,9 @@ function setControls(id: string) {
     case "addDemandLog":
       dashboardStore.addControl("DemandLog");
       break;
+    case "addEvent":
+      dashboardStore.addControl("Event");
+      break;
     default:
       dashboardStore.addControl("Widget");
   }
diff --git a/src/views/dashboard/related/event/Content.vue b/src/views/dashboard/related/event/Content.vue
new file mode 100644
index 00000000..d502375f
--- /dev/null
+++ b/src/views/dashboard/related/event/Content.vue
@@ -0,0 +1,129 @@
+<!-- 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 ref="timeline" class="events"></div>
+</template>
+<script lang="ts" setup>
+import { ref, watch, onMounted } from "vue";
+import dayjs from "dayjs";
+import { useThrottleFn } from "@vueuse/core";
+import { useEventStore } from "@/store/modules/event";
+import { DataSet, Timeline } from "vis-timeline/standalone";
+import "vis-timeline/styles/vis-timeline-graph2d.css";
+
+const eventStore = useEventStore();
+/*global Nullable */
+const timeline = ref<Nullable<HTMLDivElement>>(null);
+const visGraph = ref<Nullable<any>>(null);
+const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  new Date(dayjs(date).format(pattern));
+const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+
+onMounted(() => {
+  oldVal.value = (timeline.value && timeline.value.getBoundingClientRect()) || {
+    width: 0,
+    height: 0,
+  };
+  useThrottleFn(resize, 500)();
+});
+
+function visTimeline() {
+  if (!timeline.value) {
+    return;
+  }
+  if (visGraph.value) {
+    visGraph.value.destroy();
+  }
+  const h = timeline.value.getBoundingClientRect().height;
+  const events = eventStore.events.map((d, index) => {
+    return {
+      id: index + 1,
+      content: d.name,
+      start: dateFormat(d.startTime),
+      end: dateFormat(d.endTime),
+      data: d,
+      className: d.type,
+    };
+  });
+  const items: any = new DataSet(events);
+  const options: any = {
+    height: h,
+    width: "100%",
+    locale: "en",
+    groupHeightMode: "fitItems",
+    autoResize: false,
+    tooltip: {
+      overflowMethod: "cap",
+      template(item) {
+        const data = item.data || {};
+        let tmp = `<div>ID: ${data.uuid || ""}</div>
+        <div>Name: ${data.name || ""}</div>
+        <div>Event Type: ${data.type || ""}</div>
+        <div>Start Time: ${data.startTime ? visDate(data.startTime) : ""}</div>
+        <div>End Time: ${data.endTime ? visDate(data.endTime) : ""}</div>
+        <div>Message: ${data.message || ""}</div>
+        <div>Service: ${data.source.service || ""}</div>`;
+        if (data.source.endpoint) {
+          tmp += `<div>Endpoint: ${data.source.endpoint}</div>`;
+        }
+        if (data.source.instance) {
+          tmp += `<div>Service Instance: ${data.source.instance}</div>`;
+        }
+        return tmp;
+      },
+    },
+  };
+  visGraph.value = new Timeline(timeline.value, items, options);
+}
+function resize() {
+  const observer = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    const cr = entry.contentRect;
+    if (
+      Math.abs(cr.width - oldVal.value.width) < 3 &&
+      Math.abs(cr.height - oldVal.value.height) < 3
+    ) {
+      return;
+    }
+    visTimeline();
+    oldVal.value = { width: cr.width, height: cr.height };
+  });
+  if (timeline.value) {
+    observer.observe(timeline.value);
+  }
+}
+watch(
+  () => eventStore.events,
+  () => {
+    visTimeline();
+  }
+);
+</script>
+<style lang="scss" scoped>
+.events {
+  width: calc(100% - 5px);
+  margin: 0 5px 5px 0;
+  height: 100%;
+  min-height: 150px;
+}
+
+.message {
+  max-width: 400px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/dashboard/related/event/Header.vue b/src/views/dashboard/related/event/Header.vue
new file mode 100644
index 00000000..5ce838ff
--- /dev/null
+++ b/src/views/dashboard/related/event/Header.vue
@@ -0,0 +1,235 @@
+<!-- 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="flex-h row">
+    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
+      <span class="grey mr-5"> {{ t("instance") }}: </span>
+      <Selector
+        size="small"
+        :value="state.instance.value"
+        :options="eventStore.instances"
+        placeholder="Select a instance"
+        @change="changeField('instance', $event)"
+      />
+    </div>
+    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
+      <span class="grey mr-5"> {{ t("endpoint") }}: </span>
+      <Selector
+        size="small"
+        :value="state.endpoint.value"
+        :options="eventStore.endpoints"
+        placeholder="Select a endpoint"
+        @change="changeField('endpoint', $event)"
+        :isRemote="true"
+        @query="searchEndpoints"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey">{{ t("eventsType") }}: </span>
+      <Selector
+        v-model="state.eventType"
+        :options="EventTypes"
+        placeholder="Select a type"
+        @change="changeField('eventType', $event)"
+        class="event-tool-input"
+        size="small"
+      />
+    </div>
+    <el-pagination
+      v-model:currentPage="pageNum"
+      v-model:page-size="pageSize"
+      layout="prev, pager, next"
+      :total="total"
+      @current-change="updatePage"
+      :pager-count="5"
+      small
+    />
+    <el-button
+      class="search-btn"
+      size="small"
+      type="primary"
+      @click="queryEvents"
+    >
+      {{ t("search") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, computed, reactive, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useEventStore } from "@/store/modules/event";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
+import { EntityType } from "../../data";
+import { EventTypes } from "./data";
+
+/*global defineProps */
+const props = defineProps({
+  needQuery: { type: Boolean, default: true },
+});
+const { t } = useI18n();
+const appStore = useAppStoreWithOut();
+const selectorStore = useSelectorStore();
+const dashboardStore = useDashboardStore();
+const eventStore = useEventStore();
+const pageSize = 20;
+const pageNum = ref<number>(1);
+const state = reactive<any>({
+  instance: { value: "", label: "All", id: "" },
+  endpoint: { value: "", label: "All", id: "" },
+  eventType: { value: "", label: "All" },
+});
+const total = computed(() =>
+  eventStore.events.length === pageSize
+    ? pageSize * pageNum.value + 1
+    : pageSize * pageNum.value
+);
+if (props.needQuery) {
+  init();
+}
+async function init() {
+  fetchSelectors();
+  await queryEvents();
+  state.instance = { value: "", label: "All" };
+  state.endpoint = { value: "", label: "All" };
+}
+
+function fetchSelectors() {
+  if (dashboardStore.entity === EntityType[2].value) {
+    getInstances();
+    return;
+  }
+  if (dashboardStore.entity === EntityType[3].value) {
+    getEndpoints();
+    return;
+  }
+  if (dashboardStore.entity === EntityType[0].value) {
+    getInstances();
+    getEndpoints();
+  }
+}
+
+async function getEndpoints(id?: string) {
+  const resp = await eventStore.getEndpoints(id);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.endpoint = eventStore.endpoints[0];
+}
+async function getInstances(id?: string) {
+  const resp = await eventStore.getInstances(id);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.instance = eventStore.instances[0];
+}
+async function queryEvents() {
+  let endpoint = state.endpoint.value,
+    instance = state.instance.value;
+  if (dashboardStore.entity === EntityType[2].value) {
+    endpoint = selectorStore.currentPod.id;
+  }
+  if (dashboardStore.entity === EntityType[3].value) {
+    instance = selectorStore.currentPod.id;
+  }
+  eventStore.setEventCondition({
+    // layer: dashboardStore.layerId,
+    paging: {
+      pageNum: pageNum.value,
+      pageSize: pageSize,
+    },
+    source: {
+      service: selectorStore.currentService.value || "",
+      endpoint: endpoint || "",
+      serviceInstance: instance || "",
+    },
+    type: state.eventType.value || undefined,
+  });
+  const res = await eventStore.getEvents();
+  if (res && res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+function changeField(type: string, opt: any[]) {
+  state[type] = opt[0];
+}
+async function searchEndpoints(keyword: string) {
+  const resp = await eventStore.getEndpoints(keyword);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+  }
+}
+
+function updatePage(p: number) {
+  pageNum.value = p;
+  queryEvents();
+}
+
+watch(
+  () => [selectorStore.currentService],
+  () => {
+    if (dashboardStore.entity === EntityType[0].value) {
+      init();
+    }
+  }
+);
+
+watch(
+  () => [selectorStore.currentPod],
+  () => {
+    if (dashboardStore.entity === EntityType[0].value) {
+      return;
+    }
+    init();
+  }
+);
+watch(
+  () => appStore.durationTime,
+  () => {
+    if (dashboardStore.entity === EntityType[1].value) {
+      init();
+    }
+  }
+);
+</script>
+<style lang="scss" scoped>
+.inputs {
+  width: 120px;
+}
+
+.inputs-max {
+  width: 270px;
+}
+
+.search-btn {
+  cursor: pointer;
+  width: 120px;
+}
+
+.selected {
+  display: inline-block;
+  padding: 0 3px;
+  border-radius: 3px;
+  overflow: hidden;
+  color: #3d444f;
+  border: 1px dashed #aaa;
+  font-size: 12px;
+  margin: 0 2px;
+}
+</style>
diff --git a/src/views/event/data.ts b/src/views/dashboard/related/event/data.ts
similarity index 100%
rename from src/views/event/data.ts
rename to src/views/dashboard/related/event/data.ts
diff --git a/src/views/event/Content.vue b/src/views/event/Content.vue
deleted file mode 100644
index b01b9854..00000000
--- a/src/views/event/Content.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<!-- 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="timeline-table clear">
-    <div
-      v-for="(i, index) in eventStore.events"
-      :key="index"
-      class="mb-10 clear timeline-item"
-      @click="showEventDetails(i)"
-    >
-      <div class="g-sm-3 grey sm hide-xs time-line tr">
-        {{ dateFormat(parseInt(i.startTime)) }}
-      </div>
-      <div class="timeline-table-i g-sm-9">
-        <div class="message mb-5 b">
-          {{ i.message }}
-        </div>
-        <div
-          class="timeline-table-i-scope mr-10 l sm"
-          :class="{
-            blue: i.scope === 'Service',
-            green: i.scope === 'Endpoint',
-            yellow: i.scope === 'ServiceInstance',
-          }"
-        >
-          {{ i.scope }}
-        </div>
-        <div class="grey sm show-xs">
-          {{ dateFormat(parseInt(i.startTime)) }}
-        </div>
-      </div>
-    </div>
-    <div v-if="!eventStore.events.length" class="tips">{{ t("noData") }}</div>
-  </div>
-  <el-dialog
-    :title="t('eventDetail')"
-    v-model="showDetails"
-    fullscreen
-    :destroy-on-close="true"
-    @closed="showDetails = false"
-  >
-    <div>
-      <div
-        class="mb-10"
-        v-for="(eventKey, index) in EventsDetailKeys"
-        :key="index"
-      >
-        <span class="keys">{{ t(eventKey.text) }}</span>
-        <span v-if="eventKey.class === 'parameters'">
-          <span v-for="(d, index) of currentEvent[eventKey.class]" :key="index"
-            >{{ d.key }}={{ d.value }};
-          </span>
-        </span>
-        <span
-          v-else-if="
-            eventKey.class === 'startTime' || eventKey.class === 'endTime'
-          "
-          >{{ dateFormat(currentEvent[eventKey.class]) }}</span
-        >
-        <span v-else-if="eventKey.class === 'source'" class="source">
-          <span
-            >{{ t("service") }}:
-            {{ currentEvent[eventKey.class].service }}</span
-          >
-          <div v-show="currentEvent[eventKey.class].endpoint">
-            {{ t("endpoint") }}:
-            {{ currentEvent[eventKey.class].endpoint }}
-          </div>
-          <div v-show="currentEvent[eventKey.class].serviceInstance">
-            {{ t("instance") }}:
-            {{ currentEvent[eventKey.class].serviceInstance }}
-          </div>
-        </span>
-        <span v-else>{{ currentEvent[eventKey.class] }}</span>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-<script lang="ts" setup>
-import { ref } from "vue";
-import { useI18n } from "vue-i18n";
-import dayjs from "dayjs";
-import { useEventStore } from "@/store/modules/event";
-import { EventsDetailKeys } from "./data";
-import { Event } from "@/types/events";
-
-const { t } = useI18n();
-const eventStore = useEventStore();
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(date).format(pattern);
-const showDetails = ref<boolean>(false);
-const currentEvent = ref<any>({});
-
-function showEventDetails(item: Event) {
-  showDetails.value = true;
-  currentEvent.value = item;
-}
-</script>
-<style lang="scss" scoped>
-@import "../components/style.scss";
-
-.tips {
-  width: 100%;
-  margin: 20px 0;
-  text-align: center;
-  font-size: 14px;
-}
-</style>
diff --git a/src/views/event/Header.vue b/src/views/event/Header.vue
deleted file mode 100644
index 3b2da10f..00000000
--- a/src/views/event/Header.vue
+++ /dev/null
@@ -1,251 +0,0 @@
-<!-- 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>
-  <nav class="event-tool flex-v">
-    <div class="flex-h">
-      <div class="mr-5">
-        <span class="grey">{{ t("layer") }}: </span>
-        <Selector
-          v-model="state.currentLayer"
-          :options="state.layers"
-          placeholder="Select a layer"
-          @change="selectLayer"
-          class="event-tool-input"
-          size="small"
-        />
-      </div>
-      <div class="mr-5">
-        <span class="grey">{{ t("service") }}: </span>
-        <Selector
-          v-model="state.service"
-          :options="eventStore.services"
-          placeholder="Select a service"
-          @change="selectService"
-          class="event-tool-input"
-          size="small"
-        />
-      </div>
-      <div class="mr-5">
-        <span class="grey mr-5">{{ t("instance") }}: </span>
-        <Selector
-          v-model="state.instance"
-          :options="eventStore.instances"
-          placeholder="Select a instance"
-          @change="selectInstance"
-          class="event-tool-input"
-          size="small"
-        />
-      </div>
-      <div class="mr-5">
-        <span class="grey mr-5">{{ t("endpoint") }}: </span>
-        <Selector
-          v-model="state.endpoint"
-          :options="eventStore.endpoints"
-          placeholder="Select a endpoint"
-          @change="selectEndpoint"
-          class="event-tool-input"
-          size="small"
-        />
-      </div>
-      <div class="mr-5">
-        <span class="grey">{{ t("eventsType") }}: </span>
-        <Selector
-          v-model="state.eventType"
-          :options="EventTypes"
-          placeholder="Select a type"
-          @change="selectType"
-          class="event-tool-input"
-          size="small"
-        />
-      </div>
-    </div>
-    <div class="mt-5">
-      <el-pagination
-        v-model:currentPage="pageNum"
-        v-model:page-size="pageSize"
-        layout="prev, pager, next"
-        :total="total"
-        @current-change="updatePage"
-        :pager-count="5"
-        small
-        :style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
-      />
-      <!-- <div>
-        <el-button class="search" type="primary" @click="queryEvents">
-          <Icon iconName="search" class="mr-5" />
-          <span class="vm">{{ t("search") }}</span>
-        </el-button>
-      </div> -->
-    </div>
-  </nav>
-</template>
-<script lang="ts" setup>
-import { ref, reactive, computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { EventTypes } from "./data";
-import { useEventStore } from "@/store/modules/event";
-import { useSelectorStore } from "@/store/modules/selectors";
-import { ElMessage } from "element-plus";
-
-const { t } = useI18n();
-const eventStore = useEventStore();
-const selectorStore = useSelectorStore();
-const pageSize = 20;
-const pageNum = ref<number>(1);
-const state = reactive<{
-  currentLayer: string;
-  layers: string[];
-  eventType: string;
-  service: string;
-  instance: string;
-  endpoint: string;
-}>({
-  currentLayer: "",
-  layers: [],
-  eventType: "",
-  service: "",
-  instance: "",
-  endpoint: "",
-});
-const total = computed(() =>
-  eventStore.events.length === pageSize
-    ? pageSize * pageNum.value + 1
-    : pageSize * pageNum.value
-);
-
-getSelectors();
-
-async function getSelectors() {
-  await getLayers();
-  getServices();
-}
-
-async function getServices() {
-  const resp = await eventStore.getServices(state.currentLayer);
-  if (resp.errors) {
-    ElMessage.error(resp.errors);
-    return;
-  }
-  state.service = eventStore.services[0].value;
-  if (!eventStore.services[0].id) {
-    queryEvents();
-    return;
-  }
-  getEndpoints(eventStore.services[0].id);
-  getInstances(eventStore.services[0].id);
-  queryEvents();
-}
-
-async function getEndpoints(id: string) {
-  const resp = await eventStore.getEndpoints(id);
-  if (resp.errors) {
-    ElMessage.error(resp.errors);
-    return;
-  }
-  state.endpoint = eventStore.endpoints[0].value;
-}
-async function getInstances(id: string) {
-  const resp = await eventStore.getInstances(id);
-  if (resp.errors) {
-    ElMessage.error(resp.errors);
-    return;
-  }
-  state.instance = eventStore.instances[0].value;
-}
-
-async function getLayers() {
-  const resp = await selectorStore.fetchLayers();
-  if (resp.errors) {
-    ElMessage.error(resp.errors);
-    return;
-  }
-  state.currentLayer = "";
-  state.layers = [
-    { label: "All", value: "" },
-    ...resp.data.layers.map((d: string) => {
-      return { label: d, value: d };
-    }),
-  ];
-}
-
-async function queryEvents() {
-  eventStore.setEventCondition({
-    paging: {
-      pageNum: pageNum.value,
-      pageSize: pageSize,
-    },
-    source: {
-      service: state.service || "",
-      endpoint: state.endpoint || "",
-      serviceInstance: state.instance || "",
-    },
-    type: state.eventType || undefined,
-  });
-  const resp = await eventStore.getEvents();
-  if (resp.errors) {
-    ElMessage.error(resp.errors);
-  }
-}
-
-async function selectLayer(opt: any) {
-  state.currentLayer = opt[0].value;
-  await getServices();
-}
-
-function selectService(opt: any) {
-  state.service = opt[0].value;
-  queryEvents();
-  if (!opt[0].id) {
-    return;
-  }
-  getEndpoints(opt[0].id);
-  getInstances(opt[0].id);
-}
-
-function selectInstance(opt: any) {
-  state.instance = opt[0].value;
-  queryEvents();
-}
-
-function selectEndpoint(opt: any) {
-  state.endpoint = opt[0].value;
-  queryEvents();
-}
-
-function selectType(opt: any) {
-  state.eventType = opt[0].value;
-  queryEvents();
-}
-
-function updatePage(p: number) {
-  pageNum.value = p;
-  queryEvents();
-}
-</script>
-<style lang="scss" scoped>
-.event-tool {
-  background-color: #f0f2f5;
-  width: 100%;
-  padding: 10px;
-}
-
-.event-tool-input {
-  width: 200px;
-}
-
-.search {
-  margin-left: 20px;
-}
-</style>