v1.2.5: parameter editor with auto-load from API + params-render.js
Phase 1: paramDefsCache, step.params as {name:value}
Phase 2: resolveStepSvcOpId() → loadStepParams() via /api/params
Phase 3: <details> in step card, renderParamRow with pre-fill (clone def + saved values)
Phase 4: snapshotStepParams() before re-render, reset on operation change
Phase 5: collectFormSteps via collectParams() + numeric→name reverse mapping
Only scenario-form.js changed. params-render.js, api_test.py, _resolve_params unchanged.
Compatible with existing scenarios (symbolic names in DB).
This commit is contained in:
+1
-1
@@ -19,7 +19,7 @@ from routes.api_scenario_run import bp_run as api_scenario_run_bp
|
||||
from routes.api_scenario_defs import bp_defs as api_scenario_defs_bp
|
||||
|
||||
# Версия — меняется при КАЖДОМ изменении кода. Показывается в топбаре UI.
|
||||
VERSION = "1.2.4"
|
||||
VERSION = "1.2.5"
|
||||
|
||||
app = Flask(__name__, template_folder="templates", static_folder="static")
|
||||
app.config["NUBES_API_ENDPOINT"] = os.getenv("NUBES_API_ENDPOINT", "https://lk-api-gateway-test.ngcloud.ru/api/v1/svc")
|
||||
|
||||
+156
-56
@@ -1,9 +1,10 @@
|
||||
// scenario-form.js — модальный редактор сценариев
|
||||
// Использует: params-render.js (renderParamRow, renderMapFixedRow, collectParams)
|
||||
// Зависит от: utils.js (_esc), instances.js (currentSvcId)
|
||||
// Зависит от: utils.js (_esc)
|
||||
|
||||
let scenarioEditorState = null; // {defId, version, name, steps, services:[], opsCache:{}}
|
||||
// step: {service_id, operation, output, instance_ref, instance_uid, params: [["k","v"],...]}
|
||||
let scenarioEditorState = null;
|
||||
// {defId, version, name, steps:[], services:[], cloudInstances:[], opsCache:{}, paramDefsCache:{}}
|
||||
// step: {service_id, operation, output, instance_ref, instance_uid, params:{name:value}}
|
||||
|
||||
async function showScenarioEditor(def) {
|
||||
scenarioEditorState = def ? {
|
||||
@@ -12,12 +13,12 @@ async function showScenarioEditor(def) {
|
||||
service_id: s.service_id || '', operation: s.operation || '',
|
||||
output: s.output || '', instance_ref: s.instance_ref || '',
|
||||
instance_uid: s.instance_uid || '',
|
||||
params: Object.entries(s.params || {})
|
||||
params: s.params || {} // {name: value} — символические имена
|
||||
})),
|
||||
services: [], opsCache: {}
|
||||
} : { defId: null, version: 1, name: '', steps: [], services: [], opsCache: {} };
|
||||
services: [], cloudInstances: [], opsCache: {}, paramDefsCache: {}
|
||||
} : { defId: null, version: 1, name: '', steps: [],
|
||||
services: [], cloudInstances: [], opsCache: {}, paramDefsCache: {} };
|
||||
|
||||
// Загрузить список сервисов и облачные инстансы
|
||||
try {
|
||||
const [svcR, instR] = await Promise.all([
|
||||
fetch('/api/services').then(r => r.json()),
|
||||
@@ -47,36 +48,142 @@ function closeModal() {
|
||||
loadScenarios();
|
||||
}
|
||||
|
||||
// ── Снапшот параметров перед ре-рендером ──
|
||||
|
||||
function snapshotStepParams(idx) {
|
||||
const st = scenarioEditorState;
|
||||
const container = document.getElementById('step-' + idx + '-params');
|
||||
if (!container || !container.innerHTML) return;
|
||||
const numericParams = collectParams('#step-' + idx + '-params');
|
||||
const defs = st.paramDefsCache[st.steps[idx]._svcOpId];
|
||||
if (!defs) return;
|
||||
// Обратный маппинг: numericId → 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));
|
||||
}
|
||||
|
||||
// ── Резолв операции + загрузка параметров ──
|
||||
|
||||
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') {
|
||||
// Определить svcId через выбранный инстанс
|
||||
const refEl = document.getElementById('step-' + idx + '-ref');
|
||||
const ref = (refEl?.value || '').trim();
|
||||
if (ref) {
|
||||
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;
|
||||
}
|
||||
|
||||
async function loadStepParams(idx) {
|
||||
const st = scenarioEditorState;
|
||||
const step = st.steps[idx];
|
||||
if (!step.operation) return;
|
||||
|
||||
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;
|
||||
let html = '';
|
||||
defs.forEach(p => {
|
||||
const clone = Object.assign({}, p);
|
||||
const savedVal = savedParams[p.name];
|
||||
if (savedVal !== undefined) clone.defaultValue = savedVal;
|
||||
html += renderParamRow(clone, allInst);
|
||||
});
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// ── Рендер ──
|
||||
|
||||
function renderEditor() {
|
||||
snapshotAllParams(); // сохранить несохранённые правки перед перерисовкой
|
||||
const st = scenarioEditorState;
|
||||
let html = '<div style="padding:20px;max-height:90vh;overflow-y:auto;">';
|
||||
html += '<h3 style="margin:0 0 12px;">' + (st.defId ? 'Редактирование' : 'Новый сценарий') + '</h3>';
|
||||
// Название
|
||||
html += '<div style="margin-bottom:10px;"><label style="font-size:12px;font-weight:600;">Название</label><br>';
|
||||
html += `<input type="text" id="scenario-name" value="${_esc(st.name)}" style="width:100%;padding:6px;font-size:13px;" placeholder="my_test">`;
|
||||
html += '</div>';
|
||||
// Справка
|
||||
html += `<details style="margin-bottom:10px;font-size:11px;color:var(--muted);border:1px solid var(--brand-gray);border-radius:4px;padding:6px 8px;">
|
||||
<summary style="cursor:pointer;font-weight:600;">📖 Как заполнять</summary>
|
||||
<div style="margin-top:6px;line-height:1.6;">
|
||||
<b>Шаг:</b> выбери <b>операцию</b> → укажи цель.<br>
|
||||
<b>Create:</b> выбери сервис + задай <b>output</b> (имя, например <code>d1</code>). Другие шаги смогут ссылаться на него.<br>
|
||||
<b>Остальные операции:</b> выбери инстанс — 🆕 из create-шагов этого сценария или ☁ из облака.<br>
|
||||
<b>Параметры:</b> key = value (символические коды, как в API).<br>
|
||||
Пример: <code>durationMs</code> = <code>5000</code><br>
|
||||
<b>[↑][↓]</b> — порядок шагов, <b>[✕]</b> — удалить шаг.
|
||||
<b>Create:</b> выбери сервис + задай <b>output</b> (имя, например <code>d1</code>).<br>
|
||||
<b>Остальные:</b> выбери инстанс — 🆕 из create-шагов или ☁ из облака.<br>
|
||||
<b>Параметры:</b> разверни «Параметры» — значения загружаются из API автоматически.<br>
|
||||
<b>[↑][↓]</b> — порядок, <b>[✕]</b> — удалить.
|
||||
</div>
|
||||
</details>`;
|
||||
// Шаги
|
||||
html += '<div style="font-size:12px;font-weight:600;margin-bottom:6px;">Шаги</div>';
|
||||
st.steps.forEach((s, idx) => { html += renderStepRow(idx, s); });
|
||||
html += `<button class="btn btn-sm" style="margin-top:6px;" onclick="addStep()">+ Добавить шаг</button>`;
|
||||
// Кнопки
|
||||
html += '<div style="margin-top:14px;display:flex;gap:8px;">';
|
||||
html += `<button class="btn btn-sm" style="background:var(--brand-primary);color:#fff;padding:6px 16px;" onclick="saveScenario()">Сохранить</button>`;
|
||||
html += `<button class="btn btn-sm" style="padding:6px 16px;" onclick="closeModal()">Отмена</button>`;
|
||||
html += '</div></div>';
|
||||
openModal(html);
|
||||
|
||||
// Асинхронно загрузить параметры для шагов с выбранной операцией
|
||||
st.steps.forEach((s, idx) => { if (s.operation) loadStepParams(idx); });
|
||||
}
|
||||
|
||||
function renderStepRow(idx, step) {
|
||||
@@ -85,7 +192,6 @@ function renderStepRow(idx, step) {
|
||||
const out = step.output || '';
|
||||
const ref = step.instance_ref || '';
|
||||
|
||||
// Output refs из предыдущих create-шагов
|
||||
const prevOutputs = [];
|
||||
for (let i = 0; i < idx; i++) {
|
||||
const s = st.steps[i];
|
||||
@@ -100,15 +206,12 @@ function renderStepRow(idx, step) {
|
||||
html += `<button class="btn btn-sm" style="font-size:9px;padding:0 4px;margin-left:auto;color:var(--destructive);" onclick="removeStep(${idx})">✕</button>`;
|
||||
html += `</div>`;
|
||||
|
||||
// 1. Операция ВСЕГДА первая
|
||||
const allOps = ['create', 'delete', 'modify', 'suspend', 'resume', 'redeploy'];
|
||||
let opOpts = '<option value="">— операция —</option>';
|
||||
allOps.forEach(o => { opOpts += `<option value="${o}" ${o == op ? 'selected' : ''}>${o}</option>`; });
|
||||
html += `<div style="margin-bottom:4px;"><select id="step-${idx}-op" onchange="onOpChange(${idx})" style="padding:4px;font-size:12px;">${opOpts}</select></div>`;
|
||||
|
||||
// 2. В зависимости от операции
|
||||
if (op === 'create') {
|
||||
// Сервис
|
||||
let svcOpts = '<option value="">— сервис —</option>';
|
||||
st.services.forEach(s => {
|
||||
svcOpts += `<option value="${s.svcId}" ${s.svcId == step.service_id ? 'selected' : ''}>${s.svcId}. ${_esc(s.svc)}</option>`;
|
||||
@@ -116,11 +219,8 @@ function renderStepRow(idx, step) {
|
||||
html += `<div style="display:flex;gap:6px;align-items:center;"><select id="step-${idx}-svc" style="padding:4px;font-size:12px;">${svcOpts}</select></div>`;
|
||||
html += `<div style="margin-top:4px;"><input type="text" id="step-${idx}-output" value="${_esc(out)}" placeholder="имя для ссылок (например: d1)" style="width:220px;padding:3px;font-size:11px;"></div>`;
|
||||
} else if (op) {
|
||||
// Инстанс — облачные + предыдущие output'ы
|
||||
let refOpts = '<option value="">— инстанс —</option>';
|
||||
// output'ы из create-шагов
|
||||
prevOutputs.forEach(o => { refOpts += `<option value="${o}" ${o == ref ? 'selected' : ''}>🆕 ${_esc(o)} (из шага)</option>`; });
|
||||
// Облачные инстансы
|
||||
if (st.cloudInstances && st.cloudInstances.length) {
|
||||
refOpts += '<option disabled>── облако ──</option>';
|
||||
st.cloudInstances.forEach(i => {
|
||||
@@ -132,54 +232,49 @@ function renderStepRow(idx, step) {
|
||||
html += `<div><select id="step-${idx}-ref" style="padding:4px;font-size:12px;max-width:500px;">${refOpts}</select></div>`;
|
||||
}
|
||||
|
||||
// Параметры
|
||||
html += `<div style="margin-top:4px;" id="step-${idx}-params">`;
|
||||
const params = step.params || [];
|
||||
params.forEach(([k, v], pi) => {
|
||||
html += `<div style="display:flex;gap:4px;align-items:center;margin:2px 0;">`;
|
||||
html += `<input type="text" id="step-${idx}-pk-${pi}" value="${_esc(k)}" placeholder="param" style="width:110px;padding:2px;font-size:10px;">`;
|
||||
html += `<span>=</span>`;
|
||||
html += `<input type="text" id="step-${idx}-pv-${pi}" value="${_esc(v)}" placeholder="value" style="width:140px;padding:2px;font-size:10px;">`;
|
||||
html += `<button class="btn btn-sm" style="font-size:9px;padding:0 3px;" onclick="removeParam(${idx},${pi});renderEditor();">✕</button>`;
|
||||
html += `</div>`;
|
||||
});
|
||||
html += `<button class="btn btn-sm" style="font-size:9px;margin-top:2px;" onclick="addParam(${idx});renderEditor();">+ Параметр</button>`;
|
||||
html += '</div></div>';
|
||||
// Параметры — свёрнутый <details>, заполняется асинхронно в loadStepParams
|
||||
html += `<details style="margin-top:4px;" id="step-${idx}-params-box"><summary style="font-size:11px;cursor:pointer;">Параметры</summary><div id="step-${idx}-params" style="margin-top:4px;"></div></details>`;
|
||||
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
function onOpChange(idx) { renderEditor(); }
|
||||
// ── Действия ──
|
||||
|
||||
function onOpChange(idx) {
|
||||
// Сброс params при смене операции (несовместимы)
|
||||
scenarioEditorState.steps[idx].params = {};
|
||||
scenarioEditorState.steps[idx]._svcOpId = null;
|
||||
renderEditor();
|
||||
}
|
||||
|
||||
function addStep() {
|
||||
scenarioEditorState.steps.push({ service_id: '', operation: '', output: '', instance_ref: '', instance_uid: '', params: [] });
|
||||
snapshotAllParams();
|
||||
scenarioEditorState.steps.push({ service_id: '', operation: '', output: '', instance_ref: '', instance_uid: '', params: {} });
|
||||
renderEditor();
|
||||
}
|
||||
|
||||
function removeStep(idx) {
|
||||
snapshotAllParams();
|
||||
scenarioEditorState.steps.splice(idx, 1);
|
||||
renderEditor();
|
||||
}
|
||||
|
||||
function moveStep(idx, dir) {
|
||||
snapshotAllParams();
|
||||
const steps = scenarioEditorState.steps;
|
||||
const target = idx + dir;
|
||||
if (target < 0 || target >= steps.length) return;
|
||||
[steps[idx], steps[target]] = [steps[target], steps[idx]];
|
||||
}
|
||||
|
||||
function addParam(idx) {
|
||||
scenarioEditorState.steps[idx].params.push(['', '']);
|
||||
}
|
||||
|
||||
function removeParam(idx, pi) {
|
||||
scenarioEditorState.steps[idx].params.splice(pi, 1);
|
||||
renderEditor();
|
||||
}
|
||||
|
||||
function collectFormSteps() {
|
||||
snapshotAllParams();
|
||||
const st = scenarioEditorState;
|
||||
const name = (document.getElementById('scenario-name')?.value || '').trim();
|
||||
const steps = [];
|
||||
st.steps.forEach((_, idx) => {
|
||||
st.steps.forEach((step, idx) => {
|
||||
const opEl = document.getElementById('step-' + idx + '-op');
|
||||
const operation = (opEl?.value || '').trim();
|
||||
let svcId = 0;
|
||||
@@ -195,25 +290,30 @@ function collectFormSteps() {
|
||||
const refEl = document.getElementById('step-' + idx + '-ref');
|
||||
const ref = (refEl?.value || '').trim();
|
||||
if (ref) {
|
||||
// Это UUID облачного инстанса — ищем его service_id
|
||||
const cloud = (st.cloudInstances || []).find(i => i.instanceUid === ref);
|
||||
if (cloud) {
|
||||
svcId = cloud.serviceId;
|
||||
s.instance_uid = ref;
|
||||
} else {
|
||||
// Это output-имя из предыдущего шага
|
||||
s.instance_ref = ref;
|
||||
}
|
||||
}
|
||||
}
|
||||
s.service_id = svcId;
|
||||
|
||||
// Параметры
|
||||
st.steps[idx].params.forEach((__, pi) => {
|
||||
const k = document.getElementById('step-' + idx + '-pk-' + pi)?.value?.trim();
|
||||
const v = document.getElementById('step-' + idx + '-pv-' + pi)?.value || '';
|
||||
if (k) s.params[k] = v;
|
||||
});
|
||||
// Собрать параметры через collectParams + обратный маппинг numeric→name
|
||||
const defs = st.paramDefsCache[step._svcOpId];
|
||||
if (defs) {
|
||||
const numericParams = collectParams('#step-' + idx + '-params');
|
||||
const idToName = {};
|
||||
defs.forEach(p => { idToName[p.svcOperationCfsParamId] = p.name; });
|
||||
for (const [id, val] of Object.entries(numericParams)) {
|
||||
const pname = idToName[parseInt(id)] || id;
|
||||
if (val !== '' && val !== '{}' && val !== '[]' && val !== 'false') {
|
||||
s.params[pname] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
steps.push(s);
|
||||
});
|
||||
return { name, steps };
|
||||
@@ -224,7 +324,7 @@ async function saveScenario() {
|
||||
if (!name) { alert('Введите название'); return; }
|
||||
if (!steps.length) { alert('Добавьте хотя бы один шаг'); return; }
|
||||
for (let i = 0; i < steps.length; i++) {
|
||||
if (!steps[i].service_id) { alert('Шаг ' + (i+1) + ': выберите сервис'); return; }
|
||||
if (!steps[i].service_id) { alert('Шаг ' + (i+1) + ': выберите сервис или инстанс'); return; }
|
||||
if (!steps[i].operation) { alert('Шаг ' + (i+1) + ': выберите операцию'); return; }
|
||||
}
|
||||
const st = scenarioEditorState;
|
||||
|
||||
Reference in New Issue
Block a user