feat: добавлена поддержка отображения устройства в журнале трафика

Refs: None

src/server/index.js

@@ -100,9 +100,9 @@ const trafficSubscribers = new Set();
 //   [router] match[N][rule-name] => outbound/direct[tag]
 //   outbound/direct[tag]: dial tcp connection to host:port
 
-// Назначение после --> (основной формат sing-box)
+// Назначение после --> (старый формат sing-box)
 const DEST_ARROW_RE = /-->\s*([\w.\-]+):(\d{1,5})/;
-// Назначение в старом словесном стиле
+// Назначение в словесном стиле
 const DEST_WORD_RE =
   /(?:connection\s+to|dial(?:ing)?|connect(?:ing)?\s+to)\s+([\w.\-]+):(\d{1,5})/i;
 // Тип аутбаунда: outbound/TYPE[tag] или outbound/TYPE
@@ -110,6 +110,21 @@ const OUTBOUND_RE = /outbound\/([a-z0-9_\-]+)/i;
 // Строка роутера: [router] match[N][rule-name] => outbound/TYPE[tag]
 const ROUTER_MATCH_LINE_RE =
   /\[router\].*\bmatch\[\d+\]\[([^\]]+)\].*outbound\/([a-z0-9_\-]+)/i;
+// ID соединения: [CONN_ID Nms]
+const CONN_ID_RE = /\[(\d{5,12})\s+\d+ms\]/;
+// Входящее соединение от устройства: inbound [packet] connection from IP:PORT
+const INBOUND_FROM_RE = /inbound(?:\s+packet)?\s+connection\s+from\s+([\d.]+):\d+/i;
+// Source IP из --> формата: IP:PORT -->
+const SOURCE_ARROW_RE = /\b([\d.]+):\d+\s+-->/;
+// Карта source IP по ID соединения
+const CONN_TTL_MS = 10_000;
+const connSourceMap = new Map();
+setInterval(() => {
+  const now = Date.now();
+  for (const [id, v] of connSourceMap) {
+    if (now - v.at > CONN_TTL_MS) connSourceMap.delete(id);
+  }
+}, 30_000);
 
 // Хранит имя последнего правила из [router] строки (для следующей строки с dest)
 let _pendingRuleName = null;
@@ -117,7 +132,8 @@ let _pendingRuleAt = 0;
 const RULE_CONTEXT_TTL_MS = 500;
 
 function parseTrafficLine(line) {
-  const clean = line.replace(/\x1b\[\d+m/g, "").trim();
+  // Расширенная очистка ANSI (включая многопараметрические: \x1b[38;5;Nm)
+  const clean = line.replace(/\x1b\[[0-9;]*m/g, "").trim();
 
   // Детектируем строку роутера — содержит правило, но не dest
   const routerM = clean.match(ROUTER_MATCH_LINE_RE);
@@ -127,6 +143,17 @@ function parseTrafficLine(line) {
     return null;
   }
 
+  // Извлекаем ID соединения для корреляции
+  const connM = clean.match(CONN_ID_RE);
+  const connId = connM ? connM[1] : null;
+
+  // Строка "inbound connection from IP:PORT" — сохраняем source IP и выходим
+  const inboundFromM = clean.match(INBOUND_FROM_RE);
+  if (inboundFromM) {
+    if (connId) connSourceMap.set(connId, { sourceIp: inboundFromM[1], at: Date.now() });
+    return null;
+  }
+
   // Берём накопленное имя правила, если свежее
   let inheritedRule = null;
   if (_pendingRuleName && Date.now() - _pendingRuleAt < RULE_CONTEXT_TTL_MS) {
@@ -150,19 +177,31 @@ function parseTrafficLine(line) {
     category = "block";
   else category = "vpn";
 
-  // Ищем назначение: --> (основной формат), потом словесный
+  // Ищем назначение: --> (старый формат), потом словесный (inbound/outbound connection to)
   const destM = clean.match(DEST_ARROW_RE) || clean.match(DEST_WORD_RE);
   if (!destM) return null;
 
   const host = destM[1];
   const port = parseInt(destM[2], 10);
 
+  // Source IP: из корреляционной карты (новый формат) или из --> (старый формат)
+  let sourceIp = null;
+  if (connId) {
+    const stored = connSourceMap.get(connId);
+    if (stored && Date.now() - stored.at < CONN_TTL_MS) sourceIp = stored.sourceIp;
+  }
+  if (!sourceIp) {
+    const srcM = clean.match(SOURCE_ARROW_RE);
+    if (srcM) sourceIp = srcM[1];
+  }
+
   return {
     ts: new Date().toISOString(),
     outbound: outboundRaw,
     category,
     host,
     port,
+    sourceIp,
     matchedRule: inheritedRule,
   };
 }

src/web/App.jsx

@@ -397,7 +397,7 @@ function App() {
               onRemoveDevice={removeDevice}
             />
           )}
-          {page === 'logs' && <LogsPage />}
+          {page === 'logs' && <LogsPage deviceRules={deviceRules} />}
           {page === 'settings' && (
             <SettingsPage
               state={state}

src/web/components/LogsPage.jsx

@@ -33,10 +33,22 @@ const CATEGORY_BADGE = {
   other:  { cls: '',        label: 'other' },
 };
 
+function getDeviceName(sourceIp, deviceRules) {
+  if (!sourceIp || !deviceRules?.length) return null;
+  for (const d of deviceRules) {
+    if (d.enabled === false) continue;
+    for (const ip of (d.sourceIps || [])) {
+      const plain = ip.endsWith('/32') ? ip.slice(0, -3) : ip;
+      if (plain === sourceIp) return d.name;
+    }
+  }
+  return null;
+}
+
 function groupTraffic(list, sortBy = 'time') {
   const map = new Map();
   for (const e of list) {
-    const key = `${e.category}|${e.host}|${e.port}|${e.matchedRule || ''}`;
+    const key = `${e.sourceIp || ''}|${e.category}|${e.host}|${e.port}|${e.matchedRule || ''}`;
     const ts = new Date(e.ts).getTime();
     if (map.has(key)) {
       const g = map.get(key);
@@ -52,7 +64,7 @@ function groupTraffic(list, sortBy = 'time') {
   return arr.sort((a, b) => b._lastTs - a._lastTs);
 }
 
-function TrafficTab() {
+function TrafficTab({ deviceRules = [] }) {
   const [traffic, setTraffic] = useState([]);
   const [paused, setPaused] = useState(false);
   const [filter, setFilter] = useState('all'); // all | direct | vpn | block
@@ -90,7 +102,9 @@ function TrafficTab() {
         e.host?.toLowerCase().includes(s) ||
         String(e.port || '').includes(s) ||
         e.outbound?.toLowerCase().includes(s) ||
-        e.matchedRule?.toLowerCase().includes(s),
+        e.matchedRule?.toLowerCase().includes(s) ||
+        e.sourceIp?.toLowerCase().includes(s) ||
+        getDeviceName(e.sourceIp, deviceRules)?.toLowerCase().includes(s),
       );
     }
     return grouped ? groupTraffic(list, sortBy) : list;
@@ -159,6 +173,7 @@ function TrafficTab() {
               <tr>
                 <th style={{ width: 70 }}>Время</th>
                 <th style={{ width: 70 }}>Туннель</th>
+                <th style={{ width: 110 }}>Устройство</th>
                 <th>Хост / IP</th>
                 <th style={{ width: 55 }}>Порт</th>
                 <th>Правило</th>
@@ -168,12 +183,20 @@ function TrafficTab() {
             <tbody>
               {filtered.map((e, i) => {
                 const badge = CATEGORY_BADGE[e.category] || CATEGORY_BADGE.other;
+                const deviceName = getDeviceName(e.sourceIp, deviceRules);
                 return (
                   <tr key={i} style={{ opacity: e.category === 'block' ? 0.6 : 1 }}>
                     <td className="muted text-mono" style={{ whiteSpace: 'nowrap' }}>{formatTime(e.ts)}</td>
                     <td>
                       <span className={`badge ${badge.cls}`} style={{ fontSize: 11 }}>{badge.label}</span>
                     </td>
+                    <td className="text-mono" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 110 }}>
+                      {deviceName
+                        ? <span style={{ fontSize: 11 }}>{deviceName}</span>
+                        : e.sourceIp
+                          ? <span className="muted" style={{ fontSize: 10 }}>{e.sourceIp}</span>
+                          : <span className="muted" style={{ fontSize: 11 }}>—</span>}
+                    </td>
                     <td className="text-mono" style={{ wordBreak: 'break-all' }}>{e.host || '—'}</td>
                     <td className="muted text-mono">{e.port || '—'}</td>
                     <td>
@@ -195,7 +218,7 @@ function TrafficTab() {
   );
 }
 
-export function LogsPage() {
+export function LogsPage({ deviceRules = [] }) {
   const [tab, setTab] = useState('traffic'); // traffic | logs
   const [entries, setEntries] = useState([]);
   const [paused, setPaused] = useState(false);
@@ -253,7 +276,7 @@ export function LogsPage() {
         </div>
       </div>
 
-      {tab === 'traffic' && <TrafficTab />}
+      {tab === 'traffic' && <TrafficTab deviceRules={deviceRules} />}
 
       {tab === 'logs' && (
         <>