feat(indexing): Lot 4 - Progression temps reel, Full Rebuild, Optimisations
- Ajout migrations DB: index_job_errors, library_monitoring, full_rebuild_type - API: endpoints progression temps reel (/jobs/:id/stream), active jobs, details - API: support full_rebuild avec suppression donnees existantes - Indexer: logs detailles avec timing [SCAN][META][PARSER][BDD] - Indexer: optimisation parsing PDF (lopdf -> pdfinfo) 235x plus rapide - Indexer: corrections chemins LIBRARIES_ROOT_PATH pour dev local - Backoffice: composants JobProgress, JobsIndicator (header), JobsList - Backoffice: SSE streaming pour progression temps reel - Backoffice: boutons Index/Index Full sur page libraries - Backoffice: highlight job apres creation avec redirection - Fix: parsing volume type i32, sync meilisearch cleanup Perf: parsing PDF passe de 8.7s a 37ms Perf: indexation 45 fichiers en ~15s vs plusieurs minutes avant
This commit is contained in:
@@ -215,6 +215,25 @@ button:hover {
|
||||
border-color: hsl(2 72% 48% / 0.5);
|
||||
}
|
||||
|
||||
.scan-btn {
|
||||
background: linear-gradient(95deg, hsl(142 60% 45% / 0.15), hsl(142 60% 55% / 0.2));
|
||||
border-color: hsl(142 60% 45% / 0.5);
|
||||
padding: 4px 12px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background: linear-gradient(95deg, hsl(2 72% 48% / 0.15), hsl(338 82% 62% / 0.2));
|
||||
border-color: hsl(2 72% 48% / 0.5);
|
||||
padding: 4px 12px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.full-rebuild-btn {
|
||||
background: linear-gradient(95deg, hsl(280 60% 45% / 0.15), hsl(280 60% 55% / 0.2));
|
||||
border-color: hsl(280 60% 45% / 0.5);
|
||||
}
|
||||
|
||||
.status-pending { color: hsl(45 93% 47%); }
|
||||
.status-running { color: hsl(192 85% 55%); }
|
||||
.status-completed { color: hsl(142 60% 45%); }
|
||||
@@ -729,3 +748,426 @@ button:hover {
|
||||
max-width: 400px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Job Progress Component */
|
||||
.job-progress {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-badge.status-pending {
|
||||
background: hsl(45 93% 90%);
|
||||
color: hsl(45 93% 35%);
|
||||
}
|
||||
|
||||
.status-badge.status-running {
|
||||
background: hsl(198 52% 90%);
|
||||
color: hsl(198 78% 37%);
|
||||
}
|
||||
|
||||
.status-badge.status-success {
|
||||
background: hsl(142 60% 90%);
|
||||
color: hsl(142 60% 35%);
|
||||
}
|
||||
|
||||
.status-badge.status-failed {
|
||||
background: hsl(2 72% 90%);
|
||||
color: hsl(2 72% 45%);
|
||||
}
|
||||
|
||||
.status-badge.status-cancelled {
|
||||
background: hsl(220 13% 90%);
|
||||
color: hsl(220 13% 40%);
|
||||
}
|
||||
|
||||
.complete-badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
background: hsl(142 60% 90%);
|
||||
color: hsl(142 60% 35%);
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
position: relative;
|
||||
height: 24px;
|
||||
background: var(--line);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, hsl(198 78% 37%), hsl(192 85% 55%));
|
||||
border-radius: 12px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.progress-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.current-file {
|
||||
font-size: 0.8rem;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-detailed-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--line);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.error-count {
|
||||
color: hsl(2 72% 48%);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
background: hsl(198 52% 95%);
|
||||
}
|
||||
|
||||
.progress-row td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toggle-progress-btn {
|
||||
margin-left: 8px;
|
||||
padding: 2px 8px;
|
||||
font-size: 0.75rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* Jobs Indicator */
|
||||
.jobs-indicator-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.jobs-indicator {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.jobs-indicator:hover {
|
||||
background: hsl(198 52% 90% / 0.5);
|
||||
}
|
||||
|
||||
.jobs-indicator.active {
|
||||
border-color: hsl(198 78% 37% / 0.5);
|
||||
}
|
||||
|
||||
.jobs-badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
background: hsl(2 72% 48%);
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.jobs-pulse {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: hsl(142 60% 45%);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.jobs-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
min-width: 320px;
|
||||
max-width: 400px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-2);
|
||||
z-index: 100;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.jobs-dropdown-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.jobs-dropdown-header a {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.jobs-empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.jobs-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.job-item {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.job-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.job-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.job-id {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.job-status {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.job-status.status-pending {
|
||||
background: hsl(45 93% 90%);
|
||||
color: hsl(45 93% 35%);
|
||||
}
|
||||
|
||||
.job-status.status-running {
|
||||
background: hsl(198 52% 90%);
|
||||
color: hsl(198 78% 37%);
|
||||
}
|
||||
|
||||
.job-mini-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.job-progress-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: hsl(198 78% 37%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.job-mini-progress span {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
min-width: 35px;
|
||||
}
|
||||
|
||||
.job-file {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-loading,
|
||||
.progress-error {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.progress-error {
|
||||
color: hsl(2 72% 48%);
|
||||
}
|
||||
|
||||
/* Dark mode overrides for new components */
|
||||
.dark .status-badge.status-pending {
|
||||
background: hsl(45 93% 25%);
|
||||
color: hsl(45 93% 65%);
|
||||
}
|
||||
|
||||
.dark .status-badge.status-running {
|
||||
background: hsl(198 52% 25%);
|
||||
color: hsl(198 78% 75%);
|
||||
}
|
||||
|
||||
.dark .status-badge.status-success {
|
||||
background: hsl(142 60% 25%);
|
||||
color: hsl(142 60% 65%);
|
||||
}
|
||||
|
||||
.dark .status-badge.status-failed {
|
||||
background: hsl(2 72% 25%);
|
||||
color: hsl(2 72% 65%);
|
||||
}
|
||||
|
||||
.dark .status-badge.status-cancelled {
|
||||
background: hsl(220 13% 25%);
|
||||
color: hsl(220 13% 65%);
|
||||
}
|
||||
|
||||
.dark .complete-badge {
|
||||
background: hsl(142 60% 25%);
|
||||
color: hsl(142 60% 65%);
|
||||
}
|
||||
|
||||
.dark .progress-row {
|
||||
background: hsl(198 52% 15%);
|
||||
}
|
||||
|
||||
.dark .jobs-indicator:hover {
|
||||
background: hsl(210 34% 24% / 0.5);
|
||||
}
|
||||
|
||||
.dark .job-status.status-pending {
|
||||
background: hsl(45 93% 25%);
|
||||
color: hsl(45 93% 65%);
|
||||
}
|
||||
|
||||
.dark .job-status.status-running {
|
||||
background: hsl(198 52% 25%);
|
||||
color: hsl(198 78% 75%);
|
||||
}
|
||||
|
||||
/* Progress bar visibility fix */
|
||||
.job-progress {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin: 8px 0;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
position: relative;
|
||||
height: 24px;
|
||||
background: hsl(220 13% 90%);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, hsl(198 78% 37%), hsl(192 85% 55%));
|
||||
border-radius: 12px;
|
||||
transition: width 0.5s ease;
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
text-shadow: 0 0 2px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
background: hsl(198 52% 95%);
|
||||
}
|
||||
|
||||
.progress-row td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Highlighted job row */
|
||||
tr.job-highlighted {
|
||||
background: hsl(198 78% 95%);
|
||||
box-shadow: inset 0 0 0 2px hsl(198 78% 37%);
|
||||
}
|
||||
|
||||
tr.job-highlighted td {
|
||||
animation: pulse-border 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-border {
|
||||
0%, 100% { box-shadow: inset 0 0 0 1px hsl(198 78% 37% / 0.3); }
|
||||
50% { box-shadow: inset 0 0 0 2px hsl(198 78% 37% / 0.6); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user