v1.2.14: expandable history rows with execution stages

Backend: /api/history now returns stages (JSONB)
Frontend: click on history row → expand to show execution stages:
   stage_name  start → finish (duration)
   stage_name  start → finish (duration)
   stage_name  start → ... (—)
RUNNING rows: yellow background, FAIL rows: red background
This commit is contained in:
2026-07-31 14:07:35 +04:00
parent 3c97fea4bc
commit bc09b69aa4
3 changed files with 30 additions and 5 deletions
+28 -3
View File
@@ -18,18 +18,43 @@ async function loadHistory(){
if(!rows||!rows.length){body.innerHTML='<span style="color:var(--muted);font-size:11px;">Нет записей</span>'; return;}
let html='<table style="width:100%;font-size:11px;">';
html+='<tr><th style="padding:2px 6px;">Время</th><th style="padding:2px 6px;">Операция</th><th style="padding:2px 6px;">Инстанс</th><th style="padding:2px 6px;">Статус</th><th style="padding:2px 6px;">Длит.</th></tr>';
rows.forEach(r=>{
rows.forEach((r, i)=>{
const time=r.created_at?r.created_at.replace('T',' ').substring(0,19):'?';
const cls=r.status==='OK'?'badge-success':'';
html+=`<tr>
const cls=r.status==='OK'?'badge-success':r.status==='FAIL'?'badge' :'';
const stCls=r.status==='RUNNING'?'background:#fef3c7;':r.status==='FAIL'?'background:#fef2f2;':'';
html+=`<tr style="cursor:pointer;${stCls}" onclick="toggleHistoryRow(${i})">
<td style="padding:2px 6px;">${time}</td>
<td style="padding:2px 6px;">${_esc(r.op_name||'?')}</td>
<td style="padding:2px 6px;">${_esc(r.display_name||r.instance_uid||'?')}</td>
<td style="padding:2px 6px;"><span class="badge ${cls}" style="font-size:9px;">${_esc(r.status||'?')}</span></td>
<td style="padding:2px 6px;">${r.duration_sec!=null?r.duration_sec.toFixed(1)+'s':'-'}</td>
</tr>`;
html+=`<tr id="hist-stages-${i}" style="display:none;"><td colspan="5" style="padding:4px 8px;">${renderStages(r.stages)}</td></tr>`;
});
html+='</table>';
body.innerHTML=html;
}catch(e){body.innerHTML='<span style="color:var(--destructive);font-size:11px;">Ошибка загрузки</span>';}
}
function toggleHistoryRow(i) {
const el = document.getElementById('hist-stages-' + i);
if (!el) return;
el.style.display = el.style.display === 'none' ? 'table-row' : 'none';
}
function renderStages(stages) {
if (!stages || !stages.length) return '<span style="color:var(--muted);font-size:10px;">Нет данных об этапах</span>';
let html = '<div style="font-size:11px;"><b>Этапы выполнения</b></div>';
stages.forEach(s => {
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) : '...';
const dur = s.duration != null ? s.duration.toFixed(1) + ' сек' : '—';
html += `<div style="margin:4px 0;padding:4px 6px;background:var(--brand-grey-light);border-radius:3px;">`;
html += `${icon} <b>${_esc(s.stage||'?')}</b>`;
html += `<span style="color:var(--muted);font-size:10px;margin-left:8px;">${start}${finish} (${dur})</span>`;
html += `</div>`;
});
return html;
}