Add TIER1 network debug page (#8181)

Adds a separate page `/debug/pages/tier1_network_info` displaying information about TIER1 connections. For TIER1 connections we mostly display the same information as TIER2 connections, except that: - TIER1 messages don't include height, last block hash, or nonce info, so these columns are omitted - TIER1 nodes have configured public proxies; a column is added to display their addresses Includes a couple of minor tweaks to the TIER2 `network_info` page (show PeerId of the current node at the top of the page, rename the connection table's `AccountId` column to `PeerId`).
near · Dec 9, 2022 · 63d77d4 · 63d77d4
1 parent 0294733
commit 63d77d4
Show file tree

Hide file tree

Showing 16 changed files with 377 additions and 165 deletions.
diff --git a/chain/client/src/client_actor.rs b/chain/client/src/client_actor.rs
@@ -199,6 +199,7 @@ impl ClientActor {
                 received_bytes_per_sec: 0,
                 sent_bytes_per_sec: 0,
                 known_producers: vec![],
+                tier1_accounts_keys: vec![],
                 tier1_accounts_data: vec![],
             },
             last_validator_announce_time: None,

diff --git a/chain/client/src/debug.rs b/chain/client/src/debug.rs
@@ -689,6 +689,7 @@ pub(crate) fn new_network_info_view(chain: &Chain, network_info: &NetworkInfo) -
                     .map(|it| it.iter().map(|peer_id| peer_id.public_key().clone()).collect()),
             })
             .collect(),
+        tier1_accounts_keys: network_info.tier1_accounts_keys.clone(),
         tier1_accounts_data: network_info
             .tier1_accounts_data
             .iter()

diff --git a/chain/client/src/info.rs b/chain/client/src/info.rs
@@ -561,6 +561,7 @@ mod tests {
                 received_bytes_per_sec: 0,
                 known_producers: vec![],
                 tier1_connections: vec![],
+                tier1_accounts_keys: vec![],
                 tier1_accounts_data: vec![],
             },
             &config,

diff --git a/chain/client/src/test_utils.rs b/chain/client/src/test_utils.rs
@@ -690,6 +690,7 @@ pub fn setup_mock_all_validators(
                             sent_bytes_per_sec: 0,
                             received_bytes_per_sec: 0,
                             known_producers: vec![],
+                            tier1_accounts_keys: vec![],
                             tier1_accounts_data: vec![],
                         };
                         client_addr.do_send(SetNetworkInfo(info).with_span_context());

diff --git a/chain/jsonrpc/res/debug.html b/chain/jsonrpc/res/debug.html
@@ -61,6 +61,7 @@ <h3>
 
     <h1><a href="debug/pages/last_blocks">Last blocks</a></h1>
     <h1><a href="debug/pages/network_info">Network info</a></h1>
+    <h1><a href="debug/pages/tier1_network_info">TIER1 Network info</a></h1>
     <h1><a href="debug/pages/epoch_info">Epoch info</a></h1>
     <h1><a href="debug/pages/chain_n_chunk_info">Chain & Chunk info</a></h1>
     <h1><a href="debug/pages/sync">Sync info</a></h1>

diff --git a/chain/jsonrpc/res/network_info.css b/chain/jsonrpc/res/network_info.css
@@ -0,0 +1,51 @@
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+table,
+th,
+td {
+    border: 1px solid black;
+}
+
+td {
+    text-align: left;
+    vertical-align: top;
+    padding: 8px;
+}
+
+th {
+    text-align: center;
+    vertical-align: center;
+    padding: 8px;
+    background-color: lightgrey;
+}
+
+tr.active {
+    background-color: #eff8bf;
+}
+
+.peer_in_sync {
+    background-color: green;
+}
+
+.peer_ahead {
+    background-color: lightblue;
+}
+
+.peer_ahead_alot {
+    background-color: blueviolet;
+}
+
+.peer_behind_a_little {
+    background-color: yellowgreen;
+}
+
+.peer_behind {
+    background-color: yellow;
+}
+
+.peer_far_behind {
+    background-color: red;
+}
diff --git a/chain/jsonrpc/res/network_info.html b/chain/jsonrpc/res/network_info.html
@@ -1,136 +1,10 @@
 <html>
 
 <head>
-    <style>
-        table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-
-        table,
-        th,
-        td {
-            border: 1px solid black;
-        }
-
-        td {
-            text-align: left;
-            vertical-align: top;
-            padding: 8px;
-        }
-
-        th {
-            text-align: center;
-            vertical-align: center;
-            padding: 8px;
-            background-color: lightgrey;
-        }
-
-        tr.active {
-            background-color: #eff8bf;
-        }
-
-        .peer_in_sync {
-            background-color: green;
-        }
-
-        .peer_ahead {
-            background-color: lightblue;
-        }
-
-        .peer_ahead_alot {
-            background-color: blueviolet;
-        }
-
-        .peer_behind_a_little {
-            background-color: yellowgreen;
-        }
-
-        .peer_behind {
-            background-color: yellow;
-        }
-
-        .peer_far_behind {
-            background-color: red;
-        }
-    </style>
+    <link rel="stylesheet" href="network_info.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="network_info.js"></script>
     <script>
-        function convertTime(millis) {
-            if (millis == null) {
-                return '(null)';
-            }
-            let total_seconds = Math.floor(millis / 1000);
-            let hours = Math.floor(total_seconds / 3600)
-            let minutes = Math.floor((total_seconds - (hours * 3600)) / 60)
-            let seconds = total_seconds - (hours * 3600) - (minutes * 60)
-            if (hours > 0) {
-                if (minutes > 0) {
-                    return `${hours}h ${minutes}m ${seconds}s`
-                } else {
-                    return `${hours}h ${seconds}s`
-                }
-            }
-            if (minutes > 0) {
-                return `${minutes}m ${seconds}s`
-            }
-            return `${seconds}s`
-        }
-
-        function convertBps(bytes_per_second) {
-            if (bytes_per_second == null) {
-                return '-'
-            }
-            if (bytes_per_second < 3000) {
-                return `${bytes_per_second} bps`
-            } []
-            let kilobytes_per_second = bytes_per_second / 1024;
-            if (kilobytes_per_second < 3000) {
-                return `${kilobytes_per_second.toFixed(1)} Kbps`
-            }
-            let megabytes_per_second = kilobytes_per_second / 1024;
-            return `${megabytes_per_second.toFixed(1)} Mbps`
-        }
-
-        function computeTraffic(bytes_received, bytes_sent) {
-            return "⬇ " + convertBps(bytes_received) + "<br>⬆ " + convertBps(bytes_sent);
-        }
-
-        function add_debug_port_link(peer_addr) {
-            return $('<a>', {
-                href: "http://" + peer_addr.replace(/:.*/, ":3030/debug"),
-                text: peer_addr
-            });
-        }
-
-        function displayHash(peer) {
-            if (peer.is_highest_block_invalid) {
-                return peer.block_hash + " (INVALID)"
-            } else {
-                return peer.block_hash + " (Valid)"
-            }
-        }
-
-        function peerClass(current_height, peer_height) {
-            if (peer_height > current_height + 5) {
-                return 'peer_ahead_alot';
-            }
-            if (peer_height > current_height + 2) {
-                return 'peer_ahead';
-            }
-
-            if (peer_height < current_height - 100) {
-                return 'peer_far_behind';
-            }
-            if (peer_height < current_height - 10) {
-                return 'peer_behind';
-            }
-            if (peer_height < current_height - 3) {
-                return 'peer_behind_a_little';
-            }
-            return 'peer_in_sync';
-        }
-
         function fetchProducers(epoch_id, producers_callback) {
             $.ajax({
                 type: "GET",
@@ -156,18 +30,6 @@
                 contentType: "application/json; charset=utf-8",
             })
         }
-        function getIntersection(setA, setB) {
-            const intersection = new Set(
-                [...setA].filter(element => setB.has(element))
-            );
-
-            return intersection;
-        }
-        function getDifference(setA, setB) {
-            return new Set(
-                [...setA].filter(element => !setB.has(element))
-            );
-        }
 
         $(document).ready(() => {
             $('.detailed-peer-storage-div').hide();
@@ -217,8 +79,10 @@
                         $('.js-unknown-chunk-producers').text(Array.from(chunk_uknown_set).join(","));
                         $('.js-unreachable-chunk-producers').text(Array.from(chunk_known_but_unreachable).join(","));
 
+                        let node_public_key = data.node_public_key;
                         let sync_status = data.detailed_debug_status.sync_status;
                         let network_info = data.detailed_debug_status.network_info;
+                        $('.js-node-public-key').text(node_public_key);
                         $('.js-sync-status').text(sync_status);
                         $('.js-max-peers').text(network_info.peer_max_count);
                         $('.js-num-peers').text(network_info.num_connected_peers);
@@ -294,27 +158,6 @@
 
         });
 
-        function to_human_time(seconds) {
-            let result = "";
-            if (seconds >= 60) {
-                let minutes = Math.floor(seconds / 60);
-                seconds = seconds % 60;
-                if (minutes > 60) {
-                    let hours = Math.floor(minutes / 60);
-                    minutes = minutes % 60;
-                    if (hours > 24) {
-                        let days = Math.floor(hours / 24);
-                        hours = hours % 24;
-                        result += days + " days ";
-                    }
-                    result += hours + " h ";
-                }
-                result += minutes + " m ";
-            }
-            result += seconds + " s"
-            return result;
-        }
-
         function show_peer_storage() {
             $(".detailed-peer-storage-button").text("Loading...");
             $(".tbody-detailed-peer-storage").html("");
@@ -354,6 +197,10 @@ <h1>
         Welcome to the Network Info page!
     </h1>
     <h2>
+        <p>
+            PeerId:
+            <span class="js-node-public-key"></span>
+        </p>
         <p>
             Current Sync Status:
             <span class="js-sync-status"></span>
@@ -370,7 +217,7 @@ <h2>
     </h2>
 
     <pre>
-Uknown: <span class="js-unknown-block-producers"></span>
+Unknown: <span class="js-unknown-block-producers"></span>
 Unreachable: <span class="js-unreachable-block-producers"></span>
     </pre>
     <h2>
@@ -381,7 +228,7 @@ <h2>
         </p>
     </h2>
     <pre>
-Uknown: <span class="js-unknown-chunk-producers"></span>
+Unknown: <span class="js-unknown-chunk-producers"></span>
 Unreachable: <span class="js-unreachable-chunk-producers"></span>
     </pre>
 
@@ -407,7 +254,7 @@ <h2>
             <tr>
                 <th>Address</th>
                 <th>Validator?</th>
-                <th>Account ID</th>
+                <th>PeerId</th>
                 <th>Last ping</th>
                 <th>Height</th>
                 <th>Last Block Hash</th>