`;
+
+ // Скрытая строка с этапами (раскрывается по клику)
html+=`
${renderStages(r.stages)}
`;
});
html+='
';
body.innerHTML=html;
- }catch(e){body.innerHTML='Ошибка загрузки';}
+ }catch(e){
+ body.innerHTML='Ошибка загрузки';
+ }
}
+/**
+ * Раскрыть/скрыть строку с этапами для записи истории.
+ *
+ * @param {number} i — индекс записи в массиве rows
+ */
function toggleHistoryRow(i) {
const el = document.getElementById('hist-stages-' + i);
if (!el) return;
el.style.display = el.style.display === 'none' ? 'table-row' : 'none';
}
+/**
+ * Отрисовать этапы выполнения для записи истории.
+ *
+ * Каждый этап: иконка (✅/❌/⏳) + название + время + длительность.
+ *
+ * @param {Array} stages — [{stage, dtStart, dtFinish, isSuccessful, duration}, ...]
+ * @returns {string} HTML
+ */
function renderStages(stages) {
- if (!stages || !stages.length) return 'Нет данных об этапах';
+ if (!stages || !stages.length)
+ return 'Нет данных об этапах';
+
let html = '
Этапы выполнения
';
stages.forEach(s => {
- const done = !!s.dtFinish;
+ const done = !!s.dtFinish; // этап завершён?
const icon = done ? (s.isSuccessful ? '✅' : '❌') : '⏳';
const start = s.dtStart ? s.dtStart.replace('T',' ').substring(0,19) : '?';
const finish = s.dtFinish ? s.dtFinish.replace('T',' ').substring(0,19) : '...';
diff --git a/site/static/js/icons.js b/site/static/js/icons.js
index 314accf..c71c0a8 100644
--- a/site/static/js/icons.js
+++ b/site/static/js/icons.js
@@ -1,6 +1,14 @@
-// icons.js — 10 inline-SVG иконок (Lucide, MIT)
-// stroke="currentColor" — цвет берётся из CSS
-// Размер: 20x20, stroke-width: 2
+// icons.js — 10 inline-SVG иконок (Lucide, MIT-лицензия)
+//
+// Все иконки используют stroke="currentColor" — цвет берётся из CSS (color).
+// Размер: 20x20px, stroke-width: 2 (тонкие линии).
+//
+// Почему inline-SVG а не или иконочный шрифт:
+// - Не требует внешних зависимостей (никаких CDN)
+// - Цвет controlled через CSS (currentColor)
+// - Не грузит лишних файлов (иконки вшиты в JS)
+//
+// Использование: ICONS.play, ICONS.edit, ICONS.trash, ...
const ICONS = {
play: '',
diff --git a/site/static/js/instances.js b/site/static/js/instances.js
index 7752272..e6d3d38 100644
--- a/site/static/js/instances.js
+++ b/site/static/js/instances.js
@@ -1,4 +1,20 @@
// instances.js — список инстансов, выбор сервиса, toggle операций
+//
+// Отвечает за:
+// - Загрузку инстансов выбранного сервиса (GET /api/operations/{svcId})
+// - Отображение списка инстансов с фильтром autotest-
+// - Показ доступных операций для выбранного инстанса
+// - Кнопки операций (modify, delete, suspend, resume, redeploy)
+//
+// Глобальные переменные (используются в operations.js и других модулях):
+// svcInstances[] — текущий список инстансов
+// selectedInst — UUID выбранного инстанса (или null)
+// selectedOp — {opId, opName, svcId} текущая выбранная операция
+// currentSvcId — ID текущего сервиса
+// currentSvcName — имя текущего сервиса
+// currentSvcShort — короткое имя (для генерации displayName)
+// busy — флаг блокировки UI (пока идёт операция)
+// AUTOTEST_PREFIX — "autotest-" (фильтр "наших" инстансов)
let svcInstances=[], selectedInst=null, selectedOp=null;
let currentSvcId=(window.APP&&window.APP.firstServiceId)||1;
@@ -7,32 +23,58 @@ let currentSvcShort='';
let busy=false;
const AUTOTEST_PREFIX='autotest-';
+/**
+ * Выбрать сервис — загрузить его инстансы и показать в списке.
+ * Вызывается при клике на сервис в левой панели.
+ *
+ * @param {number} svcId — ID сервиса
+ */
async function selectService(svcId){
- if(busy) return;
+ if(busy) return; // блокировка — идёт операция
+
+ // Сброс предыдущего состояния
currentSvcId=svcId;
- selectedInst=null; selectedOp=null; stopPoll();
+ selectedInst=null;
+ selectedOp=null;
+ stopPoll(); // остановить поллинг предыдущей операции
+
+ // Скрыть панель параметров и этапы
document.getElementById('params-area').style.display='none';
document.querySelectorAll('.stages-box').forEach(e=>e.remove());
+
+ // Подсветка активного сервиса в списке
document.querySelectorAll('.svc-item').forEach(e=>e.classList.remove('active'));
const svcEl=document.querySelector(`.svc-item[onclick*="${svcId}"]`);
if(svcEl) svcEl.classList.add('active');
+
try{
- const r=await fetch('/api/operations/'+svcId);
- const d=await r.json();
- svcInstances=d.instances||[];
- currentSvcName=d.svc||'';
- currentSvcShort=d.svcShort||'';
- const btnSpan=document.querySelector('#create-btn-area span');
- if(btnSpan) btnSpan.textContent='+ Создать новый инстанс '+(currentSvcName||'сервиса');
- renderInstances();
- }catch(e){document.getElementById('inst-list').innerHTML='Ошибка загрузки';}
+ // GET /api/operations/{svcId} — возвращает операции + autotest-инстансы
+ const r=await fetch('/api/operations/'+svcId);
+ const d=await r.json();
+ svcInstances=d.instances||[];
+ currentSvcName=d.svc||'';
+ currentSvcShort=d.svcShort||'';
+ // Обновить текст кнопки «Создать»
+ const btnSpan=document.querySelector('#create-btn-area span');
+ if(btnSpan) btnSpan.textContent='+ Создать новый инстанс '+(currentSvcName||'сервиса');
+ renderInstances(); // отрисовать список
+ }catch(e){
+ document.getElementById('inst-list').innerHTML=
+ 'Ошибка загрузки';
+ }
}
+/**
+ * Отрисовать список инстансов в #inst-list.
+ * Каждый инстанс — строка: имя + сервис + статус + created + modified.
+ */
function renderInstances(){
let html='';
svcInstances.forEach(i=>{
+ // Статус: из нашего поля status (cloud-first) или explainedStatus
const status=i.status||i.explainedStatus||'?';
const sc=status==='running'?'badge-success':'';
+ // Строка инстанса — кликабельна
html+=`
${_esc(i.displayName)}${_esc(i.svc||'')}
@@ -40,51 +82,89 @@ function renderInstances(){
${relativeTime(i.instanceConfigDtCreated)}${relativeTime(i.instanceConfigDtModified)}
`;
+ // Контейнер для кнопок операций (изначально скрыт)
html+=``;
});
document.getElementById('inst-list').innerHTML=html;
}
+/**
+ * Обновить список инстансов (без смены сервиса).
+ * Вызывается после завершения операции.
+ */
async function refreshInstances(){
try{
- const r=await fetch('/api/operations/'+currentSvcId);
- const d=await r.json();
- svcInstances=d.instances||[];
- renderInstances();
+ const r=await fetch('/api/operations/'+currentSvcId);
+ const d=await r.json();
+ svcInstances=d.instances||[];
+ renderInstances();
}catch(e){}
}
+/**
+ * Раскрыть/скрыть кнопки операций для инстанса.
+ * Загружает доступные операции через GET /api/operations/{svcId}.
+ *
+ * @param {string} iuid — instanceUid
+ */
async function toggleInstance(iuid){
if(busy) return;
- selectedInst=iuid; stopPoll();
- document.querySelectorAll('[data-iuid]').forEach(e=>e.classList.toggle('active',e.dataset.iuid===iuid));
+ selectedInst=iuid;
+ stopPoll();
+
+ // Подсветка выбранного инстанса
+ document.querySelectorAll('[data-iuid]').forEach(e=>
+ e.classList.toggle('active',e.dataset.iuid===iuid));
+
+ // Скрыть панель параметров (если была открыта для другого инстанса)
document.getElementById('params-area').style.display='none';
+
const opsEl=document.getElementById('ops-'+iuid);
+ // Если уже открыт — закрыть (toggle)
if(opsEl.classList.contains('open')){opsEl.classList.remove('open');return;}
+
+ // Закрыть ВСЕ другие открытые панели операций
document.querySelectorAll('.inst-ops').forEach(e=>e.classList.remove('open'));
+
+ // Найти инстанс в списке (может быть из другого сервиса)
const inst=svcInstances.find(x=>x.instanceUid===iuid);
const svcId=inst?inst.serviceId:currentSvcId;
+
try{
- const r=await fetch('/api/operations/'+svcId);
- const d=await r.json();
- let ops=(d.operations||[]).filter(o=>o.operation!=='reconcile'&&o.operation!=='create');
- if(inst&&(inst.status||inst.explainedStatus)==='not created'){
- ops=ops.filter(o=>o.operation==='delete');
+ const r=await fetch('/api/operations/'+svcId);
+ const d=await r.json();
+
+ // Фильтруем операции: убираем reconcile (техническая) и create (уже создан)
+ let ops=(d.operations||[]).filter(o=>o.operation!=='reconcile'&&o.operation!=='create');
+
+ // Для not created инстансов — только delete
+ if(inst&&(inst.status||inst.explainedStatus)==='not created'){
+ ops=ops.filter(o=>o.operation==='delete');
+ }
+
+ // Кнопки операций с цветовой маркировкой
+ opsEl.innerHTML=ops.map(o=>
+ ``
+ ).join('');
+ opsEl.classList.add('open');
+ }catch(e){
+ opsEl.innerHTML='Ошибка загрузки';
+ opsEl.classList.add('open');
}
- opsEl.innerHTML=ops.map(o=>
- ``
- ).join('');
- opsEl.classList.add('open');
- }catch(e){opsEl.innerHTML='Ошибка загрузки';opsEl.classList.add('open');}
}
+/**
+ * CSS-класс для кнопки операции (цветовая маркировка).
+ *
+ * @param {string} opName — "modify"/"delete"/"suspend"/...
+ * @returns {string} CSS-класс
+ */
function opClass(opName){
- if(opName==='modify') return 'op-btn-modify';
- if(opName==='suspend') return 'op-btn-suspend';
- if(opName==='resume') return 'op-btn-resume';
- if(opName==='delete') return 'op-btn-delete';
- if(opName==='redeploy') return 'op-btn-redeploy';
+ if(opName==='modify') return 'op-btn-modify'; // синий
+ if(opName==='suspend') return 'op-btn-suspend'; // оранжевый
+ if(opName==='resume') return 'op-btn-resume'; // зелёный
+ if(opName==='delete') return 'op-btn-delete'; // красный
+ if(opName==='redeploy') return 'op-btn-redeploy'; // фиолетовый
return '';
}
-
diff --git a/site/static/js/operations.js b/site/static/js/operations.js
index f780f83..014b5f6 100644
--- a/site/static/js/operations.js
+++ b/site/static/js/operations.js
@@ -1,119 +1,244 @@
-// operations.js — запуск операций: create, modify, delete, poll, stages
+// operations.js — запуск операций: create, modify, delete, поллинг, этапы
+//
+// Это основной модуль ручного режима тестирования.
+// Жизненный цикл операции:
+// 1. Пользователь выбирает инстанс → жмёт кнопку операции (runOp)
+// 2. Загружаются параметры с ТЕКУЩИМИ значениями (showParams)
+// 3. Пользователь правит параметры → жмёт «Запустить» (executeOp)
+// 4. POST /api/test → возвращает opUid → начинается поллинг (pollTimer)
+// 5. Каждые 2 секунды GET /api/test/status/{opUid} → этапы + статус
+// 6. При завершении → обновить список инстансов + историю
+//
+// Глобальные переменные (используются из instances.js):
+// pollTimer — ID setInterval для поллинга
+
let pollTimer=null;
+/**
+ * Сгенерировать короткое имя для нового инстанса.
+ * Формат: {svcShort}-{random3} (напр. "dummy-a3f").
+ * random3 — base36 (0-9a-z), 3 символа = 46656 вариантов.
+ *
+ * @returns {string} displayName suffix (без префикса autotest-)
+ */
function makeCreateDisplayName(){
const rand = (Math.random() * 46656 | 0).toString(36).padStart(3, '0');
return currentSvcShort ? currentSvcShort+'-'+rand : rand;
}
+/**
+ * Найти displayName выбранного инстанса.
+ *
+ * @returns {string} displayName или instanceUid (если не найден)
+ */
function findInstName(){
const i=svcInstances.find(x=>x.instanceUid===selectedInst);
return i?i.displayName:selectedInst;
}
+/**
+ * Остановить поллинг текущей операции.
+ */
function stopPoll(){
if(pollTimer){clearInterval(pollTimer);pollTimer=null;}
}
+/**
+ * Начать создание нового инстанса (кнопка «+ Создать»).
+ *
+ * Загружает операцию create для текущего сервиса через GET /api/operations/{svcId}.
+ * Если операция create не найдена — fallback на svcOperationId=18 (стандартный).
+ */
async function startCreate(){
if(busy) return;
- selectedInst=null; stopPoll();
+ selectedInst=null; // create — нет выбранного инстанса
+ stopPoll();
+ // Снять выделение со всех инстансов
document.querySelectorAll('[data-iuid]').forEach(e=>e.classList.remove('active'));
document.querySelectorAll('.inst-ops').forEach(e=>e.classList.remove('open'));
try{
const r=await fetch('/api/operations/'+currentSvcId);
const d=await r.json();
const createOp=d.operations.find(o=>o.operation==='create');
- const opId=createOp?createOp.svcOperationId:18;
+ const opId=createOp?createOp.svcOperationId:18; // fallback
showParams(opId,'create');
}catch(e){
- showParams(18,'create');
+ showParams(18,'create'); // fallback при ошибке
}
}
+/**
+ * Запустить операцию над выбранным инстансом (кнопка modify/delete/...).
+ *
+ * @param {string} opName — "modify"/"delete"/"suspend"/"resume"/"redeploy"
+ * @param {number} opId — svcOperationId
+ */
function runOp(opName,opId){
if(busy) return;
stopPoll();
showParams(opId,opName);
}
+/**
+ * Показать форму параметров для операции.
+ *
+ * Алгоритм:
+ * 1. Загрузить параметры: GET /api/params/{opId}[?instanceUid=xxx]
+ * - Для create: без instanceUid → шаблонные defaults
+ * - Для не-create: с instanceUid → текущие значения из state.params
+ * 2. Отрисовать форму через renderParamRow (из params-render.js)
+ * 3. Показать кнопку «Запустить»
+ *
+ * @param {number} opId — svcOperationId
+ * @param {string} opName — "create"/"modify"/...
+ */
function showParams(opId,opName){
+ // Сохраняем выбранную операцию
selectedOp={opId,opName,svcId:currentSvcId};
+
+ // Показать панель параметров, скрыть старые этапы
document.getElementById('params-area').style.display='block';
document.querySelectorAll('.stages-box').forEach(e=>e.remove());
document.getElementById('test-status').textContent='';
const isCreate=opName==='create';
+ // Для create — шаблонные значения, для не-create — с instanceUid
const qs=isCreate?'' : `?instanceUid=${selectedInst}`;
+
fetch('/api/params/'+opId+qs).then(r=>r.json()).then(async data=>{
- if(data.error){document.getElementById('params-form').innerHTML=`Ошибка: ${_esc(data.error)}`;return;}
+ if(data.error){
+ document.getElementById('params-form').innerHTML=
+ `Ошибка: ${_esc(data.error)}`;
+ return;
+ }
const params=data.params||data;
- if(!Array.isArray(params)){document.getElementById('params-form').innerHTML=`Неверный формат параметров`;return;}
+ if(!Array.isArray(params)){
+ document.getElementById('params-form').innerHTML=
+ `Неверный формат параметров`;
+ return;
+ }
+
+ // Если есть refSvcId-параметры — загружаем ВСЕ инстансы (для select'ов)
let allInst=[];
const needRefs=params.some(p=>p.refSvcId);
if(needRefs){
- try{const r=await fetch('/api/instances/list');const list=await r.json();allInst=list||[];}catch(e){}
+ try{
+ const r=await fetch('/api/instances/list');
+ const list=await r.json();
+ allInst=list||[];
+ }catch(e){}
}
+
const form=document.getElementById('params-form');
const displayNameValue=isCreate?makeCreateDisplayName():'';
- const createHeader=isCreate?`