107 lines
5.2 KiB
JavaScript
107 lines
5.2 KiB
JavaScript
// history.js — история тестов (вид «История»)
|
|
//
|
|
// Загружает последние 50 записей из GET /api/history.
|
|
// Каждая запись — строка таблицы: время, операция, инстанс, статус, длительность.
|
|
// При клике на строку — раскрываются этапы выполнения (stages).
|
|
//
|
|
// Цветовая маркировка:
|
|
// RUNNING → жёлтый фон (#fef3c7)
|
|
// FAIL → красный фон (#fef2f2)
|
|
|
|
let historyOpen=false;
|
|
|
|
/**
|
|
* Переключить панель истории (открыть/закрыть).
|
|
* При открытии — автозагрузка через loadHistory().
|
|
*/
|
|
async function toggleHistory(){
|
|
const body=document.getElementById('history-body');
|
|
historyOpen=!historyOpen;
|
|
body.style.display=historyOpen?'block':'none';
|
|
if(historyOpen) await loadHistory();
|
|
}
|
|
|
|
/**
|
|
* Загрузить и отрисовать историю.
|
|
*
|
|
* Формат ответа API: массив объектов:
|
|
* [{created_at, op_name, display_name, instance_uid, status, duration_sec, stages}, ...]
|
|
*/
|
|
async function loadHistory(){
|
|
const body=document.getElementById('history-body');
|
|
if(!body||body.style.display==='none') return;
|
|
try{
|
|
const r=await fetch('/api/history');
|
|
const rows=await r.json();
|
|
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;table-layout:fixed;">';
|
|
html+='<tr><th style="padding:2px 6px;width:130px;">Время</th><th style="padding:2px 6px;width:90px;">Операция</th><th style="padding:2px 6px;">Инстанс</th><th style="padding:2px 6px;width:50px;">Статус</th><th style="padding:2px 6px;width:55px;">Длит.</th></tr>';
|
|
|
|
rows.forEach((r, i)=>{
|
|
const time=r.created_at?r.created_at.replace('T',' ').substring(0,19):'?';
|
|
const cls=r.status==='OK'?'badge-success':r.status==='FAIL'?'badge':'';
|
|
// Цвет фона строки: RUNNING → жёлтый, FAIL → красный
|
|
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>';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Раскрыть/скрыть строку с этапами для записи истории.
|
|
*
|
|
* @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 '<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;
|
|
}
|