feat: support Tabs in the widget visiable when MQE expressions (#353)

2025-10-15 04:09:14 +00:00 · 2023-12-20 17:58:00 +08:00
parent 0d82507a87
commit 001fa25a3b
26 changed files with 379 additions and 224 deletions
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -139,6 +139,7 @@ limitations under the License. -->
  import { saveFile, readFile } from "@/utils/file";
  import { EntityType } from "./data";
  import { isEmptyObject } from "@/utils/is";
+  import { WidgetType } from "@/views/dashboard/data";

  /*global Nullable*/
  const { t } = useI18n();
@@ -271,12 +272,23 @@ limitations under the License. -->
      if (!(child.metricConfig && child.metricConfig.length)) {
        delete child.metricConfig;
      }
-      if (child.type === "Tab") {
+      if (child.type === WidgetType.Tab) {
        for (const item of child.children || []) {
          optimizeTemplate(item.children);
        }
      }
-      if (["Trace", "Topology", "Tab", "Profile", "Ebpf", "Log"].includes(child.type)) {
+      if (
+        (
+          [
+            WidgetType.Trace,
+            WidgetType.Topology,
+            WidgetType.Tab,
+            WidgetType.Profile,
+            WidgetType.Ebpf,
+            WidgetType.Log,
+          ] as string[]
+        ).includes(child.type)
+      ) {
        delete child.widget;
      }
    }
--- a/src/views/dashboard/configuration/Tab.vue
+++ b/src/views/dashboard/configuration/Tab.vue
@@ -0,0 +1,110 @@
+<!-- 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="item">
+    <span class="label">{{ t("tabExpressions") }}</span>
+    <div class="mt-10" v-for="(child, index) in widgetTabs || []" :key="index">
+      <span class="name">{{ child.name }}</span>
+      <el-input class="input" size="small" v-model="expressions[child.name]" @change="changeExpression(child.name)" />
+    </div>
+  </div>
+  <div class="footer">
+    <el-button size="small" @click="cancelConfig">
+      {{ t("cancel") }}
+    </el-button>
+    <el-button size="small" type="primary" @click="applyConfig">
+      {{ t("apply") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { useI18n } from "vue-i18n";
+  import { reactive, computed } from "vue";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import { ElMessage } from "element-plus";
+  import { WidgetType, ListEntity } from "@/views/dashboard/data";
+
+  const { t } = useI18n();
+  const dashboardStore = useDashboardStore();
+  const originConfig = dashboardStore.selectedGrid;
+  const expressions = reactive<{ [key: string]: string }>({});
+  const widgetTabs = computed(() =>
+    (dashboardStore.selectedGrid.children || []).filter((child: any) =>
+      child.children.find(
+        (item: any) =>
+          item.type === WidgetType.Widget &&
+          !(Object.keys(ListEntity).includes(item.graph.type as string) && child.children.length === 1),
+      ),
+    ),
+  );
+
+  for (const child of originConfig.children || []) {
+    expressions[child.name] = child.expression || "";
+  }
+  function changeExpression(name: string) {
+    if (expressions[name] && !expressions[name].includes("is_present")) {
+      ElMessage.error("Only support the is_present function");
+      return;
+    }
+    const children = JSON.parse(JSON.stringify(dashboardStore.selectedGrid.children || []));
+
+    for (const item of children) {
+      if (item.name === name) {
+        item.expression = expressions[name];
+      }
+    }
+
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, children });
+  }
+  function applyConfig() {
+    dashboardStore.setConfigPanel(false);
+    dashboardStore.setConfigs(dashboardStore.selectedGrid);
+  }
+
+  function cancelConfig() {
+    dashboardStore.selectWidget(originConfig);
+    dashboardStore.setConfigPanel(false);
+  }
+</script>
+<style lang="scss" scoped>
+  .label {
+    font-size: 13px;
+    font-weight: 500;
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  .item {
+    margin-bottom: 10px;
+  }
+
+  .input {
+    width: 500px;
+  }
+
+  .footer {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    border-top: 1px solid $border-color-primary;
+    padding: 10px;
+    text-align: right;
+    width: 100%;
+    background-color: $theme-background;
+  }
+
+  .name {
+    width: 180px;
+    display: inline-block;
+  }
+</style>
--- a/src/views/dashboard/configuration/index.ts
+++ b/src/views/dashboard/configuration/index.ts
@@ -22,8 +22,10 @@ import Event from "./Event.vue";
 import TimeRange from "./TimeRange.vue";
 import ThirdPartyApp from "./ThirdPartyApp.vue";
 import ContinuousProfiling from "./ContinuousProfiling.vue";
+import Tab from "./Tab.vue";

 export default {
+  Tab,
  Text,
  Widget,
  Topology,
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -15,29 +15,41 @@ limitations under the License. -->
 <template>
  <div class="flex-h tab-header">
    <div class="tabs scroll_bar_style" @click="handleClick">
-      <span
-        v-for="(child, idx) in data.children || []"
-        :key="idx"
-        :class="{ active: activeTabIndex === idx }"
-        @click="clickTabs($event, idx)"
-      >
-        <input
-          @click="editTabName($event, idx)"
-          v-model="child.name"
-          placeholder="Please input"
-          class="tab-name"
-          :readonly="isNaN(editTabIndex) && !canEditTabName"
-          :class="{ view: !canEditTabName }"
+      <template v-for="(child, idx) in data.children || []">
+        <span
+          :key="idx"
+          :class="{ active: activeTabIndex === idx }"
+          @click="clickTabs($event, idx)"
+          v-if="child.enable !== false"
+        >
+          <input
+            @click="editTabName($event, idx)"
+            v-model="child.name"
+            placeholder="Please input"
+            class="tab-name"
+            :readonly="isNaN(editTabIndex) && !canEditTabName"
+            :class="{ view: !canEditTabName }"
+            :style="{ width: getStringWidth(child.name) + 'px' }"
+          />
+          <Icon
+            v-show="activeTabIndex === idx"
+            size="sm"
+            iconName="cancel"
+            @click="deleteTabItem($event, idx)"
+            v-if="dashboardStore.editMode && canEditTabName"
+          />
+        </span>
+      </template>
+      <template v-for="(child, idx) in data.children || []">
+        <span
+          :key="idx"
          :style="{ width: getStringWidth(child.name) + 'px' }"
-        />
-        <Icon
-          v-show="activeTabIndex === idx"
-          size="sm"
-          iconName="cancel"
-          @click="deleteTabItem($event, idx)"
-          v-if="dashboardStore.editMode && canEditTabName"
-        />
-      </span>
+          v-if="child.enable === false"
+          class="tab-diabled"
+        >
+          {{ child.name }}
+        </span>
+      </template>
      <span class="tab-icons">
        <el-tooltip content="Copy Link" placement="bottom">
          <i @click="copyLink">
@@ -56,10 +68,13 @@ limitations under the License. -->
    <div class="operations" v-if="dashboardStore.editMode">
      <el-dropdown placement="bottom" trigger="click" :width="200">
        <span class="icon-operation">
-          <Icon iconName="ellipsis_v" size="middle" />
+          <Icon class="icon-tool" iconName="ellipsis_v" size="middle" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
+            <el-dropdown-item @click="editConfig">
+              <span>{{ t("edit") }}</span>
+            </el-dropdown-item>
            <el-dropdown-item @click="canEditTabName = true">
              <span class="edit-tab">{{ t("editTab") }}</span>
            </el-dropdown-item>
@@ -112,8 +127,9 @@ limitations under the License. -->
  import type { LayoutConfig } from "@/types/dashboard";
  import { useDashboardStore } from "@/store/modules/dashboard";
  import controls from "./tab";
-  import { dragIgnoreFrom } from "../data";
+  import { dragIgnoreFrom, WidgetType } from "../data";
  import copy from "@/utils/copy";
+  import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";

  const props = {
    data: {
@@ -137,13 +153,17 @@ limitations under the License. -->
      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);
+
+      dashboardStore.setActiveTabIndex(activeTabIndex.value);
      if (dashboardStore.layout[l].children.length) {
-        dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
+        const tab = dashboardStore.layout[l].children[activeTabIndex.value];
+        dashboardStore.setCurrentTabItems(
+          tab.enable === false ? [] : dashboardStore.layout[l].children[activeTabIndex.value].children,
+        );
        dashboardStore.setActiveTabIndex(activeTabIndex.value, props.data.i);
      }
+      queryExpressions();

      function clickTabs(e: Event, idx: number) {
        e.stopPropagation();
@@ -224,6 +244,53 @@ limitations under the License. -->
        copy(path);
      }
      document.body.addEventListener("click", handleClick, false);
+
+      function editConfig() {
+        dashboardStore.setConfigPanel(true);
+        dashboardStore.selectWidget(props.data);
+      }
+
+      async function queryExpressions() {
+        const tabsProps = props.data;
+        const metrics = [];
+        for (const child of tabsProps.children || []) {
+          child.expression && metrics.push(child.expression);
+        }
+        if (!metrics.length) {
+          return;
+        }
+        const params: { [key: string]: any } = (await useExpressionsQueryProcessor({ metrics })) || {};
+        for (const child of tabsProps.children || []) {
+          if (params.source[child.expression || ""]) {
+            child.enable =
+              !!Number(params.source[child.expression || ""]) &&
+              !!child.children.find((item: { type: string }) => item.type === WidgetType.Widget);
+          } else {
+            child.enable = true;
+          }
+        }
+
+        dashboardStore.setConfigs(tabsProps);
+        if (((props.data.children || [])[activeTabIndex.value] || {}).enable === false) {
+          const index = (props.data.children || []).findIndex((tab: any) => tab.enable !== false) || 0;
+          const items = ((props.data.children || [])[index] || {}).children;
+          dashboardStore.setCurrentTabItems(items || []);
+          dashboardStore.activeGridItem(0);
+          activeTabIndex.value = index;
+          dashboardStore.setActiveTabIndex(activeTabIndex.value);
+          needQuery.value = true;
+        }
+      }
+
+      watch(
+        () => (props.data.children || []).map((d: any) => d.expression),
+        (old: string[], data: string[]) => {
+          if (JSON.stringify(data) === JSON.stringify(old)) {
+            return;
+          }
+          queryExpressions();
+        },
+      );
      watch(
        () => dashboardStore.activedGridItem,
        (data) => {
@@ -266,6 +333,7 @@ limitations under the License. -->
        clickTabs,
        copyLink,
        getStringWidth,
+        editConfig,
        ...toRefs(props),
        activeTabWidget,
        dashboardStore,
@@ -288,6 +356,7 @@ limitations under the License. -->
    white-space: nowrap;
    overflow-y: hidden;
    padding: 0 10px;
+    display: inline-flex;

    span {
      display: inline-block;
@@ -310,6 +379,18 @@ limitations under the License. -->
      background-color: $theme-background;
    }

+    .tab-diabled {
+      max-width: 150px;
+      outline: none;
+      color: $disabled-color;
+      font-style: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 20px;
+      background-color: $theme-background;
+      cursor: not-allowed;
+    }
+
    .tab-icons {
      i {
        margin-right: 3px;
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -188,87 +188,104 @@ export const SortOrder = [
  { label: "DES", value: "DES" },
  { label: "ASC", value: "ASC" },
 ];
+export enum WidgetType {
+  Widget = "Widget",
+  Topology = "Topology",
+  Tab = "Tab",
+  Text = "Text",
+  TimeRange = "TimeRange",
+  Trace = "Trace",
+  Log = "Log",
+  Profile = "Profile",
+  Ebpf = "Ebpf",
+  DemandLog = "DemandLog",
+  Event = "Event",
+  NetworkProfiling = "NetworkProfiling",
+  ContinuousProfiling = "ContinuousProfiling",
+  ThirdPartyApp = "ThirdPartyApp",
+  TaskTimeline = "TaskTimeline",
+}
 export const AllTools = [
-  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tabs", 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: "assignment", content: "Add Log", id: "addLog" },
-  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+  { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+  { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+  { name: "library_books", content: "Add Text", id: WidgetType.Text },
+  { name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
+  { name: "merge", content: "Add Trace", id: WidgetType.Trace },
+  { name: "assignment", content: "Add Log", id: WidgetType.Log },
+  { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
 ];
 export const ServiceTools = [
-  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tabs", 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: "continuous_profiling", content: "Add Continuous Profiling", id: "addContinuousProfiling" },
-  { name: "assignment", content: "Add Log", id: "addLog" },
-  { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
-  { name: "event", content: "Add Event", id: "addEvent" },
-  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+  { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+  { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+  { name: "library_books", content: "Add Text", id: WidgetType.Text },
+  { name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
+  { name: "merge", content: "Add Trace", id: WidgetType.Trace },
+  { name: "timeline", content: "Add Trace Profiling", id: WidgetType.Profile },
+  { name: "insert_chart", content: "Add eBPF Profiling", id: WidgetType.Ebpf },
+  { name: "continuous_profiling", content: "Add Continuous Profiling", id: WidgetType.ContinuousProfiling },
+  { name: "assignment", content: "Add Log", id: WidgetType.Log },
+  { name: "demand", content: "Add On Demand Log", id: WidgetType.DemandLog },
+  { name: "event", content: "Add Event", id: WidgetType.Event },
+  { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
 ];
 export const InstanceTools = [
-  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
-  { 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" },
-  { name: "event", content: "Add Event", id: "addEvent" },
-  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+  { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+  { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+  { name: "library_books", content: "Add Text", id: WidgetType.Text },
+  { name: "merge", content: "Add Trace", id: WidgetType.Trace },
+  { name: "assignment", content: "Add Log", id: WidgetType.Log },
+  { name: "demand", content: "Add On Demand Log", id: WidgetType.DemandLog },
+  { name: "event", content: "Add Event", id: WidgetType.Event },
+  { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
  {
    name: "timeline",
    content: "Add Network Profiling",
-    id: "addNetworkProfiling",
+    id: WidgetType.NetworkProfiling,
  },
 ];
 export const EndpointTools = [
-  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tabs", 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: "assignment", content: "Add Log", id: "addLog" },
-  { name: "event", content: "Add Event", id: "c" },
-  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+  { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+  { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+  { name: "library_books", content: "Add Text", id: WidgetType.Text },
+  { name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
+  { name: "merge", content: "Add Trace", id: WidgetType.Trace },
+  { name: "assignment", content: "Add Log", id: WidgetType.Log },
+  { name: "event", content: "Add Event", id: WidgetType.Event },
+  { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
 ];
 export const ProcessTools = [
-  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
-  { name: "task_timeline", content: "Add Task Timeline", id: "addTaskTimeline" },
-  { name: "library_books", content: "Add Text", id: "addText" },
-  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+  { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+  { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+  { name: "task_timeline", content: "Add Task Timeline", id: WidgetType.TaskTimeline },
+  { name: "library_books", content: "Add Text", id: WidgetType.Text },
+  { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
 ];
 export const ProcessRelationTools = [
-  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
-  { name: "library_books", content: "Add Text", id: "addText" },
-  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+  { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+  { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+  { name: "library_books", content: "Add Text", id: WidgetType.Text },
+  { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
 ];
 export const ServiceRelationTools = [
-  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
-  { name: "library_books", content: "Add Text", id: "addText" },
-  { name: "device_hub", content: "Add Topology", id: "addTopology" },
-  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+  { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+  { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+  { name: "library_books", content: "Add Text", id: WidgetType.Text },
+  { name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
+  { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
 ];

 export const EndpointRelationTools = [
-  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
-  { name: "library_books", content: "Add Text", id: "addText" },
-  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+  { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+  { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+  { name: "library_books", content: "Add Text", id: WidgetType.Text },
+  { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
 ];
 export const InstanceRelationTools = [
-  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
-  { name: "library_books", content: "Add Text", id: "addText" },
-  { name: "device_hub", content: "Add Topology", id: "addTopology" },
-  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+  { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+  { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+  { name: "library_books", content: "Add Text", id: WidgetType.Text },
+  { name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
+  { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
 ];

 export const ScopeType = [
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -65,6 +65,7 @@ limitations under the License. -->
  import { TextColors } from "@/views/dashboard/data";
  import Trace from "@/views/dashboard/related/trace/Index.vue";
  import { QueryOrders, Status, RefIdTypes, ProtocolTypes, ExpressionResultType } from "../data";
+  import { WidgetType } from "@/views/dashboard/data";

  /*global defineProps */
  const props = defineProps({
@@ -90,7 +91,7 @@ limitations under the License. -->
  const { t } = useI18n();
  const showTrace = ref<boolean>(false);
  const traceOptions = ref<{ type: string; filters?: unknown }>({
-    type: "Trace",
+    type: WidgetType.Trace,
  });
  const refIdType = computed(
    () => (props.config.relatedTrace && props.config.relatedTrace.refIdType) || RefIdTypes[0].value,
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -58,7 +58,12 @@ limitations under the License. -->
      function clickGrid(item: LayoutConfig, event: Event) {
        dashboardStore.activeGridItem(item.i);
        dashboardStore.selectWidget(item);
-        if (item.type === "Tab" && (event.target as HTMLDivElement)?.className !== "tab-layout") {
+        if (
+          item.type === "Tab" &&
+          !["operations", "tab-layout"].includes((event.target as HTMLDivElement)?.className) &&
+          (event.target as HTMLDivElement)?.classList[2] !== "icon-tool" &&
+          (event.target as HTMLDivElement)?.nodeName !== "use"
+        ) {
          dashboardStore.setActiveTabIndex(0);
        }
      }
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -143,7 +143,8 @@ limitations under the License. -->
    ServiceRelationTools,
    ProcessTools,
    ProcessRelationTools,
-  } from "../data";
+    WidgetType,
+  } from "@/views/dashboard/data";
  import { useSelectorStore } from "@/store/modules/selectors";
  import { ElMessage } from "element-plus";
  import type { Option } from "@/types/app";
@@ -154,7 +155,7 @@ limitations under the License. -->
  const selectorStore = useSelectorStore();
  const appStore = useAppStoreWithOut();
  const params = useRoute().params;
-  const toolIcons = ref<{ name: string; content: string; id: string }[]>(AllTools);
+  const toolIcons = ref<{ name: string; content: string; id: WidgetType }[]>(AllTools);
  const loading = ref<boolean>(false);
  const states = reactive<{
    destService: string;
@@ -397,7 +398,7 @@ limitations under the License. -->
    loading.value = false;
  }

-  async function clickIcons(t: { id: string; content: string; name: string }) {
+  async function clickIcons(t: { id: WidgetType; content: string; name: string }) {
    if (dashboardStore.selectedGrid && dashboardStore.selectedGrid.type === "Tab") {
      setTabControls(t.id);
      return;
@@ -409,106 +410,20 @@ limitations under the License. -->
    setControls(t.id);
  }

-  function setTabControls(id: string) {
-    switch (id) {
-      case "addWidget":
-        dashboardStore.addTabControls("Widget");
-        break;
-      case "addTrace":
-        dashboardStore.addTabControls("Trace");
-        break;
-      case "addLog":
-        dashboardStore.addTabControls("Log");
-        break;
-      case "addProfile":
-        dashboardStore.addTabControls("Profile");
-        break;
-      case "addEbpf":
-        dashboardStore.addTabControls("Ebpf");
-        break;
-      case "addTopology":
-        dashboardStore.addTabControls("Topology");
-        break;
-      case "addText":
-        dashboardStore.addTabControls("Text");
-        break;
-      case "addDemandLog":
-        dashboardStore.addTabControls("DemandLog");
-        break;
-      case "addEvent":
-        dashboardStore.addTabControls("Event");
-        break;
-      case "addNetworkProfiling":
-        dashboardStore.addTabControls("NetworkProfiling");
-        break;
-      case "addContinuousProfiling":
-        dashboardStore.addTabControls("ContinuousProfiling");
-        break;
-      case "addTimeRange":
-        dashboardStore.addTabControls("TimeRange");
-        break;
-      case "addIframe":
-        dashboardStore.addTabControls("ThirdPartyApp");
-        break;
-      case "addTaskTimeline":
-        dashboardStore.addTabControls("TaskTimeline");
-        break;
-      default:
-        ElMessage.info("Don't support this control");
-        break;
+  function setTabControls(id: WidgetType) {
+    if (!WidgetType[id]) {
+      ElMessage.info("Don't support this control");
+      return;
    }
+    dashboardStore.addTabControls(id);
  }

-  function setControls(id: string) {
-    switch (id) {
-      case "addWidget":
-        dashboardStore.addControl("Widget");
-        break;
-      case "addTab":
-        dashboardStore.addControl("Tab");
-        break;
-      case "addTrace":
-        dashboardStore.addControl("Trace");
-        break;
-      case "addProfile":
-        dashboardStore.addControl("Profile");
-        break;
-      case "addEbpf":
-        dashboardStore.addControl("Ebpf");
-        break;
-      case "addLog":
-        dashboardStore.addControl("Log");
-        break;
-      case "addTopology":
-        dashboardStore.addControl("Topology");
-        break;
-      case "addText":
-        dashboardStore.addControl("Text");
-        break;
-      case "addDemandLog":
-        dashboardStore.addControl("DemandLog");
-        break;
-      case "addEvent":
-        dashboardStore.addControl("Event");
-        break;
-      case "addNetworkProfiling":
-        dashboardStore.addControl("NetworkProfiling");
-        break;
-      case "addContinuousProfiling":
-        dashboardStore.addControl("ContinuousProfiling");
-        break;
-      case "addTimeRange":
-        dashboardStore.addControl("TimeRange");
-        break;
-      case "addIframe":
-        dashboardStore.addControl("ThirdPartyApp");
-        break;
-      case "addTaskTimeline":
-        dashboardStore.addControl("TaskTimeline");
-        break;
-      default:
-        dashboardStore.addControl("Widget");
+  function setControls(id: WidgetType) {
+    if (!WidgetType[id]) {
+      ElMessage.info("Don't support this control");
+      return;
    }
+    dashboardStore.addControl(id);
  }

  async function fetchPods(type: string, serviceId: string, setPod: boolean, param?: { keyword?: string }) {
--- a/src/views/dashboard/related/event/Content.vue
+++ b/src/views/dashboard/related/event/Content.vue
@@ -29,6 +29,7 @@ limitations under the License. -->
  import { useAppStoreWithOut } from "@/store/modules/app";
  import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
  import getLocalTime from "@/utils/localtime";
+  import { WidgetType } from "@/views/dashboard/data";

  const eventStore = useEventStore();
  /*global defineProps, Nullable */
@@ -122,7 +123,9 @@ limitations under the License. -->
    }[],
    dashboard: LayoutConfig[],
  ) {
-    const widgets = dashboard.filter((d: { type: string }) => ["Trace", "Log"].includes(d.type));
+    const widgets = dashboard.filter((d: { type: string }) =>
+      ([WidgetType.Trace, WidgetType.Log] as string[]).includes(d.type),
+    );
    const index = items[0];
    const i = events[index - 1 || 0];
    for (const widget of widgets) {
--- a/src/views/dashboard/related/log/LogTable/LogService.vue
+++ b/src/views/dashboard/related/log/LogTable/LogService.vue
@@ -41,6 +41,7 @@ limitations under the License. -->
  import { useDashboardStore } from "@/store/modules/dashboard";
  import type { LayoutConfig } from "@/types/dashboard";
  import { dateFormat } from "@/utils/dateFormat";
+  import { WidgetType } from "@/views/dashboard/data";

  /*global defineProps, defineEmits, Recordable */
  const props = defineProps({
@@ -78,7 +79,7 @@ limitations under the License. -->
        traceId: id,
        id: props.data.serviceId || "",
      },
-      "Trace",
+      WidgetType.Trace,
    );
  }
 </script>
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -101,6 +101,7 @@ limitations under the License. -->
  import type { LayoutConfig } from "@/types/dashboard";
  import { dateFormat } from "@/utils/dateFormat";
  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { WidgetType } from "@/views/dashboard/data";

  const props = {
    serviceId: { type: String, default: "" },
@@ -145,7 +146,7 @@ limitations under the License. -->
            traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
            id: props.serviceId || undefined,
          },
-          "Log",
+          WidgetType.Log,
        );
      }
      return {