feat(ui): add live collection job status mock screen

web/static/js/app.js

@@ -11,6 +11,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
 let sourceType = 'archive';
 let apiConnectPayload = null;
+let collectionJob = null;
+let collectionJobPollTimer = null;
+let collectionJobScenario = [];
+let collectionJobScenarioIndex = 0;
+let collectionJobLogCounter = 0;
 
 function initSourceType() {
     const sourceButtons = document.querySelectorAll('.source-switch-btn');
@@ -43,23 +48,32 @@ function initApiSource() {
     }
 
     const authTypeField = document.getElementById('api-auth-type');
+    const cancelJobButton = document.getElementById('cancel-job-btn');
     const fieldNames = ['host', 'protocol', 'port', 'username', 'authType', 'password', 'token'];
 
     apiForm.addEventListener('submit', (event) => {
         event.preventDefault();
         const { isValid, payload, errors } = validateCollectForm();
         renderFormErrors(errors);
-        renderApiConnectStatus(isValid, payload);
 
         if (!isValid) {
+            renderApiConnectStatus(false, null);
             apiConnectPayload = null;
             return;
         }
 
         apiConnectPayload = payload;
+        renderApiConnectStatus(true, payload);
+        startCollectionJob(payload);
         console.log('API payload prepared:', apiConnectPayload);
     });
 
+    if (cancelJobButton) {
+        cancelJobButton.addEventListener('click', () => {
+            cancelCollectionJob();
+        });
+    }
+
     fieldNames.forEach((fieldName) => {
         const field = apiForm.elements.namedItem(fieldName);
         if (!field) {
@@ -75,10 +89,15 @@ function initApiSource() {
             const { errors } = validateCollectForm();
             renderFormErrors(errors);
             clearApiConnectStatus();
+
+            if (collectionJob && isCollectionJobTerminal(collectionJob.status)) {
+                resetCollectionJobState();
+            }
         });
     });
 
     toggleApiAuthFields(authTypeField.value);
+    renderCollectionJob();
 }
 
 function validateCollectForm() {
@@ -215,6 +234,167 @@ function clearApiConnectStatus() {
     status.className = 'api-connect-status';
 }
 
+function startCollectionJob(payload) {
+    resetCollectionJobState();
+
+    const totalSteps = 4;
+    const finalStatus = Math.random() < 0.2 ? 'Failed' : 'Success';
+    const jobId = `job-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+
+    collectionJob = {
+        id: jobId,
+        status: 'Queued',
+        progress: 0,
+        currentStep: 0,
+        totalSteps,
+        logs: [],
+        payload
+    };
+
+    collectionJobScenario = [
+        { status: 'Running', step: 1, message: 'Соединение с BMC установлено.' },
+        { status: 'Running', step: 2, message: 'Собираем базовую конфигурацию сервера.' },
+        { status: 'Running', step: 3, message: 'Собираем системные журналы и события.' },
+        {
+            status: finalStatus,
+            step: 4,
+            message: finalStatus === 'Success'
+                ? 'Сбор завершен. Данные готовы к следующему этапу.'
+                : 'Сбор завершился с ошибкой: часть данных недоступна.'
+        }
+    ];
+    collectionJobScenarioIndex = 0;
+
+    appendJobLog('Задача создана и добавлена в очередь.');
+    setApiFormBlocked(true);
+    renderCollectionJob();
+
+    collectionJobPollTimer = window.setInterval(() => {
+        pollCollectionJobStatus();
+    }, 1200);
+}
+
+function pollCollectionJobStatus() {
+    if (!collectionJob || isCollectionJobTerminal(collectionJob.status)) {
+        clearCollectionJobPolling();
+        return;
+    }
+
+    const nextState = collectionJobScenario[collectionJobScenarioIndex];
+    if (!nextState) {
+        clearCollectionJobPolling();
+        return;
+    }
+
+    collectionJobScenarioIndex += 1;
+    collectionJob.status = nextState.status;
+    collectionJob.currentStep = nextState.step;
+    collectionJob.progress = Math.round((nextState.step / collectionJob.totalSteps) * 100);
+    appendJobLog(nextState.message);
+    renderCollectionJob();
+
+    if (isCollectionJobTerminal(collectionJob.status)) {
+        clearCollectionJobPolling();
+    }
+}
+
+function cancelCollectionJob() {
+    if (!collectionJob || isCollectionJobTerminal(collectionJob.status)) {
+        return;
+    }
+
+    clearCollectionJobPolling();
+    collectionJob.status = 'Canceled';
+    appendJobLog('Задача отменена пользователем.');
+    renderCollectionJob();
+}
+
+function appendJobLog(message) {
+    if (!collectionJob) {
+        return;
+    }
+
+    const time = new Date().toLocaleTimeString('ru-RU', { hour12: false });
+    collectionJob.logs.push({
+        id: ++collectionJobLogCounter,
+        time,
+        message
+    });
+}
+
+function renderCollectionJob() {
+    const jobStatusBlock = document.getElementById('api-job-status');
+    const jobIdValue = document.getElementById('job-id-value');
+    const statusValue = document.getElementById('job-status-value');
+    const progressValue = document.getElementById('job-progress-value');
+    const logsList = document.getElementById('job-logs-list');
+    const cancelButton = document.getElementById('cancel-job-btn');
+    if (!jobStatusBlock || !jobIdValue || !statusValue || !progressValue || !logsList || !cancelButton) {
+        return;
+    }
+
+    if (!collectionJob) {
+        jobStatusBlock.classList.add('hidden');
+        setApiFormBlocked(false);
+        return;
+    }
+
+    jobStatusBlock.classList.remove('hidden');
+    jobIdValue.textContent = collectionJob.id;
+    statusValue.textContent = collectionJob.status;
+    statusValue.className = `job-status-badge status-${collectionJob.status.toLowerCase()}`;
+    const isTerminal = isCollectionJobTerminal(collectionJob.status);
+    const terminalMessage = {
+        Success: 'Сбор завершен',
+        Failed: 'Сбор завершился ошибкой',
+        Canceled: 'Сбор отменен'
+    }[collectionJob.status];
+    const progressLabel = isTerminal
+        ? terminalMessage
+        : `Шаг ${collectionJob.currentStep} из ${collectionJob.totalSteps}`;
+    progressValue.textContent = `${collectionJob.progress}% · ${progressLabel}`;
+
+    logsList.innerHTML = collectionJob.logs.map((log) => (
+        `<li><span class="log-time">${escapeHtml(log.time)}</span><span class="log-message">${escapeHtml(log.message)}</span></li>`
+    )).join('');
+
+    cancelButton.disabled = isTerminal;
+    setApiFormBlocked(!isTerminal);
+}
+
+function isCollectionJobTerminal(status) {
+    return ['Success', 'Failed', 'Canceled'].includes(status);
+}
+
+function setApiFormBlocked(shouldBlock) {
+    const apiForm = document.getElementById('api-connect-form');
+    if (!apiForm) {
+        return;
+    }
+
+    apiForm.classList.toggle('is-disabled', shouldBlock);
+    Array.from(apiForm.elements).forEach((field) => {
+        field.disabled = shouldBlock;
+    });
+}
+
+function clearCollectionJobPolling() {
+    if (!collectionJobPollTimer) {
+        return;
+    }
+
+    window.clearInterval(collectionJobPollTimer);
+    collectionJobPollTimer = null;
+}
+
+function resetCollectionJobState() {
+    clearCollectionJobPolling();
+    collectionJob = null;
+    collectionJobScenario = [];
+    collectionJobScenarioIndex = 0;
+    renderCollectionJob();
+}
+
 function toggleApiAuthFields(authType) {
     const passwordField = document.getElementById('api-password-field');
     const tokenField = document.getElementById('api-token-field');