From c402f49cbbcc428b3b325c9de473d666fe6b518c Mon Sep 17 00:00:00 2001 From: magonjr Date: Wed, 3 Jul 2024 22:17:21 -0300 Subject: [PATCH 01/33] sync details page --- public/sync-detail.js | 158 ++++++++++++++++++++++++++++++++++++++++ views/sync-details.html | 125 +++++++++++++++++++++++++++++++ 2 files changed, 283 insertions(+) create mode 100644 public/sync-detail.js create mode 100644 views/sync-details.html diff --git a/public/sync-detail.js b/public/sync-detail.js new file mode 100644 index 0000000..6cb1440 --- /dev/null +++ b/public/sync-detail.js @@ -0,0 +1,158 @@ +;(function main() { + const G = {} + loadToken(G) + G.VW = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) + G.VH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) + G.R = 100 + G.X = 0 + G.Y = 0 + G.MAX_EDGES_FOR_NODE = 1 + G.REFRESH_TIME = 10000 + G.maxId = parseInt('ffff', 16) + G.lastUpdatedTimestamp = 0 + G.nodes = { + joining: {}, + syncing: {}, + active: {}, + standby: {}, + } + let n = 0 + let tracker = {} + let maxN = 0 + let C = 150 + + new Vue({ + el: '#app', + data() { + return { + networkStatus: { + active: 0, + syncing: 0, + standby: 0, + joining: 0, + counter: 0, + desired: 0, + tps: 0, + maxTps: 0, + processed: 0, + rejected: 0, + rejectedTps: 0, + netLoad: 0, + load: 0, + totalLoad: 0, + maxLoad: 0, + queueLength: 0, + totalQueueLength: 0, + queueTime: 0, + totalQueueTime: 0, + expiredTx: 0, + }, + colorMode: 'state', + animateTransactions: false, + queueDetails: false, + nodeLoads: [], + sortKey: 'ip', + sortAsc: true, + shouldRefresh: 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: { + async fetchChanges() { + let res = await requestWithToken( + `${monitorServerUrl}/report?timestamp=${G.lastUpdatedTimestamp}` + ) + return res.data + }, + changeShouldRefresh() { + this.shouldRefresh = !this.shouldRefresh + }, + filterOutCrashedNodes(report) { + let filterdActiveNodes = {} + for (let nodeId in report.nodes.active) { + const node = report.nodes.active[nodeId] + let age = Date.now() - node.timestamp + if (age <= 60000) { + filterdActiveNodes[nodeId] = node + } + } + console.log('filtered active nodes', Object.keys(filterdActiveNodes).length) + report.nodes.active = { ...filterdActiveNodes } + }, + updateNetworkStatus(report) { + if (Object.keys(report.nodes.active).length === 0) return // don't update stats if no nodes send the + let reportPercentage = + Object.keys(report.nodes.active).length / Object.keys(G.nodes.active).length + console.log('reportPercentage', reportPercentage) + if (reportPercentage < 0.3) return // don't update stats if less than 30% of network updates + + this.nodeLoads = [] + + for (let nodeId in report.nodes.active) { + const node = report.nodes.active[nodeId] + const result = node.lastInSyncResult + + this.nodeLoads.push({ + id: nodeId, + ip: node.nodeIpInfo.externalIp, + port: node.nodeIpInfo.externalPort, + inSync: result.insync, + total: result.stats.total, + good: result.stats.good, + bad: result.stats.bad, + radixes: result.radixes, + }) + } + }, + sortTable(key) { + if (this.sortKey === key) { + this.sortAsc = !this.sortAsc + } else { + this.sortKey = key + this.sortAsc = true + } + }, + async updateNodes() { + if (!this.shouldRefresh) return + + try { + let changes = await this.fetchChanges() + console.log( + `Total of ${Object.keys(changes.nodes.active).length}/${ + Object.keys(G.nodes.active).length + } nodes updated.` + ) + this.filterOutCrashedNodes(changes) + console.log( + 'number of active nodes after filter', + Object.keys(changes.nodes.active).length + ) + this.updateNetworkStatus(changes) + } catch (e) { + console.log('Error while trying to update nodes.', e) + } + }, + async start() { + let res = await requestWithToken(`${monitorServerUrl}/report`) + let report = res.data + this.filterOutCrashedNodes(report) + this.updateNetworkStatus(res.data) + + setInterval(this.updateNodes, G.REFRESH_TIME) + }, + }, + }) +})() diff --git a/views/sync-details.html b/views/sync-details.html new file mode 100644 index 0000000..6c4df56 --- /dev/null +++ b/views/sync-details.html @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + +
+
+
+
+ NODES + + Refresh +
+ + + + + + + + + + + + + + + + + + + + + + + +
IPPortIn SyncTotalGoodBadRadixes
{{ node.ip }}{{ node.port }} + {{ node.inSync }} + {{ node.total }}{{ node.good }}{{ node.bad }} + +
+
+
+
+ + + + + + From 83467707f09f368f78c078bdb8fda509f89b9005 Mon Sep 17 00:00:00 2001 From: CombatPug Date: Thu, 4 Jul 2024 14:21:24 +0200 Subject: [PATCH 02/33] feat: add hide edge OOS toggle --- public/sync-detail.js | 10 +++ views/sync-details.html | 134 +++++++++++++++++++++------------------- 2 files changed, 81 insertions(+), 63 deletions(-) diff --git a/public/sync-detail.js b/public/sync-detail.js index 6cb1440..06f2940 100644 --- a/public/sync-detail.js +++ b/public/sync-detail.js @@ -54,6 +54,7 @@ sortKey: 'ip', sortAsc: true, shouldRefresh: true, + hideEdgeOOS: false, } }, async mounted() { @@ -80,6 +81,9 @@ changeShouldRefresh() { this.shouldRefresh = !this.shouldRefresh }, + changeHideEdgeOOS() { + this.hideEdgeOOS = !this.hideEdgeOOS + }, filterOutCrashedNodes(report) { let filterdActiveNodes = {} for (let nodeId in report.nodes.active) { @@ -117,6 +121,12 @@ }) } }, + radixClass(r) { + if (this.hideEdgeOOS && r.inConsensusRange && !r.inEdgeRange) { + return 'inconsensus-oosync' + } + return r.insync ? 'insync' : 'oosync' + }, sortTable(key) { if (this.sortKey === key) { this.sortAsc = !this.sortAsc diff --git a/views/sync-details.html b/views/sync-details.html index 6c4df56..0ee779e 100644 --- a/views/sync-details.html +++ b/views/sync-details.html @@ -56,70 +56,78 @@ - -
-
-
-
- NODES - - Refresh -
- - - - - - - - - - - - - - - - - - - - - - - -
IPPortIn SyncTotalGoodBadRadixes
{{ node.ip }}{{ node.port }} - {{ node.inSync }} - {{ node.total }}{{ node.good }}{{ node.bad }} - -
-
+ +
+
+
+
+ NODES + + Refresh + + Hide Edge OOS
+ + + + + + + + + + + + + + + + + + + + + + + +
IPPortIn SyncTotalGoodBadRadixes
{{ node.ip }}{{ node.port }} + {{ node.inSync }} + {{ node.total }}{{ node.good }}{{ node.bad }} + +
+
+
- - - - + + + + From 86b4b4109bcb52835a2127830aedbfe34f65d49f Mon Sep 17 00:00:00 2001 From: CombatPug Date: Thu, 4 Jul 2024 14:47:10 +0200 Subject: [PATCH 03/33] feat: add patchNeeded and cycle finished syncing columns + custom radix colour for `recentRuntimeSync` --- public/sync-detail.js | 9 +++- views/sync-details.html | 103 ++++++++++++++++++++++------------------ 2 files changed, 63 insertions(+), 49 deletions(-) diff --git a/public/sync-detail.js b/public/sync-detail.js index 06f2940..98fe5d1 100644 --- a/public/sync-detail.js +++ b/public/sync-detail.js @@ -118,14 +118,19 @@ good: result.stats.good, bad: result.stats.bad, radixes: result.radixes, + stillNeedsInitialPatchPostActive: node.stillNeedsInitialPatchPostActive, + cycleFinishedSyncing: node.cycleFinishedSyncing, }) } }, radixClass(r) { if (this.hideEdgeOOS && r.inConsensusRange && !r.inEdgeRange) { - return 'inconsensus-oosync' + return 'inconsensus-oosync'; } - return r.insync ? 'insync' : 'oosync' + if (r.recentRuntimeSync) { + return 'recent-runtime-sync'; + } + return r.insync ? 'insync' : 'oosync'; }, sortTable(key) { if (this.sortKey === key) { diff --git a/views/sync-details.html b/views/sync-details.html index 0ee779e..73633b0 100644 --- a/views/sync-details.html +++ b/views/sync-details.html @@ -1,60 +1,65 @@ - - - - - - - - + + + + + + + + - - + .insync { + background-color: #2dc200; + } + + .oosync { + background-color: #ff00bf; + } + + .inconsensus-oosync { + background-color: #2dc200 !important; + } + +
@@ -91,6 +96,8 @@ Total Good Bad + Patch Needed + Cycle Finished Syncing Radixes @@ -106,6 +113,8 @@ {{ node.total }} {{ node.good }} {{ node.bad }} + {{ node.stillNeedsInitialPatchPostActive }} + {{ node.cycleFinishedSyncing }}