diff --git a/frontend/packages/common/src/components/aoplatform/serviceInfoCard.tsx b/frontend/packages/common/src/components/aoplatform/serviceInfoCard.tsx index 926969f7..4fede82b 100644 --- a/frontend/packages/common/src/components/aoplatform/serviceInfoCard.tsx +++ b/frontend/packages/common/src/components/aoplatform/serviceInfoCard.tsx @@ -76,14 +76,14 @@ const ServiceInfoCard = ({ method: 'GET', eoParams: { service: serviceId, team: teamId }, eoTransformKeys: [ + 'api_num', 'enable_mcp', 'service_kind', 'subscriber_num', 'invoke_num', 'avaliable_monitor', 'is_released' - ], - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + ] }).then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { diff --git a/frontend/packages/core/src/index.css b/frontend/packages/core/src/index.css index a18fb3bb..c7e7a958 100644 --- a/frontend/packages/core/src/index.css +++ b/frontend/packages/core/src/index.css @@ -1164,11 +1164,11 @@ p{ .ranking-list .ant-table-tbody:not(tbody) .ant-table-cell{ padding: 10px 10px !important; } -.ranking-list .ant-table-header .ant-table-thead th{ +.ranking-list .ant-table-container .ant-table-thead th{ background-color: #fff !important; padding: 10px 10px !important; } -.ranking-list .ant-table-header .ant-table-thead th::before{ +.ranking-list .ant-table-container .ant-table-thead th::before{ display: none; } diff --git a/frontend/packages/core/src/pages/serviceLogs/LogDetail.tsx b/frontend/packages/core/src/pages/serviceLogs/LogDetail.tsx index 5a607f12..eb393321 100644 --- a/frontend/packages/core/src/pages/serviceLogs/LogDetail.tsx +++ b/frontend/packages/core/src/pages/serviceLogs/LogDetail.tsx @@ -310,13 +310,11 @@ const LogDetail = ({ selectedRow, serviceType, serviceId, teamId }: LogDetailPro }) setRequestInfoData({ Header: result.request.header, - Body: result.request.body, - Origin: result.request.origin + Body: result.request.body }) setResponseInfoData({ Header: result.response.header, - Body: result.response.body, - Origin: result.response.origin + Body: result.response.body }) } else { message.error(msg || $t(RESPONSE_TIPS.error)) @@ -370,12 +368,10 @@ const LogDetail = ({ selectedRow, serviceType, serviceId, teamId }: LogDetailPro isSystemConsumer: result.isSystemConsumer }) setRequestInfoData({ - Header: result.request.header, - Origin: result.request.origin + Header: result.request.header }) setResponseInfoData({ - Header: result.response.header, - Origin: result.response.origin + Header: result.response.header }) } else { message.error(msg || $t(RESPONSE_TIPS.error)) diff --git a/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx b/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx index 50104058..d7ce6294 100644 --- a/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx +++ b/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx @@ -34,7 +34,7 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr const isNumberArray = typeof dataInfo.data[0] !== 'object' const legendData = isNumberArray ? [dataInfo.title] : dataInfo.data.map((item) => item.name) const tooltipFormatter = (params: { name: string; color: string; seriesIndex?: number }) => { - let tooltipContent = `
+ let tooltipContent = `
${isNumberArray ? '' : params.name}
` const data = isNumberArray ? [ @@ -52,8 +52,8 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr const value = item.value[dataInfo.date.indexOf(params.name)] || 0 const marker = `` - tooltipContent += `
- ${marker} ${name} ${value} + tooltipContent += `
+
${marker} ${name}
${value}
` }) diff --git a/frontend/packages/core/src/pages/serviceOverview/indicator/Indicator.tsx b/frontend/packages/core/src/pages/serviceOverview/indicator/Indicator.tsx index 836c7b2b..9f4454a2 100644 --- a/frontend/packages/core/src/pages/serviceOverview/indicator/Indicator.tsx +++ b/frontend/packages/core/src/pages/serviceOverview/indicator/Indicator.tsx @@ -38,7 +38,8 @@ const Indicator = ({ indicatorInfo }: { indicatorInfo: any }) => { color={indicatorInfo?.enableMcp ? 'green' : 'primary'} className="w-full rounded-[10px]" variant="outlined" - onClick={() => { + onClick={(e) => { + e.stopPropagation() if (indicatorInfo?.enableMcp) { window.open(`/serviceHub/detail/${indicatorInfo?.serviceId}`, '_blank') } else { diff --git a/frontend/packages/core/src/pages/serviceOverview/rankingList/RankingList.tsx b/frontend/packages/core/src/pages/serviceOverview/rankingList/RankingList.tsx index 97717a2c..b9d980d8 100644 --- a/frontend/packages/core/src/pages/serviceOverview/rankingList/RankingList.tsx +++ b/frontend/packages/core/src/pages/serviceOverview/rankingList/RankingList.tsx @@ -63,7 +63,7 @@ const RankingList = ({ topRankingList, serviceType }: { topRankingList: RankingL {Object.keys(topRankingList)?.map((item: any, index: number) => ( 0 ? 'ml-[10px]' : ''}`} + className={`flex-1 h-fit rounded-[10px] ${index > 0 ? 'ml-[10px]' : ''}`} classNames={{ body: 'p-[15px] pb-[0px]' }} @@ -75,6 +75,7 @@ const RankingList = ({ topRankingList, serviceType }: { topRankingList: RankingL id={item} columns={[...columns]} minVirtualHeight={430} + noScroll request={() => getTableData(item)} showPagination={false} tableClass="ranking-list" diff --git a/frontend/packages/core/src/pages/serviceOverview/serviceOverview.tsx b/frontend/packages/core/src/pages/serviceOverview/serviceOverview.tsx index c655cfae..6d0fe51f 100644 --- a/frontend/packages/core/src/pages/serviceOverview/serviceOverview.tsx +++ b/frontend/packages/core/src/pages/serviceOverview/serviceOverview.tsx @@ -74,126 +74,14 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ 'input_token', 'output_token', 'total_token' - ], - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + ] }).then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { - const serviceOverview = { - enableMcp: true, - subscriberNum: 11, - apiNum: 3, - serviceKind: 'ai', - avaliableMonitor: false, - maxToken: 100, - minToken: 1, - requestOverview: [ - { - '2xx': 1.0, - '4xx': 2.0, - '5xx': 3.0, - }, - { - '2xx': 2.0, - '4xx': 3.0, - '5xx': 4.0, - }, - { - '2xx': 3.0, - '4xx': 4.0, - '5xx': 5.0, - }, - { - '2xx': 4.0, - '4xx': 5.0, - '5xx': 6.0, - }, - { - '2xx': 5.0, - '4xx': 6.0, - '5xx': 7.0, - }, - { - '2xx': 6.0, - '4xx': 7.0, - '5xx': 8.0, - } - ], - tokenOverview: [ - { - '2xx': 1.0, - '4xx': 2.0, - '5xx': 3.0 - }, - { - '2xx': 2.0, - '4xx': 3.0, - '5xx': 4.0 - }, - { - '2xx': 3.0, - '4xx': 4.0, - '5xx': 5.0 - }, - { - '2xx': 4.0, - '4xx': 5.0, - '5xx': 6.0 - }, - { - '2xx': 5.0, - '4xx': 6.0, - '5xx': 7.0 - }, - { - '2xx': 6.0, - '4xx': 7.0, - '5xx': 8.0 - } - ], - avgTokenOverview: [11, 231, 343, 1414, 25, 362], - avgRequestPerSubscriberOverview: [1, 2, 3, 4, 5, 6], - avgTokenPerSubscriberOverview: [{ - inputToken: 1.0, - outputToken: 2.0, - totalToken: 3.0 - }, - { - inputToken: 22.0, - outputToken: 3.0, - totalToken: 44.0 - }, - { - inputToken: 42.0, - outputToken: 15.0, - totalToken: 6.0 - }, - { - inputToken: 5.0, - outputToken: 16.0, - totalToken: 7.0 - }, - { - inputToken: 6.0, - outputToken: 37.0, - totalToken: 8.0 - }, - { - inputToken: 64.0, - outputToken: 7.0, - totalToken: 8.0 - }], - requestTotal: '12 GB', - tokenTotal: '14 GB', - avgToken: '1 k', - avgRequestPerSubscriber: '2 k', - avgTokenPerSubscriber: '3 k', - date: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] - } // 存储 AI 服务数据 - setAiServiceOverview(serviceOverview) + setAiServiceOverview(data.overview) // 设置 AI 报表数据 - setAiChartInfoData(serviceOverview) + setAiChartInfoData(data.overview) } else { message.error(msg || $t(RESPONSE_TIPS.error)) } @@ -283,7 +171,10 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ // token 消耗总数 setBarChartInfoData({ title: $t('Token'), - data: serviceOverview.tokenOverview, + data: serviceOverview.tokenOverview.map((item: { inputToken: number; outputToken: number }) => ({ + inputToken: item.inputToken, + outputToken: item.outputToken + })), value: serviceOverview.tokenTotal, date: serviceOverview.date }) @@ -343,103 +234,14 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ 'avg_response_time', 'avg_request_per_subscriber', 'avg_traffic_per_subscriber' - ], - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + ] }).then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { - const serviceOverview = { - enableMcp: true, - subscriberNum: 12, - apiNum: 3, - serviceKind: 'ai', - avaliableMonitor: false, - maxResponseTime: 110, - minResponseTime: 31, - requestOverview: [ - { - '2xx': 1.0, - '4xx': 2.0, - '5xx': 3.0, - fsdf: 4.0 - }, - { - '2xx': 2.0, - '4xx': 3.0, - '5xx': 4.0, - fsdf: 5.0 - }, - { - '2xx': 3.0, - '4xx': 4.0, - '5xx': 5.0, - fsdf: 6.0 - }, - { - '2xx': 4.0, - '4xx': 5.0, - '5xx': 6.0, - fsdf: 7.0 - }, - { - '2xx': 5.0, - '4xx': 6.0, - '5xx': 7.0, - fsdf: 8.0 - }, - { - '2xx': 6.0, - '4xx': 7.0, - '5xx': 8.0, - fsdf: 9.0 - } - ], - trafficOverview: [ - { - '2xx': 1.0, - '4xx': 2.0, - '5xx': 3.0 - }, - { - '2xx': 2.0, - '4xx': 3.0, - '5xx': 4.0 - }, - { - '2xx': 3.0, - '4xx': 4.0, - '5xx': 5.0 - }, - { - '2xx': 4.0, - '4xx': 5.0, - '5xx': 6.0 - }, - { - '2xx': 5.0, - '4xx': 6.0, - '5xx': 7.0 - }, - { - '2xx': 6.0, - '4xx': 7.0, - '5xx': 8.0 - } - ], - avgRequestPerSubscriberOverview: [1, 2, 3, 4, 5, 6], - avgResponseTimeOverview: [11, 231, 343, 1414, 25, 362], - avgTrafficPerSubscriberOverview: [4, 5, 1, 11, 4, 9], - requestTotal: '12 GB', - trafficTotal: '14 GB', - avgResponseTime: '1 k', - avgRequestPerSubscriber: '2 k', - avgTrafficPerSubscriber: '3 k', - date: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] - } // 存储 REST 服务数据 - setRestServiceOverview(serviceOverview) + setRestServiceOverview(data.overview) // 设置 REST 报表数据 - setRestChartInfoData(serviceOverview) + setRestChartInfoData(data.overview) } else { message.error(msg || $t(RESPONSE_TIPS.error)) } @@ -451,42 +253,14 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ const getTopRankingList = () => { fetchData>('service/monitor/top10', { method: 'GET', - eoParams: { service: serviceId, team: teamId, start: timeRange?.start, end: timeRange?.end }, - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + eoParams: { service: serviceId, team: teamId, start: timeRange?.start, end: timeRange?.end } }).then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { - const serviceOverview = { - apis: [ - { - id: '123', - name: 'Model 1', - request: 100, - traffic: 100, - token: 100 - }, - { - id: '456', - name: 'Model 2', - request: 200, - traffic: 300, - token: 400 - } - ], - consumers: [ - { - id: '6666', - name: 'Customer 1', - request: 100, - traffic: 100, - token: 100 - } - ] - } // 设置排名表格数据 setTopRankingList({ - 'TOP API': serviceOverview.apis, - 'TOP Consumer': serviceOverview.consumers + 'TOP API': data.apis, + 'TOP Consumer': data.consumers }) } else { message.error(msg || $t(RESPONSE_TIPS.error)) @@ -531,7 +305,7 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ } spinning={dashboardLoading} > -
+
diff --git a/frontend/packages/dashboard/src/pages/DashboardTotal.tsx b/frontend/packages/dashboard/src/pages/DashboardTotal.tsx index 7b0ec1b1..6bc53e8c 100644 --- a/frontend/packages/dashboard/src/pages/DashboardTotal.tsx +++ b/frontend/packages/dashboard/src/pages/DashboardTotal.tsx @@ -63,130 +63,18 @@ export default function DashboardTotal() { 'min_token', 'max_token', 'avg_request_per_subscriber', - 'avg_token_per_subscriber' - ], - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + 'avg_token_per_subscriber', + 'input_token', + 'output_token', + 'total_token' + ] }).then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { - const serviceOverview = { - requestOverview: [ - { - '2xx': 1.0, - '4xx': 2.0, - '5xx': 3.0, - fsdf: 4.0 - }, - { - '2xx': 2.0, - '4xx': 3.0, - '5xx': 4.0, - fsdf: 5.0 - }, - { - '2xx': 3.0, - '4xx': 4.0, - '5xx': 5.0, - fsdf: 6.0 - }, - { - '2xx': 4.0, - '4xx': 5.0, - '5xx': 6.0, - fsdf: 7.0 - }, - { - '2xx': 5.0, - '4xx': 6.0, - '5xx': 7.0, - fsdf: 8.0 - }, - { - '2xx': 6.0, - '4xx': 7.0, - '5xx': 8.0, - fsdf: 9.0 - } - ], - tokenOverview: [ - { - '2xx': 1.0, - '4xx': 2.0, - '5xx': 3.0 - }, - { - '2xx': 2.0, - '4xx': 3.0, - '5xx': 4.0 - }, - { - '2xx': 3.0, - '4xx': 4.0, - '5xx': 5.0 - }, - { - '2xx': 4.0, - '4xx': 5.0, - '5xx': 6.0 - }, - { - '2xx': 5.0, - '4xx': 6.0, - '5xx': 7.0 - }, - { - '2xx': 6.0, - '4xx': 7.0, - '5xx': 8.0 - } - ], - minToken: '1 k', - maxToken: '10 k', - avgTokenOverview: [11, 231, 343, 1414, 25, 362], - avgRequestPerSubscriberOverview: [1, 2, 3, 4, 5, 6], - avgTokenPerSubscriberOverview: [ - { - inputToken: 1.0, - outputToken: 2.0, - totalToken: 3.0 - }, - { - inputToken: 22.0, - outputToken: 3.0, - totalToken: 44.0 - }, - { - inputToken: 42.0, - outputToken: 15.0, - totalToken: 6.0 - }, - { - inputToken: 5.0, - outputToken: 16.0, - totalToken: 7.0 - }, - { - inputToken: 6.0, - outputToken: 37.0, - totalToken: 8.0 - }, - { - inputToken: 64.0, - outputToken: 7.0, - totalToken: 8.0 - } - ], - requestTotal: '12 GB', - tokenTotal: '14 GB', - avgToken: '1 k', - avgRequestPerSubscriber: '2 k', - avgTokenPerSubscriber: '3 k', - date: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] - } // 存储 AI 服务数据 - setAiServiceOverview(serviceOverview) + setAiServiceOverview(data?.overview) // 设置 AI 报表数据 - setAiChartInfoData(serviceOverview) + setAiChartInfoData(data?.overview) } else { message.error(msg || $t(RESPONSE_TIPS.error)) } @@ -211,98 +99,14 @@ export default function DashboardTotal() { 'min_response_time', 'avg_request_per_subscriber', 'avg_traffic_per_subscriber' - ], - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + ] }).then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { - const serviceOverview = { - requestOverview: [ - { - '2xx': 33.0, - '4xx': 44.0, - '5xx': 5.0, - fsdf: 6.0 - }, - { - '2xx': 123.0, - '4xx': 324.0, - '5xx': 112.0, - fsdf: 44.0 - }, - { - '2xx': 234.0, - '4xx': 436.0, - '5xx': 123.0, - fsdf: 4.0 - }, - { - '2xx': 4.0, - '4xx': 234.0, - '5xx': 1233.0, - fsdf: 7.0 - }, - { - '2xx': 5.0, - '4xx': 233.0, - '5xx': 7123.0, - fsdf: 8.0 - }, - { - '2xx': 444.0, - '4xx': 7.0, - '5xx': 8.0, - fsdf: 9.0 - } - ], - trafficOverview: [ - { - '2xx': 1123.0, - '4xx': 23.0, - '5xx': 3.0 - }, - { - '2xx': 112.0, - '4xx': 233.0, - '5xx': 44.0 - }, - { - '2xx': 3.0, - '4xx': 1234.0, - '5xx': 445.0 - }, - { - '2xx': 14.0, - '4xx': 2345.0, - '5xx': 6.0 - }, - { - '2xx': 132.0, - '4xx': 346.0, - '5xx': 37.0 - }, - { - '2xx': 613.0, - '4xx': 47.0, - '5xx': 81.0 - } - ], - avgRequestPerSubscriberOverview: [345, 23, 12, 123, 43, 2], - avgResponseTimeOverview: [123, 232, 443, 54, 125, 61], - avgTrafficPerSubscriberOverview: [44, 235, 11, 114, 234, 239], - requestTotal: '11 GB', - minResponseTime: '1 k', - maxResponseTime: '102 k', - trafficTotal: '22 GB', - avgResponseTime: '33 k', - avgRequestPerSubscriber: '44 k', - avgTrafficPerSubscriber: '55 k', - date: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] - } // 存储 REST 服务数据 - setRestServiceOverview(serviceOverview) + setRestServiceOverview(data?.overview) // 设置 REST 报表数据 - setRestChartInfoData(serviceOverview) + setRestChartInfoData(data?.overview) } else { message.error(msg || $t(RESPONSE_TIPS.error)) } @@ -375,7 +179,10 @@ export default function DashboardTotal() { // token 消耗总数 setBarChartInfoData({ title: $t('Token'), - data: serviceOverview.tokenOverview, + data: serviceOverview.tokenOverview.map((item: { inputToken: number; outputToken: number }) => ({ + inputToken: item.inputToken, + outputToken: item.outputToken + })), value: serviceOverview.tokenTotal, date: serviceOverview.date }) @@ -420,82 +227,15 @@ export default function DashboardTotal() { `monitor/overview/top10/${activeTab === 'AI' ? 'ai' : 'rest'}`, { method: 'GET', - eoParams: { start: timeRange?.start, end: timeRange?.end }, - eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + eoParams: { start: timeRange?.start, end: timeRange?.end } } ).then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { - const aiServiceOverview = { - apis: [ - { - id: '123', - name: 'Model 21', - request: 100, - token: 100 - }, - { - id: '456', - name: 'Model 22', - request: 200, - token: 400 - }, - { - id: '45611', - name: 'Model 3', - request: 3200, - token: 4400 - }, - { - id: '4536', - name: 'Model 4', - request: 1200, - token: 4200 - } - ], - consumers: [ - { - id: '6666', - name: 'Customer 1', - request: 100, - token: 100 - } - ] - } - const restServiceOverview = { - apis: [ - { - id: '123', - name: 'Model 1', - request: 100, - traffic: 100 - }, - { - id: '456', - name: 'Model 2', - request: 200, - traffic: 300 - }, - { - id: '12333', - name: 'Model 123', - request: 200, - traffic: 300 - } - ], - consumers: [ - { - id: '6666', - name: 'Customer 1', - request: 100, - traffic: 100 - } - ] - } // 设置排名表格数据 setTopRankingList({ - 'TOP API': activeTab === 'AI' ? aiServiceOverview.apis : restServiceOverview.apis, - 'TOP Consumer': activeTab === 'AI' ? aiServiceOverview.consumers : restServiceOverview.consumers + 'TOP API': data.apis, + 'TOP Consumer': data.consumers }) } else { message.error(msg || $t(RESPONSE_TIPS.error)) @@ -581,44 +321,49 @@ export default function DashboardTotal() { } spinning={dashboardLoading} > -
- {barChartInfo?.map((item: BarChartInfo, index: number) => ( - 0 ? 'ml-[10px]' : ''}`} - classNames={{ - body: 'p-[15px]' - }} - > - - - ))} +
+
+ {barChartInfo?.map((item: BarChartInfo, index: number) => ( + 0 ? 'ml-[10px]' : ''}`} + classNames={{ + body: 'p-[15px]' + }} + > + + + ))} +
+
+ {perBarChartInfo?.map((item: any, index: number) => ( + 0 ? 'ml-[10px]' : ''}`} + classNames={{ + body: 'p-[15px]' + }} + > + {item.type === 'area' ? ( + <> + + + ) : ( + + )} + + ))} +
+
-
- {perBarChartInfo?.map((item: any, index: number) => ( - 0 ? 'ml-[10px]' : ''}`} - classNames={{ - body: 'p-[15px]' - }} - > - {item.type === 'area' ? ( - <> - - - ) : ( - - )} - - ))} -
-