Skip to content

Commit 131a1fa

Browse files
NINGyv179NINGyv179
committed
feature/1.8-Improve system observability
1 parent b91830b commit 131a1fa

File tree

6 files changed

+329
-125
lines changed

6 files changed

+329
-125
lines changed

‎frontend/packages/core/src/pages/serviceOverview/charts/ServiceAreaChart.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ type AreaChartInfo = {
99
data: number[]
1010
max: string
1111
min: string
12+
originValue?: number
1213
showXAxis?: boolean
1314
}
1415

@@ -17,9 +18,10 @@ type ServiceAreaCharProps = {
1718
dataInfo?: AreaChartInfo
1819
height?: number
1920
showAvgLine?: boolean
21+
customMarkLineValue?: number
2022
}
2123

22-
const ServiceAreaChart = ({ customClassNames, dataInfo, height, showAvgLine }: ServiceAreaCharProps) => {
24+
const ServiceAreaChart = ({ customClassNames, dataInfo, height, showAvgLine, customMarkLineValue }: ServiceAreaCharProps) => {
2325
const chartRef = useRef<ECharts>(null)
2426
const [option, setOption] = useState<EChartsOption | undefined>({})
2527
const [hasData, setHasData] = useState(true)
@@ -186,7 +188,9 @@ const ServiceAreaChart = ({ customClassNames, dataInfo, height, showAvgLine }: S
186188
show: false // 悬停时不显示标签
187189
}
188190
},
189-
data: [{ type: 'average', name: 'Avg' }]
191+
data: dataInfo?.originValue !== undefined ?
192+
[{ yAxis: dataInfo?.originValue, name: '自定义值' }] :
193+
[{ type: 'average', name: 'Avg' }]
190194
} : undefined,
191195
areaStyle: {
192196
color: {

‎frontend/packages/core/src/pages/serviceOverview/charts/ServiceBarChar.tsx‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export type BarChartInfo = {
2121
traffic2xxTotal?: string
2222
traffic4xxTotal?: string
2323
traffic5xxTotal?: string
24+
max?: string | number
25+
min?: string | number
2426
}
2527

2628
type ServiceBarCharProps = {
@@ -29,9 +31,17 @@ type ServiceBarCharProps = {
2931
height?: number
3032
showAvgLine?: boolean
3133
showLegendIndicator?: boolean
34+
hideIndicatorValue?: boolean
3235
}
3336

34-
const ServiceBarChar = ({ customClassNames, dataInfo, height, showAvgLine, showLegendIndicator }: ServiceBarCharProps) => {
37+
const ServiceBarChar = ({
38+
customClassNames,
39+
dataInfo,
40+
height,
41+
showAvgLine,
42+
showLegendIndicator,
43+
hideIndicatorValue
44+
}: ServiceBarCharProps) => {
3545
const chartRef = useRef<ECharts>(null)
3646
const [option, setOption] = useState<EChartsOption | undefined>({})
3747
// 使用从主题配置中导入的默认颜色，而不是硬编码的颜色值
@@ -78,7 +88,10 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height, showAvgLine, showL
7888
const option: EChartsOption = {
7989
title: [
8090
{
81-
text: '{titleStyle|' + $t(dataInfo.title) + '}\n\n{valueStyle|' + dataInfo.value + '}',
91+
text:
92+
'{titleStyle|' +
93+
$t(dataInfo.title) +
94+
`}${hideIndicatorValue ? '' : '\n\n{valueStyle|' + dataInfo.value + '}'}`,
8295
left: '2%',
8396
top: '0',
8497
textStyle: {
@@ -125,23 +138,23 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height, showAvgLine, showL
125138
show: !isNumberArray,
126139
data: legendData,
127140
right: '10px',
128-
top: '60px',
141+
top: hideIndicatorValue ? '10px' : '60px',
129142
itemWidth: 10,
130143
itemHeight: 10,
131144
textStyle: {
132145
color: '#333'
133146
},
134147
icon: 'rect',
135-
formatter: function(name: string): string {
148+
formatter: function (name: string): string {
136149
// 这里可以映射或自定义图例文本
137150
const customNames: Record<string, string> = {
138-
'inputToken': `${$t('输入 Token')} ${showLegendIndicator ? `(${dataInfo.inputTokenTotal})` : ''}`,
139-
'outputToken': `${$t('输出 Token')} ${showLegendIndicator ? `(${dataInfo.outputTokenTotal})` : ''}`,
151+
inputToken: `${$t('输入 Token')} ${showLegendIndicator ? `(${dataInfo.inputTokenTotal})` : ''}`,
152+
outputToken: `${$t('输出 Token')} ${showLegendIndicator ? `(${dataInfo.outputTokenTotal})` : ''}`,
140153
'2xx': `${'2xx'} ${showLegendIndicator ? `(${dataInfo.request2xxTotal || dataInfo.traffic2xxTotal})` : ''}`,
141154
'4xx': `${'4xx'} ${showLegendIndicator ? `(${dataInfo.request4xxTotal || dataInfo.traffic4xxTotal})` : ''}`,
142155
'5xx': `${'5xx'} ${showLegendIndicator ? `(${dataInfo.request5xxTotal || dataInfo.traffic5xxTotal})` : ''}`
143-
};
144-
return customNames[name] || name;
156+
}
157+
return customNames[name] || name
145158
}
146159
},
147160
xAxis: {
@@ -252,10 +265,10 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height, showAvgLine, showL
252265
},
253266
emphasis: {
254267
lineStyle: {
255-
width: 1 // 保持线条宽度不变，禁用默认的悬停加粗
268+
width: 1 // 保持线条宽度不变，禁用默认的悬停加粗
256269
},
257270
label: {
258-
show: false // 悬停时不显示标签
271+
show: false // 悬停时不显示标签
259272
}
260273
},
261274
data: [{ type: 'average', name: 'Avg' }]
@@ -289,10 +302,10 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height, showAvgLine, showL
289302
},
290303
emphasis: {
291304
lineStyle: {
292-
width: 1 // 保持线条宽度不变，禁用默认的悬停加粗
305+
width: 1 // 保持线条宽度不变，禁用默认的悬停加粗
293306
},
294307
label: {
295-
show: false // 悬停时不显示标签
308+
show: false // 悬停时不显示标签
296309
}
297310
},
298311
data: [{ type: 'average', name: 'Avg' }]
@@ -348,6 +361,24 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height, showAvgLine, showL
348361
}, [])
349362
return (
350363
<div className={`w-full ${customClassNames}`}>
364+
{
365+
hideIndicatorValue && (
366+
<div className="absolute top-[26px] left-[10px] w-full">
367+
<div className="relative top-[5px]">
368+
<div className="absolute top-[23px] right-[5%] grid grid-cols-[auto_auto] justify-items-end">
369+
<div className="flex justify-center items-center">
370+
<span className="text-[#FE564D] text-[9px]">▲</span>
371+
</div>
372+
<span className="ml-1 text-right">{dataInfo?.max}</span>
373+
<div className="flex justify-center items-center">
374+
<span className="text-[#27B148] text-[9px]">▼</span>
375+
</div>
376+
<span className="ml-1 text-right">{dataInfo?.min}</span>
377+
</div>
378+
</div>
379+
</div>
380+
)
381+
}
351382
<div style={!hasData ? { cursor: 'default', pointerEvents: 'none' } : {}}>
352383
<ECharts
353384
ref={chartRef}

‎frontend/packages/core/src/pages/serviceOverview/serviceOverview.tsx‎

Lines changed: 92 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const'
1212
import { App } from 'antd'
1313
import ServiceAreaChart from './charts/ServiceAreaChart'
1414
import RankingList from './rankingList/RankingList'
15-
import { getTime } from '@dashboard/utils/dashboard'
15+
import { abbreviateFloat, formatBytes, formatDuration, formatNumberWithUnit, getTime } from '@dashboard/utils/dashboard'
1616
import { setBarChartInfoData } from './utils'
1717
import { useGlobalContext } from '@common/contexts/GlobalStateContext'
1818

@@ -78,7 +78,11 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
7878
'request_4xx_total',
7979
'request_5xx_total',
8080
'input_token_total',
81-
'output_token_total'
81+
'output_token_total',
82+
'max_token_per_subscriber',
83+
'min_token_per_subscriber',
84+
'max_request_per_subscriber',
85+
'min_request_per_subscriber'
8286
]
8387
}).then((response) => {
8488
const { code, data, msg } = response
@@ -114,24 +118,24 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
114118
...setBarChartInfoData({
115119
title: $t('请求次数'),
116120
data: serviceOverview.requestOverview,
117-
value: serviceOverview.requestTotal,
121+
value: formatNumberWithUnit(serviceOverview.requestTotal),
118122
date: serviceOverview.date
119123
}),
120-
request2xxTotal: serviceOverview.request2xxTotal,
121-
request4xxTotal: serviceOverview.request4xxTotal,
122-
request5xxTotal: serviceOverview.request5xxTotal
124+
request2xxTotal: formatNumberWithUnit(serviceOverview.request2xxTotal),
125+
request4xxTotal: formatNumberWithUnit(serviceOverview.request4xxTotal),
126+
request5xxTotal: formatNumberWithUnit(serviceOverview.request5xxTotal)
123127
},
124128
// 流量消耗总数
125129
{
126130
...setBarChartInfoData({
127131
title: $t('网络流量'),
128132
data: serviceOverview.trafficOverview,
129-
value: serviceOverview.trafficTotal,
133+
value: formatBytes(serviceOverview.trafficTotal),
130134
date: serviceOverview.date
131135
}),
132-
traffic2xxTotal: serviceOverview.traffic2xxTotal,
133-
traffic4xxTotal: serviceOverview.traffic4xxTotal,
134-
traffic5xxTotal: serviceOverview.traffic5xxTotal
136+
traffic2xxTotal: formatBytes(serviceOverview.traffic2xxTotal),
137+
traffic4xxTotal: formatBytes(serviceOverview.traffic4xxTotal),
138+
traffic5xxTotal: formatBytes(serviceOverview.traffic5xxTotal)
135139
}
136140
])
137141
// 设置平均值数据
@@ -140,29 +144,36 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
140144
{
141145
title: $t('平均响应时间'),
142146
data: serviceOverview.avgResponseTimeOverview,
143-
value: serviceOverview.avgResponseTime,
147+
value: formatDuration(serviceOverview.avgResponseTime),
148+
originValue: serviceOverview.avgResponseTime,
144149
date: serviceOverview.date,
145-
max: serviceOverview.maxResponseTime,
146-
min: serviceOverview.minResponseTime,
150+
max: formatDuration(serviceOverview.maxResponseTime),
151+
min: formatDuration(serviceOverview.minResponseTime),
147152
type: 'area',
148153
showXAxis: false
149154
},
150155
// 平均请求
151-
setBarChartInfoData({
152-
title: $t('平均每消费者的请求次数'),
153-
data: serviceOverview.avgRequestPerSubscriberOverview,
154-
value: serviceOverview.avgRequestPerSubscriber,
155-
date: serviceOverview.date,
156-
showXAxis: false
157-
}),
156+
{
157+
...setBarChartInfoData({
158+
title: $t('平均每消费者的请求次数'),
159+
data: serviceOverview.avgRequestPerSubscriberOverview,
160+
date: serviceOverview.date,
161+
showXAxis: false
162+
}),
163+
max: abbreviateFloat(serviceOverview.maxRequestPerSubscriber),
164+
min: abbreviateFloat(serviceOverview.minRequestPerSubscriber)
165+
},
158166
// 平均流量消耗
159-
setBarChartInfoData({
160-
title: $t('平均每消费者的网络流量'),
161-
data: serviceOverview.avgTrafficPerSubscriberOverview,
162-
value: serviceOverview.avgTrafficPerSubscriber,
163-
date: serviceOverview.date,
164-
showXAxis: false
165-
})
167+
{
168+
...setBarChartInfoData({
169+
title: $t('平均每消费者的网络流量'),
170+
data: serviceOverview.avgTrafficPerSubscriberOverview,
171+
date: serviceOverview.date,
172+
showXAxis: false
173+
}),
174+
max: formatBytes(serviceOverview.maxTrafficPerSubscriber),
175+
min: formatBytes(serviceOverview.minTrafficPerSubscriber)
176+
}
166177
])
167178
}
168179

@@ -186,12 +197,12 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
186197
...setBarChartInfoData({
187198
title: $t('请求次数'),
188199
data: serviceOverview.requestOverview,
189-
value: serviceOverview.requestTotal,
200+
value: formatNumberWithUnit(serviceOverview.requestTotal),
190201
date: serviceOverview.date
191202
}),
192-
request2xxTotal: serviceOverview.request2xxTotal,
193-
request4xxTotal: serviceOverview.request4xxTotal,
194-
request5xxTotal: serviceOverview.request5xxTotal
203+
request2xxTotal: formatNumberWithUnit(serviceOverview.request2xxTotal),
204+
request4xxTotal: formatNumberWithUnit(serviceOverview.request4xxTotal),
205+
request5xxTotal: formatNumberWithUnit(serviceOverview.request5xxTotal)
195206
},
196207
// token 消耗总数
197208
{
@@ -201,11 +212,11 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
201212
inputToken: item.inputToken,
202213
outputToken: item.outputToken
203214
})),
204-
value: serviceOverview.tokenTotal,
215+
value: formatNumberWithUnit(serviceOverview.tokenTotal),
205216
date: serviceOverview.date
206217
}),
207-
inputTokenTotal: serviceOverview.inputTokenTotal,
208-
outputTokenTotal: serviceOverview.outputTokenTotal
218+
inputTokenTotal: formatNumberWithUnit(serviceOverview.inputTokenTotal),
219+
outputTokenTotal: formatNumberWithUnit(serviceOverview.outputTokenTotal)
209220
}
210221
])
211222
// 设置平均值数据
@@ -214,29 +225,38 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
214225
{
215226
title: $t('平均 Token 消耗'),
216227
data: serviceOverview.avgTokenOverview,
217-
value: serviceOverview.avgToken,
228+
value: formatNumberWithUnit(serviceOverview.avgToken) + ' Token/s',
229+
originValue: serviceOverview.avgToken,
218230
date: serviceOverview.date,
219-
min: serviceOverview.minToken,
220-
max: serviceOverview.maxToken,
231+
min: formatNumberWithUnit(serviceOverview.minToken) + ' Token/s',
232+
max: formatNumberWithUnit(serviceOverview.maxToken) + ' Token/s',
221233
type: 'area'
222234
},
223-
// 平均请求
224-
setBarChartInfoData({
225-
title: $t('平均每消费者的请求次数'),
226-
data: serviceOverview.avgRequestPerSubscriberOverview,
227-
value: serviceOverview.avgRequestPerSubscriber,
228-
date: serviceOverview.date
229-
}),
235+
{
236+
// 平均请求
237+
...setBarChartInfoData({
238+
title: $t('平均每消费者的请求次数'),
239+
data: serviceOverview.avgRequestPerSubscriberOverview,
240+
date: serviceOverview.date
241+
}),
242+
max: abbreviateFloat(serviceOverview.maxRequestPerSubscriber),
243+
min: abbreviateFloat(serviceOverview.minRequestPerSubscriber)
244+
},
230245
// 评价 token 消耗
231-
setBarChartInfoData({
232-
title: $t('平均每消费者的 Token 消耗'),
233-
data: serviceOverview.avgTokenPerSubscriberOverview.map((item: { inputToken: number; outputToken: number }) => ({
234-
inputToken: item.inputToken,
235-
outputToken: item.outputToken
236-
})),
237-
value: serviceOverview.avgTokenPerSubscriber,
238-
date: serviceOverview.date
239-
})
246+
{
247+
...setBarChartInfoData({
248+
title: $t('平均每消费者的 Token 消耗'),
249+
data: serviceOverview.avgTokenPerSubscriberOverview.map(
250+
(item: { inputToken: number; outputToken: number }) => ({
251+
inputToken: item.inputToken,
252+
outputToken: item.outputToken
253+
})
254+
),
255+
date: serviceOverview.date
256+
}),
257+
max: abbreviateFloat(serviceOverview.maxTokenPerSubscriber),
258+
min: abbreviateFloat(serviceOverview.minTokenPerSubscriber)
259+
}
240260
])
241261
}
242262

@@ -268,7 +288,11 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
268288
'request_5xx_total',
269289
'traffic_2xx_total',
270290
'traffic_4xx_total',
271-
'traffic_5xx_total'
291+
'traffic_5xx_total',
292+
'max_request_per_subscriber',
293+
'min_request_per_subscriber',
294+
'max_traffic_per_subscriber',
295+
'min_traffic_per_subscriber'
272296
]
273297
}).then((response) => {
274298
const { code, data, msg } = response
@@ -354,7 +378,13 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
354378
body: 'py-[15px] px-[0px]'
355379
}}
356380
>
357-
<ServiceBarChar showLegendIndicator={true} key={index} height={400} dataInfo={item} customClassNames="flex-1"></ServiceBarChar>
381+
<ServiceBarChar
382+
showLegendIndicator={true}
383+
key={index}
384+
height={400}
385+
dataInfo={item}
386+
customClassNames="flex-1"
387+
></ServiceBarChar>
358388
</Card>
359389
))}
360390
</div>
@@ -378,7 +408,13 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
378408
></ServiceAreaChart>
379409
</>
380410
) : (
381-
<ServiceBarChar key={index} height={270} dataInfo={item} showAvgLine={true} customClassNames="flex-1"></ServiceBarChar>
411+
<ServiceBarChar
412+
key={index}
413+
height={270}
414+
dataInfo={item}
415+
hideIndicatorValue={true}
416+
customClassNames="flex-1"
417+
></ServiceBarChar>
382418
)}
383419
</Card>
384420
))}

0 commit comments

Comments
 (0)