From fec7818e7e02e3e6e7fe514cf543b6be719a025b Mon Sep 17 00:00:00 2001
From: kgmyatthu <2962000kaungmyatthu@gmail.com>
Date: Tue, 7 May 2024 13:29:58 +0700
Subject: [PATCH] feat: display queue details

---
 public/large-network.js  | 12 ++++++++++++
 views/large-network.html | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/public/large-network.js b/public/large-network.js
index b2beb27..952b04e 100644
--- a/public/large-network.js
+++ b/public/large-network.js
@@ -40,11 +40,16 @@
                     netLoad: 0,
                     load: 0,
                     maxLoad: 0,
+                    queueLength: 0,
+                    queueTime: 0,
+                    expiredTx: 0,
+
                 },
                 colorMode: 'state',
                 shouldShowMaxTps: false,
                 shouldShowMaxLoad: false,
                 animateTransactions: false,
+                queueDetails: false,
             }
         },
         async mounted() {
@@ -206,6 +211,8 @@
                 let cycleMarkers = []
                 let desired = []
                 let crashedCount = 0
+                let queueLength = []
+                let queueTime = []
 
                 for (let nodeId in report.nodes.active) {
                     const node = report.nodes.active[nodeId]
@@ -213,6 +220,8 @@
                     counters.push(node.cycleCounter)
                     cycleMarkers.push(node.cycleMarker)
                     desired.push(node.desiredNodes)
+                    queueLength.push(node.queueLength)
+                    queueTime.push(node.txTimeInQueue)
                 }
 
                 this.networkStatus.tps = report.avgTps
@@ -232,6 +241,9 @@
                 if (this.networkStatus.load > this.networkStatus.maxLoad) {
                     this.networkStatus.maxLoad = this.networkStatus.load
                 }
+                this.expiredTx = report.totalExpired
+                this.networkStatus.queueLength = this.average(queueLength)
+                this.networkStatus.queueTime = this.average(queueTime)
             },
             deleteCrashedNodes(nodes) {
                 console.log('Running delete crash nodes', nodes)
diff --git a/views/large-network.html b/views/large-network.html
index bb8b075..21ed9b7 100644
--- a/views/large-network.html
+++ b/views/large-network.html
@@ -105,6 +105,21 @@
                     </tr>
                 </table>
             </div>
+
+            <div style="position: absolute; bottom: 20px; left: 20px" v-if="queueDetails">
+                <table class="font-sans text-sm font-light text-center bg-gray-100 shadow">
+                    <tr class="font-medium text-xs text-gray-800 grid grid-cols-4">
+                        <td>Exp.Tx</td>
+                        <td>Q.Time</td>
+                        <td>Q.Length</td>
+                    </tr>
+                    <tr class="grid grid-cols-4">
+                        <td>{{ networkStatus.expiredTx }}</td>
+                        <td>{{ networkStatus.queueTime.toFixed(2) }}</td>
+                        <td>{{ networkStatus.queueLength.toFixed(2) }}</td>
+                    </tr>
+                </table>
+            </div>
             <div id="mynetwork"></div>
             <div id="myarchiver"></div>
             <div style="position: absolute; bottom: 20px; right: 20px">
@@ -158,6 +173,10 @@
                         <input type="checkbox" id="checkbox" v-model="animateTransactions" />
                         <label class="text-sm" for="checkbox">Animate transactions</label>
                     </div>
+                    <div>
+                        <input type="checkbox" id="checkbox" v-model="queueDetails" />
+                        <label class="text-sm" for="checkbox">Show Queue Detail</label>
+                    </div>
                     <a href="/chart" target="_blank" class="text-sm text-blue-400">Charts</a>
                     <a href="/sync" target="_blank" class="text-sm text-blue-400">Sync History</a>
                     <a href="/history" target="_blank" class="text-sm text-blue-400"