fix(TAP-11299): [to dmp] 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

@@ -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',

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: '内存使用率',

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: '記憶體使用率',

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,
+        },
+      },
     ],
   }
 })

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<ServerDetail>()
+const connectionWithName = ref<ConnectionWithName>()
 const serverChart = ref<ServerChart>()
 const apiList = ref<any>()
 const workerData = ref<ServerWorker>()
@@ -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<EChartsOption>(() => ({
     },
   ],
 }))
+// Chart options
+const connectionPollChartOption = computed<EChartsOption>(() => ({
+  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}<br/>`
+      params.forEach((param: any) => {
+        result += `${param.marker}${param.seriesName}: ${isNumber(param.value) ? `${param.value}` : '--'}<br/>`
+      })
+      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<EChartsOption>(() => ({
   grid: {
@@ -893,6 +1004,10 @@ const handleBack = () => {
     },
   })
 }
+
+const handleChangeConnectionId = (value: string) => {
+  connectionId.value = value
+}
 </script>
 
 <template>
@@ -1075,6 +1190,35 @@ const handleBack = () => {
         </div>
       </div>
 
+      <!-- Charts Section -->
+      <div class="charts-section">
+        <!-- connection pool Usage Trend -->
+        <div class="chart-card border">
+          <h3 class="chart-title">
+            <!-- <span class="chart-legend-dot chart-legend-blue" /> -->
+            {{ t('api_monitor_connection_pool') }}
+          </h3>
+          <div class="flex align-center gap-4">
+            <el-select
+                :model-value="connectionId"
+                :placeholder="t('api_monitor_time_range_placeholder')"
+                style="width: 160px"
+                @update:model-value="handleChangeConnectionId"
+            >
+              <el-option
+                  v-for="option in connectionWithName"
+                  :key="option.id"
+                  :label="option.name"
+                  :value="option.id"
+              />
+            </el-select>
+          </div>
+          <div class="chart-container">
+            <VChart :option="connectionPollChartOption" :autoresize="true" />
+          </div>
+        </div>
+      </div>
+
       <!-- Top API Section -->
       <div class="top-api-section border">
         <div class="section-header mb-3 flex items-center justify-between">

apps/daas/src/views/api-page/api-monitor/ServiceCard.vue

@@ -136,6 +136,12 @@ const handleViewDetails = () => {
           </div>
           <div v-else class="stat-value">0</div>
         </div>
+        <div class="stat-item">
+          <div class="stat-label">
+            {{ $t('api_monitor_connection_pool_max') }}
+          </div>
+          <div class="stat-value">{{ data.poolMaxConnections ?? '--' }}</div>
+        </div>
       </div>
       <div class="stat-group">
         <div class="stat-item">
@@ -150,6 +156,12 @@ const handleViewDetails = () => {
           </div>
           <div class="stat-value">{{ data.p99 ?? '--' }}</div>
         </div>
+        <div class="stat-item">
+          <div class="stat-label">
+            {{ $t('api_monitor_connection_pool_used') }}
+          </div>
+          <div class="stat-value">{{ data.poolUsedConnections ?? '--' }}</div>
+        </div>
       </div>
     </div>
 

packages/api/src/core/monitor-server.ts

@@ -93,6 +93,11 @@ export interface ApiOverview {
   p99?: number | string
 }
 
+export interface ConnectionWithName {
+  id: string,
+  name: string
+}
+
 export interface ServerDetail {
   queryFrom: number
   queryEnd: number
@@ -124,6 +129,15 @@ export interface ServerChart {
     minCpuUsage: number[]
     maxMemoryUsage: number[]
     minMemoryUsage: number[]
+    poolUsedConnections: number[]
+    poolMaxConnections: number[]
+    poolQueueSize: number[]
+    ts: number[]
+  }
+  poolUsage: {
+    poolUsedConnections: number[]
+    poolMaxConnections: number[]
+    poolQueueSize: number[]
     ts: number[]
   }
   request: {
@@ -285,6 +299,10 @@ export async function fetchMonitorServerList(params?: Params) {
   return data
 }
 
+export async function fetchConnectionWithName(serverId: string) {
+  return await requestClient.get<ConnectionWithName>(`api/Connections/allConnections/${serverId}`, {})
+}
+
 export async function fetchMonitorServerDetail(params?: Params) {
   const data = await requestClient.get<ServerDetail>(`${BASE_URL}/detail`, {
     params,
@@ -315,6 +333,9 @@ export function fetchMonitorServerChart(params?: Params) {
         maxCpuUsage: [],
         minCpuUsage: [],
         minMemoryUsage: [],
+        poolUsedConnections: [],
+        poolMaxConnections: [],
+        poolQueueSize: [],
         ts: [],
       },
       request: {

packages/api/src/core/settings.ts

@@ -18,6 +18,21 @@ export interface Setting {
   user_visible: boolean
   value: string
   open?: boolean
+  children?: SettingChild[]
+}
+
+export interface SettingChild {
+  prop?: string
+  key?: string
+  key_label?: string
+  type?: 'switch' | 'text' | 'number' | 'select'
+  enums?: any[]
+  min?: number
+  max?: number
+  default_value?: any
+  activeValue?: any
+  inactiveValue?: any
+  mask?: any
 }
 
 export function fetchSettings() {

packages/business/src/locale/lang/en.js

@@ -1747,4 +1747,6 @@ export default {
     'Currently in testing. We are continuously optimizing the experience.',
   public_connector_alpha_tip:
     'Under active development. Some features may still be incomplete.',
+  packages_business_api_server_connection_pool_deficiency_warn: 'When the number of connections in any API Server connection pool exceeds the alarm threshold',
+  packages_business_api_server_connection_pool_idle_warn: 'When the number of connections in the connection pool of any API Server falls below the alarm threshold',
 }

packages/business/src/locale/lang/zh-CN.js

@@ -1554,4 +1554,6 @@ export default {
     '若任务名冲突则替换任务，连接名冲突则复用系统中已有连接。',
   public_connector_beta_tip: '正在测试阶段，我们正在不断优化体验',
   public_connector_alpha_tip: '正在持续开发中，部分功能可能还在完善',
+  packages_business_api_server_connection_pool_deficiency_warn: '当任一API Server 连接池连接数超过告警阈值时',
+  packages_business_api_server_connection_pool_idle_warn: '当任一API Server 连接池连接数低于告警阈值时',
 }

packages/business/src/locale/lang/zh-TW.js

@@ -1543,4 +1543,6 @@ export default {
     '若任務名衝突則替換任務，連接名衝突則重用系統中已有連接。',
   public_connector_beta_tip: '正在測試階段，我們正在不斷優化體驗',
   public_connector_alpha_tip: '正在持續開發中，部分功能可能還在完善',
+  packages_business_api_server_connection_pool_deficiency_warn: '當任一API Server 連接池連接數超過告警閾值時',
+  packages_business_api_server_connection_pool_idle_warn: '當任一API Server 連接池連接數低於告警閾值時',
 }

packages/business/src/views/setting/AlarmSetting.vue

@@ -229,6 +229,8 @@ const keyMapping = reactive({
   API_SERVER_P95_WARN: t('packages_business_api_server_p95_warn'),
   API_SERVER_P99_WARN: t('packages_business_api_server_p99_warn'),
   API_SERVER_ERROR_RATE_WARN: t('packages_business_api_server_error_rate_warn'),
+  API_SERVER_CONNECTION_POOL_DEFICIENCY_WARN: t('packages_business_api_server_connection_pool_deficiency_warn'),
+  API_SERVER_CONNECTION_POOL_IDLE_WARN: t('packages_business_api_server_connection_pool_idle_warn'),
 })
 const variables = ref([])
 

packages/dag/src/locale/lang/en.js

@@ -1164,6 +1164,7 @@ export default {
   //Api server
   public_api_name: 'API Name',
   public_api_server_name: 'API Server Name',
+  public_datasource_name: 'Datasource name',
   public_api_worker_name: 'API Server Worker Name',
   public_api_threshold: 'Threshold',
   public_api_threshold_unit: 'Unit',

packages/dag/src/locale/lang/zh-CN.js

@@ -1016,6 +1016,7 @@ export default {
   //Api server
   public_api_name: 'API 名称',
   public_api_server_name: 'API服务名称',
+  public_datasource_name: '数据源连接名称',
   public_api_worker_name: 'API服务工作进程',
   public_api_threshold: '阈值',
   public_api_threshold_unit: '单位',