vasceannie/lightrag
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Enhance document status display with metadata tooltips and better icons

Browse Source 
- Add metadata formatting with timestamps
- Replace warning emoji with proper icons
- Show tooltips for errors and metadata
- Import AlertTriangle and Info icons
- Improve status cell layout and styling
This commit is contained in:
yangdx
2025-09-05 22:02:26 +08:00
parent fcc737c83e
commit 1be7c53fcc
1 changed files with 54 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
lightrag_webui/src/features/DocumentManager.tsx
View File

@@ -32,7 +32,7 @@ import { errorMessage } from '@/lib/utils'
import { toast } from 'sonner'
import { useBackendState } from '@/stores/state'
import { RefreshCwIcon, ActivityIcon, ArrowUpIcon, ArrowDownIcon, RotateCcwIcon, CheckSquareIcon, XIcon } from 'lucide-react'
import { RefreshCwIcon, ActivityIcon, ArrowUpIcon, ArrowDownIcon, RotateCcwIcon, CheckSquareIcon, XIcon, AlertTriangle, Info } from 'lucide-react'
import PipelineStatusDialog from '@/components/documents/PipelineStatusDialog'
type StatusFilter = DocStatus | 'all';
@@ -59,6 +59,26 @@ const getDisplayFileName = (doc: DocStatusResponse, maxLength: number = 20): str
: fileName;
};
const formatMetadata = (metadata: Record<string, any>): string => {
const formattedMetadata = { ...metadata };
if (formattedMetadata.processing_start_time && typeof formattedMetadata.processing_start_time === 'number') {
const date = new Date(formattedMetadata.processing_start_time * 1000);
if (!isNaN(date.getTime())) {
formattedMetadata.processing_start_time = date.toLocaleString();
}
}
if (formattedMetadata.processing_end_time && typeof formattedMetadata.processing_end_time === 'number') {
const date = new Date(formattedMetadata.processing_end_time * 1000);
if (!isNaN(date.getTime())) {
formattedMetadata.processing_end_time = date.toLocaleString();
}
}
return JSON.stringify(formattedMetadata, null, 2);
};
const pulseStyle = `
/* Tooltip styles */
.tooltip-container {
@@ -1168,23 +1188,39 @@ export default function DocumentManager() {
</div>
</TableCell>
<TableCell>
{doc.status === 'processed' && (
<span className="text-green-600">{t('documentPanel.documentManager.status.completed')}</span>
)}
{doc.status === 'processing' && (
<span className="text-blue-600">{t('documentPanel.documentManager.status.processing')}</span>
)}
{doc.status === 'pending' && (
<span className="text-yellow-600">{t('documentPanel.documentManager.status.pending')}</span>
)}
{doc.status === 'failed' && (
<span className="text-red-600">{t('documentPanel.documentManager.status.failed')}</span>
)}
{doc.error_msg && (
<span className="ml-2 text-red-500" title={doc.error_msg}>
⚠️
</span>
)}
<div className="group relative flex items-center overflow-visible tooltip-container">
{doc.status === 'processed' && (
<span className="text-green-600">{t('documentPanel.documentManager.status.completed')}</span>
)}
{doc.status === 'processing' && (
<span className="text-blue-600">{t('documentPanel.documentManager.status.processing')}</span>
)}
{doc.status === 'pending' && (
<span className="text-yellow-600">{t('documentPanel.documentManager.status.pending')}</span>
)}
{doc.status === 'failed' && (
<span className="text-red-600">{t('documentPanel.documentManager.status.failed')}</span>
)}
{/* Icon rendering logic */}
{doc.error_msg ? (
<AlertTriangle className="ml-2 h-4 w-4 text-yellow-500" />
) : (doc.metadata && Object.keys(doc.metadata).length > 0) && (
<Info className="ml-2 h-4 w-4 text-blue-500" />
)}
{/* Tooltip rendering logic */}
{(doc.error_msg || (doc.metadata && Object.keys(doc.metadata).length > 0)) && (
<div className="invisible group-hover:visible tooltip">
{doc.error_msg && (
<pre>{doc.error_msg}</pre>
)}
{doc.metadata && Object.keys(doc.metadata).length > 0 && (
<pre>{formatMetadata(doc.metadata)}</pre>
)}
</div>
)}
</div>
</TableCell>
<TableCell>{doc.content_length ?? '-'}</TableCell>
<TableCell>{doc.chunks_count ?? '-'}</TableCell>