tomh104/nat-as-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor activity log UI

Browse Source
This commit is contained in:
Tom Hempel
2026-06-03 17:37:28 +02:00
parent fc84d55bd6
commit ffe6d04d75
2 changed files with 54 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
website/js/pages/dev.js
View File

@ -91,7 +91,6 @@ export function devPage() {
<th>Subject</th>
<th>Method</th>
<th>Route</th>
<th>IP</th>
<th>Status</th>
<th>Duration</th>
<th>Values</th>
@ -99,7 +98,7 @@ export function devPage() {
</tr>
</thead>
<tbody id="activityLogBody">
<tr><td colspan="10" style="text-align:center;color:var(--text-secondary);padding:20px">Loading…</td></tr>
<tr><td colspan="9" style="text-align:center;color:var(--text-secondary);padding:20px">Loading…</td></tr>
</tbody>
</table>
</div>
@ -297,7 +296,7 @@ async function loadActivityLog() {
const date = document.getElementById('activityLogDate')?.value || new Date().toISOString().slice(0, 10);
const activity = document.getElementById('activityLogKind')?.value || '';
tbody.innerHTML = '<tr><td colspan="10" style="text-align:center;padding:20px">Loading…</td></tr>';
tbody.innerHTML = '<tr><td colspan="9" style="text-align:center;padding:20px">Loading…</td></tr>';
try {
const q = new URLSearchParams({ date, limit: '300' });
@ -317,7 +316,7 @@ async function loadActivityLog() {
}
if (!entries.length) {
tbody.innerHTML = '<tr><td colspan="10" style="text-align:center;color:var(--text-secondary);padding:24px">No activity recorded</td></tr>';
tbody.innerHTML = '<tr><td colspan="9" style="text-align:center;color:var(--text-secondary);padding:24px">No activity recorded</td></tr>';
return;
}
@ -332,26 +331,24 @@ async function loadActivityLog() {
const dur = e.duration_ms != null ? `${e.duration_ms} ms` : '—';
const subject = formatActivitySubject(e);
const performedBy = formatActivityPerformer(e);
const ip = (e.ip && String(e.ip).trim()) ? String(e.ip).trim() : '—';
const errPart = e.error
? `<div class="error-text" style="margin-top:6px;font-size:.8rem">${escHtml(e.error)}</div>`
? `<div class="activity-log-error">${escHtml(e.error)}</div>`
: '';
return `<tr>
<td>${escHtml(time)}</td>
<td><span class="badge ${badgeClass}">${escHtml(label)}</span></td>
<td class="activity-log-col-time">${escHtml(time)}</td>
<td class="activity-log-col-kind"><span class="badge ${badgeClass}">${escHtml(label)}</span></td>
<td class="activity-log-subject">${subject}</td>
<td><code>${escHtml(e.method || '')}</code></td>
<td><code>${escHtml(e.route || '')}</code></td>
<td class="activity-log-ip"><code>${escHtml(ip)}</code></td>
<td class="${statusClass}">${escHtml(status)}</td>
<td>${escHtml(dur)}</td>
<td class="activity-log-col-meta"><code>${escHtml(e.method || '')}</code></td>
<td class="activity-log-col-route"><code>${escHtml(e.route || '')}</code></td>
<td class="activity-log-col-meta ${statusClass}">${escHtml(status)}</td>
<td class="activity-log-col-meta">${escHtml(dur)}</td>
<td class="activity-log-changes-cell">${renderActivityChanges(e.changes)}</td>
<td class="activity-log-actor">${performedBy}${errPart}</td>
</tr>`;
}).join('');
} catch (err) {
if (meta) meta.textContent = '';
tbody.innerHTML = `<tr><td colspan="10" class="error-text" style="padding:16px">${escHtml(err.message)}</td></tr>`;
tbody.innerHTML = `<tr><td colspan="9" class="error-text" style="padding:16px">${escHtml(err.message)}</td></tr>`;
}
}