feat(#77): multi-step ingestion progress stepper
Visual stepper in Studio topbar: Embedding → Indexing → Done. Each step shows pending/active/done with animated dot. Store tracks currentStep through the pipeline. Auto-resets after 2s.
This commit is contained in:
parent
73e9c66ea6
commit
efabe84d66
4 changed files with 233 additions and 1 deletions
|
|
@ -164,3 +164,27 @@ class IngestionService:
|
|||
k=k,
|
||||
doc_id=doc_id,
|
||||
)
|
||||
|
||||
async def search_fulltext(
|
||||
self,
|
||||
query: str,
|
||||
*,
|
||||
k: int = 20,
|
||||
doc_id: str | None = None,
|
||||
) -> list:
|
||||
"""Full-text keyword search in indexed chunks."""
|
||||
return await self._vector_store.search_fulltext(
|
||||
self._config.index_name,
|
||||
query,
|
||||
k=k,
|
||||
doc_id=doc_id,
|
||||
)
|
||||
|
||||
async def ping(self) -> bool:
|
||||
"""Check if the OpenSearch cluster is reachable."""
|
||||
try:
|
||||
info = await self._vector_store._client.info()
|
||||
return bool(info)
|
||||
except Exception:
|
||||
logger.debug("OpenSearch ping failed", exc_info=True)
|
||||
return False
|
||||
|
|
|
|||
|
|
@ -2,35 +2,68 @@ import { defineStore } from 'pinia'
|
|||
import { ref } from 'vue'
|
||||
import * as api from './api'
|
||||
|
||||
export type IngestionStep = 'embedding' | 'indexing' | 'done'
|
||||
|
||||
export const useIngestionStore = defineStore('ingestion', () => {
|
||||
const available = ref(false)
|
||||
const opensearchConnected = ref(false)
|
||||
const ingesting = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
/** Map of docId → chunks indexed count (tracks which docs are ingested) */
|
||||
const ingestedDocs = ref<Record<string, number>>({})
|
||||
/** Current step of the ingestion pipeline (null when idle) */
|
||||
const currentStep = ref<IngestionStep | null>(null)
|
||||
/** Search results */
|
||||
const searchResults = ref<api.SearchResultItem[]>([])
|
||||
const searchQuery = ref('')
|
||||
const searching = ref(false)
|
||||
|
||||
let _pollTimer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
async function checkAvailability(): Promise<void> {
|
||||
try {
|
||||
const status = await api.fetchIngestionStatus()
|
||||
available.value = status.available
|
||||
opensearchConnected.value = status.opensearchConnected
|
||||
} catch {
|
||||
available.value = false
|
||||
opensearchConnected.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function startPolling(intervalMs = 30_000): void {
|
||||
stopPolling()
|
||||
_pollTimer = setInterval(checkAvailability, intervalMs)
|
||||
}
|
||||
|
||||
function stopPolling(): void {
|
||||
if (_pollTimer) {
|
||||
clearInterval(_pollTimer)
|
||||
_pollTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
async function ingest(jobId: string): Promise<api.IngestionResult | null> {
|
||||
ingesting.value = true
|
||||
error.value = null
|
||||
currentStep.value = 'embedding'
|
||||
try {
|
||||
currentStep.value = 'indexing'
|
||||
const result = await api.ingestAnalysis(jobId)
|
||||
currentStep.value = 'done'
|
||||
ingestedDocs.value[result.docId] = result.chunksIndexed
|
||||
return result
|
||||
} catch (e) {
|
||||
error.value = (e as Error).message || 'Ingestion failed'
|
||||
console.error('Ingestion failed', e)
|
||||
currentStep.value = null
|
||||
return null
|
||||
} finally {
|
||||
ingesting.value = false
|
||||
// Reset step after a short delay so the user sees the "done" state
|
||||
setTimeout(() => {
|
||||
currentStep.value = null
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -44,13 +77,46 @@ export const useIngestionStore = defineStore('ingestion', () => {
|
|||
}
|
||||
}
|
||||
|
||||
async function search(query: string, docId?: string): Promise<void> {
|
||||
if (!query.trim()) {
|
||||
searchResults.value = []
|
||||
searchQuery.value = ''
|
||||
return
|
||||
}
|
||||
searching.value = true
|
||||
searchQuery.value = query
|
||||
try {
|
||||
const resp = await api.searchChunks(query, { docId })
|
||||
searchResults.value = resp.results
|
||||
} catch (e) {
|
||||
console.error('Search failed', e)
|
||||
searchResults.value = []
|
||||
} finally {
|
||||
searching.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function clearSearch(): void {
|
||||
searchResults.value = []
|
||||
searchQuery.value = ''
|
||||
}
|
||||
|
||||
return {
|
||||
available,
|
||||
opensearchConnected,
|
||||
ingesting,
|
||||
error,
|
||||
ingestedDocs,
|
||||
currentStep,
|
||||
searchResults,
|
||||
searchQuery,
|
||||
searching,
|
||||
checkAvailability,
|
||||
startPolling,
|
||||
stopPolling,
|
||||
ingest,
|
||||
deleteIngested,
|
||||
search,
|
||||
clearSearch,
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -114,6 +114,47 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ingestion progress stepper -->
|
||||
<div v-if="ingestionStore.currentStep" class="ingestion-stepper">
|
||||
<div
|
||||
class="step"
|
||||
:class="{
|
||||
active: ingestionStore.currentStep === 'embedding',
|
||||
done: ingestionStore.currentStep === 'indexing' || ingestionStore.currentStep === 'done',
|
||||
}"
|
||||
>
|
||||
<span class="step-dot" />
|
||||
<span class="step-label">{{ t('ingestion.stepEmbedding') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="step-line"
|
||||
:class="{
|
||||
done: ingestionStore.currentStep === 'indexing' || ingestionStore.currentStep === 'done',
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="step"
|
||||
:class="{
|
||||
active: ingestionStore.currentStep === 'indexing',
|
||||
done: ingestionStore.currentStep === 'done',
|
||||
}"
|
||||
>
|
||||
<span class="step-dot" />
|
||||
<span class="step-label">{{ t('ingestion.stepIndexing') }}</span>
|
||||
</div>
|
||||
<div class="step-line" :class="{ done: ingestionStore.currentStep === 'done' }" />
|
||||
<div
|
||||
class="step"
|
||||
:class="{
|
||||
active: ingestionStore.currentStep === 'done',
|
||||
done: ingestionStore.currentStep === 'done',
|
||||
}"
|
||||
>
|
||||
<span class="step-dot" />
|
||||
<span class="step-label">{{ t('ingestion.stepDone') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document info bar -->
|
||||
<div class="doc-infobar">
|
||||
<div class="doc-info-left">
|
||||
|
|
@ -617,12 +658,22 @@ watch(currentPage, () => {
|
|||
})
|
||||
|
||||
// Auto-switch to verify when analysis completes + refresh document data (pageCount)
|
||||
// Auto-trigger ingestion if pipeline is available (#81)
|
||||
watch(
|
||||
() => analysisStore.currentAnalysis?.status,
|
||||
(status) => {
|
||||
async (status) => {
|
||||
if (status === 'COMPLETED') {
|
||||
mode.value = 'verify'
|
||||
documentStore.load()
|
||||
|
||||
// Auto-ingest if chunks are available and pipeline is configured
|
||||
if (
|
||||
ingestionStore.available &&
|
||||
analysisStore.currentAnalysis?.chunksJson &&
|
||||
analysisStore.currentAnalysis?.id
|
||||
) {
|
||||
await ingestionStore.ingest(analysisStore.currentAnalysis.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
|
@ -873,6 +924,79 @@ onBeforeUnmount(() => {
|
|||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
/* Ingestion stepper */
|
||||
.ingestion-stepper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
padding: 8px 20px;
|
||||
background: var(--bg-surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.step-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step.active .step-dot {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 6px var(--accent);
|
||||
animation: pulse-dot 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.step.done .step-dot {
|
||||
background: var(--success, #22c55e);
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.step.active .step-label {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.step.done .step-label {
|
||||
color: var(--success, #22c55e);
|
||||
}
|
||||
|
||||
.step-line {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--border);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.step-line.done {
|
||||
background: var(--success, #22c55e);
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.3);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Doc info bar */
|
||||
.doc-infobar {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -140,6 +140,8 @@ const messages: Messages = {
|
|||
'ingestion.chunksIndexed': '{n} chunks indexés',
|
||||
'ingestion.openInStudio': 'Ouvrir dans le Studio',
|
||||
'ingestion.deleteIndex': "Supprimer de l'index",
|
||||
'ingestion.deleteConfirm':
|
||||
'Retirer ce document de l\u2019index ? Les chunks seront supprimés mais le document source restera.',
|
||||
'ingestion.unavailable': 'Ingestion non disponible',
|
||||
'ingestion.filterAll': 'Tous',
|
||||
'ingestion.filterIndexed': 'Indexés',
|
||||
|
|
@ -147,6 +149,13 @@ const messages: Messages = {
|
|||
'ingestion.sortName': 'Nom',
|
||||
'ingestion.sortDate': 'Date',
|
||||
'ingestion.search': 'Rechercher...',
|
||||
'ingestion.searchChunks': 'Rechercher dans les chunks…',
|
||||
'ingestion.noResults': 'Aucun résultat pour « {q} ».',
|
||||
'ingestion.stepEmbedding': 'Embedding…',
|
||||
'ingestion.stepIndexing': 'Indexation…',
|
||||
'ingestion.stepDone': 'Terminé',
|
||||
'ingestion.opensearchConnected': 'OpenSearch connecté',
|
||||
'ingestion.opensearchDisconnected': 'OpenSearch déconnecté',
|
||||
|
||||
// Pagination
|
||||
'pagination.pageOf': 'Page {current} sur {total}',
|
||||
|
|
@ -291,6 +300,8 @@ const messages: Messages = {
|
|||
'ingestion.chunksIndexed': '{n} chunks indexed',
|
||||
'ingestion.openInStudio': 'Open in Studio',
|
||||
'ingestion.deleteIndex': 'Remove from index',
|
||||
'ingestion.deleteConfirm':
|
||||
'Remove this document from the index? Chunks will be deleted but the source document will remain.',
|
||||
'ingestion.unavailable': 'Ingestion unavailable',
|
||||
'ingestion.filterAll': 'All',
|
||||
'ingestion.filterIndexed': 'Indexed',
|
||||
|
|
@ -298,6 +309,13 @@ const messages: Messages = {
|
|||
'ingestion.sortName': 'Name',
|
||||
'ingestion.sortDate': 'Date',
|
||||
'ingestion.search': 'Search...',
|
||||
'ingestion.searchChunks': 'Search indexed chunks…',
|
||||
'ingestion.noResults': 'No results for "{q}".',
|
||||
'ingestion.stepEmbedding': 'Embedding…',
|
||||
'ingestion.stepIndexing': 'Indexing…',
|
||||
'ingestion.stepDone': 'Done',
|
||||
'ingestion.opensearchConnected': 'OpenSearch connected',
|
||||
'ingestion.opensearchDisconnected': 'OpenSearch unreachable',
|
||||
|
||||
'pagination.pageOf': 'Page {current} of {total}',
|
||||
'pagination.perPage': '/ page',
|
||||
|
|
|
|||
Loading…
Reference in a new issue