From 29a91ced592521aca73bb03d32253695d8a89754 Mon Sep 17 00:00:00 2001
From: SunBK201 <sunbk201gm@gmail.com>
Date: Thu, 6 Nov 2025 15:56:31 +0800
Subject: [PATCH] feat: add duration formatting and sorting for connection
 statistics

---
 openwrt/files/luci/statistics.htm | 225 +++++++++++++++++++++++++++++-
 src/internal/statistics/conn.go   |   4 +-
 2 files changed, 226 insertions(+), 3 deletions(-)

diff --git a/openwrt/files/luci/statistics.htm b/openwrt/files/luci/statistics.htm
index b9313db..e1193c9 100644
--- a/openwrt/files/luci/statistics.htm
+++ b/openwrt/files/luci/statistics.htm
@@ -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%;
diff --git a/src/internal/statistics/conn.go b/src/internal/statistics/conn.go
index 3404ac0..f4dd995 100644
--- a/src/internal/statistics/conn.go
+++ b/src/internal/statistics/conn.go
@@ -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)
 	}
 }