// scenario-form.js — модальный редактор сценариев // // Это САМЫЙ СЛОЖНЫЙ модуль фронтенда (~358 строк). // Редактор позволяет создавать/редактировать сценарии через модальное окно. // // СОСТОЯНИЕ РЕДАКТОРА: scenarioEditorState = { // defId, version, name, steps: [{service_id, operation, output, instance_ref, instance_uid, params, _svcOpId}], // services: [], cloudInstances: [], opsCache: {}, paramDefsCache: {} // } // // ЖИЗНЕННЫЙ ЦИКЛ РЕДАКТИРОВАНИЯ: // 1. showScenarioEditor(def) — инициализация, загрузка сервисов/инстансов, renderEditor() // 2. renderEditor() — отрисовка модала с шагами // 3. Пользователь меняет операцию → onOpChange → renderEditor (перерисовка) // 4. Для каждого шага с операцией — loadStepParams (GET /api/params/{opId}) // 5. Параметры рендерятся через params-render.js // 6. Перед перерисовкой — snapshotAllParams (сохранить несохранённые правки) // 7. Сохранение — collectFormSteps → POST/PUT /api/scenario/definitions // // ОБРАТНЫЙ МАППИНГ ПАРАМЕТРОВ: // В форме параметры хранятся с числовыми ID (как и в API). // В БД сценария — с символьными именами. // При сохранении: numeric_id → name (через paramDefsCache) // При загрузке: name → numeric_id (подстановка в defaultValue) let scenarioEditorState = null; /** * Открыть редактор сценария. * * @param {Object|null} def — определение сценария или null (новый) */ async function showScenarioEditor(def) { // Инициализация состояния scenarioEditorState = def ? { defId: def.id, version: def.version, name: def.name, steps: (def.steps || []).map(s => ({ service_id: s.service_id || '', operation: s.operation || '', output: s.output || '', instance_ref: s.instance_ref || '', instance_uid: s.instance_uid || '', params: s.params || {} // {name: value} — символьные имена })), services: [], cloudInstances: [], opsCache: {}, paramDefsCache: {} } : { defId: null, version: 1, name: '', steps: [], services: [], cloudInstances: [], opsCache: {}, paramDefsCache: {} }; // Загрузить справочные данные: сервисы + инстансы (для select'ов) try { const [svcR, instR] = await Promise.all([ fetch('/api/services').then(r => r.json()), fetch('/api/instances/list').then(r => r.json()) ]); scenarioEditorState.services = svcR || []; scenarioEditorState.cloudInstances = instR || []; } catch (e) { scenarioEditorState.services = []; scenarioEditorState.cloudInstances = []; } renderEditor(); } /** * Открыть модальное окно с HTML-контентом. * * @param {string} html — HTML-контент модала */ function openModal(html) { let modal = document.getElementById('scenario-modal'); if (!modal) { // Создать модал при первом вызове modal = document.createElement('div'); modal.id = 'scenario-modal'; // backdrop — закрытие по клику вне модала modal.innerHTML = '
'; document.body.appendChild(modal); } modal.style.display = 'block'; document.getElementById('modal-content').innerHTML = html; } /** * Закрыть модальное окно и обновить список сценариев. */ function closeModal() { const modal = document.getElementById('scenario-modal'); if (modal) modal.style.display = 'none'; loadScenarios(); // обновить список (могли измениться) } // ═══════════════════════════════════════════════════════ // Снапшот параметров — защита от потери правок // ═══════════════════════════════════════════════════════ /** * Сохранить параметры ОДНОГО шага перед перерисовкой. * * Зачем: renderEditor() пересоздаёт ВЕСЬ HTML → все несохранённые правки теряются. * Эта функция собирает текущие значения из DOM и сохраняет в step.params. * * @param {number} idx — индекс шага */ function snapshotStepParams(idx) { const st = scenarioEditorState; const container = document.getElementById('step-' + idx + '-params'); if (!container || !container.innerHTML) return; // Собрать значения из формы (числовые ID → значение) const numericParams = collectParams('#step-' + idx + '-params'); const defs = st.paramDefsCache[st.steps[idx]._svcOpId]; if (!defs) return; // Обратный маппинг: numeric_id → name const idToName = {}; defs.forEach(p => { idToName[p.svcOperationCfsParamId] = p.name; }); const result = {}; for (const [id, val] of Object.entries(numericParams)) { const name = idToName[parseInt(id)] || id; // Сохраняем только НЕ-дефолтные значения if (val !== '' && val !== '{}' && val !== '[]' && val !== 'false') { result[name] = val; } } st.steps[idx].params = result; } /** * Снапшот ВСЕХ шагов — вызывается перед ЛЮБОЙ перерисовкой. */ function snapshotAllParams() { if (!scenarioEditorState) return; scenarioEditorState.steps.forEach((_, idx) => snapshotStepParams(idx)); } // ═══════════════════════════════════════════════════════ // Резолв операции + загрузка параметров // ═══════════════════════════════════════════════════════ /** * Найти svcOperationId для операции в шаге. * * Для create: использует service_id шага. * Для не-create: определяет service_id через выбранный инстанс * (облачный UUID → serviceId, или output-ref → service_id предыдущего create-шага). * * @param {number} idx — индекс шага * @returns {number|null} svcOperationId или null */ async function resolveStepSvcOpId(idx) { const st = scenarioEditorState; const step = st.steps[idx]; const op = step.operation; if (!op) return null; let svcId = step.service_id; if (op !== 'create') { // Для не-create: определяем svcId через выбранный инстанс const refEl = document.getElementById('step-' + idx + '-ref'); const ref = (refEl?.value || '').trim(); if (ref) { // Проверяем: это облачный UUID? const cloud = (st.cloudInstances || []).find(i => i.instanceUid === ref); if (cloud) { svcId = cloud.serviceId; } else { // Это output-ref — ищем в предыдущих create-шагах for (let i = 0; i < idx; i++) { if (st.steps[i].output === ref) { svcId = st.steps[i].service_id; break; } } } } } if (!svcId) return null; // Кеш операций сервиса if (!st.opsCache[svcId]) { try { const r = await fetch('/api/operations/' + svcId); const d = await r.json(); st.opsCache[svcId] = d.operations || []; } catch (e) { return null; } } const ops = st.opsCache[svcId]; const found = ops.find(o => o.operation === op); return found ? found.svcOperationId : null; } /** * Загрузить и отрисовать параметры для шага. * * Алгоритм: * 1. resolveStepSvcOpId — найти ID операции * 2. GET /api/params/{svcOpId} — шаблон параметров * 3. Подставить сохранённые значения (step.params) в defaultValue * 4. Отрисовать через renderParamRow * * @param {number} idx — индекс шага */ async function loadStepParams(idx) { const st = scenarioEditorState; const step = st.steps[idx]; if (!step.operation) return; // Запомнить поколение рендера на момент старта async-загрузки const renderGen = st._renderGen || 0; const svcOpId = await resolveStepSvcOpId(idx); if (!svcOpId) return; step._svcOpId = svcOpId; // сохраняем для обратного маппинга при сохранении // Кеш параметров if (!st.paramDefsCache[svcOpId]) { try { const r = await fetch('/api/params/' + svcOpId); const d = await r.json(); st.paramDefsCache[svcOpId] = d.params || d || []; } catch (e) { return; } } const defs = st.paramDefsCache[svcOpId]; const savedParams = step.params || {}; // Подготовить allInst для refSvcId-параметров let allInst = st.cloudInstances || []; const needRefs = defs.some(p => p.refSvcId); if (needRefs && !allInst.length) { try { const r = await fetch('/api/instances/list'); allInst = await r.json(); } catch (e) {} } // Рендер: клонируем def и подставляем сохранённые значения в defaultValue const container = document.getElementById('step-' + idx + '-params'); if (!container) return; // Проверка: не перезаписывать DOM если уже был новый renderEditor() if (st._renderGen !== renderGen) return; let html = ''; defs.forEach(p => { const clone = Object.assign({}, p); // shallow copy const savedVal = savedParams[p.name]; // ищем по символическому имени if (savedVal !== undefined) clone.defaultValue = savedVal; html += renderParamRow(clone, allInst); }); container.innerHTML = html; } // ═══════════════════════════════════════════════════════ // Рендер редактора // ═══════════════════════════════════════════════════════ /** * Главная функция рендера — перерисовывает ВЕСЬ модал. * * Вызывается при: * - Открытии редактора * - Изменении операции (onOpChange) * - Добавлении/удалении/перемещении шагов * - Переключении облачных инстансов */ function renderEditor() { snapshotAllParams(); // сохранить несохранённые правки перед перерисовкой const st = scenarioEditorState; // Инкремент поколения — защита от stale async (loadStepParams может вернуться // уже после следующего renderEditor и перезаписать новый DOM старыми данными) st._renderGen = (st._renderGen || 0) + 1; const currentGen = st._renderGen; let html = 'd1).