Prompt for Opus — Frontend Scenario Editor UI

Что это за проект

Nubes Autotest — Flask + vanilla JS + PostgreSQL. Автотесты для облачной платформы Nubes. Текущая версия: v1.2.3. Backend-рефакторинг завершён (unified executor, гибкие ссылки). Сейчас нужно доработать фронтенд редактора сценариев.

ВСЕ файлы фронтенда лежат здесь: /home/naeel/nubes/autotest/app-autotest/site/

Файлы фронтенда (читай в этом порядке)

1. Страница и стили

/home/naeel/nubes/autotest/app-autotest/site/templates/index.html

Три колонки: infra (280px) | svc (240px) | main (flex)
В main: inst-list → params-area → create-btn-area → history-card → scenario-card
Модал: #scenario-modal (уже есть разметка в CSS)
Загрузка JS: utils.js → params-render.js → instances.js → operations.js → history.js → scenario-form.js → scenario-create.js → scenario-edit.js → scenario-delete.js → scenario-list.js → app.js

2. Текущий редактор сценариев (НЕДАВНО ПЕРЕДЕЛАН — изучи ВЕСЬ файл)

/home/naeel/nubes/autotest/app-autotest/site/static/js/scenario-form.js (~170 строк)

showScenarioEditor(def) — открывает модал, загружает /api/services и /api/instances/list в state
renderEditor() — рендерит модал: название, шаги, кнопки Сохранить/Отмена
renderStepRow(idx, step) — рендерит ОДИН шаг:
- Операция: <select> с create/delete/modify/suspend/resume/redeploy
- Если create: <select> сервисов + <input> output (имя для ссылок)
- Если не-create: <select> инстансов (🆕 output'ы предыдущих шагов + ☁ облачные)
- Параметры: key=value строки (ручной ввод)
collectFormSteps() — собирает данные формы в массив шагов для POST/PUT
saveScenario() — валидация + POST/PUT /api/scenario/definitions
addStep(), removeStep(), moveStep(), addParam(), removeParam()

3. Рендер параметров (общий модуль)

/home/naeel/nubes/autotest/app-autotest/site/static/js/params-render.js (~80 строк)

renderParamRow(p, allInst) — рендер ОДНОГО параметра с учётом типа (select для valueList, refSvcId, boolean; input для текста; map-fixed → renderMapFixedRow)
renderMapFixedRow(p, dfl) — вложенные поля для map-fixed параметров
collectParams(containerSelector) — сбор параметров из DOM
Эти функции НЕ используются в scenario-form.js — там параметры вводятся вручную key=value

4. Список сценариев и кнопки

/home/naeel/nubes/autotest/app-autotest/site/static/js/scenario-list.js (~90 строк)

loadScenarios() — список сценариев + последний запуск (фильтр по версии)
Кнопки: ▶ Запустить | ✏ Редактировать | 📋 Копировать | 🗑 Удалить | + Создать
runScenario(defId) — запуск + поллинг

5. Остальные JS (для контекста, глубоко не читай)

utils.js — _esc(), validateJson(), relativeTime(), лог-панель
instances.js — selectService(), toggleInstance(), renderInstances()
operations.js — startCreate(), runOp(), showParams(), executeOp() — здесь showParams использует params-render.js
history.js — история тестов
scenario-create.js — createScenario(), cloneScenario()
scenario-edit.js — editScenario(defId)
scenario-delete.js — deleteScenario(defId, name)

6. API (для понимания что можно дёргать)

GET /api/services → [{svcId, svc}]
GET /api/instances/list → [{instanceUid, displayName, serviceId, svc, explainedStatus}]
GET /api/operations/{svcId} → {operations: [{svcOperationId, operation}]}
GET /api/params/{svcOperationId} → {params: [{svcOperationCfsParamId, name, dataType, isRequired, defaultValue, valueList, refSvcId, dataDescriptor}]}
GET/POST /api/scenario/definitions — список/создать
GET/PUT/DELETE /api/scenario/definitions/<id> — один/обновить/удалить

Текущее состояние редактора

✅ Работает: модал, дропдауны сервисов/операций, output/ref, кнопки CRUD, сохранение ❌ Параметры — ручной ввод key=value. Не используется params-render.js. Пользователь должен знать коды параметров (durationMs, failAtStart и т.д.) ❌ Нет автоподгрузки параметров при выборе операции ❌ Нет валидации параметров в редакторе ❌ Параметры в БД хранятся символическими именами (durationMs), резолвятся в numeric ID в runtime

Что нужно спроектировать

Полноценный редактор параметров в модале сценария. Чтобы при выборе операции автоматически подгружались параметры из API и показывались с типами, дефолтами, valueList — как в ручном режиме (showParams в operations.js).

Конкретные вопросы

Как встроить params-render.js в редактор сценария? Сейчас showScenarioEditor загружает сервисы. При выборе операции в шаге — нужно: (а) узнать svcOperationId (GET /api/operations/{svcId}), (б) загрузить параметры (GET /api/params/{svcOperationId}), (в) отрендерить их через renderParamRow. Где хранить загруженные параметры? В scenarioEditorState? В отдельном кеше?
Как хранить параметры в состоянии шага? Сейчас step.params — массив [["key","val"],...]. После загрузки из API там будут десятки параметров с дефолтами. Пользователь меняет некоторые. При сохранении — сохранять только изменённые или все? (Сейчас в БД — только изменённые, остальные берутся из дефолтов при запуске).
Pre-fill параметров. При смене операции: авто или по кнопке «Загрузить параметры»? При смене сервиса (create) — сбрасывать параметры?
Отображение. Где рендерить параметры в шаге: внутри карточки шага (может быть много) или в отдельной панели справа? Сейчас operations.js рендерит параметры в #params-form под списком инстансов — это отдельная область.
Сбор параметров при сохранении. collectFormSteps() сейчас собирает key=value. После перехода на params-render нужно будет использовать collectParams() с указанием контейнера шага. Как передать контейнер?
Map-fixed параметры. В operations.js они рендерятся с вложенными полями. В сценарном редакторе — нужен такой же рендер? Или упрощённый (JSON-строка)?
Что делать с существующими сценариями? У них параметры уже в БД как key=value. При редактировании — показывать только те поля, которые есть в steps? Или подгрузить все из API и смержить?

ВАЖНО: Пиши план прямо в чат текстом. Не сохраняй в session memory — я не смогу прочитать. Только в чат.

8.6 KiB Raw Blame History Unescape Escape