tools: localhost: filter based on network IDs

Add a filter for displayed devices based on the network ID the device is
using.

Signed-off-by: Jordan Yates <jordan@embeint.com>

Author: JordanYates

src/infuse_iot/tools/localhost.py

@@ -46,6 +46,7 @@ def __init__(self, args):
         self._data_lock = threading.Lock()
         self._columns: dict[str, dict] = {}
         self._apps: set[str] = set()
+        self._networks: set[str] = set()
         self._data: dict[int, dict] = {}
         self._port: int = args.port
 
@@ -133,6 +134,7 @@ async def websocket_handler(self, request: BaseRequest):
                     "rows": [self._data[d] for d in devices],
                     "tdfs": sorted(list(self._columns.keys())),
                     "apps": sorted(list(self._apps)),
+                    "networks": sorted(list(self._networks)),
                 }
                 self._data_lock.release()
 
@@ -213,7 +215,9 @@ def recv_thread(self) -> None:
             self._data[source.infuse_id]["bt_rssi"] = source.rssi
 
         if source.auth == packet.Auth.NETWORK:
-            self._data[source.infuse_id]["network_id"] = f"0x{source.key_identifier:06x}"
+            key_id_str = f"0x{source.key_identifier:06x}"
+            self._data[source.infuse_id]["network_id"] = key_id_str
+            self._networks.add(key_id_str)
 
         for tdf in self._decoder.decode(msg.epacket.payload):
             t = tdf.data[-1]

src/infuse_iot/tools/localhost/index.html

@@ -34,6 +34,10 @@
         vertical-align: top;
     }
 
+    #network-show {
+        vertical-align: top;
+    }
+
     #data-table {
         width: 100%;
     };
@@ -45,6 +49,7 @@ <h1>Infuse-IoT TDF Viewer</h1>
     <div id="filteringSidebar" class="sidebar">
         <span id="tdf-show"></span>
         <span id="app-show"></span>
+        <span id="network-show"></span>
     </div>
     <div>
         <b>
@@ -114,20 +119,39 @@ <h1>Infuse-IoT TDF Viewer</h1>
                 },
             ]
         });
+        const shownNetworkTable = new Tabulator("#network-show", {
+            layout: "fitDataTable",
+            columns: [
+                { title: "Network ID", field: "name", width: 200 },
+                {
+                    title: "Show",
+                    field: "checked",
+                    hozAlign: "center",
+                    formatter: "tickCross",
+                    cellClick: function (ev, cell) {
+                        filtering_update = true;
+                        cell.setValue(!cell.getValue());
+                    },
+                },
+            ]
+        });
 
         // Connect to the WebSocket server
         const ws = new WebSocket("ws://localhost:" + location.port + "/ws");
         let shownTDFs = {};
         let currentTDFs = [];
         let current_num_columns = 0;
         let currentApps = [];
+        let currentNetworks = []
 
         const arraysEqual = (a, b) =>
             a.length === b.length &&
             a.every((element, index) => element === b[index]);
 
         ws.onmessage = function (event) {
-            const { columns, rows, tdfs, apps } = JSON.parse(event.data);
+            const { columns, rows, tdfs, apps, networks } = JSON.parse(event.data);
+
+            console.log(networks);
 
             if (!arraysEqual(currentTDFs, tdfs)) {
                 // Merge new data with the existing table data
@@ -164,6 +188,20 @@ <h1>Infuse-IoT TDF Viewer</h1>
                 filtering_update = true;
             }
 
+            if (!arraysEqual(currentNetworks, networks)) {
+                // Merge new data with the existing table data
+                const currentRows = shownAppTable.getData();
+                const updatedData = networks.map((str, index) => {
+                    const existingRow = currentRows.find(row => row.name === str);
+                    return existingRow
+                        ? existingRow // Preserve the existing row if found
+                        : { id: `row-${index}`, name: str, checked: true };
+                });
+                shownNetworkTable.replaceData(updatedData);
+                currentNetworks = networks
+                filtering_update = true;
+            }
+
             // Update column definitions if new TDFs have appeared
             if (columns.length != current_num_columns) {
                 dataTable.setColumns(columns);
@@ -190,14 +228,21 @@ <h1>Infuse-IoT TDF Viewer</h1>
                     }
                 });
 
-                // Filter applications as requested
+                // Filter applications and networks as requested
                 appShow = Object.fromEntries(
                     shownAppTable.getData().map(row => [row.name, row.checked])
                 );
+                networkShow = Object.fromEntries(
+                    shownNetworkTable.getData().map(row => [row.name, row.checked])
+                );
                 enabledApps = currentApps.filter(a => appShow[a]);
+                enabledNetworks = currentNetworks.filter(a => networkShow[a]);
+
+                console.log(enabledApps, enabledNetworks);
 
                 dataTable.clearFilter();
                 dataTable.setFilter("application", "in", enabledApps);
+                dataTable.setFilter("network_id", "in", enabledNetworks);
 
                 filtering_update = false;
             }