diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 5a4bc179..379b19fe 100644
--- 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 = [
@@ -349,21 +366,3 @@ export enum CallTypes {
   Server = "SERVER",
   Client = "CLIENT",
 }
-
-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",
-}
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 0eafe064..c8bff5fd 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -155,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;
@@ -398,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;
@@ -410,106 +410,20 @@ limitations under the License. -->
     setControls(t.id);
   }
 
-  function setTabControls(id: string) {
-    switch (id) {
-      case "addWidget":
-        dashboardStore.addTabControls(WidgetType.Widget);
-        break;
-      case "addTrace":
-        dashboardStore.addTabControls(WidgetType.Trace);
-        break;
-      case "addLog":
-        dashboardStore.addTabControls(WidgetType.Log);
-        break;
-      case "addProfile":
-        dashboardStore.addTabControls(WidgetType.Profile);
-        break;
-      case "addEbpf":
-        dashboardStore.addTabControls(WidgetType.Ebpf);
-        break;
-      case "addTopology":
-        dashboardStore.addTabControls(WidgetType.Topology);
-        break;
-      case "addText":
-        dashboardStore.addTabControls(WidgetType.Text);
-        break;
-      case "addDemandLog":
-        dashboardStore.addTabControls(WidgetType.DemandLog);
-        break;
-      case "addEvent":
-        dashboardStore.addTabControls(WidgetType.Event);
-        break;
-      case "addNetworkProfiling":
-        dashboardStore.addTabControls(WidgetType.NetworkProfiling);
-        break;
-      case "addContinuousProfiling":
-        dashboardStore.addTabControls(WidgetType.ContinuousProfiling);
-        break;
-      case "addTimeRange":
-        dashboardStore.addTabControls(WidgetType.TimeRange);
-        break;
-      case "addIframe":
-        dashboardStore.addTabControls(WidgetType.ThirdPartyApp);
-        break;
-      case "addTaskTimeline":
-        dashboardStore.addTabControls(WidgetType.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(WidgetType.Widget);
-        break;
-      case "addTab":
-        dashboardStore.addControl(WidgetType.Tab);
-        break;
-      case "addTrace":
-        dashboardStore.addControl(WidgetType.Trace);
-        break;
-      case "addProfile":
-        dashboardStore.addControl(WidgetType.Profile);
-        break;
-      case "addEbpf":
-        dashboardStore.addControl(WidgetType.Ebpf);
-        break;
-      case "addLog":
-        dashboardStore.addControl(WidgetType.Log);
-        break;
-      case "addTopology":
-        dashboardStore.addControl(WidgetType.Topology);
-        break;
-      case "addText":
-        dashboardStore.addControl(WidgetType.Text);
-        break;
-      case "addDemandLog":
-        dashboardStore.addControl(WidgetType.DemandLog);
-        break;
-      case "addEvent":
-        dashboardStore.addControl(WidgetType.Event);
-        break;
-      case "addNetworkProfiling":
-        dashboardStore.addControl(WidgetType.NetworkProfiling);
-        break;
-      case "addContinuousProfiling":
-        dashboardStore.addControl(WidgetType.ContinuousProfiling);
-        break;
-      case "addTimeRange":
-        dashboardStore.addControl(WidgetType.TimeRange);
-        break;
-      case "addIframe":
-        dashboardStore.addControl(WidgetType.ThirdPartyApp);
-        break;
-      case "addTaskTimeline":
-        dashboardStore.addControl(WidgetType.TaskTimeline);
-        break;
-      default:
-        dashboardStore.addControl(WidgetType.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 }) {