mirror of
https://github.com/SunBK201/UA3F.git
synced 2025-12-16 16:57:08 +00:00
feat: add duration formatting and sorting for connection statistics
This commit is contained in:
SunBK201
parent
a44f772c99
commit
29a91ced59
@ -99,13 +99,207 @@ end
|
||||
<td class="td" data-title="<%:Protocol%>"><span><%= item.protocol %></span></td>
|
||||
<td class="td" data-title="<%:Source Address%>"><span><%= item.srcAddr %></span></td>
|
||||
<td class="td" data-title="<%:Destination Address%>"><span><%= item.destAddr %></span></td>
|
||||
<td class="td" data-title="<%:Duration%>"><span><%= item.duration %></span></td>
|
||||
<td class="td" data-title="<%:Duration%>" data-seconds="<%= item.duration %>"><span class="duration-text"><%= item.duration %></span></td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</table>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
function formatDuration(seconds) {
|
||||
seconds = parseInt(seconds);
|
||||
if (isNaN(seconds) || seconds < 0) return '0s';
|
||||
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const secs = seconds % 60;
|
||||
|
||||
const parts = [];
|
||||
if (days > 0) parts.push(days + 'd');
|
||||
if (hours > 0) parts.push(hours + 'h');
|
||||
if (minutes > 0) parts.push(minutes + 'm');
|
||||
if (secs > 0 || parts.length === 0) parts.push(secs + 's');
|
||||
|
||||
return parts.join(' ');
|
||||
}
|
||||
|
||||
function formatAllDurations() {
|
||||
const durationCells = document.querySelectorAll('#conn-stats-table td[data-seconds]');
|
||||
durationCells.forEach(cell => {
|
||||
const seconds = cell.getAttribute('data-seconds');
|
||||
const textSpan = cell.querySelector('.duration-text');
|
||||
if (textSpan && seconds) {
|
||||
textSpan.textContent = formatDuration(seconds);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function sortTable(tableId, columnIndex, isNumeric) {
|
||||
const table = document.getElementById(tableId);
|
||||
const tbody = table.querySelector('tbody') || table;
|
||||
const rows = Array.from(tbody.querySelectorAll('tr.tr')).filter(row => !row.classList.contains('table-titles'));
|
||||
|
||||
const sortKey = `${tableId}-sort`;
|
||||
let sortState = sessionStorage.getItem(sortKey);
|
||||
let currentSort = sortState ? JSON.parse(sortState) : {column: -1, order: 'asc'};
|
||||
|
||||
let order = 'asc';
|
||||
if (currentSort.column === columnIndex) {
|
||||
order = currentSort.order === 'asc' ? 'desc' : 'asc';
|
||||
}
|
||||
|
||||
rows.sort((a, b) => {
|
||||
let aVal, bVal;
|
||||
|
||||
if (tableId === 'conn-stats-table' && columnIndex === 3) {
|
||||
aVal = parseFloat(a.children[columnIndex].getAttribute('data-seconds')) || 0;
|
||||
bVal = parseFloat(b.children[columnIndex].getAttribute('data-seconds')) || 0;
|
||||
} else {
|
||||
aVal = a.children[columnIndex].textContent.trim();
|
||||
bVal = b.children[columnIndex].textContent.trim();
|
||||
|
||||
if (isNumeric) {
|
||||
aVal = parseFloat(aVal) || 0;
|
||||
bVal = parseFloat(bVal) || 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (aVal < bVal) return order === 'asc' ? -1 : 1;
|
||||
if (aVal > bVal) return order === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
rows.forEach((row, index) => {
|
||||
row.className = row.className.replace(/cbi-rowstyle-[12]/, (index % 2 === 0) ? 'cbi-rowstyle-2' : 'cbi-rowstyle-1');
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
sessionStorage.setItem(sortKey, JSON.stringify({column: columnIndex, order: order}));
|
||||
|
||||
updateSortIndicators(tableId, columnIndex, order);
|
||||
}
|
||||
|
||||
function updateSortIndicators(tableId, activeColumn, order) {
|
||||
const table = document.getElementById(tableId);
|
||||
const headers = table.querySelectorAll('th[data-sortable-row="true"]');
|
||||
|
||||
headers.forEach((th, index) => {
|
||||
th.style.position = 'relative';
|
||||
th.style.cursor = 'pointer';
|
||||
let indicator = th.querySelector('.sort-indicator');
|
||||
|
||||
if (!indicator) {
|
||||
indicator = document.createElement('span');
|
||||
indicator.className = 'sort-indicator';
|
||||
indicator.style.fontSize = '0.8em';
|
||||
indicator.style.marginLeft = '4px';
|
||||
indicator.style.display = 'inline-block';
|
||||
indicator.style.width = '12px';
|
||||
indicator.style.textAlign = 'center';
|
||||
th.appendChild(indicator);
|
||||
}
|
||||
|
||||
if (index === activeColumn) {
|
||||
indicator.textContent = order === 'asc' ? '▲' : '▼';
|
||||
indicator.style.visibility = 'visible';
|
||||
} else {
|
||||
indicator.textContent = '';
|
||||
indicator.style.visibility = 'hidden';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function restoreTableSort(tableId, numericColumns) {
|
||||
const sortKey = `${tableId}-sort`;
|
||||
const sortState = sessionStorage.getItem(sortKey);
|
||||
|
||||
if (sortState) {
|
||||
const {column, order} = JSON.parse(sortState);
|
||||
const table = document.getElementById(tableId);
|
||||
const tbody = table.querySelector('tbody') || table;
|
||||
const rows = Array.from(tbody.querySelectorAll('tr.tr')).filter(row => !row.classList.contains('table-titles'));
|
||||
|
||||
if (rows.length > 0) {
|
||||
const isNumeric = numericColumns.includes(column);
|
||||
|
||||
rows.sort((a, b) => {
|
||||
let aVal, bVal;
|
||||
|
||||
if (tableId === 'conn-stats-table' && column === 3) {
|
||||
aVal = parseFloat(a.children[column].getAttribute('data-seconds')) || 0;
|
||||
bVal = parseFloat(b.children[column].getAttribute('data-seconds')) || 0;
|
||||
} else {
|
||||
aVal = a.children[column].textContent.trim();
|
||||
bVal = b.children[column].textContent.trim();
|
||||
|
||||
if (isNumeric) {
|
||||
aVal = parseFloat(aVal) || 0;
|
||||
bVal = parseFloat(bVal) || 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (aVal < bVal) return order === 'asc' ? -1 : 1;
|
||||
if (aVal > bVal) return order === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
rows.forEach((row, index) => {
|
||||
row.className = row.className.replace(/cbi-rowstyle-[12]/, (index % 2 === 0) ? 'cbi-rowstyle-2' : 'cbi-rowstyle-1');
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
updateSortIndicators(tableId, column, order);
|
||||
}
|
||||
}
|
||||
|
||||
function bindTableEvents(tableId, numericColumns) {
|
||||
const table = document.getElementById(tableId);
|
||||
if (!table) return;
|
||||
|
||||
const headers = table.querySelectorAll('th[data-sortable-row="true"]');
|
||||
headers.forEach((th, index) => {
|
||||
th.style.cursor = 'pointer';
|
||||
th.style.userSelect = 'none';
|
||||
|
||||
const newTh = th.cloneNode(true);
|
||||
th.parentNode.replaceChild(newTh, th);
|
||||
|
||||
if (!newTh.querySelector('.sort-indicator')) {
|
||||
const indicator = document.createElement('span');
|
||||
indicator.className = 'sort-indicator';
|
||||
indicator.style.fontSize = '0.8em';
|
||||
indicator.style.marginLeft = '4px';
|
||||
indicator.style.display = 'inline-block';
|
||||
indicator.style.width = '12px';
|
||||
indicator.style.textAlign = 'center';
|
||||
indicator.style.visibility = 'hidden';
|
||||
indicator.textContent = '';
|
||||
newTh.appendChild(indicator);
|
||||
}
|
||||
|
||||
newTh.addEventListener('click', () => {
|
||||
const isNumeric = numericColumns.includes(index);
|
||||
sortTable(tableId, index, isNumeric);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initTableSort() {
|
||||
const tables = [
|
||||
{id: 'rewrite-stats-table', numericColumns: [1]},
|
||||
{id: 'pass-stats-table', numericColumns: [1]},
|
||||
{id: 'conn-stats-table', numericColumns: [3]}
|
||||
];
|
||||
|
||||
formatAllDurations();
|
||||
|
||||
tables.forEach(tableInfo => {
|
||||
bindTableEvents(tableInfo.id, tableInfo.numericColumns);
|
||||
restoreTableSort(tableInfo.id, tableInfo.numericColumns);
|
||||
});
|
||||
}
|
||||
|
||||
async function updateStats() {
|
||||
try {
|
||||
const response = await fetch(window.location.href, {cache: "no-store"});
|
||||
@ -120,12 +314,19 @@ end
|
||||
|
||||
if (newRewriteTable) {
|
||||
document.querySelector("#rewrite-stats-table").innerHTML = newRewriteTable.innerHTML;
|
||||
bindTableEvents('rewrite-stats-table', [1]);
|
||||
restoreTableSort('rewrite-stats-table', [1]);
|
||||
}
|
||||
if (newPassTable) {
|
||||
document.querySelector("#pass-stats-table").innerHTML = newPassTable.innerHTML;
|
||||
bindTableEvents('pass-stats-table', [1]);
|
||||
restoreTableSort('pass-stats-table', [1]);
|
||||
}
|
||||
if (newConnTable) {
|
||||
document.querySelector("#conn-stats-table").innerHTML = newConnTable.innerHTML;
|
||||
formatAllDurations();
|
||||
bindTableEvents('conn-stats-table', [3]);
|
||||
restoreTableSort('conn-stats-table', [3]);
|
||||
}
|
||||
if (newLog) {
|
||||
document.querySelector("#cbid\\.ua3f\\.main\\.log").value = newLog.value;
|
||||
@ -135,10 +336,32 @@ end
|
||||
console.error("update stats error:", err);
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initTableSort);
|
||||
} else {
|
||||
initTableSort();
|
||||
}
|
||||
|
||||
setInterval(updateStats, 5000);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
th[data-sortable-row="true"] {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
th[data-sortable-row="true"]:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.sort-indicator {
|
||||
color: #0066cc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#rewrite-stats-table th:nth-child(1),
|
||||
#rewrite-stats-table td:nth-child(1) {
|
||||
width: 20%;
|
||||
|
||||
@ -70,8 +70,8 @@ func dumpConnectionRecords() {
|
||||
|
||||
for _, record := range statList {
|
||||
duration := time.Since(record.StartTime)
|
||||
line := fmt.Sprintf("%s %s %s %s\n",
|
||||
record.Protocol, record.SrcAddr, record.DestAddr, duration.Round(time.Second))
|
||||
line := fmt.Sprintf("%s %s %s %d\n",
|
||||
record.Protocol, record.SrcAddr, record.DestAddr, int(duration.Seconds()))
|
||||
f.WriteString(line)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user