From c45cf6aaffe125cef497c5be58d0d22dfc66b053 Mon Sep 17 00:00:00 2001 From: ningyv <1793599591@qq.com> Date: Tue, 29 Apr 2025 18:23:51 +0800 Subject: [PATCH] feature/1.8-Improve system observability --- .../packages/core/src/const/system/const.tsx | 2 +- .../core/src/pages/serviceLogs/LogDetail.tsx | 68 +-------- .../src/pages/serviceLogs/ServiceLogs.tsx | 136 ++++++++---------- .../charts/ServiceAreaChart.tsx | 19 +++ .../serviceOverview/charts/ServiceBarChar.tsx | 19 +++ .../rankingList/RankingList.tsx | 6 +- 6 files changed, 105 insertions(+), 145 deletions(-) diff --git a/frontend/packages/core/src/const/system/const.tsx b/frontend/packages/core/src/const/system/const.tsx index cabbf89a..45935f93 100644 --- a/frontend/packages/core/src/const/system/const.tsx +++ b/frontend/packages/core/src/const/system/const.tsx @@ -599,7 +599,7 @@ export const AI_SERVICE_LOG_LIST: PageProColumns[] = [ }, { title: '消费者', - dataIndex: ['consumers', 'name'], + dataIndex: ['consumer', 'name'], ellipsis: true }, { diff --git a/frontend/packages/core/src/pages/serviceLogs/LogDetail.tsx b/frontend/packages/core/src/pages/serviceLogs/LogDetail.tsx index eb393321..a3b222ad 100644 --- a/frontend/packages/core/src/pages/serviceLogs/LogDetail.tsx +++ b/frontend/packages/core/src/pages/serviceLogs/LogDetail.tsx @@ -260,46 +260,11 @@ const LogDetail = ({ selectedRow, serviceType, serviceId, teamId }: LogDetailPro fetchData>('service/log/ai', { method: 'GET', eoParams: { log: selectedRow?.id, service: serviceId, team: teamId }, - eoTransformKeys: ['is_system_consumer', 'log_time'], - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + eoTransformKeys: ['is_system_consumer', 'log_time'] }).then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { - // const result = data.log - const result = { - id: '123', - api: { - id: '222', - name: 'api222' - }, - logTime: '2023-01-01 00:00:00', - consumer: { - id: '333', - name: 'consumers333' - }, - isSystemConsumer: false, - status: '200', - provider: { - id: '444', - name: 'provider444' - }, - model: 'model1', - ip: '1.1.1.1', - request: { - header: - '{\n "mcpServers": {\n "APIPark/test1234": {\n "url": "http://swagger-demo.apinto.com/openapi/v1/mcp/service/c8bc25ca-8855-45cd-8bcc-239195b6c346/sse?apikey={your_api_key}"\n }\n }\n}', - body: '{\n "mcpServers": {\n "APIPark/44444": {\n "url": "http://swagger-demo.apinto.com/openapi/v1/mcp/service/c8bc25ca-8855-45cd-8bcc-239195b6c346/sse?apikey={your_api_key}"\n }\n }\n}', - origin: '123', - token: 0 - }, - response: { - header: - '{\n "mcpServers": {\n "APIPark/44444": {\n "url": "http://swagger-demo.apinto.com/openapi/v1/mcp/service/c8bc25ca-8855-45cd-8bcc-239195b6c346/sse?apikey={your_api_key}"\n }\n }\n}', - body: '{\n "mcpServers": {\n "APIPark/44444": {\n "url": "http://swagger-demo.apinto.com/openapi/v1/mcp/service/c8bc25ca-8855-45cd-8bcc-239195b6c346/sse?apikey={your_api_key}"\n }\n }\n}', - origin: '312', - token: '333' - } - } + const result = data.log getAIServiceDescriptionItemsList({ time: result.logTime, api: result.api.name, @@ -329,36 +294,11 @@ const LogDetail = ({ selectedRow, serviceType, serviceId, teamId }: LogDetailPro fetchData>('service/log/rest', { method: 'GET', eoParams: { log: selectedRow?.id, service: serviceId, team: teamId }, - eoTransformKeys: ['is_system_consumer', 'log_time'], - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + eoTransformKeys: ['is_system_consumer', 'log_time'] }).then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { - const result = { - id: '123', - api: { - id: '222', - name: 'api222' - }, - logTime: '2023-01-01 00:00:00', - consumer: { - id: '333', - name: 'consumers333' - }, - isSystemConsumer: true, - status: '200', - ip: '1.1.1.1', - request: { - header: - '{\n "mcpServers": {\n "APIPark/test1234": {\n "url": "http://swagger-demo.apinto.com/openapi/v1/mcp/service/c8bc25ca-8855-45cd-8bcc-239195b6c346/sse?apikey={your_api_key}"\n }\n }\n}', - origin: '123' - }, - response: { - header: - '{\n "mcpServers": {\n "APIPark/44444": {\n "url": "http://swagger-demo.apinto.com/openapi/v1/mcp/service/c8bc25ca-8855-45cd-8bcc-239195b6c346/sse?apikey={your_api_key}"\n }\n }\n}', - origin: '312' - } - } + const result = data.log getRestServiceDescriptionItemsList({ time: result.logTime, api: result.api.name, diff --git a/frontend/packages/core/src/pages/serviceLogs/ServiceLogs.tsx b/frontend/packages/core/src/pages/serviceLogs/ServiceLogs.tsx index 0fc440ed..e51ea041 100644 --- a/frontend/packages/core/src/pages/serviceLogs/ServiceLogs.tsx +++ b/frontend/packages/core/src/pages/serviceLogs/ServiceLogs.tsx @@ -11,7 +11,7 @@ import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const' import { useFetch } from '@common/hooks/http' import LogDetail, { HttpStatusColor } from './LogDetail' import { useParams } from 'react-router-dom' -import { ActionType } from '@ant-design/pro-components' +import { ActionType, ParamsType } from '@ant-design/pro-components' import { getTime } from '@dashboard/utils/dashboard' export type LogItem = { @@ -66,9 +66,7 @@ const ServiceLogs = ({ serviceType }: { serviceType: 'aiService' | 'restService' if (x.dataIndex === 'status') { x.render = (text: any, record: any) => ( <> -
- {renderStatusWithColor(record.status)} -
+
{renderStatusWithColor(record.status)}
) } @@ -79,73 +77,62 @@ const ServiceLogs = ({ serviceType }: { serviceType: 'aiService' | 'restService' }) }, [state.language]) - /** - * 根据状态码返回对应颜色的文本 - * @param status 状态 - * @returns - */ - const renderStatusWithColor = (status: string | number) => { - // 获取状态码首位数字 - const firstDigit = status.toString().charAt(0) - let color = '' - switch (firstDigit) { - case '2': - color = HttpStatusColor.SUCCESS - break - case '4': - color = HttpStatusColor.CLIENT_ERROR - break - case '5': - color = HttpStatusColor.SERVER_ERROR - break - default: - break - } - return color ? {status} : status + /** + * 根据状态码返回对应颜色的文本 + * @param status 状态 + * @returns + */ + const renderStatusWithColor = (status: string | number) => { + // 获取状态码首位数字 + const firstDigit = status.toString().charAt(0) + let color = '' + switch (firstDigit) { + case '2': + color = HttpStatusColor.SUCCESS + break + case '4': + color = HttpStatusColor.CLIENT_ERROR + break + case '5': + color = HttpStatusColor.SERVER_ERROR + break + default: + break } + return color ? {status} : status + } /** * 获取 AI 列表数据 * @param dataType * @returns */ - const getAiServiceLogList = () => { + const getAiServiceLogList = ( + params: ParamsType & { + pageSize?: number | undefined + current?: number | undefined + keyword?: string | undefined + } + ) => { return fetchData>(`service/logs/ai`, { method: 'GET', eoParams: { service: serviceId, team: teamId, start: timeRange?.start, - end: timeRange?.end + end: timeRange?.end, + page: params?.current, + page_size:params?.pageSize }, - eoTransformKeys: ['log_time', 'response_time', 'token_per_second'], - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + eoTransformKeys: ['log_time', 'response_time', 'token_per_second'] }) .then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { // 保存数据 return { - data: [ - { - id: '123123', - api: { - id: '444', - name: 'api1' - }, - ip: '127.0.0.1', - status: 200, - logTime: '2023-01-01 00:00:00', - token: 123, - consumers: { - id: '333', - name: 'consumers333' - }, - model: 'GPT444', - tokenPerSecond: '123m/s' - } - ], - total: 1, + data: data.logs, + total: data.total, success: true } } else { @@ -162,44 +149,33 @@ const ServiceLogs = ({ serviceType }: { serviceType: 'aiService' | 'restService' * @param dataType * @returns */ - const getRestServiceLogList = () => { + const getRestServiceLogList = ( + params: ParamsType & { + pageSize?: number | undefined + current?: number | undefined + keyword?: string | undefined + } + ) => { + console.log('params===', params) return fetchData>(`service/logs/rest`, { method: 'GET', eoParams: { service: serviceId, team: teamId, start: timeRange?.start, - end: timeRange?.end + end: timeRange?.end, + page: params?.current, + page_size:params?.pageSize }, - eoTransformKeys: ['log_time', 'response_time', 'token_per_second'], - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + eoTransformKeys: ['log_time', 'response_time', 'token_per_second'] }) .then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { - const data = [] - for (let i = 0; i < 100; i++) { - data.push({ - id: '123123' + i, - api: { - id: '444' + i, - name: 'api1' + i - }, - ip: '127.0.0.1', - status: 200, - logTime: '2023-01-01 00:00:00', - responseTime: '1111-01-01 00:00:00', - traffic: '123', - consumers: { - id: '123' + i, - name: 'consumers222' + i - } - }) - } // 保存数据 return { - data: data, - total: data.length, + data: data.logs, + total: data.total, success: true } } else { @@ -260,7 +236,13 @@ const ServiceLogs = ({ serviceType }: { serviceType: 'aiService' | 'restService' id={`${serviceType}_logs`} columns={[...columns]} minVirtualHeight={430} - request={async () => (serviceType === 'aiService' ? getAiServiceLogList() : getRestServiceLogList())} + request={async ( + params: ParamsType & { + pageSize?: number | undefined + current?: number | undefined + keyword?: string | undefined + } + ) => (serviceType === 'aiService' ? getAiServiceLogList(params) : getRestServiceLogList(params))} onRowClick={(row: LogItem) => handleRowClick(row)} /> diff --git a/frontend/packages/core/src/pages/serviceOverview/charts/ServiceAreaChart.tsx b/frontend/packages/core/src/pages/serviceOverview/charts/ServiceAreaChart.tsx index f9d82b56..b3c33a44 100644 --- a/frontend/packages/core/src/pages/serviceOverview/charts/ServiceAreaChart.tsx +++ b/frontend/packages/core/src/pages/serviceOverview/charts/ServiceAreaChart.tsx @@ -190,6 +190,25 @@ const ServiceAreaChart = ({ customClassNames, dataInfo, height }: ServiceAreaCha setChartOption(dataInfo) } }, [dataInfo, JSON.stringify(dataInfo)]) + + // 添加窗口大小变化监听，实现自适应 + useEffect(() => { + // 定义resize处理函数 + const handleResize = () => { + const echartsInstance = chartRef.current?.getEchartsInstance() + if (echartsInstance) { + echartsInstance.resize() + } + } + + // 添加监听 + window.addEventListener('resize', handleResize) + + // 组件卸载时移除监听 + return () => { + window.removeEventListener('resize', handleResize) + } + }, []) return (
diff --git a/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx b/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx index 4b1b4226..b42e2714 100644 --- a/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx +++ b/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx @@ -231,6 +231,25 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr setChartOption(dataInfo) } }, [dataInfo, JSON.stringify(dataInfo)]) + + // 添加窗口大小变化监听，实现自适应 + useEffect(() => { + // 定义resize处理函数 + const handleResize = () => { + const echartsInstance = chartRef.current?.getEchartsInstance() + if (echartsInstance) { + echartsInstance.resize() + } + } + + // 添加监听 + window.addEventListener('resize', handleResize) + + // 组件卸载时移除监听 + return () => { + window.removeEventListener('resize', handleResize) + } + }, []) return (
diff --git a/frontend/packages/core/src/pages/serviceOverview/rankingList/RankingList.tsx b/frontend/packages/core/src/pages/serviceOverview/rankingList/RankingList.tsx index 6c1cb559..f0f8776e 100644 --- a/frontend/packages/core/src/pages/serviceOverview/rankingList/RankingList.tsx +++ b/frontend/packages/core/src/pages/serviceOverview/rankingList/RankingList.tsx @@ -59,11 +59,11 @@ const RankingList = ({ topRankingList, serviceType }: { topRankingList: RankingL }) } return ( -
+
{Object.keys(topRankingList)?.map((item: any, index: number) => ( 0 ? 'ml-[10px]' : ''}`} + className={`flex-1 min-w-[300px] h-fit rounded-[10px] ${index > 0 ? 'ml-[10px] md:ml-[10px] sm:ml-0 sm:mt-[10px]' : ''}`} classNames={{ body: 'p-[15px]' }} @@ -75,7 +75,7 @@ const RankingList = ({ topRankingList, serviceType }: { topRankingList: RankingL id={item} columns={[...columns]} minVirtualHeight={430} - noScroll + noScroll={true} request={() => getTableData(item)} showPagination={false} tableClass="ranking-list"