From 62cb050a379c622fb0d9555cbf16b65a2b6eac4c Mon Sep 17 00:00:00 2001
From: Marc Hanson <3117293+mhanson-github@users.noreply.github.com>
Date: Sun, 2 Jun 2024 14:42:20 -0400
Subject: [PATCH 1/5] Clean up large-network view
Add categories for various output in nice tables.
Add some missing values.
Move all info to tables at top of screen instead of being placed all over in random locations.
---
public/large-network.js | 20 +-
views/large-network.html | 425 +++++++++++++++++++++------------------
2 files changed, 248 insertions(+), 197 deletions(-)
diff --git a/public/large-network.js b/public/large-network.js
index 952b04e..fc456cf 100644
--- a/public/large-network.js
+++ b/public/large-network.js
@@ -1,4 +1,4 @@
-;(function main() {
+; (function main() {
const G = {}
loadToken(G)
G.VW = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
@@ -39,15 +39,16 @@
rejectedTps: 0,
netLoad: 0,
load: 0,
+ totalLoad: 0,
maxLoad: 0,
queueLength: 0,
+ totalQueueLength: 0,
queueTime: 0,
+ totalQueueTime: 0,
expiredTx: 0,
},
colorMode: 'state',
- shouldShowMaxTps: false,
- shouldShowMaxLoad: false,
animateTransactions: false,
queueDetails: false,
}
@@ -214,13 +215,20 @@
let queueLength = []
let queueTime = []
+ let totalLoad = 0
+ let totalQueueLength = 0
+ let totalQueueTime = 0.0
+
for (let nodeId in report.nodes.active) {
const node = report.nodes.active[nodeId]
+ totalLoad += node.currentLoad.networkLoad
loads.push(node.currentLoad.networkLoad)
counters.push(node.cycleCounter)
cycleMarkers.push(node.cycleMarker)
desired.push(node.desiredNodes)
+ totalQueueLength += node.queueLength
queueLength.push(node.queueLength)
+ totalQueueTime += node.txTimeInQueue
queueTime.push(node.txTimeInQueue)
}
@@ -235,6 +243,7 @@
this.networkStatus.standby = Object.keys(report.nodes.standby).length
this.networkStatus.load = this.average(loads)
+ this.networkStatus.totalLoad = totalLoad
this.networkStatus.counter = this.mode(counters)
this.networkStatus.cycleMarker = this.mode(cycleMarkers)
this.networkStatus.desired = this.mode(desired)
@@ -243,7 +252,9 @@
}
this.expiredTx = report.totalExpired
this.networkStatus.queueLength = this.average(queueLength)
+ this.networkStatus.totalQueueLength = totalQueueLength
this.networkStatus.queueTime = this.average(queueTime)
+ this.networkStatus.totalQueueTime = totalQueueTime
},
deleteCrashedNodes(nodes) {
console.log('Running delete crash nodes', nodes)
@@ -325,8 +336,7 @@
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
index 21ed9b7..9f20d6b 100644
--- a/views/large-network.html
+++ b/views/large-network.html
@@ -1,203 +1,244 @@
-
-
-
-
-
-
-
-
-
+ #montable {
+ font-family: sans-serif;
+ font-size: small;
+ font-weight: 300;
+ text-align: left;
+ background-color: #f3f4f6;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ border-collapse: collapse;
+ flex-shrink: 0;
+ }
-
-
-
-
-
- Counter |
- Joining |
- Standby |
- Syncing |
- Active |
- Desired |
-
- Max Tps
- Avg Tps
- |
- Processed |
- Rejected |
- Rejected TPS |
-
- Max Load
- Load
- |
-
-
- {{ networkStatus.counter }} |
- {{ networkStatus.joining - networkStatus.standby }} |
- {{ networkStatus.standby }} |
- {{ networkStatus.syncing }} |
- {{ networkStatus.active }} |
- {{ networkStatus.desired }} |
-
- {{ networkStatus.maxTps }}
- {{ networkStatus.tps }}
- |
- {{ networkStatus.processed }} |
- {{ networkStatus.rejected }} |
- {{ networkStatus.rejectedTps }} |
-
- {{ networkStatus.maxLoad ? networkStatus.maxLoad.toFixed(2) : 0.0
- }}
- {{ networkStatus.load ? networkStatus.load.toFixed(2) : 0.0
- }}
- |
-
-
-
+ #monheader {
+ text-align: left;
+ font-weight: bold;
+ vertical-align: middle;
+ }
-
-
-
- Exp.Tx |
- Q.Time |
- Q.Length |
-
-
- {{ networkStatus.expiredTx }} |
- {{ networkStatus.queueTime.toFixed(2) }} |
- {{ networkStatus.queueLength.toFixed(2) }} |
-
-
-
-
-
-
- Monitor-server version: x.x.x
-
- Monitor-client version: x.x.x
-
-
-
-
-
-
-
-
-
+ #monlabel {
+ vertical-align: middle;
+ text-align: left;
+ }
+
+ #monval {
+ vertical-align: top;
+ text-align: right;
+ }
+
+ #itemrow {
+ vertical-align: top;
+ border: 0px solid #000000;
+ }
+
+ tr>td {
+ padding: 5px;
+ }
+
+
-
-
+
+
+
+
+
+
+
+
+
+ Counter: |
+ {{networkStatus.counter}} |
+
+
+ Joining: |
+ {{networkStatus.joining - networkStatus.standby}} |
+
+
+ Standby: |
+ {{networkStatus.standby}} |
+
+
+ Syncing: |
+ {{networkStatus.syncing}} |
+
+
+ Active: |
+ {{networkStatus.active}} |
+
+
+ Desired: |
+ {{networkStatus.desired}} |
+
+
+
+
+
+
+
+ Proc: |
+ {{ networkStatus.processed }} |
+
+
+ Rej: |
+ {{ networkStatus.rejected }} |
+
+
+ Exp: |
+ {{ networkStatus.expiredTx }} |
+
+
+
+
+
+
+
+ Cur: |
+ {{networkStatus.tps}} |
+
+
+ Max: |
+ {{networkStatus.maxTps}} |
+
+
+ Rej: |
+ {{networkStatus.rejectedTps}} |
+
+
+
+
+
+
+
+ Total: |
+ {{ networkStatus.totalLoad ? networkStatus.totalLoad.toFixed(2) : 0}} |
+
+
+ Curr: |
+ {{ networkStatus.load ? networkStatus.load.toFixed(2) : 0}} |
+
+
+ Max: |
+ {{ networkStatus.maxLoad ? networkStatus.maxLoad.toFixed(2) : 0}} |
+
+
+
+
+
+
+
+ QLen: |
+ {{ networkStatus.queueLength.toFixed(2) }} |
+
+
+ QLen.Tot: |
+ {{ networkStatus.totalQueueLength.toFixed(2) }} |
+
+
+ Q-Time: |
+ {{ networkStatus.queueTime.toFixed(2) }} |
+
+
+ Q-Time.Tot: |
+ {{ networkStatus.totalQueueTime.toFixed(2) }} |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-