Skip to content

Commit 32bc735

Browse files
NINGyv179NINGyv179
committed
feature/1.8-Improve system observability
1 parent 5384807 commit 32bc735

8 files changed

Lines changed: 46 additions & 28 deletions

File tree

‎frontend/packages/core/src/index.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1175,6 +1175,13 @@ p{
11751175
.ant-alert-info{
11761176
background: #1784FC1A !important;
11771177
}
1178+
.service-log-tab .ant-tabs .ant-tabs-nav .ant-tabs-tab{
1179+
padding-left: 0px;
1180+
padding-right: 0px;
1181+
}
1182+
.service-log-tab .ant-tabs .ant-tabs-tab+.ant-tabs-tab {
1183+
margin-left: 15px;
1184+
}
11781185

11791186
.monaco-editor .find-widget .monaco-inputbox.synthetic-focus{
11801187
outline-color: var(--primary-color) !important;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const ApiNetWorkDataPreview = ({ configContent = {} }: { configContent?: { [key:
3737
<>
3838
{Object.keys(configContent).map((item) => {
3939
return (
40-
<div className="overflow-auto">
40+
<div className="overflow-auto mb-[15px]">
4141
<div className="font-semibold text-[16px] mb-[10px]">{item}</div>
4242
<div className="bg-[#0a0b21] text-white p-4 rounded-md my-2 font-mono text-sm overflow-auto relative">
4343
{!configContent[item] ? (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -349,7 +349,7 @@ const LogDetail = ({ selectedRow, serviceType, serviceId, teamId }: LogDetailPro
349349
}}
350350
contentStyle={{ fontWeight: '600' }}
351351
/>
352-
<div className="mt-[5px]">
352+
<div className="mt-[5px] service-log-tab">
353353
<Tabs
354354
className="overflow-hidden h-full [&>.ant-tabs-content-holder]:overflow-auto global-policy-tabs"
355355
items={tabItems}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ const ServiceLogs = ({ serviceType }: { serviceType: 'aiService' | 'restService'
218218
return (
219219
<Spin
220220
className="h-full pb-[20px]"
221-
wrapperClassName="h-full min-h-[150px]"
221+
wrapperClassName="h-full min-h-[150px] overflow-hidden"
222222
indicator={
223223
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
224224
<div style={{ transform: 'scale(1.5)' }}>
@@ -228,14 +228,13 @@ const ServiceLogs = ({ serviceType }: { serviceType: 'aiService' | 'restService'
228228
}
229229
spinning={dashboardLoading}
230230
>
231-
<div className="mr-PAGE_INSIDE_X">
231+
<div className="h-full mr-PAGE_INSIDE_X">
232232
<DateSelectFilter selectCallback={selectCallback} customClassNames={'pt-[0px]'} defaultTime={defaultTime} />
233-
<div className="mt-[20px]">
233+
<div style={{ height: 'calc(100% - -3px)' }} className="mt-[20px] overflow-hidden">
234234
<PageList
235235
ref={pageListRef}
236236
id={`${serviceType}_logs`}
237237
columns={[...columns]}
238-
minVirtualHeight={430}
239238
request={async (
240239
params: ParamsType & {
241240
pageSize?: number | undefined

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,13 @@ type ServiceAreaCharProps = {
2121
const ServiceAreaChart = ({ customClassNames, dataInfo, height }: ServiceAreaCharProps) => {
2222
const chartRef = useRef<ECharts>(null)
2323
const [option, setOption] = useState<EChartsOption | undefined>({})
24+
const [hasData, setHasData] = useState(true)
2425
const setChartOption = (dataInfo: AreaChartInfo) => {
25-
const hasData = dataInfo.data && dataInfo.data.length > 0
26+
const dataExists = dataInfo.data && dataInfo.data.length > 0
27+
// 更新hasData状态
28+
setHasData(dataExists)
2629
const option = {
27-
tooltip: hasData ? {
30+
tooltip: dataExists ? {
2831
trigger: 'axis',
2932
formatter: function (value: any) {
3033
// 如果是数组，取第一个参数的name
@@ -49,7 +52,7 @@ const ServiceAreaChart = ({ customClassNames, dataInfo, height }: ServiceAreaCha
4952
rich: {
5053
titleStyle: {
5154
fontSize: 14,
52-
color: '#999',
55+
color: '#999999',
5356
fontWeight: 'normal',
5457
lineHeight: 20
5558
},
@@ -90,7 +93,7 @@ const ServiceAreaChart = ({ customClassNames, dataInfo, height }: ServiceAreaCha
9093
yAxis: {
9194
type: 'value',
9295
boundaryGap: [0, '5%'],
93-
show: hasData, // 没有数据时不显示Y轴
96+
show: dataExists, // 没有数据时不显示Y轴
9497
axisLine: {
9598
show: false
9699
},
@@ -132,7 +135,8 @@ const ServiceAreaChart = ({ customClassNames, dataInfo, height }: ServiceAreaCha
132135
// }
133136
// ],
134137
// 添加空状态提示
135-
graphic: !hasData
138+
silent: !dataExists,
139+
graphic: !dataExists
136140
? [
137141
{
138142
type: 'text',
@@ -228,7 +232,9 @@ const ServiceAreaChart = ({ customClassNames, dataInfo, height }: ServiceAreaCha
228232
</div>
229233
</div>
230234
</div>
231-
<ECharts ref={chartRef} option={option} theme="apipark" style={{ height: height || 400 }} opts={{ renderer: 'svg' }} />
235+
<div style={!hasData ? { cursor: 'default', pointerEvents: 'none' } : {}}>
236+
<ECharts ref={chartRef} option={option} theme="apipark" style={{ height: height || 400 }} opts={{ renderer: 'svg' }} />
237+
</div>
232238
</div>
233239
)
234240
}

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

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
2626
const [option, setOption] = useState<EChartsOption | undefined>({})
2727
// 使用从主题配置中导入的默认颜色，而不是硬编码的颜色值
2828
const [detaultColor] = useState(defaultColor)
29+
const [hasData, setHasData] = useState(true)
2930
const tokenMap = {
3031
inputToken: $t('输入 Token'),
3132
outputToken: $t('输出 Token'),
@@ -34,7 +35,9 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
3435
const setChartOption = (dataInfo: BarChartInfo) => {
3536
const isNumberArray = typeof dataInfo.data[0] !== 'object'
3637
const legendData = isNumberArray ? [dataInfo.title] : dataInfo.data.map((item) => item.name)
37-
const hasData = dataInfo.data && dataInfo.data.length > 0
38+
const dataExists = dataInfo.data && dataInfo.data.length > 0
39+
// 更新hasData状态
40+
setHasData(dataExists)
3841
const tooltipFormatter = (params: { name: string; color: string; seriesIndex?: number }) => {
3942
let tooltipContent = `<div style="min-width:140px;padding:8px;">
4043
<div>${isNumberArray ? '' : params.name}</div>`
@@ -73,7 +76,7 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
7376
rich: {
7477
titleStyle: {
7578
fontSize: 14,
76-
color: '#999',
79+
color: '#999999',
7780
fontWeight: 'normal',
7881
lineHeight: 20
7982
},
@@ -94,7 +97,7 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
9497
top: '110px',
9598
containLabel: true
9699
},
97-
tooltip: hasData ? {
100+
tooltip: dataExists ? {
98101
trigger: 'axis',
99102
axisPointer: {
100103
type: 'shadow'
@@ -137,9 +140,9 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
137140
name: '',
138141
min: 0,
139142
minInterval: 1,
140-
show: hasData, // 没有数据时不显示Y轴
143+
show: dataExists, // 没有数据时不显示Y轴
141144
splitLine: {
142-
show: hasData, // 没有数据时不显示网格线
145+
show: dataExists, // 没有数据时不显示网格线
143146
lineStyle: {
144147
type: 'dashed',
145148
color: '#eee'
@@ -179,7 +182,8 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
179182
// }
180183
// ],
181184
// 添加空状态提示
182-
graphic: !hasData
185+
silent: !dataExists,
186+
graphic: !dataExists
183187
? [
184188
{
185189
type: 'text',
@@ -259,13 +263,15 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
259263
}, [])
260264
return (
261265
<div className={`w-full ${customClassNames}`}>
262-
<ECharts
263-
ref={chartRef}
264-
option={option}
265-
style={{ height: height || 400 }}
266-
opts={{ renderer: 'svg' }}
267-
theme="apipark" // 这里应用主题名称，需要先在应用入口注册
268-
/>
266+
<div style={!hasData ? { cursor: 'default', pointerEvents: 'none' } : {}}>
267+
<ECharts
268+
ref={chartRef}
269+
option={option}
270+
style={{ height: height || 400 }}
271+
opts={{ renderer: 'svg' }}
272+
theme="apipark" // 这里应用主题名称，需要先在应用入口注册
273+
/>
274+
</div>
269275
</div>
270276
)
271277
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,11 @@ const Indicator = ({ indicatorInfo }: { indicatorInfo: any }) => {
7272
}
7373
}}
7474
>
75-
<div className="text-[14px] text-[#888] mb-[10px]">
75+
<div className="text-[14px] text-[#999999] mb-[10px]" style={{ fontFamily: 'Microsoft YaHei' }}>
7676
{item.title}
7777
{item.link && <Icon icon="uiw:right" width="16" height="16" className="absolute top-[14px] right-[14px]" />}
7878
</div>
79-
<div className={`${index < 2 ? 'text-[32px] font-medium text-[#101010]' : 'block mt-[30px]'}`}>
79+
<div className={`${index < 2 ? 'text-[32px] font-medium text-[#101010]' : 'block mt-[30px]'}`} style={{ fontFamily: 'Microsoft YaHei' }}>
8080
{item.content}
8181
</div>
8282
</Card>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const RankingList = ({ topRankingList, serviceType }: { topRankingList: RankingL
6969
}}
7070
>
7171
<div className="mb-[10px]">
72-
<span className="text-[14px] text-[#888]" style={{ fontFamily: 'Microsoft YaHei' }}>{item === 'TOP API' ? $t('API 使用排名') : $t('消费者使用排名')}</span>
72+
<span className="text-[14px] text-[#999999]" style={{ fontFamily: 'Microsoft YaHei' }}>{item === 'TOP API' ? $t('API 使用排名') : $t('消费者使用排名')}</span>
7373
</div>
7474
<PageList
7575
id={item}

0 commit comments

Comments
 (0)