gmakstutis/LightRAG
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Show stats 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 { toast } from 'sonner'
import { useBackendState } from '@/stores/state' 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' import PipelineStatusDialog from '@/components/documents/PipelineStatusDialog'
type StatusFilter = DocStatus | 'all'; type StatusFilter = DocStatus | 'all';
@ -59,6 +59,26 @@ const getDisplayFileName = (doc: DocStatusResponse, maxLength: number = 20): str
: fileName; : 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 = ` const pulseStyle = `
/* Tooltip styles */ /* Tooltip styles */
.tooltip-container { .tooltip-container {
@ -1168,23 +1188,39 @@ export default function DocumentManager() {
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
{doc.status === 'processed' && ( <div className="group relative flex items-center overflow-visible tooltip-container">
<span className="text-green-600">{t('documentPanel.documentManager.status.completed')}</span> {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 === '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 === '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.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}>
⚠️ {/* Icon rendering logic */}
</span> {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>
<TableCell>{doc.content_length ?? '-'}</TableCell> <TableCell>{doc.content_length ?? '-'}</TableCell>
<TableCell>{doc.chunks_count ?? '-'}</TableCell> <TableCell>{doc.chunks_count ?? '-'}</TableCell>