Skip to content

Commit 18a3516

Browse files
NINGyv179NINGyv179
committed
feature/1.8-Improve system observability
1 parent 12a8317 commit 18a3516

7 files changed

Lines changed: 259 additions & 111 deletions

File tree

‎frontend/packages/core/src/const/system/const.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -562,7 +562,7 @@ export const REST_SERVICE_LOG_LIST: PageProColumns<LogItem>[] = [
562562
},
563563
{
564564
title: '消费者',
565-
dataIndex: ['consumers', 'name'],
565+
dataIndex: ['consumer', 'name'],
566566
ellipsis: true
567567
},
568568
{

‎frontend/packages/core/src/pages/serviceLogs/ServiceLogs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const ServiceLogs = ({ serviceType }: { serviceType: 'aiService' | 'restService'
4545
/** 当前选中的时间范围 */
4646
const [timeRange, setTimeRange] = useState<TimeRange | undefined>()
4747
/** 默认时间 */
48-
const [defaultTime] = useState<TimeOption>('sevenDays')
48+
const [defaultTime] = useState<TimeOption>('day')
4949
/** 全局状态 */
5050
const { state } = useGlobalContext()
5151
/**

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@ type ServiceAreaCharProps = {
1616
customClassNames?: string
1717
dataInfo?: AreaChartInfo
1818
height?: number
19+
showAvgLine?: boolean
1920
}
2021

21-
const ServiceAreaChart = ({ customClassNames, dataInfo, height }: ServiceAreaCharProps) => {
22+
const ServiceAreaChart = ({ customClassNames, dataInfo, height, showAvgLine }: ServiceAreaCharProps) => {
2223
const chartRef = useRef<ECharts>(null)
2324
const [option, setOption] = useState<EChartsOption | undefined>({})
2425
const [hasData, setHasData] = useState(true)
@@ -159,6 +160,25 @@ const ServiceAreaChart = ({ customClassNames, dataInfo, height }: ServiceAreaCha
159160
itemStyle: {
160161
color: 'rgb(255, 70, 131)'
161162
},
163+
markLine: showAvgLine ? {
164+
silent: false,
165+
symbol: 'none',
166+
lineStyle: {
167+
width: 1,
168+
type: 'dashed'
169+
},
170+
label: {
171+
position: 'insideEndTop',
172+
formatter: '{c}',
173+
color: '#000',
174+
fontSize: 10,
175+
backgroundColor: 'transparent',
176+
padding: [10, 4],
177+
borderRadius: 2,
178+
distance: -5
179+
},
180+
data: [{ type: 'average', name: 'Avg' }]
181+
} : undefined,
162182
areaStyle: {
163183
color: {
164184
type: 'linear',

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

Lines changed: 93 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,33 @@ export type BarChartInfo = {
1313
value: number[]
1414
}[]
1515
showXAxis?: boolean
16+
inputTokenTotal?: string
17+
outputTokenTotal?: string
18+
request2xxTotal?: string
19+
request4xxTotal?: string
20+
request5xxTotal?: string
21+
traffic2xxTotal?: string
22+
traffic4xxTotal?: string
23+
traffic5xxTotal?: string
1624
}
1725

1826
type ServiceBarCharProps = {
1927
customClassNames?: string
2028
dataInfo?: BarChartInfo
2129
height?: number
30+
showAvgLine?: boolean
31+
showLegendIndicator?: boolean
2232
}
2333

24-
const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharProps) => {
34+
const ServiceBarChar = ({ customClassNames, dataInfo, height, showAvgLine, showLegendIndicator }: ServiceBarCharProps) => {
2535
const chartRef = useRef<ECharts>(null)
2636
const [option, setOption] = useState<EChartsOption | undefined>({})
2737
// 使用从主题配置中导入的默认颜色，而不是硬编码的颜色值
2838
const [detaultColor] = useState(defaultColor)
2939
const [hasData, setHasData] = useState(true)
3040
const tokenMap = {
3141
inputToken: $t('输入 Token'),
32-
outputToken: $t('输出 Token'),
33-
totalToken: $t('总 Token')
42+
outputToken: $t('输出 Token')
3443
}
3544
const setChartOption = (dataInfo: BarChartInfo) => {
3645
const isNumberArray = typeof dataInfo.data[0] !== 'object'
@@ -53,7 +62,7 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
5362
// 为每个数据系列添加一行
5463
data.forEach((item, index) => {
5564
// 使用与柱状图相同的颜色策略，确保颜色一致性
56-
const color = index < chartColors.length ? chartColors[index] : item.color
65+
const color = item.color ? item.color : index < chartColors.length ? chartColors[index] : detaultColor
5766
const name = tokenMap[item.name as keyof typeof tokenMap] || item.name
5867
const value = item.value[dataInfo.date.indexOf(params.name)] || 0
5968

@@ -97,30 +106,43 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
97106
top: '110px',
98107
containLabel: true
99108
},
100-
tooltip: dataExists ? {
101-
trigger: 'axis',
102-
axisPointer: {
103-
type: 'shadow'
104-
},
105-
formatter: function (params: any) {
106-
// 如果是数组，取第一个参数的name
107-
const param = Array.isArray(params) ? params[0] : params
108-
return tooltipFormatter(param)
109-
}
110-
} : {
111-
show: false // 没有数据时不显示tooltip
112-
},
109+
tooltip: dataExists
110+
? {
111+
trigger: 'axis',
112+
axisPointer: {
113+
type: 'shadow'
114+
},
115+
formatter: function (params: any) {
116+
// 如果是数组，取第一个参数的name
117+
const param = Array.isArray(params) ? params[0] : params
118+
return tooltipFormatter(param)
119+
}
120+
}
121+
: {
122+
show: false // 没有数据时不显示tooltip
123+
},
113124
legend: {
114-
show: false,
125+
show: !isNumberArray,
115126
data: legendData,
116127
right: '10px',
117-
top: '30px',
128+
top: '60px',
118129
itemWidth: 10,
119130
itemHeight: 10,
120131
textStyle: {
121132
color: '#333'
122133
},
123-
icon: 'rect'
134+
icon: 'rect',
135+
formatter: function(name: string): string {
136+
// 这里可以映射或自定义图例文本
137+
const customNames: Record<string, string> = {
138+
'inputToken': `${$t('输入 Token')} ${showLegendIndicator ? `(${dataInfo.inputTokenTotal})` : ''}`,
139+
'outputToken': `${$t('输出 Token')} ${showLegendIndicator ? `(${dataInfo.outputTokenTotal})` : ''}`,
140+
'2xx': `${'2xx'} ${showLegendIndicator ? `(${dataInfo.request2xxTotal || dataInfo.traffic2xxTotal})` : ''}`,
141+
'4xx': `${'4xx'} ${showLegendIndicator ? `(${dataInfo.request4xxTotal || dataInfo.traffic4xxTotal})` : ''}`,
142+
'5xx': `${'5xx'} ${showLegendIndicator ? `(${dataInfo.request5xxTotal || dataInfo.traffic5xxTotal})` : ''}`
143+
};
144+
return customNames[name] || name;
145+
}
124146
},
125147
xAxis: {
126148
type: 'category',
@@ -209,19 +231,61 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
209231
itemStyle: {
210232
color: detaultColor
211233
},
234+
markLine: showAvgLine
235+
? {
236+
silent: false,
237+
symbol: 'none',
238+
lineStyle: {
239+
width: 1,
240+
type: 'dashed'
241+
},
242+
label: {
243+
position: 'insideEndTop',
244+
formatter: '{c}',
245+
color: '#000',
246+
fontSize: 10,
247+
backgroundColor: 'transparent',
248+
padding: [10, 4],
249+
borderRadius: 2,
250+
distance: -5
251+
},
252+
data: [{ type: 'average', name: 'Avg' }]
253+
}
254+
: undefined,
212255
data: dataInfo.data
213256
}
214257
]
215258
: dataInfo.data.map((item, index) => ({
216259
name: item.name,
217260
type: 'bar',
218261
stack: '总量',
262+
markLine: showAvgLine
263+
? {
264+
silent: false,
265+
symbol: 'none',
266+
lineStyle: {
267+
width: 1,
268+
type: 'dashed'
269+
},
270+
label: {
271+
position: 'insideEndTop',
272+
formatter: '{c}',
273+
color: '#000',
274+
fontSize: 10,
275+
backgroundColor: 'transparent',
276+
padding: [10, 4],
277+
borderRadius: 2,
278+
distance: -5
279+
},
280+
data: [{ type: 'average', name: 'Avg' }]
281+
}
282+
: undefined,
219283
emphasis: {
220284
focus: 'series'
221285
},
222286
itemStyle: {
223287
// 使用主题中的颜色列表，如果索引超出范围则使用项目自带的颜色
224-
color: index < chartColors.length ? chartColors[index] : item.color
288+
color: item.color ? item.color : index < chartColors.length ? chartColors[index] : detaultColor
225289
},
226290
data: item.value
227291
}))
@@ -232,7 +296,7 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
232296
// 使用深度监听来确保图表数据更新
233297
useEffect(() => {
234298
if (!dataInfo) return
235-
299+
236300
// 直接获取 ECharts 实例并设置选项
237301
const echartsInstance = chartRef.current?.getEchartsInstance()
238302
if (echartsInstance) {
@@ -252,10 +316,10 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
252316
echartsInstance.resize()
253317
}
254318
}
255-
319+
256320
// 添加监听
257321
window.addEventListener('resize', handleResize)
258-
322+
259323
// 组件卸载时移除监听
260324
return () => {
261325
window.removeEventListener('resize', handleResize)
@@ -264,11 +328,11 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
264328
return (
265329
<div className={`w-full ${customClassNames}`}>
266330
<div style={!hasData ? { cursor: 'default', pointerEvents: 'none' } : {}}>
267-
<ECharts
268-
ref={chartRef}
269-
option={option}
270-
style={{ height: height || 400 }}
271-
opts={{ renderer: 'svg' }}
331+
<ECharts
332+
ref={chartRef}
333+
option={option}
334+
style={{ height: height || 400 }}
335+
opts={{ renderer: 'svg' }}
272336
theme="apipark" // 这里应用主题名称，需要先在应用入口注册
273337
/>
274338
</div>

0 commit comments

Comments
 (0)