fix(debug): Fix epoch start date (near#11688)

- Fixing the annoying `NaN`s in debug UI/Epoch View for past epochs start time - (nit) Fix wrong argument passed to draw function of endorsements bar
saketh-are · Jun 28, 2024 · 59e2b88 · 59e2b88
1 parent a134185
commit 59e2b88
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 6 deletions.
diff --git a/tools/debug-ui/package-lock.json b/tools/debug-ui/package-lock.json
diff --git a/tools/debug-ui/package.json b/tools/debug-ui/package.json
@@ -4,12 +4,13 @@
   "private": true,
   "dependencies": {
     "@patternfly/react-log-viewer": "^4.87.101",
+    "@tanstack/react-query": "^4.0.0",
     "@types/node": "^16.18.77",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
+    "date-fns": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tanstack/react-query": "^4.0.0",
     "react-router-dom": "^6.21.1",
     "react-scripts": "^5.0.1",
     "react-tooltip": "^5.22.0",
@@ -48,4 +49,4 @@
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^4.2.2"
   }
-}
+}
diff --git a/tools/debug-ui/src/EpochValidatorsView.tsx b/tools/debug-ui/src/EpochValidatorsView.tsx
@@ -257,8 +257,7 @@ export const EpochValidatorsView = ({ addr }: EpochValidatorViewProps) => {
                             <td>
                                 {drawProducedAndExpectedBar(
                                     validator.current?.endorsements ?? null,
-                                    maxExpectedChunks,
-                                    0.05
+                                    maxExpectedEndorsements
                                 )}
                             </td>
 

diff --git a/tools/debug-ui/src/RecentEpochsView.tsx b/tools/debug-ui/src/RecentEpochsView.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { parse } from 'date-fns';
 import { EpochInfoView, fetchEpochInfo, fetchFullStatus } from './api';
 import { formatDurationInMillis } from './utils';
 import './RecentEpochsView.scss';
@@ -63,9 +64,25 @@ export const RecentEpochsView = ({ addr }: RecentEpochsViewProps) => {
                         }
                     } else {
                         firstBlockColumn = epochInfo.first_block[0];
+                        // The date object inside epochInfo.first_block is very particular.
+                        // It looks like this:
+                        //      2024,180,0,15,28,88423066,0,0,0
+                        //      year,days,hours,minutes,seconds,nanoseconds,timezone offsets
+                        // The solution below parses the first part of the date object, up the the seconds, in UTC.
                         epochStartColumn = `${formatDurationInMillis(
-                            Date.now() - Date.parse(epochInfo.first_block[1])
-                        )} ago`;
+                            Date.now() -
+                              parse(
+                                epochInfo.first_block[1]
+                                  .toString()
+                                  .split(",")
+                                  .slice(0, 5)
+                                  .concat(["+00"])
+                                  .join(","),
+                                "yyyy,D,H,m,s,x",
+                                new Date(),
+                                { useAdditionalDayOfYearTokens: true }
+                              ).getTime()
+                          )} ago`;
                     }
                     let rowClassName = '';
                     let firstColumnText = '';