From 8bcb68d0dbd97b49307cff9809b2b8c1815123b3 Mon Sep 17 00:00:00 2001 From: GavinXiao <2749984520@qq.com> Date: Tue, 28 Apr 2026 19:48:26 +0800 Subject: [PATCH] fix(TAP-11299): The API monitoring page has been enhanced to include monitoring of the connection count from the API Server to the database where APIs are published --- apps/daas/src/i18n/langs/en.js | 4 + apps/daas/src/i18n/langs/zh-CN.js | 4 + apps/daas/src/i18n/langs/zh-TW.js | 4 + .../views/api-page/api-monitor/ApiDetail.vue | 17 ++ .../api-page/api-monitor/ServerDetail.vue | 146 +++++++++++++++++- .../api-page/api-monitor/ServiceCard.vue | 12 ++ packages/api/src/core/monitor-server.ts | 21 +++ packages/api/src/core/settings.ts | 15 ++ packages/business/src/locale/lang/en.js | 2 + packages/business/src/locale/lang/zh-CN.js | 2 + packages/business/src/locale/lang/zh-TW.js | 2 + .../src/views/setting/AlarmSetting.vue | 2 + packages/dag/src/locale/lang/en.js | 1 + packages/dag/src/locale/lang/zh-CN.js | 1 + packages/dag/src/locale/lang/zh-TW.js | 1 + packages/i18n/src/locale/lang/en.js | 1 + packages/i18n/src/locale/lang/zh-CN.js | 1 + packages/i18n/src/locale/lang/zh-TW.js | 1 + 18 files changed, 236 insertions(+), 1 deletion(-) diff --git a/apps/daas/src/i18n/langs/en.js b/apps/daas/src/i18n/langs/en.js index 21d7ddb000..5e18cacdc6 100644 --- a/apps/daas/src/i18n/langs/en.js +++ b/apps/daas/src/i18n/langs/en.js @@ -2347,6 +2347,10 @@ export default { api_monitor_db_cost_trend: 'Database Cost Trend', // Server Detail Page + api_monitor_connection_pool: 'Connection Pool Usage', + api_monitor_connection_pool_max: 'Maximum Connections', + api_monitor_connection_pool_used: 'Used Connections', + api_monitor_connection_pool_wait_queue: 'Blocked Waiting Connections', api_monitor_server_detail: 'Server Details', api_monitor_cpu_usage: 'CPU Usage', api_monitor_memory_usage: 'Memory', diff --git a/apps/daas/src/i18n/langs/zh-CN.js b/apps/daas/src/i18n/langs/zh-CN.js index 36e6a33ddd..f9c37b5267 100644 --- a/apps/daas/src/i18n/langs/zh-CN.js +++ b/apps/daas/src/i18n/langs/zh-CN.js @@ -2227,6 +2227,10 @@ export default { api_monitor_db_cost_trend: '数据库耗时趋势', // Server 详情页 + api_monitor_connection_pool: '连接池使用情况', + api_monitor_connection_pool_max: '连接池最大连接数', + api_monitor_connection_pool_used: '已用连接数', + api_monitor_connection_pool_wait_queue: '阻塞等待连接数', api_monitor_server_detail: 'Server 详情', api_monitor_cpu_usage: 'CPU 使用率', api_monitor_memory_usage: '内存使用率', diff --git a/apps/daas/src/i18n/langs/zh-TW.js b/apps/daas/src/i18n/langs/zh-TW.js index 3a81b1147e..143b084843 100644 --- a/apps/daas/src/i18n/langs/zh-TW.js +++ b/apps/daas/src/i18n/langs/zh-TW.js @@ -2210,6 +2210,10 @@ export default { api_monitor_db_cost_trend: '資料庫耗時趨勢', // Server 詳情頁 + api_monitor_connection_pool: '連接池使用情況', + api_monitor_connection_pool_max: '連接池最大連接數', + api_monitor_connection_pool_used: '已用連接數', + api_monitor_connection_pool_wait_queue: '阻塞等待連接數', api_monitor_server_detail: 'Server 詳情', api_monitor_cpu_usage: 'CPU 使用率', api_monitor_memory_usage: '記憶體使用率', diff --git a/apps/daas/src/views/api-page/api-monitor/ApiDetail.vue b/apps/daas/src/views/api-page/api-monitor/ApiDetail.vue index a390666d44..f87dd08e2a 100644 --- a/apps/daas/src/views/api-page/api-monitor/ApiDetail.vue +++ b/apps/daas/src/views/api-page/api-monitor/ApiDetail.vue @@ -321,6 +321,23 @@ const latencyChartOption = computed(() => { borderWidth: 2, }, }, + { + name: 'Max', + type: 'line', + data: apiChart.value?.maxDelay || [], + smooth: true, + symbol: 'circle', + showSymbol: false, + lineStyle: { + color: '#8b5cf6', + width: 2, + }, + itemStyle: { + color: '#8b5cf6', + borderColor: '#fff', + borderWidth: 2, + }, + }, ], } }) diff --git a/apps/daas/src/views/api-page/api-monitor/ServerDetail.vue b/apps/daas/src/views/api-page/api-monitor/ServerDetail.vue index fd6b732655..c086d9e3db 100644 --- a/apps/daas/src/views/api-page/api-monitor/ServerDetail.vue +++ b/apps/daas/src/views/api-page/api-monitor/ServerDetail.vue @@ -3,9 +3,10 @@ import { fetchMonitorServerApi, fetchMonitorServerChart, fetchMonitorServerDetail, + fetchConnectionWithName, type ServerChart, type ServerDetail, - type ServerWorker, + type ServerWorker, type ConnectionWithName, } from '@tap/api/src/core/monitor-server' import { usePagination, useRequest } from '@tap/api/src/request' import PageContainer from '@tap/business/src/components/PageContainer.vue' @@ -42,6 +43,7 @@ const router = useRouter() const { t } = useI18n() const serverId = route.params.id as string const serverDetail = ref() +const connectionWithName = ref() const serverChart = ref() const apiList = ref() const workerData = ref() @@ -156,6 +158,7 @@ const handleWorkerListSortChange = ({ } // 时间周期选择 - 从 route.query 中恢复 +const connectionId = ref((route.query.connectionId as string) || '') const timeRange = ref((route.query.timeRange as string) || '1h') const customTimeRange = ref<[number, number] | null>(null) const timeRangeParams = ref<{ startAt: number; endAt: number } | null>(null) @@ -261,8 +264,15 @@ const { const { run: runFetch } = useRequest( async () => { + if (!connectionWithName.value || connectionWithName.value.length <= 0) { + connectionWithName.value = await fetchConnectionWithName(serverId) + if (!connectionId.value) { + connectionId.value = connectionWithName.value[0].id + } + } const params = getActualTimeRange() params.serverId = serverId + params.connectionId = connectionId.value refreshApiList() serverDetail.value = await fetchMonitorServerDetail(params) timeRangeParams.value = { @@ -381,6 +391,107 @@ const cpuChartOption = computed(() => ({ }, ], })) +// Chart options +const connectionPollChartOption = computed(() => ({ + grid: { + left: 0, + right: 0, + top: 0, + bottom: 0, + outerBounds: { + left: 0, + top: 28, + right: 10, + bottom: 0, + }, + outerBoundsMode: 'auto', + outerBoundsContain: 'auto', + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: serverChart.value?.usage.ts || [], + axisLabel: { + formatter: (value: number) => dayjs.unix(value).format('HH:mm'), + }, + }, + yAxis: { + type: 'value', + }, + tooltip: { + borderRadius: 12, + borderColor: '#dee0e3', + extraCssText: + 'box-shadow: 0px 4px 16px 4px rgba(31,35,41,0.03),0px 4px 8px 0px rgba(31,35,41,0.02),0px 2px 4px -4px rgba(31,35,41,0.02);', + padding: [8, 12], + trigger: 'axis', + formatter: (params: any) => { + const timestamp = params[0]?.axisValue + const timeStr = dayjs.unix(timestamp).format('MM-DD HH:mm:ss') + let result = `${timeStr}
` + params.forEach((param: any) => { + result += `${param.marker}${param.seriesName}: ${isNumber(param.value) ? `${param.value}` : '--'}
` + }) + return result + }, + }, + legend: { + data: ['Max Connection ', 'Used Connection', 'Connection Pool Wait Queue'], + top: 0, + right: 0, + type: 'scroll', + }, + series: [ + { + name: t('api_monitor_connection_pool_max'), + type: 'line', + data: serverChart.value?.poolUsage.poolMaxConnections || [], + smooth: true, + showSymbol: false, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#3b82f6', + width: 2, + }, + itemStyle: { + color: '#3b82f6', + }, + }, + { + name: t('api_monitor_connection_pool_used'), + type: 'line', + data: serverChart.value?.poolUsage.poolUsedConnections || [], + smooth: true, + showSymbol: false, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#10b981', + width: 1, + }, + itemStyle: { + color: '#10b981', + }, + }, + { + name: t('api_monitor_connection_pool_wait_queue'), + type: 'line', + data: serverChart.value?.poolUsage.poolQueueSize || [], + smooth: true, + showSymbol: false, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#ef4444', + width: 1, + }, + itemStyle: { + color: '#ef4444', + }, + }, + ], +})) const memoryChartOption = computed(() => ({ grid: { @@ -893,6 +1004,10 @@ const handleBack = () => { }, }) } + +const handleChangeConnectionId = (value: string) => { + connectionId.value = value +}