Подробные комментарии ко всем JS-файлам фронтенда
This commit is contained in:
+113
-33
@@ -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='<span style="color:var(--destructive);font-size:11px;">Ошибка загрузки</span>';}
|
||||
// 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=
|
||||
'<span style="color:var(--destructive);font-size:11px;">Ошибка загрузки</span>';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Отрисовать список инстансов в #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+=`<div class="inst-item" onclick="toggleInstance('${i.instanceUid}')" data-iuid="${i.instanceUid}">
|
||||
<span style="display:inline-block;width:220px;">${_esc(i.displayName)}</span>
|
||||
<span style="display:inline-block;width:140px;color:var(--muted);font-size:11px;">${_esc(i.svc||'')}</span>
|
||||
@@ -40,51 +82,89 @@ function renderInstances(){
|
||||
<span style="display:inline-block;width:60px;color:var(--muted);font-size:9px;text-align:right;" title="${i.instanceConfigDtCreated||''}">${relativeTime(i.instanceConfigDtCreated)}</span>
|
||||
<span style="display:inline-block;width:60px;color:var(--muted);font-size:9px;text-align:right;" title="${i.instanceConfigDtModified||''}">${relativeTime(i.instanceConfigDtModified)}</span>
|
||||
</div>`;
|
||||
// Контейнер для кнопок операций (изначально скрыт)
|
||||
html+=`<div class="inst-ops" id="ops-${i.instanceUid}"></div>`;
|
||||
});
|
||||
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=>
|
||||
`<button class="btn btn-sm op-btn ${opClass(o.operation)}" onclick="runOp('${o.operation}',${o.svcOperationId})">${o.operation}</button>`
|
||||
).join('');
|
||||
opsEl.classList.add('open');
|
||||
}catch(e){
|
||||
opsEl.innerHTML='<span style="color:var(--destructive);font-size:11px;">Ошибка загрузки</span>';
|
||||
opsEl.classList.add('open');
|
||||
}
|
||||
opsEl.innerHTML=ops.map(o=>
|
||||
`<button class="btn btn-sm op-btn ${opClass(o.operation)}" onclick="runOp('${o.operation}',${o.svcOperationId})">${o.operation}</button>`
|
||||
).join('');
|
||||
opsEl.classList.add('open');
|
||||
}catch(e){opsEl.innerHTML='<span style="color:var(--destructive);font-size:11px;">Ошибка загрузки</span>';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 '';
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user