feat(usage-logs): enhance stream status display with error tooltip

This commit is contained in:
CaIon
2026-04-02 22:27:11 +08:00
parent 1baf4a6337
commit c9611c493f
@@ -35,7 +35,7 @@ import {
renderModelPriceSimple, renderModelPriceSimple,
} from '../../../helpers'; } from '../../../helpers';
import { IconHelpCircle } from '@douyinfe/semi-icons'; import { IconHelpCircle } from '@douyinfe/semi-icons';
import { Route, Sparkles } from 'lucide-react'; import { CircleAlert, Route, Sparkles } from 'lucide-react';
const colors = [ const colors = [
'amber', 'amber',
@@ -141,12 +141,58 @@ function renderType(type, t) {
} }
} }
function renderIsStream(bool, t) { function buildStreamStatusTooltip(ss, t) {
if (!ss) return null;
const lines = [
t('流状态') + '' + t('异常'),
(ss.end_reason || 'unknown'),
];
if (ss.error_count > 0) {
lines.push(`${t('软错误')}: ${ss.error_count}`);
}
if (ss.end_error) {
lines.push(ss.end_error);
}
return (
<div style={{ lineHeight: 1.6, display: 'flex', flexDirection: 'column' }}>
{lines.map((line, i) => (
<div key={i}>{line}</div>
))}
</div>
);
}
function renderIsStream(bool, t, streamStatus) {
const isError = streamStatus && streamStatus.status !== 'ok';
if (bool) { if (bool) {
return ( return (
<Tag color='blue' shape='circle'> <span style={{ position: 'relative', display: 'inline-block' }}>
{t('流')} <Tag color='blue' shape='circle'>
</Tag> {t('流')}
</Tag>
{isError && (
<Tooltip content={buildStreamStatusTooltip(streamStatus, t)}>
<span
style={{
position: 'absolute',
right: -4,
top: -4,
lineHeight: 1,
color: '#ef4444',
cursor: 'pointer',
userSelect: 'none',
}}
>
<CircleAlert
size={14}
strokeWidth={2.5}
color='currentColor'
/>
</span>
</Tooltip>
)}
</span>
); );
} else { } else {
return ( return (
@@ -694,7 +740,7 @@ export const getLogsColumns = ({
<Space> <Space>
{renderUseTime(text, t)} {renderUseTime(text, t)}
{renderFirstUseTime(other?.frt, t)} {renderFirstUseTime(other?.frt, t)}
{renderIsStream(record.is_stream, t)} {renderIsStream(record.is_stream, t, other?.stream_status)}
</Space> </Space>
</> </>
); );