v1.0.0 - Version 1.0.0)

api/index.css

@@ -1261,3 +1261,50 @@ body.dark-mode .sql-results-table tbody tr:nth-child(even) {
 .header-title.clickable:hover {
     opacity: 0.8;
 }
+
+/* ================================
+   SUBSCRIPTION TABLE COLLAPSIBLE GROUPS
+   ================================ */
+
+/* Subscription group header styles */
+.subscription-group-header {
+
+    font-weight: 500;
+
+    cursor: pointer;
+    user-select: none;
+}
+
+.subscription-group-header:hover {
+    background-color: var(--secondary-color);
+}
+
+.expand-icon {
+    display: inline-block;
+    width: 20px;
+    transition: transform 0.2s ease;
+    font-size: 12px;
+}
+
+/* Detail row styles */
+.subscription-detail-row {
+    /* background-color: var(--secondary-color); */
+}
+
+.subscription-detail-row:hover {
+    background-color: var(--muted-color);
+}
+
+/* Detail row cell styles */
+.subscription-detail-prefix {
+    padding-left: 30px;
+    font-family: 'Courier New', monospace;
+    font-size: 11px;
+    color: var(--muted-color);
+}
+
+.subscription-detail-id {
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+}
+

api/index.html

@@ -212,18 +212,9 @@
         <div class="input-group">
             <div class="config-table-container">
                 <table class="config-table" id="subscription-details-table">
-                    <thead>
-                        <tr>
-                            <th>Subscription ID</th>
-                            <th>Client IP</th>
-                            <th>WSI Pointer</th>
-                            <th>Duration</th>
-                            <th>Filters</th>
-                        </tr>
-                    </thead>
                     <tbody id="subscription-details-table-body">
                         <tr>
-                            <td colspan="5" style="text-align: center; font-style: italic;">No subscriptions active</td>
+                            <td colspan="4" style="text-align: center; font-style: italic;">No subscriptions active</td>
                         </tr>
                     </tbody>
                 </table>

api/index.js

@@ -4279,101 +4279,185 @@ function populateSubscriptionDetailsTable(subscriptionsData) {
     const tableBody = document.getElementById('subscription-details-table-body');
     if (!tableBody || !subscriptionsData || !Array.isArray(subscriptionsData)) return;
 
+    // Store current expand/collapse state before rebuilding
+    const expandedGroups = new Set();
+    const headerRows = tableBody.querySelectorAll('.subscription-group-header');
+    headerRows.forEach(header => {
+        const wsiPointer = header.getAttribute('data-wsi-pointer');
+        const isExpanded = header.getAttribute('data-expanded') === 'true';
+        if (isExpanded) {
+            expandedGroups.add(wsiPointer);
+        }
+    });
+
     tableBody.innerHTML = '';
 
     if (subscriptionsData.length === 0) {
         const row = document.createElement('tr');
-        row.innerHTML = '<td colspan="5" style="text-align: center; font-style: italic;">No active subscriptions</td>';
+        row.innerHTML = '<td colspan="4" style="text-align: center; font-style: italic;">No active subscriptions</td>';
         tableBody.appendChild(row);
         return;
     }
 
-    subscriptionsData.forEach((subscription, index) => {
-        const row = document.createElement('tr');
-
-        // Calculate duration
-        const now = Math.floor(Date.now() / 1000);
-        const duration = now - subscription.created_at;
-        const durationStr = formatDuration(duration);
-
-        // Format client IP (show full IP for admin view)
-        const clientIP = subscription.client_ip || 'unknown';
-
-        // Format wsi_pointer (show full pointer)
-        const wsiPointer = subscription.wsi_pointer || 'N/A';
-
-        // Format filters (show actual filter details)
-        let filtersDisplay = 'None';
-        if (subscription.filters && subscription.filters.length > 0) {
-            const filterDetails = [];
-            subscription.filters.forEach((filter, index) => {
-                const parts = [];
-
-                // Add kinds if present
-                if (filter.kinds && Array.isArray(filter.kinds) && filter.kinds.length > 0) {
-                    parts.push(`kinds:[${filter.kinds.join(',')}]`);
-                }
-
-                // Add authors if present (truncate for display)
-                if (filter.authors && Array.isArray(filter.authors) && filter.authors.length > 0) {
-                    const authorCount = filter.authors.length;
-                    if (authorCount === 1) {
-                        const shortPubkey = filter.authors[0].substring(0, 8) + '...';
-                        parts.push(`authors:[${shortPubkey}]`);
-                    } else {
-                        parts.push(`authors:[${authorCount} pubkeys]`);
-                    }
-                }
-
-                // Add ids if present
-                if (filter.ids && Array.isArray(filter.ids) && filter.ids.length > 0) {
-                    const idCount = filter.ids.length;
-                    parts.push(`ids:[${idCount} event${idCount > 1 ? 's' : ''}]`);
-                }
-
-                // Add time range if present
-                const timeParts = [];
-                if (filter.since && filter.since > 0) {
-                    const sinceDate = new Date(filter.since * 1000).toLocaleString();
-                    timeParts.push(`since:${sinceDate}`);
-                }
-                if (filter.until && filter.until > 0) {
-                    const untilDate = new Date(filter.until * 1000).toLocaleString();
-                    timeParts.push(`until:${untilDate}`);
-                }
-                if (timeParts.length > 0) {
-                    parts.push(timeParts.join(', '));
-                }
-
-                // Add limit if present
-                if (filter.limit && filter.limit > 0) {
-                    parts.push(`limit:${filter.limit}`);
-                }
-
-                // Add tag filters if present
-                if (filter.tag_filters && Array.isArray(filter.tag_filters) && filter.tag_filters.length > 0) {
-                    parts.push(`tags:[${filter.tag_filters.length} filter${filter.tag_filters.length > 1 ? 's' : ''}]`);
-                }
-
-                if (parts.length > 0) {
-                    filterDetails.push(parts.join(', '));
-                } else {
-                    filterDetails.push('empty filter');
-                }
-            });
-
-            filtersDisplay = filterDetails.join(' | ');
-        }
-
-        row.innerHTML = `
-                    <td style="font-family: 'Courier New', monospace; font-size: 12px;">${subscription.id || 'N/A'}</td>
-                    <td style="font-family: 'Courier New', monospace; font-size: 12px;">${clientIP}</td>
-                    <td style="font-family: 'Courier New', monospace; font-size: 12px;">${wsiPointer}</td>
-                    <td>${durationStr}</td>
-                    <td>${filtersDisplay}</td>
-                `;
-        tableBody.appendChild(row);
+    // Sort subscriptions by wsi_pointer to group them together
+    subscriptionsData.sort((a, b) => {
+        const wsiA = a.wsi_pointer || '';
+        const wsiB = b.wsi_pointer || '';
+        return wsiA.localeCompare(wsiB);
     });
+
+    // Group subscriptions by wsi_pointer
+    const groupedSubscriptions = {};
+    subscriptionsData.forEach(sub => {
+        const wsiKey = sub.wsi_pointer || 'N/A';
+        if (!groupedSubscriptions[wsiKey]) {
+            groupedSubscriptions[wsiKey] = [];
+        }
+        groupedSubscriptions[wsiKey].push(sub);
+    });
+
+    // Create rows for each group
+    Object.entries(groupedSubscriptions).forEach(([wsiPointer, subscriptions]) => {
+        // Calculate group summary
+        const subCount = subscriptions.length;
+        const now = Math.floor(Date.now() / 1000);
+        const oldestDuration = Math.max(...subscriptions.map(s => now - s.created_at));
+        const oldestDurationStr = formatDuration(oldestDuration);
+
+        // Create header row (summary)
+        const headerRow = document.createElement('tr');
+        headerRow.className = 'subscription-group-header';
+        headerRow.setAttribute('data-wsi-pointer', wsiPointer);
+        const wasExpanded = expandedGroups.has(wsiPointer);
+        headerRow.setAttribute('data-expanded', wasExpanded ? 'true' : 'false');
+
+        headerRow.innerHTML = `
+            <td colspan="4" style="padding: 8px;">
+                <span class="expand-icon" style="display: inline-block; width: 20px; transition: transform 0.2s;">▶</span>
+                <strong style="font-family: 'Courier New', monospace; font-size: 12px;">Websocket: ${wsiPointer}</strong>
+                <span style="color: #666; margin-left: 15px;">
+                    Subscriptions: ${subCount} | Oldest: ${oldestDurationStr}
+                </span>
+            </td>
+        `;
+
+        // Add click handler to toggle expansion
+        headerRow.addEventListener('click', () => toggleSubscriptionGroup(wsiPointer));
+
+        tableBody.appendChild(headerRow);
+
+        // Create detail rows (initially hidden)
+        subscriptions.forEach((subscription, index) => {
+            const detailRow = document.createElement('tr');
+            detailRow.className = 'subscription-detail-row';
+            detailRow.setAttribute('data-wsi-group', wsiPointer);
+            detailRow.style.display = 'none';
+
+            // Calculate duration
+            const duration = now - subscription.created_at;
+            const durationStr = formatDuration(duration);
+
+            // Format filters
+            let filtersDisplay = 'None';
+            if (subscription.filters && subscription.filters.length > 0) {
+                const filterDetails = [];
+                subscription.filters.forEach((filter) => {
+                    const parts = [];
+
+                    if (filter.kinds && Array.isArray(filter.kinds) && filter.kinds.length > 0) {
+                        parts.push(`kinds:[${filter.kinds.join(',')}]`);
+                    }
+
+                    if (filter.authors && Array.isArray(filter.authors) && filter.authors.length > 0) {
+                        const authorCount = filter.authors.length;
+                        if (authorCount === 1) {
+                            const shortPubkey = filter.authors[0].substring(0, 8) + '...';
+                            parts.push(`authors:[${shortPubkey}]`);
+                        } else {
+                            parts.push(`authors:[${authorCount} pubkeys]`);
+                        }
+                    }
+
+                    if (filter.ids && Array.isArray(filter.ids) && filter.ids.length > 0) {
+                        const idCount = filter.ids.length;
+                        parts.push(`ids:[${idCount} event${idCount > 1 ? 's' : ''}]`);
+                    }
+
+                    const timeParts = [];
+                    if (filter.since && filter.since > 0) {
+                        const sinceDate = new Date(filter.since * 1000).toLocaleString();
+                        timeParts.push(`since:${sinceDate}`);
+                    }
+                    if (filter.until && filter.until > 0) {
+                        const untilDate = new Date(filter.until * 1000).toLocaleString();
+                        timeParts.push(`until:${untilDate}`);
+                    }
+                    if (timeParts.length > 0) {
+                        parts.push(timeParts.join(', '));
+                    }
+
+                    if (filter.limit && filter.limit > 0) {
+                        parts.push(`limit:${filter.limit}`);
+                    }
+
+                    if (filter.tag_filters && Array.isArray(filter.tag_filters) && filter.tag_filters.length > 0) {
+                        parts.push(`tags:[${filter.tag_filters.length} filter${filter.tag_filters.length > 1 ? 's' : ''}]`);
+                    }
+
+                    if (parts.length > 0) {
+                        filterDetails.push(parts.join(', '));
+                    } else {
+                        filterDetails.push('empty filter');
+                    }
+                });
+
+                filtersDisplay = filterDetails.join(' | ');
+            }
+
+            detailRow.innerHTML = `
+                <td class="subscription-detail-prefix">└─</td>
+                <td class="subscription-detail-id">${subscription.id || 'N/A'}</td>
+                <td class="subscription-detail-duration">${durationStr}</td>
+                <td class="subscription-detail-filters">${filtersDisplay}</td>
+            `;
+
+            tableBody.appendChild(detailRow);
+
+            // Restore expand/collapse state after adding all rows
+            if (wasExpanded) {
+                const detailRows = tableBody.querySelectorAll(`.subscription-detail-row[data-wsi-group="${wsiPointer}"]`);
+                detailRows.forEach(row => row.style.display = 'table-row');
+                const expandIcon = headerRow.querySelector('.expand-icon');
+                if (expandIcon) {
+                    expandIcon.textContent = '▼';
+                    expandIcon.style.transform = 'rotate(90deg)';
+                }
+            }
+        });
+    });
+}
+
+// Toggle function for expanding/collapsing groups
+function toggleSubscriptionGroup(wsiPointer) {
+    const headerRow = document.querySelector(`.subscription-group-header[data-wsi-pointer="${wsiPointer}"]`);
+    const detailRows = document.querySelectorAll(`.subscription-detail-row[data-wsi-group="${wsiPointer}"]`);
+    const expandIcon = headerRow.querySelector('.expand-icon');
+
+    const isExpanded = headerRow.getAttribute('data-expanded') === 'true';
+
+    if (isExpanded) {
+        // Collapse
+        detailRows.forEach(row => row.style.display = 'none');
+        expandIcon.textContent = '▶';
+        expandIcon.style.transform = 'rotate(0deg)';
+        headerRow.setAttribute('data-expanded', 'false');
+    } else {
+        // Expand
+        detailRows.forEach(row => row.style.display = 'table-row');
+        expandIcon.textContent = '▼';
+        expandIcon.style.transform = 'rotate(90deg)';
+        headerRow.setAttribute('data-expanded', 'true');
+    }
 }
 
 // Helper function to format duration in human-readable format