-
+
+
▲
- 381 T/s
-
+
{dataInfo?.max}
+
▼
- 381 T/s
+
{dataInfo?.min}
diff --git a/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx b/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx
index 7108aea2..50104058 100644
--- a/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx
+++ b/frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx
@@ -20,10 +20,16 @@ type ServiceBarCharProps = {
height?: number
}
+
const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharProps) => {
const chartRef = useRef
(null)
const [option, setOption] = useState({})
const [detaultColor] = useState('#5470c6')
+ const tokenMap = {
+ inputToken: $t('输入 Token'),
+ outputToken: $t('输出 Token'),
+ totalToken: $t('总 Token')
+ }
const setChartOption = (dataInfo: BarChartInfo) => {
const isNumberArray = typeof dataInfo.data[0] !== 'object'
const legendData = isNumberArray ? [dataInfo.title] : dataInfo.data.map((item) => item.name)
@@ -42,7 +48,7 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
// 为每个数据系列添加一行
data.forEach((item, index) => {
const color = item.color
- const name = item.name
+ const name = tokenMap[item.name as keyof typeof tokenMap] || item.name
const value = item.value[dataInfo.date.indexOf(params.name)] || 0
const marker = ``
@@ -86,9 +92,14 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
containLabel: true
},
tooltip: {
- trigger: 'item',
- formatter: function (params: { name: string; color: string; seriesIndex?: number }) {
- return tooltipFormatter(params)
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ formatter: function (params: any) {
+ // 如果是数组，取第一个参数的name
+ const param = Array.isArray(params) ? params[0] : params
+ return tooltipFormatter(param)
}
},
legend: {
diff --git a/frontend/packages/core/src/pages/serviceOverview/serviceOverview.tsx b/frontend/packages/core/src/pages/serviceOverview/serviceOverview.tsx
index 8ba0a917..c655cfae 100644
--- a/frontend/packages/core/src/pages/serviceOverview/serviceOverview.tsx
+++ b/frontend/packages/core/src/pages/serviceOverview/serviceOverview.tsx
@@ -67,8 +67,13 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
'request_total',
'token_total',
'avg_token',
+ 'max_token',
+ 'min_token',
'avg_request_per_subscriber',
- 'avg_token_per_subscriber'
+ 'avg_token_per_subscriber',
+ 'input_token',
+ 'output_token',
+ 'total_token'
],
eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/'
}).then((response) => {
@@ -80,42 +85,38 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
apiNum: 3,
serviceKind: 'ai',
avaliableMonitor: false,
+ maxToken: 100,
+ minToken: 1,
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: [
@@ -152,7 +153,36 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
],
avgTokenOverview: [11, 231, 343, 1414, 25, 362],
avgRequestPerSubscriberOverview: [1, 2, 3, 4, 5, 6],
- avgTokenPerSubscriberOverview: [4, 5, 1, 11, 4, 9],
+ 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',
@@ -208,6 +238,8 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
data: serviceOverview.avgResponseTimeOverview,
value: serviceOverview.avgResponseTime,
date: serviceOverview.date,
+ max: serviceOverview.maxResponseTime,
+ min: serviceOverview.minResponseTime,
type: 'area'
},
// 平均请求
@@ -264,6 +296,8 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
data: serviceOverview.avgTokenOverview,
value: serviceOverview.avgToken,
date: serviceOverview.date,
+ min: serviceOverview.minToken,
+ max: serviceOverview.maxToken,
type: 'area'
},
// 平均请求
@@ -276,7 +310,10 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
// 评价 token 消耗
setBarChartInfoData({
title: $t('平均 Token/订阅者统计'),
- data: serviceOverview.avgTokenPerSubscriberOverview,
+ data: serviceOverview.avgTokenPerSubscriberOverview.map((item: { inputToken: number; outputToken: number }) => ({
+ inputToken: item.inputToken,
+ outputToken: item.outputToken
+ })),
value: serviceOverview.avgTokenPerSubscriber,
date: serviceOverview.date
})
@@ -301,6 +338,8 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
'avg_traffic_per_subscriber_overview',
'request_total',
'traffic_total',
+ 'max_response_time',
+ 'min_response_time',
'avg_response_time',
'avg_request_per_subscriber',
'avg_traffic_per_subscriber'
@@ -315,6 +354,8 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
apiNum: 3,
serviceKind: 'ai',
avaliableMonitor: false,
+ maxResponseTime: 110,
+ minResponseTime: 31,
requestOverview: [
{
'2xx': 1.0,
diff --git a/frontend/packages/core/src/pages/serviceOverview/utils.ts b/frontend/packages/core/src/pages/serviceOverview/utils.ts
index 3581b38b..d12a6ab7 100644
--- a/frontend/packages/core/src/pages/serviceOverview/utils.ts
+++ b/frontend/packages/core/src/pages/serviceOverview/utils.ts
@@ -29,6 +29,9 @@ export const setBarChartInfoData = ({ title, value, data, date }: BarData) => {
'2xx': '#7EC26A',
'4xx': '#F2CF59',
'5xx': '#F17975',
+ inputToken:'#7EC26A',
+ outputToken: '#F2CF59',
+ totalToken: '#F17975',
'200': '#7EC26A',
'400': '#F2CF59',
'500': '#F17975'
diff --git a/frontend/packages/dashboard/src/pages/DashboardTotal.tsx b/frontend/packages/dashboard/src/pages/DashboardTotal.tsx
index 2ee65308..7b0ec1b1 100644
--- a/frontend/packages/dashboard/src/pages/DashboardTotal.tsx
+++ b/frontend/packages/dashboard/src/pages/DashboardTotal.tsx
@@ -60,6 +60,8 @@ export default function DashboardTotal() {
'request_total',
'token_total',
'avg_token',
+ 'min_token',
+ 'max_token',
'avg_request_per_subscriber',
'avg_token_per_subscriber'
],
@@ -138,9 +140,42 @@ export default function DashboardTotal() {
'5xx': 8.0
}
],
+ minToken: '1 k',
+ maxToken: '10 k',
avgTokenOverview: [11, 231, 343, 1414, 25, 362],
avgRequestPerSubscriberOverview: [1, 2, 3, 4, 5, 6],
- avgTokenPerSubscriberOverview: [4, 5, 1, 11, 4, 9],
+ 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',
@@ -172,6 +207,8 @@ export default function DashboardTotal() {
'request_total',
'traffic_total',
'avg_response_time',
+ 'max_response_time',
+ 'min_response_time',
'avg_request_per_subscriber',
'avg_traffic_per_subscriber'
],
@@ -254,15 +291,17 @@ export default function DashboardTotal() {
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 服务数据
+ // 存储 REST 服务数据
setRestServiceOverview(serviceOverview)
- // 存储 REST 报表数据
+ // 设置 REST 报表数据
setRestChartInfoData(serviceOverview)
} else {
message.error(msg || $t(RESPONSE_TIPS.error))
@@ -299,6 +338,8 @@ export default function DashboardTotal() {
data: serviceOverview.avgResponseTimeOverview,
value: serviceOverview.avgResponseTime,
date: serviceOverview.date,
+ min: serviceOverview.minResponseTime,
+ max: serviceOverview.maxResponseTime,
type: 'area'
},
// 平均请求
@@ -347,6 +388,8 @@ export default function DashboardTotal() {
data: serviceOverview.avgTokenOverview,
value: serviceOverview.avgToken,
date: serviceOverview.date,
+ min: serviceOverview.minToken,
+ max: serviceOverview.maxToken,
type: 'area'
},
// 平均请求
@@ -359,7 +402,12 @@ export default function DashboardTotal() {
// 平均 token 消耗
setBarChartInfoData({
title: $t('平均 Token/订阅者统计'),
- data: serviceOverview.avgTokenPerSubscriberOverview,
+ data: serviceOverview.avgTokenPerSubscriberOverview.map(
+ (item: { inputToken: number; outputToken: number }) => ({
+ inputToken: item.inputToken,
+ outputToken: item.outputToken
+ })
+ ),
value: serviceOverview.avgTokenPerSubscriber,
date: serviceOverview.date
})