commit

templates/pages/network_clients.html

@@ -29,17 +29,69 @@
 
 {% block extra_scripts %}
 <script defer>
+    function renderSupisTable(items = []) {
+        resultsOutput.innerHTML = '';
+        if (!Array.isArray(items) || items.length === 0) {
+            resultsOutput.innerHTML = '<div class="alert alert-info mb-0">No network clients returned for this host.</div>';
+            return;
+        }
+
+        const preferred = ['supi', 'imsi', 'msisdn', 'profile', 'slice', 'dnn', 'status'];
+        const columns = preferred.filter(key => items.some(item => item[key] !== undefined));
+        if (columns.length === 0) {
+            columns.push(...Object.keys(items[0]).slice(0, 6));
+        }
+
+        const summary = document.createElement('div');
+        summary.className = 'mb-2 text-white-50';
+        summary.textContent = `Showing ${items.length} record${items.length === 1 ? '' : 's'}.`;
+        resultsOutput.appendChild(summary);
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'table-responsive';
+        const table = document.createElement('table');
+        table.className = 'table table-dark table-hover table-sm table-compact align-middle';
+
+        const thead = document.createElement('thead');
+        const headRow = document.createElement('tr');
+        columns.forEach(col => {
+            const th = document.createElement('th');
+            th.textContent = col.replace(/_/g, ' ').toUpperCase();
+            headRow.appendChild(th);
+        });
+        thead.appendChild(headRow);
+        table.appendChild(thead);
+
+        const tbody = document.createElement('tbody');
+        items.forEach(item => {
+            const row = document.createElement('tr');
+            columns.forEach(col => {
+                const cell = document.createElement('td');
+                let value = item[col];
+                if (Array.isArray(value) || (value && typeof value === 'object')) {
+                    value = JSON.stringify(value);
+                }
+                cell.textContent = value ?? '';
+                row.appendChild(cell);
+            });
+            tbody.appendChild(row);
+        });
+        table.appendChild(tbody);
+        wrapper.appendChild(table);
+        resultsOutput.appendChild(wrapper);
+    }
+
     document.getElementById('listSupiBtn').addEventListener('click', async () => {
-         const rawHost = document.getElementById('host').value;
+        const rawHost = document.getElementById('host').value;
         if (!rawHost) {
             alert('Please enter a 5GC Host IP address.');
             return;
         }
         const host = formatHostIp(rawHost);
-        const supiData = await apiCall('/api/supis/list', { host }); 
-        if (supiData) {
-            resultsOutput.textContent = JSON.stringify(supiData, null, 2);
+        const response = await apiCall('/api/supis/list', { host });
+        if (response && response.supis) {
+            renderSupisTable(response.supis);
         }
     });
 </script>
-{% endblock %}
+{% endblock %}