Refine routing defaults for global and device fallbacks

src/web/components/LogsPage.jsx

@@ -33,14 +33,13 @@ const CATEGORY_BADGE = {
   other:  { cls: '',        label: 'other' },
 };
 
-function getDeviceName(sourceIp, deviceRules) {
-  if (!sourceIp || !deviceRules?.length) return null;
-  for (const d of deviceRules) {
+function getDeviceName(sourceIp, devices) {
+  if (!sourceIp || !devices?.length) return null;
+  for (const d of devices) {
     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;
-    }
+    const ip = d.ip || d.sourceIp || (d.sourceIps || [])[0];
+    const plain = ip?.endsWith('/32') ? ip.slice(0, -3) : ip;
+    if (plain === sourceIp) return d.name;
   }
   return null;
 }
@@ -64,7 +63,7 @@ function groupTraffic(list, sortBy = 'time') {
   return arr.sort((a, b) => b._lastTs - a._lastTs);
 }
 
-function TrafficTab({ deviceRules = [] }) {
+function TrafficTab({ devices = [] }) {
   const [traffic, setTraffic] = useState([]);
   const [paused, setPaused] = useState(false);
   const [filter, setFilter] = useState('all'); // all | direct | vpn | block
@@ -104,11 +103,11 @@ function TrafficTab({ deviceRules = [] }) {
         e.outbound?.toLowerCase().includes(s) ||
         e.matchedRule?.toLowerCase().includes(s) ||
         e.sourceIp?.toLowerCase().includes(s) ||
-        getDeviceName(e.sourceIp, deviceRules)?.toLowerCase().includes(s),
+        getDeviceName(e.sourceIp, devices)?.toLowerCase().includes(s),
       );
     }
     return grouped ? groupTraffic(list, sortBy) : list;
-  }, [traffic, filter, search, grouped, sortBy]);
+  }, [traffic, filter, search, grouped, sortBy, devices]);
 
   useEffect(() => {
     if (!autoscroll || !containerRef.current) return;
@@ -183,7 +182,7 @@ function TrafficTab({ deviceRules = [] }) {
             <tbody>
               {filtered.map((e, i) => {
                 const badge = CATEGORY_BADGE[e.category] || CATEGORY_BADGE.other;
-                const deviceName = getDeviceName(e.sourceIp, deviceRules);
+                const deviceName = getDeviceName(e.sourceIp, devices);
                 return (
                   <tr key={i} style={{ opacity: e.category === 'block' ? 0.6 : 1 }}>
                     <td className="muted text-mono" style={{ whiteSpace: 'nowrap' }}>{formatTime(e.ts)}</td>
@@ -218,7 +217,7 @@ function TrafficTab({ deviceRules = [] }) {
   );
 }
 
-export function LogsPage({ deviceRules = [] }) {
+export function LogsPage({ devices = [] }) {
   const [tab, setTab] = useState('traffic'); // traffic | logs
   const [entries, setEntries] = useState([]);
   const [paused, setPaused] = useState(false);
@@ -276,7 +275,7 @@ export function LogsPage({ deviceRules = [] }) {
         </div>
       </div>
 
-      {tab === 'traffic' && <TrafficTab deviceRules={deviceRules} />}
+      {tab === 'traffic' && <TrafficTab devices={devices} />}
 
       {tab === 'logs' && (
         <>