feat(status): loading/error states, refresh button, auto-poll, health panel, config truncation, doc status highlights
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useTheme } from '../../contexts';
|
||||
import { Content } from '../../components/layout/Content';
|
||||
import { TPattern } from '../../components/common/TPattern';
|
||||
import { getSystemStats, getSystemConfig, type SystemStats, type SystemConfig } from '../../api/status';
|
||||
import { getSystemStats, getSystemConfig, getSystemHealth, type SystemStats, type SystemConfig, type SystemHealth } from '../../api/status';
|
||||
import { getDocumentList, type DocInfo } from '../../api/docs';
|
||||
|
||||
const StatsCard = ({ label, value, accent = false }: {
|
||||
@@ -36,6 +36,40 @@ const StatsCard = ({ label, value, accent = false }: {
|
||||
);
|
||||
};
|
||||
|
||||
const ServiceBadge = ({
|
||||
label,
|
||||
status,
|
||||
detail,
|
||||
}: {
|
||||
label: string;
|
||||
status: 'ok' | 'error' | 'unknown' | boolean;
|
||||
detail?: string;
|
||||
}) => {
|
||||
const { theme } = useTheme();
|
||||
const isOk = status === 'ok' || status === true;
|
||||
const isUnknown = status === 'unknown';
|
||||
const color = isUnknown ? theme.text3 : isOk ? theme.green : '#d64545';
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '12px 16px',
|
||||
background: theme.bgCard,
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${theme.border}`,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ color, fontSize: 10 }}>●</span>
|
||||
<span className="mono" style={{ fontSize: 12, color: theme.text2 }}>{label}</span>
|
||||
</div>
|
||||
<span style={{ fontSize: 12, color, fontWeight: 600 }}>
|
||||
{detail ?? (isUnknown ? '—' : isOk ? 'OK' : 'ERROR')}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const StatusPage: React.FC = () => {
|
||||
const { theme, isDark } = useTheme();
|
||||
const [stats, setStats] = useState<SystemStats>({
|
||||
@@ -46,33 +80,110 @@ export const StatusPage: React.FC = () => {
|
||||
});
|
||||
const [config, setConfig] = useState<SystemConfig | null>(null);
|
||||
const [docs, setDocs] = useState<DocInfo[]>([]);
|
||||
const [health, setHealth] = useState<SystemHealth | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function loadData() {
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [statsRes, configRes, docsRes] = await Promise.all([
|
||||
const [statsRes, configRes, docsRes, healthRes] = await Promise.all([
|
||||
getSystemStats(),
|
||||
getSystemConfig(),
|
||||
getDocumentList(),
|
||||
getSystemHealth(),
|
||||
]);
|
||||
setStats(statsRes);
|
||||
setConfig(configRes);
|
||||
setDocs(docsRes.docs);
|
||||
} catch (error) {
|
||||
console.error('Failed to load status data:', error);
|
||||
setHealth(healthRes);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load status data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const timerId = window.setTimeout(() => {
|
||||
void loadData();
|
||||
}, 0);
|
||||
return () => window.clearTimeout(timerId);
|
||||
}, []);
|
||||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
void loadData();
|
||||
}, [loadData]);
|
||||
|
||||
// Auto-poll every 5 s while any document is still processing
|
||||
useEffect(() => {
|
||||
const hasProcessing = docs.some(d => d.status === 'parsing' || d.status === 'pending');
|
||||
if (!hasProcessing) return;
|
||||
const id = window.setInterval(() => void loadData(), 5000);
|
||||
return () => window.clearInterval(id);
|
||||
}, [docs, loadData]);
|
||||
|
||||
return (
|
||||
<Content>
|
||||
<style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
|
||||
<TPattern />
|
||||
|
||||
{/* Loading indicator */}
|
||||
{loading && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, color: theme.text3, fontSize: 13 }}>
|
||||
<span style={{
|
||||
display: 'inline-block',
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: '50%',
|
||||
border: `2px solid ${theme.accent}`,
|
||||
borderTopColor: 'transparent',
|
||||
animation: 'spin 0.8s linear infinite',
|
||||
}} />
|
||||
<span className="mono">LOADING...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error banner */}
|
||||
{error && (
|
||||
<div style={{
|
||||
marginBottom: 16,
|
||||
padding: '12px 16px',
|
||||
background: '#d6454520',
|
||||
border: '1px solid #d64545',
|
||||
borderRadius: 8,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}>
|
||||
<span style={{ fontSize: 13, color: '#d64545' }}>{error}</span>
|
||||
<button
|
||||
onClick={() => void loadData()}
|
||||
style={{ background: 'none', border: '1px solid #d64545', borderRadius: 6, color: '#d64545', cursor: 'pointer', padding: '4px 10px', fontSize: 12 }}
|
||||
>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats section */}
|
||||
<section style={{ marginBottom: 48 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
|
||||
<h2 style={{ fontSize: 14, fontWeight: 600, color: theme.accent, letterSpacing: '1px', margin: 0 }}>
|
||||
DOCUMENT STATISTICS
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => void loadData()}
|
||||
disabled={loading}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: `1px solid ${theme.border}`,
|
||||
borderRadius: 6,
|
||||
color: theme.text3,
|
||||
cursor: loading ? 'not-allowed' : 'pointer',
|
||||
padding: '4px 12px',
|
||||
fontSize: 11,
|
||||
opacity: loading ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
↻ 刷新
|
||||
</button>
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(4, 1fr)',
|
||||
@@ -85,6 +196,48 @@ export const StatusPage: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service health section */}
|
||||
<section style={{ marginBottom: 48 }}>
|
||||
<h2 style={{ fontSize: 14, fontWeight: 600, color: theme.accent, marginBottom: 20, letterSpacing: '1px' }}>
|
||||
SERVICE HEALTH
|
||||
</h2>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 12 }}>
|
||||
<ServiceBadge
|
||||
label="MILVUS"
|
||||
status={health?.milvus.status ?? 'unknown'}
|
||||
detail={health ? (health.milvus.status === 'ok' ? `${health.milvus.num_entities ?? 0} entities` : 'disconnected') : '—'}
|
||||
/>
|
||||
<ServiceBadge
|
||||
label="MINIO"
|
||||
status={health?.minio.status ?? 'unknown'}
|
||||
detail={health ? (health.minio.status === 'ok' ? 'connected' : 'disconnected') : '—'}
|
||||
/>
|
||||
<ServiceBadge
|
||||
label="BM25 HYBRID"
|
||||
status={health?.bm25.available ?? false}
|
||||
detail={health ? (health.bm25.available ? 'enabled' : 'unavailable') : '—'}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
|
||||
<ServiceBadge
|
||||
label="RERANKER"
|
||||
status={health?.reranker.enabled ?? false}
|
||||
detail={health ? (health.reranker.enabled ? (health.reranker.model ?? 'enabled') : 'disabled') : '—'}
|
||||
/>
|
||||
<ServiceBadge
|
||||
label="SESSIONS"
|
||||
status="ok"
|
||||
detail={health ? `${health.sessions.active} / ${health.sessions.max}` : '—'}
|
||||
/>
|
||||
<ServiceBadge
|
||||
label="LLM"
|
||||
status="ok"
|
||||
detail={config ? `${config.llm_provider} · ${config.llm_model}` : '—'}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* System configuration section */}
|
||||
<section style={{ marginBottom: 48 }}>
|
||||
<h2 style={{
|
||||
fontSize: 14,
|
||||
@@ -116,9 +269,24 @@ export const StatusPage: React.FC = () => {
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${theme.border}`,
|
||||
boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
|
||||
<span className="mono" style={{ fontSize: 12, color: theme.text3, flexShrink: 0 }}>{k}</span>
|
||||
<span
|
||||
title={v}
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
maxWidth: 200,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
cursor: 'help',
|
||||
marginLeft: 8,
|
||||
}}
|
||||
>
|
||||
{v}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -145,15 +313,31 @@ export const StatusPage: React.FC = () => {
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${theme.border}`,
|
||||
boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
|
||||
<span className="mono" style={{ fontSize: 12, color: theme.text3, flexShrink: 0 }}>{k}</span>
|
||||
<span
|
||||
title={v}
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
maxWidth: 200,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
cursor: 'help',
|
||||
marginLeft: 8,
|
||||
}}
|
||||
>
|
||||
{v}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Document index section */}
|
||||
<section>
|
||||
<h2 style={{
|
||||
fontSize: 14,
|
||||
@@ -171,23 +355,31 @@ export const StatusPage: React.FC = () => {
|
||||
background: theme.bgCard,
|
||||
borderRadius: 10,
|
||||
marginBottom: 10,
|
||||
border: `1px solid ${theme.border}`,
|
||||
border: `1px solid ${
|
||||
d.status === 'failed' ? '#d64545' :
|
||||
d.status === 'parsing' || d.status === 'pending' ? theme.accent + '80' :
|
||||
theme.border
|
||||
}`,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<span style={{ fontSize: 14 }}>{d.name}</span>
|
||||
<span className="mono" style={{ fontSize: 11, color: theme.text3 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, overflow: 'hidden' }}>
|
||||
<span style={{ fontSize: 14, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.name}</span>
|
||||
<span className="mono" style={{ fontSize: 11, color: theme.text3, flexShrink: 0 }}>
|
||||
{d.updated_at ? new Date(d.updated_at).toLocaleString() : d.status}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16, flexShrink: 0 }}>
|
||||
<span className="mono" style={{ fontSize: 12, color: theme.text2 }}>{d.chunks} chunks</span>
|
||||
<div style={{
|
||||
padding: '4px 12px',
|
||||
background: d.status === 'failed' ? '#d64545' : theme.green,
|
||||
background:
|
||||
d.status === 'failed' ? '#d64545' :
|
||||
d.status === 'parsing' || d.status === 'pending' ? theme.accent :
|
||||
theme.green,
|
||||
borderRadius: 6,
|
||||
opacity: d.status === 'parsing' || d.status === 'pending' ? 0.85 : 1,
|
||||
}}>
|
||||
<span className="mono" style={{ fontSize: 10, fontWeight: 600, color: '#fff' }}>
|
||||
{d.status.toUpperCase()}
|
||||
{d.status === 'parsing' ? '⟳ ' : ''}{d.status.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user