feat: implement Profile in the dashboard (#19)

2025-10-14 11:21:29 +00:00 · 2022-03-02 16:41:48 +08:00
parent 977ffbaf74
commit ca6d08827f
41 changed files with 2165 additions and 117 deletions
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -0,0 +1,89 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="profile-wrapper flex-v">
+    <el-popover placement="bottom" trigger="click" :width="100">
+      <template #reference>
+        <span class="delete cp">
+          <Icon iconName="ellipsis_v" size="middle" class="operation" />
+        </span>
+      </template>
+      <div class="tools" @click="removeWidget">
+        <span>{{ t("delete") }}</span>
+      </div>
+    </el-popover>
+    <Header />
+    <Content />
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import Header from "../related/profile/Header.vue";
+import Content from "../related/profile/Content.vue";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+  activeIndex: { type: String, default: "" },
+});
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+function removeWidget() {
+  dashboardStore.removeControls(props.data);
+}
+</script>
+<style lang="scss" scoped>
+.profile-wrapper {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  position: relative;
+}
+
+.delete {
+  position: absolute;
+  top: 5px;
+  right: 3px;
+}
+
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+
+.trace {
+  width: 100%;
+  overflow: auto;
+}
+</style>
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -20,8 +20,8 @@ limitations under the License. -->
          <Icon iconName="ellipsis_v" size="middle" class="operation" />
        </span>
      </template>
-      <div class="tools">
-        <span @click="removeWidget">{{ t("delete") }}</span>
+      <div class="tools" @click="removeWidget">
+        <span>{{ t("delete") }}</span>
      </div>
    </el-popover>
    <div class="header">
--- a/src/views/dashboard/controls/index.ts
+++ b/src/views/dashboard/controls/index.ts
@@ -18,5 +18,6 @@ import Topology from "./Topology.vue";
 import Tab from "./Tab.vue";
 import Widget from "./Widget.vue";
 import Trace from "./Trace.vue";
+import Profile from "./Profile.vue";

-export default { Tab, Widget, Trace, Topology };
+export default { Tab, Widget, Trace, Topology, Profile };
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -167,6 +167,7 @@ export const ToolIcons = [
  { name: "all_inbox", content: "Add Tab", id: "addTab" },
  { name: "device_hub", content: "Add Topology", id: "topology" },
  { name: "merge", content: "Add Trace", id: "trace" },
+  { name: "timeline", content: "Add Profile", id: "profile" },
  // { name: "save_alt", content: "Export", id: "export" },
  // { name: "folder_open", content: "Import", id: "import" },
  // { name: "settings", content: "Settings", id: "settings" },
@@ -209,7 +210,7 @@ export const Status = [
  { label: "Error", value: "ERROR" },
 ];
 export const QueryOrders = [
-  { label: "startTime", value: "BY_START_TIME" },
-  { label: "duration", value: "BY_DURATION" },
+  { label: "Start Time", value: "BY_START_TIME" },
+  { label: "Duration", value: "BY_DURATION" },
 ];
 export const TraceEntitys = ["All", "Service", "ServiceInstance", "Endpoint"];
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -31,7 +31,7 @@ limitations under the License. -->
      :key="item.i"
      @click="clickGrid(item)"
      :class="{ active: dashboardStore.activedGridItem === item.i }"
-      drag-ignore-from="svg.d3-trace-tree"
+      drag-ignore-from="svg.d3-trace-tree, .dragger"
    >
      <component :is="item.type" :data="item" />
    </grid-item>
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -84,10 +84,13 @@ limitations under the License. -->
          size="sm"
          :iconName="t.name"
          v-if="
-            !['topology', 'trace'].includes(t.id) ||
+            !['topology', 'trace', 'profile'].includes(t.id) ||
            (t.id === 'topology' &&
              hasTopology.includes(dashboardStore.entity)) ||
-            (t.id === 'trace' && TraceEntitys.includes(dashboardStore.entity))
+            (t.id === 'trace' &&
+              TraceEntitys.includes(dashboardStore.entity)) ||
+            (t.id === 'profile' &&
+              dashboardStore.entity === EntityType[0].value)
          "
        />
      </span>
@@ -295,6 +298,9 @@ function clickIcons(t: { id: string; content: string; name: string }) {
    case "trace":
      dashboardStore.addControl("Trace");
      break;
+    case "profile":
+      dashboardStore.addControl("Profile");
+      break;
    case "topology":
      dashboardStore.addControl("Topology");
      break;
--- a/src/views/dashboard/related/profile/Content.vue
+++ b/src/views/dashboard/related/profile/Content.vue
@@ -0,0 +1,83 @@
+<!-- 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 content">
+    <div class="list">
+      <TaskList />
+      <SegmentList />
+    </div>
+    <div class="item">
+      <SpanTree @loading="loadTrees" />
+      <div class="thread-stack">
+        <StackTable
+          v-if="profileStore.analyzeTrees.length"
+          :data="profileStore.analyzeTrees"
+          :highlightTop="profileStore.highlightTop"
+        />
+        <div class="t-loading" v-show="loading">
+          <Icon :loading="true" iconName="spinner" size="middle" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import TaskList from "./components/TaskList.vue";
+import SegmentList from "./components/SegmentList.vue";
+import SpanTree from "./components/SpanTree.vue";
+import StackTable from "./components/Stack/Index.vue";
+import { useProfileStore } from "@/store/modules/profile";
+
+const loading = ref<boolean>(false);
+const profileStore = useProfileStore();
+
+function loadTrees(l: boolean) {
+  loading.value = l;
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  height: calc(100% - 30px);
+  width: 100%;
+}
+
+.item {
+  height: 100%;
+  width: calc(100% - 300px);
+}
+
+.list {
+  width: 300px;
+  height: 100%;
+}
+
+.thread-stack {
+  padding: 5px 12px;
+  height: calc(50% - 50px);
+  overflow: auto;
+  width: 100%;
+}
+
+.t-loading {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 70px;
+  margin-top: 40px;
+  line-height: 88px;
+  overflow: hidden;
+}
+</style>
--- a/src/views/dashboard/related/profile/Header.vue
+++ b/src/views/dashboard/related/profile/Header.vue
@@ -0,0 +1,117 @@
+<!-- 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 header">
+    <!-- <div class="mr-10" v-if="dashboardStore.entity==='All'">
+      <span class="grey mr-5">{{ t("service") }}:</span>
+      <Selector
+        size="small"
+        :value="service.value"
+        :options="profileStore.services"
+        placeholder="Select a service"
+        @change="changeService"
+      />
+    </div> -->
+    <div class="mr-10">
+      <span class="grey mr-5">{{ t("endpointName") }}:</span>
+      <el-input v-model="endpointName" class="name" />
+    </div>
+    <el-button
+      class="search-btn"
+      size="small"
+      type="primary"
+      @click="searchTasks"
+    >
+      {{ t("search") }}
+    </el-button>
+    <el-button class="search-btn" size="small" @click="createTask">
+      {{ t("newTask") }}
+    </el-button>
+  </div>
+  <el-dialog
+    v-model="newTask"
+    :destroy-on-close="true"
+    fullscreen
+    @closed="newTask = false"
+  >
+    <NewTask @close="newTask = false" />
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useProfileStore } from "@/store/modules/profile";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
+import NewTask from "./components/NewTask.vue";
+
+const profileStore = useProfileStore();
+const selectorStore = useSelectorStore();
+const { t } = useI18n();
+// const service = ref<any>({});
+const endpointName = ref<string>("");
+const newTask = ref<boolean>(false);
+
+searchTasks();
+// getServices();
+
+// async function getServices() {
+//   const res = await profileStore.getServices(dashboardStore.layerId);
+
+//   if (res.errors) {
+//     ElMessage.error(res.errors);
+//     return;
+//   }
+//   service.value = profileStore.services[0];
+//   searchTasks();
+// }
+
+// function changeService(opt: any[]) {
+//   service.value = opt[0];
+// }
+async function searchTasks() {
+  profileStore.setConditions({
+    serviceId: selectorStore.currentService.id,
+    endpointName: endpointName.value,
+  });
+  const res = await profileStore.getTaskList();
+
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+
+function createTask() {
+  newTask.value = true;
+}
+
+watch(
+  () => selectorStore.currentService,
+  () => {
+    searchTasks();
+  }
+);
+</script>
+<style lang="scss" scoped>
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.name {
+  width: 270px;
+}
+</style>
--- a/src/views/dashboard/related/profile/components/NewTask.vue
+++ b/src/views/dashboard/related/profile/components/NewTask.vue
@@ -0,0 +1,171 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+
+<template>
+  <div class="profile-task">
+    <div>
+      <div class="label">{{ t("endpointName") }}</div>
+      <el-input v-model="endpointName" class="profile-input" />
+    </div>
+    <div>
+      <div class="label">{{ t("monitorTime") }}</div>
+      <div>
+        <Radio
+          class="mb-5"
+          :value="monitorTime"
+          :options="InitTaskField.monitorTimeEn"
+          @change="changeMonitorTime"
+        />
+        <span class="date">
+          <TimePicker
+            :value="time"
+            position="bottom"
+            format="YYYY-MM-DD HH:mm:ss"
+            @input="changeTimeRange"
+          />
+        </span>
+      </div>
+    </div>
+    <div>
+      <div class="label">{{ t("monitorDuration") }}</div>
+      <Radio
+        class="mb-5"
+        :value="monitorDuration"
+        :options="InitTaskField.monitorDuration"
+        @change="changeMonitorDuration"
+      />
+    </div>
+    <div>
+      <div class="label">{{ t("minThreshold") }} (ms)</div>
+      <el-input-number class="profile-input" :min="0" v-model="minThreshold" />
+    </div>
+    <div>
+      <div class="label">{{ t("dumpPeriod") }}</div>
+      <Radio
+        class="mb-5"
+        :value="dumpPeriod"
+        :options="InitTaskField.dumpPeriod"
+        @change="changeDumpPeriod"
+      />
+    </div>
+    <div>
+      <div class="label">{{ t("maxSamplingCount") }}</div>
+      <Selector
+        size="small"
+        :value="maxSamplingCount"
+        :options="InitTaskField.maxSamplingCount"
+        placeholder="Select a data"
+        @change="changeMaxSamplingCount"
+        class="profile-input"
+      />
+    </div>
+    <div>
+      <el-button @click="createTask" type="primary" class="create-task-btn">
+        {{ t("createTask") }}
+      </el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useProfileStore } from "@/store/modules/profile";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { ElMessage } from "element-plus";
+import { InitTaskField } from "./data";
+/* global defineEmits */
+const emits = defineEmits(["close"]);
+const profileStore = useProfileStore();
+const selectorStore = useSelectorStore();
+const appStore = useAppStoreWithOut();
+const { t } = useI18n();
+const endpointName = ref<string>("");
+const monitorTime = ref<string>(InitTaskField.monitorTimeEn[0].value);
+const monitorDuration = ref<string>(InitTaskField.monitorDuration[0].value);
+const time = ref<Date>(appStore.durationRow.start);
+const minThreshold = ref<number>(0);
+const dumpPeriod = ref<string>(InitTaskField.dumpPeriod[0].value);
+const maxSamplingCount = ref<string>(InitTaskField.maxSamplingCount[0].value);
+
+function changeMonitorTime(opt: string) {
+  monitorTime.value = opt;
+}
+
+function changeMonitorDuration(val: string) {
+  monitorDuration.value = val;
+}
+
+function changeDumpPeriod(val: string) {
+  dumpPeriod.value = val;
+}
+
+function changeMaxSamplingCount(opt: any[]) {
+  maxSamplingCount.value = opt[0].value;
+}
+
+async function createTask() {
+  emits("close");
+  const date =
+    monitorTime.value === "0" ? appStore.durationRow.start : time.value;
+  const params = {
+    serviceId: selectorStore.currentService.id,
+    endpointName: endpointName.value,
+    startTime: date.getTime(),
+    duration: Number(monitorDuration.value),
+    minDurationThreshold: Number(minThreshold.value),
+    dumpPeriod: Number(dumpPeriod.value),
+    maxSamplingCount: Number(maxSamplingCount.value),
+  };
+  const res = await profileStore.createTask(params);
+  if (res.errors) {
+    ElMessage.error(res.errors);
+    return;
+  }
+  const { tip } = res.data;
+  if (tip) {
+    ElMessage.error(tip);
+    return;
+  }
+  ElMessage.success("Task created successfully");
+}
+function changeTimeRange(val: Date) {
+  time.value = val;
+}
+</script>
+<style lang="scss" scoped>
+.profile-task {
+  margin: 0 auto;
+  width: 350px;
+}
+
+.date {
+  font-size: 12px;
+}
+
+.label {
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+.profile-input {
+  width: 300px;
+}
+
+.create-task-btn {
+  width: 300px;
+  margin-top: 50px;
+}
+</style>
--- a/src/views/dashboard/related/profile/components/SegmentList.vue
+++ b/src/views/dashboard/related/profile/components/SegmentList.vue
@@ -0,0 +1,156 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="profile-trace-wrapper profile-segment flex-v">
+    <div class="profile-t-tool flex-h">{{ t("sampledTraces") }}</div>
+    <div class="profile-t-wrapper">
+      <div class="no-data" v-show="!profileStore.segmentList.length">
+        {{ t("noData") }}
+      </div>
+      <table class="profile-t">
+        <tr
+          class="profile-tr cp"
+          v-for="(i, index) in profileStore.segmentList"
+          @click="selectTrace(i)"
+          :key="index"
+        >
+          <td
+            class="profile-td"
+            :class="{
+              selected: selectedKey == i.segmentId,
+            }"
+          >
+            <div
+              class="ell mb-5"
+              :class="{
+                blue: !i.isError,
+                red: i.isError,
+              }"
+            >
+              <span class="b">{{ i.endpointNames[0] }}</span>
+            </div>
+            <div class="grey ell sm">
+              <span class="tag mr-10 sm"> {{ i.duration }} ms </span>
+              {{ dateFormat(parseInt(i.start)) }}
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import dayjs from "dayjs";
+import { useI18n } from "vue-i18n";
+import { useProfileStore } from "@/store/modules/profile";
+import { Trace } from "@/types/trace";
+import { ElMessage } from "element-plus";
+
+const { t } = useI18n();
+const profileStore = useProfileStore();
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+const selectedKey = ref<string>("");
+
+async function selectTrace(item: Trace) {
+  profileStore.setCurrentSegment(item);
+  selectedKey.value = item.segmentId;
+  const res = await profileStore.getSegmentSpans({ segmentId: item.segmentId });
+
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+</script>
+<style lang="scss" scoped>
+.profile-trace-wrapper {
+  width: 300px;
+  height: 50%;
+  overflow: auto;
+
+  .no-data {
+    text-align: center;
+    margin-top: 10px;
+  }
+
+  .profile-t-wrapper {
+    overflow: auto;
+    flex-grow: 1;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .profile-t-loading {
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    height: 70px;
+    margin-top: 40px;
+    line-height: 88px;
+    overflow: hidden;
+
+    .icon {
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  .profile-t {
+    width: 100%;
+    border-spacing: 0;
+    table-layout: fixed;
+    flex-grow: 1;
+    position: relative;
+  }
+
+  .profile-tr {
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  .profile-td {
+    padding: 5px 10px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+
+    &.selected {
+      background-color: #ededed;
+    }
+  }
+
+  .profile-t-tool {
+    padding: 5px 10px;
+    font-weight: bold;
+    border-right: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    background: #f3f4f9;
+  }
+
+  .log-item {
+    margin-top: 20px;
+  }
+
+  .profile-btn {
+    color: #3d444f;
+    padding: 1px 3px;
+    border-radius: 2px;
+    font-size: 12px;
+  }
+}
+
+.profile-segment {
+  border-top: 1px solid rgba(0, 0, 0, 0.07);
+}
+</style>
--- a/src/views/dashboard/related/profile/components/SpanTree.vue
+++ b/src/views/dashboard/related/profile/components/SpanTree.vue
@@ -0,0 +1,173 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="profile-trace-dashboard" v-if="profileStore.currentSegment">
+    <div class="profile-trace-detail-wrapper">
+      <Selector
+        size="small"
+        :value="traceId || (traceIds[0] && traceIds[0].value) || ''"
+        :options="traceIds"
+        placeholder="Select a trace id"
+        @change="changeTraceId"
+        class="profile-trace-detail-ids mr-10"
+      />
+      <Selector
+        size="small"
+        :value="mode"
+        :options="ProfileMode"
+        placeholder="Select a mode"
+        @change="spanModeChange"
+        class="mr-10"
+      />
+      <el-button type="primary" size="small" @click="analyzeProfile()">
+        {{ t("analyze") }}
+      </el-button>
+    </div>
+    <Table
+      :data="profileStore.segmentSpans"
+      :traceId="
+        profileStore.currentSegment.traceIds &&
+        profileStore.currentSegment.traceIds[0]
+      "
+      :showBtnDetail="true"
+      headerType="profile"
+      @select="selectSpan"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import Table from "../../trace/components/Table/Index.vue";
+import { useProfileStore } from "@/store/modules/profile";
+import Selector from "@/components/Selector.vue";
+import { Span } from "@/types/trace";
+import { Option } from "@/types/app";
+import { ElMessage } from "element-plus";
+import { ProfileMode } from "./data";
+
+/* global defineEmits*/
+const emits = defineEmits(["loading"]);
+const { t } = useI18n();
+const profileStore = useProfileStore();
+const mode = ref<string>("include");
+const message = ref<string>("");
+const timeRange = ref<Array<{ start: number; end: number }>>([]);
+const traceId = ref<string>("");
+const traceIds = computed(() =>
+  (profileStore.currentSegment.traceIds || []).map((id: string) => ({
+    label: id,
+    value: id,
+  }))
+);
+
+function selectSpan(span: Span) {
+  profileStore.setCurrentSpan(span);
+}
+
+function spanModeChange(item: Option[]) {
+  mode.value = item[0].value;
+  updateTimeRange();
+}
+
+function changeTraceId(opt: Option[]) {
+  traceId.value = opt[0].value;
+}
+
+async function analyzeProfile() {
+  emits("loading", true);
+  updateTimeRange();
+  const res = await profileStore.getProfileAnalyze({
+    segmentId: profileStore.currentSegment.segmentId,
+    timeRanges: timeRange.value,
+  });
+  emits("loading", false);
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+  if (res.tip) {
+    message.value = res.tip;
+  }
+}
+
+function updateTimeRange() {
+  if (mode.value === "include") {
+    timeRange.value = [
+      {
+        start: profileStore.currentSpan.startTime,
+        end: profileStore.currentSpan.endTime,
+      },
+    ];
+  } else {
+    const { children, startTime, endTime } = profileStore.currentSpan;
+    let dateRange = [];
+
+    if (!children || !children.length) {
+      timeRange.value = [
+        {
+          start: this.currentSpan.startTime,
+          end: this.currentSpan.endTime,
+        },
+      ];
+      return;
+    }
+    for (const item of children) {
+      dateRange.push(
+        {
+          start: startTime,
+          end: item.startTime,
+        },
+        {
+          start: item.endTime,
+          end: endTime,
+        }
+      );
+    }
+    dateRange = dateRange.reduce((prev: any[], cur) => {
+      let isUpdate = false;
+      for (const item of prev) {
+        if (cur.start <= item.end && item.start <= cur.start) {
+          isUpdate = true;
+          item.start = item.start < cur.start ? cur.start : item.start;
+          item.end = item.end < cur.end ? item.end : cur.end;
+        }
+      }
+      if (!isUpdate) {
+        prev.push(cur);
+      }
+      return prev;
+    }, []);
+    timeRange.value = dateRange.filter((item: any) => item.start !== item.end);
+  }
+}
+</script>
+<style lang="scss" scoped>
+.profile-trace-dashboard {
+  padding: 5px;
+  flex-shrink: 0;
+  height: 50%;
+  overflow: auto;
+  width: 100%;
+}
+
+.profile-trace-detail-wrapper {
+  padding: 5px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.profile-trace-detail-ids {
+  width: 300px;
+}
+</style>
--- a/src/views/dashboard/related/profile/components/Stack/Container.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Container.vue
@@ -0,0 +1,128 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+
+<template>
+  <div class="profile">
+    <div class="profile-header">
+      <div class="thread" :style="`width: ${thread}px`">
+        Thread Stack
+        <span class="r cp dragger" ref="dragger">
+          <Icon iconName="settings_ethernet" />
+        </span>
+      </div>
+      <div class="self">Duration (ms)</div>
+      <div class="exec-ms">
+        Self Duration (ms)
+        <a
+          class="profile-set-btn"
+          @click="updateHighlightTop"
+          title="Highlight top 10 slow methods"
+          :style="{ color: highlightTop ? '#448dfe' : '#484b55' }"
+        >
+          top slow
+        </a>
+      </div>
+      <div class="dump-count">Dump Count</div>
+    </div>
+    <TableItem
+      :thread="thread"
+      v-for="(item, index) in tableData"
+      :data="item"
+      :key="'key' + index"
+    />
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useProfileStore } from "@/store/modules/profile";
+import { ref, onMounted } from "vue";
+import type { PropType } from "vue";
+import TableItem from "./Item.vue";
+
+/* global defineProps */
+defineProps({
+  tableData: { type: Array as PropType<any>, default: () => [] },
+  highlightTop: { type: Boolean, default: false },
+});
+const dragger = ref<any>(null);
+const thread = ref<number>(500);
+const profileStore = useProfileStore();
+
+onMounted(() => {
+  dragger.value.onmousedown = (event: any) => {
+    const diffX = event.clientX;
+    const copy = thread.value;
+    document.onmousemove = (documentEvent) => {
+      const moveX = documentEvent.clientX - diffX;
+      thread.value = copy + moveX;
+    };
+    document.onmouseup = () => {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    };
+  };
+});
+
+function updateHighlightTop() {
+  profileStore.setHighlightTop();
+}
+</script>
+<style lang="scss" scoped>
+@import "./profile.scss";
+
+.dragger {
+  float: right;
+}
+
+.profile {
+  font-size: 12px;
+  height: 100%;
+
+  .profile-set-btn {
+    font-size: 12px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    text-align: center;
+    width: 57px;
+    overflow: hidden;
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    position: absolute;
+    top: 4px;
+    right: 3px;
+    padding: 0 3px;
+  }
+}
+
+.profile-header {
+  white-space: nowrap;
+  user-select: none;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.profile-header div {
+  display: inline-block;
+  padding: 0 4px;
+  border-right: 1px dotted silver;
+  line-height: 30px;
+  background-color: #f3f4f9;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
--- a/src/views/dashboard/related/profile/components/Stack/Index.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Index.vue
@@ -0,0 +1,109 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+
+<template>
+  <div class="profile-detail-chart-table">
+    <Container :tableData="tableData" :highlightTop="highlightTop">
+      <div class="profile-tips" v-if="!tableData.length">{{ t("noData") }}</div>
+    </Container>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { ref, onMounted, watch } from "vue";
+import type { PropType } from "vue";
+import Container from "./Container.vue";
+
+const { t } = useI18n();
+/* global defineProps */
+const props = defineProps({
+  data: { type: Array as PropType<any>, default: () => [] },
+  highlightTop: { type: Boolean, default: false },
+});
+const tableData = ref<any>([]);
+
+onMounted(() => {
+  tableData.value = processTree();
+});
+function processTree() {
+  if (!props.data.length) {
+    return [];
+  }
+
+  const durationChildExcluded = props.data
+    .map((d: any) => {
+      return d.elements.map((item: any) => item.durationChildExcluded);
+    })
+    .flat(1);
+  function compare(val: number, val1: number) {
+    return val1 - val;
+  }
+  const topDur = durationChildExcluded
+    .sort(compare)
+    .filter((item: any, index: number) => index < 10 && item !== 0);
+  const trees = [];
+
+  for (const item of props.data) {
+    const newArr = sortArr(item.elements, topDur);
+    trees.push(...newArr);
+  }
+
+  return trees;
+}
+
+function sortArr(arr: any[], topDur: any) {
+  const copyArr = JSON.parse(JSON.stringify(arr));
+  const obj: any = {};
+  const res = [];
+  for (const item of copyArr) {
+    obj[item.id] = item;
+  }
+  for (const item of copyArr) {
+    item.topDur =
+      topDur.includes(item.durationChildExcluded) && props.highlightTop;
+    if (item.parentId === "0") {
+      res.push(item);
+    }
+    for (const key in obj) {
+      if (item.id === obj[key].parentId) {
+        if (item.children) {
+          item.children.push(obj[key]);
+        } else {
+          item.children = [obj[key]];
+        }
+      }
+    }
+  }
+
+  return res;
+}
+
+watch(
+  () => [props.data, props.highlightTop],
+  () => {
+    if (!props.data.length) {
+      tableData.value = [];
+      return;
+    }
+    tableData.value = processTree();
+  }
+);
+</script>
+<style lang="scss" scoped>
+.profile-detail-chart-table {
+  height: 100%;
+  overflow: auto;
+}
+</style>
--- a/src/views/dashboard/related/profile/components/Stack/Item.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Item.vue
@@ -0,0 +1,153 @@
+<!-- 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>
+    <div
+      :class="['profile-item', 'level' + data.parentId]"
+      :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }"
+    >
+      <div
+        :class="['thread', 'level' + data.parentId]"
+        :style="{
+          'text-indent': data.parentId * 4 + 'px',
+          width: `${thread}px`,
+        }"
+      >
+        <Icon
+          class="icon vm cp trans"
+          :style="!displayChildren ? 'transform: rotate(-90deg);' : ''"
+          @click.stop="toggle"
+          v-if="data.children && data.children.length"
+          iconName="arrow-down"
+        />
+        <el-tooltip :content="data.codeSignature" placement="bottom">
+          <span>
+            {{ data.codeSignature }}
+          </span>
+        </el-tooltip>
+      </div>
+      <div class="self">{{ data.duration }}</div>
+      <div class="exec-ms">{{ data.durationChildExcluded }}</div>
+      <div class="dump-count">{{ data.count }}</div>
+    </div>
+    <div
+      v-show="data.children && data.children.length && displayChildren"
+      class="children-trace"
+    >
+      <table-item
+        :thread="thread"
+        v-for="(item, index) in data.children"
+        :key="index"
+        :data="item"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { ref, defineComponent, toRefs } from "vue";
+import type { PropType } from "vue";
+
+const props = {
+  data: { type: Object as PropType<any>, default: () => ({}) },
+  thread: { type: Number, default: 0 },
+};
+export default defineComponent({
+  name: "TableItem",
+  props,
+  setup(props) {
+    const displayChildren = ref<boolean>(true);
+    function toggle() {
+      displayChildren.value = !displayChildren.value;
+    }
+    return { toggle, displayChildren, ...toRefs(props) };
+  },
+});
+</script>
+<style lang="scss" scoped>
+@import "./profile.scss";
+
+.profile-item.level0 {
+  background: rgba(0, 0, 0, 0.04);
+  color: #448dfe;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: #448dfe;
+  }
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 5px;
+    height: 100%;
+    background: #448dfe;
+    left: 0;
+  }
+}
+
+.profile-item {
+  position: relative;
+  white-space: nowrap;
+}
+
+.profile-item.selected {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.profile-item:not(.level0):hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.profile-item > div {
+  display: inline-block;
+  padding: 0 5px;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  overflow: hidden;
+  line-height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-item > div.method {
+  padding-left: 10px;
+}
+
+.profile-item div.exec-percent {
+  width: 10%;
+  height: 30px;
+  padding: 0 8px;
+
+  .outer-progress_bar {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: rgb(63, 177, 227);
+    position: relative;
+    margin-top: 11px;
+    border: none;
+  }
+
+  .inner-progress_bar {
+    position: absolute;
+    background: rgb(110, 64, 170);
+    height: 4px;
+    border-radius: 2px;
+    left: 0;
+    border: none;
+    top: 1px;
+  }
+}
+</style>
--- a/src/views/dashboard/related/profile/components/Stack/profile.scss
+++ b/src/views/dashboard/related/profile/components/Stack/profile.scss
@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+.dump-count {
+  width: 100px;
+}
+
+.exec-ms {
+  width: 200px;
+  position: relative;
+}
+
+.self {
+  width: 100px;
+}
--- a/src/views/dashboard/related/profile/components/TaskList.vue
+++ b/src/views/dashboard/related/profile/components/TaskList.vue
@@ -0,0 +1,246 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="profile-task-list flex-v">
+    <div class="profile-task-wrapper flex-v">
+      <div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
+      <div class="profile-t-wrapper">
+        <div class="no-data" v-show="!profileStore.taskList.length">
+          {{ t("noData") }}
+        </div>
+        <table class="profile-t">
+          <tr
+            class="profile-tr cp"
+            v-for="(i, index) in profileStore.taskList"
+            @click="changeTask(i)"
+            :key="index"
+          >
+            <td
+              class="profile-td"
+              :class="{
+                selected: selectedTask.id === i.id,
+              }"
+            >
+              <div class="ell">
+                <span>{{ i.endpointName }}</span>
+                <a class="profile-btn r" @click="viewTask($event, i)">
+                  <Icon iconName="library_books" size="middle" />
+                </a>
+              </div>
+              <div class="grey ell sm">
+                <span class="mr-10 sm">{{ dateFormat(i.startTime) }}</span>
+                <span class="mr-10 sm">
+                  {{ dateFormat(i.startTime + i.duration * 60 * 1000) }}
+                </span>
+              </div>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+  <el-dialog
+    v-model="viewDetail"
+    :destroy-on-close="true"
+    fullscreen
+    @closed="viewDetail = false"
+  >
+    <div class="profile-detail flex-v">
+      <div>
+        <h5 class="mb-10">{{ t("task") }}.</h5>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("service") }}:</span>
+          <span class="g-sm-8 wba">{{ service }}</span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("endpoint") }}:</span>
+          <span class="g-sm-8 wba">{{ selectedTask.endpointName }}</span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
+          <span class="g-sm-8 wba">
+            {{ dateFormat(selectedTask.startTime) }}
+          </span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span
+          ><span class="g-sm-8 wba">{{ selectedTask.duration }} min</span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("minThreshold") }}:</span>
+          <span class="g-sm-8 wba">
+            {{ selectedTask.minDurationThreshold }} ms
+          </span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("dumpPeriod") }}:</span>
+          <span class="g-sm-8 wba">{{ selectedTask.dumpPeriod }}</span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("maxSamplingCount") }}:</span>
+          <span class="g-sm-8 wba">{{ selectedTask.maxSamplingCount }}</span>
+        </div>
+      </div>
+      <div>
+        <h5
+          class="mb-10 mt-10"
+          v-show="selectedTask.logs && selectedTask.logs.length"
+        >
+          {{ t("logs") }}.
+        </h5>
+        <div
+          class="log-item"
+          v-for="(i, index) in Object.keys(instanceLogs)"
+          :key="index"
+        >
+          <div class="mb-10 sm">
+            <span class="mr-10 grey">{{ t("instance") }}:</span>
+            <span>{{ i }}</span>
+          </div>
+          <div v-for="(d, index) in instanceLogs[i]" :key="index">
+            <span class="mr-10 grey">{{ t("operationType") }}:</span>
+            <span class="mr-20">{{ d.operationType }}</span>
+            <span class="mr-10 grey">{{ t("time") }}:</span>
+            <span>{{ dateFormat(d.operationTime) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import dayjs from "dayjs";
+import { useI18n } from "vue-i18n";
+import { useProfileStore } from "@/store/modules/profile";
+import { TaskLog, TaskListItem } from "@/types/profile";
+import { ElMessage } from "element-plus";
+
+const { t } = useI18n();
+const profileStore = useProfileStore();
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+const viewDetail = ref<boolean>(false);
+const service = ref<string>("");
+const selectedTask = ref<TaskListItem | Record<string, never>>({});
+const instanceLogs = ref<TaskLog | any>({});
+
+async function changeTask(item: TaskListItem) {
+  selectedTask.value = item;
+  const res = await profileStore.getSegmentList({ taskID: item.id });
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+
+async function viewTask(e: Event, item: TaskListItem) {
+  window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
+  viewDetail.value = true;
+  selectedTask.value = item;
+  service.value = (
+    profileStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}
+  ).label;
+  const res = await profileStore.getTaskLogs({ taskID: item.id });
+
+  if (res.errors) {
+    ElMessage.error(res.errors);
+    return;
+  }
+  item.logs = profileStore.taskLogs;
+  instanceLogs.value = {};
+  for (const d of item.logs) {
+    if (instanceLogs.value[d.instanceName]) {
+      instanceLogs.value[d.instanceName].push({
+        operationType: d.operationType,
+        operationTime: d.operationTime,
+      });
+    } else {
+      instanceLogs.value[d.instanceName] = [
+        { operationType: d.operationType, operationTime: d.operationTime },
+      ];
+    }
+  }
+  selectedTask.value = item;
+}
+</script>
+<style lang="scss" scoped>
+.profile-task-list {
+  width: 300px;
+  height: calc((100% - 60px) / 2);
+  overflow: auto;
+}
+
+.item span {
+  height: 21px;
+}
+
+.profile-td {
+  padding: 5px 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+
+  &.selected {
+    background-color: #ededed;
+  }
+}
+
+.no-data {
+  text-align: center;
+  margin-top: 10px;
+}
+
+.profile-t-wrapper {
+  overflow: auto;
+  flex-grow: 1;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.profile-t {
+  width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  flex-grow: 1;
+  position: relative;
+}
+
+.profile-tr {
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+}
+
+.profile-segment {
+  border-top: 1px solid rgba(0, 0, 0, 0.07);
+}
+
+.profile-t-tool {
+  padding: 5px 10px;
+  font-weight: bold;
+  border-right: 1px solid rgba(0, 0, 0, 0.07);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+  background: #f3f4f9;
+}
+
+.log-item {
+  margin-top: 20px;
+}
+
+.profile-btn {
+  color: #3d444f;
+  padding: 1px 3px;
+  border-radius: 2px;
+  font-size: 12px;
+  float: right;
+}
+</style>
--- a/src/views/dashboard/related/profile/components/data.ts
+++ b/src/views/dashboard/related/profile/components/data.ts
@@ -0,0 +1,63 @@
+/**
+ * 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 ProfileMode: any[] = [
+  { label: "Include Children", value: "include" },
+  { label: "Exclude Children", value: "exclude" },
+];
+export const NewTaskField = {
+  service: { key: "", label: "None" },
+  monitorTime: { key: "0", label: "monitor now" },
+  monitorDuration: { key: 5, label: "5 min" },
+  minThreshold: 0,
+  dumpPeriod: { key: 10, label: "10ms" },
+  endpointName: "",
+  maxSamplingCount: { key: 5, label: "5" },
+};
+
+export const InitTaskField = {
+  serviceSource: [{ key: "", label: "None" }],
+  monitorTimeEn: [
+    { value: "0", label: "monitor now" },
+    { value: "1", label: "set start time" },
+  ],
+  monitorTimeCn: [
+    { value: "0", label: "此刻" },
+    { value: "1", label: "设置时间" },
+  ],
+  monitorDuration: [
+    { value: "5", label: "5 min" },
+    { value: "10", label: "10 min" },
+    { value: "15", label: "15 min" },
+  ],
+  dumpPeriod: [
+    { value: "10", label: "10 ms" },
+    { value: "20", label: "20 ms" },
+    { value: "50", label: "50 ms" },
+    { value: "100", label: "100 ms" },
+  ],
+  maxSamplingCount: [
+    { value: "1", label: "1" },
+    { value: "2", label: "2" },
+    { value: "3", label: "3" },
+    { value: "4", label: "4" },
+    { value: "5", label: "5" },
+    { value: "6", label: "6" },
+    { value: "7", label: "7" },
+    { value: "8", label: "8" },
+    { value: "9", label: "9" },
+  ],
+};
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -123,14 +123,16 @@ limitations under the License. -->
      </div>
    </div>
    <div class="no-data" v-else>{{ t("noData") }}</div>
-    <component
-      v-if="traceStore.currentTrace.endpointNames"
-      :is="displayMode"
-      :data="traceStore.traceSpans"
-      :traceId="traceStore.currentTrace.traceIds[0].value"
-      :showBtnDetail="false"
-      HeaderType="trace"
-    />
+    <div class="trace-chart">
+      <component
+        v-if="traceStore.currentTrace.endpointNames"
+        :is="displayMode"
+        :data="traceStore.traceSpans"
+        :traceId="traceStore.currentTrace.traceIds[0].value"
+        :showBtnDetail="false"
+        HeaderType="trace"
+      />
+    </div>
  </div>
 </template>
 <script lang="ts">
@@ -227,6 +229,10 @@ export default defineComponent({
  overflow: hidden;
 }

+.trace-chart {
+  height: 100%;
+}
+
 .trace-detail-wrapper {
  font-size: 12px;
  padding: 5px 10px;
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -129,7 +129,7 @@ async function queryTraces() {
  }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .trace-t-tool {
  background-color: rgba(196, 200, 225, 0.2);
  justify-content: space-between;
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -15,45 +15,45 @@ limitations under the License. -->
 <template>
  <div>
    <h5 class="mb-15">{{ t("tags") }}.</h5>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
      <span class="g-sm-4 grey">{{ t("service") }}:</span>
      <span class="g-sm-8 wba">{{ currentSpan.serviceCode }}</span>
    </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
      <span class="g-sm-4 grey">{{ t("instance") }}:</span>
      <span class="g-sm-8 wba">{{ currentSpan.serviceInstanceName }}</span>
    </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
      <span class="g-sm-4 grey">{{ t("endpoint") }}:</span>
      <span class="g-sm-8 wba">{{ currentSpan.label }}</span>
    </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
      <span class="g-sm-4 grey">{{ t("spanType") }}:</span>
      <span class="g-sm-8 wba">{{ currentSpan.type }}</span>
    </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
      <span class="g-sm-4 grey">{{ t("component") }}:</span>
      <span class="g-sm-8 wba">{{ currentSpan.component }}</span>
    </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
      <span class="g-sm-4 grey">Peer:</span>
      <span class="g-sm-8 wba">{{ currentSpan.peer || "No Peer" }}</span>
    </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
      <span class="g-sm-4 grey">{{ t("error") }}:</span>
      <span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
    </div>
-    <div class="mb-10 clear" v-for="i in currentSpan.tags" :key="i.key">
+    <div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">
      <span class="g-sm-4 grey">{{ i.key }}:</span>
      <span class="g-sm-8 wba">
        {{ i.value }}
-        <svg
+        <span
          v-if="i.key === 'db.statement'"
-          class="icon vm grey link-hover cp ml-5"
+          class="grey link-hover cp ml-5"
          @click="copy(i.value)"
        >
-          <use xlink:href="#review-list"></use>
-        </svg>
+          <Icon iconName="review-list" />
+        </span>
      </span>
    </div>
    <h5 class="mb-10" v-if="currentSpan.logs" v-show="currentSpan.logs.length">
@@ -71,19 +71,15 @@ limitations under the License. -->
            class="r rk-sidebox-magnify"
            @click="showCurrentSpanDetail(_i.value)"
          >
-            <svg class="icon">
-              <use xlink:href="#magnify"></use>
-            </svg>
+            <Icon iconName="magnify" />
          </span>
        </div>
        <pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
      </div>
    </div>
-    <div @click="getTaceLogs()">
-      <el-button class="popup-btn" type="primary">
-        {{ t("relatedTraceLogs") }}
-      </el-button>
-    </div>
+    <el-button class="popup-btn" type="primary" @click="getTaceLogs">
+      {{ t("relatedTraceLogs") }}
+    </el-button>
  </div>
  <el-dialog
    v-model="showRelatedLogs"
@@ -161,4 +157,16 @@ function showCurrentSpanDetail(text: string) {
  width: 100%;
  text-align: center;
 }
+
+.item span {
+  height: 21px;
+}
+
+.link-hover {
+  cursor: pointer;
+}
+
+.link-hover:hover {
+  color: #448dfe;
+}
 </style>
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@@ -88,7 +88,7 @@ function downloadTrace() {
 .charts {
  overflow: auto;
  padding: 10px;
-  height: calc(100% - 95px);
+  height: 100%;
  width: 100%;
 }

--- a/src/views/dashboard/related/trace/components/Table/Index.vue
+++ b/src/views/dashboard/related/trace/components/Table/Index.vue
@@ -20,7 +20,8 @@ limitations under the License. -->
    <TableContainer
      :tableData="tableData"
      type="table"
-      :HeaderType="HeaderType"
+      :headerType="headerType"
+      @select="handleSelectSpan"
    >
      <div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
    </TableContainer>
@@ -31,27 +32,26 @@ import { ref, watch, onMounted } from "vue";
 import type { PropType } from "vue";
 import TableContainer from "./TableContainer.vue";
 import traceTable from "../../utils/trace-table";
+import { Span } from "@/types/trace";

 /* global defineProps, defineEmits */
 const props = defineProps({
  data: { type: Array as PropType<any>, default: () => [] },
  traceId: { type: String, default: "" },
  showBtnDetail: { type: Boolean, default: false },
-  HeaderType: { type: String, default: "" },
+  headerType: { type: String, default: "" },
 });
 const emit = defineEmits(["select", "view", "load"]);
 const loading = ref<boolean>(true);
 const tableData = ref<any>([]);
 const showDetail = ref<boolean>(false);
-const currentSpan = ref<any[]>([]);
+const currentSpan = ref<Span | any>({});

 onMounted(() => {
  tableData.value = formatData(
    traceTable.changeTree(props.data, props.traceId)
  );
  loading.value = false;
-  emit("select", handleSelectSpan);
-  emit("view", handleViewSpan);
  emit("load", () => {
    loading.value = true;
  });
@@ -69,7 +69,7 @@ function formatData(arr: any[], level = 1, totalExec?: number) {
  return arr;
 }

-function handleSelectSpan(data: any[]) {
+function handleSelectSpan(data: Span) {
  currentSpan.value = data;
  if (!props.showBtnDetail) {
    showDetail.value = true;
@@ -77,10 +77,6 @@ function handleSelectSpan(data: any[]) {
  emit("select", data);
 }

-function handleViewSpan() {
-  showDetail.value = true;
-}
-
 watch(
  () => props.data,
  () => {
@@ -109,8 +105,7 @@ watch(
 }

 .trace-table {
-  padding: 10px;
-  height: calc(100% - 95px);
+  height: 100%;
  width: 100%;
 }
 </style>
--- a/src/views/dashboard/related/trace/components/Table/TableContainer.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
@@ -30,7 +30,7 @@ limitations under the License. -->
    </div>
    <div class="trace-header" v-else>
      <div class="method" :style="`width: ${method}px`">
-        <span class="r cp" ref="dragger">
+        <span class="cp dragger" ref="dragger">
          <Icon iconName="settings_ethernet" size="sm" />
        </span>
        {{ headerData[0].value }}
@@ -43,12 +43,14 @@ limitations under the License. -->
        {{ item.value }}
      </div>
    </div>
-    <table-item
+    <TableItem
      :method="method"
      v-for="(item, index) in tableData"
      :data="item"
      :key="'key' + index"
      :type="type"
+      :headerType="headerType"
+      @select="selectItem"
    />
    <slot></slot>
  </div>
@@ -56,21 +58,24 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
 import type { PropType } from "vue";
+import { Span } from "@/types/trace";
 import TableItem from "./TableItem.vue";
 import { ProfileConstant, TraceConstant, StatisticsConstant } from "./data";

-/* global defineProps, Nullable */
+/* global defineProps, Nullable, defineEmits */
 const props = defineProps({
  tableData: { type: Array as PropType<any>, default: () => [] },
  type: { type: String, default: "" },
-  HeaderType: { type: String, default: "" },
+  headerType: { type: String, default: "" },
 });
+const emits = defineEmits(["select"]);
 const method = ref<number>(300);
 const componentKey = ref<number>(300);
 const flag = ref<boolean>(true);
 const dragger = ref<Nullable<HTMLSpanElement>>(null);
 let headerData: any[] = TraceConstant;
-if (props.HeaderType === "profile") {
+
+if (props.headerType === "profile") {
  headerData = ProfileConstant;
 }
 if (props.type === "statistics") {
@@ -94,6 +99,9 @@ onMounted(() => {
    };
  };
 });
+function selectItem(span: Span) {
+  emits("select", span);
+}
 function sortStatistics(key: string) {
  const element = props.tableData;
  for (let i = 0; i < element.length; i++) {
@@ -150,6 +158,10 @@ function sortStatistics(key: string) {
  width: 100%;
 }

+.dragger {
+  float: right;
+}
+
 .trace-header {
  white-space: nowrap;
  user-select: none;
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -15,7 +15,7 @@ limitations under the License. -->

 <template>
  <div v-if="type === 'statistics'">
-    <div :class="['trace-item']" ref="traceItem">
+    <div class="trace-item">
      <div :class="['method']">
        <el-tooltip :content="data.groupRef.endpointName" placement="bottom">
          <span>
@@ -49,13 +49,12 @@ limitations under the License. -->
  </div>
  <div v-else>
    <div
-      @click="viewSpanDetail"
+      @click="selectSpan"
      :class="[
        'trace-item',
        'level' + (data.level - 1),
        { 'trace-item-error': data.isError },
      ]"
-      ref="traceItem"
    >
      <div
        :class="['method', 'level' + (data.level - 1)]"
@@ -106,7 +105,7 @@ limitations under the License. -->
          <span>{{ data.serviceCode }}</span>
        </el-tooltip>
      </div>
-      <div class="application" v-show="type === 'profile'">
+      <div class="application" v-show="headerType === 'profile'">
        <span @click="viewSpanDetail">{{ t("view") }}</span>
      </div>
    </div>
@@ -120,6 +119,8 @@ limitations under the License. -->
        :key="index"
        :data="child"
        :type="type"
+        :headerType="headerType"
+        @select="selectedItem(child)"
      />
    </div>
    <el-dialog
@@ -143,6 +144,7 @@ const props = {
  data: { type: Object as PropType<any>, default: () => ({}) },
  method: { type: Number, default: 0 },
  type: { type: String, default: "" },
+  headerType: { type: String, default: "" },
 };
 export default defineComponent({
  name: "TableItem",
@@ -154,7 +156,6 @@ export default defineComponent({
    const displayChildren = ref<boolean>(true);
    const showDetail = ref<boolean>(false);
    const { t } = useI18n();
-    const traceItem = ref<Nullable<HTMLDivElement>>(null);
    const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
      dayjs(date).format(pattern);
    const selfTime = computed(() => (props.data.dur ? props.data.dur : 0));
@@ -183,30 +184,38 @@ export default defineComponent({
    });

    function toggle() {
-      displayChildren.value = !this.displayChildren.value;
+      displayChildren.value = !displayChildren.value;
    }
-    function showSelectSpan() {
+    function showSelectSpan(dom: any) {
+      if (!dom) {
+        return;
+      }
      const items: any = document.querySelectorAll(".trace-item");
      for (const item of items) {
        item.style.background = "#fff";
      }
-      if (!traceItem.value) {
+      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")
+      );
+
+      emit("select", props.data);
+      if (props.headerType === "profile") {
+        showSelectSpan(dom);
        return;
      }
-      traceItem.value.style.background = "rgba(0, 0, 0, 0.1)";
-    }
-    function viewSpanDetail() {
-      showDetail.value = true;
-      showSelectSpan();
-      emit("select", props.data);
+      viewSpanDetail(dom);
    }

-    watch(
-      () => props.data,
-      () => {
-        showSelectSpan();
-      }
-    );
+    function selectedItem(data: any) {
+      emit("select", data);
+    }
+    function viewSpanDetail(dom: any) {
+      showSelectSpan(dom);
+      showDetail.value = true;
+    }
    return {
      displayChildren,
      outterPercent,
@@ -216,6 +225,8 @@ export default defineComponent({
      dateFormat,
      showSelectSpan,
      showDetail,
+      selectSpan,
+      selectedItem,
      t,
    };
  },
--- a/src/views/dashboard/related/trace/components/Tree.vue
+++ b/src/views/dashboard/related/trace/components/Tree.vue
@@ -86,7 +86,7 @@ function computedScale(i: number) {
  overflow: auto;
  padding: 10px;
  position: relative;
-  height: calc(100% - 95px);
+  height: 100%;
  width: 100%;
 }