RED-150: Add table to view load on individual nodes on large-networks…

… page (#4)
shardeum · Jun 27, 2024 · 92d9f37 · 92d9f37
1 parent fed87e8
commit 92d9f37
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 10 deletions.
diff --git a/public/large-network.js b/public/large-network.js
@@ -46,17 +46,29 @@
                     queueTime: 0,
                     totalQueueTime: 0,
                     expiredTx: 0,
-
                 },
                 colorMode: 'state',
                 animateTransactions: false,
                 queueDetails: false,
+                nodeLoads: [],
+                sortKey: 'ip',
+                sortAsc: true,
             }
         },
         async mounted() {
             console.log('Mounted')
             this.start()
         },
+        computed: {
+            sortedNodes() {
+                return this.nodeLoads.sort((a, b) => {
+                    let modifier = this.sortAsc ? 1 : -1
+                    if (a[this.sortKey] < b[this.sortKey]) return -1 * modifier
+                    if (a[this.sortKey] > b[this.sortKey]) return 1 * modifier
+                    return 0
+                })
+            },
+        },
         methods: {
             calculateNetworkPosition(nodeId) {
                 let spread = 4
@@ -218,6 +230,7 @@
                 let totalLoad = 0
                 let totalQueueLength = 0
                 let totalQueueTime = 0.0
+                this.nodeLoads = []
 
                 for (let nodeId in report.nodes.active) {
                     const node = report.nodes.active[nodeId]
@@ -230,6 +243,16 @@
                     queueLength.push(node.queueLength)
                     totalQueueTime += node.txTimeInQueue
                     queueTime.push(node.txTimeInQueue)
+
+                    this.nodeLoads.push({
+                        id: nodeId,
+                        ip: node.nodeIpInfo.externalIp,
+                        port: node.nodeIpInfo.externalPort,
+                        loadInternal: node.currentLoad.nodeLoad.internal,
+                        loadExternal: node.currentLoad.nodeLoad.external,
+                        queueLength: node.queueLength,
+                        queueTime: node.txTimeInQueue,
+                    })
                 }
 
                 this.networkStatus.tps = report.avgTps
@@ -256,6 +279,14 @@
                 this.networkStatus.queueTime = this.average(queueTime)
                 this.networkStatus.totalQueueTime = totalQueueTime
             },
+            sortTable(key) {
+                if (this.sortKey === key) {
+                    this.sortAsc = !this.sortAsc
+                } else {
+                    this.sortKey = key
+                    this.sortAsc = true
+                }
+            },
             deleteCrashedNodes(nodes) {
                 console.log('Running delete crash nodes', nodes)
                 try {
@@ -336,7 +367,8 @@
                 try {
                     let changes = await this.fetchChanges()
                     console.log(
-                        `Total of ${Object.keys(changes.nodes.active).length}/${Object.keys(G.nodes.active).length
+                        `Total of ${Object.keys(changes.nodes.active).length}/${
+                            Object.keys(G.nodes.active).length
                         } nodes updated.`
                     )
                     this.filterOutCrashedNodes(changes)

diff --git a/views/large-network.html b/views/large-network.html
@@ -1,23 +1,21 @@
+<!DOCTYPE html>
 <html>
 
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="axios.min.js"></script>
-    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js" type="text/javascript"></script>
     <script src="vis-network-animated.js" type="text/javascript"></script>
+    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js" type="text/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
     <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
 
     <style>
         body {
             margin: 0;
-            background: rgb(243 243 243);
             background: #e0eafc;
-            /* fallback for old browsers */
             background: -webkit-linear-gradient(to right, #cfdef3, #e0eafc);
-            /* Chrome 10-25, Safari 5.1-6 */
             background: linear-gradient(to right, #cfdef3, #e0eafc);
-            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
         }
 
         #mynetwork {
@@ -71,6 +69,27 @@
         tr>td {
             padding: 5px;
         }
+
+        .content {
+            padding: 0 18px;
+            overflow: hidden;
+            background-color: #f1f1f1;
+        }
+
+        .table-container {
+            height: 30vh;
+            width: -webkit-fill-available;
+            font-size: 0.8rem;
+             overflow-y: auto;
+        }
+
+        th {
+            cursor: pointer;
+        }
+
+        th:hover {
+            background-color: #f1f1f1;
+        }
     </style>
 </head>
 
@@ -228,16 +247,40 @@
                     <td><a href="/app-versions" target="_blank" class="text-sm text-blue-400">App Versions</a></td>
                 </tr>
             </table>
+
+            <div class="content table-container">
+                    <div id="monheader">NODE LOADS</div>
+                <table class="table-auto w-full">
+                    <thead>
+                        <tr>
+                            <th @click="sortTable('ip')">IP</th>
+                            <th @click="sortTable('port')">Port</th>
+                            <th @click="sortTable('loadInternal')">Load Internal</th>
+                            <th @click="sortTable('loadExternal')">Load External</th>
+                            <th @click="sortTable('queueLength')">Q Length</th>
+                            <th @click="sortTable('queueTime')">Q Time</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="node in sortedNodes" :key="node.id">
+                            <td>{{ node.ip }}</td>
+                            <td>{{ node.port }}</td>
+                            <td>{{ node.loadInternal }}</td>
+                            <td>{{ node.loadExternal }}</td>
+                            <td>{{ node.queueLength }}</td>
+                            <td>{{ node.queueTime }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 
     <div id="mynetwork"></div>
     <div id="myarchiver"></div>
 
-
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
     <script src="auth.js" type="text/javascript"></script>
-    <script src="large-network.js" type="text/javascript"></script>
+    <script src="large-network.js"></script>
     <script src="version.js"></script>
 </body>