From a741e9acf6e153e8e88f7b5f088ce2a59954e558 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Thu, 9 Apr 2026 09:19:38 +0800
Subject: [PATCH 1/5] refactor: update route handling in useCanvasOperation to
 use computed property for list routes and improve error logging in dataflow
 store

---
 packages/dag/src/EditorView.vue               | 13 ++++++------
 .../dag/src/composables/useCanvasOperation.ts | 20 ++++++++++++++++---
 packages/dag/src/stores/dataflow.store.ts     |  4 ++++
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/dag/src/EditorView.vue b/packages/dag/src/EditorView.vue
index c7eb66260..e1a9f3339 100644
--- a/packages/dag/src/EditorView.vue
+++ b/packages/dag/src/EditorView.vue
@@ -83,12 +83,13 @@ const init = async () => {
 
   if (taskId) {
     await initNodeType()
-    await dataflowStore.fetchDataflow(taskId)
-    // nextTick(() => {
-    //   setTimeout(() => {
-    //     canvasRef.value.fitViewWithOffset({ duration: 0, maxZoom: 1 })
-    //   }, 0)
-    // })
+    const task = await dataflowStore.fetchDataflow(taskId)
+
+    if (!task) {
+      ElMessage.error(t('packages_dag_mixins_editor_renwubucunzai'))
+      handlePageReturn()
+      return
+    }
   } else {
     let syncType
     let targetRoute
diff --git a/packages/dag/src/composables/useCanvasOperation.ts b/packages/dag/src/composables/useCanvasOperation.ts
index 1c09b5038..16df9ff3d 100644
--- a/packages/dag/src/composables/useCanvasOperation.ts
+++ b/packages/dag/src/composables/useCanvasOperation.ts
@@ -1771,8 +1771,22 @@ export function useCanvasOperation() {
     connHeartbeat: 'heartbeatTable',
   }
 
+  const listRoute = computed(() => {
+    const name = route.name as string
+    const map = {
+      DataflowEditor: 'dataflowList',
+      TaskMonitor: 'dataflowList',
+      MigrateEditor: 'migrateList',
+      MigrationMonitor: 'migrateList',
+    }
+
+    return map[name]
+  })
+
   const handlePageReturn = () => {
-    const listRoute = listRouteMap[dataflow.value.syncType]
+    const routeName = dataflow.value.syncType
+      ? listRouteMap[dataflow.value.syncType]
+      : listRoute.value
 
     if (!dataflowStore.dag.nodes.length && dataflow.value.id) {
       Modal.confirm(
@@ -1787,13 +1801,13 @@ export function useCanvasOperation() {
           deleteTask(dataflow.value.id)
         }
         router.push({
-          name: listRoute,
+          name: routeName,
         })
         window.name = ''
       })
     } else {
       router.push({
-        name: listRoute,
+        name: routeName,
       })
       window.name = ''
     }
diff --git a/packages/dag/src/stores/dataflow.store.ts b/packages/dag/src/stores/dataflow.store.ts
index 120085cbb..d12c8777a 100644
--- a/packages/dag/src/stores/dataflow.store.ts
+++ b/packages/dag/src/stores/dataflow.store.ts
@@ -268,6 +268,10 @@ export const useDataflowStore = defineStore('dataflow', () => {
 
       dag.value.nodes = nodes
       dag.value.edges = edges
+
+      return response
+    } catch (error) {
+      console.error(error)
     } finally {
       taskLoading.value = false
     }

From 9ebba8b38ed344ed28b71f87997a9004dca98d8e Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Fri, 10 Apr 2026 08:34:54 +0800
Subject: [PATCH 2/5] refactor: convert Dashboard.vue to Composition API,
 streamline data handling, and enhance task dashboard integration

---
 apps/daas/src/views/dashboard/Dashboard.vue   | 1850 ++++++++---------
 packages/api/src/core/task.ts                 |   85 +
 packages/assets/styles/utilities.scss         |   20 +
 packages/styles/src/design/tokens/default.css |    4 +
 packages/types/src/daas-components.d.ts       |   14 +
 5 files changed, 948 insertions(+), 1025 deletions(-)

diff --git a/apps/daas/src/views/dashboard/Dashboard.vue b/apps/daas/src/views/dashboard/Dashboard.vue
index b17ecd7c1..c26e2b57a 100644
--- a/apps/daas/src/views/dashboard/Dashboard.vue
+++ b/apps/daas/src/views/dashboard/Dashboard.vue
@@ -1,926 +1,667 @@
-<script>
-import { ArrowRight } from '@element-plus/icons-vue'
-import { fetchClusterStates } from '@tap/api/src/core/cluster'
-import { getTaskChart } from '@tap/api/src/core/task'
+<script setup lang="ts">
+import {
+  fetchClusterStates,
+  type ClusterState,
+} from '@tap/api/src/core/cluster'
+import {
+  fetchTaskDashboard,
+  type TaskDashboardTopTask,
+  type TaskDashboardVo,
+} from '@tap/api/src/core/task'
 import { getProcessInfo } from '@tap/api/src/core/workers'
 import PageContainer from '@tap/business/src/components/PageContainer.vue'
-import { STATUS_MAP } from '@tap/business/src/shared/task'
-import { statusMap as InspectStatusMap } from '@tap/business/src/views/verification/const'
 import Chart from '@tap/component/src/chart/Chart.vue'
-import CountUp from '@tap/component/src/CountUp.vue'
-import { toThousandsUnit } from '@/utils/util'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { STATUS_MAP as DASHBOARD_STATUS_MAP } from './const'
 
-export default {
-  components: { Chart, ArrowRight, PageContainer, CountUp },
-  inject: ['lockedFeature'],
-  data() {
-    const colorMap = {
-      running: 'rgba(59, 71, 229, 0.5)',
-      paused: '#AE86C9',
-      wait_run: '#AE86C9',
-      waiting: '#AE86C9',
-      wait_start: 'rgba(250, 140, 22, 0.7)',
-      scheduling: '#fdf1c8',
-      edit: 'rgba(126, 42, 243, 0.5)',
-      error: 'rgba(245, 34, 45, 0.7)',
-      stop: 'rgba(250, 219, 20, 1)',
-      stopping: '#E6B450',
-      complete: 'rgba(82, 196, 26, 0.7)',
-      done: '#2EA0EA',
-    }
-    return {
-      h: this.$createElement,
-      copyPieData: [],
-      syncPieData: [],
-      serverTable: [],
-      migrationTaskList: [],
-      syncTaskList: [],
-      pieOptions: null,
-      barOptions: {
-        barWidth: 35,
-        grid: {
-          top: 20,
-          bottom: 0,
-          left: 0,
-          right: 0,
-        },
-        xAxis: {
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(232, 232, 232, 0.75)',
-            },
-          },
-          axisTick: {
-            show: true,
-            interval: 'auto',
-          },
-          axisLabel: {
-            color: 'rgba(0,0,0,.65)',
-          },
-        },
-        yAxis: {
-          show: true,
-          type: 'value',
-          min: 1,
-          logBase: 20,
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#d9d9d9',
-            },
-          },
-          axisLabel: {
-            color: 'rgba(0,0,0,.65)',
-          },
-          splitLine: {
-            onZero: true,
-            show: true,
+const router = useRouter()
 
-            lineStyle: {
-              type: 'dashed',
-            },
-          },
-        },
-        tooltip: {
-          trigger: 'item',
-          borderWidth: 0,
-          backgroundColor: 'rgba(0,0,0,0.8)',
-          textStyle: {
-            color: '#fff',
-            fontSize: 12,
-            align: 'center',
-          },
-          formatter: (params) => {
-            const item = params
-            let val = item.value
-            if (val === 1.1) {
-              val = 1
-            }
-
-            const html = `${
-              params.name
-            }<span style="padding: 0 4px; text-align: center;"></span><br/>${
-              val
-            }`
-            return html
-          },
-        },
-      },
-      syncValidFalg:
-        (this.$has('Data_verify_menu') || this.$has('Data_SYNC_menu')) &&
-        !this.lockedFeature.dataVerificationList,
-      taskList: [
-        {
-          icon: 'more-app',
-          title: this.$t('dashboard_all_total'),
-          desc: this.$t('dashboard_current_all_total'),
-          key: 'all_total',
-          value: 0,
-        },
-        {
-          icon: 'copy-link',
-          title: this.$t('dashboard_copy_total'),
-          desc: this.$t('dashboard_current_copy_total'),
-          key: 'copy_total',
-          value: 0,
-        },
-        {
-          icon: 'exchange-four',
-          title: this.$t('dashboard_sync_total'),
-          desc: this.$t('dashboard_current_sync_total'),
-          key: 'sync_total',
-          value: 0,
-        },
-        {
-          icon: 'database-search',
-          title: this.$t('dashboard_valid_total'),
-          desc: this.$t('dashboard_current_valid_total'),
-          key: 'valid_total',
-          value: 0,
-        },
-      ],
-      statusList: [
-        { name: this.$t('public_status_running'), label: 'running', value: 0 },
-        { name: this.$t('public_status_edit'), label: 'edit', value: 0 },
-        {
-          name: this.$t('public_status_wait_run'),
-          label: 'wait_start',
-          value: 0,
-        },
-        { name: this.$t('public_status_stop'), label: 'stop', value: 0 },
-        {
-          name: this.$t('public_status_complete'),
-          label: 'complete',
-          value: 0,
-        },
-        { name: this.$t('public_status_error'), label: 'error', value: 0 },
-      ],
-      // 数据校验
-      inspectTaskList: Object.entries(InspectStatusMap).map(([key, value]) => ({
-        name: value,
-        value: 0,
-        label: key,
-        key,
-        itemStyle: { color: colorMap[key] },
-      })),
-      loading: false,
-      migrationTotal: '',
-      syncTotal: '',
-      taskStatusStatistics: [
-        { name: this.$t('app_Home_initialization'), value: 'initializing' },
-        { name: this.$t('app_Home_loadingFinished'), value: 'initialized' },
-        { name: this.$t('app_Home_incremental'), value: 'cdc' },
-        { name: this.$t('app_Home_incrementalLag'), value: 'Lag' },
-      ],
-      colorMap,
-      colorServeMap: {
-        starting: '#409EFF',
-        running: '#8DC47A',
-        stopping: '#F97066',
-        stopped: '#FDB01C',
-      },
-      syncType: {
-        initial_sync: this.$t('public_task_type_initial_sync'),
-        cdc: this.$t('public_task_type_cdc'),
-        'initial_sync+cdc': this.$t('public_task_type_initial_sync_and_cdc'),
-      },
+// ── State ──────────────────────────────────────────────
+const loading = ref(false)
+const lastUpdated = ref('Just now')
+const dashboardData = ref<TaskDashboardVo | null>(null)
+let refreshTimer: ReturnType<typeof setInterval> | null = null
 
-      transfer: {
-        height: 360,
-        isHeader: false,
-        tableData: [],
-      },
-      syncJobObj: {},
-      migrationJobObj: {},
-      syncJobStatusObj: {},
-      migrationJobStatusObj: {},
-
-      // 传输总览颜色
-      transBarData: [
-        {
-          name: this.$t('public_event_total_input'),
-          value: 0,
-          key: 'inputTotal',
-          color: '#82C647',
-        },
-        {
-          name: this.$t('public_event_total_output'),
-          value: 0,
-          key: 'outputTotal',
-          color: '#2EA0EA',
-        },
-        {
-          name: this.$t('dashboard_total_insert'),
-          value: 0,
-          key: 'insertedTotal',
-          color: '#AE86C9',
-        },
-        {
-          name: this.$t('dashboard_total_update'),
-          value: 0,
-          key: 'updatedTotal',
-          color: '#F7D762',
-        },
-        {
-          name: this.$t('dashboard_total_delete'),
-          value: 0,
-          key: 'deletedTotal',
-          color: '#88DBDA',
-        },
-      ],
-
-      transBarOptions: {
-        barWidth: '100%',
-        series: [
-          {
-            labelFormat: 'KMT',
-            fixed: 1,
-          },
-        ],
-      },
-      serverProcess: {
-        height: 360,
-        isHeader: true,
-        tableData: [],
-      },
-      unitData: [],
-      kbData: [],
-      unitType: '',
-      noPermission:
-        this.$has('v2_data_pipeline') ||
-        this.$has('Data_verify_menu') ||
-        this.$has('management_menu'),
-      agentRunningTask: {},
-    }
-  },
+// API Requests card time range
+const apiTimeRange = ref<'5m' | '1h' | '24h'>('1h')
 
-  mounted() {
-    if (this.$has('v2_data_pipeline') || this.$has('Data_verify')) {
-      this.getDataFlowApi()
-      // this.getMeasurement()
-    }
+// System Trends time range
+const trendsTimeRange = ref<'5min' | '1h' | '24h'>('24h')
 
-    if (this.$has('v2_cluster-management_menu')) {
-      this.getClsterDataApi()
-    }
-  },
-  methods: {
-    toThousandsUnit,
-
-    // 任务概览跳转页面
-    handleTask(item) {
-      const map = {
-        copy_total: 'migrate',
-        sync_total: 'dataflowList',
-        valid_total: 'dataVerificationList',
-      }
-      this.$router.push({
-        name: map[item.key],
-      })
+// Top Tasks state
+const topTaskTab = ref<'lagging' | 'throughput'>('lagging')
+const topTaskLimit = ref<5 | 10 | 20>(5)
+
+// Cluster / Agent data
+interface AgentNode extends ClusterState {
+  processId?: string
+}
+const agentNodes = ref<AgentNode[]>([])
+const agentRunningTask = ref<Record<string, any>>({})
+
+// ── KPI: Active Tasks ──────────────────────────────────
+const activeTasks = computed(() => dashboardData.value?.summary?.activeTasks)
+
+function formatLag(ms: number): string {
+  if (!ms || ms <= 0) return '0s'
+  if (ms < 1000) return `${ms}ms`
+  const s = Math.floor(ms / 1000)
+  if (s < 60) return `${s}s`
+  const m = Math.floor(s / 60)
+  const remainder = s % 60
+  return remainder > 0 ? `${m}m ${remainder}s` : `${m}m`
+}
+
+// ── KPI: Total Throughput ──────────────────────────────
+const throughput = computed(() => dashboardData.value?.summary?.totalThroughput)
+
+function formatNumber(n: number): string {
+  if (!n && n !== 0) return '0'
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return n.toLocaleString()
+  return String(n)
+}
+
+// ── KPI: Connected DBs ────────────────────────────────
+const connectedDbs = computed(() => dashboardData.value?.summary?.connectedDbs)
+
+// ── KPI: API Requests ──────────────────────────────────
+const apiRequests = computed(() => dashboardData.value?.summary?.apiRequests)
+
+// ── System Trends: ECharts options ─────────────────────
+const throughputChartOption = computed(() => {
+  const trends = dashboardData.value?.trends?.throughput
+  if (!trends?.ts?.length) return buildAreaChartOption([], [], '#6366f1')
+  const xData = trends.ts.map((t) => formatTimeLabel(t))
+  return buildAreaChartOption(xData, trends.values, '#6366f1')
+})
+
+const apiChartOption = computed(() => {
+  const trends = dashboardData.value?.trends?.apiRequests
+  if (!trends?.ts?.length) return buildLineChartOption([], [], '#a855f7')
+  const xData = trends.ts.map((t) => formatTimeLabel(t))
+  return buildLineChartOption(xData, trends.values, '#a855f7')
+})
+
+function formatTimeLabel(ts: number): string {
+  const d = new Date(ts)
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+  return `${hh}:${mm}`
+}
+
+function buildAreaChartOption(x: string[], y: number[], color: string) {
+  return {
+    backgroundColor: 'transparent',
+    grid: { top: 20, right: 16, bottom: 28, left: 50 },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: '#fff',
+      borderColor: '#e2e8f0',
+      borderRadius: 8,
+      textStyle: { color: '#334155', fontSize: 12 },
+      axisPointer: { type: 'cross', crossStyle: { color: '#94a3b8' } },
     },
-    handleStatus(status) {
-      this.$router.push({
-        name: 'migrate',
-        query: {
-          status,
-        },
-      })
+    xAxis: {
+      type: 'category',
+      data: x,
+      boundaryGap: false,
+      axisLine: { lineStyle: { color: '#e2e8f0' } },
+      axisLabel: { color: '#94a3b8', fontSize: 11 },
+      axisTick: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: '#f1f5f9', type: 'dashed' } },
+      axisLabel: { color: '#94a3b8', fontSize: 11 },
     },
-    handleSyncStatus(status) {
-      this.$router.push({
-        name: 'dataflow',
-        query: {
-          status,
+    series: [
+      {
+        type: 'line',
+        data: y,
+        smooth: true,
+        symbol: 'none',
+        lineStyle: { width: 2, color },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: `${color}33` },
+              { offset: 1, color: `${color}05` },
+            ],
+          },
         },
-      })
+      },
+    ],
+  }
+}
+
+function buildLineChartOption(x: string[], y: number[], color: string) {
+  return {
+    backgroundColor: 'transparent',
+    grid: { top: 20, right: 16, bottom: 28, left: 50 },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: '#fff',
+      borderColor: '#e2e8f0',
+      borderRadius: 8,
+      textStyle: { color: '#334155', fontSize: 12 },
     },
-    // 获取服务器与进程的数据
-    getClsterDataApi() {
-      fetchClusterStates({
-        type: 'dashboard',
-      }).then((data) => {
-        this.agentRunningTask = {}
-        const processIdSet = new Set()
-        const items = data?.items || []
-        items.map((item) => {
-          const { management, engine, apiServer } = item
-          const isStopped = item.status !== 'running'
-
-          // 停止了上报状态后，因为不再上报状态了，所以各个服务的状态就不再更新了。
-          if (isStopped) {
-            if (management) {
-              management.status = 'stopped'
-              management.serviceStatus = 'stopped'
-            }
-            if (engine) {
-              engine.status = 'stopped'
-              engine.serviceStatus = 'stopped'
-              engine.netStat = []
-              engine.netStatTotals = 0
-            }
-            if (apiServer) {
-              apiServer.status = 'stopped'
-              apiServer.serviceStatus = 'stopped'
-            }
-          }
+    xAxis: {
+      type: 'category',
+      data: x,
+      boundaryGap: false,
+      axisLine: { lineStyle: { color: '#e2e8f0' } },
+      axisLabel: { color: '#94a3b8', fontSize: 11 },
+      axisTick: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: '#f1f5f9', type: 'dashed' } },
+      axisLabel: { color: '#94a3b8', fontSize: 11 },
+    },
+    series: [
+      {
+        type: 'line',
+        data: y,
+        smooth: false,
+        symbol: 'none',
+        lineStyle: { width: 2, color },
+      },
+    ],
+  }
+}
 
-          if (item.systemInfo?.process_id) {
-            item.processId = item.systemInfo.process_id
-            processIdSet.add(item.systemInfo.process_id)
-          }
+// ── Top Tasks ──────────────────────────────────────────
+const topTasks = computed<TaskDashboardTopTask[]>(() => {
+  const tops = dashboardData.value?.tops
+  if (!tops) return []
+  const list =
+    topTaskTab.value === 'lagging'
+      ? tops.topLaggingTasks
+      : tops.topThroughputTasks
+  return (list || []).slice(0, topTaskLimit.value)
+})
 
-          return item
-        })
+function latencyClass(ms: number): string {
+  const s = ms / 1000
+  if (s > 60) return 'badge--red'
+  if (s > 10) return 'badge--amber'
+  return 'badge--green'
+}
 
-        getProcessInfo(Array.from(processIdSet)).then((data) => {
-          for (const id of Object.keys(data)) {
-            this.agentRunningTask[id] = data[id].runningTaskNum
-          }
-        })
-        this.serverProcess.tableData = items
-        this.serverTable = items
-      })
-    },
-    // 获取dataflows数据
-    getDataFlowApi() {
-      this.loading = true
-      getTaskChart()
-        .then((data) => {
-          if (data) {
-            const setColor = (list) => {
-              return list.map((item) => {
-                item.itemStyle = {
-                  color: this.colorMap[item.label],
-                }
-                return item
-              })
-            }
-            // 全部数据
-            const copy_total = data?.chart1?.total || 0
-            const sync_total = data?.chart3?.total || 0
-            const valid_total = data?.chart5?.total || 0
-            const total = {
-              all_total: copy_total + sync_total + valid_total,
-              copy_total,
-              sync_total,
-              valid_total,
-            }
-            const result = []
-            this.taskList.forEach((el) => {
-              if (this.lockedFeature[el.key]) return
-              result.push(
-                Object.assign({}, el, {
-                  value: total[el.key],
-                }),
-              )
-            })
-            this.taskList = result
-            this.migrationTaskList = data.chart1?.items
-              ? this.handleDataProcessing(data.chart1.items, this.statusList)
-              : []
-            this.syncTaskList = data?.chart3
-              ? this.handleDataProcessing(data.chart3.items, this.statusList)
-              : []
-            this.copyPieData = setColor(this.migrationTaskList)
-            this.syncPieData = setColor(this.syncTaskList)
-            this.transBarData = this.handleChart(data.chart6, this.transBarData)
-            this.inspectTaskList = data?.chart5
-              ? this.inspectTaskList.map((item) => {
-                  item.value = data.chart5[item.key]
-                  return item
-                })
-              : []
-          }
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
+function formatLatency(ms: number): string {
+  if (!ms || ms <= 0) return '0s'
+  const s = Math.floor(ms / 1000)
+  if (s < 60) return `${s}s`
+  const m = Math.floor(s / 60)
+  const remainder = s % 60
+  return remainder > 0 ? `${m}m ${remainder}s` : `${m}m`
+}
 
-    // echart数据转换
-    handleChart(data, originalData) {
-      const echartData = []
-      if (originalData?.length) {
-        originalData.forEach((el) => {
-          for (const item in data) {
-            if (el.key === item)
-              echartData.push({
-                name: el.name,
-                value: data[item],
-                color: el.color,
-              })
-          }
-        })
-      } else {
-        for (const item in data) {
-          echartData.push({
-            name: '',
-            value: data[item],
-            color: '#2EA0EA',
-          })
-        }
-      }
+function formatThroughput(n: number): string {
+  if (!n && n !== 0) return '0/s'
+  return `${n.toLocaleString()}/s`
+}
 
-      return echartData
-    },
+// ── Agent Cluster ──────────────────────────────────────
+function getAgentStatus(node: AgentNode) {
+  if (node.status === 'running') return 'online'
+  if (node.status === 'stopped') return 'offline'
+  return 'warning'
+}
+
+function getCpuUsage(node: AgentNode): number {
+  const val = node.metricValues?.CpuUsage
+  if (!val) return 0
+  return Math.round(Number.parseFloat(String(val)) || 0)
+}
+
+function getMemUsage(node: AgentNode): number {
+  const val = node.metricValues?.HeapMemoryUsage
+  if (!val) return 0
+  return Math.round(Number.parseFloat(String(val)) || 0)
+}
+
+function usageBarColor(pct: number) {
+  if (pct > 80) return '#ef4444'
+  if (pct > 60) return '#f59e0b'
+  return '#22c55e'
+}
 
-    // 数据处理
-    handleDataProcessing(dataItem, statusData) {
-      let statusItem = []
-      if (dataItem?.length) {
-        dataItem.sort((a, b) => (a._id > b._id ? 1 : a._id === b._id ? 0 : -1))
-        statusData.forEach((item) => {
-          const $in = STATUS_MAP[item.label].in
-          let total = 0
-          if ($in?.length) {
-            total = dataItem.reduce((total, item) => {
-              if ($in.includes(item._id)) {
-                total += item.count
-              }
-              return total
-            }, total)
-          } else {
-            const dataObj = dataItem.find(
-              (element) => item.label === element._id,
-            )
-            dataObj && (total = dataObj.count)
+function getRunningTaskCount(node: AgentNode): number {
+  if (!node.processId) return 0
+  const info = agentRunningTask.value[node.processId]
+  if (!info) return 0
+  return (info.migrate || 0) + (info.sync || 0)
+}
+
+function getStatusLabel(type: string) {
+  return (DASHBOARD_STATUS_MAP as any)[type] || '-'
+}
+
+// ── Data fetching ──────────────────────────────────────
+async function fetchDashboardData() {
+  loading.value = true
+  try {
+    const [dashboard, clusterData] = await Promise.all([
+      fetchTaskDashboard({
+        type:
+          trendsTimeRange.value === '5min'
+            ? 'minute'
+            : trendsTimeRange.value === '1h'
+              ? 'hours'
+              : 'days',
+        top: topTaskLimit.value,
+      }).catch(() => null),
+      fetchClusterStates({ type: 'dashboard' }).catch(() => ({ items: [] })),
+    ])
+
+    if (dashboard) dashboardData.value = dashboard
+
+    // Process cluster data
+    const processIdSet = new Set<string>()
+    const items: AgentNode[] = (clusterData?.items || []).map((item: any) => {
+      const node: AgentNode = { ...item }
+      if (node.status !== 'running') {
+        for (const svc of ['management', 'engine', 'apiServer'] as const) {
+          if ((node as any)[svc]) {
+            ;(node as any)[svc].status = 'stopped'
+            ;(node as any)[svc].serviceStatus = 'stopped'
           }
-          statusItem.push({
-            name: item.name,
-            label: item.label,
-            value: total,
-          })
-        })
-      } else {
-        statusItem = statusData
+        }
       }
-      return statusItem
-    },
-
-    getPieOption(data) {
-      const dataName = []
-      let total = 0
-      let totalFalg = true
-      const totalText = this.$t('dashboard_public_total')
-      if (data?.length) {
-        data = data.filter((item) => item.value > 0)
-        data.forEach((item) => {
-          dataName.push(item.name)
-          total += Number.parseFloat(item.value) * 1
-        })
-        totalFalg = data.some((item) => item.value > 0)
-        total = this.toThousandsUnit(total)
+      if (node.systemInfo?.process_id) {
+        node.processId = node.systemInfo.process_id
+        processIdSet.add(node.systemInfo.process_id)
       }
+      return node
+    })
+    agentNodes.value = items
 
-      return {
-        backgroundColor: 'transparent',
-        legend: {
-          show: false,
-        },
-        tooltip: {
-          trigger: 'item',
-          confine: true,
-          borderRadius: 12,
-        },
-        series: [
-          {
-            type: 'pie',
-            radius: ['40%', '70%'],
-            stillShowZeroSum: totalFalg ? false : true,
-            avoidLabelOverlap: false,
-            zlevel: 1,
-            label: {
-              show: false,
-              position: 'center',
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontWeight: 'bold',
-              },
-            },
-            padAngle: data.length > 1 ? 2 : 0,
-            itemStyle: {
-              borderRadius: 6,
-            },
-            data,
-          },
-        ],
+    if (processIdSet.size > 0) {
+      try {
+        const processData = await getProcessInfo(Array.from(processIdSet))
+        for (const id of Object.keys(processData)) {
+          agentRunningTask.value[id] = (processData as any)[id].runningTaskNum
+        }
+      } catch {
+        /* ignore */
       }
-    },
+    }
 
-    getStatus(type) {
-      return DASHBOARD_STATUS_MAP[type] || '-'
-    },
+    lastUpdated.value = new Date().toLocaleTimeString()
+  } finally {
+    loading.value = false
+  }
+}
 
-    handleGoTask(agentId, type) {
-      this.$router.push({
-        name: type === 'migrate' ? 'migrateList' : 'dataflowList',
-        query: {
-          agentId,
-          status: 'running',
-        },
-      })
-    },
+function onTrendsTimeChange(range: '5min' | '1h' | '24h') {
+  trendsTimeRange.value = range
+  fetchDashboardData()
+}
 
-    onClickServer() {
-      this.$router.push({
-        name: 'clusterManagement',
-      })
-    },
-  },
+// ── Navigation ─────────────────────────────────────────
+function navigateToCluster() {
+  router.push({ name: 'clusterManagement' })
 }
+
+// ── Lifecycle ──────────────────────────────────────────
+onMounted(() => {
+  fetchDashboardData()
+  refreshTimer = setInterval(fetchDashboardData, 60_000)
+})
+
+onBeforeUnmount(() => {
+  if (refreshTimer) clearInterval(refreshTimer)
+})
 </script>
 
 <template>
   <PageContainer hide-header mode="blank">
-    <section class="dashboard-wrap isCardBox h-100">
-      <div class="dashboard-main">
-        <div>
-          <template v-if="noPermission">
-            <el-row
-              v-readonlybtn="'v2_data_pipeline'"
-              class="dashboard-row mb-5 gap-6"
-            >
-              <el-col
-                v-for="item in taskList"
-                :key="item.name"
-                :span="24 / taskList.length"
-                class="dashboard-col"
+    <section class="dashboard h-100 overflow-auto">
+      <div class="dashboard__container">
+        <!-- ═══ Header ═══ -->
+        <!-- <div class="flex justify-content-between align-items-center mb-6">
+          <h1 class="dashboard__title m-0">ODH Operations Dashboard</h1>
+          <span class="text-secondary fs-7"
+            >Last updated: {{ lastUpdated }}</span
+          >
+        </div> -->
+
+        <!-- ═══ KPI Cards (4 columns) ═══ -->
+        <div class="grid grid-cols-4 gap-5 mb-6">
+          <!-- 1) Active Tasks -->
+          <div class="dashboard__card p-5">
+            <div class="flex justify-content-between align-items-start mb-3">
+              <span class="fs-7 text-secondary fw-sub">Active Tasks</span>
+              <div class="p-2 bg-gray-50 rounded-lg">
+                <el-icon size="20" class="text-blue-500 align-top">
+                  <i-lucide-activity />
+                </el-icon>
+              </div>
+            </div>
+            <div class="din-font fs-2 font-semibold lh-1 mb-4">
+              {{ formatNumber(activeTasks?.total ?? 0) }}
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <span class="dashboard__tag dashboard__tag--emerald"
+                >Running {{ activeTasks?.running ?? 0 }}</span
               >
-                <div class="dashboard-col-box">
-                  <div class="fs-7 font-color-normal flex align-center gap-2">
-                    <VIcon size="20">{{ item.icon }}</VIcon>
-                    <span class="fs-6 fw-sub font-color-normal">{{
-                      item.desc
-                    }}</span>
-                  </div>
-                  <div
-                    class="mt-1"
-                    :class="[
-                      'dashboard-num',
-                      'text-center',
-                      'din-font',
-                      {
-                        'cursor-pointer': item.key !== 'all_total',
-                      },
-                    ]"
-                    @click="handleTask(item)"
-                  >
-                    <CountUp :end-val="item.value" :duration="2" />
-                  </div>
-                </div>
-              </el-col>
-            </el-row>
-            <!-- 复制任务概览 -->
-            <el-row
-              v-readonlybtn="'v2_data_pipeline'"
-              class="dashboard-row mb-5 align-items-stretch gap-6"
-              type="flex"
+              <span class="dashboard__tag dashboard__tag--red"
+                >Error {{ activeTasks?.error ?? 0 }}</span
+              >
+              <span class="dashboard__tag dashboard__tag--slate"
+                >Max Lag {{ formatLag(activeTasks?.maxLag ?? 0) }}</span
+              >
+              <span class="dashboard__tag dashboard__tag--slate"
+                >Min Lag {{ formatLag(activeTasks?.minLag ?? 0) }}</span
+              >
+            </div>
+          </div>
+
+          <!-- 2) Total Throughput -->
+          <div class="dashboard__card p-5">
+            <div class="flex justify-content-between align-items-start mb-3">
+              <span class="fs-7 text-secondary fw-sub">Total Throughput</span>
+              <div class="p-2 bg-gray-50 rounded-lg">
+                <el-icon class="text-indigo-500 align-top" size="20">
+                  <i-lucide-trending-up />
+                </el-icon>
+              </div>
+            </div>
+            <div class="din-font lh-1 mb-1">
+              <span class="fs-2 font-semibold">{{
+                formatNumber(throughput?.current ?? 0)
+              }}</span>
+              <span class="fs-7 text-secondary ml-1">events/sec</span>
+            </div>
+            <div class="flex flex-wrap gap-2 mt-3">
+              <span class="dashboard__tag dashboard__tag--amber"
+                >Peak {{ formatNumber(throughput?.peak ?? 0) }}</span
+              >
+              <span class="dashboard__tag dashboard__tag--indigo"
+                >Data {{ throughput?.dataRate ?? 0 }} MB/s</span
+              >
+            </div>
+            <p
+              v-if="throughput?.changeRate"
+              class="fs-7 mt-3 mb-0"
+              :class="
+                throughput.changeRate > 0 ? 'text-success' : 'text-danger'
+              "
             >
-              <el-col :span="12" class="dashboard-col col">
-                <div class="charts-list flex flex-row">
-                  <div class="charts-list-text">
-                    <div class="fs-7 font-color-normal">
-                      {{ $t('dashboard_copy_overview_title') }}
-                    </div>
+              {{ throughput.changeRate > 0 ? '+' : ''
+              }}{{ throughput.changeRate }}% vs last hour
+            </p>
+          </div>
 
-                    <ul class="job-list">
-                      <li
-                        v-for="task in migrationTaskList"
-                        :key="task.label"
-                        class="flex align-center cursor-pointer"
-                        @click="handleStatus(task.label)"
-                      >
-                        <i
-                          class="dots mr-3"
-                          :style="`background-color: ${colorMap[task.label]};`"
-                        />
-                        <span
-                          :title="task.name"
-                          class="fw-normal font-color-light flex-1 ellipsis"
-                          >{{ task.name }}</span
-                        ><span class="num font-color-dark">{{
-                          task.value
-                        }}</span>
-                      </li>
-                    </ul>
-                  </div>
-                  <div
-                    v-if="copyPieData.every((item) => item.value === 0)"
-                    class="flex justify-content-center align-items-center w-100"
-                  >
-                    <div
-                      class="flex justify-content-center align-items-center font-color-slight"
-                      v-html="
-                        $t('dashboard_no_statistics', [
-                          `<span class='color-primary' style='padding: 0 5px;'>${$t(
-                            'dashboard_copy_total',
-                          )}</span>`,
-                        ])
-                      "
-                    />
-                  </div>
-                  <div v-else class="chart">
-                    <Chart
-                      type="pie"
-                      :extend="getPieOption(copyPieData)"
-                      class="type-chart"
-                    />
-                  </div>
-                </div>
-              </el-col>
-              <el-col :span="12" class="dashboard-col col">
-                <div class="charts-list flex flex-row">
-                  <div class="charts-list-text">
-                    <div class="fs-7 font-color-normal">
-                      {{ $t('dashboard_sync_overview_title') }}
-                    </div>
-                    <ul class="job-list">
-                      <li
-                        v-for="task in syncTaskList"
-                        :key="task.label"
-                        class="flex align-center cursor-pointer"
-                        @click="handleSyncStatus(task.label)"
-                      >
-                        <i
-                          class="dots mr-3"
-                          :style="`background-color: ${colorMap[task.label]};`"
-                        />
-                        <span
-                          :title="task.name"
-                          class="fw-normal font-color-light flex-1 ellipsis"
-                          >{{ task.name }}</span
-                        ><span class="num font-color-dark">{{
-                          task.value
-                        }}</span>
-                      </li>
-                    </ul>
-                  </div>
-                  <div
-                    v-if="syncPieData.every((item) => item.value === 0)"
-                    class="flex justify-content-center align-items-center w-100"
+          <!-- 3) Connected DBs -->
+          <div class="dashboard__card p-5">
+            <div class="flex justify-content-between align-items-start mb-3">
+              <span class="fs-7 text-secondary fw-sub">Connected DBs</span>
+              <div class="p-2 bg-gray-50 rounded-lg">
+                <el-icon class="text-teal-500 align-top" size="20">
+                  <i-lucide-database />
+                </el-icon>
+              </div>
+            </div>
+            <div class="din-font lh-1 mb-1">
+              <span class="fs-2 font-semibold">{{
+                connectedDbs?.total ?? 0
+              }}</span>
+              <span class="fs-7 text-secondary ml-1">sources</span>
+            </div>
+            <div class="flex flex-wrap gap-2 mt-3">
+              <span
+                v-for="db in (connectedDbs?.items || []).slice(0, 3)"
+                :key="db.id"
+                class="dashboard__tag dashboard__tag--blue"
+                >{{ db.name }} {{ db.tableCount }} tbls</span
+              >
+            </div>
+          </div>
+
+          <!-- 4) API Requests -->
+          <div class="dashboard__card p-5">
+            <div class="flex justify-content-between align-items-start mb-3">
+              <div class="flex align-items-center gap-2">
+                <span class="fs-7 text-secondary fw-sub">API Requests</span>
+                <div class="dashboard__time-switcher">
+                  <button
+                    v-for="r in ['5m', '1h', '24h'] as const"
+                    :key="r"
+                    :class="{ active: apiTimeRange === r }"
+                    @click="apiTimeRange = r"
                   >
-                    <div
-                      class="flex justify-content-center align-items-center font-color-slight"
-                      v-html="
-                        $t('dashboard_no_statistics', [
-                          `<span class='color-primary' style='padding: 0 5px;'>${$t(
-                            'dashboard_sync_total',
-                          )}</span>`,
-                        ])
-                      "
-                    />
-                  </div>
-                  <div v-else class="chart">
-                    <Chart
-                      type="pie"
-                      :extend="getPieOption(syncPieData)"
-                      class="type-chart"
-                    />
-                  </div>
+                    {{ r }}
+                  </button>
                 </div>
-              </el-col>
-            </el-row>
-            <!-- 数据校验 -->
-            <el-row
-              v-if="syncValidFalg"
-              class="dashboard-row mb-5 align-items-stretch gap-6"
-              type="flex"
+              </div>
+              <div class="p-2 bg-gray-50 rounded-lg">
+                <el-icon class="text-purple-500 align-top" size="20">
+                  <i-lucide-server />
+                </el-icon>
+              </div>
+            </div>
+            <div class="din-font fs-2 font-semibold lh-1 mb-4">
+              {{ formatNumber(apiRequests?.total ?? 0) }}
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <span class="dashboard__tag dashboard__tag--red"
+                >Failed {{ apiRequests?.failed ?? 0 }}</span
+              >
+              <span class="dashboard__tag dashboard__tag--amber"
+                >Rate {{ apiRequests?.errorRate ?? 0 }}%</span
+              >
+              <span class="dashboard__tag dashboard__tag--indigo"
+                >Avg Time {{ apiRequests?.avgTime ?? 0 }}ms</span
+              >
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══ System Trends ═══ -->
+        <div class="dashboard__card p-5 mb-6">
+          <div class="flex justify-content-between align-items-center mb-5">
+            <h2 class="fs-5 font-semibold m-0">System Trends</h2>
+            <div class="dashboard__time-switcher">
+              <button
+                v-for="r in ['5min', '1h', '24h'] as const"
+                :key="r"
+                :class="{ active: trendsTimeRange === r }"
+                @click="onTrendsTimeChange(r)"
+              >
+                {{ r }}
+              </button>
+            </div>
+          </div>
+          <div class="grid grid-cols-2 gap-6">
+            <div>
+              <p class="fs-7 text-secondary mb-3 mt-0">
+                Throughput (events/sec)
+              </p>
+              <div class="dashboard__trend-chart">
+                <Chart type="line" :extend="throughputChartOption" />
+              </div>
+            </div>
+            <div>
+              <p class="fs-7 text-secondary mb-3 mt-0">
+                API Requests (req/sec)
+              </p>
+              <div class="dashboard__trend-chart">
+                <Chart type="line" :extend="apiChartOption" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══ Top Tasks ═══ -->
+        <div class="dashboard__card p-5 mb-6">
+          <div class="flex justify-content-between align-items-center mb-4">
+            <div class="flex align-items-center gap-3">
+              <h2 class="fs-5 font-semibold m-0">Top Tasks</h2>
+              <div class="dashboard__tab-switcher">
+                <button
+                  :class="{ active: topTaskTab === 'lagging' }"
+                  @click="topTaskTab = 'lagging'"
+                >
+                  Most Lagging
+                </button>
+                <button
+                  :class="{ active: topTaskTab === 'throughput' }"
+                  @click="topTaskTab = 'throughput'"
+                >
+                  Highest Throughput
+                </button>
+              </div>
+            </div>
+            <div class="dashboard__time-switcher">
+              <button
+                v-for="n in [5, 10, 20] as const"
+                :key="n"
+                :class="{ active: topTaskLimit === n }"
+                @click="topTaskLimit = n"
+              >
+                Top {{ n }}
+              </button>
+            </div>
+          </div>
+
+          <div v-if="topTasks.length" class="dashboard__table-wrap">
+            <table class="dashboard__table w-100">
+              <thead>
+                <tr>
+                  <th class="text-start">#</th>
+                  <th class="text-start">Task Name</th>
+                  <th class="text-end">Latency</th>
+                  <th class="text-end">Throughput</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(task, idx) in topTasks" :key="task.taskId">
+                  <td class="text-secondary">{{ idx + 1 }}</td>
+                  <td class="font-semibold">{{ task.taskName }}</td>
+                  <td class="text-end">
+                    <span
+                      class="dashboard__badge"
+                      :class="latencyClass(task.latency ?? 0)"
+                      >{{ formatLatency(task.latency ?? 0) }}</span
+                    >
+                  </td>
+                  <td class="text-end font-mono">
+                    {{ formatThroughput(task.throughput ?? 0) }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <el-empty v-else description="No task data" :image-size="60" />
+        </div>
+
+        <!-- ═══ Agent Cluster Status ═══ -->
+        <div class="dashboard__card p-5">
+          <div class="flex justify-content-between align-items-center mb-4">
+            <h2 class="fs-5 font-semibold m-0">Agent Cluster Status</h2>
+            <span class="dashboard__nodes-badge"
+              >{{ agentNodes.length }} Nodes Total</span
             >
-              <el-col :span="12" class="dashboard-col col">
-                <div class="charts-list flex flex-row">
-                  <div class="charts-list-text">
-                    <div class="fs-7 font-color-normal">
-                      {{ $t('dashboard_valid_title') }}
+          </div>
+
+          <div v-if="agentNodes.length" class="dashboard__table-wrap">
+            <table class="dashboard__table w-100">
+              <thead>
+                <tr>
+                  <th class="text-start">Agent Name</th>
+                  <th class="text-start">Status</th>
+                  <th class="text-start">CPU Usage</th>
+                  <th class="text-start">Memory Usage</th>
+                  <th class="text-end">Running Tasks</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="node in agentNodes"
+                  :key="node.id"
+                  class="cursor-pointer"
+                  @click="navigateToCluster"
+                >
+                  <td>
+                    <div class="flex align-items-center gap-2">
+                      <i-lucide-server
+                        class="text-secondary"
+                        style="width: 16px; height: 16px"
+                      />
+                      <span class="font-semibold">{{
+                        node.agentName || node.systemInfo?.hostname || '-'
+                      }}</span>
                     </div>
-                    <ul class="job-list">
-                      <li
-                        v-for="task in inspectTaskList"
-                        :key="task.key"
-                        class="flex align-center"
+                  </td>
+                  <td>
+                    <span
+                      class="dashboard__status-badge"
+                      :class="`dashboard__status-badge--${getAgentStatus(node)}`"
+                    >
+                      <i-lucide-check-circle
+                        v-if="getAgentStatus(node) === 'online'"
+                        style="width: 14px; height: 14px"
+                      />
+                      <i-lucide-alert-triangle
+                        v-else-if="getAgentStatus(node) === 'warning'"
+                        style="width: 14px; height: 14px"
+                      />
+                      <i-lucide-x-circle
+                        v-else
+                        style="width: 14px; height: 14px"
+                      />
+                      {{ getStatusLabel(node.status) }}
+                    </span>
+                  </td>
+                  <td>
+                    <div class="flex align-items-center gap-2">
+                      <span class="fs-7 font-semibold" style="min-width: 36px"
+                        >{{ getCpuUsage(node) }}%</span
                       >
-                        <i
-                          class="dots mr-3"
-                          :style="`background-color: ${task.itemStyle.color};`"
+                      <div class="dashboard__usage-bar">
+                        <div
+                          class="dashboard__usage-bar-fill"
+                          :style="{
+                            width: `${Math.min(getCpuUsage(node), 100)}%`,
+                            backgroundColor: usageBarColor(getCpuUsage(node)),
+                          }"
                         />
-                        <span
-                          :title="task.name"
-                          class="fw-normal font-color-light flex-1 ellipsis"
-                          >{{ task.name }}</span
-                        ><span class="num font-color-dark">{{
-                          task.value
-                        }}</span>
-                      </li>
-                    </ul>
-                  </div>
-                  <div
-                    v-if="inspectTaskList.every((item) => item.value === 0)"
-                    class="flex justify-content-center align-items-center w-100"
-                  >
-                    <div
-                      class="flex justify-content-center align-items-center font-color-slight"
-                      v-html="
-                        $t('dashboard_no_statistics', [
-                          `<span class='color-primary' style='padding: 0 5px;'>${$t(
-                            'dashboard_copy_total',
-                          )}</span>`,
-                        ])
-                      "
-                    />
-                  </div>
-                  <div v-else class="chart">
-                    <Chart
-                      type="pie"
-                      :extend="getPieOption(inspectTaskList)"
-                      class="type-chart"
-                    />
-                  </div>
-                </div>
-              </el-col>
-              <el-col
-                v-readonlybtn="'Data_SYNC_menu'"
-                :span="12"
-                class="dashboard-col col --dense"
-              >
-                <div class="charts-list flex flex-row">
-                  <div class="charts-list-text">
-                    <div class="fs-7 font-color-normal">
-                      {{ $t('dashboard_transfer_overview') }}
+                      </div>
                     </div>
-                    <ul class="job-list">
-                      <li
-                        v-for="item in transBarData"
-                        :key="item.key"
-                        class="flex align-center"
-                      >
-                        <i
-                          class="dots mr-3"
-                          :style="`background-color: ${item.color};`"
-                        />
-                        <span
-                          :title="item.name"
-                          class="fw-normal font-color-light flex-1 ellipsis"
-                          >{{ item.name }}</span
-                        ><span class="num font-color-dark">{{
-                          toThousandsUnit(item.value)
-                        }}</span>
-                      </li>
-                    </ul>
-                  </div>
-                  <div
-                    v-if="transBarData.every((item) => item.value === 0)"
-                    class="flex justify-content-center align-items-center w-100"
-                  >
-                    <div
-                      class="flex justify-content-center align-items-center font-color-slight"
-                      v-html="
-                        $t('dashboard_no_statistics', [
-                          `<span class='color-primary' style='padding: 0 5px;'>${$t(
-                            'dashboard_transfer_overview',
-                          )}</span>`,
-                        ])
-                      "
-                    />
-                  </div>
-                  <div v-else class="chart">
-                    <Chart
-                      type="pie"
-                      :extend="getPieOption(transBarData)"
-                      class="type-chart"
-                    />
-                  </div>
-                </div>
-              </el-col>
-            </el-row>
-            <!-- 服务器进程 -->
-            <div
-              v-readonlybtn="'v2_cluster-management_menu'"
-              class="dashboard-row dashboard-col col"
-            >
-              <div class="dashboard-col">
-                <div class="dashboard-col-box">
-                  <div class="fs-7 font-color-normal">
-                    {{ $t('dashboard_server_title') }}
-                  </div>
-                  <el-row v-if="serverTable.length" :gutter="24">
-                    <el-col
-                      v-for="item in serverTable"
-                      :key="item.id"
-                      :span="12"
-                      class="server-list pt-3"
-                    >
-                      <div
-                        class="server-list-box rounded-xl py-2 cursor-pointer"
-                        @click="onClickServer"
+                  </td>
+                  <td>
+                    <div class="flex align-items-center gap-2">
+                      <span class="fs-7 font-semibold" style="min-width: 36px"
+                        >{{ getMemUsage(node) }}%</span
                       >
-                        <img
-                          src="../../assets/static/serve.svg"
-                          class="rounded-lg"
+                      <div class="dashboard__usage-bar">
+                        <div
+                          class="dashboard__usage-bar-fill"
+                          :style="{
+                            width: `${Math.min(getMemUsage(node), 100)}%`,
+                            backgroundColor: usageBarColor(getMemUsage(node)),
+                          }"
                         />
-                        <div class="server-main ml-5">
-                          <div class="flex align-center gap-2">
-                            <div class="title">
-                              {{ item.agentName || item.systemInfo.hostname }}
-                            </div>
-                            <el-tag type="info" class="rounded-md">{{
-                              item.custIP ? item.custIP : item.systemInfo.ip
-                            }}</el-tag>
-                          </div>
-
-                          <ul class="flex flex-wrap pt-1 gap-3 align-center">
-                            <li>
-                              <label class="font-color-slight pr-2">{{
-                                $t('dashboard_management')
-                              }}</label>
-                              <span
-                                :style="`color: ${colorServeMap[item.management.status]};`"
-                                >{{ getStatus(item.management.status) }}</span
-                              >
-                            </li>
-                            <li>
-                              <label class="font-color-slight pr-2">{{
-                                $t('dashboard_api_service')
-                              }}</label>
-                              <span
-                                :style="`color: ${colorServeMap[item.apiServer.status]};`"
-                                >{{ getStatus(item.apiServer.status) }}</span
-                              >
-                            </li>
-
-                            <li>
-                              <label class="font-color-slight pr-2">{{
-                                $t('dashboard_task_transfer')
-                              }}</label>
-                              <span
-                                :style="`color: ${colorServeMap[item.engine.status]};`"
-                                >{{ getStatus(item.engine.status) }}</span
-                              >
-                            </li>
-
-                            <el-tag
-                              v-if="
-                                agentRunningTask[item.processId] &&
-                                agentRunningTask[item.processId].migrate
-                              "
-                              type="success"
-                              class="rounded-md cursor-pointer"
-                              @click.stop="
-                                handleGoTask(item.processId, 'migrate')
-                              "
-                            >
-                              {{ $t('dashboard_copy_total') }}:
-                              {{
-                                agentRunningTask[item.processId].migrate || 0
-                              }}
-                              <el-icon><ArrowRight /></el-icon>
-                            </el-tag>
-
-                            <el-tag
-                              v-if="
-                                agentRunningTask[item.processId] &&
-                                agentRunningTask[item.processId].sync
-                              "
-                              type="success"
-                              class="rounded-md cursor-pointer"
-                              @click.stop="handleGoTask(item.processId, 'sync')"
-                            >
-                              {{ $t('dashboard_sync_total') }}:
-                              {{ agentRunningTask[item.processId].sync || 0 }}
-                              <el-icon><ArrowRight /></el-icon>
-                            </el-tag>
-                          </ul>
-                        </div>
                       </div>
-                    </el-col>
-                  </el-row>
-                  <div
-                    v-else
-                    class="flex justify-content-center align-items-center h-100 py-4"
-                  >
-                    <div
-                      class="flex justify-content-center align-items-center font-color-slight"
-                      v-html="
-                        $t('dashboard_no_statistics', [
-                          `<span class='color-primary' style='padding: 0 5px;'>${$t(
-                            'dashboard_server_title',
-                          )}</span>`,
-                        ])
-                      "
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-          <template v-else>
-            <div class="dashboard-wrap-box">
-              <img src="../../assets/static/undraw_secure_files_re_6vdh.svg" />
-              <div class="txt pt-4">{{ $t('dashboard_no_data_here') }}</div>
-            </div>
-          </template>
+                    </div>
+                  </td>
+                  <td class="text-end font-mono font-semibold">
+                    {{ getRunningTaskCount(node) }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <el-empty v-else description="No agents found" :image-size="60" />
         </div>
       </div>
     </section>
@@ -928,164 +669,223 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-.dashboard-wrap {
-  .job-list {
+.dashboard {
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #0f172a;
+  }
+
+  // ── Cards ──────────────────────────────────────────────
+  &__card {
+    background-color: #fff;
+    border-radius: 0.75rem;
+    border: 1px solid #f1f5f9;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+    transition: box-shadow 0.2s ease;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  &__card-icon {
+    width: 20px;
+    height: 20px;
+    opacity: 0.7;
+  }
+
+  // ── Tags (KPI sub-metrics) ─────────────────────────────
+  &__tag {
+    display: inline-block;
+    padding: 0.125rem 0.625rem;
+    border-radius: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.5;
+    border: 1px solid transparent;
+
+    &--emerald {
+      color: #065f46;
+      background-color: #ecfdf5;
+      border-color: #a7f3d0;
+    }
+
+    &--red {
+      color: #991b1b;
+      background-color: #fef2f2;
+      border-color: #fecaca;
+    }
+
+    &--amber {
+      color: #92400e;
+      background-color: #fffbeb;
+      border-color: #fde68a;
+    }
+
+    &--slate {
+      color: #475569;
+      background-color: #f8fafc;
+      border-color: #e2e8f0;
+    }
+
+    &--blue {
+      color: #1e40af;
+      background-color: #eff6ff;
+      border-color: #bfdbfe;
+    }
+
+    &--indigo {
+      color: #3730a3;
+      background-color: #eef2ff;
+      border-color: #c7d2fe;
+    }
+  }
+
+  // ── Latency badges ─────────────────────────────────────
+  &__badge {
+    display: inline-block;
+    padding: 0.125rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  // ── Time / Tab switcher ────────────────────────────────
+  &__time-switcher,
+  &__tab-switcher {
     display: inline-flex;
-    flex-direction: column;
-    padding: 16px 0 0 20%;
-    box-sizing: border-box;
-    li {
-      margin-bottom: 5px;
-      //cursor: pointer;
-      white-space: nowrap;
-      .dots {
-        display: inline-block;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-      }
-      .num {
-        font-weight: 600;
-        min-width: 80px;
-        margin-left: 16px;
+    background-color: #f1f5f9;
+    border-radius: 0.375rem;
+    padding: 2px;
+
+    button {
+      padding: 0.125rem 0.5rem;
+      border: none;
+      background: none;
+      border-radius: 0.25rem;
+      font-size: 0.6875rem;
+      font-weight: 500;
+      color: #64748b;
+      cursor: pointer;
+      transition: all 0.15s ease;
+
+      &.active {
+        background-color: #fff;
+        color: #0f172a;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
       }
-      span {
-        display: inline-block;
-        text-align: left;
-        font-size: var(--font-base-title);
-        &::before {
-          content: '';
-        }
+
+      &:hover:not(.active) {
+        color: #334155;
       }
     }
   }
 
-  .dashboard-row {
-    .dashboard-col {
-      flex: 1;
-      &.col {
-        border-radius: 3px;
-        box-sizing: border-box;
-      }
-      .dashboard-col-box {
-        height: 100%;
-        padding: 16px;
-        border-radius: 12px;
-        background-color: var(--card);
-        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-      }
-      .dashboard-label {
-        height: 48px;
-      }
-      .dashboard-num {
-        font-size: 65px;
-        color: var(--color-primary);
-      }
-      .charts-list {
-        height: 100%;
-        overflow: hidden;
-        box-sizing: border-box;
-        background-color: var(--card);
-        border-radius: 12px;
-        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-        .charts-list-text {
-          width: 50%;
-          padding: 16px;
-        }
-        .job-list {
-          display: inline-flex;
-          flex-direction: column;
-          padding: 16px 0 0 20%;
-          box-sizing: border-box;
-          li {
-            margin-bottom: 5px;
-            //cursor: pointer;
-            white-space: nowrap;
-            .dots {
-              display: inline-block;
-              width: 6px;
-              height: 6px;
-              border-radius: 50%;
-            }
-            .num {
-              font-weight: 600;
-              min-width: 80px;
-              margin-left: 16px;
-            }
-            span {
-              display: inline-block;
-              text-align: left;
-              font-size: var(--font-base-title);
-              &::before {
-                content: '';
-              }
-            }
-          }
-        }
-        .chart {
-          width: 50%;
-          height: 210px;
-        }
-      }
-      .server-list {
-        .server-list-box {
-          display: flex;
-          flex: 1;
-          padding: 5px 10px;
-          border: 1px solid var(--el-border-color);
-          border-radius: 3px;
-          transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-          img {
-            width: 43px;
-            height: 43px;
-          }
-          .server-main {
-            .title {
-              color: var(--el-text-color-primary);
-              font-weight: 500;
-            }
-          }
+  // ── Nodes badge ────────────────────────────────────────
+  &__nodes-badge {
+    display: inline-block;
+    padding: 0.125rem 0.625rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #1e40af;
+    background-color: #eff6ff;
+  }
 
-          &:hover {
-            border-color: var(--color-primary) !important;
-          }
-        }
-      }
-      .line-chart {
-        display: flex;
-        flex-direction: column;
-        height: 150px;
-        ul {
-          padding-top: 8px;
-          li {
-            display: inline-block;
-            padding-right: 10px;
-            color: var(--el-text-color-primary);
-            font-weight: 600;
-            span {
-              padding-right: 5px;
-              font-weight: 400;
-            }
-          }
-        }
-        .bar-chart {
-          height: calc(100% - 24px);
-        }
-      }
+  // ── Trend charts ───────────────────────────────────────
+  &__trend-chart {
+    height: 220px;
+  }
+
+  // ── Tables ─────────────────────────────────────────────
+  &__table-wrap {
+    overflow-x: auto;
+  }
+
+  &__table {
+    border-collapse: separate;
+    border-spacing: 0;
+
+    th {
+      padding: 0.625rem 1rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: #64748b;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid #f1f5f9;
+      white-space: nowrap;
+    }
+
+    td {
+      padding: 0.75rem 1rem;
+      font-size: 0.8125rem;
+      border-bottom: 1px solid #f8fafc;
+      white-space: nowrap;
+    }
+
+    tbody tr:hover {
+      background-color: #f8fafc;
     }
   }
-  .dashboard-wrap-box {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: var(--color-white);
-    border-radius: 4px;
-    justify-content: center;
+
+  // ── Status badge ───────────────────────────────────────
+  &__status-badge {
+    display: inline-flex;
     align-items: center;
-    .txt {
-      font-size: var(--font-base-title);
-      color: rgba(0, 0, 0, 0.43);
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+
+    &--online {
+      color: #16a34a;
+      background-color: #f0fdf4;
+    }
+
+    &--warning {
+      color: #d97706;
+      background-color: #fffbeb;
+    }
+
+    &--offline {
+      color: #dc2626;
+      background-color: #fef2f2;
     }
   }
+
+  // ── Usage bar ──────────────────────────────────────────
+  &__usage-bar {
+    flex: 1;
+    height: 6px;
+    background-color: #f1f5f9;
+    border-radius: 3px;
+    overflow: hidden;
+    min-width: 60px;
+  }
+
+  &__usage-bar-fill {
+    height: 100%;
+    border-radius: 3px;
+    transition: width 0.6s ease;
+  }
+}
+
+// ── Badge color variants (latency) ────────────────────
+.badge--red {
+  color: #991b1b;
+  background-color: #fef2f2;
+}
+
+.badge--amber {
+  color: #92400e;
+  background-color: #fffbeb;
+}
+
+.badge--green {
+  color: #065f46;
+  background-color: #ecfdf5;
 }
 </style>
diff --git a/packages/api/src/core/task.ts b/packages/api/src/core/task.ts
index da3b5f449..9cadd7c3c 100644
--- a/packages/api/src/core/task.ts
+++ b/packages/api/src/core/task.ts
@@ -442,3 +442,88 @@ export function checkTaskMemoryHeap(taskId: string) {
     isSafe: boolean
   }>(`${BASE_URL}/checkTaskMemoryHeap/${taskId}`)
 }
+
+// ── Task Dashboard ──────────────────────────────────────────────────
+
+export interface TaskDashboardQuery {
+  type: string
+  step: number
+  dashboardType: string
+  top: number
+  startAt: number
+  endAt: number
+}
+
+export interface TaskDashboardActiveTasks {
+  total: number
+  running: number
+  error: number
+  maxLag: number
+  minLag: number
+}
+
+export interface TaskDashboardThroughput {
+  current: number
+  peak: number
+  dataRate: number
+  changeRate: number
+}
+
+export interface TaskDashboardConnectedDb {
+  id: string
+  name: string
+  tableCount: number
+}
+
+export interface TaskDashboardApiRequests {
+  total: number
+  failed: number
+  errorRate: number
+  avgTime: number
+}
+
+export interface TaskDashboardTrendSeries {
+  ts: number[]
+  values: number[]
+}
+
+export interface TaskDashboardTopTask {
+  taskId: string
+  taskName: string
+  latency: number
+  throughput: number
+}
+
+export interface TaskDashboardVo {
+  query: TaskDashboardQuery
+  summary: {
+    activeTasks: TaskDashboardActiveTasks
+    totalThroughput: TaskDashboardThroughput
+    connectedDbs: {
+      total: number
+      items: TaskDashboardConnectedDb[]
+    }
+    apiRequests: TaskDashboardApiRequests
+  }
+  trends: {
+    throughput: TaskDashboardTrendSeries
+    apiRequests: TaskDashboardTrendSeries
+  }
+  tops: {
+    topLaggingTasks: TaskDashboardTopTask[]
+    topThroughputTasks: TaskDashboardTopTask[]
+  }
+}
+
+export interface TaskDashboardParams {
+  type?: 'minute' | 'hours' | 'days'
+  step?: number
+  dashboardType?: string
+  top?: number
+}
+
+export function fetchTaskDashboard(params?: TaskDashboardParams) {
+  return requestClient.get<TaskDashboardVo>(`${BASE_URL}/dashboard`, {
+    params,
+  })
+}
diff --git a/packages/assets/styles/utilities.scss b/packages/assets/styles/utilities.scss
index 2245899bb..fc9010025 100644
--- a/packages/assets/styles/utilities.scss
+++ b/packages/assets/styles/utilities.scss
@@ -12852,6 +12852,10 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .grid-cols-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
@@ -13189,3 +13193,19 @@
 .bg-components-kbd-bg-gray {
   background-color: var(--color-components-kbd-bg-gray);
 }
+
+.text-blue-500 {
+  color: var(--color-blue-500);
+}
+
+.text-indigo-500 {
+  color: var(--color-indigo-500);
+}
+
+.text-teal-500 {
+  color: var(--color-teal-500);
+}
+
+.text-purple-500 {
+  color: var(--color-purple-500);
+}
diff --git a/packages/styles/src/design/tokens/default.css b/packages/styles/src/design/tokens/default.css
index b0c941fc2..ad78f83b1 100644
--- a/packages/styles/src/design/tokens/default.css
+++ b/packages/styles/src/design/tokens/default.css
@@ -40,6 +40,7 @@
   --color-blue-50: oklch(97% 0.014 254.604);
   --color-blue-200: oklch(88.2% 0.059 254.128);
   --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
   --color-blue-600: oklch(54.6% 0.245 262.881);
   --color-blue-800: oklch(42.4% 0.199 265.638);
   --color-blue-950: oklch(28.2% 0.091 267.935);
@@ -49,6 +50,9 @@
   --color-orange-600: oklch(64.6% 0.222 41.116);
   --color-orange-800: oklch(47% 0.157 37.304);
   --color-orange-950: oklch(26.6% 0.079 36.259);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
 
   --text-dark: #1d2129;
   --text-normal: #333c4a;
diff --git a/packages/types/src/daas-components.d.ts b/packages/types/src/daas-components.d.ts
index 9d31fd0f4..b53aa470e 100644
--- a/packages/types/src/daas-components.d.ts
+++ b/packages/types/src/daas-components.d.ts
@@ -90,7 +90,9 @@ declare module 'vue' {
     ElTreeV2: typeof import('element-plus/es')['ElTreeV2']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     IFluentFolderLink16Regular: typeof import('~icons/fluent/folder-link16-regular')['default']
+    ILucideActivity: typeof import('~icons/lucide/activity')['default']
     ILucideAlertCircle: typeof import('~icons/lucide/alert-circle')['default']
+    ILucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
     ILucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     ILucideArrowRight: typeof import('~icons/lucide/arrow-right')['default']
     ILucideBadgeAlert: typeof import('~icons/lucide/badge-alert')['default']
@@ -99,6 +101,7 @@ declare module 'vue' {
     ILucideCalendarDays: typeof import('~icons/lucide/calendar-days')['default']
     ILucideCheck: typeof import('~icons/lucide/check')['default']
     ILucideCheckCheck: typeof import('~icons/lucide/check-check')['default']
+    ILucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     ILucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
     ILucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
     ILucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
@@ -124,6 +127,7 @@ declare module 'vue' {
     ILucideFolder: typeof import('~icons/lucide/folder')['default']
     ILucideFolderClosed: typeof import('~icons/lucide/folder-closed')['default']
     ILucideFolderOpen: typeof import('~icons/lucide/folder-open')['default']
+    ILucideFoldVertical: typeof import('~icons/lucide/fold-vertical')['default']
     ILucideGitBranch: typeof import('~icons/lucide/git-branch')['default']
     ILucideGitCompareArrows: typeof import('~icons/lucide/git-compare-arrows')['default']
     ILucideGithub: typeof import('~icons/lucide/github')['default']
@@ -165,14 +169,17 @@ declare module 'vue' {
     ILucideTable: typeof import('~icons/lucide/table')['default']
     ILucideTag: typeof import('~icons/lucide/tag')['default']
     ILucideTrash2: typeof import('~icons/lucide/trash2')['default']
+    ILucideTrendingUp: typeof import('~icons/lucide/trending-up')['default']
     ILucideTriangleAlert: typeof import('~icons/lucide/triangle-alert')['default']
     ILucideUndo: typeof import('~icons/lucide/undo')['default']
     ILucideUndo2: typeof import('~icons/lucide/undo2')['default']
+    ILucideUnfoldVertical: typeof import('~icons/lucide/unfold-vertical')['default']
     ILucideUpload: typeof import('~icons/lucide/upload')['default']
     ILucideUserRound: typeof import('~icons/lucide/user-round')['default']
     ILucideWandSparkles: typeof import('~icons/lucide/wand-sparkles')['default']
     ILucideWorkflow: typeof import('~icons/lucide/workflow')['default']
     ILucideX: typeof import('~icons/lucide/x')['default']
+    ILucideXCircle: typeof import('~icons/lucide/x-circle')['default']
     ILucideZoomIn: typeof import('~icons/lucide/zoom-in')['default']
     ILucideZoomOut: typeof import('~icons/lucide/zoom-out')['default']
     IMingcuteAddFill: typeof import('~icons/mingcute/add-fill')['default']
@@ -288,7 +295,9 @@ declare global {
   const ElTreeV2: typeof import('element-plus/es')['ElTreeV2']
   const ElUpload: typeof import('element-plus/es')['ElUpload']
   const IFluentFolderLink16Regular: typeof import('~icons/fluent/folder-link16-regular')['default']
+  const ILucideActivity: typeof import('~icons/lucide/activity')['default']
   const ILucideAlertCircle: typeof import('~icons/lucide/alert-circle')['default']
+  const ILucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
   const ILucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
   const ILucideArrowRight: typeof import('~icons/lucide/arrow-right')['default']
   const ILucideBadgeAlert: typeof import('~icons/lucide/badge-alert')['default']
@@ -297,6 +306,7 @@ declare global {
   const ILucideCalendarDays: typeof import('~icons/lucide/calendar-days')['default']
   const ILucideCheck: typeof import('~icons/lucide/check')['default']
   const ILucideCheckCheck: typeof import('~icons/lucide/check-check')['default']
+  const ILucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
   const ILucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
   const ILucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
   const ILucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
@@ -322,6 +332,7 @@ declare global {
   const ILucideFolder: typeof import('~icons/lucide/folder')['default']
   const ILucideFolderClosed: typeof import('~icons/lucide/folder-closed')['default']
   const ILucideFolderOpen: typeof import('~icons/lucide/folder-open')['default']
+  const ILucideFoldVertical: typeof import('~icons/lucide/fold-vertical')['default']
   const ILucideGitBranch: typeof import('~icons/lucide/git-branch')['default']
   const ILucideGitCompareArrows: typeof import('~icons/lucide/git-compare-arrows')['default']
   const ILucideGithub: typeof import('~icons/lucide/github')['default']
@@ -363,14 +374,17 @@ declare global {
   const ILucideTable: typeof import('~icons/lucide/table')['default']
   const ILucideTag: typeof import('~icons/lucide/tag')['default']
   const ILucideTrash2: typeof import('~icons/lucide/trash2')['default']
+  const ILucideTrendingUp: typeof import('~icons/lucide/trending-up')['default']
   const ILucideTriangleAlert: typeof import('~icons/lucide/triangle-alert')['default']
   const ILucideUndo: typeof import('~icons/lucide/undo')['default']
   const ILucideUndo2: typeof import('~icons/lucide/undo2')['default']
+  const ILucideUnfoldVertical: typeof import('~icons/lucide/unfold-vertical')['default']
   const ILucideUpload: typeof import('~icons/lucide/upload')['default']
   const ILucideUserRound: typeof import('~icons/lucide/user-round')['default']
   const ILucideWandSparkles: typeof import('~icons/lucide/wand-sparkles')['default']
   const ILucideWorkflow: typeof import('~icons/lucide/workflow')['default']
   const ILucideX: typeof import('~icons/lucide/x')['default']
+  const ILucideXCircle: typeof import('~icons/lucide/x-circle')['default']
   const ILucideZoomIn: typeof import('~icons/lucide/zoom-in')['default']
   const ILucideZoomOut: typeof import('~icons/lucide/zoom-out')['default']
   const IMingcuteAddFill: typeof import('~icons/mingcute/add-fill')['default']

From 3d188c00a7e53320c74b2288543020b382eebecc Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Sun, 12 Apr 2026 18:35:56 +0800
Subject: [PATCH 3/5] refactor: enhance Dashboard.vue with improved data
 fetching, task options, and time range handling

---
 apps/daas/src/views/dashboard/Dashboard.vue | 249 ++++++++++++--------
 1 file changed, 147 insertions(+), 102 deletions(-)

diff --git a/apps/daas/src/views/dashboard/Dashboard.vue b/apps/daas/src/views/dashboard/Dashboard.vue
index c26e2b57a..810fad344 100644
--- a/apps/daas/src/views/dashboard/Dashboard.vue
+++ b/apps/daas/src/views/dashboard/Dashboard.vue
@@ -8,9 +8,10 @@ import {
   type TaskDashboardTopTask,
   type TaskDashboardVo,
 } from '@tap/api/src/core/task'
-import { getProcessInfo } from '@tap/api/src/core/workers'
+import { fetchWorkers, getProcessInfo } from '@tap/api/src/core/workers'
 import PageContainer from '@tap/business/src/components/PageContainer.vue'
 import Chart from '@tap/component/src/chart/Chart.vue'
+import { calcUnit } from '@tap/shared/src/number'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { STATUS_MAP as DASHBOARD_STATUS_MAP } from './const'
@@ -31,7 +32,16 @@ const trendsTimeRange = ref<'5min' | '1h' | '24h'>('24h')
 
 // Top Tasks state
 const topTaskTab = ref<'lagging' | 'throughput'>('lagging')
+const topTaskTabOptions = [
+  { label: 'Most Lagging', value: 'lagging' },
+  { label: 'Highest Throughput', value: 'throughput' },
+]
 const topTaskLimit = ref<5 | 10 | 20>(5)
+const topTaskLimitOptions = [
+  { label: 'Top 5', value: 5 },
+  { label: 'Top 10', value: 10 },
+  { label: 'Top 20', value: 20 },
+]
 
 // Cluster / Agent data
 interface AgentNode extends ClusterState {
@@ -85,7 +95,7 @@ const apiChartOption = computed(() => {
 })
 
 function formatTimeLabel(ts: number): string {
-  const d = new Date(ts)
+  const d = new Date(Number(`${ts}000`))
   const hh = String(d.getHours()).padStart(2, '0')
   const mm = String(d.getMinutes()).padStart(2, '0')
   return `${hh}:${mm}`
@@ -245,18 +255,22 @@ function getStatusLabel(type: string) {
   return (DASHBOARD_STATUS_MAP as any)[type] || '-'
 }
 
+// ── Helpers ────────────────────────────────────────────
+function rangeToTimeParams(range: string): {
+  type: 'minute' | 'hours' | 'days'
+} {
+  if (range === '5m' || range === '5min') return { type: 'minute' }
+  if (range === '1h') return { type: 'hours' }
+  return { type: 'days' }
+}
+
 // ── Data fetching ──────────────────────────────────────
 async function fetchDashboardData() {
   loading.value = true
   try {
     const [dashboard, clusterData] = await Promise.all([
       fetchTaskDashboard({
-        type:
-          trendsTimeRange.value === '5min'
-            ? 'minute'
-            : trendsTimeRange.value === '1h'
-              ? 'hours'
-              : 'days',
+        ...rangeToTimeParams(trendsTimeRange.value),
         top: topTaskLimit.value,
       }).catch(() => null),
       fetchClusterStates({ type: 'dashboard' }).catch(() => ({ items: [] })),
@@ -265,7 +279,7 @@ async function fetchDashboardData() {
     if (dashboard) dashboardData.value = dashboard
 
     // Process cluster data
-    const processIdSet = new Set<string>()
+    const processIds: string[] = []
     const items: AgentNode[] = (clusterData?.items || []).map((item: any) => {
       const node: AgentNode = { ...item }
       if (node.status !== 'running') {
@@ -278,32 +292,115 @@ async function fetchDashboardData() {
       }
       if (node.systemInfo?.process_id) {
         node.processId = node.systemInfo.process_id
-        processIdSet.add(node.systemInfo.process_id)
+        processIds.push(node.systemInfo.process_id)
       }
       return node
     })
-    agentNodes.value = items
 
-    if (processIdSet.size > 0) {
+    // Fetch worker usage rates (CPU / Memory) — same approach as Cluster.vue
+    if (processIds.length > 0) {
       try {
-        const processData = await getProcessInfo(Array.from(processIdSet))
-        for (const id of Object.keys(processData)) {
-          agentRunningTask.value[id] = (processData as any)[id].runningTaskNum
+        const [workerResponse, processData] = await Promise.all([
+          fetchWorkers({
+            where: {
+              process_id: { inq: processIds },
+              worker_type: 'connector',
+            },
+          }).catch(() => null),
+          getProcessInfo(processIds).catch(() => null),
+        ])
+
+        // Build metricValues map from worker data
+        const metricMap: Record<
+          string,
+          { CpuUsage: string; HeapMemoryUsage: string }
+        > = {}
+        if (workerResponse?.items?.length) {
+          for (const w of workerResponse.items) {
+            if (w.metricValues) {
+              metricMap[(w as any).process_id] = {
+                CpuUsage: `${(((w.metricValues as any).CpuUsage ?? 0) * 100).toFixed(2)}%`,
+                HeapMemoryUsage: `${(((w.metricValues as any).HeapMemoryUsage ?? 0) * 100).toFixed(2)}%`,
+              }
+            }
+          }
+        }
+
+        // Apply metricValues onto each node
+        for (const node of items) {
+          if (node.processId && metricMap[node.processId]) {
+            node.metricValues = metricMap[node.processId]
+          }
+        }
+
+        // Running task counts
+        if (processData) {
+          for (const id of Object.keys(processData)) {
+            agentRunningTask.value[id] = (processData as any)[id].runningTaskNum
+          }
         }
       } catch {
         /* ignore */
       }
     }
 
+    agentNodes.value = items
+
     lastUpdated.value = new Date().toLocaleTimeString()
   } finally {
     loading.value = false
   }
 }
 
-function onTrendsTimeChange(range: '5min' | '1h' | '24h') {
-  trendsTimeRange.value = range
-  fetchDashboardData()
+// ── Partial fetchers (only re-fetch the changed section) ──
+async function fetchPartial(
+  dashboardType: string,
+  range: string,
+  top?: number,
+) {
+  try {
+    const result = await fetchTaskDashboard({
+      ...rangeToTimeParams(range),
+      dashboardType,
+      ...(top != null ? { top } : {}),
+    })
+    if (!result) return
+    // Merge partial result into existing data
+    const prev = dashboardData.value
+    if (!prev) {
+      dashboardData.value = result
+      return
+    }
+    if (result.summary) {
+      prev.summary = { ...prev.summary, ...result.summary }
+    }
+    if (result.trends) {
+      // Only overwrite non-empty trend arrays
+      if (result.trends.throughput?.ts?.length) {
+        prev.trends = { ...prev.trends, throughput: result.trends.throughput }
+      }
+      if (result.trends.apiRequests?.ts?.length) {
+        prev.trends = { ...prev.trends, apiRequests: result.trends.apiRequests }
+      }
+    }
+    if (result.tops) {
+      prev.tops = result.tops
+    }
+  } catch {
+    /* ignore */
+  }
+}
+
+function onApiTimeRangeChange() {
+  fetchPartial('apiRequests', apiTimeRange.value)
+}
+
+function onTrendsTimeChange() {
+  fetchPartial('trends', trendsTimeRange.value)
+}
+
+function onTopTaskLimitChange() {
+  fetchPartial('tops', trendsTimeRange.value, topTaskLimit.value)
 }
 
 // ── Navigation ─────────────────────────────────────────
@@ -340,7 +437,7 @@ onBeforeUnmount(() => {
           <div class="dashboard__card p-5">
             <div class="flex justify-content-between align-items-start mb-3">
               <span class="fs-7 text-secondary fw-sub">Active Tasks</span>
-              <div class="p-2 bg-gray-50 rounded-lg">
+              <div class="p-2 bg-gray-50 rounded-lg mt-n2">
                 <el-icon size="20" class="text-blue-500 align-top">
                   <i-lucide-activity />
                 </el-icon>
@@ -369,7 +466,7 @@ onBeforeUnmount(() => {
           <div class="dashboard__card p-5">
             <div class="flex justify-content-between align-items-start mb-3">
               <span class="fs-7 text-secondary fw-sub">Total Throughput</span>
-              <div class="p-2 bg-gray-50 rounded-lg">
+              <div class="p-2 bg-gray-50 rounded-lg mt-n2">
                 <el-icon class="text-indigo-500 align-top" size="20">
                   <i-lucide-trending-up />
                 </el-icon>
@@ -377,16 +474,16 @@ onBeforeUnmount(() => {
             </div>
             <div class="din-font lh-1 mb-1">
               <span class="fs-2 font-semibold">{{
-                formatNumber(throughput?.current ?? 0)
+                (throughput?.current ?? 0).toFixed(2)
               }}</span>
               <span class="fs-7 text-secondary ml-1">events/sec</span>
             </div>
             <div class="flex flex-wrap gap-2 mt-3">
               <span class="dashboard__tag dashboard__tag--amber"
-                >Peak {{ formatNumber(throughput?.peak ?? 0) }}</span
+                >Peak {{ (throughput?.peak ?? 0).toFixed(2) }}</span
               >
               <span class="dashboard__tag dashboard__tag--indigo"
-                >Data {{ throughput?.dataRate ?? 0 }} MB/s</span
+                >Data {{ calcUnit(throughput?.dataRate ?? 0, 'b') }}/s</span
               >
             </div>
             <p
@@ -397,7 +494,7 @@ onBeforeUnmount(() => {
               "
             >
               {{ throughput.changeRate > 0 ? '+' : ''
-              }}{{ throughput.changeRate }}% vs last hour
+              }}{{ throughput.changeRate.toFixed(2) }}% vs last hour
             </p>
           </div>
 
@@ -405,7 +502,7 @@ onBeforeUnmount(() => {
           <div class="dashboard__card p-5">
             <div class="flex justify-content-between align-items-start mb-3">
               <span class="fs-7 text-secondary fw-sub">Connected DBs</span>
-              <div class="p-2 bg-gray-50 rounded-lg">
+              <div class="p-2 bg-gray-50 rounded-lg mt-n2">
                 <el-icon class="text-teal-500 align-top" size="20">
                   <i-lucide-database />
                 </el-icon>
@@ -422,7 +519,7 @@ onBeforeUnmount(() => {
                 v-for="db in (connectedDbs?.items || []).slice(0, 3)"
                 :key="db.id"
                 class="dashboard__tag dashboard__tag--blue"
-                >{{ db.name }} {{ db.tableCount }} tbls</span
+                >{{ db.name }} <strong>{{ db.tableCount }} tbls</strong></span
               >
             </div>
           </div>
@@ -432,19 +529,15 @@ onBeforeUnmount(() => {
             <div class="flex justify-content-between align-items-start mb-3">
               <div class="flex align-items-center gap-2">
                 <span class="fs-7 text-secondary fw-sub">API Requests</span>
-                <div class="dashboard__time-switcher">
-                  <button
-                    v-for="r in ['5m', '1h', '24h'] as const"
-                    :key="r"
-                    :class="{ active: apiTimeRange === r }"
-                    @click="apiTimeRange = r"
-                  >
-                    {{ r }}
-                  </button>
-                </div>
+                <el-segmented
+                  v-model="apiTimeRange"
+                  :options="['5m', '1h', '24h']"
+                  size="small"
+                  @change="onApiTimeRangeChange"
+                />
               </div>
               <div class="p-2 bg-gray-50 rounded-lg">
-                <el-icon class="text-purple-500 align-top" size="20">
+                <el-icon class="text-purple-500 align-top mt-n2" size="20">
                   <i-lucide-server />
                 </el-icon>
               </div>
@@ -470,16 +563,12 @@ onBeforeUnmount(() => {
         <div class="dashboard__card p-5 mb-6">
           <div class="flex justify-content-between align-items-center mb-5">
             <h2 class="fs-5 font-semibold m-0">System Trends</h2>
-            <div class="dashboard__time-switcher">
-              <button
-                v-for="r in ['5min', '1h', '24h'] as const"
-                :key="r"
-                :class="{ active: trendsTimeRange === r }"
-                @click="onTrendsTimeChange(r)"
-              >
-                {{ r }}
-              </button>
-            </div>
+            <el-segmented
+              v-model="trendsTimeRange"
+              :options="['5min', '1h', '24h']"
+              size="small"
+              @change="onTrendsTimeChange"
+            />
           </div>
           <div class="grid grid-cols-2 gap-6">
             <div>
@@ -506,31 +595,18 @@ onBeforeUnmount(() => {
           <div class="flex justify-content-between align-items-center mb-4">
             <div class="flex align-items-center gap-3">
               <h2 class="fs-5 font-semibold m-0">Top Tasks</h2>
-              <div class="dashboard__tab-switcher">
-                <button
-                  :class="{ active: topTaskTab === 'lagging' }"
-                  @click="topTaskTab = 'lagging'"
-                >
-                  Most Lagging
-                </button>
-                <button
-                  :class="{ active: topTaskTab === 'throughput' }"
-                  @click="topTaskTab = 'throughput'"
-                >
-                  Highest Throughput
-                </button>
-              </div>
-            </div>
-            <div class="dashboard__time-switcher">
-              <button
-                v-for="n in [5, 10, 20] as const"
-                :key="n"
-                :class="{ active: topTaskLimit === n }"
-                @click="topTaskLimit = n"
-              >
-                Top {{ n }}
-              </button>
+              <el-segmented
+                v-model="topTaskTab"
+                :options="topTaskTabOptions"
+                size="small"
+              />
             </div>
+            <el-segmented
+              v-model="topTaskLimit"
+              :options="topTaskLimitOptions"
+              size="small"
+              @change="onTopTaskLimitChange"
+            />
           </div>
 
           <div v-if="topTasks.length" class="dashboard__table-wrap">
@@ -751,37 +827,6 @@ onBeforeUnmount(() => {
     font-weight: 500;
   }
 
-  // ── Time / Tab switcher ────────────────────────────────
-  &__time-switcher,
-  &__tab-switcher {
-    display: inline-flex;
-    background-color: #f1f5f9;
-    border-radius: 0.375rem;
-    padding: 2px;
-
-    button {
-      padding: 0.125rem 0.5rem;
-      border: none;
-      background: none;
-      border-radius: 0.25rem;
-      font-size: 0.6875rem;
-      font-weight: 500;
-      color: #64748b;
-      cursor: pointer;
-      transition: all 0.15s ease;
-
-      &.active {
-        background-color: #fff;
-        color: #0f172a;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-      }
-
-      &:hover:not(.active) {
-        color: #334155;
-      }
-    }
-  }
-
   // ── Nodes badge ────────────────────────────────────────
   &__nodes-badge {
     display: inline-block;

From 3367eb544a358db851edcbd4dd012fc8d7a2baeb Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Mon, 13 Apr 2026 09:14:36 +0800
Subject: [PATCH 4/5] feat: add ODH dashboard localization support in English,
 Chinese, and Traditional Chinese

---
 apps/daas/src/i18n/langs/en.js              |  39 +++++
 apps/daas/src/i18n/langs/zh-CN.js           |  39 +++++
 apps/daas/src/i18n/langs/zh-TW.js           |  39 +++++
 apps/daas/src/views/dashboard/Dashboard.vue | 171 ++++++++++++++------
 4 files changed, 237 insertions(+), 51 deletions(-)

diff --git a/apps/daas/src/i18n/langs/en.js b/apps/daas/src/i18n/langs/en.js
index 21d7ddb00..d84c19511 100644
--- a/apps/daas/src/i18n/langs/en.js
+++ b/apps/daas/src/i18n/langs/en.js
@@ -224,6 +224,45 @@ export default {
   dashboard_error: 'Number of tasks with errors in verification',
   dashboard_no_data_here: 'There is no data here~',
   dashboard_no_statistics: 'No {0} statistics yet',
+  // Dashboard ODH
+  dashboard_odh_active_tasks: 'Active Tasks',
+  dashboard_odh_running: 'Running',
+  dashboard_odh_error: 'Error',
+  dashboard_odh_max_lag: 'Max Lag',
+  dashboard_odh_min_lag: 'Min Lag',
+  dashboard_odh_total_throughput: 'Total Throughput',
+  dashboard_odh_events_sec: 'events/sec',
+  dashboard_odh_peak: 'Peak',
+  dashboard_odh_data: 'Data',
+  dashboard_odh_vs_last_hour: 'vs last hour',
+  dashboard_odh_connected_dbs: 'Connected DBs',
+  dashboard_odh_sources: 'sources',
+  dashboard_odh_tbls: 'tbls',
+  dashboard_odh_api_requests: 'API Requests',
+  dashboard_odh_failed: 'Failed',
+  dashboard_odh_rate: 'Rate',
+  dashboard_odh_avg_time: 'Avg Time',
+  dashboard_odh_system_trends: 'System Trends',
+  dashboard_odh_throughput_chart: 'Throughput (events/sec)',
+  dashboard_odh_api_chart: 'API Requests (req/sec)',
+  dashboard_odh_no_data_in_range: 'No data in this time range',
+  dashboard_odh_top_tasks: 'Top Tasks',
+  dashboard_odh_most_lagging: 'Most Lagging',
+  dashboard_odh_highest_throughput: 'Highest Throughput',
+  dashboard_odh_top_n: 'Top {0}',
+  dashboard_odh_task_name: 'Task Name',
+  dashboard_odh_latency: 'Latency',
+  dashboard_odh_throughput: 'Throughput',
+  dashboard_odh_no_task_data: 'No task data',
+  dashboard_odh_agent_cluster: 'Agent Cluster Status',
+  dashboard_odh_nodes_total: '{0} Nodes Total',
+  dashboard_odh_agent_name: 'Agent Name',
+  dashboard_odh_status: 'Status',
+  dashboard_odh_cpu_usage: 'CPU Usage',
+  dashboard_odh_memory_usage: 'Memory Usage',
+  dashboard_odh_running_tasks: 'Running Tasks',
+  dashboard_odh_no_agents: 'No agents found',
+  dashboard_odh_just_now: 'Just now',
   // 元数据管理
   metadata_db: 'Owned library',
   metadata_change_name: 'Rename',
diff --git a/apps/daas/src/i18n/langs/zh-CN.js b/apps/daas/src/i18n/langs/zh-CN.js
index 36e6a33dd..e8937ed25 100644
--- a/apps/daas/src/i18n/langs/zh-CN.js
+++ b/apps/daas/src/i18n/langs/zh-CN.js
@@ -217,6 +217,45 @@ export default {
   dashboard_error: '校验出错的任务数',
   dashboard_no_data_here: '这里没用数据哦~',
   dashboard_no_statistics: '暂无{0}统计',
+  // Dashboard ODH
+  dashboard_odh_active_tasks: '活跃任务',
+  dashboard_odh_running: '运行中',
+  dashboard_odh_error: '错误',
+  dashboard_odh_max_lag: '最大延迟',
+  dashboard_odh_min_lag: '最小延迟',
+  dashboard_odh_total_throughput: '总吞吐量',
+  dashboard_odh_events_sec: '事件/秒',
+  dashboard_odh_peak: '峰值',
+  dashboard_odh_data: '数据',
+  dashboard_odh_vs_last_hour: '较上一小时',
+  dashboard_odh_connected_dbs: '已连接数据库',
+  dashboard_odh_sources: '个数据源',
+  dashboard_odh_tbls: '张表',
+  dashboard_odh_api_requests: 'API 请求',
+  dashboard_odh_failed: '失败',
+  dashboard_odh_rate: '错误率',
+  dashboard_odh_avg_time: '平均耗时',
+  dashboard_odh_system_trends: '系统趋势',
+  dashboard_odh_throughput_chart: '吞吐量（事件/秒）',
+  dashboard_odh_api_chart: 'API 请求（请求/秒）',
+  dashboard_odh_no_data_in_range: '该时间范围内暂无数据',
+  dashboard_odh_top_tasks: '任务排行',
+  dashboard_odh_most_lagging: '延迟最高',
+  dashboard_odh_highest_throughput: '吞吐量最高',
+  dashboard_odh_top_n: '前 {0}',
+  dashboard_odh_task_name: '任务名称',
+  dashboard_odh_latency: '延迟',
+  dashboard_odh_throughput: '吞吐量',
+  dashboard_odh_no_task_data: '暂无任务数据',
+  dashboard_odh_agent_cluster: 'Agent 集群状态',
+  dashboard_odh_nodes_total: '共 {0} 个节点',
+  dashboard_odh_agent_name: 'Agent 名称',
+  dashboard_odh_status: '状态',
+  dashboard_odh_cpu_usage: 'CPU 使用率',
+  dashboard_odh_memory_usage: '内存使用率',
+  dashboard_odh_running_tasks: '运行中任务',
+  dashboard_odh_no_agents: '暂无 Agent',
+  dashboard_odh_just_now: '刚刚',
   // 元数据管理
   metadata_db: '所属库',
   metadata_change_name: '改名',
diff --git a/apps/daas/src/i18n/langs/zh-TW.js b/apps/daas/src/i18n/langs/zh-TW.js
index 3a81b1147..a740da68c 100644
--- a/apps/daas/src/i18n/langs/zh-TW.js
+++ b/apps/daas/src/i18n/langs/zh-TW.js
@@ -217,6 +217,45 @@ export default {
   dashboard_error: '校驗出錯的任務數',
   dashboard_no_data_here: '這裡沒用數據哦~',
   dashboard_no_statistics: '暫無{0}統計',
+  // Dashboard ODH
+  dashboard_odh_active_tasks: '活躍任務',
+  dashboard_odh_running: '運行中',
+  dashboard_odh_error: '錯誤',
+  dashboard_odh_max_lag: '最大延遲',
+  dashboard_odh_min_lag: '最小延遲',
+  dashboard_odh_total_throughput: '總吞吐量',
+  dashboard_odh_events_sec: '事件/秒',
+  dashboard_odh_peak: '峰值',
+  dashboard_odh_data: '數據',
+  dashboard_odh_vs_last_hour: '較上一小時',
+  dashboard_odh_connected_dbs: '已連接資料庫',
+  dashboard_odh_sources: '個資料源',
+  dashboard_odh_tbls: '張表',
+  dashboard_odh_api_requests: 'API 請求',
+  dashboard_odh_failed: '失敗',
+  dashboard_odh_rate: '錯誤率',
+  dashboard_odh_avg_time: '平均耗時',
+  dashboard_odh_system_trends: '系統趨勢',
+  dashboard_odh_throughput_chart: '吞吐量（事件/秒）',
+  dashboard_odh_api_chart: 'API 請求（請求/秒）',
+  dashboard_odh_no_data_in_range: '該時間範圍內暫無數據',
+  dashboard_odh_top_tasks: '任務排行',
+  dashboard_odh_most_lagging: '延遲最高',
+  dashboard_odh_highest_throughput: '吞吐量最高',
+  dashboard_odh_top_n: '前 {0}',
+  dashboard_odh_task_name: '任務名稱',
+  dashboard_odh_latency: '延遲',
+  dashboard_odh_throughput: '吞吐量',
+  dashboard_odh_no_task_data: '暫無任務數據',
+  dashboard_odh_agent_cluster: 'Agent 叢集狀態',
+  dashboard_odh_nodes_total: '共 {0} 個節點',
+  dashboard_odh_agent_name: 'Agent 名稱',
+  dashboard_odh_status: '狀態',
+  dashboard_odh_cpu_usage: 'CPU 使用率',
+  dashboard_odh_memory_usage: '記憶體使用率',
+  dashboard_odh_running_tasks: '運行中任務',
+  dashboard_odh_no_agents: '暫無 Agent',
+  dashboard_odh_just_now: '剛剛',
   // 元數據管理
   metadata_db: '所屬庫',
   metadata_change_name: '改名',
diff --git a/apps/daas/src/views/dashboard/Dashboard.vue b/apps/daas/src/views/dashboard/Dashboard.vue
index 810fad344..2c947a22d 100644
--- a/apps/daas/src/views/dashboard/Dashboard.vue
+++ b/apps/daas/src/views/dashboard/Dashboard.vue
@@ -11,16 +11,18 @@ import {
 import { fetchWorkers, getProcessInfo } from '@tap/api/src/core/workers'
 import PageContainer from '@tap/business/src/components/PageContainer.vue'
 import Chart from '@tap/component/src/chart/Chart.vue'
+import { useI18n } from '@tap/i18n'
 import { calcUnit } from '@tap/shared/src/number'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { STATUS_MAP as DASHBOARD_STATUS_MAP } from './const'
 
 const router = useRouter()
+const { t } = useI18n()
 
 // ── State ──────────────────────────────────────────────
 const loading = ref(false)
-const lastUpdated = ref('Just now')
+const lastUpdated = ref(t('dashboard_odh_just_now'))
 const dashboardData = ref<TaskDashboardVo | null>(null)
 let refreshTimer: ReturnType<typeof setInterval> | null = null
 
@@ -32,16 +34,16 @@ const trendsTimeRange = ref<'5min' | '1h' | '24h'>('24h')
 
 // Top Tasks state
 const topTaskTab = ref<'lagging' | 'throughput'>('lagging')
-const topTaskTabOptions = [
-  { label: 'Most Lagging', value: 'lagging' },
-  { label: 'Highest Throughput', value: 'throughput' },
-]
+const topTaskTabOptions = computed(() => [
+  { label: t('dashboard_odh_most_lagging'), value: 'lagging' },
+  { label: t('dashboard_odh_highest_throughput'), value: 'throughput' },
+])
 const topTaskLimit = ref<5 | 10 | 20>(5)
-const topTaskLimitOptions = [
-  { label: 'Top 5', value: 5 },
-  { label: 'Top 10', value: 10 },
-  { label: 'Top 20', value: 20 },
-]
+const topTaskLimitOptions = computed(() => [
+  { label: t('dashboard_odh_top_n', [5]), value: 5 },
+  { label: t('dashboard_odh_top_n', [10]), value: 10 },
+  { label: t('dashboard_odh_top_n', [20]), value: 20 },
+])
 
 // Cluster / Agent data
 interface AgentNode extends ClusterState {
@@ -78,26 +80,38 @@ const connectedDbs = computed(() => dashboardData.value?.summary?.connectedDbs)
 
 // ── KPI: API Requests ──────────────────────────────────
 const apiRequests = computed(() => dashboardData.value?.summary?.apiRequests)
+const hasApiTrendsData = computed(() => {
+  const trends = dashboardData.value?.trends?.apiRequests
+  return (trends?.ts?.length ?? 0) > 0
+})
 
 // ── System Trends: ECharts options ─────────────────────
 const throughputChartOption = computed(() => {
   const trends = dashboardData.value?.trends?.throughput
   if (!trends?.ts?.length) return buildAreaChartOption([], [], '#6366f1')
-  const xData = trends.ts.map((t) => formatTimeLabel(t))
-  return buildAreaChartOption(xData, trends.values, '#6366f1')
+  // const showSeconds = trendsTimeRange.value === '5min'
+  const xData = trends.ts.map((t) => formatTimeLabel(t, true))
+  const yData = trends.values.map((v: number) => Number(v.toFixed(2)))
+  return buildAreaChartOption(xData, yData, '#6366f1')
 })
 
 const apiChartOption = computed(() => {
   const trends = dashboardData.value?.trends?.apiRequests
   if (!trends?.ts?.length) return buildLineChartOption([], [], '#a855f7')
-  const xData = trends.ts.map((t) => formatTimeLabel(t))
-  return buildLineChartOption(xData, trends.values, '#a855f7')
+  // const showSeconds = apiTimeRange.value === '5m'
+  const xData = trends.ts.map((t) => formatTimeLabel(t, true))
+  const yData = trends.values.map((v: number) => Number(v.toFixed(2)))
+  return buildLineChartOption(xData, yData, '#a855f7')
 })
 
-function formatTimeLabel(ts: number): string {
+function formatTimeLabel(ts: number, showSeconds = false): string {
   const d = new Date(Number(`${ts}000`))
   const hh = String(d.getHours()).padStart(2, '0')
   const mm = String(d.getMinutes()).padStart(2, '0')
+  if (showSeconds) {
+    const ss = String(d.getSeconds()).padStart(2, '0')
+    return `${hh}:${mm}:${ss}`
+  }
   return `${hh}:${mm}`
 }
 
@@ -436,7 +450,9 @@ onBeforeUnmount(() => {
           <!-- 1) Active Tasks -->
           <div class="dashboard__card p-5">
             <div class="flex justify-content-between align-items-start mb-3">
-              <span class="fs-7 text-secondary fw-sub">Active Tasks</span>
+              <span class="fs-7 text-secondary fw-sub">{{
+                t('dashboard_odh_active_tasks')
+              }}</span>
               <div class="p-2 bg-gray-50 rounded-lg mt-n2">
                 <el-icon size="20" class="text-blue-500 align-top">
                   <i-lucide-activity />
@@ -448,16 +464,20 @@ onBeforeUnmount(() => {
             </div>
             <div class="flex flex-wrap gap-2">
               <span class="dashboard__tag dashboard__tag--emerald"
-                >Running {{ activeTasks?.running ?? 0 }}</span
+                >{{ t('dashboard_odh_running') }}
+                {{ activeTasks?.running ?? 0 }}</span
               >
               <span class="dashboard__tag dashboard__tag--red"
-                >Error {{ activeTasks?.error ?? 0 }}</span
+                >{{ t('dashboard_odh_error') }}
+                {{ activeTasks?.error ?? 0 }}</span
               >
               <span class="dashboard__tag dashboard__tag--slate"
-                >Max Lag {{ formatLag(activeTasks?.maxLag ?? 0) }}</span
+                >{{ t('dashboard_odh_max_lag') }}
+                {{ formatLag(activeTasks?.maxLag ?? 0) }}</span
               >
               <span class="dashboard__tag dashboard__tag--slate"
-                >Min Lag {{ formatLag(activeTasks?.minLag ?? 0) }}</span
+                >{{ t('dashboard_odh_min_lag') }}
+                {{ formatLag(activeTasks?.minLag ?? 0) }}</span
               >
             </div>
           </div>
@@ -465,7 +485,9 @@ onBeforeUnmount(() => {
           <!-- 2) Total Throughput -->
           <div class="dashboard__card p-5">
             <div class="flex justify-content-between align-items-start mb-3">
-              <span class="fs-7 text-secondary fw-sub">Total Throughput</span>
+              <span class="fs-7 text-secondary fw-sub">{{
+                t('dashboard_odh_total_throughput')
+              }}</span>
               <div class="p-2 bg-gray-50 rounded-lg mt-n2">
                 <el-icon class="text-indigo-500 align-top" size="20">
                   <i-lucide-trending-up />
@@ -476,14 +498,18 @@ onBeforeUnmount(() => {
               <span class="fs-2 font-semibold">{{
                 (throughput?.current ?? 0).toFixed(2)
               }}</span>
-              <span class="fs-7 text-secondary ml-1">events/sec</span>
+              <span class="fs-7 text-secondary ml-1">{{
+                t('dashboard_odh_events_sec')
+              }}</span>
             </div>
             <div class="flex flex-wrap gap-2 mt-3">
               <span class="dashboard__tag dashboard__tag--amber"
-                >Peak {{ (throughput?.peak ?? 0).toFixed(2) }}</span
+                >{{ t('dashboard_odh_peak') }}
+                {{ (throughput?.peak ?? 0).toFixed(2) }}</span
               >
               <span class="dashboard__tag dashboard__tag--indigo"
-                >Data {{ calcUnit(throughput?.dataRate ?? 0, 'b') }}/s</span
+                >{{ t('dashboard_odh_data') }}
+                {{ calcUnit(throughput?.dataRate ?? 0, 'b') }}/s</span
               >
             </div>
             <p
@@ -494,14 +520,17 @@ onBeforeUnmount(() => {
               "
             >
               {{ throughput.changeRate > 0 ? '+' : ''
-              }}{{ throughput.changeRate.toFixed(2) }}% vs last hour
+              }}{{ throughput.changeRate.toFixed(2) }}%
+              {{ t('dashboard_odh_vs_last_hour') }}
             </p>
           </div>
 
           <!-- 3) Connected DBs -->
           <div class="dashboard__card p-5">
             <div class="flex justify-content-between align-items-start mb-3">
-              <span class="fs-7 text-secondary fw-sub">Connected DBs</span>
+              <span class="fs-7 text-secondary fw-sub">{{
+                t('dashboard_odh_connected_dbs')
+              }}</span>
               <div class="p-2 bg-gray-50 rounded-lg mt-n2">
                 <el-icon class="text-teal-500 align-top" size="20">
                   <i-lucide-database />
@@ -512,14 +541,19 @@ onBeforeUnmount(() => {
               <span class="fs-2 font-semibold">{{
                 connectedDbs?.total ?? 0
               }}</span>
-              <span class="fs-7 text-secondary ml-1">sources</span>
+              <span class="fs-7 text-secondary ml-1">{{
+                t('dashboard_odh_sources')
+              }}</span>
             </div>
             <div class="flex flex-wrap gap-2 mt-3">
               <span
                 v-for="db in (connectedDbs?.items || []).slice(0, 3)"
                 :key="db.id"
                 class="dashboard__tag dashboard__tag--blue"
-                >{{ db.name }} <strong>{{ db.tableCount }} tbls</strong></span
+                >{{ db.name }}
+                <strong
+                  >{{ db.tableCount }} {{ t('dashboard_odh_tbls') }}</strong
+                ></span
               >
             </div>
           </div>
@@ -528,7 +562,9 @@ onBeforeUnmount(() => {
           <div class="dashboard__card p-5">
             <div class="flex justify-content-between align-items-start mb-3">
               <div class="flex align-items-center gap-2">
-                <span class="fs-7 text-secondary fw-sub">API Requests</span>
+                <span class="fs-7 text-secondary fw-sub">{{
+                  t('dashboard_odh_api_requests')
+                }}</span>
                 <el-segmented
                   v-model="apiTimeRange"
                   :options="['5m', '1h', '24h']"
@@ -547,13 +583,16 @@ onBeforeUnmount(() => {
             </div>
             <div class="flex flex-wrap gap-2">
               <span class="dashboard__tag dashboard__tag--red"
-                >Failed {{ apiRequests?.failed ?? 0 }}</span
+                >{{ t('dashboard_odh_failed') }}
+                {{ apiRequests?.failed ?? 0 }}</span
               >
               <span class="dashboard__tag dashboard__tag--amber"
-                >Rate {{ apiRequests?.errorRate ?? 0 }}%</span
+                >{{ t('dashboard_odh_rate') }}
+                {{ apiRequests?.errorRate ?? 0 }}%</span
               >
               <span class="dashboard__tag dashboard__tag--indigo"
-                >Avg Time {{ apiRequests?.avgTime ?? 0 }}ms</span
+                >{{ t('dashboard_odh_avg_time') }}
+                {{ apiRequests?.avgTime ?? 0 }}ms</span
               >
             </div>
           </div>
@@ -562,7 +601,9 @@ onBeforeUnmount(() => {
         <!-- ═══ System Trends ═══ -->
         <div class="dashboard__card p-5 mb-6">
           <div class="flex justify-content-between align-items-center mb-5">
-            <h2 class="fs-5 font-semibold m-0">System Trends</h2>
+            <h2 class="fs-5 font-semibold m-0">
+              {{ t('dashboard_odh_system_trends') }}
+            </h2>
             <el-segmented
               v-model="trendsTimeRange"
               :options="['5min', '1h', '24h']"
@@ -573,7 +614,7 @@ onBeforeUnmount(() => {
           <div class="grid grid-cols-2 gap-6">
             <div>
               <p class="fs-7 text-secondary mb-3 mt-0">
-                Throughput (events/sec)
+                {{ t('dashboard_odh_throughput_chart') }}
               </p>
               <div class="dashboard__trend-chart">
                 <Chart type="line" :extend="throughputChartOption" />
@@ -581,10 +622,20 @@ onBeforeUnmount(() => {
             </div>
             <div>
               <p class="fs-7 text-secondary mb-3 mt-0">
-                API Requests (req/sec)
+                {{ t('dashboard_odh_api_chart') }}
               </p>
               <div class="dashboard__trend-chart">
-                <Chart type="line" :extend="apiChartOption" />
+                <template v-if="hasApiTrendsData">
+                  <Chart type="line" :extend="apiChartOption" />
+                </template>
+                <div
+                  v-else
+                  class="flex align-items-center justify-content-center h-100"
+                >
+                  <span class="fs-7 text-secondary">{{
+                    t('dashboard_odh_no_data_in_range')
+                  }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -594,7 +645,9 @@ onBeforeUnmount(() => {
         <div class="dashboard__card p-5 mb-6">
           <div class="flex justify-content-between align-items-center mb-4">
             <div class="flex align-items-center gap-3">
-              <h2 class="fs-5 font-semibold m-0">Top Tasks</h2>
+              <h2 class="fs-5 font-semibold m-0">
+                {{ t('dashboard_odh_top_tasks') }}
+              </h2>
               <el-segmented
                 v-model="topTaskTab"
                 :options="topTaskTabOptions"
@@ -614,9 +667,9 @@ onBeforeUnmount(() => {
               <thead>
                 <tr>
                   <th class="text-start">#</th>
-                  <th class="text-start">Task Name</th>
-                  <th class="text-end">Latency</th>
-                  <th class="text-end">Throughput</th>
+                  <th class="text-start">{{ t('dashboard_odh_task_name') }}</th>
+                  <th class="text-end">{{ t('dashboard_odh_latency') }}</th>
+                  <th class="text-end">{{ t('dashboard_odh_throughput') }}</th>
                 </tr>
               </thead>
               <tbody>
@@ -637,27 +690,39 @@ onBeforeUnmount(() => {
               </tbody>
             </table>
           </div>
-          <el-empty v-else description="No task data" :image-size="60" />
+          <el-empty
+            v-else
+            :description="t('dashboard_odh_no_task_data')"
+            :image-size="60"
+          />
         </div>
 
         <!-- ═══ Agent Cluster Status ═══ -->
         <div class="dashboard__card p-5">
           <div class="flex justify-content-between align-items-center mb-4">
-            <h2 class="fs-5 font-semibold m-0">Agent Cluster Status</h2>
-            <span class="dashboard__nodes-badge"
-              >{{ agentNodes.length }} Nodes Total</span
-            >
+            <h2 class="fs-5 font-semibold m-0">
+              {{ t('dashboard_odh_agent_cluster') }}
+            </h2>
+            <span class="dashboard__nodes-badge">{{
+              t('dashboard_odh_nodes_total', [agentNodes.length])
+            }}</span>
           </div>
 
           <div v-if="agentNodes.length" class="dashboard__table-wrap">
             <table class="dashboard__table w-100">
               <thead>
                 <tr>
-                  <th class="text-start">Agent Name</th>
-                  <th class="text-start">Status</th>
-                  <th class="text-start">CPU Usage</th>
-                  <th class="text-start">Memory Usage</th>
-                  <th class="text-end">Running Tasks</th>
+                  <th class="text-start">
+                    {{ t('dashboard_odh_agent_name') }}
+                  </th>
+                  <th class="text-start">{{ t('dashboard_odh_status') }}</th>
+                  <th class="text-start">{{ t('dashboard_odh_cpu_usage') }}</th>
+                  <th class="text-start">
+                    {{ t('dashboard_odh_memory_usage') }}
+                  </th>
+                  <th class="text-end">
+                    {{ t('dashboard_odh_running_tasks') }}
+                  </th>
                 </tr>
               </thead>
               <tbody>
@@ -737,7 +802,11 @@ onBeforeUnmount(() => {
               </tbody>
             </table>
           </div>
-          <el-empty v-else description="No agents found" :image-size="60" />
+          <el-empty
+            v-else
+            :description="t('dashboard_odh_no_agents')"
+            :image-size="60"
+          />
         </div>
       </div>
     </section>

From 4383000162f02ccace07c88355c1384450c3f07a Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Mon, 13 Apr 2026 15:46:00 +0800
Subject: [PATCH 5/5] refactor: update Dashboard.vue

---
 apps/daas/src/views/dashboard/Dashboard.vue | 17 ++++++++++++++++-
 packages/api/src/core/task.ts               |  1 +
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/apps/daas/src/views/dashboard/Dashboard.vue b/apps/daas/src/views/dashboard/Dashboard.vue
index 2c947a22d..2077ea20d 100644
--- a/apps/daas/src/views/dashboard/Dashboard.vue
+++ b/apps/daas/src/views/dashboard/Dashboard.vue
@@ -212,6 +212,15 @@ const topTasks = computed<TaskDashboardTopTask[]>(() => {
   return (list || []).slice(0, topTaskLimit.value)
 })
 
+function goToMonitor(task: TaskDashboardTopTask) {
+  const route =
+    task.syncType === 'migrate'
+      ? { name: 'MigrationMonitor', params: { id: task.taskId } }
+      : { name: 'TaskMonitor', params: { id: task.taskId } }
+  const href = router.resolve(route).href
+  window.open(href, '_blank')
+}
+
 function latencyClass(ms: number): string {
   const s = ms / 1000
   if (s > 60) return 'badge--red'
@@ -675,7 +684,13 @@ onBeforeUnmount(() => {
               <tbody>
                 <tr v-for="(task, idx) in topTasks" :key="task.taskId">
                   <td class="text-secondary">{{ idx + 1 }}</td>
-                  <td class="font-semibold">{{ task.taskName }}</td>
+                  <td class="font-semibold">
+                    <a
+                      class="color-primary cursor-pointer text-decoration-none"
+                      @click="goToMonitor(task)"
+                      >{{ task.taskName }}</a
+                    >
+                  </td>
                   <td class="text-end">
                     <span
                       class="dashboard__badge"
diff --git a/packages/api/src/core/task.ts b/packages/api/src/core/task.ts
index 9cadd7c3c..e92082105 100644
--- a/packages/api/src/core/task.ts
+++ b/packages/api/src/core/task.ts
@@ -490,6 +490,7 @@ export interface TaskDashboardTrendSeries {
 export interface TaskDashboardTopTask {
   taskId: string
   taskName: string
+  syncType?: string
   latency: number
   throughput: number
 }