diff --git a/src/views/dashboard/controls/JbLog.vue b/src/views/dashboard/controls/JbLog.vue
new file mode 100644
index 00000000..ee80953c
--- /dev/null
+++ b/src/views/dashboard/controls/JbLog.vue
@@ -0,0 +1,103 @@
+<!-- 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">
+    </div> -->
+    <div class="log">
+      <List />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import List from "../related/log/List.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);
+}
+onMounted(() => {
+  dashboardStore.setLogTools(true);
+});
+onBeforeUnmount(() => {
+  dashboardStore.setLogTools(false);
+});
+</script>
+<style lang="scss" scoped>
+.log-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;
+  }
+}
+
+.log {
+  width: 100%;
+  overflow: auto;
+}
+</style>
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index 6bc13cad..fc601cec 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -13,91 +13,10 @@ 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">
-    </div> -->
-    <div class="log">
-      <List />
-    </div>
+  <div>
+    <JbLog />
   </div>
 </template>
 <script lang="ts" setup>
-import type { onBeforeUnmount, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
-import { useDashboardStore } from "@/store/modules/dashboard";
-import List from "../related/log/List.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);
-}
-onMounted(() => {
-  dashboardStore.setLogTools(true);
-});
-onBeforeUnmount(() => {
-  dashboardStore.setLogTools(false);
-});
+import JbLog from "./JbLog.vue";
 </script>
-<style lang="scss" scoped>
-.log-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;
-  }
-}
-
-.log {
-  width: 100%;
-  overflow: auto;
-}
-</style>
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 49a9eb69..4bd3e102 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -37,7 +37,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import {computed, onMounted, onBeforeUnmount } from "vue"
+import { computed, onMounted, onBeforeUnmount } from "vue";
 import TraceList from "../related/trace/TraceList.vue";
 import TraceDetail from "../related/trace/Detail.vue";
 import { useI18n } from "vue-i18n";