Analytics: compare two finished runs
New page /analytics/compare and API GET /admin/analytics/compare (+ /lists/{group}):
the administrator picks an old (A) and a new (B) run; the report shows the new
addresses (only in B), the ones that left (only in A) and the common ones whose
membership in the seven indicators (pass, partial, fail, egress https any/all,
ingress ssh any/all) differs, with a "what changed" summary per address; the
dynamics of each indicator (delta = new - left + entered - exited) and a verdict
transition matrix. Every number opens a list with CSV. Cancelled addresses are not
part of a run. The list dialog moved to a shared analytics-dialog.js and template;
/analytics got a "compare with another run" button.
Docs, plan and summary in docs/changes/.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ayurishchevandClaude Sonnet 5.5 committed
1 parent
2f038f8362
commit
068c10ea1c
28 files changed
+2057
-138
No files matched your search
@@ -1,21 +1,15 @@
|
||||
/* Analytics page: renders the report of one finished run (embedded as JSON in
|
||||
#analytics-data) and opens the address lists behind the indicators and the
|
||||
error classes in a dialog. No other run's data is on the page. */
|
||||
error classes in the shared dialog (analytics-dialog.js). No other run's data
|
||||
is on the page. */
|
||||
(function () {
|
||||
'use strict';
|
||||
var D = JSON.parse(document.getElementById('analytics-data').textContent);
|
||||
var R = D.report, M = D.meta, S = R.summary, Q = R.quality;
|
||||
|
||||
function $(id) { return document.getElementById(id); }
|
||||
function fmt(n) { return Math.round(n).toLocaleString('ru-RU'); }
|
||||
var A = window.AnalyticsDialog, $ = A.$, fmt = A.fmt, esc = A.esc, tipAttr = A.tipAttr;
|
||||
function pct(a, b) { return b ? Math.round(a / b * 100) : 0; }
|
||||
function pct1(a, b) { return b ? (a / b * 100).toLocaleString('ru-RU', { maximumFractionDigits: 1 }) : '0'; }
|
||||
function esc(s) {
|
||||
return String(s).replace(/[&<>"']/g, function (c) {
|
||||
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
|
||||
});
|
||||
}
|
||||
function tipAttr(t) { return 'data-tip="' + esc(t) + '"'; }
|
||||
function vnum(id) { var m = /(\d+)$/.exec(id); return m ? +m[1] : null; }
|
||||
function vshort(id) { var n = vnum(id); return n === null ? id : 'v' + n; }
|
||||
|
||||
@@ -211,57 +205,11 @@
|
||||
}
|
||||
};
|
||||
|
||||
var cur = null; // the list shown in the dialog
|
||||
|
||||
function listURL(base, kind, cls) {
|
||||
return base + encodeURIComponent(kind) + '?run=' + M.run_id + (cls ? '&class=' + encodeURIComponent(cls) : '');
|
||||
}
|
||||
|
||||
function csvText(cols, rows) {
|
||||
function q(v) { return '"' + String(v).replace(/"/g, '""') + '"'; }
|
||||
return [cols].concat(rows).map(function (r) { return r.map(q).join(','); }).join('\r\n') + '\r\n';
|
||||
}
|
||||
|
||||
function openDialog() {
|
||||
var d = $('an-dlg');
|
||||
if (d.open) return;
|
||||
if (d.showModal) d.showModal(); else d.setAttribute('open', '');
|
||||
}
|
||||
|
||||
function fillDialog(m) {
|
||||
cur = m;
|
||||
$('an-dlg-title').textContent = m.title + ' · ' + fmt(m.rows.length);
|
||||
$('an-dlg-note').textContent = 'Запуск: ' + m.runLabel + '. ' + m.note;
|
||||
$('an-dlg-dist').hidden = !m.dist;
|
||||
$('an-dlg-dist').innerHTML = m.dist || '';
|
||||
var hint = m.hints || {};
|
||||
$('an-dlg-tbl').innerHTML = '<thead><tr>' + m.cols.map(function (c, i) {
|
||||
return hint[i] ? '<th ' + tipAttr(hint[i]) + ' tabindex="0">' + esc(c) + '<span class="an-hint" aria-hidden="true">ⓘ</span></th>' : '<th>' + esc(c) + '</th>';
|
||||
}).join('') + '</tr></thead><tbody>' + m.rows.map(function (x) {
|
||||
return '<tr>' + x.map(function (v, i) {
|
||||
var h = m.cellHints && m.cellHints[i] ? m.cellHints[i](v) : '';
|
||||
return '<td class="' + (i < 2 ? 'an-a' : '') + '"' + (h ? ' ' + tipAttr(h) : '') + '>' + esc(v) + '</td>';
|
||||
}).join('') + '</tr>';
|
||||
}).join('') + '</tbody>';
|
||||
$('an-dlg-msg').textContent = '';
|
||||
}
|
||||
|
||||
function loadList(kind, cls, meta) {
|
||||
$('an-dlg-title').textContent = meta.title;
|
||||
$('an-dlg-note').textContent = 'Загрузка…';
|
||||
$('an-dlg-dist').hidden = true;
|
||||
$('an-dlg-tbl').innerHTML = '';
|
||||
$('an-dlg-msg').textContent = '';
|
||||
cur = null;
|
||||
openDialog();
|
||||
return fetch(listURL(M.list_url, kind, cls), { headers: { Accept: 'application/json' }, credentials: 'same-origin' })
|
||||
.then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
|
||||
.then(function (l) { return l; })
|
||||
.catch(function (e) {
|
||||
$('an-dlg-note').textContent = 'Не удалось загрузить список: ' + e.message;
|
||||
return null;
|
||||
});
|
||||
}
|
||||
function loadList(kind, cls, meta) { return A.load(listURL(M.list_url, kind, cls), meta.title); }
|
||||
|
||||
function runLabel() {
|
||||
var o = document.getElementById('an-run');
|
||||
@@ -272,7 +220,7 @@
|
||||
var meta = LISTS[kind];
|
||||
loadList(kind, '', meta).then(function (l) {
|
||||
if (!l) return;
|
||||
fillDialog({ title: meta.title, note: meta.note, hints: meta.hints, cols: l.columns, rows: l.rows, runLabel: runLabel(), file: kind, kind: kind, cls: '' });
|
||||
A.fill({ title: meta.title, note: meta.note, hints: meta.hints, cols: l.columns, rows: l.rows, runLabel: runLabel(), csvURL: listURL(M.csv_url, kind, '') });
|
||||
});
|
||||
}
|
||||
|
||||
@@ -292,30 +240,16 @@
|
||||
}).join('') + '</div>' +
|
||||
'<div class="an-lab20" style="' + grid + '">' + labels.map(function (lab) { return '<span>' + esc(lab.replace(/^v/, '')) + '</span>'; }).join('') + '</div>' +
|
||||
'<div class="an-chips"><span class="an-tag an-t-n">всего ' + fmt(rows.length) + '</span><span class="an-tag an-t-ok">вердикт pass: ' + fmt(pass) + '</span><span class="an-tag an-t-warn">вердикт partial: ' + fmt(rows.length - pass) + '</span><span class="an-tag an-t-bad">после вердикта: ' + fmt(late) + '</span><span class="an-tag an-t-n">в вердикте: ' + fmt(rows.length - late) + '</span></div>';
|
||||
fillDialog({
|
||||
A.fill({
|
||||
title: 'Ingress: ' + cls,
|
||||
note: 'Проваленные проверки этого класса в последнем цикле каждого адреса. Валидатор — тот, к которому был привязан адрес в этом цикле. «После вердикта» — результат пришёл позже агрегации и в вердикт адреса не вошёл.',
|
||||
cols: l.columns, rows: rows, runLabel: runLabel(), dist: dist, kind: 'error', cls: cls,
|
||||
cols: l.columns, rows: rows, runLabel: runLabel(), dist: dist, csvURL: listURL(M.csv_url, 'error', cls),
|
||||
hints: { 3: 'Валидатор, к которому был привязан адрес в этом цикле (берётся из события привязки Floating IP).', 4: VERDICT_HINT, 5: STATUS_HINT },
|
||||
cellHints: { 4: function (v) { return VERDICT_VAL[v] || ''; }, 5: statusVal }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function copyCsv() {
|
||||
var msg = $('an-dlg-msg');
|
||||
if (!cur) return;
|
||||
var text = csvText(cur.cols, cur.rows);
|
||||
var done = function () { msg.textContent = 'CSV скопирован в буфер обмена.'; };
|
||||
var fail = function () { msg.textContent = 'Буфер обмена недоступен в этом окне.'; };
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(done, fail); else fail();
|
||||
}
|
||||
|
||||
function downloadCsv() {
|
||||
if (!cur) return;
|
||||
window.location.href = listURL(M.csv_url, cur.kind, cur.cls);
|
||||
}
|
||||
|
||||
/* ---- wiring ---- */
|
||||
function renderAll() {
|
||||
renderSubnets();
|
||||
@@ -343,25 +277,4 @@
|
||||
renderTypes(); renderTargets();
|
||||
});
|
||||
$('an-allsub').addEventListener('click', function () { state.all = !state.all; renderSubnets(); renderTargets(); });
|
||||
$('an-dlg-csv').addEventListener('click', downloadCsv);
|
||||
$('an-dlg-copy').addEventListener('click', copyCsv);
|
||||
$('an-dlg-close').addEventListener('click', function () { $('an-dlg').close(); });
|
||||
$('an-dlg').addEventListener('click', function (e) { if (e.target === $('an-dlg')) $('an-dlg').close(); });
|
||||
|
||||
/* tooltip: moved into the open dialog, otherwise the modal's top layer covers it */
|
||||
var tip = $('an-tip');
|
||||
function tipHost() { var d = $('an-dlg'); return d && d.open ? d : document.body; }
|
||||
document.addEventListener('mouseover', function (e) {
|
||||
var t = e.target.closest('[data-tip]');
|
||||
if (!t) return;
|
||||
var h = tipHost();
|
||||
if (tip.parentNode !== h) h.appendChild(tip);
|
||||
tip.textContent = t.dataset.tip;
|
||||
tip.style.opacity = 1;
|
||||
});
|
||||
document.addEventListener('mousemove', function (e) {
|
||||
tip.style.left = Math.max(8, Math.min(e.clientX + 14, window.innerWidth - 376)) + 'px';
|
||||
tip.style.top = (e.clientY + 16) + 'px';
|
||||
});
|
||||
document.addEventListener('mouseout', function (e) { if (e.target.closest('[data-tip]')) tip.style.opacity = 0; });
|
||||
})();
|
||||
Reference in new issue
Block a user