From 54a700bf19ec82263c2facc0f4970afb01d3013d Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Thu, 14 Aug 2025 18:25:40 +0800
Subject: [PATCH] refactor: optimize data types for widgets and dashboards
 (#490)

---
 src/__tests__/main.spec.ts                    |   4 +-
 src/components/Graph/Graph.vue                |  27 +++-
 src/components/Radio.vue                      |   2 +-
 src/graphql/base.ts                           |   3 +
 src/hooks/__tests__/useDuration.spec.ts       |  12 +-
 src/hooks/useAssociateProcessor.ts            |  13 +-
 src/hooks/useDashboardsSession.ts             |   8 +-
 src/hooks/useDuration.ts                      |   6 +-
 src/hooks/useExpressionsProcessor.ts          |  14 +-
 src/layout/components/NavBar.vue              |  22 +--
 src/store/data.ts                             |   2 +
 src/store/modules/__tests__/app.spec.ts       |   4 +-
 src/store/modules/alarm.ts                    |   2 +-
 src/store/modules/app.ts                      |  10 +-
 src/store/modules/async-profiling.ts          |  24 ++--
 src/store/modules/continous-profiling.ts      |  20 +--
 src/store/modules/dashboard.ts                |  16 +--
 src/store/modules/demand-log.ts               |   4 +-
 src/store/modules/ebpf.ts                     |  16 +--
 src/store/modules/event.ts                    |   6 +-
 src/store/modules/log.ts                      |   7 +-
 src/store/modules/network-profiling.ts        |  19 ++-
 src/store/modules/profile.ts                  |  35 ++---
 src/store/modules/selectors.ts                |  10 +-
 src/store/modules/settings.ts                 |  13 +-
 src/store/modules/task-timeline.ts            |  10 +-
 src/store/modules/topology.ts                 |   6 +-
 src/store/modules/trace.ts                    |  18 +--
 src/types/async-profiling.ts                  |   6 +-
 src/types/continous-profiling.ts              |   1 +
 src/types/dashboard.ts                        | 130 ++++++++++++++----
 src/types/demand-log.ts                       |   2 +-
 src/types/ebpf.ts                             |  11 +-
 src/types/events.ts                           |  10 +-
 src/types/profile.ts                          |  22 +--
 src/types/selector.ts                         |  12 +-
 src/types/settings.ts                         |   4 +-
 src/types/topology.ts                         |   1 +
 src/types/trace.ts                            |  21 ++-
 src/views/Layer.vue                           |   3 +-
 src/views/alarm/Header.vue                    |   2 +-
 src/views/dashboard/Edit.vue                  |  10 +-
 src/views/dashboard/List.vue                  |   7 +-
 src/views/dashboard/Widget.vue                |  20 +--
 src/views/dashboard/components/WidgetLink.vue |   6 +-
 .../configuration/ContinuousProfiling.vue     |  10 +-
 src/views/dashboard/configuration/Event.vue   |  13 +-
 src/views/dashboard/configuration/Tab.vue     |  11 +-
 src/views/dashboard/configuration/Text.vue    |  10 +-
 .../dashboard/configuration/ThirdPartyApp.vue |   9 +-
 .../dashboard/configuration/TimeRange.vue     |   9 +-
 .../dashboard/configuration/Topology.vue      |  13 +-
 src/views/dashboard/configuration/Widget.vue  |  35 +++--
 .../configuration/widget/AssociateOptions.vue |  13 +-
 .../widget/RelatedTraceOptions.vue            |  20 +--
 .../configuration/widget/WidgetOptions.vue    |  10 +-
 .../widget/graph-styles/Area.vue              |   7 +-
 .../configuration/widget/graph-styles/Bar.vue |   7 +-
 .../widget/graph-styles/Card.vue              |   9 +-
 .../widget/graph-styles/EndpointList.vue      |   7 +-
 .../widget/graph-styles/HeatMap.vue           |   7 +-
 .../widget/graph-styles/InstanceList.vue      |   7 +-
 .../widget/graph-styles/Line.vue              |   7 +-
 .../widget/graph-styles/ServiceList.vue       |   7 +-
 .../widget/graph-styles/Table.vue             |   7 +-
 .../widget/graph-styles/TopList.vue           |   7 +-
 .../widget/graph-styles/components/Legend.vue |  14 +-
 .../graph-styles/components/ValueMappings.vue |  11 +-
 .../configuration/widget/metric/Index.vue     |  44 +++---
 .../configuration/widget/metric/Standard.vue  |  16 ++-
 .../dashboard/controls/AsyncProfiling.vue     |   3 +-
 .../controls/ContinuousProfiling.vue          |   3 +-
 src/views/dashboard/controls/DemandLog.vue    |   4 +-
 src/views/dashboard/controls/Ebpf.vue         |   3 +-
 src/views/dashboard/controls/Event.vue        |   4 +-
 .../dashboard/controls/NetworkProfiling.vue   |   4 +-
 src/views/dashboard/controls/Profile.vue      |   3 +-
 src/views/dashboard/controls/Tab.vue          |  16 +--
 src/views/dashboard/controls/TaskTimeline.vue |   3 +-
 src/views/dashboard/controls/Text.vue         |   5 +-
 .../dashboard/controls/ThirdPartyApp.vue      |   3 +-
 src/views/dashboard/controls/TimeRange.vue    |   5 +-
 src/views/dashboard/controls/Topology.vue     |   3 +-
 src/views/dashboard/controls/Trace.vue        |   3 +-
 src/views/dashboard/controls/Widget.vue       |   6 +-
 src/views/dashboard/graphs/EndpointList.vue   |   2 +-
 src/views/dashboard/graphs/InstanceList.vue   |   2 +-
 src/views/dashboard/graphs/ServiceList.vue    |  24 ++--
 src/views/dashboard/graphs/TopList.vue        |  24 ++--
 src/views/dashboard/panel/Layout.vue          |  11 +-
 src/views/dashboard/panel/Tool.vue            |  51 +++----
 .../related/async-profiling/Content.vue       |   6 +-
 .../async-profiling/components/Filter.vue     |  12 +-
 .../async-profiling/components/NewTask.vue    |   5 +-
 .../async-profiling/components/TaskList.vue   |  24 ++--
 .../related/components/TaskDetails.vue        |  18 +--
 .../components/InstanceList.vue               |  11 +-
 .../components/PolicyList.vue                 |   4 +-
 .../dashboard/related/demand-log/Content.vue  |   2 +-
 .../dashboard/related/demand-log/Header.vue   |  12 +-
 src/views/dashboard/related/ebpf/Header.vue   |   2 +-
 .../related/ebpf/components/EBPFSchedules.vue |   6 +-
 .../related/ebpf/components/EBPFStack.vue     |  25 ++--
 .../related/ebpf/components/NewTask.vue       |   8 +-
 .../related/ebpf/components/TaskList.vue      |  11 +-
 src/views/dashboard/related/event/Content.vue |  29 ++--
 src/views/dashboard/related/event/Header.vue  |   1 -
 src/views/dashboard/related/log/Header.vue    |  50 ++++---
 .../related/log/LogTable/LogService.vue       |  12 +-
 .../components/ProcessTopology.vue            |   3 +-
 .../network-profiling/components/Settings.vue |  17 ++-
 .../network-profiling/components/Tasks.vue    |   9 +-
 .../network-profiling/components/TimeLine.vue |   6 +-
 .../dashboard/related/profile/Content.vue     |   2 +-
 .../dashboard/related/profile/Header.vue      |   2 +-
 .../related/profile/components/NewTask.vue    |   8 +-
 .../profile/components/SegmentList.vue        |   2 +-
 .../related/profile/components/SpanTree.vue   |  42 +++---
 .../related/profile/components/TaskList.vue   |   2 +-
 .../components/ProfilingPanel.vue             |   6 +-
 .../task-timeline/components/Timeline.vue     |  11 +-
 .../related/topology/components/Graph.vue     |   6 +-
 .../topology/components/utils/layout.ts       |   8 +-
 .../related/topology/config/Metrics.vue       |  17 +--
 .../related/topology/config/Settings.vue      |  38 ++---
 .../related/topology/pod/InstanceMap.vue      |   6 +-
 .../dashboard/related/topology/pod/PodMap.vue |  16 +--
 .../dashboard/related/topology/pod/Sankey.vue |  12 +-
 .../related/topology/service/HierarchyMap.vue |   6 +-
 .../related/topology/service/ServiceMap.vue   |  26 ++--
 src/views/dashboard/related/trace/Detail.vue  |  17 ++-
 src/views/dashboard/related/trace/Filter.vue  |  32 +++--
 src/views/dashboard/related/trace/Header.vue  |  22 +--
 src/views/dashboard/related/trace/Index.vue   |   4 +-
 .../dashboard/related/trace/TraceList.vue     |   2 +-
 .../trace/components/D3Graph/Index.vue        |   7 +-
 .../trace/components/D3Graph/SpanDetail.vue   |  17 ++-
 .../related/trace/components/Table.vue        |   3 +-
 .../trace/components/Table/TableItem.vue      |  25 ++--
 src/views/settings/components/TTL.vue         |   6 +-
 src/views/settings/components/TTLTable.vue    |   4 +-
 141 files changed, 972 insertions(+), 743 deletions(-)

diff --git a/src/__tests__/main.spec.ts b/src/__tests__/main.spec.ts
index 59ad2afc..ce31bd64 100644
--- a/src/__tests__/main.spec.ts
+++ b/src/__tests__/main.spec.ts
@@ -166,8 +166,8 @@ describe("Main Application", () => {
     const mockStore = useAppStoreWithOut();
 
     // Mock async operations to take time
-    mockStore.getActivateMenus.mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
-    mockStore.queryOAPTimeInfo.mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
+    vi.mocked(mockStore.getActivateMenus).mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
+    vi.mocked(mockStore.queryOAPTimeInfo).mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
 
     // Test async operations
     const promises = [mockStore.getActivateMenus(), mockStore.queryOAPTimeInfo()];
diff --git a/src/components/Graph/Graph.vue b/src/components/Graph/Graph.vue
index 76e668df..23a5c74d 100644
--- a/src/components/Graph/Graph.vue
+++ b/src/components/Graph/Graph.vue
@@ -55,11 +55,11 @@ limitations under the License. -->
   import type { PropType, Ref } from "vue";
   import { useI18n } from "vue-i18n";
   import type { EventParams } from "@/types/app";
-  import type { Filters, RelatedTrace } from "@/types/dashboard";
+  import type { Filters, RelatedTrace, AssociateProcessorProps } from "@/types/dashboard";
   import { useECharts } from "@/hooks/useEcharts";
   import { addResizeListener, removeResizeListener } from "@/utils/event";
   import Trace from "@/views/dashboard/related/trace/Index.vue";
-  import associateProcessor from "@/hooks/useAssociateProcessor";
+  import useAssociateProcessor from "@/hooks/useAssociateProcessor";
   import { WidgetType } from "@/views/dashboard/data";
   import SelectorLegend from "./Legend.vue";
 
@@ -71,7 +71,7 @@ limitations under the License. -->
   const { setOptions, resize, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
   const currentParams = ref<Nullable<EventParams>>(null);
   const showTrace = ref<boolean>(false);
-  const traceOptions = ref<{ type: string; filters?: unknown }>({
+  const traceOptions = ref<{ type: string; filters?: unknown } | any>({
     type: WidgetType.Trace,
   });
   const menuPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
@@ -187,7 +187,11 @@ limitations under the License. -->
       return;
     }
     if (props.filters.isRange) {
-      const { eventAssociate } = associateProcessor(props);
+      const { eventAssociate } = useAssociateProcessor({
+        filters: props.filters,
+        option: props.option,
+        relatedTrace: props.relatedTrace,
+      } as AssociateProcessorProps);
       const options = eventAssociate();
       setOptions(options || props.option);
     } else {
@@ -200,7 +204,12 @@ limitations under the License. -->
   }
 
   function viewTrace() {
-    const item = associateProcessor(props).traceFilters(currentParams.value);
+    const item = useAssociateProcessor({
+      filters: props.filters,
+      option: props.option,
+      relatedTrace: props.relatedTrace,
+    } as AssociateProcessorProps).traceFilters(currentParams.value);
+
     traceOptions.value = {
       ...traceOptions.value,
       filters: item,
@@ -243,8 +252,12 @@ limitations under the License. -->
         return;
       }
       let options;
-      if (props.filters && props.filters.isRange) {
-        const { eventAssociate } = associateProcessor(props);
+      if (props.filters?.isRange) {
+        const { eventAssociate } = useAssociateProcessor({
+          filters: props.filters,
+          option: props.option,
+          relatedTrace: props.relatedTrace,
+        } as AssociateProcessorProps);
         options = eventAssociate();
       }
       setOptions(options || props.option);
diff --git a/src/components/Radio.vue b/src/components/Radio.vue
index 17e21593..4fe4318e 100644
--- a/src/components/Radio.vue
+++ b/src/components/Radio.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <el-radio-group v-model="selected" @change="checked">
-    <el-radio v-for="item in options" :key="item.value" :label="item.value">
+    <el-radio v-for="item in options" :key="item.value" :value="item.value">
       {{ item.label }}
     </el-radio>
   </el-radio-group>
diff --git a/src/graphql/base.ts b/src/graphql/base.ts
index 7a2d33dc..b1d4bfac 100644
--- a/src/graphql/base.ts
+++ b/src/graphql/base.ts
@@ -71,5 +71,8 @@ export async function httpQuery({
     return response.json();
   } else {
     console.error(new HTTPError(response));
+    return {
+      errors: [new HTTPError(response)],
+    };
   }
 }
diff --git a/src/hooks/__tests__/useDuration.spec.ts b/src/hooks/__tests__/useDuration.spec.ts
index 0befc8fa..8f8e9834 100644
--- a/src/hooks/__tests__/useDuration.spec.ts
+++ b/src/hooks/__tests__/useDuration.spec.ts
@@ -23,8 +23,8 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 vi.mock("@/store/modules/app", () => ({
   useAppStoreWithOut: vi.fn(),
   InitializationDurationRow: {
-    start: "2023-01-01 00:00:00",
-    end: "2023-01-02 00:00:00",
+    start: new Date("2023-01-01 00:00:00"),
+    end: new Date("2023-01-02 00:00:00"),
     step: "HOUR",
   },
 }));
@@ -46,11 +46,11 @@ vi.mock("@/utils/dateFormat", () => ({
 describe("useDuration hook", () => {
   const mockAppStore = {
     utc: false,
-  };
+  } as unknown as ReturnType<typeof useAppStoreWithOut>;
 
   beforeEach(() => {
     vi.clearAllMocks();
-    (useAppStoreWithOut as any).mockReturnValue(mockAppStore);
+    vi.mocked(useAppStoreWithOut).mockReturnValue(mockAppStore);
   });
 
   describe("setDurationRow", () => {
@@ -93,12 +93,12 @@ describe("useDuration hook", () => {
   });
 
   describe("getMaxRange", () => {
-    it("should return empty array for day -1", () => {
+    it("should return date range for negative days", () => {
       const { getMaxRange } = useDuration();
 
       const result = getMaxRange(-1);
 
-      expect(result).toEqual([]);
+      expect(result).toHaveLength(0);
     });
 
     it("should return date range for positive days", () => {
diff --git a/src/hooks/useAssociateProcessor.ts b/src/hooks/useAssociateProcessor.ts
index a1bac26d..5da95837 100644
--- a/src/hooks/useAssociateProcessor.ts
+++ b/src/hooks/useAssociateProcessor.ts
@@ -18,8 +18,9 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 import dateFormatStep from "@/utils/dateFormat";
 import getLocalTime from "@/utils/localtime";
 import type { EventParams } from "@/types/app";
+import type { AssociateProcessorProps, Series } from "@/types/dashboard";
 
-export default function associateProcessor(props: Indexable) {
+export default function useAssociateProcessor(props: AssociateProcessorProps) {
   function eventAssociate() {
     if (!props.filters) {
       return;
@@ -75,8 +76,8 @@ export default function associateProcessor(props: Indexable) {
     if (start) {
       const end = start;
       duration = {
-        start: dateFormatStep(getLocalTime(appStore.utc, new Date(start)), step, true),
-        end: dateFormatStep(getLocalTime(appStore.utc, new Date(end)), step, true),
+        startTime: dateFormatStep(getLocalTime(appStore.utc, new Date(start)), step, true),
+        endTime: dateFormatStep(getLocalTime(appStore.utc, new Date(end)), step, true),
         step,
       };
     }
@@ -84,14 +85,14 @@ export default function associateProcessor(props: Indexable) {
     const status = relatedTrace.status;
     const queryOrder = relatedTrace.queryOrder;
     const latency = relatedTrace.latency;
-    const series = props.option.series || [];
+    const series = (props.option.series || []) as Series[];
     const item: Indexable = {
       duration,
       queryOrder,
       status,
     };
     if (latency) {
-      const latencyList = series.map((d: { name: string; data: number[][] }, index: number) => {
+      const latencyList = series.map((d: Series, index: number) => {
         const data = [
           d.data[currentParams.dataIndex][1],
           series[index + 1] ? series[index + 1].data[currentParams.dataIndex][1] : Infinity,
@@ -104,7 +105,7 @@ export default function associateProcessor(props: Indexable) {
       });
       item.latency = latencyList;
     }
-    const value = series.map((d: { name: string; data: number[][] }, index: number) => {
+    const value = series.map((d: Series, index: number) => {
       return {
         label: d.name,
         value: String(index),
diff --git a/src/hooks/useDashboardsSession.ts b/src/hooks/useDashboardsSession.ts
index 3fc9d1af..cd07fd5a 100644
--- a/src/hooks/useDashboardsSession.ts
+++ b/src/hooks/useDashboardsSession.ts
@@ -16,7 +16,7 @@
  */
 import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import type { LayoutConfig } from "@/types/dashboard";
+import type { LayoutConfig, Filters } from "@/types/dashboard";
 import { ConfigFieldTypes } from "@/views/dashboard/data";
 
 export default function getDashboard(param?: { name?: string; layer: string; entity: string }, t?: string) {
@@ -28,12 +28,12 @@ export default function getDashboard(param?: { name?: string; layer: string; ent
   if (type === ConfigFieldTypes.NAME) {
     dashboard = list.find(
       (d: { name: string; layer: string; entity: string }) =>
-        d.name === opt.name && d.entity === opt.entity && d.layer === opt.layer,
+        d.name === opt?.name && d.entity === opt?.entity && d.layer === opt?.layer,
     );
   } else {
     dashboard = list.find(
       (d: { name: string; layer: string; entity: string; isDefault: boolean }) =>
-        d.isDefault && d.entity === opt.entity && d.layer === opt.layer,
+        d.isDefault && d.entity === opt?.entity && d.layer === opt?.layer,
     );
   }
   const all = dashboardStore.layout;
@@ -52,7 +52,7 @@ export default function getDashboard(param?: { name?: string; layer: string; ent
       widgets.push(item);
     }
   }
-  function associationWidget(sourceId: string, filters: unknown, type: string) {
+  function associationWidget(sourceId: string, filters: Filters, type: string) {
     const widget = widgets.find((d: { type: string }) => d.type === type);
     if (!widget) {
       return ElMessage.info(`There has no a ${type} widget in the dashboard`);
diff --git a/src/hooks/useDuration.ts b/src/hooks/useDuration.ts
index f9057b9e..a28748cd 100644
--- a/src/hooks/useDuration.ts
+++ b/src/hooks/useDuration.ts
@@ -42,9 +42,13 @@ export function useDuration() {
     durationRow = data;
   }
   function getMaxRange(day: number) {
-    if (day === -1) {
+    if (day === undefined || day === null) {
       return [];
     }
+    if (isNaN(day) || day < 0) {
+      return [];
+    }
+
     const gap = (day + 1) * 24 * 60 * 60 * 1000;
     const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
 
diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts
index 4bdeb728..bf5d5419 100644
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -68,8 +68,8 @@ export async function useDashboardQueryProcessor(configList: Indexable[]) {
     if (idx === 0) {
       variables.push(`$entity: Entity!`);
       const entity = {
-        serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
-        normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
+        serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService?.value,
+        normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService?.normal,
         serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation", "Process"].includes(
           dashboardStore.entity,
         )
@@ -81,8 +81,8 @@ export async function useDashboardQueryProcessor(configList: Indexable[]) {
         processName: dashboardStore.entity.includes("Process")
           ? selectorStore.currentProcess && selectorStore.currentProcess.value
           : undefined,
-        destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
-        destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
+        destNormal: isRelation ? selectorStore.currentDestService?.normal : undefined,
+        destServiceName: isRelation ? selectorStore.currentDestService?.value : undefined,
         destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
           ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
           : undefined,
@@ -247,7 +247,7 @@ export async function useExpressionsQueryPodsMetrics(
       duration: appStore.durationTime,
     };
     const variables: string[] = [`$duration: Duration!`];
-    const currentService = selectorStore.currentService || {};
+    const currentService = selectorStore.currentService || ({} as Service);
     const fragmentList = pods.map((d: (Instance | Endpoint | Service) & Indexable, index: number) => {
       const entity = {
         serviceName: scope === "Service" ? d.label : currentService.label,
@@ -373,7 +373,9 @@ export async function useExpressionsQueryPodsMetrics(
     const dashboardStore = useDashboardStore();
     const params = await expressionsGraphqlPods(pods);
 
-    const json = await dashboardStore.fetchMetricValue(params);
+    const json = await dashboardStore.fetchMetricValue(
+      params as { queryStr: string; conditions: { [key: string]: unknown } },
+    );
 
     if (json.errors) {
       ElMessage.error(json.errors);
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 274f3912..7875aa43 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -143,15 +143,15 @@ limitations under the License. -->
     appStore.setColdStageMode(coldStage.value);
     if (coldStage.value) {
       handleMetricsTTL({
-        minute: appStore.metricsTTL.coldMinute,
-        hour: appStore.metricsTTL.coldHour,
-        day: appStore.metricsTTL.coldDay,
+        minute: appStore.metricsTTL?.coldMinute || NaN,
+        hour: appStore.metricsTTL?.coldHour || NaN,
+        day: appStore.metricsTTL?.coldDay || NaN,
       });
     } else {
       handleMetricsTTL({
-        minute: appStore.metricsTTL.minute,
-        hour: appStore.metricsTTL.hour,
-        day: appStore.metricsTTL.day,
+        minute: appStore.metricsTTL?.minute || NaN,
+        hour: appStore.metricsTTL?.hour || NaN,
+        day: appStore.metricsTTL?.day || NaN,
       });
     }
     appStore.setDuration(InitializationDurationRow);
@@ -303,7 +303,7 @@ limitations under the License. -->
     }
 
     const serviceId = route.params.serviceId;
-    const list = serviceDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+    const list = serviceDashboards.map((d: DashboardItem, index: number) => {
       let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
       if (serviceId) {
         path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${d.name}`;
@@ -321,7 +321,7 @@ limitations under the License. -->
       const endpointDashboards = dashboardStore.dashboards.filter(
         (d: DashboardItem) => MetricCatalog.ENDPOINT === d.entity && dashboard.layer === d.layer,
       );
-      const list = endpointDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+      const list = endpointDashboards.map((d: DashboardItem, index: number) => {
         let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
         if (podId) {
           path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${podId}/${d.name}`;
@@ -341,7 +341,7 @@ limitations under the License. -->
       const serviceRelationDashboards = dashboardStore.dashboards.filter(
         (d: DashboardItem) => MetricCatalog.SERVICE_RELATION === d.entity && dashboard.layer === d.layer,
       );
-      const list = serviceRelationDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+      const list = serviceRelationDashboards.map((d: DashboardItem, index: number) => {
         let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
         if (destServiceId) {
           path = `/dashboard/related/${d.layer}/${d.entity}/${serviceId}/${destServiceId}/${d.name}`;
@@ -355,11 +355,11 @@ limitations under the License. -->
       });
       pathNames.value.push(list);
     }
-    if ([MetricCatalog.Process, MetricCatalog.PROCESS_RELATION].includes(dashboard.entity)) {
+    if ([MetricCatalog.Process, MetricCatalog.PROCESS_RELATION].includes(dashboard.entity as MetricCatalog)) {
       const InstanceDashboards = dashboardStore.dashboards.filter(
         (d: DashboardItem) => MetricCatalog.SERVICE_INSTANCE === d.entity && dashboard.layer === d.layer,
       );
-      const list = InstanceDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+      const list = InstanceDashboards.map((d: DashboardItem, index: number) => {
         let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
         if (podId) {
           path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${podId}/${d.name}`;
diff --git a/src/store/data.ts b/src/store/data.ts
index f40dfa25..4d88138b 100644
--- a/src/store/data.ts
+++ b/src/store/data.ts
@@ -24,6 +24,8 @@ export const NewControl = {
   h: 12,
   i: "0",
   type: WidgetType.Widget,
+  widget: {},
+  graph: {},
 };
 export const TextConfig = {
   fontColor: "white",
diff --git a/src/store/modules/__tests__/app.spec.ts b/src/store/modules/__tests__/app.spec.ts
index f63abd5d..06290900 100644
--- a/src/store/modules/__tests__/app.spec.ts
+++ b/src/store/modules/__tests__/app.spec.ts
@@ -72,8 +72,8 @@ describe("App Store", () => {
       expect(store.theme).toBe(Themes.Dark);
       expect(store.coldStageMode).toBe(false);
       expect(store.maxRange).toEqual([]);
-      expect(store.metricsTTL).toEqual({});
-      expect(store.recordsTTL).toEqual({});
+      expect(store.metricsTTL).toEqual(null);
+      expect(store.recordsTTL).toEqual(null);
     });
 
     it("should have correct duration row initialization", () => {
diff --git a/src/store/modules/alarm.ts b/src/store/modules/alarm.ts
index ddca8243..c2fd3534 100644
--- a/src/store/modules/alarm.ts
+++ b/src/store/modules/alarm.ts
@@ -56,6 +56,6 @@ export const alarmStore = defineStore({
   },
 });
 
-export function useAlarmStore(): Recordable {
+export function useAlarmStore() {
   return alarmStore(store);
 }
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index e358a11b..9ac50960 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -38,8 +38,8 @@ interface AppState {
   theme: string;
   coldStageMode: boolean;
   maxRange: Date[];
-  metricsTTL: Recordable<MetricsTTL>;
-  recordsTTL: Recordable<RecordsTTL>;
+  metricsTTL: Nullable<MetricsTTL>;
+  recordsTTL: Nullable<RecordsTTL>;
 }
 
 export const InitializationDurationRow = {
@@ -64,8 +64,8 @@ export const appStore = defineStore({
     theme: Themes.Dark,
     coldStageMode: false,
     maxRange: [],
-    metricsTTL: {},
-    recordsTTL: {},
+    metricsTTL: null,
+    recordsTTL: null,
   }),
   getters: {
     duration(): Duration {
@@ -224,6 +224,6 @@ export const appStore = defineStore({
     },
   },
 });
-export function useAppStoreWithOut(): Recordable {
+export function useAppStoreWithOut() {
   return appStore(store);
 }
diff --git a/src/store/modules/async-profiling.ts b/src/store/modules/async-profiling.ts
index c1a72efe..fc923d6f 100644
--- a/src/store/modules/async-profiling.ts
+++ b/src/store/modules/async-profiling.ts
@@ -28,9 +28,9 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import type { Instance } from "@/types/selector";
 
 interface AsyncProfilingState {
-  taskList: Array<Recordable<AsyncProfilingTask>>;
-  selectedTask: Recordable<AsyncProfilingTask>;
-  taskProgress: Recordable<AsyncProfilerTaskProgress>;
+  taskList: Array<AsyncProfilingTask>;
+  selectedTask: Nullable<AsyncProfilingTask>;
+  taskProgress: Nullable<AsyncProfilerTaskProgress>;
   instances: Instance[];
   analyzeTrees: AsyncProfilerStackElement[];
   loadingTree: boolean;
@@ -41,15 +41,15 @@ export const asyncProfilingStore = defineStore({
   id: "asyncProfiling",
   state: (): AsyncProfilingState => ({
     taskList: [],
-    selectedTask: {},
-    taskProgress: {},
+    selectedTask: null,
+    taskProgress: null,
     instances: [],
     analyzeTrees: [],
     loadingTree: false,
     loadingTasks: false,
   }),
   actions: {
-    setSelectedTask(task: Recordable<AsyncProfilingTask>) {
+    setSelectedTask(task: Nullable<AsyncProfilingTask>) {
       this.selectedTask = task || {};
     },
     setAnalyzeTrees(tree: AsyncProfilerStackElement[]) {
@@ -57,10 +57,13 @@ export const asyncProfilingStore = defineStore({
     },
     async getTaskList() {
       const selectorStore = useSelectorStore();
+      if (!selectorStore.currentService?.id) {
+        return;
+      }
       this.loadingTasks = true;
       const response = await graphql.query("getAsyncTaskList").params({
         request: {
-          serviceId: selectorStore.currentService.id,
+          serviceId: selectorStore.currentService?.id,
           limit: 10000,
         },
       });
@@ -86,7 +89,7 @@ export const asyncProfilingStore = defineStore({
       this.taskProgress = response.data.taskProgress;
       return response;
     },
-    async getServiceInstances(param: { serviceId: string; isRelation: boolean }) {
+    async getServiceInstances(param: { serviceId: string; isRelation?: boolean }) {
       if (!param.serviceId) {
         return null;
       }
@@ -103,6 +106,9 @@ export const asyncProfilingStore = defineStore({
       return response;
     },
     async createTask(param: AsyncProfileTaskCreationRequest) {
+      if (!param.serviceId) {
+        return;
+      }
       const response = await graphql.query("saveAsyncProfileTask").params({ asyncProfilerTaskCreationRequest: param });
 
       if (response.errors) {
@@ -133,6 +139,6 @@ export const asyncProfilingStore = defineStore({
   },
 });
 
-export function useAsyncProfilingStore(): Recordable {
+export function useAsyncProfilingStore() {
   return asyncProfilingStore(store);
 }
diff --git a/src/store/modules/continous-profiling.ts b/src/store/modules/continous-profiling.ts
index ee9a56d1..cd9d0339 100644
--- a/src/store/modules/continous-profiling.ts
+++ b/src/store/modules/continous-profiling.ts
@@ -24,16 +24,16 @@ import type { MonitorInstance, MonitorProcess } from "@/types/continous-profilin
 import { dateFormat } from "@/utils/dateFormat";
 
 interface ContinousProfilingState {
-  strategyList: Array<Recordable<StrategyItem>>;
-  selectedStrategy: Recordable<StrategyItem>;
-  taskList: Array<Recordable<EBPFTaskList>>;
-  selectedTask: Recordable<EBPFTaskList>;
+  strategyList: Array<StrategyItem>;
+  selectedStrategy: Nullable<StrategyItem>;
+  taskList: Array<EBPFTaskList>;
+  selectedTask: Nullable<EBPFTaskList>;
   errorTip: string;
   errorReason: string;
   instances: Instance[];
   instance: Nullable<Instance>;
   eBPFSchedules: EBPFProfilingSchedule[];
-  currentSchedule: EBPFProfilingSchedule | Record<string, never>;
+  currentSchedule: Nullable<EBPFProfilingSchedule>;
   analyzeTrees: AnalyzationTrees[];
   ebpfTips: string;
   aggregateType: string;
@@ -45,15 +45,15 @@ export const continousProfilingStore = defineStore({
   id: "continousProfiling",
   state: (): ContinousProfilingState => ({
     strategyList: [],
-    selectedStrategy: {},
+    selectedStrategy: null,
     taskList: [],
-    selectedTask: {},
+    selectedTask: null,
     errorReason: "",
     errorTip: "",
     ebpfTips: "",
     instances: [],
     eBPFSchedules: [],
-    currentSchedule: {},
+    currentSchedule: null,
     analyzeTrees: [],
     aggregateType: "COUNT",
     instance: null,
@@ -61,7 +61,7 @@ export const continousProfilingStore = defineStore({
     policyLoading: false,
   }),
   actions: {
-    setSelectedStrategy(task: Recordable<StrategyItem>) {
+    setSelectedStrategy(task: Nullable<StrategyItem>) {
       this.selectedStrategy = task || {};
     },
     setselectedTask(task: Recordable<EBPFTaskList>) {
@@ -165,6 +165,6 @@ export const continousProfilingStore = defineStore({
   },
 });
 
-export function useContinousProfilingStore(): Recordable {
+export function useContinousProfilingStore() {
   return continousProfilingStore(store);
 }
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 57ee704d..76ae8009 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -31,11 +31,11 @@ interface DashboardState {
   entity: string;
   layerId: string;
   activedGridItem: string;
-  selectorStore: Recordable;
+  selectorStore: ReturnType<typeof useSelectorStore>;
   showTopology: boolean;
   currentTabItems: LayoutConfig[];
   dashboards: DashboardItem[];
-  currentDashboard: Nullable<DashboardItem>;
+  currentDashboard: DashboardItem;
   editMode: boolean;
   currentTabIndex: number;
   showLinkConfig: boolean;
@@ -54,7 +54,7 @@ export const dashboardStore = defineStore({
     showTopology: false,
     currentTabItems: [],
     dashboards: [],
-    currentDashboard: null,
+    currentDashboard: {} as DashboardItem,
     editMode: false,
     currentTabIndex: 0,
     showLinkConfig: false,
@@ -73,8 +73,8 @@ export const dashboardStore = defineStore({
       this.dashboards = list;
       sessionStorage.setItem("dashboards", JSON.stringify(list));
     },
-    setCurrentDashboard(item: DashboardItem) {
-      this.currentDashboard = item;
+    setCurrentDashboard(item: Nullable<DashboardItem>) {
+      this.currentDashboard = item || {};
     },
     addControl(type: WidgetType) {
       const arr = this.layout.map((d: Recordable) => Number(d.i));
@@ -253,7 +253,7 @@ export const dashboardStore = defineStore({
     setTopology(show: boolean) {
       this.showTopology = show;
     },
-    setConfigs(param: { [key: string]: unknown }) {
+    setConfigs(param: LayoutConfig) {
       const actived = this.activedGridItem.split("-");
       const index = this.layout.findIndex((d: LayoutConfig) => actived[0] === d.i);
       if (actived.length === 3) {
@@ -353,7 +353,7 @@ export const dashboardStore = defineStore({
       }
       this.dashboards = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
     },
-    async updateDashboard(setting: { id: string; configuration: string }) {
+    async updateDashboard(setting: { id?: string; configuration: string }) {
       const resp = await graphql.query("updateTemplate").params({
         setting,
       });
@@ -448,6 +448,6 @@ export const dashboardStore = defineStore({
   },
 });
 
-export function useDashboardStore(): Recordable {
+export function useDashboardStore() {
   return dashboardStore(store);
 }
diff --git a/src/store/modules/demand-log.ts b/src/store/modules/demand-log.ts
index 16f93c61..2a1c2365 100644
--- a/src/store/modules/demand-log.ts
+++ b/src/store/modules/demand-log.ts
@@ -57,7 +57,7 @@ export const demandLogStore = defineStore({
       this.logs = logs;
       this.message = message || "";
     },
-    async getInstances(id: string) {
+    async getInstances(id?: string) {
       const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
       if (!serviceId) {
         return new Promise((resolve) => resolve({ errors: "Service ID is required" }));
@@ -113,6 +113,6 @@ export const demandLogStore = defineStore({
   },
 });
 
-export function useDemandLogStore(): Recordable {
+export function useDemandLogStore() {
   return demandLogStore(store);
 }
diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index 62fb3fa9..8b4783b4 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -21,14 +21,14 @@ import { store } from "@/store";
 import graphql from "@/graphql";
 import { EBPFProfilingTriggerType } from "../data";
 interface EbpfState {
-  taskList: Array<Recordable<EBPFTaskList>>;
+  taskList: Array<EBPFTaskList>;
   eBPFSchedules: EBPFProfilingSchedule[];
-  currentSchedule: EBPFProfilingSchedule | Record<string, never>;
+  currentSchedule: Nullable<EBPFProfilingSchedule>;
   analyzeTrees: AnalyzationTrees[];
   labels: Option[];
   couldProfiling: boolean;
   ebpfTips: string;
-  selectedTask: Recordable<EBPFTaskList>;
+  selectedTask: Nullable<EBPFTaskList>;
   aggregateType: string;
 }
 
@@ -37,16 +37,16 @@ export const ebpfStore = defineStore({
   state: (): EbpfState => ({
     taskList: [],
     eBPFSchedules: [],
-    currentSchedule: {},
+    currentSchedule: null,
     analyzeTrees: [],
     labels: [{ value: "", label: "" }],
     couldProfiling: false,
     ebpfTips: "",
-    selectedTask: {},
+    selectedTask: null,
     aggregateType: "COUNT",
   }),
   actions: {
-    setSelectedTask(task: Recordable<EBPFTaskList>) {
+    setSelectedTask(task: Nullable<EBPFTaskList>) {
       this.selectedTask = task || {};
     },
     setCurrentSchedule(s: EBPFProfilingSchedule) {
@@ -81,7 +81,7 @@ export const ebpfStore = defineStore({
       });
       return response;
     },
-    async getTaskList(params: { serviceId: string; targets: string[] }) {
+    async getTaskList(params: { serviceId: string; targets: string[]; triggerType: string }) {
       if (!params.serviceId) {
         return new Promise((resolve) => resolve({}));
       }
@@ -155,6 +155,6 @@ export const ebpfStore = defineStore({
   },
 });
 
-export function useEbpfStore(): Recordable {
+export function useEbpfStore() {
   return ebpfStore(store);
 }
diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts
index c5fab8d8..b2a59c6c 100644
--- a/src/store/modules/event.ts
+++ b/src/store/modules/event.ts
@@ -45,7 +45,7 @@ export const eventStore = defineStore({
       this.condition = data;
     },
     async getInstances() {
-      const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
+      const serviceId = useSelectorStore().currentService?.id || "";
 
       if (!serviceId) {
         return new Promise((resolve) => resolve({ errors: "" }));
@@ -62,7 +62,7 @@ export const eventStore = defineStore({
       return response;
     },
     async getEndpoints(keyword?: string) {
-      const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
+      const serviceId = useSelectorStore().currentService?.id || "";
       if (!serviceId) {
         return new Promise((resolve) => resolve({ errors: "" }));
       }
@@ -111,6 +111,6 @@ export const eventStore = defineStore({
   },
 });
 
-export function useEventStore(): Recordable {
+export function useEventStore() {
   return eventStore(store);
 }
diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts
index f021df5c..d105cb2a 100644
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -73,7 +73,7 @@ export const logStore = defineStore({
       return response;
     },
     async getInstances(id: string) {
-      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
+      const serviceId = this.selectorStore.currentService?.id || id;
       if (!serviceId) {
         return new Promise((resolve) => resolve({ errors: "Service ID is required" }));
       }
@@ -89,7 +89,10 @@ export const logStore = defineStore({
       return response;
     },
     async getEndpoints(id: string, keyword?: string) {
-      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
+      const serviceId = this.selectorStore.currentService?.id || id;
+      if (!serviceId) {
+        return new Promise((resolve) => resolve({ errors: "Service ID is required" }));
+      }
       const response = await graphql.query("queryEndpoints").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
diff --git a/src/store/modules/network-profiling.ts b/src/store/modules/network-profiling.ts
index e8f33864..2e5f48fc 100644
--- a/src/store/modules/network-profiling.ts
+++ b/src/store/modules/network-profiling.ts
@@ -24,9 +24,9 @@ import { ElMessage } from "element-plus";
 import type { DurationTime } from "@/types/app";
 
 interface NetworkProfilingState {
-  networkTasks: Array<Recordable<EBPFTaskList>>;
+  networkTasks: EBPFTaskList[];
   networkTip: string;
-  selectedNetworkTask: Recordable<EBPFTaskList>;
+  selectedNetworkTask: Nullable<EBPFTaskList>;
   nodes: ProcessNode[];
   calls: Call[];
   node: Nullable<ProcessNode>;
@@ -43,7 +43,7 @@ export const networkProfilingStore = defineStore({
   state: (): NetworkProfilingState => ({
     networkTasks: [],
     networkTip: "",
-    selectedNetworkTask: {},
+    selectedNetworkTask: null,
     nodes: [],
     calls: [],
     node: null,
@@ -55,13 +55,13 @@ export const networkProfilingStore = defineStore({
     loadNodes: false,
   }),
   actions: {
-    setSelectedNetworkTask(task: Recordable<EBPFTaskList>) {
+    setSelectedNetworkTask(task: Nullable<EBPFTaskList>) {
       this.selectedNetworkTask = task || {};
     },
     setNode(node: Nullable<ProcessNode>) {
       this.node = node;
     },
-    setLink(link: Call) {
+    setLink(link: Nullable<Call>) {
       this.call = link;
     },
     seNodes(nodes: Node[]) {
@@ -137,7 +137,12 @@ export const networkProfilingStore = defineStore({
       }
       return response;
     },
-    async getTaskList(params: { serviceId: string; serviceInstanceId: string; targets: string[] }) {
+    async getTaskList(params: {
+      serviceId: string;
+      serviceInstanceId: string;
+      targets: string[];
+      triggerType: string;
+    }) {
       if (!params.serviceId) {
         return new Promise((resolve) => resolve({}));
       }
@@ -188,6 +193,6 @@ export const networkProfilingStore = defineStore({
   },
 });
 
-export function useNetworkProfilingStore(): Recordable {
+export function useNetworkProfilingStore() {
   return networkProfilingStore(store);
 }
diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts
index 4a22511d..33d04466 100644
--- a/src/store/modules/profile.ts
+++ b/src/store/modules/profile.ts
@@ -22,6 +22,7 @@ import type {
   ProfileAnalyzationTrees,
   TaskLog,
   ProfileTaskCreationRequest,
+  ProfileAnalyzeParams,
 } from "@/types/profile";
 import type { Trace } from "@/types/trace";
 import { store } from "@/store";
@@ -34,11 +35,11 @@ interface ProfileState {
   taskEndpoints: Endpoint[];
   condition: { serviceId: string; endpointName: string };
   taskList: TaskListItem[];
-  currentTask: Recordable<TaskListItem>;
+  currentTask: Nullable<TaskListItem>;
   segmentList: Trace[];
-  currentSegment: Recordable<Trace>;
-  segmentSpans: Array<Recordable<SegmentSpan>>;
-  currentSpan: Recordable<SegmentSpan>;
+  currentSegment: Nullable<Trace>;
+  segmentSpans: SegmentSpan[];
+  currentSpan: Nullable<SegmentSpan>;
   analyzeTrees: ProfileAnalyzationTrees;
   taskLogs: TaskLog[];
   highlightTop: boolean;
@@ -52,10 +53,10 @@ export const profileStore = defineStore({
     condition: { serviceId: "", endpointName: "" },
     taskList: [],
     segmentList: [],
-    currentTask: {},
-    currentSegment: {},
+    currentTask: null,
+    currentSegment: null,
     segmentSpans: [],
-    currentSpan: {},
+    currentSpan: null,
     analyzeTrees: [],
     taskLogs: [],
     highlightTop: true,
@@ -71,19 +72,19 @@ export const profileStore = defineStore({
       this.currentTask = task || {};
       this.analyzeTrees = [];
     },
-    setSegmentSpans(spans: Recordable<SegmentSpan>[]) {
+    setSegmentSpans(spans: Nullable<SegmentSpan>[]) {
       this.currentSpan = spans[0] || {};
       this.segmentSpans = spans;
     },
-    setCurrentSpan(span: Recordable<SegmentSpan>) {
-      this.currentSpan = span;
+    setCurrentSpan(span: Nullable<SegmentSpan>) {
+      this.currentSpan = span || {};
       this.analyzeTrees = [];
     },
-    setCurrentSegment(segment: Trace) {
+    setCurrentSegment(segment: Nullable<Trace>) {
       this.currentSegment = segment || {};
-      this.segmentSpans = segment.spans || [];
-      if (segment.spans) {
-        this.currentSpan = segment.spans[0] || {};
+      this.segmentSpans = segment?.spans || [];
+      if (segment?.spans) {
+        this.currentSpan = segment?.spans[0] || {};
       } else {
         this.currentSpan = {};
       }
@@ -160,7 +161,7 @@ export const profileStore = defineStore({
         this.setCurrentSegment(segmentList[0]);
         this.getSegmentSpans(segmentList[0].segmentId);
       } else {
-        this.setCurrentSegment({});
+        this.setCurrentSegment(null);
       }
       return response;
     },
@@ -194,7 +195,7 @@ export const profileStore = defineStore({
       this.currentSpan = segment.spans[index];
       return response;
     },
-    async getProfileAnalyze(params: Array<{ segmentId: string; timeRange: { start: number; end: number } }>) {
+    async getProfileAnalyze(params: ProfileAnalyzeParams[]) {
       if (!params.length) {
         return new Promise((resolve) => resolve({}));
       }
@@ -238,6 +239,6 @@ export const profileStore = defineStore({
   },
 });
 
-export function useProfileStore(): Recordable {
+export function useProfileStore() {
   return profileStore(store);
 }
diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts
index 8165445f..7aac132a 100644
--- a/src/store/modules/selectors.ts
+++ b/src/store/modules/selectors.ts
@@ -88,7 +88,7 @@ export const selectorStore = defineStore({
       }
       return res.data;
     },
-    async getServiceInstances(param?: { serviceId: string; isRelation: boolean }) {
+    async getServiceInstances(param?: { serviceId: string; isRelation?: boolean }) {
       const serviceId = param ? param.serviceId : this.currentService?.id;
       if (!serviceId) {
         return new Promise((resolve) => resolve({ errors: "Service ID is required" }));
@@ -106,7 +106,7 @@ export const selectorStore = defineStore({
       }
       return resp;
     },
-    async getProcesses(param?: { instanceId: string; isRelation: boolean }) {
+    async getProcesses(param?: { instanceId: string | undefined; isRelation?: boolean }) {
       const instanceId = param ? param.instanceId : this.currentPod?.id;
       if (!instanceId) {
         return null;
@@ -147,7 +147,7 @@ export const selectorStore = defineStore({
       }
       return res;
     },
-    async getService(serviceId: string, isRelation: boolean) {
+    async getService(serviceId: string, isRelation?: boolean) {
       if (!serviceId) {
         return;
       }
@@ -185,7 +185,7 @@ export const selectorStore = defineStore({
 
       return res;
     },
-    async getEndpoint(endpointId: string, isRelation?: string) {
+    async getEndpoint(endpointId: string, isRelation?: boolean) {
       if (!endpointId) {
         return;
       }
@@ -226,6 +226,6 @@ export const selectorStore = defineStore({
   },
 });
 
-export function useSelectorStore(): Recordable {
+export function useSelectorStore() {
   return selectorStore(store);
 }
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 4341a1da..355baa86 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -24,7 +24,7 @@ import { TTLTypes, TTLColdMap } from "../data";
 interface SettingsState {
   clusterNodes: ClusterNode[];
   debuggingConfig: Indexable<string>;
-  configTTL: Recordable<ConfigTTL>;
+  configTTL: Nullable<ConfigTTL>;
 }
 
 export const settingsStore = defineStore({
@@ -32,7 +32,7 @@ export const settingsStore = defineStore({
   state: (): SettingsState => ({
     clusterNodes: [],
     debuggingConfig: {},
-    configTTL: {},
+    configTTL: null,
   }),
   actions: {
     async getClusterNodes() {
@@ -48,11 +48,14 @@ export const settingsStore = defineStore({
         method: "get",
         path: "ConfigTTL",
       });
-      for (const item of Object.keys(response)) {
+      this.configTTL = {};
+      const keys = Object.keys(response).filter((k: string) => k);
+      for (const item of keys) {
         const rows = [];
         const row: Indexable<string> = { type: TTLTypes.HotAndWarm };
         const rowCold: Indexable<string> = { type: TTLTypes.Cold };
-        for (const key of Object.keys(response[item])) {
+        const itemKeys = Object.keys(response[item]).filter((k: string) => k);
+        for (const key of itemKeys) {
           if (HotAndWarmOpt.includes(key)) {
             row[key] = response[item][key];
           } else {
@@ -75,6 +78,6 @@ export const settingsStore = defineStore({
   },
 });
 
-export function useSettingsStore(): Recordable {
+export function useSettingsStore() {
   return settingsStore(store);
 }
diff --git a/src/store/modules/task-timeline.ts b/src/store/modules/task-timeline.ts
index 850b0485..c5c5ef96 100644
--- a/src/store/modules/task-timeline.ts
+++ b/src/store/modules/task-timeline.ts
@@ -29,7 +29,7 @@ import { TargetTypes } from "@/views/dashboard/related/continuous-profiling/data
 interface taskTimelineState {
   loading: boolean;
   taskList: EBPFTaskList[];
-  selectedTask: Recordable<EBPFTaskList>;
+  selectedTask: Nullable<EBPFTaskList>;
 }
 
 export const taskTimelineStore = defineStore({
@@ -37,11 +37,11 @@ export const taskTimelineStore = defineStore({
   state: (): taskTimelineState => ({
     loading: false,
     taskList: [],
-    selectedTask: {},
+    selectedTask: null,
   }),
   actions: {
-    setSelectedTask(task: Recordable<EBPFTaskList>) {
-      this.selectedTask = task || {};
+    setSelectedTask(task: Nullable<EBPFTaskList>) {
+      this.selectedTask = task;
     },
     setTaskList(list: EBPFTaskList[]) {
       this.taskList = list;
@@ -126,6 +126,6 @@ export const taskTimelineStore = defineStore({
   },
 });
 
-export function useTaskTimelineStore(): Recordable {
+export function useTaskTimelineStore() {
   return taskTimelineStore(store);
 }
diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts
index 6dc332eb..7f3e5656 100644
--- a/src/store/modules/topology.ts
+++ b/src/store/modules/topology.ts
@@ -61,10 +61,10 @@ export const topologyStore = defineStore({
     hierarchyInstanceNodeMetrics: {},
   }),
   actions: {
-    setNode(node: Node) {
+    setNode(node: Nullable<Node>) {
       this.node = node;
     },
-    setLink(link: Call) {
+    setLink(link: Nullable<Call>) {
       this.call = link;
     },
     setInstanceTopology(data: { nodes: Node[]; calls: Call[] }) {
@@ -572,6 +572,6 @@ export const topologyStore = defineStore({
   },
 });
 
-export function useTopologyStore(): Recordable {
+export function useTopologyStore() {
   return topologyStore(store);
 }
diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts
index fe756874..2173a133 100644
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -30,7 +30,7 @@ interface TraceState {
   endpoints: Endpoint[];
   traceList: Trace[];
   traceSpans: Span[];
-  currentTrace: Recordable<Trace>;
+  currentTrace: Nullable<Trace>;
   conditions: Recordable;
   traceSpanLogs: Recordable[];
   selectorStore: Recordable;
@@ -42,12 +42,12 @@ const { getDurationTime } = useDuration();
 export const traceStore = defineStore({
   id: "trace",
   state: (): TraceState => ({
-    services: [{ value: "0", label: "All" }],
-    instances: [{ value: "0", label: "All" }],
-    endpoints: [{ value: "0", label: "All" }],
+    services: [{ value: "0", label: "All", id: "" }],
+    instances: [{ value: "0", label: "All", id: "" }],
+    endpoints: [{ value: "0", label: "All", id: "" }],
     traceList: [],
     traceSpans: [],
-    currentTrace: {},
+    currentTrace: null,
     selectedSpan: {},
     conditions: {
       queryDuration: getDurationTime(),
@@ -63,7 +63,7 @@ export const traceStore = defineStore({
     setTraceCondition(data: Recordable) {
       this.conditions = { ...this.conditions, ...data };
     },
-    setCurrentTrace(trace: Recordable<Trace>) {
+    setCurrentTrace(trace: Trace) {
       this.currentTrace = trace;
     },
     setTraceSpans(spans: Span[]) {
@@ -121,7 +121,7 @@ export const traceStore = defineStore({
         endpointId,
       });
     },
-    async getInstances(id: string) {
+    async getInstances(id?: string) {
       const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
       if (!serviceId) {
         return new Promise((resolve) => resolve({ errors: "Service ID is required" }));
@@ -137,7 +137,7 @@ export const traceStore = defineStore({
       this.instances = [{ value: "0", label: "All" }, ...response.data.pods];
       return response;
     },
-    async getEndpoints(id: string, keyword?: string) {
+    async getEndpoints(id?: string, keyword?: string) {
       const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
       if (!serviceId) {
         return new Promise((resolve) => resolve({ errors: "Service ID is required" }));
@@ -211,6 +211,6 @@ export const traceStore = defineStore({
   },
 });
 
-export function useTraceStore(): Recordable {
+export function useTraceStore() {
   return traceStore(store);
 }
diff --git a/src/types/async-profiling.ts b/src/types/async-profiling.ts
index e6dfa68b..c1fad61b 100644
--- a/src/types/async-profiling.ts
+++ b/src/types/async-profiling.ts
@@ -20,9 +20,12 @@ export type AsyncProfilingTask = {
   serviceId: string;
   serviceInstanceIds: string[];
   createTime: number;
-  events: string;
+  events: string[];
   duration: number;
   execArgs: string;
+  errorInstanceIds: string[];
+  successInstanceIds: string[];
+  logs: AsyncProfilerTaskLog[];
 };
 
 export type AsyncProfileTaskCreationRequest = {
@@ -39,6 +42,7 @@ export type AsyncProfilerStackElement = {
   codeSignature: string;
   total: number;
   self: number;
+  elements?: StackElement[];
 };
 
 export type AsyncProfilerTaskProgress = {
diff --git a/src/types/continous-profiling.ts b/src/types/continous-profiling.ts
index 50dce59b..df1547ed 100644
--- a/src/types/continous-profiling.ts
+++ b/src/types/continous-profiling.ts
@@ -18,6 +18,7 @@
 export interface StrategyItem {
   type: string;
   checkItems: CheckItems[];
+  id?: string;
 }
 export type CheckItems = {
   type: string;
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
index acd07815..ce9e910d 100644
--- a/src/types/dashboard.ts
+++ b/src/types/dashboard.ts
@@ -19,11 +19,17 @@ export type DashboardItem = {
   id?: string;
   entity: string;
   layer: string;
-  isRoot: boolean;
+  isRoot?: boolean;
   name: string;
-  isDefault: boolean;
+  isDefault?: boolean;
   expressions?: string[];
   expressionsConfig?: MetricConfigOpt[];
+  path?: string;
+};
+
+export type NodeDashboard = {
+  scope: string;
+  dashboard: string;
 };
 export interface LayoutConfig {
   x: number;
@@ -47,26 +53,86 @@ export interface LayoutConfig {
   subExpressions?: string[];
   subTypesOfMQE?: string[];
   valueRelatedDashboard?: string;
+  legendMQE?: LegendMQE;
+  linkDashboard?: string;
+  nodeDashboard?: NodeDashboard[];
+  linkServerExpressions?: string[];
+  linkClientExpressions?: string[];
+  nodeExpressions?: string[];
+  description?: any;
+  linkServerMetricConfig?: MetricConfigOpt[];
+  linkClientMetricConfig?: MetricConfigOpt[];
+  nodeMetricConfig?: MetricConfigOpt[];
+  instanceDashboardName?: string;
+  processDashboardName?: string;
 }
+
+type LegendMQE = {
+  expression: string;
+};
+
 export type RelatedTrace = {
   duration: DurationTime;
   status: string;
   queryOrder: string;
   latency: boolean;
   enableRelate: boolean;
+  refIdType: string;
+};
+
+export type FilterDuration = {
+  startTime: string;
+  endTime: string;
+  step?: string;
+};
+
+export type Owner = {
+  scope: string;
+  serviceID: string;
+  serviceInstanceID: string;
+  endpointID: string;
+};
+export type TopListItem = {
+  name: string;
+  value: string;
+  refId: string;
+  owner: Owner;
+};
+export type TopListData = {
+  [key: string]: TopListItem[];
 };
 
 export type Filters = {
-  dataIndex: number;
-  sourceId: string;
+  dataIndex?: number;
+  sourceId?: string;
   isRange?: boolean;
-  duration?: DurationTime;
+  duration?: FilterDuration;
   traceId?: string;
   spanId?: string;
   segmentId?: string;
   id?: string;
   queryOrder?: string;
   status?: string;
+  metricValue?: { label: string; data: string; value: string }[];
+  owner?: Nullable<Owner>;
+  isReadRecords?: boolean | undefined;
+};
+
+export type Series = {
+  data: (number | string)[][];
+  name: string;
+};
+
+export type FilterOption = {
+  series: Series[];
+  type: string;
+  legend: LegendOptions;
+};
+
+export type AssociateProcessorProps = {
+  filters: Filters;
+  option: FilterOption;
+  relatedTrace: RelatedTrace;
 };
 
 export type MetricConfigOpt = {
@@ -83,6 +149,8 @@ export interface WidgetConfig {
   name?: string;
   title?: string;
   tips?: string;
+  url?: string;
+  type?: string;
 }
 
 export type GraphConfig =
@@ -93,14 +161,29 @@ export type GraphConfig =
   | EndpointListConfig
   | ServiceListConfig
   | InstanceListConfig
-  | TopologyConfig;
-export interface BarConfig {
+  | TopologyConfig
+  | TextConfig
+  | TimeRangeConfig
+  | TopListConfig;
+
+export interface BaseConfig {
   type?: string;
+  valueMappings?: { [key: string]: string };
+  legend?: LegendOptions;
+  dashboardName?: string;
+}
+export interface TimeRangeConfig extends BaseConfig {
+  fontSize: number;
+  backgroundColor: string;
+  textAlign: string;
+  fontColor: string;
+  text: string;
+}
+export interface BarConfig extends BaseConfig {
   showBackground?: boolean;
   legend?: LegendOptions;
 }
 export interface LineConfig extends AreaConfig {
-  type?: string;
   smooth?: boolean;
   showSymbol?: boolean;
   step?: boolean;
@@ -111,60 +194,54 @@ export interface LineConfig extends AreaConfig {
   noTooltips?: boolean;
 }
 
-export interface AreaConfig {
-  type?: string;
+export interface AreaConfig extends BaseConfig {
   opacity?: number;
   legend?: LegendOptions;
 }
 
-export interface CardConfig {
-  type?: string;
+export interface CardConfig extends BaseConfig {
   fontSize?: number;
   showUnit?: boolean;
   textAlign?: "center" | "right" | "left";
   valueMappings?: { [key: string]: string };
 }
 
-export interface TextConfig {
+export interface TextConfig extends BaseConfig {
   fontSize: number;
   backgroundColor: string;
   textAlign: string;
   fontColor: string;
   content: string;
+  url: string;
 }
 
-export interface TableConfig {
-  type?: string;
+export interface TableConfig extends BaseConfig {
   showTableValues: boolean;
   tableHeaderCol2: string;
 }
 
-export interface TopListConfig {
-  type?: string;
+export interface TopListConfig extends BaseConfig {
   topN: number;
+  color: string;
 }
 
-export interface ServiceListConfig {
-  type?: string;
+export interface ServiceListConfig extends BaseConfig {
   dashboardName: string;
   fontSize: number;
   showGroup: boolean;
 }
 
-export interface InstanceListConfig {
-  type?: string;
+export interface InstanceListConfig extends BaseConfig {
   dashboardName: string;
   fontSize: number;
 }
 
-export interface EndpointListConfig {
-  type?: string;
+export interface EndpointListConfig extends BaseConfig {
   dashboardName: string;
   fontSize: number;
 }
 
-export interface TopologyConfig {
-  type?: string;
+export interface TopologyConfig extends BaseConfig {
   backgroundColor?: string;
   fontColor?: string;
   iconTheme?: boolean;
@@ -172,6 +249,7 @@ export interface TopologyConfig {
   fontSize?: number;
   depth?: number;
   showDepth?: boolean;
+  showBackground?: boolean;
 }
 export type EventParams = {
   componentType: string;
@@ -207,6 +285,6 @@ type MetricLabel = {
 type MetricValue = {
   name: string;
   value: string;
-  owner: null | string;
+  owner: Nullable<Owner>;
   refId: null | string;
 };
diff --git a/src/types/demand-log.ts b/src/types/demand-log.ts
index 10bd8fd5..ab2dbaf1 100644
--- a/src/types/demand-log.ts
+++ b/src/types/demand-log.ts
@@ -21,7 +21,7 @@ export interface Conditions {
   serviceInstanceId: string;
   duration: DurationTime;
   keywordsOfContent?: string[];
-  excludingKeywordsOfContent?: string;
+  excludingKeywordsOfContent?: string[];
 }
 
 export interface Log {
diff --git a/src/types/ebpf.ts b/src/types/ebpf.ts
index 53f84d32..1dda5b7e 100644
--- a/src/types/ebpf.ts
+++ b/src/types/ebpf.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import type { Process as selectorProcess } from "./selector";
+import type { Process as SelectorProcess } from "./selector";
 
 export interface EBPFTaskCreationRequest {
   serviceId: string;
@@ -55,16 +55,17 @@ interface ProfilingCause {
     current: number;
   };
 }
-
+export interface Process extends SelectorProcess {
+  labels: string[];
+}
 export interface EBPFProfilingSchedule {
   scheduleId: string;
   taskId: string;
-  process: selectorProcess;
+  process: Process;
   endTime: number;
   startTime: number;
 }
 
-export type Process = selectorProcess;
 export type StackElement = {
   id: string;
   originId: string;
@@ -99,6 +100,8 @@ export type AnalyzationTrees = {
   symbol: string;
   dumpCount: number;
   stackType: string;
+  aggregateType: string;
+  elements?: StackElement[];
 };
 export type ProcessNode = {
   id: string;
diff --git a/src/types/events.ts b/src/types/events.ts
index 5c1dc7a7..18d23982 100644
--- a/src/types/events.ts
+++ b/src/types/events.ts
@@ -37,13 +37,13 @@ export type Event = {
 };
 
 export interface QueryEventCondition {
-  uuid: string;
+  uuid?: string;
   source: SourceInput;
-  name: string;
+  name?: string;
   type: EventType;
-  time: Duration;
-  order: string;
-  paging: { pageNum: number; pageSize: number; needTotal: boolean };
+  time?: Duration;
+  order?: string;
+  paging: { pageNum: number; pageSize: number; needTotal?: boolean };
 }
 
 type SourceInput = {
diff --git a/src/types/profile.ts b/src/types/profile.ts
index 7324d3e8..1ae5efc7 100644
--- a/src/types/profile.ts
+++ b/src/types/profile.ts
@@ -14,6 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { Span } from "./trace";
+
 type ProfileStackElement = {
   id: string;
   parentId: string;
@@ -45,22 +47,7 @@ export interface TaskListItem {
   successInstanceIds: string[];
   serviceInstanceIds: string[];
 }
-export interface SegmentSpan {
-  spanId: string;
-  parentSpanId: string;
-  serviceCode: string;
-  serviceInstanceName: string;
-  startTime: number;
-  endTime: number;
-  endpointName: string;
-  type: string;
-  peer: string;
-  component: string;
-  isError: boolean;
-  layer: string;
-  tags: Recordable[];
-  logs: Recordable[];
-}
+export type SegmentSpan = Span;
 
 export interface ProfileTaskCreationRequest {
   serviceId: string;
@@ -71,3 +58,6 @@ export interface ProfileTaskCreationRequest {
   dumpPeriod: number;
   maxSamplingCount: number;
 }
+export type ProfileTimeRange = { start: number; end: number };
+
+export type ProfileAnalyzeParams = { segmentId: string; timeRange: ProfileTimeRange };
diff --git a/src/types/selector.ts b/src/types/selector.ts
index 928e1244..679906f9 100644
--- a/src/types/selector.ts
+++ b/src/types/selector.ts
@@ -14,16 +14,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export type Service = {
+export interface Service {
   id?: string;
   label: string;
   value: string;
   layers?: string[];
   normal?: boolean;
   group?: string;
-  merge?: string;
   shortName?: string;
-};
+}
 
 export type Instance = {
   value: string;
@@ -42,7 +41,7 @@ export type Endpoint = {
   merge?: string;
 };
 
-export type Process = {
+export interface Process {
   id: string;
   name: string;
   serviceId: string;
@@ -52,5 +51,6 @@ export type Process = {
   agentId: string;
   detectType: string;
   attributes: { name: string; value: string }[];
-  labels: string[];
-};
+  value: string;
+  label: string;
+}
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 5a345107..d9033441 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -24,6 +24,6 @@ export type ClusterNode = {
 };
 
 export type ConfigTTL = {
-  metrics: MetricsTTL;
-  records: RecordsTTL;
+  metrics: MetricsTTL[];
+  records: RecordsTTL[];
 };
diff --git a/src/types/topology.ts b/src/types/topology.ts
index ab142ac7..7b7e34e1 100644
--- a/src/types/topology.ts
+++ b/src/types/topology.ts
@@ -52,6 +52,7 @@ export interface Node {
   y?: number;
   level?: number;
   l?: number;
+  serviceId?: string;
 }
 
 export interface ServiceHierarchy {
diff --git a/src/types/trace.ts b/src/types/trace.ts
index a78db87e..570b909e 100644
--- a/src/types/trace.ts
+++ b/src/types/trace.ts
@@ -23,6 +23,8 @@ export interface Trace {
   traceIds: Array<string | any>;
   segmentId: string;
   spans: Span[];
+  endpointNames: string[];
+  traceId: string;
 }
 
 export interface Span {
@@ -44,10 +46,21 @@ export interface Span {
   endTime: number;
   dur?: number;
   children?: Span[];
-  tags?: Array<Map<string, string>>;
-  logs?: log[];
+  tags?: { value: string; key: string }[];
+  logs?: LogRef[];
   parentSegmentId?: string;
   key?: string;
+  serviceInstanceName?: string;
+  attachedEvents?: SpanAttachedEvent[];
+  level?: number;
+  totalExec?: number;
+  groupRef?: StatisticsGroupRef;
+  maxTime?: number;
+  minTime?: number;
+  sumTime?: number;
+  avgTime?: number;
+  count?: number;
+  profiled?: boolean;
 }
 export type Ref = {
   type?: string;
@@ -55,9 +68,9 @@ export type Ref = {
   parentSpanId: number;
   traceId: string;
 };
-export interface log {
+export interface LogRef {
   time: number;
-  data: Map<string, string>;
+  data: { key: string; value: string }[];
 }
 
 export interface StatisticsSpan {
diff --git a/src/views/Layer.vue b/src/views/Layer.vue
index 3f342343..890f7aec 100644
--- a/src/views/Layer.vue
+++ b/src/views/Layer.vue
@@ -24,6 +24,7 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Dashboard from "./dashboard/Edit.vue";
   import { useI18n } from "vue-i18n";
+  import { DashboardItem } from "@/types/dashboard";
 
   const route = useRoute();
   const { t } = useI18n();
@@ -38,7 +39,7 @@ limitations under the License. -->
     dashboardStore.setMode(false);
     await dashboardStore.setDashboards();
     const item = dashboardStore.dashboards.find(
-      (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
+      (d: DashboardItem) =>
         d.layer === dashboardStore.layerId && [EntityType[0].value, EntityType[1].value].includes(d.entity) && d.isRoot,
     );
     if (!item) {
diff --git a/src/views/alarm/Header.vue b/src/views/alarm/Header.vue
index 5d01988f..0e04431a 100644
--- a/src/views/alarm/Header.vue
+++ b/src/views/alarm/Header.vue
@@ -87,7 +87,7 @@ limitations under the License. -->
     alarmStore.alarms.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value,
   );
   const maxRange = computed(() =>
-    getMaxRange(appStore.coldStageMode ? appStore.recordsTTL.coldNormal : appStore.recordsTTL.normal),
+    getMaxRange(appStore.coldStageMode ? appStore.recordsTTL?.coldNormal || 0 : appStore.recordsTTL?.normal || 0),
   );
 
   refreshAlarms({ pageNum: 1 });
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 3d6d523a..b95b1169 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -28,7 +28,7 @@ limitations under the License. -->
       :destroy-on-close="true"
       @closed="dashboardStore.setConfigPanel(false)"
     >
-      <component :is="dashboardStore.selectedGrid.type" />
+      <component :is="dashboardStore.selectedGrid?.type" />
     </el-dialog>
     <el-dialog
       v-model="dashboardStore.showLinkConfig"
@@ -77,9 +77,9 @@ limitations under the License. -->
         dashboardStore.setLayout(setWidgetsID(layout.children || []));
         if (p.entity) {
           dashboardStore.setCurrentDashboard({
-            layer: p.layerId,
-            entity: p.entity,
-            name: p.name,
+            layer: p.layerId as string,
+            entity: p.entity as string,
+            name: p.name as string,
             id: c.id,
             isRoot: layout.isRoot,
           });
@@ -112,7 +112,7 @@ limitations under the License. -->
       }
 
       onUnmounted(() => {
-        dashboardStore.setCurrentDashboard({});
+        dashboardStore.setCurrentDashboard(null);
       });
 
       return {
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index 69d0e92d..97b9b2a6 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -578,14 +578,17 @@ limitations under the License. -->
       name: value,
     });
     dashboards.value = dashboardStore.dashboards.map((item: DashboardItem) => {
-      if (dashboardStore.currentDashboard.id === item.id) {
-        item = dashboardStore.currentDashboard;
+      if (dashboardStore.currentDashboard?.id === item.id) {
+        item = dashboardStore.currentDashboard as DashboardItem;
       }
       return item;
     });
     dashboardStore.resetDashboards(dashboards.value);
     sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
     sessionStorage.removeItem(key);
+    if (!dashboardStore.currentDashboard) {
+      return;
+    }
     const str = [
       dashboardStore.currentDashboard.layer,
       dashboardStore.currentDashboard.entity,
diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index 36219761..e0310ae7 100644
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -81,8 +81,8 @@ limitations under the License. -->
 
       init();
       async function init() {
-        dashboardStore.setLayer(route.params.layer);
-        dashboardStore.setEntity(route.params.entity);
+        dashboardStore.setLayer(route.params.layer as string);
+        dashboardStore.setEntity(route.params.entity as string);
         const { auto, autoPeriod } = config.value;
         if (auto) {
           await setDuration();
@@ -102,30 +102,30 @@ limitations under the License. -->
       async function setSelector() {
         const { serviceId, podId, processId, destServiceId, destPodId, destProcessId, entity } = route.params;
         if (serviceId) {
-          await selectorStore.getService(serviceId);
+          await selectorStore.getService(serviceId as string);
         }
         if (
           [EntityType[4].value, EntityType[5].value, EntityType[6].value, EntityType[7].value].includes(
             entity as string,
           )
         ) {
-          await selectorStore.getService(destServiceId, true);
+          await selectorStore.getService(destServiceId as string, true);
         }
         if ([EntityType[3].value, EntityType[5].value, EntityType[7].value].includes(entity as string)) {
-          await selectorStore.getInstance(podId);
+          await selectorStore.getInstance(podId as string);
         }
         if ([EntityType[2].value, EntityType[6].value].includes(entity as string)) {
-          await selectorStore.getEndpoint(podId);
+          await selectorStore.getEndpoint(podId as string);
         }
         if (EntityType[6].value === entity) {
-          await selectorStore.getEndpoint(destPodId, true);
+          await selectorStore.getEndpoint(destPodId as string, true);
         }
         if ([EntityType[5].value, EntityType[7].value].includes(entity as string)) {
-          await selectorStore.getInstance(destPodId, true);
+          await selectorStore.getInstance(destPodId as string, true);
         }
         if (EntityType[7].value === entity) {
-          selectorStore.getProcess(processId);
-          selectorStore.getProcess(destProcessId, true);
+          selectorStore.getProcess(processId as string);
+          selectorStore.getProcess(destProcessId as string, true);
         }
       }
       async function queryMetrics() {
diff --git a/src/views/dashboard/components/WidgetLink.vue b/src/views/dashboard/components/WidgetLink.vue
index ed16dc23..23dba204 100644
--- a/src/views/dashboard/components/WidgetLink.vue
+++ b/src/views/dashboard/components/WidgetLink.vue
@@ -25,15 +25,15 @@ limitations under the License. -->
     <div v-else>
       <label>{{ t("auto") }}</label>
       <el-switch class="mr-5" v-model="auto" style="height: 25px" />
-      <Selector v-model="freshOpt" :options="RefreshOptions" size="small" />
+      <Selector style="width: 200px" v-model="freshOpt" :options="RefreshOptions" />
       <div class="mt-5">
         <label>{{ t("period") }}</label>
-        <el-input class="auto-period" size="small" type="number" v-model="period" min="1" />
+        <el-input class="auto-period" type="number" v-model="period" min="1" />
         <span class="ml-5">{{ t("second") }}</span>
         <i class="ml-10">{{ t("timeReload") }}</i>
       </div>
     </div>
-    <el-button size="small" type="primary" class="mt-20" @click="getLink">{{ t("generateLink") }}</el-button>
+    <el-button type="primary" class="mt-20" @click="getLink">{{ t("generateLink") }}</el-button>
     <div v-show="widgetLink" class="mt-10">
       <span @click="viewPage" class="link">
         {{ host + widgetLink }}
diff --git a/src/views/dashboard/configuration/ContinuousProfiling.vue b/src/views/dashboard/configuration/ContinuousProfiling.vue
index a0a947f8..e91e865c 100644
--- a/src/views/dashboard/configuration/ContinuousProfiling.vue
+++ b/src/views/dashboard/configuration/ContinuousProfiling.vue
@@ -49,12 +49,12 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { EntityType } from "../data";
-  import type { DashboardItem } from "@/types/dashboard";
+  import type { DashboardItem, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const instanceDashboardName = ref<boolean>(dashboardStore.selectedGrid.instanceDashboardName);
-  const processDashboardName = ref<number>(dashboardStore.selectedGrid.processDashboardName);
+  const instanceDashboardName = ref<string>(dashboardStore.selectedGrid?.instanceDashboardName || "");
+  const processDashboardName = ref<string>(dashboardStore.selectedGrid?.processDashboardName || "");
   const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
   const instanceDashboards: Array<DashboardItem & { label: string; value: string }> = [];
   const processDashboards: Array<DashboardItem & { label: string; value: string }> = [];
@@ -76,14 +76,14 @@ limitations under the License. -->
   }
 
   function applyConfig() {
-    dashboardStore.setConfigs(dashboardStore.selectedGrid);
+    dashboardStore.setConfigs(dashboardStore.selectedGrid as LayoutConfig);
     dashboardStore.setConfigPanel(false);
   }
   function changeDashboard(param: { [key: string]: unknown }) {
     dashboardStore.selectWidget({
       ...dashboardStore.selectedGrid,
       ...param,
-    });
+    } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/Event.vue b/src/views/dashboard/configuration/Event.vue
index 0f59cb57..9291e5ec 100644
--- a/src/views/dashboard/configuration/Event.vue
+++ b/src/views/dashboard/configuration/Event.vue
@@ -28,23 +28,22 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { ref } from "vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const originConfig = dashboardStore.selectedGrid;
-  const eventAssociate = ref(dashboardStore.selectedGrid.eventAssociate || false);
+  const eventAssociate = ref(dashboardStore.selectedGrid?.eventAssociate || false);
 
   function updateConfig() {
-    dashboardStore.selectedGrid = {
-      ...dashboardStore.selectedGrid,
-      eventAssociate,
-    };
-    dashboardStore.selectWidget(dashboardStore.selectedGrid);
+    const { selectedGrid } = dashboardStore;
+
+    dashboardStore.selectWidget({ ...selectedGrid, eventAssociate: eventAssociate.value } as LayoutConfig);
   }
 
   function applyConfig() {
     dashboardStore.setConfigPanel(false);
-    dashboardStore.setConfigs(dashboardStore.selectedGrid);
+    dashboardStore.setConfigs(dashboardStore.selectedGrid as LayoutConfig);
   }
 
   function cancelConfig() {
diff --git a/src/views/dashboard/configuration/Tab.vue b/src/views/dashboard/configuration/Tab.vue
index 4bf394af..5ce6dd6f 100644
--- a/src/views/dashboard/configuration/Tab.vue
+++ b/src/views/dashboard/configuration/Tab.vue
@@ -33,13 +33,14 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { ElMessage } from "element-plus";
   import { WidgetType, ListEntity } from "@/views/dashboard/data";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   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) =>
+    (dashboardStore.selectedGrid?.children || []).filter((child: any) =>
       child.children.find(
         (item: any) =>
           item.type === WidgetType.Widget &&
@@ -48,7 +49,7 @@ limitations under the License. -->
     ),
   );
 
-  for (const child of originConfig.children || []) {
+  for (const child of originConfig?.children || []) {
     expressions[child.name] = child.expression || "";
   }
   function changeExpression(name: string) {
@@ -56,7 +57,7 @@ limitations under the License. -->
       ElMessage.error("Only support the is_present function");
       return;
     }
-    const children = JSON.parse(JSON.stringify(dashboardStore.selectedGrid.children || []));
+    const children = JSON.parse(JSON.stringify(dashboardStore.selectedGrid?.children || []));
 
     for (const item of children) {
       if (item.name === name) {
@@ -64,11 +65,11 @@ limitations under the License. -->
       }
     }
 
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, children });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, children } as LayoutConfig);
   }
   function applyConfig() {
     dashboardStore.setConfigPanel(false);
-    dashboardStore.setConfigs(dashboardStore.selectedGrid);
+    dashboardStore.setConfigs(dashboardStore.selectedGrid as LayoutConfig);
   }
 
   function cancelConfig() {
diff --git a/src/views/dashboard/configuration/Text.vue b/src/views/dashboard/configuration/Text.vue
index 984bd06b..3c4694e7 100644
--- a/src/views/dashboard/configuration/Text.vue
+++ b/src/views/dashboard/configuration/Text.vue
@@ -78,10 +78,12 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { ref } from "vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import type { LayoutConfig, TextConfig } from "@/types/dashboard";
+
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const originConfig = dashboardStore.selectedGrid;
-  const graph = originConfig.graph || {};
+  const graph = (originConfig?.graph as TextConfig) || {};
   const url = ref(graph.url || "");
   const backgroundColor = ref(graph.backgroundColor || "green");
   const fontColor = ref(graph.fontColor || "white");
@@ -112,14 +114,14 @@ limitations under the License. -->
   function changeConfig(param: { [key: string]: unknown }) {
     const { selectedGrid } = dashboardStore;
     const graph = {
-      ...selectedGrid.graph,
+      ...selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...selectedGrid, graph });
+    dashboardStore.selectWidget({ ...selectedGrid, graph } as LayoutConfig);
   }
   function applyConfig() {
     dashboardStore.setConfigPanel(false);
-    dashboardStore.setConfigs(dashboardStore.selectedGrid);
+    dashboardStore.setConfigs(dashboardStore.selectedGrid as LayoutConfig);
   }
 
   function cancelConfig() {
diff --git a/src/views/dashboard/configuration/ThirdPartyApp.vue b/src/views/dashboard/configuration/ThirdPartyApp.vue
index d8b4f4cb..e9f9063f 100644
--- a/src/views/dashboard/configuration/ThirdPartyApp.vue
+++ b/src/views/dashboard/configuration/ThirdPartyApp.vue
@@ -30,11 +30,12 @@ limitations under the License. -->
   import { ref } from "vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { validateAndSanitizeUrl } from "@/utils/validateAndSanitizeUrl";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const originConfig = dashboardStore.selectedGrid;
-  const widget = originConfig.widget || {};
+  const widget = originConfig?.widget || {};
   const url = ref(widget.url || "");
   const urlError = ref("");
 
@@ -55,10 +56,10 @@ limitations under the License. -->
 
     const { selectedGrid } = dashboardStore;
     const widget = {
-      ...dashboardStore.selectedGrid.widget,
+      ...dashboardStore.selectedGrid?.widget,
       [key]: param[key], // Use the sanitized URL directly, no need for decodeURIComponent
     };
-    dashboardStore.selectWidget({ ...selectedGrid, widget });
+    dashboardStore.selectWidget({ ...selectedGrid, widget } as LayoutConfig);
   }
 
   function applyConfig() {
@@ -66,7 +67,7 @@ limitations under the License. -->
       return; // Don't apply if there's a validation error
     }
     dashboardStore.setConfigPanel(false);
-    dashboardStore.setConfigs(dashboardStore.selectedGrid);
+    dashboardStore.setConfigs(dashboardStore.selectedGrid as LayoutConfig);
   }
 
   function cancelConfig() {
diff --git a/src/views/dashboard/configuration/TimeRange.vue b/src/views/dashboard/configuration/TimeRange.vue
index a0516edd..14a8a551 100644
--- a/src/views/dashboard/configuration/TimeRange.vue
+++ b/src/views/dashboard/configuration/TimeRange.vue
@@ -74,11 +74,12 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { ref } from "vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import type { TimeRangeConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const originConfig = dashboardStore.selectedGrid;
-  const graph = originConfig.graph || {};
+  const graph = (originConfig?.graph as TimeRangeConfig) || {};
   const backgroundColor = ref(graph.backgroundColor || "green");
   const fontColor = ref(graph.fontColor || "white");
   const fontSize = ref<number>(graph.fontSize || 12);
@@ -107,14 +108,14 @@ limitations under the License. -->
   function changeConfig(param: { [key: string]: unknown }) {
     const { selectedGrid } = dashboardStore;
     const graph = {
-      ...selectedGrid.graph,
+      ...selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...selectedGrid, graph });
+    dashboardStore.selectWidget({ ...selectedGrid, graph } as LayoutConfig);
   }
   function applyConfig() {
     dashboardStore.setConfigPanel(false);
-    dashboardStore.setConfigs(dashboardStore.selectedGrid);
+    dashboardStore.setConfigs(dashboardStore.selectedGrid as LayoutConfig);
   }
 
   function cancelConfig() {
diff --git a/src/views/dashboard/configuration/Topology.vue b/src/views/dashboard/configuration/Topology.vue
index 64242f9d..9df56cfb 100644
--- a/src/views/dashboard/configuration/Topology.vue
+++ b/src/views/dashboard/configuration/Topology.vue
@@ -34,24 +34,25 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { DepthList } from "../data";
   import type { Option } from "@/types/app";
+  import type { TopologyConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph || {};
-  const showDepth = ref<boolean>(graph.showDepth);
-  const depth = ref<number>(graph.depth || 2);
+  const graph = (dashboardStore.selectedGrid?.graph as TopologyConfig) || {};
+  const showDepth = ref<boolean>(graph?.showDepth || false);
+  const depth = ref<number>(graph?.depth || 2);
 
   function applyConfig() {
-    dashboardStore.setConfigs(dashboardStore.selectedGrid);
+    dashboardStore.setConfigs(dashboardStore.selectedGrid as LayoutConfig);
     dashboardStore.setConfigPanel(false);
   }
   function changeConfig(param: { [key: string]: unknown }) {
     const { selectedGrid } = dashboardStore;
     const graph = {
-      ...selectedGrid.graph,
+      ...selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...selectedGrid, graph });
+    dashboardStore.selectWidget({ ...selectedGrid, graph } as LayoutConfig);
   }
   function changeDepth(opt: Option[] | any) {
     const val = opt[0].value;
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 3781b979..a128074a 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -32,16 +32,16 @@ limitations under the License. -->
           :data="states.source"
           :config="{
             ...graph,
-            decorations: dashboardStore.selectedGrid.graph?.decorations,
-            legend: dashboardStore.selectedGrid.graph?.legend,
-            i: dashboardStore.selectedGrid.i,
-            metricConfig: dashboardStore.selectedGrid.metricConfig,
-            relatedTrace: dashboardStore.selectedGrid.relatedTrace,
-            expressions: dashboardStore.selectedGrid.expressions || [],
-            typesOfMQE: dashboardStore.selectedGrid.typesOfMQE || [],
-            subExpressions: dashboardStore.selectedGrid.subExpressions || [],
-            subTypesOfMQE: dashboardStore.selectedGrid.subTypesOfMQE || [],
-            valueRelatedDashboard: dashboardStore.selectedGrid.valueRelatedDashboard,
+            valueMappings: dashboardStore.selectedGrid?.graph?.valueMappings,
+            legend: dashboardStore.selectedGrid?.graph?.legend,
+            i: dashboardStore.selectedGrid?.i,
+            metricConfig: dashboardStore.selectedGrid?.metricConfig,
+            relatedTrace: dashboardStore.selectedGrid?.relatedTrace,
+            expressions: dashboardStore.selectedGrid?.expressions || [],
+            typesOfMQE: dashboardStore.selectedGrid?.typesOfMQE || [],
+            subExpressions: dashboardStore.selectedGrid?.subExpressions || [],
+            subTypesOfMQE: dashboardStore.selectedGrid?.subTypesOfMQE || [],
+            valueRelatedDashboard: dashboardStore.selectedGrid?.valueRelatedDashboard,
           }"
           :needQuery="true"
           @expressionTips="getErrors"
@@ -88,6 +88,7 @@ limitations under the License. -->
   import type { Option } from "@/types/app";
   import graphs from "../graphs";
   import CustomOptions from "./widget/index";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   export default defineComponent({
     name: "WidgetEdit",
@@ -106,23 +107,21 @@ limitations under the License. -->
       const states = reactive<{
         activeNames: string;
         source: unknown;
-        index: string;
+        index: string | undefined;
         visType: Option[];
       }>({
         activeNames: "1",
         source: {},
-        index: dashboardStore.selectedGrid.i,
+        index: dashboardStore.selectedGrid?.i,
         visType: [],
       });
       const originConfig = dashboardStore.selectedGrid;
-      const widget = computed(() => dashboardStore.selectedGrid.widget || {});
-      const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+      const widget = computed(() => dashboardStore.selectedGrid?.widget || {});
+      const graph = computed(() => dashboardStore.selectedGrid?.graph || {});
       const title = computed(() => encodeURIComponent(widget.value.title || ""));
       const tips = computed(() => encodeURIComponent(widget.value.tips || ""));
       const hasAssociate = computed(() =>
-        ["Bar", "Line", "Area", "TopList"].includes(
-          dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type,
-        ),
+        ["Bar", "Line", "Area", "TopList"].includes(dashboardStore.selectedGrid?.graph?.type || ""),
       );
 
       function getSource(source: unknown) {
@@ -140,7 +139,7 @@ limitations under the License. -->
 
       function applyConfig() {
         dashboardStore.setConfigPanel(false);
-        dashboardStore.setConfigs(dashboardStore.selectedGrid);
+        dashboardStore.setConfigs(dashboardStore.selectedGrid as LayoutConfig);
       }
 
       function cancelConfig() {
diff --git a/src/views/dashboard/configuration/widget/AssociateOptions.vue b/src/views/dashboard/configuration/widget/AssociateOptions.vue
index 9337fae9..92719557 100644
--- a/src/views/dashboard/configuration/widget/AssociateOptions.vue
+++ b/src/views/dashboard/configuration/widget/AssociateOptions.vue
@@ -33,24 +33,25 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import getDashboard from "@/hooks/useDashboardsSession";
   import type { Option } from "@/types/app";
+  import type { DashboardItem, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const associate = dashboardStore.selectedGrid.associate || [];
+  const associate = dashboardStore.selectedGrid?.associate || [];
   const widgetIds = ref<string[]>(associate.map((d: { widgetId: string }) => d.widgetId));
   const widgets: any = computed(() => {
-    const widgetList = getDashboard(dashboardStore.currentDashboard).widgets;
+    const widgetList = getDashboard(dashboardStore.currentDashboard as DashboardItem).widgets;
     const items = [];
     for (const d of widgetList) {
       const isLinear = ["Bar", "Line", "Area"].includes((d.graph && d.graph.type) || "");
-      if (isLinear && d.id && dashboardStore.selectedGrid.id !== d.id) {
+      if (isLinear && d.id && dashboardStore.selectedGrid?.id !== d.id) {
         items.push({ value: d.id, label: (d.widget && d.widget.name) || d.id });
       }
     }
     return items;
   });
   function updateWidgetConfig(options: Option[]) {
-    const arr: any = getDashboard(dashboardStore.currentDashboard).widgets;
+    const arr: any = getDashboard(dashboardStore.currentDashboard as DashboardItem).widgets;
     const opt = options.map((d: Option) => {
       return { widgetId: d.value };
     });
@@ -60,7 +61,7 @@ limitations under the License. -->
       ...dashboardStore.selectedGrid,
       associate: opt,
     };
-    dashboardStore.selectWidget({ ...widget });
+    dashboardStore.selectWidget({ ...widget } as LayoutConfig);
 
     // remove unuse association widget option
     for (const id of widgetIds.value) {
@@ -76,7 +77,7 @@ limitations under the License. -->
     // add association options in target widgets
     for (let i = 0; i < opt.length; i++) {
       const item = JSON.parse(JSON.stringify(opt));
-      item[i] = { widgetId: dashboardStore.selectedGrid.id };
+      item[i] = { widgetId: dashboardStore.selectedGrid?.id };
       const w = arr.find((d: { id: string }) => d.id === opt[i].widgetId);
       const config = {
         ...w,
diff --git a/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue b/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
index 9b980723..921ce008 100644
--- a/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
+++ b/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
@@ -62,6 +62,7 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { RefIdTypes } from "../../data";
+  import type { LayoutConfig, RelatedTrace } from "@/types/dashboard";
 
   const QueryOrders = [
     { label: "None", value: "BY_START_TIME" },
@@ -74,21 +75,20 @@ limitations under the License. -->
   ];
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const { graph, relatedTrace } = dashboardStore.selectedGrid;
-  const traceOpt = relatedTrace || {};
-  const status = ref<string>(traceOpt.status || Status[0].value);
-  const queryOrder = ref<string>(traceOpt.queryOrder || QueryOrders[0].value);
-  const latency = ref<boolean>(traceOpt.latency || false);
-  const enableRelate = ref<boolean>(traceOpt.enableRelate || false);
-  const type = ref<string>((graph && graph.type) || "");
-  const refIdType = ref<string>(traceOpt.refIdType || "");
+  const traceOpt = dashboardStore.selectedGrid?.relatedTrace as RelatedTrace;
+  const status = ref<string>(traceOpt?.status || Status[0].value);
+  const queryOrder = ref<string>(traceOpt?.queryOrder || QueryOrders[0].value);
+  const latency = ref<boolean>(traceOpt?.latency || false);
+  const enableRelate = ref<boolean>(traceOpt?.enableRelate || false);
+  const type = ref<string>(dashboardStore.selectedGrid?.graph?.type || "");
+  const refIdType = ref<string>(traceOpt?.refIdType || "");
 
   function updateConfig(param: { [key: string]: unknown }) {
     const relatedTrace = {
-      ...dashboardStore.selectedGrid.relatedTrace,
+      ...dashboardStore.selectedGrid?.relatedTrace,
       ...param,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, relatedTrace });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, relatedTrace } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/WidgetOptions.vue b/src/views/dashboard/configuration/widget/WidgetOptions.vue
index 7517c1d3..11fc5670 100644
--- a/src/views/dashboard/configuration/widget/WidgetOptions.vue
+++ b/src/views/dashboard/configuration/widget/WidgetOptions.vue
@@ -50,11 +50,11 @@ limitations under the License. -->
   import { ElMessage } from "element-plus";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import getDashboard from "@/hooks/useDashboardsSession";
-  import type { LayoutConfig } from "@/types/dashboard";
+  import type { LayoutConfig, DashboardItem } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const widget = dashboardStore.selectedGrid.widget || {};
+  const widget = dashboardStore.selectedGrid?.widget || {};
   const title = ref<string>(widget.title || "");
   const tips = ref<string>(widget.tips || "");
   const name = ref<string>(widget.name || "");
@@ -66,10 +66,10 @@ limitations under the License. -->
     }
     const { selectedGrid } = dashboardStore;
     const widget = {
-      ...dashboardStore.selectedGrid.widget,
+      ...dashboardStore.selectedGrid?.widget,
       [key]: decodeURIComponent(param[key]),
     };
-    dashboardStore.selectWidget({ ...selectedGrid, widget });
+    dashboardStore.selectWidget({ ...selectedGrid, widget } as LayoutConfig);
   }
   function updateWidgetName(param: { [key: string]: string }) {
     const key = Object.keys(param)[0];
@@ -79,7 +79,7 @@ limitations under the License. -->
       ElMessage.error(t("nameTip"));
       return;
     }
-    const { widgets } = getDashboard(dashboardStore.currentDashboard);
+    const { widgets } = getDashboard(dashboardStore.currentDashboard as DashboardItem);
     const item = widgets.find((d: LayoutConfig) => d.widget && d.widget.name === n);
     if (item) {
       ElMessage.error(t("duplicateName"));
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Area.vue b/src/views/dashboard/configuration/widget/graph-styles/Area.vue
index 6ca215cf..e651f14d 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Area.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Area.vue
@@ -33,19 +33,20 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Legend from "./components/Legend.vue";
+  import type { AreaConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph || {};
+  const graph = (dashboardStore.selectedGrid?.graph as AreaConfig) || {};
 
   const opacity = ref(graph.opacity);
 
   function updateConfig(param: { [key: string]: unknown }) {
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Bar.vue b/src/views/dashboard/configuration/widget/graph-styles/Bar.vue
index 67f3714e..2ef6132b 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Bar.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Bar.vue
@@ -29,18 +29,19 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useI18n } from "vue-i18n";
   import Legend from "./components/Legend.vue";
+  import type { BarConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph;
+  const graph = (dashboardStore.selectedGrid?.graph as BarConfig) || {};
   const showBackground = ref(graph.showBackground || false);
 
   function changeConfig(param: { [key: string]: unknown }) {
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Card.vue b/src/views/dashboard/configuration/widget/graph-styles/Card.vue
index 9f8398bb..1716fec3 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Card.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Card.vue
@@ -39,19 +39,20 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import ValueMappings from "./components/ValueMappings.vue";
+  import type { CardConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph || {};
+  const graph = (dashboardStore.selectedGrid?.graph as CardConfig) || {};
   const fontSize = ref(graph.fontSize);
-  const showUnit = ref<boolean>(graph.showUnit);
+  const showUnit = ref<boolean>(graph.showUnit || false);
 
   function updateConfig(param: { [key: string]: unknown }) {
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue b/src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
index 53fabc86..b28e6af7 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
@@ -31,19 +31,20 @@ limitations under the License. -->
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import type { EndpointListConfig, LayoutConfig } from "@/types/dashboard";
 
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph;
+  const graph = (dashboardStore.selectedGrid?.graph as EndpointListConfig) || {};
   const { t } = useI18n();
 
   const fontSize = ref(graph.fontSize);
 
   function updateConfig(param: { [key: string]: unknown }) {
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/HeatMap.vue b/src/views/dashboard/configuration/widget/graph-styles/HeatMap.vue
index d3eb75ff..47546a8d 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/HeatMap.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/HeatMap.vue
@@ -31,18 +31,19 @@ limitations under the License. -->
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import type { CardConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph || {};
+  const graph = (dashboardStore.selectedGrid?.graph as CardConfig) || {};
   const fontSize = ref(graph.fontSize);
 
   function updateConfig(param: { [key: string]: unknown }) {
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue b/src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
index 93697378..451cd685 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
@@ -31,18 +31,19 @@ limitations under the License. -->
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import type { InstanceListConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph;
+  const graph = (dashboardStore.selectedGrid?.graph as InstanceListConfig) || {};
   const fontSize = ref(graph.fontSize);
 
   function updateConfig(param: { [key: string]: unknown }) {
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Line.vue b/src/views/dashboard/configuration/widget/graph-styles/Line.vue
index 5f421eb3..b8274cbe 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Line.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Line.vue
@@ -51,20 +51,21 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Legend from "./components/Legend.vue";
   import { isDef } from "@/utils/is";
+  import type { LineConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+  const graph = computed(() => (dashboardStore.selectedGrid?.graph as LineConfig) || {});
   const smooth = ref(graph.value.smooth);
   const showSymbol = ref(isDef(graph.value.showSymbol) ? graph.value.showSymbol : true);
   const step = ref(graph.value.step);
 
   function updateConfig(param: { [key: string]: unknown }) {
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue b/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
index c295284d..9bf0638d 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
@@ -40,19 +40,20 @@ limitations under the License. -->
   import { ref, computed } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import type { ServiceListConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+  const graph = computed(() => (dashboardStore.selectedGrid?.graph as ServiceListConfig) || {});
   const fontSize = ref(graph.value.fontSize);
 
   function updateConfig(param: { [key: string]: unknown }) {
     const { selectedGrid } = dashboardStore;
     const graph = {
-      ...selectedGrid.graph,
+      ...selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...selectedGrid, graph });
+    dashboardStore.selectWidget({ ...selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Table.vue b/src/views/dashboard/configuration/widget/graph-styles/Table.vue
index 5d9f314e..aff47ca1 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Table.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Table.vue
@@ -41,19 +41,20 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import ValueMappings from "./components/ValueMappings.vue";
+  import type { TableConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph || {};
+  const graph = (dashboardStore.selectedGrid?.graph as TableConfig) || {};
   const showTableValues = ref(graph.showTableValues);
   const tableHeaderCol2 = ref(graph.tableHeaderCol2);
 
   function updateConfig(param: { [key: string]: unknown }) {
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/TopList.vue b/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
index 06a79ba5..7b1b8efd 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
@@ -29,10 +29,11 @@ limitations under the License. -->
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import type { TopListConfig, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph || {};
+  const graph = (dashboardStore.selectedGrid?.graph as TopListConfig) || {};
   const color = ref(graph.color || "purple");
   const Colors = [
     { label: "Purple", value: "purple" },
@@ -47,10 +48,10 @@ limitations under the License. -->
 
   function updateConfig(param: { [key: string]: unknown }) {
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       ...param,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
index ff9cf241..e69eb4a8 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
@@ -94,11 +94,11 @@ limitations under the License. -->
   import { computed, reactive } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import type { LegendOptions } from "@/types/dashboard";
+  import type { LegendOptions, LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+  const graph = computed(() => dashboardStore.selectedGrid?.graph || {});
   const legend = reactive<LegendOptions>({
     show: true,
     total: false,
@@ -113,17 +113,17 @@ limitations under the License. -->
   });
 
   function updateLegendConfig(param: { [key: string]: unknown }) {
-    const g = {
-      ...dashboardStore.selectedGrid.graph,
+    const graph = {
+      ...dashboardStore.selectedGrid?.graph,
       legend: {
-        ...dashboardStore.selectedGrid.graph.legend,
+        ...dashboardStore.selectedGrid?.graph?.legend,
         ...param,
       },
     };
     dashboardStore.selectWidget({
       ...dashboardStore.selectedGrid,
-      graph: g,
-    });
+      graph,
+    } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue b/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue
index a08cbddc..42e111f1 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue
@@ -39,14 +39,15 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
   import { ref } from "vue";
-  import { useDashboardStore } from "@/store/modules/dashboard";
   import { useI18n } from "vue-i18n";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph;
+  const graph = dashboardStore.selectedGrid?.graph || {};
   const valueMappings = ref<{ [key: string]: string }>(graph?.valueMappings || {});
-  const keys = ref<string[]>(graph.valueMappings ? Object.keys(valueMappings.value) : [""]);
+  const keys = ref<string[]>(graph?.valueMappings ? Object.keys(valueMappings.value) : [""]);
 
   function changeKeys(event: any, index: number) {
     const params = event.target.textContent || "";
@@ -82,10 +83,10 @@ limitations under the License. -->
 
   function updateConfig() {
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       valueMappings: valueMappings.value,
     };
-    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph } as LayoutConfig);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index f85bdd78..b2f7ccdf 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -126,7 +126,7 @@ limitations under the License. -->
   import Icon from "@/components/Icon.vue";
   import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
   import { useI18n } from "vue-i18n";
-  import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
+  import type { DashboardItem, MetricConfigOpt, LayoutConfig } from "@/types/dashboard";
   import Standard from "./Standard.vue";
 
   /*global defineEmits, Indexable */
@@ -142,11 +142,11 @@ limitations under the License. -->
     },
   });
   const dashboardStore = useDashboardStore();
-  const metrics = computed(() => dashboardStore.selectedGrid.expressions || []);
-  const subMetrics = computed(() => dashboardStore.selectedGrid.subExpressions || []);
-  const subMetricTypes = computed(() => dashboardStore.selectedGrid.subTypesOfMQE || []);
-  const graph = computed(() => dashboardStore.selectedGrid.graph || {});
-  const typesOfMQE = computed(() => dashboardStore.selectedGrid.typesOfMQE || []);
+  const metrics = computed(() => dashboardStore.selectedGrid?.expressions || []);
+  const subMetrics = computed(() => dashboardStore.selectedGrid?.subExpressions || []);
+  const subMetricTypes = computed(() => dashboardStore.selectedGrid?.subTypesOfMQE || []);
+  const graph = computed(() => dashboardStore.selectedGrid?.graph || {});
+  const typesOfMQE = computed(() => dashboardStore.selectedGrid?.typesOfMQE || []);
   const states = reactive<{
     metrics: string[];
     subMetrics: string[];
@@ -166,13 +166,13 @@ limitations under the License. -->
     metricTypeList: [],
     isList: false,
     isTopList: false,
-    dashboardName: graph.value.dashboardName,
+    dashboardName: graph.value.dashboardName || "",
     dashboardList: [{ label: "", value: "" }],
     tips: [],
     subTips: [],
     subMetrics: subMetrics.value.length ? subMetrics.value : [""],
     subMetricTypes: subMetricTypes.value.length ? subMetricTypes.value : [""],
-    valueRelatedDashboard: dashboardStore.selectedGrid.valueRelatedDashboard,
+    valueRelatedDashboard: dashboardStore.selectedGrid?.valueRelatedDashboard || "",
   });
   const currentMetricConfig = ref<MetricConfigOpt>({
     unit: "",
@@ -182,7 +182,7 @@ limitations under the License. -->
   });
 
   states.isTopList = graph.value.type === ChartTypes[4].value;
-  states.isList = ListChartTypes.includes(graph.value.type);
+  states.isList = ListChartTypes.includes(graph.value.type || "");
   const defaultLen = ref<number>(states.isList ? 5 : 20);
 
   setDashboards();
@@ -201,7 +201,7 @@ limitations under the License. -->
   });
 
   function setDashboards(type?: string) {
-    const chart = type || (dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type);
+    const chart = type || dashboardStore.selectedGrid?.graph?.type || "";
     const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
     const arr = list.reduce((prev: (DashboardItem & { label: string; value: string })[], d: DashboardItem) => {
       if (d.layer === dashboardStore.layerId) {
@@ -237,7 +237,7 @@ limitations under the License. -->
         ...dashboardStore.selectedGrid,
         expressions: [""],
         typesOfMQE: [""],
-      });
+      } as LayoutConfig);
       states.metrics = [""];
       states.metricTypes = [""];
       defaultLen.value = 5;
@@ -246,7 +246,7 @@ limitations under the License. -->
     dashboardStore.selectWidget({
       ...dashboardStore.selectedGrid,
       graph: chart,
-    });
+    } as LayoutConfig);
     setDashboards(chart.type);
     states.dashboardName = "";
     defaultLen.value = 10;
@@ -260,7 +260,7 @@ limitations under the License. -->
   }
 
   async function queryMetricsWithExpressions() {
-    const { expressions, metricConfig, i } = dashboardStore.selectedGrid;
+    const { expressions, metricConfig, i } = dashboardStore.selectedGrid as LayoutConfig;
     if (!(expressions && expressions[0])) {
       return emit("update", {});
     }
@@ -272,7 +272,7 @@ limitations under the License. -->
     dashboardStore.selectWidget({
       ...dashboardStore.selectedGrid,
       typesOfMQE: states.metricTypes,
-    });
+    } as LayoutConfig);
     emit("update", params.source || {});
     if (states.isTopList) {
       const values: any = Object.values(params.source)[0];
@@ -292,7 +292,7 @@ limitations under the License. -->
     dashboardStore.selectWidget({
       ...dashboardStore.selectedGrid,
       valueRelatedDashboard: states.valueRelatedDashboard,
-    });
+    } as LayoutConfig);
   }
 
   function changeDashboard(opt: { value: string }[]) {
@@ -302,13 +302,13 @@ limitations under the License. -->
       states.dashboardName = opt[0].value;
     }
     const graph = {
-      ...dashboardStore.selectedGrid.graph,
+      ...dashboardStore.selectedGrid?.graph,
       dashboardName: states.dashboardName,
     };
     dashboardStore.selectWidget({
       ...dashboardStore.selectedGrid,
       graph,
-    });
+    } as LayoutConfig);
   }
   function addMetric() {
     states.metrics.push("");
@@ -350,7 +350,7 @@ limitations under the License. -->
     states.metrics.splice(index, 1);
     states.metricTypes.splice(index, 1);
     states.tips.splice(index, 1);
-    const config = dashboardStore.selectedGrid.metricConfig || [];
+    const config = dashboardStore.selectedGrid?.metricConfig || [];
     const metricConfig = config[index] ? config.splice(index, 1) : config;
     let p = {};
     if (states.isList) {
@@ -369,7 +369,7 @@ limitations under the License. -->
       ...dashboardStore.selectedGrid,
       ...p,
       metricConfig,
-    });
+    } as LayoutConfig);
     queryMetrics();
   }
 
@@ -381,7 +381,7 @@ limitations under the License. -->
       labelsIndex: "",
       sortOrder: "DES",
     };
-    if (!dashboardStore.selectedGrid.metricConfig || !dashboardStore.selectedGrid.metricConfig[index]) {
+    if (!dashboardStore.selectedGrid?.metricConfig || !dashboardStore.selectedGrid?.metricConfig[index]) {
       currentMetricConfig.value = n;
       return;
     }
@@ -397,7 +397,7 @@ limitations under the License. -->
     dashboardStore.selectWidget({
       ...dashboardStore.selectedGrid,
       expressions: states.metrics,
-    });
+    } as LayoutConfig);
     if (params) {
       await queryMetrics();
     }
@@ -410,7 +410,7 @@ limitations under the License. -->
       ...dashboardStore.selectedGrid,
       subExpressions: states.subMetrics,
       subTypesOfMQE: states.subMetricTypes,
-    });
+    } as LayoutConfig);
     if (params) {
       await queryMetrics();
     }
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 6b8de5b6..25bb0c5c 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -86,7 +86,7 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { SortOrder, ExpressionResultType, ListChartTypes } from "@/views/dashboard/data";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import type { MetricConfigOpt } from "@/types/dashboard";
+  import type { MetricConfigOpt, LayoutConfig } from "@/types/dashboard";
 
   /*global defineEmits, defineProps */
   const props = defineProps({
@@ -103,13 +103,15 @@ limitations under the License. -->
     ...props.currentMetricConfig,
     topN: props.currentMetricConfig.topN || 10,
   });
-  const metricTypes = computed(() => dashboardStore.selectedGrid.typesOfMQE || []);
+  const metricTypes = computed(() => dashboardStore.selectedGrid?.typesOfMQE || []);
   const isList = computed(() => {
-    const graph = dashboardStore.selectedGrid.graph || {};
-    return ListChartTypes.includes(graph.type);
+    const graph = dashboardStore.selectedGrid?.graph || {};
+    return ListChartTypes.includes(graph.type || "");
   });
   const isTopn = computed(() =>
-    [ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST].includes(metricTypes.value[props.index]),
+    [ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST].includes(
+      metricTypes.value[props.index] as ExpressionResultType,
+    ),
   );
 
   function updateConfig(index: number, param: { [key: string]: string }) {
@@ -120,13 +122,13 @@ limitations under the License. -->
     changeConfigs(index, { [key]: decodeURIComponent(param[key]) });
   }
   function changeConfigs(index: number, param: { [key: string]: string | number }) {
-    const metricConfig = dashboardStore.selectedGrid.metricConfig || [];
+    const metricConfig = dashboardStore.selectedGrid?.metricConfig || [];
 
     metricConfig[index] = { ...metricConfig[index], ...param };
     dashboardStore.selectWidget({
       ...dashboardStore.selectedGrid,
       metricConfig,
-    });
+    } as LayoutConfig);
     emit("update");
   }
   watch(
diff --git a/src/views/dashboard/controls/AsyncProfiling.vue b/src/views/dashboard/controls/AsyncProfiling.vue
index 9f1bef8b..32e995d0 100644
--- a/src/views/dashboard/controls/AsyncProfiling.vue
+++ b/src/views/dashboard/controls/AsyncProfiling.vue
@@ -34,11 +34,12 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Content from "../related/async-profiling/Content.vue";
   import Header from "../related/async-profiling/Header.vue";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   /*global defineProps*/
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/ContinuousProfiling.vue b/src/views/dashboard/controls/ContinuousProfiling.vue
index 10030f8b..0ada5b5a 100644
--- a/src/views/dashboard/controls/ContinuousProfiling.vue
+++ b/src/views/dashboard/controls/ContinuousProfiling.vue
@@ -36,11 +36,12 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Content from "../related/continuous-profiling/Content.vue";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/DemandLog.vue b/src/views/dashboard/controls/DemandLog.vue
index d8c44b79..8e20f174 100644
--- a/src/views/dashboard/controls/DemandLog.vue
+++ b/src/views/dashboard/controls/DemandLog.vue
@@ -31,15 +31,17 @@ limitations under the License. -->
   </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/demand-log/Header.vue";
   import Content from "../related/demand-log/Content.vue";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({}),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/Ebpf.vue b/src/views/dashboard/controls/Ebpf.vue
index 9841e858..b1b9c505 100644
--- a/src/views/dashboard/controls/Ebpf.vue
+++ b/src/views/dashboard/controls/Ebpf.vue
@@ -34,11 +34,12 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Header from "../related/ebpf/Header.vue";
   import Content from "../related/ebpf/Content.vue";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue
index 2aa219a8..618062dd 100644
--- a/src/views/dashboard/controls/Event.vue
+++ b/src/views/dashboard/controls/Event.vue
@@ -36,15 +36,17 @@ limitations under the License. -->
   </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/event/Header.vue";
   import Content from "../related/event/Content.vue";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({}),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/NetworkProfiling.vue b/src/views/dashboard/controls/NetworkProfiling.vue
index 5afc1113..fcbd3207 100644
--- a/src/views/dashboard/controls/NetworkProfiling.vue
+++ b/src/views/dashboard/controls/NetworkProfiling.vue
@@ -33,11 +33,11 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Content from "../related/network-profiling/Content.vue";
-
+  import type { LayoutConfig } from "@/types/dashboard";
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/Profile.vue b/src/views/dashboard/controls/Profile.vue
index 81cdcadc..e4d386f0 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -34,11 +34,12 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Header from "../related/profile/Header.vue";
   import Content from "../related/profile/Content.vue";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 2a7fdd00..280a5524 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -161,12 +161,12 @@ limitations under the License. -->
       const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
 
       dashboardStore.setActiveTabIndex(activeTabIndex.value);
-      if (dashboardStore.layout[l].children.length) {
+      if (dashboardStore.layout[l]?.children?.length) {
         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);
+        dashboardStore.setActiveTabIndex(activeTabIndex.value, Number(props.data.i));
       }
       queryExpressions();
 
@@ -177,7 +177,7 @@ limitations under the License. -->
         dashboardStore.selectWidget(props.data);
         dashboardStore.setActiveTabIndex(idx);
         const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
-        dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
+        dashboardStore.setCurrentTabItems(dashboardStore.layout[l]?.children?.[activeTabIndex.value]?.children || []);
         needQuery.value = true;
         if (route.params.activeTabIndex) {
           let p = location.href.split("/tab/")[0];
@@ -192,10 +192,10 @@ limitations under the License. -->
       function deleteTabItem(e: Event, idx: number) {
         e.stopPropagation();
         dashboardStore.removeTabItem(props.data, idx);
-        const kids = dashboardStore.layout[l].children[0];
+        const kids = dashboardStore.layout[l]?.children?.[0];
         const arr = (kids && kids.children) || [];
         dashboardStore.setCurrentTabItems(arr);
-        dashboardStore.activeGridItem(0);
+        dashboardStore.activeGridItem("0");
         activeTabIndex.value = 0;
         needQuery.value = true;
       }
@@ -226,7 +226,7 @@ limitations under the License. -->
       }
       function layoutUpdatedEvent() {
         const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
-        dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
+        dashboardStore.setCurrentTabItems(dashboardStore.layout[l]?.children?.[activeTabIndex.value]?.children || []);
       }
       function getStringWidth(s: string) {
         const dom = document.createElement("span");
@@ -282,7 +282,7 @@ limitations under the License. -->
           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);
+          dashboardStore.activeGridItem("0");
           activeTabIndex.value = index;
           dashboardStore.setActiveTabIndex(activeTabIndex.value);
           needQuery.value = true;
@@ -324,7 +324,7 @@ limitations under the License. -->
           dashboardStore.activeGridItem(props.data.i);
           dashboardStore.selectWidget(props.data);
           const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
-          dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
+          dashboardStore.setCurrentTabItems(dashboardStore.layout[l]?.children?.[activeTabIndex.value]?.children || []);
           needQuery.value = true;
           if (route.params.activeTabIndex) {
             let p = location.href.split("/tab/")[0];
diff --git a/src/views/dashboard/controls/TaskTimeline.vue b/src/views/dashboard/controls/TaskTimeline.vue
index 6adc28e4..170e06b1 100644
--- a/src/views/dashboard/controls/TaskTimeline.vue
+++ b/src/views/dashboard/controls/TaskTimeline.vue
@@ -33,11 +33,12 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Content from "../related/task-timeline/Content.vue";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/Text.vue b/src/views/dashboard/controls/Text.vue
index c749f820..1a79f91c 100644
--- a/src/views/dashboard/controls/Text.vue
+++ b/src/views/dashboard/controls/Text.vue
@@ -58,18 +58,19 @@ limitations under the License. -->
   import { TextColors } from "@/views/dashboard/data";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { Themes } from "@/constants/data";
+  import type { LayoutConfig, TextConfig } from "@/types/dashboard";
 
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
   });
   const { t } = useI18n();
   const appStore = useAppStoreWithOut();
-  const graph = computed(() => props.data.graph || {});
+  const graph = computed(() => (props.data.graph as TextConfig) || {});
   const dashboardStore = useDashboardStore();
 
   const backgroundColor = computed(
diff --git a/src/views/dashboard/controls/ThirdPartyApp.vue b/src/views/dashboard/controls/ThirdPartyApp.vue
index f37dab0f..a1f48c0c 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -50,11 +50,12 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { validateAndSanitizeUrl } from "@/utils/validateAndSanitizeUrl";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue
index fd828e3b..04fa2155 100644
--- a/src/views/dashboard/controls/TimeRange.vue
+++ b/src/views/dashboard/controls/TimeRange.vue
@@ -63,17 +63,18 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { TextColors } from "@/views/dashboard/data";
+  import type { LayoutConfig, TimeRangeConfig } from "@/types/dashboard";
 
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
   });
   const { t } = useI18n();
-  const graph = computed(() => props.data.graph || {});
+  const graph = computed(() => (props.data.graph as TimeRangeConfig) || {});
   const dashboardStore = useDashboardStore();
   const appStore = useAppStoreWithOut();
   const content = computed(() => {
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index f1945216..473272c8 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -37,11 +37,12 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Topology from "../related/topology/Index.vue";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 61b166d2..586adf8d 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -53,11 +53,12 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { mutationObserver } from "@/utils/mutation";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   /* global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
     activeIndex: { type: String, default: "" },
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index fdd8ecac..1ce1ec50 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -80,7 +80,7 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
   import { ListChartTypes } from "../data";
-  import type { EventParams } from "@/types/dashboard";
+  import type { EventParams, DashboardItem } from "@/types/dashboard";
   import getDashboard from "@/hooks/useDashboardsSession";
 
   const props = {
@@ -141,7 +141,7 @@ limitations under the License. -->
         }
       }
       function clickHandle(params: EventParams | any) {
-        const { widgets } = getDashboard(dashboardStore.currentDashboard);
+        const { widgets } = getDashboard(dashboardStore.currentDashboard as DashboardItem);
         const associate = (props.data.associate && props.data.associate) || [];
 
         for (const item of associate) {
@@ -170,7 +170,7 @@ limitations under the License. -->
             return;
           }
           const chart = dashboardStore.selectedGrid.graph || {};
-          if (ListChartTypes.includes(chart.type)) {
+          if (ListChartTypes.includes(chart.type || "")) {
             return;
           }
           queryMetrics();
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 1e2bd96e..7d2855b7 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -192,7 +192,7 @@ limitations under the License. -->
       return;
     }
     router.push(
-      `/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService.id}/${scope.row.id}/${dashboard.name}`,
+      `/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService?.id}/${scope.row.id}/${dashboard.name}`,
     );
   }
   async function searchList() {
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 2320a2df..ffc3144c 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -208,7 +208,7 @@ limitations under the License. -->
       return;
     }
     router.push(
-      `/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService.id}/${
+      `/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService?.id}/${
         scope.row.id
       }/${dashboard.name.split(" ").join("-")}`,
     );
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index d1fa86ca..5bd1e52f 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -85,6 +85,10 @@ limitations under the License. -->
   import type { MetricConfigOpt } from "@/types/dashboard";
   import ColumnGraph from "./components/ColumnGraph.vue";
 
+  interface ServiceWithGroup extends Service {
+    merge: boolean;
+    group: string;
+  }
   /*global defineProps */
   const props = defineProps({
     data: {
@@ -115,12 +119,12 @@ limitations under the License. -->
   const chartLoading = ref<boolean>(false);
   const currentPage = ref<number>(1);
   const pageSize = 10;
-  const services = ref<Service[]>([]);
+  const services = ref<ServiceWithGroup[]>([]);
   const colMetrics = ref<string[]>([]);
   const colSubMetrics = ref<string[]>([]);
   const searchText = ref<string>("");
   const groups = ref<any>({});
-  const sortServices = ref<(Service & { merge: boolean })[]>([]);
+  const sortServices = ref<ServiceWithGroup[]>([]);
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []);
 
@@ -144,12 +148,12 @@ limitations under the License. -->
         return 1;
       }
       return 0;
-    });
-    const s = sortServices.value.filter((d: Service, index: number) => index < pageSize);
+    }) as ServiceWithGroup[];
+    const s = sortServices.value.filter((d: ServiceWithGroup, index: number) => index < pageSize);
     setServices(s);
   }
 
-  function setServices(arr: (Service & { merge: boolean })[]) {
+  function setServices(arr: ServiceWithGroup[]) {
     groups.value = {};
     const map: { [key: string]: any[] } = arr.reduce((result: { [key: string]: any[] }, item: any) => {
       item.group = item.group || "";
@@ -191,11 +195,11 @@ limitations under the License. -->
 
     router.push(path);
   }
-  async function queryServiceMetrics(arr: Service[]) {
+  async function queryServiceMetrics(arr: ServiceWithGroup[]) {
     if (!arr.length) {
       return;
     }
-    const currentServices = arr.map((d: Service) => {
+    const currentServices = arr.map((d: ServiceWithGroup) => {
       return {
         id: d.id,
         value: d.value,
@@ -203,13 +207,13 @@ limitations under the License. -->
         layers: d.layers,
         group: d.group,
         normal: d.normal,
-        merge: d.merge,
+        merge: d.merge || false,
         shortName: d.shortName,
       };
     });
     queryServiceExpressions(currentServices);
   }
-  async function queryServiceExpressions(currentServices: Service[]) {
+  async function queryServiceExpressions(currentServices: ServiceWithGroup[]) {
     const expressions = props.config.expressions || [];
     const subExpressions = props.config.subExpressions || [];
 
@@ -254,7 +258,7 @@ limitations under the License. -->
     if (searchText.value) {
       services = sortServices.value.filter((d: { label: string }) => d.label.includes(searchText.value));
     }
-    const arr = services.filter((d: Service, index: number) => {
+    const arr = services.filter((d: ServiceWithGroup, index: number) => {
       if (index >= (currentPage.value - 1) * pageSize && index < pageSize * currentPage.value) {
         return d;
       }
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 710eb55e..54936660 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -70,13 +70,12 @@ limitations under the License. -->
   import { TextColors, MetricCatalog } from "@/views/dashboard/data";
   import Trace from "@/views/dashboard/related/trace/Index.vue";
   import { WidgetType, QueryOrders, Status, RefIdTypes, ExpressionResultType } from "@/views/dashboard/data";
+  import type { Filters, RelatedTrace, TopListData, TopListItem } from "@/types/dashboard";
 
-  /*global defineProps, Recordable*/
+  /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<{
-        [key: string]: { name: string; value: number; refId: string; owner: object }[];
-      }>,
+      type: Object as PropType<TopListData>,
       default: () => ({}),
     },
     config: {
@@ -84,7 +83,7 @@ limitations under the License. -->
         color: string;
         expressions: string[];
         typesOfMQE: string[];
-        relatedTrace: any;
+        relatedTrace: RelatedTrace;
         valueRelatedDashboard: string;
       }>,
       default: () => ({ color: "purple" }),
@@ -94,28 +93,29 @@ limitations under the License. -->
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const showTrace = ref<boolean>(false);
-  const traceOptions = ref<{ type: string; filters?: unknown }>({
+  const traceOptions = ref<{ type: string; filters?: Filters } | any>({
+    ...props.data,
     type: WidgetType.Trace,
   });
   const refIdType = computed(
     () => (props.config.relatedTrace && props.config.relatedTrace.refIdType) || RefIdTypes[0].value,
   );
-  const key = computed(() => Object.keys(props.data)[0] || "");
+  const key = computed<string>(() => Object.keys(props.data)[0] || "");
   const available = computed(
     () => Array.isArray(props.data[key.value]) && props.data[key.value][0] && props.data[key.value][0].value,
   );
   const maxValue = computed(() => {
-    if (!(props.data[key.value] && props.data[key.value].length)) {
+    if (!props.data[key.value].length) {
       return 0;
     }
-    const temp: number[] = props.data[key.value].map((i: any) => i.value);
+    const temp: number[] = props.data?.[key.value].map((i: any) => i.value);
     return Math.max.apply(null, temp);
   });
   function handleClick(i: string) {
     copy(i);
   }
-  function viewTrace(item: { name: string; refId: string; value: unknown; owner: object }) {
-    const filters = {
+  function viewTrace(item: TopListItem) {
+    const filters: Filters = {
       ...item,
       queryOrder: QueryOrders[1].value,
       status: Status[2].value,
@@ -130,7 +130,7 @@ limitations under the License. -->
     };
     showTrace.value = true;
   }
-  function viewDashboard(item: Recordable) {
+  function viewDashboard(item: TopListItem) {
     const { owner } = item;
     let path;
     if (owner.scope === MetricCatalog.SERVICE) {
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 5c9965a8..883c763b 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -85,12 +85,13 @@ limitations under the License. -->
             }
           }
           if (item.type === WidgetType.Tab) {
-            const index = isNaN(item.activedTabIndex) ? 0 : item.activedTabIndex;
-            widgets.push(
-              ...item.children[index].children.filter(
+            const index = isNaN(item.activedTabIndex as number) ? 0 : (item.activedTabIndex as number);
+            if (item.children && item.children[index]) {
+              const list = item.children[index]?.children.filter(
                 (d: LayoutConfig) => d.type === WidgetType.Widget && !ListChartTypes.includes(d.graph?.type || ""),
-              ),
-            );
+              );
+              widgets.push(...list);
+            }
           }
         }
         const configList = widgets.map((d: LayoutConfig) => ({
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index d92bc21e..0dc202ec 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -168,6 +168,7 @@ limitations under the License. -->
   import type { Option } from "@/types/app";
   import InstanceMap from "@/views/dashboard/related/topology/pod/InstanceMap.vue";
   import HierarchyMap from "@/views/dashboard/related/topology/service/HierarchyMap.vue";
+  import { Process, Instance, Endpoint } from "@/types/selector";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
@@ -175,7 +176,7 @@ limitations under the License. -->
   const topologyStore = useTopologyStore();
   const appStore = useAppStoreWithOut();
   const route = useRoute();
-  const params = route?.params || {};
+  const params: any = route?.params || {};
   const toolIcons = ref<{ name: string; content: string; id: WidgetType }[]>(AllTools);
   const loading = ref<boolean>(false);
   const showHierarchy = ref<boolean>(false);
@@ -252,7 +253,8 @@ limitations under the License. -->
       ElMessage.error(json.errors);
       return;
     }
-    let currentService, currentDestService;
+    let currentService = null,
+      currentDestService = null;
     if (states.currentService) {
       for (const d of selectorStore.services) {
         if (d.value === states.currentService) {
@@ -274,22 +276,22 @@ limitations under the License. -->
     }
     selectorStore.setCurrentService(currentService);
     selectorStore.setCurrentDestService(currentDestService);
-    states.currentService = selectorStore.currentService && selectorStore.currentService.value;
-    states.currentDestService = selectorStore.currentDestService && selectorStore.currentDestService.value;
+    states.currentService = selectorStore.currentService?.value || "";
+    states.currentDestService = selectorStore.currentDestService?.value || "";
   }
 
   async function setSourceSelector() {
     await selectorStore.getService(String(params.serviceId));
-    states.currentService = selectorStore.currentService.value;
+    states.currentService = selectorStore.currentService?.value || "";
     const e = String(params.entity).split("Relation")[0];
 
-    await fetchPods(e, selectorStore.currentService.id, true);
+    await fetchPods(e, selectorStore.currentService?.id, true);
   }
 
   async function setDestSelector() {
     await selectorStore.getService(String(params.destServiceId), true);
-    states.currentDestService = selectorStore.currentDestService.value;
-    await fetchPods(String(params.entity), selectorStore.currentDestService.id, true);
+    states.currentDestService = selectorStore.currentDestService?.value || "";
+    await fetchPods(String(params.entity), selectorStore.currentDestService?.id || "", true);
   }
 
   async function getServices() {
@@ -341,14 +343,14 @@ limitations under the License. -->
         EntityType[8].value,
       ].includes(dashboardStore.entity)
     ) {
-      await fetchPods(e, selectorStore.currentService.id, true);
+      await fetchPods(e, selectorStore.currentService?.id || "", true);
     }
     if (!selectorStore.currentDestService) {
       return;
     }
     states.currentDestService = selectorStore.currentDestService.value;
     if ([EntityType[5].value, EntityType[6].value, EntityType[7].value].includes(dashboardStore.entity)) {
-      await fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true);
+      await fetchPods(dashboardStore.entity, selectorStore.currentDestService?.id || "", true);
     }
   }
 
@@ -360,7 +362,7 @@ limitations under the License. -->
       states.currentPod = "";
       states.currentProcess = "";
       const e = dashboardStore.entity.split("Relation")[0];
-      fetchPods(e, selectorStore.currentService.id, true);
+      fetchPods(e, selectorStore.currentService?.id, true);
     } else {
       selectorStore.setCurrentService(null);
     }
@@ -373,7 +375,7 @@ limitations under the License. -->
       selectorStore.setCurrentDestPod(null);
       states.currentDestPod = "";
       states.currentDestProcess = "";
-      fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true);
+      fetchPods(dashboardStore.entity, selectorStore.currentDestService?.id || "", true);
     } else {
       selectorStore.setCurrentDestService(null);
     }
@@ -395,12 +397,12 @@ limitations under the License. -->
     }
   }
 
-  function changeDestProcess(pod: Option[]) {
-    selectorStore.setCurrentDestProcess(pod[0] || null);
+  function changeDestProcess(pod: Process[]) {
+    selectorStore.setCurrentDestProcess(pod[0]);
     states.currentDestProcess = pod[0].label || "";
   }
 
-  function changeProcess(pod: Option[]) {
+  function changeProcess(pod: Process[]) {
     selectorStore.setCurrentProcess(pod[0] || null);
     states.currentProcess = pod[0].label || "";
   }
@@ -447,7 +449,10 @@ limitations under the License. -->
     dashboardStore.addControl(id);
   }
 
-  async function fetchPods(type: string, serviceId: string, setPod: boolean, param?: { keyword?: string }) {
+  async function fetchPods(type: string, serviceId: string | undefined, setPod: boolean, param?: { keyword?: string }) {
+    if (!serviceId) {
+      return;
+    }
     let resp;
     switch (type) {
       case EntityType[2].value:
@@ -517,11 +522,11 @@ limitations under the License. -->
 
   async function fetchProcess(setPod: boolean) {
     const resp = await selectorStore.getProcesses({
-      instanceId: selectorStore.currentPod.id,
+      instanceId: selectorStore.currentPod?.id || "",
     });
     if (setPod) {
       const process = selectorStore.currentProcess?.id || params.processId || selectorStore.processes[0].id;
-      const currentProcess = selectorStore.processes.find((d: { id: string }) => d.id === process);
+      const currentProcess = selectorStore.processes.find((d: Process) => d.id === process);
       if (currentProcess) {
         selectorStore.setCurrentProcess(currentProcess);
         states.currentProcess = currentProcess.label;
@@ -534,7 +539,7 @@ limitations under the License. -->
   }
   async function fetchDestProcess(setPod: boolean) {
     const resp = await selectorStore.getProcesses({
-      instanceId: selectorStore.currentDestPod.id,
+      instanceId: selectorStore.currentDestPod?.id,
       isRelation: true,
     });
     if (setPod) {
@@ -572,7 +577,7 @@ limitations under the License. -->
       return;
     }
     const destPod = selectorStore.currentDestPod?.id || params.destPodId || selectorStore.destPods[0].id;
-    const currentDestPod = selectorStore.destPods.find((d: { id: string }) => d.id === destPod);
+    const currentDestPod = selectorStore.destPods.find((d: Instance | Endpoint) => d.id === destPod);
     if (!currentDestPod) {
       states.currentDestPod = "";
       selectorStore.setCurrentDestPod(null);
@@ -604,7 +609,7 @@ limitations under the License. -->
       return;
     }
     const pod = selectorStore.currentPod?.id || params.podId || selectorStore.pods[0].id;
-    const currentPod = selectorStore.pods.find((d: { id: string }) => d.id === pod);
+    const currentPod = selectorStore.pods.find((d: Endpoint | Instance) => d.id === pod);
     if (!currentPod) {
       selectorStore.setCurrentPod(null);
       states.currentPod = "";
@@ -651,13 +656,13 @@ limitations under the License. -->
     const param = {
       keyword: query,
     };
-    fetchPods(EntityType[2].value, selectorStore.currentService.id, false, param);
+    fetchPods(EntityType[2].value, selectorStore.currentService?.id, false, param);
   }
   function searchDestPods(query: string) {
     const param = {
       keyword: query,
     };
-    fetchPods(EntityType[6].value, selectorStore.currentDestService.id, false, param);
+    fetchPods(EntityType[6].value, selectorStore.currentDestService?.id, false, param);
   }
   function viewTopology() {
     showHierarchy.value = true;
diff --git a/src/views/dashboard/related/async-profiling/Content.vue b/src/views/dashboard/related/async-profiling/Content.vue
index f8768ff8..9d48180a 100644
--- a/src/views/dashboard/related/async-profiling/Content.vue
+++ b/src/views/dashboard/related/async-profiling/Content.vue
@@ -35,12 +35,12 @@ limitations under the License. -->
   import EBPFStack from "@/views/dashboard/related/ebpf/components/EBPFStack.vue";
   import { ComponentType } from "./components/data";
 
-  const asyncProfilingStore = useAsyncProfilingStore();
+  const asyncProfilingStore: ReturnType<typeof useAsyncProfilingStore> = useAsyncProfilingStore();
   const selectorStore = useSelectorStore();
 
   onMounted(async () => {
-    const resp = await asyncProfilingStore.getServiceInstances({ serviceId: selectorStore.currentService.id });
-    if (resp && resp.errors) {
+    const resp = await asyncProfilingStore.getServiceInstances({ serviceId: selectorStore.currentService?.id || "" });
+    if (resp?.errors) {
       ElMessage.error(resp.errors);
     }
   });
diff --git a/src/views/dashboard/related/async-profiling/components/Filter.vue b/src/views/dashboard/related/async-profiling/components/Filter.vue
index 55f364e3..15263476 100644
--- a/src/views/dashboard/related/async-profiling/components/Filter.vue
+++ b/src/views/dashboard/related/async-profiling/components/Filter.vue
@@ -50,7 +50,7 @@ limitations under the License. -->
   const serviceInstanceIds = ref<string[]>([]);
   const selectedEventType = ref<string>("");
   const eventTypes = computed(() =>
-    (asyncProfilingStore.selectedTask.events ?? [])
+    (asyncProfilingStore.selectedTask?.events || [])
       .map((d: string) => {
         if (d === ProfilingEvents[1]) {
           return [
@@ -65,7 +65,7 @@ limitations under the License. -->
   );
   const instances = computed(() =>
     asyncProfilingStore.instances.filter((d: Instance) =>
-      (asyncProfilingStore.selectedTask.successInstanceIds ?? []).includes(d.id),
+      (asyncProfilingStore.selectedTask?.successInstanceIds || []).includes(d.id || ""),
     ),
   );
 
@@ -80,12 +80,12 @@ limitations under the License. -->
   }
 
   async function analyzeProfiling() {
-    const instanceIds = asyncProfilingStore.instances
+    const instanceIds = (asyncProfilingStore.instances || [])
       .filter((d: Instance) => (serviceInstanceIds.value ?? []).includes(d.value))
-      .map((d: Instance) => d.id);
+      .map((d: Instance) => d.id || "") as string[];
     const res = await asyncProfilingStore.getAsyncProfilingAnalyze({
       instanceIds,
-      taskId: asyncProfilingStore.selectedTask.id,
+      taskId: asyncProfilingStore.selectedTask?.id || "",
       eventType: (EventsMap as any)[selectedEventType.value],
     });
     if (res.data && res.data.errors) {
@@ -95,7 +95,7 @@ limitations under the License. -->
   }
 
   watch(
-    () => asyncProfilingStore.selectedTask.successInstanceIds,
+    () => asyncProfilingStore.selectedTask?.successInstanceIds,
     () => {
       serviceInstanceIds.value = [];
       selectedEventType.value = "";
diff --git a/src/views/dashboard/related/async-profiling/components/NewTask.vue b/src/views/dashboard/related/async-profiling/components/NewTask.vue
index e5c9c656..86f38f75 100644
--- a/src/views/dashboard/related/async-profiling/components/NewTask.vue
+++ b/src/views/dashboard/related/async-profiling/components/NewTask.vue
@@ -114,6 +114,7 @@ limitations under the License. -->
   import { useSelectorStore } from "@/store/modules/selectors";
   import { ElMessage } from "element-plus";
   import { DurationOptions, ProfilingEvents } from "./data";
+  import type { AsyncProfileTaskCreationRequest } from "@/types/async-profiling";
 
   /* global defineEmits */
   const emits = defineEmits(["close"]);
@@ -165,12 +166,12 @@ limitations under the License. -->
     }
 
     const params = {
-      serviceId: selectorStore.currentService.id,
+      serviceId: selectorStore.currentService?.id,
       serviceInstanceIds: serviceInstanceIds.value,
       duration: finalDuration,
       events: asyncEvents.value,
       execArgs: execArgs.value,
-    };
+    } as AsyncProfileTaskCreationRequest;
     loading.value = true;
     const res = await asyncProfilingStore.createTask(params);
     loading.value = false;
diff --git a/src/views/dashboard/related/async-profiling/components/TaskList.vue b/src/views/dashboard/related/async-profiling/components/TaskList.vue
index e1ddf785..39acb17a 100644
--- a/src/views/dashboard/related/async-profiling/components/TaskList.vue
+++ b/src/views/dashboard/related/async-profiling/components/TaskList.vue
@@ -26,7 +26,7 @@ limitations under the License. -->
           @click="changeTask(i)"
           :key="index"
           :class="{
-            selected: asyncProfilingStore.selectedTask.id === i.id,
+            selected: asyncProfilingStore.selectedTask?.id === i.id,
           }"
         >
           <td class="profile-td">
@@ -50,7 +50,7 @@ limitations under the License. -->
     </div>
   </div>
   <el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
-    <div class="profile-detail flex-v" v-if="asyncProfilingStore.selectedTask.id">
+    <div class="profile-detail flex-v" v-if="asyncProfilingStore.selectedTask?.id">
       <div>
         <h5 class="mb-10">{{ t("task") }}.</h5>
         <div class="mb-10 clear item">
@@ -67,20 +67,15 @@ limitations under the License. -->
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("duration") }}:</span>
-          <span class="g-sm-8 wba">{{ asyncProfilingStore.selectedTask.duration / 60 }}min</span>
+          <span class="g-sm-8 wba">{{ asyncProfilingStore.selectedTask?.duration / 60 }}min</span>
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("events") }}:</span>
-          <span class="g-sm-8 wba"> {{ asyncProfilingStore.selectedTask.events.join(", ") }} </span>
+          <span class="g-sm-8 wba"> {{ (asyncProfilingStore.selectedTask?.events || []).join(", ") }} </span>
         </div>
       </div>
       <div>
-        <h5
-          class="mb-5 mt-10"
-          v-show="asyncProfilingStore.selectedTask.logs && asyncProfilingStore.selectedTask.logs.length"
-        >
-          {{ t("logs") }}.
-        </h5>
+        <h5 class="mb-5 mt-10" v-show="asyncProfilingStore.selectedTask?.logs?.length"> {{ t("logs") }}. </h5>
         <div v-for="(i, index) in Object.keys(instanceLogs)" :key="index">
           <div class="sm">
             <span class="mr-10 grey">{{ t("instance") }}:</span>
@@ -128,7 +123,8 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
-  import type { TaskLog, TaskListItem } from "@/types/profile";
+  import type { TaskLog } from "@/types/profile";
+  import type { AsyncProfilingTask } from "@/types/async-profiling";
   import { ElMessage } from "element-plus";
   import { dateFormat } from "@/utils/dateFormat";
   import type { Instance, Service } from "@/types/selector";
@@ -156,13 +152,13 @@ limitations under the License. -->
     }
   }
 
-  async function changeTask(item: TaskListItem) {
-    if (item.id !== asyncProfilingStore.selectedTask.id) {
+  async function changeTask(item: AsyncProfilingTask) {
+    if (item.id !== asyncProfilingStore.selectedTask?.id) {
       asyncProfilingStore.setAnalyzeTrees([]);
       asyncProfilingStore.setSelectedTask(item);
     }
     service.value = (selectorStore.services.filter((s: Service) => s.id === item.serviceId)[0] ?? {}).label;
-    const res = await asyncProfilingStore.getTaskLogs({ taskId: item.id });
+    const res = await asyncProfilingStore.getTaskLogs({ taskID: item.id });
 
     if (res.errors) {
       ElMessage.error(res.errors);
diff --git a/src/views/dashboard/related/components/TaskDetails.vue b/src/views/dashboard/related/components/TaskDetails.vue
index 84d80316..ae978fd2 100644
--- a/src/views/dashboard/related/components/TaskDetails.vue
+++ b/src/views/dashboard/related/components/TaskDetails.vue
@@ -19,38 +19,38 @@ limitations under the License. -->
       <div class="mb-10 clear item">
         <span class="g-sm-4 grey">{{ t("taskId") }}:</span>
         <span class="g-sm-8 wba">
-          {{ details.taskId }}
+          {{ details?.taskId || "" }}
         </span>
       </div>
       <div class="mb-10 clear item">
         <span class="g-sm-4 grey">{{ t("service") }}:</span>
         <span class="g-sm-8 wba">
-          {{ details.serviceName }}
+          {{ details?.serviceName || "" }}
         </span>
       </div>
       <div class="mb-10 clear item">
         <span class="g-sm-4 grey">{{ t("labels") }}:</span>
         <span class="g-sm-8 wba">
-          {{ details.processLabels.join(";") }}
+          {{ details?.processLabels?.join(";") }}
         </span>
       </div>
       <div class="mb-10 clear item">
         <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
         <span class="g-sm-8 wba">
-          {{ dateFormat(details.taskStartTime) }}
+          {{ dateFormat(details?.taskStartTime || NaN) }}
         </span>
       </div>
       <div class="mb-10 clear item">
         <span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span>
-        <span class="g-sm-8 wba"> {{ details.fixedTriggerDuration / 60 }} min </span>
+        <span class="g-sm-8 wba"> {{ (details?.fixedTriggerDuration || 0) / 60 }} min </span>
       </div>
       <div class="mb-10 clear item">
         <span class="g-sm-4 grey">{{ t("triggerType") }}:</span>
-        <span class="g-sm-8 wba">{{ details.triggerType }}</span>
+        <span class="g-sm-8 wba">{{ details?.triggerType }}</span>
       </div>
       <div class="mb-10 clear item">
         <span class="g-sm-4 grey">{{ t("targetType") }}:</span>
-        <span class="g-sm-8 wba">{{ details.targetType }}</span>
+        <span class="g-sm-8 wba">{{ details?.targetType }}</span>
       </div>
     </div>
   </div>
@@ -61,10 +61,10 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import type { EBPFTaskList } from "@/types/ebpf";
 
-  /*global defineProps */
+  /*global defineProps, Nullable */
   defineProps({
     details: {
-      type: Object as PropType<EBPFTaskList>,
+      type: Object as PropType<Nullable<EBPFTaskList>>,
       default: () => ({}),
     },
   });
diff --git a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
index 97f716b4..8db5380b 100644
--- a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
@@ -84,6 +84,7 @@ limitations under the License. -->
   import router from "@/router";
   import { HeaderLabels, HeaderChildLabels } from "../data";
   import { EntityType } from "../../../data";
+  import type { Instance } from "@/types/selector";
 
   /*global defineProps */
   const props = defineProps({
@@ -97,14 +98,14 @@ limitations under the License. -->
   const selectorStore = useSelectorStore();
   const continousProfilingStore = useContinousProfilingStore();
   const pageSize = 10;
-  const currentInstances = ref<MonitorInstance[]>([]);
+  const currentInstances = ref<Instance[]>([]);
 
   function viewProcessDashboard(process: MonitorProcess, instance: MonitorInstance) {
     if (!props.config.processDashboardName) {
       return;
     }
     router.push(
-      `/dashboard/${dashboardStore.layerId}/${EntityType[8].value}/${selectorStore.currentService.id}/${instance.id}/${process.id}/${props.config.processDashboardName}`,
+      `/dashboard/${dashboardStore.layerId}/${EntityType[8].value}/${selectorStore.currentService?.id}/${instance.id}/${process.id}/${props.config.processDashboardName}`,
     );
   }
 
@@ -113,12 +114,12 @@ limitations under the License. -->
       return;
     }
     router.push(
-      `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${selectorStore.currentService.id}/${instance.id}/${props.config.instanceDashboardName}`,
+      `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${selectorStore.currentService?.id}/${instance.id}/${props.config.instanceDashboardName}`,
     );
   }
 
   async function changePage(pageIndex: number) {
-    currentInstances.value = continousProfilingStore.instances.filter((d: unknown, index: number) => {
+    currentInstances.value = continousProfilingStore.instances.filter((d: Instance, index: number) => {
       if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) {
         return d;
       }
@@ -129,7 +130,7 @@ limitations under the License. -->
     () => continousProfilingStore.instances,
     () => {
       currentInstances.value = continousProfilingStore.instances.filter(
-        (_: unknown, index: number) => index < pageSize,
+        (_: Instance, index: number) => index < pageSize,
       );
     },
   );
diff --git a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
index ca8aba4f..2ec78c77 100644
--- a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
@@ -35,7 +35,7 @@ limitations under the License. -->
             <td
               class="profile-td"
               :class="{
-                selected: continousProfilingStore.selectedStrategy.id === i.id,
+                selected: continousProfilingStore.selectedStrategy?.id === i.id,
               }"
               v-if="i.type"
             >
@@ -81,7 +81,7 @@ limitations under the License. -->
 
   const { t } = useI18n();
   const selectorStore = useSelectorStore();
-  const continousProfilingStore = useContinousProfilingStore();
+  const continousProfilingStore: ReturnType<typeof useContinousProfilingStore> = useContinousProfilingStore();
   const updateStrategies = ref<boolean>(false);
   const inProcess = ref<boolean>(false);
 
diff --git a/src/views/dashboard/related/demand-log/Content.vue b/src/views/dashboard/related/demand-log/Content.vue
index 72d822f4..02b5328c 100644
--- a/src/views/dashboard/related/demand-log/Content.vue
+++ b/src/views/dashboard/related/demand-log/Content.vue
@@ -77,7 +77,7 @@ limitations under the License. -->
     }
     toRaw(monacoInstance.value).dispose();
     monacoInstance.value = null;
-    demandLogStore.setLogs("");
+    demandLogStore.setLogs([]);
   });
   watch(
     () => appStore.theme,
diff --git a/src/views/dashboard/related/demand-log/Header.vue b/src/views/dashboard/related/demand-log/Header.vue
index 38f18008..cca85cb0 100644
--- a/src/views/dashboard/related/demand-log/Header.vue
+++ b/src/views/dashboard/related/demand-log/Header.vue
@@ -152,7 +152,7 @@ limitations under the License. -->
     if (!(state.instance.id || (selectorStore.currentPod && selectorStore.currentPod.id))) {
       return;
     }
-    const resp = await demandLogStore.getContainers(state.instance.id || selectorStore.currentPod.id);
+    const resp = await demandLogStore.getContainers(state.instance.id || selectorStore.currentPod?.id || "");
     if (resp.errors) {
       disabled.value = true;
       ElMessage.error(resp.errors);
@@ -193,7 +193,7 @@ limitations under the License. -->
   function searchLogs() {
     let instance = "";
     if (dashboardStore.entity === EntityType[3].value) {
-      instance = selectorStore.currentPod.id;
+      instance = selectorStore.currentPod?.id || "";
     }
     const serviceInstanceId = instance || (state.instance && state.instance.id) || "";
     demandLogStore.setLogCondition({
@@ -247,6 +247,7 @@ limitations under the License. -->
     const keywordsOfContentList = keywordsOfContent.value || [];
     keywordsOfContentList.splice(index, 1);
     demandLogStore.setLogCondition({
+      ...demandLogStore.conditions,
       keywordsOfContent: keywordsOfContentList,
     });
     contentStr.value = "";
@@ -262,12 +263,14 @@ limitations under the License. -->
     if (type === "keywordsOfContent") {
       keywordsOfContent.value.push(contentStr.value);
       demandLogStore.setLogCondition({
+        ...demandLogStore.conditions,
         [type]: keywordsOfContent.value,
       });
       contentStr.value = "";
     } else if (type === "excludingKeywordsOfContent") {
       excludingKeywordsOfContent.value.push(excludingContentStr.value);
       demandLogStore.setLogCondition({
+        ...demandLogStore.conditions,
         [type]: excludingKeywordsOfContent.value,
       });
       excludingContentStr.value = "";
@@ -277,6 +280,7 @@ limitations under the License. -->
   function removeExcludeContent(index: number) {
     excludingKeywordsOfContent.value.splice(index, 1);
     demandLogStore.setLogCondition({
+      ...demandLogStore.conditions,
       excludingKeywordsOfContent: excludingKeywordsOfContent.value,
     });
     excludingContentStr.value = "";
@@ -297,7 +301,7 @@ limitations under the License. -->
     () => {
       if (dashboardStore.entity === EntityType[0].value) {
         fetchSelectors();
-        demandLogStore.setLogs("");
+        demandLogStore.setLogs([]);
       }
     },
   );
@@ -306,7 +310,7 @@ limitations under the License. -->
     () => {
       if (dashboardStore.entity === EntityType[3].value) {
         fetchSelectors();
-        demandLogStore.setLogs("");
+        demandLogStore.setLogs([]);
       }
     },
   );
diff --git a/src/views/dashboard/related/ebpf/Header.vue b/src/views/dashboard/related/ebpf/Header.vue
index 68468faa..8b35a5e3 100644
--- a/src/views/dashboard/related/ebpf/Header.vue
+++ b/src/views/dashboard/related/ebpf/Header.vue
@@ -68,7 +68,7 @@ limitations under the License. -->
       return;
     }
     newTask.value = true;
-    ebpfStore.getCreateTaskData(selectorStore.currentService.id);
+    ebpfStore.getCreateTaskData(selectorStore.currentService.id || "");
   }
 
   watch(
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index f7c2d180..cb8858ea 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -32,7 +32,7 @@ limitations under the License. -->
     </div>
     <div class="flex-h">
       <Selector
-        v-if="ebpfStore.selectedTask.targetType === 'OFF_CPU'"
+        v-if="ebpfStore.selectedTask?.targetType === 'OFF_CPU'"
         :value="aggregateType"
         :options="AggregateTypes"
         size="small"
@@ -102,7 +102,7 @@ limitations under the License. -->
   import { dateFormat } from "@/utils/dateFormat";
 
   const { t } = useI18n();
-  const ebpfStore = useEbpfStore();
+  const ebpfStore: ReturnType<typeof useEbpfStore> = useEbpfStore();
   const pageSize = 5;
   const multipleTableRef = ref<InstanceType<typeof ElTable>>();
   const selectedProcesses = ref<string[]>([]);
@@ -163,7 +163,7 @@ limitations under the License. -->
       }
     }
     const res = await ebpfStore.getEBPFAnalyze({
-      scheduleIdList,
+      scheduleIdList: scheduleIdList as string[],
       timeRanges,
       aggregateType: aggregateType.value,
     });
diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
index abe3c866..c97a8823 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div id="graph-stack" ref="graph">
-    <span class="tip" v-show="ebpfStore.ebpfTips">{{ ebpfStore.ebpfTips }}</span>
+    <span class="tip" v-show="(ebpfStore as any).ebpfTips">{{ (ebpfStore as any).ebpfTips }}</span>
   </div>
 </template>
 <script lang="ts" setup>
@@ -25,6 +25,7 @@ limitations under the License. -->
   import { useEbpfStore } from "@/store/modules/ebpf";
   import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
   import type { StackElement } from "@/types/ebpf";
+  import type { StackElement as AsyncProfilingStackElement } from "@/types/async-profiling";
   import { AggregateTypes } from "./data";
   import { JFREventType, ComponentType } from "@/views/dashboard/related/async-profiling/components/data";
   import "d3-flame-graph/dist/d3-flamegraph.css";
@@ -37,7 +38,8 @@ limitations under the License. -->
       default: "",
     },
   });
-  const ebpfStore = props.type === ComponentType ? useAsyncProfilingStore() : useEbpfStore();
+  const ebpfStore: ReturnType<typeof useAsyncProfilingStore | typeof useEbpfStore> =
+    props.type === ComponentType ? useAsyncProfilingStore() : useEbpfStore();
   const stackTree = ref<Nullable<StackElement>>(null);
   const selectStack = ref<Nullable<StackElement>>(null);
   const graph = ref<Nullable<HTMLDivElement>>(null);
@@ -67,12 +69,15 @@ limitations under the License. -->
     };
     countRange();
     if (props.type === ComponentType) {
-      const elements = processTree(ebpfStore.analyzeTrees[0].elements);
+      const elements = processTree(
+        ((ebpfStore as ReturnType<typeof useAsyncProfilingStore>).analyzeTrees[0].elements ||
+          []) as AsyncProfilingStackElement[],
+      );
       stackTree.value = elements;
       root = { ...root, ...elements };
     } else {
-      for (const tree of ebpfStore.analyzeTrees) {
-        const ele = processTree(tree.elements);
+      for (const tree of (ebpfStore as ReturnType<typeof useEbpfStore>).analyzeTrees) {
+        const ele = processTree(tree.elements as StackElement[]);
         root.children && root.children.push(ele);
       }
       const param = (root.children || []).reduce(
@@ -134,7 +139,7 @@ limitations under the License. -->
       if (!ebpfStore.analyzeTrees.length) {
         return;
       }
-      const { type } = ebpfStore.analyzeTrees[0];
+      const { type } = ebpfStore.analyzeTrees[0] as any;
       if ([JFREventType.LOCK].includes(type)) {
         return `<div class="mb-5">Duration: ${item.dumpCount} ns</div>`;
       }
@@ -144,15 +149,15 @@ limitations under the License. -->
       return `<div class="mb-5">Memory: ${item.dumpCount} byte</div>`;
     }
 
-    ebpfStore.aggregateType === AggregateTypes[0].value
+    (ebpfStore as ReturnType<typeof useEbpfStore>).aggregateType === AggregateTypes[0].value
       ? `<div class="mb-5">Dump Count: ${item.dumpCount}</div>`
       : `<div class="mb-5">Duration: ${item.dumpCount} ns</div>`;
   }
 
   function countRange() {
     const list = [];
-    for (const tree of ebpfStore.analyzeTrees) {
-      for (const ele of tree.elements) {
+    for (const tree of (ebpfStore as ReturnType<typeof useEbpfStore>).analyzeTrees) {
+      for (const ele of tree.elements || []) {
         list.push(ele.dumpCount);
       }
     }
@@ -160,7 +165,7 @@ limitations under the License. -->
     min.value = Math.min(...list);
   }
 
-  function processTree(arr: StackElement[]) {
+  function processTree(arr: StackElement[] | AsyncProfilingStackElement[]) {
     const copyArr = JSON.parse(JSON.stringify(arr));
     const obj: any = {};
     let res = null;
diff --git a/src/views/dashboard/related/ebpf/components/NewTask.vue b/src/views/dashboard/related/ebpf/components/NewTask.vue
index 87b87705..696bf1ac 100644
--- a/src/views/dashboard/related/ebpf/components/NewTask.vue
+++ b/src/views/dashboard/related/ebpf/components/NewTask.vue
@@ -77,6 +77,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { ElMessage } from "element-plus";
   import { InitTaskField, TargetTypes } from "./data";
+  import type { EBPFTaskCreationRequest } from "@/types/ebpf";
 
   /* global defineEmits */
   const emits = defineEmits(["close"]);
@@ -109,13 +110,16 @@ limitations under the License. -->
     }
     disabled.value = true;
     const date = monitorTime.value === "0" ? new Date() : time.value;
+    if (!selectorStore.currentService?.id) {
+      return;
+    }
     const params = {
-      serviceId: selectorStore.currentService.id,
+      serviceId: selectorStore.currentService?.id,
       processLabels: labels.value,
       startTime: date.getTime(),
       duration: monitorDuration.value * 60,
       targetType: type.value,
-    };
+    } as EBPFTaskCreationRequest;
     const res = await eBPFStore.createTask(params);
     if (res.errors) {
       ElMessage.error(res.errors);
diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue
index 43d322d5..f9df1c01 100644
--- a/src/views/dashboard/related/ebpf/components/TaskList.vue
+++ b/src/views/dashboard/related/ebpf/components/TaskList.vue
@@ -25,7 +25,7 @@ limitations under the License. -->
             <td
               class="profile-td"
               :class="{
-                selected: ebpfStore.selectedTask.taskId === i.taskId,
+                selected: ebpfStore.selectedTask?.taskId === i.taskId,
               }"
             >
               <div class="ell">
@@ -37,9 +37,9 @@ limitations under the License. -->
                 </a>
               </div>
               <div class="grey ell sm">
-                <span class="mr-10 sm">{{ dateFormat(i.taskStartTime) }}</span>
+                <span class="mr-10 sm">{{ dateFormat(i.taskStartTime || NaN) }}</span>
                 <span class="mr-10 sm">
-                  {{ dateFormat(i.taskStartTime + i.fixedTriggerDuration * 1000) }}
+                  {{ dateFormat(i.taskStartTime + (i.fixedTriggerDuration || 0) * 1000) }}
                 </span>
               </div>
             </td>
@@ -61,14 +61,15 @@ limitations under the License. -->
   import TaskDetails from "../../components/TaskDetails.vue";
   import { dateFormat } from "@/utils/dateFormat";
 
+  /* global Nullable */
   const { t } = useI18n();
   const ebpfStore = useEbpfStore();
   const viewDetail = ref<boolean>(false);
 
-  async function changeTask(item: EBPFTaskList) {
+  async function changeTask(item: Nullable<EBPFTaskList>) {
     ebpfStore.setSelectedTask(item);
     const res = await ebpfStore.getEBPFSchedules({
-      taskId: item.taskId,
+      taskId: item?.taskId || "",
     });
     if (res.errors) {
       ElMessage.error(res.errors);
diff --git a/src/views/dashboard/related/event/Content.vue b/src/views/dashboard/related/event/Content.vue
index 31d02363..03d1645e 100644
--- a/src/views/dashboard/related/event/Content.vue
+++ b/src/views/dashboard/related/event/Content.vue
@@ -16,11 +16,11 @@ limitations under the License. -->
   <div ref="timeline" class="events"></div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch, onMounted } from "vue";
+  import { ref, watch, onMounted, PropType } from "vue";
   import dayjs from "dayjs";
   import { useThrottleFn } from "@vueuse/core";
   import type { Event } from "@/types/events";
-  import type { LayoutConfig } from "@/types/dashboard";
+  import type { LayoutConfig, DashboardItem } from "@/types/dashboard";
   import { useEventStore } from "@/store/modules/event";
   import { DataSet, Timeline } from "vis-timeline/standalone";
   import "vis-timeline/styles/vis-timeline-graph2d.css";
@@ -32,10 +32,10 @@ limitations under the License. -->
   import { WidgetType } from "@/views/dashboard/data";
 
   const eventStore = useEventStore();
-  /*global defineProps, Nullable */
+  /*global Nullable */
   const props = defineProps({
     data: {
-      type: Object,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({}),
     },
   });
@@ -106,7 +106,7 @@ limitations under the License. -->
         return;
       }
       dashboardStore.selectWidget(props.data);
-      const dashboard = getDashboard(dashboardStore.currentDashboard).widgets;
+      const dashboard = getDashboard(dashboardStore.currentDashboard as DashboardItem).widgets;
       associateMetrics(properties.items, events, dashboard);
       associateTraceLog(properties.items, events, dashboard);
     });
@@ -130,11 +130,10 @@ limitations under the License. -->
     const i = events[index - 1 || 0];
     for (const widget of widgets) {
       if (isNaN(index)) {
-        const item = {
+        const item: LayoutConfig = {
           ...widget,
           filters: {
             sourceId: props.data.id || "",
-            duration: null,
           },
         };
         dashboardStore.setWidget(item);
@@ -154,8 +153,8 @@ limitations under the License. -->
           filters: {
             sourceId: props.data.id || "",
             duration: {
-              start: dateFormatStep(getLocalTime(appStore.utc, start), step, true),
-              end: dateFormatStep(getLocalTime(appStore.utc, end), step, true),
+              startTime: dateFormatStep(getLocalTime(appStore.utc, start), step, true),
+              endTime: dateFormatStep(getLocalTime(appStore.utc, end), step, true),
               step,
             },
           },
@@ -187,14 +186,14 @@ limitations under the License. -->
 
     for (const widget of widgets) {
       if (isNaN(index)) {
-        const item = {
+        const item: LayoutConfig = {
           ...widget,
           filters: {
-            sourceId: dashboardStore.selectedGrid.id || "",
+            sourceId: dashboardStore.selectedGrid?.id || "",
             isRange: true,
             duration: {
-              startTime: null,
-              endTime: null,
+              startTime: "",
+              endTime: "",
             },
           },
         };
@@ -203,10 +202,10 @@ limitations under the License. -->
         const { start, end } = setEndTime(i.start, i.end);
         const startTime = dateFormatTime(start, appStore.duration.step);
         const endTime = dateFormatTime(end, appStore.duration.step);
-        const item = {
+        const item: LayoutConfig = {
           ...widget,
           filters: {
-            sourceId: dashboardStore.selectedGrid.id || "",
+            sourceId: dashboardStore.selectedGrid?.id || "",
             isRange: true,
             duration: {
               startTime,
diff --git a/src/views/dashboard/related/event/Header.vue b/src/views/dashboard/related/event/Header.vue
index ba0deabd..8af195bf 100644
--- a/src/views/dashboard/related/event/Header.vue
+++ b/src/views/dashboard/related/event/Header.vue
@@ -150,7 +150,6 @@ limitations under the License. -->
       return;
     }
     eventStore.setEventCondition({
-      // layer: dashboardStore.layerId,
       paging: {
         pageNum: pageNum.value,
         pageSize: pageSize,
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 04a94b22..26b7ee2a 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -150,17 +150,22 @@ limitations under the License. -->
     needQuery: { type: Boolean, default: true },
     data: {
       type: Object as PropType<LayoutConfig>,
-      default: () => ({ graph: {} }),
+      default: () => ({}),
     },
   });
   const { t } = useI18n();
-  const appStore = useAppStoreWithOut();
+  const appStore: ReturnType<typeof useAppStoreWithOut> = useAppStoreWithOut();
   const selectorStore = useSelectorStore();
   const dashboardStore = useDashboardStore();
   const logStore = useLogStore();
   const { setDurationRow, getDurationTime, getMaxRange } = useDuration();
-  const traceId = ref<string>((props.data.filters && props.data.filters.traceId) || "");
-  const duration = ref<DurationTime>((props.data.filters && props.data.filters.duration) || getDurationTime());
+  const traceId = ref<string>(props.data.filters?.traceId || "");
+  const { duration: filtersDuration } = props.data.filters || {};
+  const duration = ref<DurationTime>(
+    filtersDuration
+      ? { start: filtersDuration.startTime || "", end: filtersDuration.endTime || "", step: filtersDuration.step || "" }
+      : getDurationTime(),
+  );
   const keywordsOfContent = ref<string[]>([]);
   const excludingKeywordsOfContent = ref<string[]>([]);
   const tagsList = ref<string[]>([]);
@@ -175,17 +180,17 @@ limitations under the License. -->
     service: { value: "", label: "" },
     category: { value: "ALL", label: "All" },
   });
-  const maxRange = computed(() =>
-    getMaxRange(
-      appStore.coldStageMode
-        ? isBrowser.value
-          ? appStore.recordsTTL.coldBrowserErrorLog
-          : appStore.recordsTTL.coldLog
-        : isBrowser.value
-        ? appStore.recordsTTL.browserErrorLog
-        : appStore.recordsTTL.log,
-    ),
-  );
+  const maxRange = computed(() => {
+    const ttl = appStore.coldStageMode
+      ? isBrowser.value
+        ? appStore.recordsTTL?.coldBrowserErrorLog
+        : appStore.recordsTTL?.coldLog
+      : isBrowser.value
+      ? appStore.recordsTTL?.browserErrorLog
+      : appStore.recordsTTL?.log;
+
+    return getMaxRange(ttl as number);
+  });
   if (props.needQuery) {
     init();
   }
@@ -259,10 +264,10 @@ limitations under the License. -->
     let endpoint = "",
       instance = "";
     if (dashboardStore.entity === EntityType[2].value) {
-      endpoint = selectorStore.currentPod.id;
+      endpoint = selectorStore.currentPod?.id || "";
     }
     if (dashboardStore.entity === EntityType[3].value) {
-      instance = selectorStore.currentPod.id;
+      instance = selectorStore.currentPod?.id || "";
     }
     if (dashboardStore.layerId === "BROWSER") {
       logStore.setLogCondition({
@@ -396,8 +401,15 @@ limitations under the License. -->
         if (JSON.stringify(newJson) === JSON.stringify(oldJson)) {
           return;
         }
-        traceId.value = props.data.filters.traceId || "";
-        duration.value = props.data.filters.duration || getDurationTime();
+        const { traceId: filtersTraceId, duration: filtersDuration } = props.data.filters || {};
+        traceId.value = filtersTraceId || "";
+        duration.value = filtersDuration
+          ? {
+              start: filtersDuration.startTime || "",
+              end: filtersDuration.endTime || "",
+              step: filtersDuration.step || "",
+            }
+          : getDurationTime();
         init();
       }
     },
diff --git a/src/views/dashboard/related/log/LogTable/LogService.vue b/src/views/dashboard/related/log/LogTable/LogService.vue
index ed87d7cb..28119c0f 100644
--- a/src/views/dashboard/related/log/LogTable/LogService.vue
+++ b/src/views/dashboard/related/log/LogTable/LogService.vue
@@ -39,19 +39,19 @@ limitations under the License. -->
   import { ServiceLogConstants } from "./data";
   import getDashboard from "@/hooks/useDashboardsSession";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import type { LayoutConfig } from "@/types/dashboard";
+  import type { LayoutConfig, DashboardItem } from "@/types/dashboard";
   import { dateFormat } from "@/utils/dateFormat";
   import { WidgetType } from "@/views/dashboard/data";
   import { useLogStore } from "@/store/modules/log";
   const logStore = useLogStore();
 
-  /*global defineProps, defineEmits, Recordable */
+  /*global defineProps, defineEmits */
   const props = defineProps({
     data: { type: Object as any, default: () => ({}) },
     noLink: { type: Boolean, default: true },
   });
   const dashboardStore = useDashboardStore();
-  const options: Recordable<LayoutConfig> = inject("options") || {};
+  const options: LayoutConfig | null = inject("options") || null;
   const emit = defineEmits(["select"]);
   const columns = ServiceLogConstants;
   const level = computed(() => {
@@ -78,11 +78,11 @@ limitations under the License. -->
     emit("select", props.data);
   }
   function linkTrace(id: string) {
-    const { associationWidget } = getDashboard(dashboardStore.currentDashboard);
+    const { associationWidget } = getDashboard(dashboardStore.currentDashboard as DashboardItem);
     associationWidget(
-      (options.id as any) || "",
+      (options?.id || "") as string,
       {
-        sourceId: options.id || "",
+        sourceId: (options?.id || "") as string,
         traceId: id,
         id: props.data.serviceId || "",
       },
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index a1417a43..d4a0f28b 100644
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -128,6 +128,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import icons from "@/assets/img/icons";
   import { Themes } from "@/constants/data";
+  import type { EBPFTaskList } from "@/types/ebpf";
 
   /*global Nullable, defineProps */
   const props = defineProps({
@@ -361,7 +362,7 @@ limitations under the License. -->
     if (dates.value) {
       times = dates.value;
     } else {
-      const { taskStartTime, fixedTriggerDuration } = networkProfilingStore.selectedNetworkTask;
+      const { taskStartTime, fixedTriggerDuration } = (networkProfilingStore.selectedNetworkTask as EBPFTaskList) || {};
       const startTime =
         fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
       times = {
diff --git a/src/views/dashboard/related/network-profiling/components/Settings.vue b/src/views/dashboard/related/network-profiling/components/Settings.vue
index 680ea733..04ab9b31 100644
--- a/src/views/dashboard/related/network-profiling/components/Settings.vue
+++ b/src/views/dashboard/related/network-profiling/components/Settings.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="label">{{ t("linkDashboard") }}</div>
   <Selector
-    :value="(dashboardStore.selectedGrid && dashboardStore.selectedGrid.linkDashboard) || ''"
+    :value="dashboardStore.selectedGrid?.linkDashboard || ''"
     :options="linkDashboards"
     size="small"
     placeholder="Please input a dashboard name for calls"
@@ -30,6 +30,7 @@ limitations under the License. -->
   import type { DashboardItem } from "@/types/dashboard";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { EntityType } from "@/views/dashboard/data";
+  import type { LayoutConfig } from "@/types/dashboard";
   /*global defineEmits */
   const emits = defineEmits(["update"]);
   const { t } = useI18n();
@@ -55,13 +56,19 @@ limitations under the License. -->
 
   function changeLinkDashboard(opt: { value: string }[]) {
     const linkDashboard = opt.length ? opt[0].value : "";
-    const p = {
+    const item = {
+      x: 0,
+      y: 0,
+      w: 0,
+      h: 0,
+      i: "",
+      type: "",
       ...dashboardStore.selectedGrid,
       linkDashboard,
     };
-    dashboardStore.selectWidget(p);
-    dashboardStore.setConfigs(p);
-    emits("update", p);
+    dashboardStore.selectWidget(item as LayoutConfig);
+    dashboardStore.setConfigs(item as LayoutConfig);
+    emits("update", item);
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/related/network-profiling/components/Tasks.vue b/src/views/dashboard/related/network-profiling/components/Tasks.vue
index 7cc63ea5..7f11b12f 100644
--- a/src/views/dashboard/related/network-profiling/components/Tasks.vue
+++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue
@@ -39,7 +39,7 @@ limitations under the License. -->
             <td
               class="profile-td"
               :class="{
-                selected: networkProfilingStore.selectedNetworkTask.taskId === i.taskId,
+                selected: networkProfilingStore.selectedNetworkTask?.taskId === i.taskId,
               }"
             >
               <div class="ell">
@@ -103,7 +103,8 @@ limitations under the License. -->
     getTopology();
   }
   async function getTopology() {
-    const { taskStartTime, fixedTriggerDuration, taskId } = networkProfilingStore.selectedNetworkTask;
+    const { taskStartTime, fixedTriggerDuration, taskId } =
+      (networkProfilingStore.selectedNetworkTask as EBPFTaskList) || {};
     const serviceInstanceId = (selectorStore.currentPod && selectorStore.currentPod.id) || "";
     const startTime =
       fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
@@ -171,7 +172,9 @@ limitations under the License. -->
   }
 
   async function keepAliveNetwork() {
-    const res = await networkProfilingStore.keepNetworkProfiling(networkProfilingStore.selectedNetworkTask.taskId);
+    const res = await networkProfilingStore.keepNetworkProfiling(
+      networkProfilingStore.selectedNetworkTask?.taskId || "",
+    );
     if (res.errors) {
       intervalKeepAlive.value && clearInterval(intervalKeepAlive.value);
       return ElMessage.error(res.errors);
diff --git a/src/views/dashboard/related/network-profiling/components/TimeLine.vue b/src/views/dashboard/related/network-profiling/components/TimeLine.vue
index 03d6f7f0..396a6207 100644
--- a/src/views/dashboard/related/network-profiling/components/TimeLine.vue
+++ b/src/views/dashboard/related/network-profiling/components/TimeLine.vue
@@ -36,6 +36,7 @@ limitations under the License. -->
   import dateFormatStep from "@/utils/dateFormat";
   import getLocalTime from "@/utils/localtime";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import type { EBPFTaskList } from "@/types/ebpf";
 
   /*global Nullable, defineEmits */
   const emits = defineEmits(["get"]);
@@ -55,10 +56,11 @@ limitations under the License. -->
     if (!timeRange.value) {
       return;
     }
-    if (!networkProfilingStore.selectedNetworkTask.taskId) {
+    if (!networkProfilingStore.selectedNetworkTask?.taskId) {
       return;
     }
-    const { taskStartTime, fixedTriggerDuration, targetType, taskId } = networkProfilingStore.selectedNetworkTask;
+    const { taskStartTime, fixedTriggerDuration, targetType, taskId } =
+      (networkProfilingStore.selectedNetworkTask as EBPFTaskList) || {};
     if (task.value[0] && task.value[0].data.taskId === taskId) {
       if (isUpdate.value) {
         return;
diff --git a/src/views/dashboard/related/profile/Content.vue b/src/views/dashboard/related/profile/Content.vue
index 622b2411..9f7b64a7 100644
--- a/src/views/dashboard/related/profile/Content.vue
+++ b/src/views/dashboard/related/profile/Content.vue
@@ -89,7 +89,7 @@ limitations under the License. -->
     };
     countRange();
     for (const tree of profileStore.analyzeTrees) {
-      const ele = processTree(tree.elements);
+      const ele = processTree(tree.elements as TraceProfilingElement[]);
       root.children && root.children.push(ele);
     }
     const param = (root.children || []).reduce(
diff --git a/src/views/dashboard/related/profile/Header.vue b/src/views/dashboard/related/profile/Header.vue
index b0d221e7..6c039a0b 100644
--- a/src/views/dashboard/related/profile/Header.vue
+++ b/src/views/dashboard/related/profile/Header.vue
@@ -70,7 +70,7 @@ limitations under the License. -->
     if (!selectorStore.currentService) {
       return;
     }
-    const service = selectorStore.currentService.id;
+    const service = selectorStore.currentService.id || "";
     const res = await profileStore.getEndpoints(service, keyword);
 
     if (res.errors) {
diff --git a/src/views/dashboard/related/profile/components/NewTask.vue b/src/views/dashboard/related/profile/components/NewTask.vue
index fdcf8ea4..48b5b03e 100644
--- a/src/views/dashboard/related/profile/components/NewTask.vue
+++ b/src/views/dashboard/related/profile/components/NewTask.vue
@@ -98,7 +98,7 @@ limitations under the License. -->
     if (!selectorStore.currentService) {
       return;
     }
-    const service = selectorStore.currentService.id;
+    const service = selectorStore.currentService.id || "";
     const res = await profileStore.getEndpoints(service, keyword);
 
     if (res.errors) {
@@ -129,10 +129,14 @@ limitations under the License. -->
   }
 
   async function createTask() {
+    if (!selectorStore.currentService?.id) {
+      ElMessage.error("Please select a service");
+      return;
+    }
     emits("close");
     const date = monitorTime.value === "0" ? new Date() : time.value;
     const params = {
-      serviceId: selectorStore.currentService.id,
+      serviceId: selectorStore.currentService?.id || "",
       endpointName: endpointName.value,
       startTime: date.getTime(),
       duration: Number(monitorDuration.value),
diff --git a/src/views/dashboard/related/profile/components/SegmentList.vue b/src/views/dashboard/related/profile/components/SegmentList.vue
index 03101d77..dade516f 100644
--- a/src/views/dashboard/related/profile/components/SegmentList.vue
+++ b/src/views/dashboard/related/profile/components/SegmentList.vue
@@ -56,7 +56,7 @@ limitations under the License. -->
   const { t } = useI18n();
   const profileStore = useProfileStore();
   const key = computed(
-    () => (profileStore.currentSegment.spans?.length && profileStore.currentSegment.spans[0].segmentId) || "",
+    () => (profileStore.currentSegment?.spans?.length && profileStore.currentSegment?.spans[0]?.segmentId) || "",
   );
 
   async function selectSegment(item: Trace) {
diff --git a/src/views/dashboard/related/profile/components/SpanTree.vue b/src/views/dashboard/related/profile/components/SpanTree.vue
index d8a9e5cf..6e3475bf 100644
--- a/src/views/dashboard/related/profile/components/SpanTree.vue
+++ b/src/views/dashboard/related/profile/components/SpanTree.vue
@@ -35,14 +35,14 @@ limitations under the License. -->
         @change="selectDisplayMode"
         class="mr-10 fliter"
       />
-      <el-button type="primary" size="small" :disabled="!profileStore.currentSpan.profiled" @click="analyzeProfile()">
+      <el-button type="primary" size="small" :disabled="!profileStore.currentSpan?.profiled" @click="analyzeProfile()">
         {{ t("analyze") }}
       </el-button>
     </div>
     <div class="profile-table">
       <Table
-        :data="profileStore.segmentSpans"
-        :traceId="profileStore.currentSegment.traceId"
+        :data="(profileStore.segmentSpans as SegmentSpan[])"
+        :traceId="profileStore.currentSegment?.traceId"
         :headerType="WidgetType.Profile"
         @select="selectSpan"
       />
@@ -55,7 +55,7 @@ limitations under the License. -->
   import Table from "../../trace/components/Table.vue";
   import { useProfileStore } from "@/store/modules/profile";
   import Selector from "@/components/Selector.vue";
-  import type { Span } from "@/types/trace";
+  import type { SegmentSpan, ProfileTimeRange, ProfileAnalyzeParams } from "@/types/profile";
   import type { Option } from "@/types/app";
   import { ElMessage } from "element-plus";
   import { ProfileDataMode, ProfileDisplayMode } from "./data";
@@ -68,9 +68,9 @@ limitations under the License. -->
   const dataMode = ref<string>("include");
   const displayMode = ref<string>("tree");
   const message = ref<string>("");
-  const timeRange = ref<Array<{ start: number; end: number }>>([]);
+  const timeRange = ref<ProfileTimeRange[]>([]);
 
-  function selectSpan(span: Span) {
+  function selectSpan(span: SegmentSpan) {
     profileStore.setCurrentSpan(span);
   }
 
@@ -85,15 +85,15 @@ limitations under the License. -->
   }
 
   async function analyzeProfile() {
-    if (!profileStore.currentSpan.profiled) {
+    if (!profileStore.currentSpan?.profiled) {
       ElMessage.info("It's a un-profiled span");
       return;
     }
     emits("loading", true);
     updateTimeRange();
-    const params = timeRange.value.map((t: { start: number; end: number }) => {
+    const params: ProfileAnalyzeParams[] = timeRange.value.map((t: ProfileTimeRange) => {
       return {
-        segmentId: profileStore.currentSpan.segmentId,
+        segmentId: profileStore.currentSpan?.segmentId || "",
         timeRange: t,
       };
     });
@@ -111,19 +111,19 @@ limitations under the License. -->
     if (dataMode.value === "include") {
       timeRange.value = [
         {
-          start: profileStore.currentSpan.startTime,
-          end: profileStore.currentSpan.endTime,
+          start: profileStore.currentSpan?.startTime || 0,
+          end: profileStore.currentSpan?.endTime || 0,
         },
       ];
     } else {
-      const { children, startTime, endTime } = profileStore.currentSpan;
-      let dateRange = [];
+      const { children, startTime, endTime } = profileStore.currentSpan || {};
+      let dateRange: ProfileTimeRange[] = [];
 
-      if (!children || !children.length) {
+      if (!children?.length) {
         timeRange.value = [
           {
-            start: startTime,
-            end: endTime,
+            start: startTime || 0,
+            end: endTime || 0,
           },
         ];
         return;
@@ -131,16 +131,16 @@ limitations under the License. -->
       for (const item of children) {
         dateRange.push(
           {
-            start: startTime,
-            end: item.startTime,
+            start: startTime || 0,
+            end: item.startTime || 0,
           },
           {
-            start: item.endTime,
-            end: endTime,
+            start: item.endTime || 0,
+            end: endTime || 0,
           },
         );
       }
-      dateRange = dateRange.reduce((prev: any[], cur) => {
+      dateRange = dateRange.reduce((prev: ProfileTimeRange[], cur: ProfileTimeRange) => {
         let isUpdate = false;
         for (const item of prev) {
           if (cur.start <= item.end && item.start <= cur.start) {
diff --git a/src/views/dashboard/related/profile/components/TaskList.vue b/src/views/dashboard/related/profile/components/TaskList.vue
index 9efc0b0f..f618203b 100644
--- a/src/views/dashboard/related/profile/components/TaskList.vue
+++ b/src/views/dashboard/related/profile/components/TaskList.vue
@@ -118,7 +118,7 @@ limitations under the License. -->
   const instanceLogs = ref<TaskLog | any>({});
 
   async function changeTask(item: TaskListItem) {
-    profileStore.setCurrentSegment({});
+    profileStore.setCurrentSegment(null);
     profileStore.setCurrentTask(item);
     const res = await profileStore.getSegmentList({ taskID: item.id });
     if (res.errors) {
diff --git a/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue b/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue
index 1fbf78a4..b364d81b 100644
--- a/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue
+++ b/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue
@@ -13,12 +13,12 @@ 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="content" v-if="taskTimelineStore.selectedTask.targetType === TargetTypes[2].value">
+  <div class="content" v-if="taskTimelineStore.selectedTask?.targetType === TargetTypes[2].value">
     <process-topology v-if="networkProfilingStore.nodes.length" :config="config" />
   </div>
   <div
     class="content"
-    v-if="[TargetTypes[1].value, TargetTypes[0].value].includes(taskTimelineStore.selectedTask.targetType)"
+    v-if="[TargetTypes[1].value, TargetTypes[0].value].includes(taskTimelineStore.selectedTask?.targetType as string)"
   >
     <div class="schedules">
       <EBPFSchedules />
@@ -27,7 +27,7 @@ limitations under the License. -->
       <EBPFStack />
     </div>
   </div>
-  <div class="text" v-if="!taskTimelineStore.selectedTask.targetType">
+  <div class="text" v-if="!taskTimelineStore.selectedTask?.targetType">
     {{ t("noData") }}
   </div>
 </template>
diff --git a/src/views/dashboard/related/task-timeline/components/Timeline.vue b/src/views/dashboard/related/task-timeline/components/Timeline.vue
index 7ccf984f..3bae7e8b 100644
--- a/src/views/dashboard/related/task-timeline/components/Timeline.vue
+++ b/src/views/dashboard/related/task-timeline/components/Timeline.vue
@@ -16,7 +16,7 @@ limitations under the License. -->
   <div ref="timeline" class="task-timeline"></div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch, onMounted, onUnmounted } from "vue";
+  import { ref, watch, onMounted, onUnmounted, PropType } from "vue";
   import dayjs from "dayjs";
   import { useThrottleFn } from "@vueuse/core";
   import { ElMessage } from "element-plus";
@@ -28,6 +28,7 @@ limitations under the License. -->
   import { DataSet, Timeline } from "vis-timeline/standalone";
   import "vis-timeline/styles/vis-timeline-graph2d.css";
   import { EBPFProfilingTriggerType } from "@/store/data";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   const taskTimelineStore = useTaskTimelineStore();
   const selectorStore = useSelectorStore();
@@ -36,7 +37,7 @@ limitations under the License. -->
   /* global defineProps, Nullable */
   const props = defineProps({
     data: {
-      type: Object,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({}),
     },
   });
@@ -57,11 +58,11 @@ limitations under the License. -->
   async function init() {
     const serviceId = (selectorStore.currentService && selectorStore.currentService.id) || "";
     const serviceInstanceId = (selectorStore.currentPod && selectorStore.currentPod.id) || "";
-    const type = continousProfilingStore.selectedStrategy.type;
+    const type = continousProfilingStore.selectedStrategy?.type || "";
     const res = await taskTimelineStore.getContinousTaskList({
       serviceId,
       serviceInstanceId,
-      targets: type ? [type] : null,
+      targets: type ? [type] : [],
       triggerType: EBPFProfilingTriggerType.CONTINUOUS_PROFILING,
     });
     if (res.errors) {
@@ -121,7 +122,7 @@ limitations under the License. -->
     visGraph.value.on("select", async (properties: { items: number[] }) => {
       dashboardStore.selectWidget(props.data);
       const index = properties.items[0];
-      const task = taskTimelineStore.taskList[index];
+      const task = taskTimelineStore.taskList[index] as EBPFTaskList;
 
       await taskTimelineStore.setSelectedTask(task);
       await taskTimelineStore.getGraphData();
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 3741704d..499872ac 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -75,7 +75,7 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import { ref, computed, watch } from "vue";
   import * as d3 from "d3";
-  import type { Node, Call } from "@/types/topology";
+  import type { Node, Call, HierarchyNode } from "@/types/topology";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import icons from "@/assets/img/icons";
   import { changeNode, computeHierarchyLevels, hierarchy } from "./utils/layout";
@@ -92,7 +92,7 @@ limitations under the License. -->
       default: "",
     },
     nodes: {
-      type: Array as PropType<Node[]>,
+      type: Array as PropType<(Node | HierarchyNode)[]>,
       default: () => [],
     },
     calls: {
@@ -136,7 +136,7 @@ limitations under the License. -->
 
   function draw() {
     const levels = computeHierarchyLevels(props.nodes);
-    topologyLayout.value = hierarchy(levels, props.calls, radius);
+    topologyLayout.value = hierarchy(levels as Node[][], props.calls, radius);
     graphWidth.value = topologyLayout.value.layout.width;
     graphHeight.value = topologyLayout.value.layout.height;
     const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {
diff --git a/src/views/dashboard/related/topology/components/utils/layout.ts b/src/views/dashboard/related/topology/components/utils/layout.ts
index d014b7a0..34e5accb 100644
--- a/src/views/dashboard/related/topology/components/utils/layout.ts
+++ b/src/views/dashboard/related/topology/components/utils/layout.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import * as d3 from "d3";
-import type { Node, Call } from "@/types/topology";
+import type { Node, Call, HierarchyNode } from "@/types/topology";
 
 export function layout(levels: Node[][], calls: Call[], radius: number) {
   // precompute level depth
@@ -279,14 +279,14 @@ export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
 
   return { nodes, layout, calls: computeCallPos(calls, radius) };
 }
-export function computeHierarchyLevels(nodes: Node[]) {
-  const levelsNum: number[] = nodes.map((d: Node) => d.l || 0);
+export function computeHierarchyLevels(nodes: (Node | HierarchyNode)[]) {
+  const levelsNum: number[] = nodes.map((d: Node | HierarchyNode) => (d as Node).l || 0);
   const list = [...new Set(levelsNum)];
   const sortedArr = list.sort((a, b) => b - a);
   const nodesList = [];
 
   for (const min of sortedArr) {
-    const arr = nodes.filter((d) => d.l === min);
+    const arr = nodes.filter((d) => (d as Node).l === min);
     nodesList.push(arr);
   }
 
diff --git a/src/views/dashboard/related/topology/config/Metrics.vue b/src/views/dashboard/related/topology/config/Metrics.vue
index d33b759c..d82d4bbb 100644
--- a/src/views/dashboard/related/topology/config/Metrics.vue
+++ b/src/views/dashboard/related/topology/config/Metrics.vue
@@ -52,6 +52,7 @@ limitations under the License. -->
   import { EntityType, ConfigFieldTypes } from "@/views/dashboard/data";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import getDashboard from "@/hooks/useDashboardsSession";
+  import type { MetricConfigOpt } from "@/types/dashboard";
 
   /*global defineEmits, defineProps */
   const props = defineProps({
@@ -68,16 +69,16 @@ limitations under the License. -->
       return props.expressions || [];
     }
     let metrics: string[] = [];
-    const { linkServerExpressions, linkClientExpressions, nodeExpressions } = dashboardStore.selectedGrid;
+    const { linkServerExpressions, linkClientExpressions, nodeExpressions } = dashboardStore.selectedGrid || {};
     switch (props.type) {
       case "linkServerMetricConfig":
-        metrics = linkServerExpressions;
+        metrics = linkServerExpressions || [];
         break;
       case "linkClientMetricConfig":
-        metrics = linkClientExpressions;
+        metrics = linkClientExpressions || [];
         break;
       case "nodeMetricConfig":
-        metrics = nodeExpressions;
+        metrics = nodeExpressions || [];
         break;
     }
     return metrics || [];
@@ -106,17 +107,17 @@ limitations under the License. -->
 
       return config || [];
     }
-    let config = [];
+    let config: MetricConfigOpt[] = [];
 
     switch (props.type) {
       case "linkServerMetricConfig":
-        config = dashboardStore.selectedGrid.linkServerMetricConfig;
+        config = dashboardStore.selectedGrid?.linkServerMetricConfig || [];
         break;
       case "linkClientMetricConfig":
-        config = dashboardStore.selectedGrid.linkClientMetricConfig;
+        config = dashboardStore.selectedGrid?.linkClientMetricConfig || [];
         break;
       case "nodeMetricConfig":
-        config = dashboardStore.selectedGrid.nodeMetricConfig;
+        config = dashboardStore.selectedGrid?.nodeMetricConfig || [];
         break;
     }
     return config || [];
diff --git a/src/views/dashboard/related/topology/config/Settings.vue b/src/views/dashboard/related/topology/config/Settings.vue
index 14ea596b..b38d8e6c 100644
--- a/src/views/dashboard/related/topology/config/Settings.vue
+++ b/src/views/dashboard/related/topology/config/Settings.vue
@@ -161,7 +161,7 @@ limitations under the License. -->
   import { ScopeType, EntityType, CallTypes } from "@/views/dashboard/data";
   import type { Option } from "@/types/app";
   import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
-  import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
+  import type { DashboardItem, MetricConfigOpt, LayoutConfig, NodeDashboard } from "@/types/dashboard";
   import type { Node } from "@/types/topology";
   import Metrics from "./Metrics.vue";
 
@@ -171,38 +171,28 @@ limitations under the License. -->
   const dashboardStore = useDashboardStore();
   const topologyStore = useTopologyStore();
   const { selectedGrid } = dashboardStore;
-  const nodeDashboard =
-    selectedGrid.nodeDashboard && selectedGrid.nodeDashboard.length ? selectedGrid.nodeDashboard : "";
-  const isService = [EntityType[0].value, EntityType[1].value].includes(dashboardStore.entity);
-  const items = reactive<
-    {
-      scope: string;
-      dashboard: string;
-    }[]
-  >(isService && nodeDashboard ? nodeDashboard : [{ scope: "", dashboard: "" }]);
+  const isService: boolean = [EntityType[0].value, EntityType[1].value].includes(dashboardStore.entity);
+  const items = reactive<NodeDashboard[]>((isService && selectedGrid?.nodeDashboard) || [{ scope: "", dashboard: "" }]);
   const states = reactive<{
     linkDashboard: string;
-    nodeDashboard: {
-      scope: string;
-      dashboard: string;
-    }[];
+    nodeDashboard: NodeDashboard[];
     linkDashboards: (DashboardItem & { label: string; value: string })[];
     nodeDashboards: (DashboardItem & { label: string; value: string })[];
     linkServerExpressions: string[];
     linkClientExpressions: string[];
     nodeExpressions: string[];
   }>({
-    linkDashboard: selectedGrid.linkDashboard || "",
-    nodeDashboard: selectedGrid.nodeDashboard || [],
+    linkDashboard: selectedGrid?.linkDashboard || "",
+    nodeDashboard: selectedGrid?.nodeDashboard || [],
     linkDashboards: [],
     nodeDashboards: [],
-    linkServerExpressions: selectedGrid.linkServerExpressions || [],
-    linkClientExpressions: selectedGrid.linkClientExpressions || [],
-    nodeExpressions: selectedGrid.nodeExpressions || [],
+    linkServerExpressions: selectedGrid?.linkServerExpressions || [],
+    linkClientExpressions: selectedGrid?.linkClientExpressions || [],
+    nodeExpressions: selectedGrid?.nodeExpressions || [],
   });
-  const legendMQE = ref<{ expression: string }>(selectedGrid.legendMQE || { expression: "" });
+  const legendMQE = ref<{ expression: string }>(selectedGrid?.legendMQE || { expression: "" });
   const configType = ref<string>("");
-  const description = reactive<any>(selectedGrid.description || {});
+  const description = reactive<any>(selectedGrid?.description || {});
 
   getDashboardList();
   async function getDashboardList() {
@@ -237,7 +227,7 @@ limitations under the License. -->
   }
   async function setLegend() {
     updateSettings();
-    const expression = dashboardStore.selectedGrid.legendMQE && dashboardStore.selectedGrid.legendMQE.expression;
+    const expression: string = dashboardStore.selectedGrid?.legendMQE?.expression || "";
     const { getMetrics } = useQueryTopologyExpressionsProcessor(
       [expression],
       topologyStore.nodes.filter((d: Node) => d.isReal),
@@ -295,7 +285,7 @@ limitations under the License. -->
       legendMQE: legendMQE.value,
       ...metricConfig,
       description,
-    };
+    } as LayoutConfig;
     dashboardStore.selectWidget(param);
     dashboardStore.setConfigs(param);
     emit("update", param);
@@ -314,7 +304,7 @@ limitations under the License. -->
     states.linkClientExpressions = param;
     updateSettings();
     if (!states.linkClientExpressions.length) {
-      topologyStore.changeLinkClientMetrics({});
+      topologyStore.setLinkClientMetrics({});
       return;
     }
     topologyStore.getLinkExpressions(states.linkClientExpressions, CallTypes.Client);
diff --git a/src/views/dashboard/related/topology/pod/InstanceMap.vue b/src/views/dashboard/related/topology/pod/InstanceMap.vue
index a192745b..01deabd6 100644
--- a/src/views/dashboard/related/topology/pod/InstanceMap.vue
+++ b/src/views/dashboard/related/topology/pod/InstanceMap.vue
@@ -125,11 +125,11 @@ limitations under the License. -->
     const html = exprssions.map((m: string, index: number) => {
       const metric =
         topologyStore.hierarchyInstanceNodeMetrics[data.layer || ""][m].values.find(
-          (val: { id: string; value: string }) => val.id === data.id,
-        ) || {};
+          (val: { id: string; value: unknown }) => val.id === data.id,
+        ) || null;
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
 
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value || NaN} ${
         opt.unit || ""
       }</div>`;
     });
diff --git a/src/views/dashboard/related/topology/pod/PodMap.vue b/src/views/dashboard/related/topology/pod/PodMap.vue
index e73d781a..c3fcb4bd 100644
--- a/src/views/dashboard/related/topology/pod/PodMap.vue
+++ b/src/views/dashboard/related/topology/pod/PodMap.vue
@@ -102,7 +102,7 @@ limitations under the License. -->
   ];
 
   onMounted(() => {
-    loadTopology(selectorStore.currentPod && selectorStore.currentPod.id);
+    loadTopology(selectorStore.currentPod?.id);
     window.addEventListener("resize", resize);
   });
 
@@ -134,7 +134,7 @@ limitations under the License. -->
   }
 
   function inspect() {
-    const id = topologyStore.node.id;
+    const id = topologyStore.node?.id;
     topologyStore.setNode(null);
     topologyStore.setLink(null);
     loadTopology(id);
@@ -158,7 +158,7 @@ limitations under the License. -->
       ElMessage.error(`The dashboard named ${settings.value.nodeDashboard} doesn't exist`);
       return;
     }
-    const path = `/dashboard/${dashboard.layer}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${dashboard.name}`;
+    const path = `/dashboard/${dashboard.layer}/${entity}/${topologyStore.node?.serviceId}/${topologyStore.node?.id}/${dashboard.name}`;
     const routeUrl = router.resolve({ path });
     window.open(routeUrl.href, "_blank");
     topologyStore.setNode(null);
@@ -175,7 +175,7 @@ limitations under the License. -->
   }
 
   function backToTopology() {
-    loadTopology(selectorStore.currentPod.id);
+    loadTopology(selectorStore.currentPod?.id);
     topologyStore.setNode(null);
   }
 
@@ -210,14 +210,14 @@ limitations under the License. -->
 
   async function changeDepth(opt: Option[] | any) {
     depth.value = opt[0].value;
-    loadTopology(selectorStore.currentPod.id);
+    loadTopology(selectorStore.currentPod?.id);
   }
 
   async function getTopology(id?: string) {
     let resp;
     switch (dashboardStore.entity) {
       case EntityType[2].value:
-        resp = await topologyStore.updateEndpointTopology([id], Number(depth.value));
+        resp = await topologyStore.updateEndpointTopology([id as string], Number(depth.value));
         break;
       case EntityType[5].value:
         resp = await topologyStore.getInstanceTopology();
@@ -238,7 +238,7 @@ limitations under the License. -->
   watch(
     () => [selectorStore.currentPod],
     () => {
-      loadTopology(selectorStore.currentPod.id);
+      loadTopology(selectorStore.currentPod?.id);
       topologyStore.setNode(null);
       topologyStore.setLink(null);
     },
@@ -257,7 +257,7 @@ limitations under the License. -->
   watch(
     () => appStore.durationTime,
     () => {
-      loadTopology(selectorStore.currentPod.id);
+      loadTopology(selectorStore.currentPod?.id);
       topologyStore.setNode(null);
       topologyStore.setLink(null);
     },
diff --git a/src/views/dashboard/related/topology/pod/Sankey.vue b/src/views/dashboard/related/topology/pod/Sankey.vue
index feb054a0..2be28c1b 100644
--- a/src/views/dashboard/related/topology/pod/Sankey.vue
+++ b/src/views/dashboard/related/topology/pod/Sankey.vue
@@ -91,11 +91,11 @@ limitations under the License. -->
     const htmlServer = serverMetrics.map((m, index) => {
       const metric =
         topologyStore.linkServerMetrics[m]?.values?.find((val: { id: string; value: unknown }) => val.id === data.id) ||
-        {};
+        null;
       if (metric) {
         const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
 
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
+        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value} ${
           opt.unit || ""
         }</div>`;
       }
@@ -104,9 +104,9 @@ limitations under the License. -->
       const opt: MetricConfigOpt = linkClientMetricConfig[index] || {};
       const metric =
         topologyStore.linkClientMetrics[m]?.values?.find((val: { id: string; value: unknown }) => val.id === data.id) ||
-        {};
+        null;
 
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value} ${opt.unit || ""}</div>`;
     });
     const html = [
       `<div>${data.sourceObj.serviceName} -> ${data.targetObj.serviceName}</div>`,
@@ -123,10 +123,10 @@ limitations under the License. -->
     const html = nodeMetrics.map((m, index) => {
       const metric =
         topologyStore.nodeMetricValue[m]?.values?.find((val: { id: string; value: unknown }) => val.id === data.id) ||
-        {};
+        null;
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
 
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value} ${opt.unit || ""}</div>`;
     });
     return [` <div><span>name: </span>${data.serviceName}</div>`, ...html].join(" ");
   }
diff --git a/src/views/dashboard/related/topology/service/HierarchyMap.vue b/src/views/dashboard/related/topology/service/HierarchyMap.vue
index 0032832d..e6a8a65a 100644
--- a/src/views/dashboard/related/topology/service/HierarchyMap.vue
+++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue
@@ -133,10 +133,10 @@ limitations under the License. -->
     const html = exprssions.map((m: string, index: number) => {
       const metric =
         topologyStore.hierarchyNodeMetrics[data.layer || ""][m].values.find(
-          (val: { id: string; value: string }) => val.id === data.id,
-        ) || {};
+          (val: { id: string; value: unknown }) => val.id === data.id,
+        ) || null;
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value || NaN} ${
         opt.unit || ""
       }</div>`;
     });
diff --git a/src/views/dashboard/related/topology/service/ServiceMap.vue b/src/views/dashboard/related/topology/service/ServiceMap.vue
index afa7f9a3..6e05bf20 100644
--- a/src/views/dashboard/related/topology/service/ServiceMap.vue
+++ b/src/views/dashboard/related/topology/service/ServiceMap.vue
@@ -219,10 +219,10 @@ limitations under the License. -->
     loading.value = true;
     topologyStore.setNode(null);
     topologyStore.setLink(null);
-    const resp = await getTopology();
+    const resp: any = await getTopology();
     loading.value = false;
 
-    if (resp && resp.errors) {
+    if (resp?.errors) {
       ElMessage.error(resp.errors);
     }
     await update();
@@ -309,10 +309,10 @@ limitations under the License. -->
     const nodeMetricConfig = settings.value.nodeMetricConfig || [];
     const html = nodeMetrics.map((m, index) => {
       const metric =
-        topologyStore.nodeMetricValue[m]?.values?.find((val: { id: string; value: string }) => val.id === data.id) ||
-        {};
+        topologyStore.nodeMetricValue[m]?.values?.find((val: { id: string; value: unknown }) => val.id === data.id) ||
+        null;
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value || NaN} ${
         opt.unit || "unknown"
       }</div>`;
     });
@@ -415,11 +415,11 @@ limitations under the License. -->
     hierarchyRelated.value = true;
   }
   async function handleInspect() {
-    const id = topologyStore.node.id;
+    const id = topologyStore.node?.id || "";
     loading.value = true;
-    const resp = await topologyStore.getDepthServiceTopology([id], Number(depth.value));
+    const resp: any = await topologyStore.getDepthServiceTopology([id], Number(depth.value));
     loading.value = false;
-    if (resp && resp.errors) {
+    if (resp?.errors) {
       ElMessage.error(resp.errors);
     }
     await update();
@@ -431,7 +431,7 @@ limitations under the License. -->
       return;
     }
     const origin = dashboardStore.entity;
-    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node.id}/${params.dashboard}`;
+    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node?.id}/${params.dashboard}`;
     const routeUrl = router.resolve({ path });
 
     window.open(routeUrl.href, "_blank");
@@ -442,7 +442,7 @@ limitations under the License. -->
       return;
     }
     const origin = dashboardStore.entity;
-    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${topologyStore.node.id}/${params.dashboard}`;
+    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${topologyStore.node?.id}/${params.dashboard}`;
     const routeUrl = router.resolve({ path });
 
     window.open(routeUrl.href, "_blank");
@@ -453,7 +453,7 @@ limitations under the License. -->
       return;
     }
     const origin = dashboardStore.entity;
-    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node.id}/${params.dashboard}`;
+    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node?.id}/${params.dashboard}`;
     const routeUrl = router.resolve({ path });
 
     window.open(routeUrl.href, "_blank");
@@ -495,8 +495,8 @@ limitations under the License. -->
   }
   async function getTopology() {
     const ids = selectorStore.services.map((d: Service) => d.id);
-    const serviceIds = dashboardStore.entity === EntityType[0].value ? [selectorStore.currentService.id] : ids;
-    const resp = await topologyStore.getDepthServiceTopology(serviceIds, Number(depth.value));
+    const serviceIds = dashboardStore.entity === EntityType[0].value ? [selectorStore.currentService?.id] : ids;
+    const resp = await topologyStore.getDepthServiceTopology(serviceIds as string[], Number(depth.value));
     return resp;
   }
   function setConfig() {
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 9c1cd89f..6aa3640f 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -12,9 +12,9 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="trace-detail" v-loading="loading">
-    <div class="trace-detail-wrapper clear" v-if="traceStore.currentTrace.endpointNames">
+    <div class="trace-detail-wrapper clear" v-if="traceStore.currentTrace?.endpointNames">
       <h5 class="mb-5 mt-0">
-        <span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
+        <span class="vm">{{ traceStore.currentTrace?.endpointNames?.[0] }}</span>
         <div class="trace-log-btn">
           <el-button size="small" class="mr-10" type="primary" @click="searchTraceLogs">
             {{ t("viewLogs") }}
@@ -79,10 +79,10 @@ limitations under the License. -->
     <div class="no-data" v-else>{{ t("noData") }}</div>
     <div class="trace-chart">
       <component
-        v-if="traceStore.currentTrace.endpointNames"
+        v-if="traceStore.currentTrace?.endpointNames"
         :is="displayMode"
         :data="traceStore.traceSpans"
-        :traceId="traceStore.currentTrace.traceIds[0].value"
+        :traceId="traceStore.currentTrace?.traceIds?.[0]?.value"
         :showBtnDetail="false"
         :headerType="WidgetType.Trace"
       />
@@ -115,8 +115,7 @@ limitations under the License. -->
     props,
     setup(props) {
       const appStore = useAppStoreWithOut();
-      /*global Recordable */
-      const options: Recordable<LayoutConfig> = inject("options") || {};
+      const options: LayoutConfig | null = inject("options") || null;
       const { t } = useI18n();
       const traceStore = useTraceStore();
       const loading = ref<boolean>(false);
@@ -124,7 +123,7 @@ limitations under the License. -->
       const displayMode = ref<string>("List");
 
       function handleClick() {
-        copy(traceId.value || traceStore.currentTrace.traceIds[0].value);
+        copy(traceId.value || traceStore.currentTrace?.traceIds?.[0]?.value);
       }
 
       async function changeTraceId(opt: Option[]) {
@@ -140,10 +139,10 @@ limitations under the License. -->
       async function searchTraceLogs() {
         const { associationWidget } = getDashboard();
         associationWidget(
-          (options.id as any) || "",
+          options?.id || "",
           {
             sourceId: options?.id || "",
-            traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
+            traceId: traceId.value || traceStore.currentTrace?.traceIds?.[0]?.value,
             id: props.serviceId || undefined,
           },
           WidgetType.Log,
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index 95e39aca..f703057c 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -115,11 +115,16 @@ limitations under the License. -->
   const appStore = useAppStoreWithOut();
   const selectorStore = useSelectorStore();
   const dashboardStore = useDashboardStore();
-  const traceStore = useTraceStore();
+  const traceStore: ReturnType<typeof useTraceStore> = useTraceStore();
   const { setDurationRow, getDurationTime, getMaxRange } = useDuration();
   const filters = reactive<Recordable>(props.data.filters || {});
   const traceId = ref<string>(filters.traceId || "");
-  const duration = ref<DurationTime>(filters.duration || getDurationTime());
+  const { duration: filtersDuration } = filters;
+  const duration = ref<DurationTime>(
+    filtersDuration
+      ? { start: filtersDuration.startTime || "", end: filtersDuration.endTime || "", step: filtersDuration.step || "" }
+      : getDurationTime(),
+  );
   const minTraceDuration = ref<number>();
   const maxTraceDuration = ref<number>();
   const tagsList = ref<string[]>([]);
@@ -132,7 +137,7 @@ limitations under the License. -->
   });
   const durationRow = ref<Duration>(InitializationDurationRow);
   const maxRange = computed(() =>
-    getMaxRange(appStore.coldStageMode ? appStore.recordsTTL.coldTrace : appStore.recordsTTL.trace),
+    getMaxRange(appStore.coldStageMode ? appStore.recordsTTL?.coldTrace || 0 : appStore.recordsTTL?.trace || 0),
   );
   if (filters.queryOrder) {
     traceStore.setTraceCondition({
@@ -171,7 +176,7 @@ limitations under the License. -->
       state.service = { value: "", label: "" };
       return;
     } else {
-      state.service = getCurrentNode(traceStore.services) || traceStore.services[0];
+      state.service = getCurrentNode(traceStore.services as { id: string }[]) || traceStore.services[0];
     }
 
     emits("get", state.service.id);
@@ -186,7 +191,7 @@ limitations under the License. -->
       ElMessage.error(resp.errors);
       return;
     }
-    state.endpoint = getCurrentNode(traceStore.endpoints) || traceStore.endpoints[0];
+    state.endpoint = getCurrentNode(traceStore.endpoints as { id: string }[]) || traceStore.endpoints[0];
   }
   async function getInstances(id?: string) {
     const resp = await traceStore.getInstances(id);
@@ -194,7 +199,7 @@ limitations under the License. -->
       ElMessage.error(resp.errors);
       return;
     }
-    state.instance = getCurrentNode(traceStore.instances) || traceStore.instances[0];
+    state.instance = getCurrentNode(traceStore.instances as { id: string }[]) || traceStore.instances[0];
   }
   function getCurrentNode(arr: { id: string }[]) {
     let item;
@@ -230,10 +235,10 @@ limitations under the License. -->
     let endpoint = "",
       instance = "";
     if (dashboardStore.entity === EntityType[2].value) {
-      endpoint = selectorStore.currentPod.id;
+      endpoint = selectorStore.currentPod?.id || "";
     }
     if (dashboardStore.entity === EntityType[3].value) {
-      instance = selectorStore.currentPod.id;
+      instance = selectorStore.currentPod?.id || "";
     }
     param = {
       ...param,
@@ -320,8 +325,15 @@ limitations under the License. -->
       if (JSON.stringify(newJson) === JSON.stringify(oldJson)) {
         return;
       }
-      traceId.value = props.data.filters.traceId || "";
-      duration.value = props.data.filters.duration || getDurationTime();
+      const { traceId: filtersTraceId, duration: filtersDuration } = props.data.filters || {};
+      traceId.value = filtersTraceId || "";
+      duration.value = filtersDuration
+        ? {
+            start: filtersDuration.startTime || "",
+            end: filtersDuration.endTime || "",
+            step: filtersDuration.step || "",
+          }
+        : getDurationTime();
       init();
     },
   );
diff --git a/src/views/dashboard/related/trace/Header.vue b/src/views/dashboard/related/trace/Header.vue
index 877cfec0..390e5303 100644
--- a/src/views/dashboard/related/trace/Header.vue
+++ b/src/views/dashboard/related/trace/Header.vue
@@ -19,7 +19,7 @@ limitations under the License. -->
   </div>
   <div class="conditions flex-h" v-else>
     <el-radio-group v-model="conditions" @change="changeCondition" size="small">
-      <el-radio-button v-for="(item, index) in items" :label="item.label" :key="item.label + index" border>
+      <el-radio-button v-for="(item, index) in items" :value="item.label" :key="item.label + index" border>
         {{ t(item.label) }}
       </el-radio-button>
     </el-radio-group>
@@ -92,6 +92,7 @@ limitations under the License. -->
   import ConditionTags from "@/views/components/ConditionTags.vue";
   import { ElMessage } from "element-plus";
   import { EntityType, QueryOrders, Status } from "../../data";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   const FiltersKeys: { [key: string]: string } = {
     status: "traceState",
@@ -104,8 +105,8 @@ limitations under the License. -->
   const props = defineProps({
     needQuery: { type: Boolean, default: true },
     data: {
-      type: Object as PropType<Recordable>,
-      default: () => ({ graph: {} }),
+      type: Object as PropType<LayoutConfig>,
+      default: () => ({}),
     },
   });
   const { t } = useI18n();
@@ -118,7 +119,12 @@ limitations under the License. -->
   const tagsList = ref<string[]>([]);
   const tagsMap = ref<Option[]>([]);
   const traceId = ref<string>(filters.refId || "");
-  const duration = ref<DurationTime>(filters.duration || appStore.durationTime);
+  const { duration: filtersDuration } = props.data.filters || {};
+  const duration = ref<DurationTime>(
+    filtersDuration
+      ? { start: filtersDuration.startTime || "", end: filtersDuration.endTime || "", step: filtersDuration.step || "" }
+      : appStore.durationTime,
+  );
   const state = reactive<Recordable>({
     instance: "",
     endpoint: "",
@@ -150,12 +156,12 @@ limitations under the License. -->
           state.instance = filters.owner.serviceInstanceID;
         }
       } else {
-        state.service = selectorStore.currentService.id;
+        state.service = selectorStore.currentService?.id || "";
         if (dashboardStore.entity === EntityType[2].value) {
-          state.endpoint = selectorStore.currentPod.id;
+          state.endpoint = selectorStore.currentPod?.id || "";
         }
         if (dashboardStore.entity === EntityType[3].value) {
-          state.instance = selectorStore.currentPod.id;
+          state.instance = selectorStore.currentPod?.id || "";
         }
       }
       await queryTraces();
@@ -169,7 +175,7 @@ limitations under the License. -->
       await getService();
     }
     if (dashboardStore.entity === EntityType[0].value) {
-      state.service = selectorStore.currentService.id;
+      state.service = selectorStore.currentService?.id || "";
       await getInstance();
       if (!state.instance) {
         await getEndpoint();
diff --git a/src/views/dashboard/related/trace/Index.vue b/src/views/dashboard/related/trace/Index.vue
index 1d525917..31a80a34 100644
--- a/src/views/dashboard/related/trace/Index.vue
+++ b/src/views/dashboard/related/trace/Index.vue
@@ -30,10 +30,10 @@ limitations under the License. -->
   import TraceList from "./TraceList.vue";
   import TraceDetail from "./Detail.vue";
   import type { LayoutConfig } from "@/types/dashboard";
-  /*global defineProps, Recordable */
+  /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<LayoutConfig | Recordable>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
   });
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index e2bd536d..de502c21 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -56,7 +56,7 @@ limitations under the License. -->
                 red: i.isError,
               }"
             >
-              <span class="b">{{ i.endpointNames[0] }}</span>
+              <span class="b">{{ i.endpointNames?.[0] }}</span>
             </div>
             <div class="grey ell sm">
               <span class="tag mr-10 sm"> {{ i.duration }} ms </span>
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index ae261070..08942d29 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -61,10 +61,11 @@ limitations under the License. -->
   import { mutationObserver } from "@/utils/mutation";
   import { TraceGraphType } from "../constant";
   import { Themes } from "@/constants/data";
+  import type { SegmentSpan } from "@/types/profile";
 
   /* global Recordable, Nullable */
   const props = defineProps({
-    data: { type: Array as PropType<Span[]>, default: () => [] },
+    data: { type: Array as PropType<(Span | SegmentSpan)[]>, default: () => [] },
     traceId: { type: String, default: "" },
     type: { type: String, default: TraceGraphType.LIST },
     headerType: { type: String, default: "" },
@@ -79,8 +80,8 @@ limitations under the License. -->
   const refSpans = ref<Array<Ref>>([]);
   const tree = ref<Nullable<any>>(null);
   const traceGraph = ref<Nullable<HTMLDivElement>>(null);
-  const parentSpans = ref<Array<Span>>([]);
-  const refParentSpans = ref<Array<Span>>([]);
+  const parentSpans = ref<Array<Span | SegmentSpan>>([]);
+  const refParentSpans = ref<Array<Span | SegmentSpan>>([]);
   const debounceFunc = debounce(draw, 500);
   const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") => dayjs(date).format(pattern);
 
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index df310606..523ab5d4 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -157,18 +157,17 @@ limitations under the License. -->
   import { dateFormat } from "@/utils/dateFormat";
   import { useTraceStore } from "@/store/modules/trace";
   import LogTable from "@/views/dashboard/related/log/LogTable/Index.vue";
-  import type { SpanAttachedEvent } from "@/types/trace";
+  import type { SpanAttachedEvent, Ref, Span } from "@/types/trace";
   import getDashboard from "@/hooks/useDashboardsSession";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { WidgetType } from "@/views/dashboard/data";
-  import type { LayoutConfig } from "@/types/dashboard";
-
+  import type { LayoutConfig, DashboardItem } from "@/types/dashboard";
   /*global defineProps, Nullable, Recordable */
   const props = defineProps({
-    currentSpan: { type: Object as PropType<Recordable>, default: () => ({}) },
+    currentSpan: { type: Object as PropType<Span>, default: () => ({}) },
     traceId: { type: String, default: "" },
   });
-  const options: Recordable<LayoutConfig> = inject("options") || {};
+  const options: LayoutConfig | null = inject("options") || null;
   const { t } = useI18n();
   const traceStore = useTraceStore();
   const dashboardStore = useDashboardStore();
@@ -246,12 +245,12 @@ limitations under the License. -->
     tree.value.draw();
   }
 
-  function viewRelateTrace(item: Recordable) {
-    const { associationWidget } = getDashboard(dashboardStore.currentDashboard);
+  function viewRelateTrace(item: Ref) {
+    const { associationWidget } = getDashboard(dashboardStore.currentDashboard as DashboardItem);
     associationWidget(
-      (options.id as any) || "",
+      (options?.id as string) || "",
       {
-        sourceId: options.id || "",
+        sourceId: (options?.id as string) || "",
         traceId: item.traceId || "",
         id: "0",
       },
diff --git a/src/views/dashboard/related/trace/components/Table.vue b/src/views/dashboard/related/trace/components/Table.vue
index 171f0e5c..73cb4cf7 100644
--- a/src/views/dashboard/related/trace/components/Table.vue
+++ b/src/views/dashboard/related/trace/components/Table.vue
@@ -24,11 +24,12 @@ limitations under the License. -->
 <script lang="ts" setup>
   import type { PropType } from "vue";
   import type { Span } from "@/types/trace";
+  import type { SegmentSpan } from "@/types/profile";
   import Graph from "./D3Graph/Index.vue";
   import { TraceGraphType } from "./constant";
 
   defineProps({
-    data: { type: Array as PropType<Span[]>, default: () => [] },
+    data: { type: Array as PropType<(Span | SegmentSpan)[]>, default: () => [] },
     traceId: { type: String, default: "" },
     headerType: { type: String, default: "" },
   });
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index 0c2519b9..77567650 100644
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -17,16 +17,16 @@ limitations under the License. -->
   <div v-if="type === TraceGraphType.STATISTICS">
     <div class="trace-item">
       <div :class="['method']">
-        <el-tooltip :content="data.groupRef.endpointName" placement="top" :show-after="300">
+        <el-tooltip :content="data.groupRef?.endpointName" placement="top" :show-after="300">
           <span>
-            {{ data.groupRef.endpointName }}
+            {{ data.groupRef?.endpointName }}
           </span>
         </el-tooltip>
       </div>
       <div :class="['type']">
-        <el-tooltip :content="data.groupRef.type" placement="top" :show-after="300">
+        <el-tooltip :content="data.groupRef?.type" placement="top" :show-after="300">
           <span>
-            {{ data.groupRef.type }}
+            {{ data.groupRef?.type }}
           </span>
         </el-tooltip>
       </div>
@@ -40,7 +40,7 @@ limitations under the License. -->
         {{ data.sumTime }}
       </div>
       <div class="avg-time">
-        {{ parseInt(data.avgTime) }}
+        {{ parseInt(data.avgTime || "0") }}
       </div>
       <div class="count">
         {{ data.count }}
@@ -52,7 +52,7 @@ limitations under the License. -->
       @click="selectSpan"
       :class="[
         'trace-item',
-        'level' + (data.level - 1),
+        'level' + ((data.level || 0) - 1),
         { 'trace-item-error': data.isError },
         { profiled: data.profiled === false },
         `trace-item-${data.key}`,
@@ -60,9 +60,9 @@ limitations under the License. -->
       :data-text="data.profiled === false ? 'No Thread Dump' : ''"
     >
       <div
-        :class="['method', 'level' + (data.level - 1)]"
+        :class="['method', 'level' + ((data.level || 0) - 1)]"
         :style="{
-          'text-indent': (data.level - 1) * 10 + 'px',
+          'text-indent': ((data.level || 0) - 1) * 10 + 'px',
           width: `${method}px`,
         }"
       >
@@ -152,10 +152,11 @@ limitations under the License. -->
   import { Themes } from "@/constants/data";
   import { TraceGraphType } from "../constant";
   import { WidgetType } from "@/views/dashboard/data";
+  import type { Span, Ref } from "@/types/trace";
 
   /*global Recordable*/
   const props = {
-    data: { type: Object as PropType<Recordable>, default: () => ({}) },
+    data: { type: Object as PropType<Span>, default: () => ({}) },
     method: { type: Number, default: 0 },
     type: { type: String, default: "" },
     headerType: { type: String, default: "" },
@@ -181,7 +182,7 @@ limitations under the License. -->
         } else {
           const data = props.data;
           const exec = data.endTime - data.startTime ? data.endTime - data.startTime : 0;
-          let result = (exec / data.totalExec) * 100;
+          let result = (exec / (data.totalExec || 0)) * 100;
           result = result > 100 ? 100 : result;
           const resultStr = result.toFixed(4) + "%";
           return resultStr === "0.0000%" ? "0.9%" : resultStr;
@@ -193,7 +194,7 @@ limitations under the License. -->
         return resultStr === "0.0000%" ? "0.9%" : resultStr;
       });
       const isCrossThread = computed(() => {
-        const key = props.data.refs.findIndex((d: { type: string }) => d.type === "CROSS_THREAD");
+        const key = props.data.refs?.findIndex((d: Ref) => d.type === "CROSS_THREAD") ?? -1;
         return key > -1 ? true : false;
       });
       function toggle() {
@@ -228,7 +229,7 @@ limitations under the License. -->
         selectedItem(props.data);
         viewSpanDetail(dom);
       }
-      function selectedItem(span: Recordable) {
+      function selectedItem(span: Span) {
         traceStore.setSelectedSpan(span);
       }
       function viewSpanDetail(dom: HTMLSpanElement) {
diff --git a/src/views/settings/components/TTL.vue b/src/views/settings/components/TTL.vue
index bca4b77c..92af570e 100644
--- a/src/views/settings/components/TTL.vue
+++ b/src/views/settings/components/TTL.vue
@@ -15,9 +15,9 @@ limitations under the License. -->
 <template>
   <div class="ttl">
     <div class="label">{{ t("metricsTTL") }}</div>
-    <TTLTable :data="settingsStore.configTTL.metrics" :metricsRows="MetricsTTLRow" />
+    <TTLTable :data="settingsStore.configTTL?.metrics || []" :metricsRows="MetricsTTLRow" />
     <div class="label">{{ t("recordsTTL") }}</div>
-    <TTLTable :data="settingsStore.configTTL.records" :metricsRows="RecordsTTLRow" />
+    <TTLTable :data="settingsStore.configTTL?.records || []" :metricsRows="RecordsTTLRow" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -28,7 +28,7 @@ limitations under the License. -->
   import { MetricsTTLRow, RecordsTTLRow } from "../data";
 
   const { t } = useI18n();
-  const settingsStore = useSettingsStore();
+  const settingsStore: ReturnType<typeof useSettingsStore> = useSettingsStore();
 
   onMounted(() => {
     settingsStore.getConfigTTL();
diff --git a/src/views/settings/components/TTLTable.vue b/src/views/settings/components/TTLTable.vue
index d01c0f87..60c85c8c 100644
--- a/src/views/settings/components/TTLTable.vue
+++ b/src/views/settings/components/TTLTable.vue
@@ -33,12 +33,12 @@ limitations under the License. -->
   </el-table>
 </template>
 <script lang="ts" setup>
-  /*global PropType, Indexable */
+  import type { PropType } from "vue";
   defineProps({
     metricsRows: {
       type: Array as PropType<{ width?: number; value: string; label: string }[]>,
       default: () => [],
     },
-    data: { type: Array as PropType<Indexable[]>, default: () => [] },
+    data: { type: Array as PropType<any[]>, default: () => [] },
   });
 </script>