MtoRagSystem/templates/admin/job/show.html.twig

{% extends 'admin/base.html.twig' %}

{% block title %}Ingest Job{% endblock %}

{% block body %}

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">Ingest Job</h1>

        <a href="{{ path('admin_jobs') }}"
           class="btn btn-sm btn-outline-secondary">
            Zurück zur Übersicht
        </a>
    </div>

    <div class="card bg-black border-secondary text-light">
        <div class="card-body">

            <div class="mb-2">
                <strong>ID:</strong>
                <span class="small text-light">{{ job.id }}</span>
            </div>

            <div class="mb-2">
                <strong>Typ:</strong>
                <span class="badge bg-info text-dark">{{ job.type }}</span>
            </div>

            <div class="mb-2">
                <strong>Status:</strong>
                <span id="job-status-badge"></span>
            </div>

            <div class="mb-2">
                <strong>Dokument:</strong>
                {% if job.documentId %}
                    <a href="{{ path('admin_document_show', {id: job.documentId}) }}"
                       class="text-light text-decoration-none">
                        {{ job.documentId }}
                    </a>
                {% else %}
                    -
                {% endif %}
            </div>

            <div class="mb-2">
                <strong>Version:</strong>
                {{ job.documentVersionId ?? '-' }}
            </div>

            <div class="mb-2">
                <strong>Gestartet:</strong>
                {{ job.startedAt|date('d.m.Y H:i:s') }}
            </div>

            <div class="mb-2">
                <strong>Beendet:</strong>
                <span id="job-finished-at">
                {{ job.finishedAt ? job.finishedAt|date('d.m.Y H:i:s') : '-' }}
            </span>
            </div>

            <div class="mb-2">
                <strong>Gestartet von:</strong>
                {{ job.startedBy ? job.startedBy.email : '-' }}
            </div>

            {# Loader #}
            <div id="job-loader"
                 class="mt-3 d-none">
                <div class="d-flex align-items-center gap-2">
                    <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                    <div>
                        <strong>Prozess läuft…</strong><br>
                        <small class="text-secondary">
                            Der Status wird automatisch aktualisiert.
                        </small>
                    </div>
                </div>
            </div>

            {# Fehlerbereich #}
            <div id="job-error"
                 class="alert alert-danger mt-3 {% if not job.errorMessage %}d-none{% endif %}">
                {% if job.errorMessage %}
                    {{ job.errorMessage }}
                {% endif %}
            </div>

        </div>
    </div>

    <div class="mt-4 small text-secondary">
        Hinweis: Bei DOCUMENT_VERSION_ACTIVATE-Jobs wird ein vollständiger
        NDJSON-Rebuild und FAISS-Reindex durchgeführt.
    </div>

    <script>
        (function () {

            const statusUrl = {{ path('admin_job_status', {id: job.id})|json_encode|raw }};
            const badgeWrap = document.getElementById('job-status-badge');
            const finishedAtEl = document.getElementById('job-finished-at');
            const loaderEl = document.getElementById('job-loader');
            const errorEl = document.getElementById('job-error');

            let timer = null;

            function renderBadge(status) {
                const map = {
                    COMPLETED: 'bg-success',
                    QUEUED: 'bg-secondary',
                    RUNNING: 'bg-warning text-dark',
                    FAILED: 'bg-danger',
                    ABORTED: 'bg-dark'
                };

                const css = map[status] || 'bg-secondary';
                badgeWrap.innerHTML =
                    `<span class="badge ${css}">${status}</span>`;
            }

            function stopPolling() {
                if (timer) {
                    clearInterval(timer);
                    timer = null;
                }
            }

            async function poll() {
                try {
                    const res = await fetch(statusUrl);
                    if (!res.ok) return;

                    const data = await res.json();
                    const status = (data.status || '').toUpperCase();

                    renderBadge(status);

                    finishedAtEl.textContent =
                        data.finishedAt
                            ? new Date(data.finishedAt).toLocaleString('de-DE')
                            : '-';

                    if (status === 'QUEUED' || status === 'RUNNING') {
                        loaderEl.classList.remove('d-none');
                    } else {
                        loaderEl.classList.add('d-none');
                        stopPolling();
                    }

                    if (status === 'FAILED' && data.errorMessage) {
                        errorEl.classList.remove('d-none');
                        errorEl.innerHTML =
                            `<strong>Fehler:</strong><br>${data.errorMessage}`;
                    }

                } catch (e) {
                    stopPolling();
                }
            }

            // Initial render from server state
            renderBadge("{{ job.status|upper }}");

            if (["QUEUED", "RUNNING"].includes("{{ job.status|upper }}")) {
                loaderEl.classList.remove('d-none');
                timer = setInterval(poll, 2000);
            }

        })();
    </script>

{% endblock %}