From 129c9c50481384c04689108ca2386b97e28afb90 Mon Sep 17 00:00:00 2001
From: Patrick Grimm <patrick@lunatiki.de>
Date: Sun, 25 Aug 2024 16:09:45 +0200
Subject: [PATCH] luci-app-babeld: use an array for routing lists use
 underscore in key name for libubox/jshn.sh compat change format specifiers
 for bool and decimal

Fix: openwrt/luci/issues/6342
Fix: openwrt/routing/issues/966
Depends: faec308d95c99747b1efb09a72e499b4e3647b83

Signed-off-by: Patrick Grimm <patrick@lunatiki.de>
---
 .../htdocs/luci-static/resources/babeld.js    | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js b/applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js
index 6bcbdf0e2983..24df94153518 100644
--- a/applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js
+++ b/applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js
@@ -24,9 +24,9 @@ function renderTableXRoutes(ubus_data, target_div) {
 		for (var prefix in data[protocol]) {
 			var prefixRow = document.createElement('tr');
 			prefixRow.setAttribute('class', 'tr');
-			var prefixContent = '<td class="td" data-title="xroutes_' + '%h'.format(protocol) + '_prefix">' + '%h'.format(prefix) + '</td>\
-                                 <td class="td" data-title="xroutes_' + '%h'.format(protocol) + '_metric">' + '%h'.format(data[protocol][prefix]["metric"]) + '</td>\
-                                 <td class="td" data-title="xroutes_' + '%h'.format(protocol) + '_src-prefix">' + '%h'.format(data[protocol][prefix]["src-prefix"]) + '</td>';
+			var prefixContent = '<td class="td" data-title="xroutes_' + '%h'.format(protocol) + '_prefix">' + '%h'.format(data[protocol][prefix]["address"]) + '</td>\
+                                 <td class="td" data-title="xroutes_' + '%h'.format(protocol) + '_metric">' + '%d'.format(data[protocol][prefix]["metric"]) + '</td>\
+                                 <td class="td" data-title="xroutes_' + '%h'.format(protocol) + '_src_prefix">' + '%h'.format(data[protocol][prefix]["src_prefix"]) + '</td>';
 
 			prefixRow.innerHTML = prefixContent;
 			table.appendChild(prefixRow);
@@ -57,7 +57,6 @@ function renderTableRoutes(ubus_data, target_div) {
                              <th class="th" style="font-weight: 700;">Refmetric</th>\
                              <th class="th" style="font-weight: 700;">ID</th>\
                              <th class="th" style="font-weight: 700;">Seq. No.</th>\
-                             <th class="th" style="font-weight: 700;">Channes</th>\
                              <th class="th" style="font-weight: 700;">Age</th>\
                              <th class="th" style="font-weight: 700;">Via</th>\
                              <th class="th" style="font-weight: 700;">Nexthop</th>\
@@ -70,19 +69,18 @@ function renderTableRoutes(ubus_data, target_div) {
 		for (var prefix in data[protocol]) {
 			var prefixRow = document.createElement('tr');
 			prefixRow.setAttribute('class', 'tr');
-			var prefixContent = '<td class="td" data-title="routes_' + '%h'.format(protocol) + '_prefix">' + '%h'.format(prefix) + '</td>\
-                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_src-prefix">' + '%h'.format(data[protocol][prefix]["src-prefix"]) + '</td>\
-                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_metric">' + '%h'.format(data[protocol][prefix]["route_metric"]) + '</td>\
-                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_rout-smoothed-metric">' + '%h'.format(data[protocol][prefix]["route_smoothed_metric"]) + '</td>\
-                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_refmetric">' + '%h'.format(data[protocol][prefix]["refmetric"]) + '</td>\
+			var prefixContent = '<td class="td" data-title="routes_' + '%h'.format(protocol) + '_prefix">' + '%h'.format(data[protocol][prefix]["address"]) + '</td>\
+                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_src_prefix">' + '%h'.format(data[protocol][prefix]["src_prefix"]) + '</td>\
+                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_metric">' + '%d'.format(data[protocol][prefix]["route_metric"]) + '</td>\
+                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_rout_smoothed_metric">' + '%d'.format(data[protocol][prefix]["route_smoothed_metric"]) + '</td>\
+                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_refmetric">' + '%d'.format(data[protocol][prefix]["refmetric"]) + '</td>\
                                  <td class="td" data-title="routes_' + '%h'.format(protocol) + '_id">' + '%h'.format(data[protocol][prefix]["id"]) + '</td>\
-                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_seqno">' + '%h'.format(data[protocol][prefix]["seqno"]) + '</td>\
-                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_channels">' + '%h'.format(data[protocol][prefix]["channels"]) + '</td>\
-                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_age">' + '%h'.format(data[protocol][prefix]["age"]) + '</td>\
+                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_seqno">' + '%d'.format(data[protocol][prefix]["seqno"]) + '</td>\
+                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_age">' + '%d'.format(data[protocol][prefix]["age"]) + '</td>\
                                  <td class="td" data-title="routes_' + '%h'.format(protocol) + '_via">' + '%h'.format(data[protocol][prefix]["via"]) + '</td>\
                                  <td class="td" data-title="routes_' + '%h'.format(protocol) + '_nexthop">' + '%h'.format(data[protocol][prefix]["nexthop"]) + '</td>\
-                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_installed">' + '%h'.format(data[protocol][prefix]["installed"]) + '</td>\
-                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_feasible">' + '%h'.format(data[protocol][prefix]["feasible"]) + '</td>';
+                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_installed">' + '%b'.format(data[protocol][prefix]["installed"]) + '</td>\
+                                 <td class="td" data-title="routes_' + '%h'.format(protocol) + '_feasible">' + '%b'.format(data[protocol][prefix]["feasible"]) + '</td>';
 
 			prefixRow.innerHTML = prefixContent;
 			table.appendChild(prefixRow);
@@ -108,11 +106,11 @@ function renderTableNeighbours(ubus_data, target_div) {
 		headerRow.setAttribute('class', 'tr table-titles');
 		var headerContent = '<th class="th" style="font-weight: 700;">' + '%h'.format(protocol) + ' Neighbour</th>\
                              <th class="th" style="font-weight: 700;">Device</th>\
-                             <th class="th" style="font-weight: 700;">Hello-Reach</th>\
+                             <th class="th" style="font-weight: 700;">Multicast Hellos</th>\
+                             <th class="th" style="font-weight: 700;">Unicast Hellos</th>\
                              <th class="th" style="font-weight: 700;">RX cost</th>\
                              <th class="th" style="font-weight: 700;">TX cost</th>\
                              <th class="th" style="font-weight: 700;">RTT</th>\
-                             <th class="th" style="font-weight: 700;">Channel</th>\
                              <th class="th" style="font-weight: 700;">Interface up</th>';
 
 		headerRow.innerHTML = headerContent;
@@ -121,14 +119,14 @@ function renderTableNeighbours(ubus_data, target_div) {
 		for (var neighbour in data[protocol]) {
 			var neighbourRow = document.createElement('tr');
 			neighbourRow.setAttribute('class', 'tr');
-			var neighbourContent = '<td class="td" data-title="' + '%h'.format(protocol) + '_neighbour">' + '%h'.format(neighbour) + '</td>\
+			var neighbourContent = '<td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_neighbour">' + '%h'.format(data[protocol][neighbour]["address"]) + '</td>\
                                     <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_dev">' + '%h'.format(data[protocol][neighbour]["dev"]) + '</td>\
-                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_hello-reach">' + '%h'.format(data[protocol][neighbour]["hello-reach"]) + '</td>\
-                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_rxcost">' + '%h'.format(data[protocol][neighbour]["rxcost"]) + '</td>\
-                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_txcost">' + '%h'.format(data[protocol][neighbour]["txcost"]) + '</td>\
-                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_rtt">' + '%h'.format(data[protocol][neighbour]["rtt"]) + '</td>\
-                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_channel">' + '%h'.format(data[protocol][neighbour]["channel"]) + '</td>\
-                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_if_up">' + '%h'.format(data[protocol][neighbour]["if_up"]) + '</td>';
+                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_hello_reach">' + '%d'.format(data[protocol][neighbour]["hello_reach"]) + '</td>\
+                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_uhello_reach">' + '%d'.format(data[protocol][neighbour]["uhello_reach"]) + '</td>\
+                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_rxcost">' + '%d'.format(data[protocol][neighbour]["rxcost"]) + '</td>\
+                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_txcost">' + '%d'.format(data[protocol][neighbour]["txcost"]) + '</td>\
+                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_rtt">' + '%d'.format(data[protocol][neighbour]["rtt"]) + '</td>\
+                                    <td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_if_up">' + '%b'.format(data[protocol][neighbour]["if_up"]) + '</td>';
 
 			neighbourRow.innerHTML = neighbourContent;
 			table.appendChild(neighbourRow);
@@ -161,9 +159,9 @@ function renderTableInfo(ubus_data, target_div) {
 
 	var neighbourRow = document.createElement('tr');
 	neighbourRow.setAttribute('class', 'tr');
-	var neighbourContent = '<td class="td" data-title="info_babeld-version">' + '%h'.format(data["babeld-version"]) + '</td>\
-                            <td class="td" data-title="info_dev">' + '%h'.format(data["my-id"]) + '</td>\
-                            <td class="td" data-title="info_hello-reach">' + '%h'.format(data["host"]) + '</td>';
+	var neighbourContent = '<td class="td" data-title="info_babeld_version">' + '%h'.format(data["babeld_version"]) + '</td>\
+                            <td class="td" data-title="info_dev">' + '%h'.format(data["my_id"]) + '</td>\
+                            <td class="td" data-title="info_host">' + '%h'.format(data["host"]) + '</td>';
 
 	neighbourRow.innerHTML = neighbourContent;
 	table.appendChild(neighbourRow);