Add radix sync cycle info

shardeum · Jul 12, 2024 · 210b54e · 210b54e
1 parent 539bc7e
commit 210b54e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 18 deletions.
diff --git a/public/sync-detail.js b/public/sync-detail.js
@@ -75,6 +75,7 @@
                 sortAsc: true,
                 shouldRefresh: true,
                 hideEdgeOOS: false,
+                recentRuntimeSyncMap: new Map(),
             }
         },
         async mounted() {
@@ -92,8 +93,11 @@
             },
         },
         methods: {
-            getBorderStyle(cycleFinishedSyncing) {
-                const cyclesAgo = this.networkStatus.counter - cycleFinishedSyncing
+            getRadixSyncStyle(nodeId, radixId) {
+                const uniqueKey = `${nodeId}-${radixId}`
+                const recentRuntimeSyncCycle = this.recentRuntimeSyncMap.get(uniqueKey)
+                if (!recentRuntimeSyncCycle) return {}
+                const cyclesAgo = this.networkStatus.counter - recentRuntimeSyncCycle
                 let borderColor
 
                 if (cyclesAgo === 1) {
@@ -102,13 +106,13 @@
                     borderColor = this.borderColors.DARKGRAY
                 } else if (cyclesAgo === 3) {
                     borderColor = this.borderColors.GRAY
-                } else if (cyclesAgo === 4) {
+                } else if (cyclesAgo >= 4) {
                     borderColor = this.borderColors.LIGHTGRAY
                 } else {
                     borderColor = this.borderColors.OFFWHITE
                 }
 
-                return { border: `2px solid ${borderColor}` }
+                return { backgroundColor: borderColor }
             },
             getBackgroundColor(r) {
                 let colorKey = ''
@@ -181,6 +185,14 @@
                     const result = node.lastInSyncResult
                     this.networkStatus.counter = node.cycleCounter
 
+                    for (let radix of result?.radixes || []) {
+                        const recentRuntimeSyncCycle = radix.recentRuntimeSyncCycle || -1
+                        const uniqueKey = `${nodeId}-${radix.radix}`
+                        if (recentRuntimeSyncCycle !== -1) {
+                            this.recentRuntimeSyncMap.set(uniqueKey, recentRuntimeSyncCycle)
+                        }
+                    }
+
                     this.nodeLoads.push({
                         id: nodeId,
                         ip: node.nodeIpInfo.externalIp,

diff --git a/views/sync-details.html b/views/sync-details.html
@@ -114,8 +114,7 @@
                         <span :style="getLegendColorStyle(borderColors.BLACK)" class="legend-span">1</span>
                         <span :style="getLegendColorStyle(borderColors.DARKGRAY)" class="legend-span">2</span>
                         <span :style="getLegendColorStyle(borderColors.GRAY)" class="legend-span">3</span>
-                        <span :style="getLegendColorStyle(borderColors.LIGHTGRAY)" class="legend-span">4</span>
-                        <span :style="getLegendColorStyle(borderColors.OFFWHITE)" class="legend-span">5</span>
+                        <span :style="getLegendColorStyle(borderColors.LIGHTGRAY)" class="legend-span">4+</span>
                     </div> <span class="label">Border Colors (Synced Cycles Ago)</span>
                 </div>
             </div>
@@ -171,18 +170,26 @@
                     <td>{{ node.cycleFinishedSyncing }}</td>
                     <td>{{ node.recentRuntimeSync }}</td>
                     <td>
-                         <template v-for="r in node.radixes" :key="r.radix">
-                            <span
-                                :class="radixClass(r)"
-                                :style="[getBorderStyle(node.cycleFinishedSyncing), { backgroundColor: getBackgroundColor(r) }]"
-                                style="white-space: nowrap; display: inline-block; min-width: 25px; margin-right: 2px; margin-bottom: 4px; padding: 2px;"
-                            >
-                                <span :style="{ color: 'white' }">
-                                 {{ r.inConsensusRange && r.inEdgeRange ? "C/E" : (r.inConsensusRange ? "C" : (r.inEdgeRange ? "E" : "")) }}
-                                </span>
-                                <span :style="{ color: 'black' }">{{ r.radix }}</span>
-                            </span>
-                        </template>
+                        <template>
+                            <div>
+                                <template v-for="r in node.radixes" :key="r.radix">
+                                <div style="display: inline-block; margin-right: 2px; margin-bottom: 4px;">
+                                    <div
+                                    :style="[getRadixSyncStyle(node.id, r.radix), { height: '5px', width: '100%', marginBottom: '2px' }]"
+                                    ></div>
+                                    <span
+                                    :class="radixClass(r)"
+                                    :style="{ backgroundColor: getBackgroundColor(r), whiteSpace: 'nowrap', display: 'inline-block', minWidth: '25px', padding: '2px' }"
+                                    >
+                                    <span :style="{ color: 'white' }">
+                                        {{ r.inConsensusRange && r.inEdgeRange ? "C/E" : (r.inConsensusRange ? "C" : (r.inEdgeRange ? "E" : "")) }}
+                                    </span>
+                                    <span :style="{ color: 'black' }">{{ r.radix }}</span>
+                                    </span>
+                                </div>
+                                </template>
+                            </div>
+                    </template>
                     </td>
                 </tr>
                 </tbody>