New function added

index.html

@@ -228,6 +228,64 @@
             color: #1976d2;
         }
 
+        .message-producer-consumer {
+            display: flex;
+            gap: 20px;
+            margin-top: 8px;
+            font-size: 0.85em;
+            color: #555;
+        }
+
+        .message-producer-consumer span {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .message-producer-consumer strong {
+            color: #333;
+        }
+
+        .connections-section {
+            padding: 20px 30px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .connections-section h2 {
+            font-size: 1.3em;
+            margin-bottom: 15px;
+            color: #333;
+        }
+
+        .connections-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 0.9em;
+        }
+
+        .connections-table th,
+        .connections-table td {
+            padding: 10px 12px;
+            text-align: left;
+            border-bottom: 1px solid #eee;
+        }
+
+        .connections-table th {
+            background: #f5f5f5;
+            font-weight: 600;
+            color: #555;
+        }
+
+        .connections-table tr:hover {
+            background: #fafafa;
+        }
+
+        .connections-empty {
+            color: #999;
+            padding: 20px;
+            text-align: center;
+        }
+
         .empty-state {
             text-align: center;
             padding: 60px 20px;
@@ -300,6 +358,13 @@
             </div>
         </div>
 
+        <div class="connections-section">
+            <h2>Активные подключения к NATS</h2>
+            <div id="connectionsContainer">
+                <div class="connections-empty">Загрузка…</div>
+            </div>
+        </div>
+
         <div class="messages-container" id="messagesContainer">
             <div class="empty-state">
                 <svg viewBox="0 0 24 24" fill="currentColor">
@@ -413,6 +478,10 @@
                             <span class="message-size">${formatBytes(msg.size)}</span>
                         </div>
                     </div>
+                    <div class="message-producer-consumer">
+                        <span><strong>Продюсер:</strong> ${escapeHtml(msg.producer || '—')}</span>
+                        <span><strong>Потребитель:</strong> ${escapeHtml(msg.consumer || 'nats-ui')}</span>
+                    </div>
                     <div class="message-data">${escapeHtml(msg.data)}</div>
                 </div>
             `).join('');
@@ -496,8 +565,56 @@
             updateMessages();
         });
 
+        function loadConnections() {
+            fetch('/api/connections')
+                .then(res => res.json())
+                .then(data => {
+                    const container = document.getElementById('connectionsContainer');
+                    const conns = data.connections || [];
+                    if (conns.length === 0) {
+                        container.innerHTML = '<div class="connections-empty">Нет данных о подключениях. Укажите nats_monitor_url в конфигурации (HTTP мониторинг NATS, порт 8222).</div>';
+                        return;
+                    }
+                    container.innerHTML = `
+                        <table class="connections-table">
+                            <thead>
+                                <tr>
+                                    <th>CID</th>
+                                    <th>Имя</th>
+                                    <th>IP:Порт</th>
+                                    <th>Подписок</th>
+                                    <th>Входящие</th>
+                                    <th>Исходящие</th>
+                                    <th>Язык</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                ${conns.map(c => `
+                                    <tr>
+                                        <td>${c.cid}</td>
+                                        <td>${escapeHtml(c.name || '—')}</td>
+                                        <td>${escapeHtml(c.ip || '')}:${c.port || ''}</td>
+                                        <td>${c.subscriptions ?? '—'}</td>
+                                        <td>${c.in_msgs ?? '—'}</td>
+                                        <td>${c.out_msgs ?? '—'}</td>
+                                        <td>${escapeHtml(c.lang || '—')}</td>
+                                    </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+                    `;
+                })
+                .catch(err => {
+                    document.getElementById('connectionsContainer').innerHTML =
+                        '<div class="connections-empty">Не удалось загрузить список подключений.</div>';
+                    console.error('Connections load error:', err);
+                });
+        }
+
         // Инициализация - только WebSocket, все сообщения придут автоматически
         connectWebSocket();
+        loadConnections();
+        setInterval(loadConnections, 5000);
     </script>
 </body>
 </html>