97 lines
8.6 KiB
Markdown
97 lines
8.6 KiB
Markdown
# 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).
|
||
|
||
### Конкретные вопросы
|
||
|
||
1. **Как встроить params-render.js в редактор сценария?** Сейчас `showScenarioEditor` загружает сервисы. При выборе операции в шаге — нужно: (а) узнать svcOperationId (GET /api/operations/{svcId}), (б) загрузить параметры (GET /api/params/{svcOperationId}), (в) отрендерить их через `renderParamRow`. Где хранить загруженные параметры? В `scenarioEditorState`? В отдельном кеше?
|
||
|
||
2. **Как хранить параметры в состоянии шага?** Сейчас `step.params` — массив `[["key","val"],...]`. После загрузки из API там будут десятки параметров с дефолтами. Пользователь меняет некоторые. При сохранении — сохранять только изменённые или все? (Сейчас в БД — только изменённые, остальные берутся из дефолтов при запуске).
|
||
|
||
3. **Pre-fill параметров.** При смене операции: авто или по кнопке «Загрузить параметры»? При смене сервиса (create) — сбрасывать параметры?
|
||
|
||
4. **Отображение.** Где рендерить параметры в шаге: внутри карточки шага (может быть много) или в отдельной панели справа? Сейчас `operations.js` рендерит параметры в `#params-form` под списком инстансов — это отдельная область.
|
||
|
||
5. **Сбор параметров при сохранении.** `collectFormSteps()` сейчас собирает key=value. После перехода на params-render нужно будет использовать `collectParams()` с указанием контейнера шага. Как передать контейнер?
|
||
|
||
6. **Map-fixed параметры.** В operations.js они рендерятся с вложенными полями. В сценарном редакторе — нужен такой же рендер? Или упрощённый (JSON-строка)?
|
||
|
||
7. **Что делать с существующими сценариями?** У них параметры уже в БД как key=value. При редактировании — показывать только те поля, которые есть в steps? Или подгрузить все из API и смержить?
|
||
|
||
---
|
||
|
||
**ВАЖНО:** Пиши план прямо в чат текстом. Не сохраняй в session memory — я не смогу прочитать. Только в чат.
|