From 1f1e43c6efdd609a9bd4eb06d4bd6b1a1b99a8af Mon Sep 17 00:00:00 2001
From: Sunny Gleason <sunny.gleason@gmail.com>
Date: Thu, 31 Oct 2019 09:20:10 -0400
Subject: [PATCH] feat: improved Uptime component, max uptime 100%

---
 api/util.js                                 | 21 ++++---
 api/views/tourdesol/index.js                |  2 +
 src/v2/components/TourDeSol/Table/index.jsx | 68 +++++++++------------
 src/v2/components/UI/Uptime/index.jsx       | 48 +++++++++++++++
 src/v2/components/UI/Uptime/styles.js       | 19 ++++++
 5 files changed, 112 insertions(+), 46 deletions(-)
 create mode 100644 src/v2/components/UI/Uptime/index.jsx
 create mode 100644 src/v2/components/UI/Uptime/styles.js

diff --git a/api/util.js b/api/util.js
index db17f274..aa3cee76 100644
--- a/api/util.js
+++ b/api/util.js
@@ -26,8 +26,9 @@ export function calculateUptimeValues(epochInfo, epochSchedule, uptimeValues) {
       cumulativeUptimeCreditsEarned: null,
       cumulativeUptimeCreditsPossible: null,
       cumulativeUptimePercent: null,
-      complete: false,
-      epochs: 0,
+      uptimeComplete: false,
+      uptimeEpochs: 0,
+      uptimeEpochsSeen: {},
     };
   }
 
@@ -80,12 +81,17 @@ export function calculateUptimeValues(epochInfo, epochSchedule, uptimeValues) {
     Math.min(DEFAULT_CUMULATIVE_UPTIME_EPOCHS, lastEpoch - firstEpoch + 1) *
     slotsPerEpoch;
 
-  const lastEpochUptimePercent =
+  const lastEpochUptimePercent = Math.min(
+    100.0,
     (100 * (lastEpochUptimeCreditsEarned * 1.0)) /
-    (lastEpochUptimeCreditsPossible * 1.0);
-  const cumulativeUptimePercent =
+      (lastEpochUptimeCreditsPossible * 1.0),
+  );
+
+  const cumulativeUptimePercent = Math.min(
+    100.0,
     (100 * (cumulativeUptimeCreditsEarned * 1.0)) /
-    (cumulativeUptimeCreditsPossible * 1.0);
+      (cumulativeUptimeCreditsPossible * 1.0),
+  );
 
   return {
     lastEpoch,
@@ -95,8 +101,9 @@ export function calculateUptimeValues(epochInfo, epochSchedule, uptimeValues) {
     cumulativeUptimeCreditsEarned,
     cumulativeUptimeCreditsPossible,
     cumulativeUptimePercent,
-    complete: lastEpoch - firstEpoch >= DEFAULT_CUMULATIVE_UPTIME_EPOCHS,
+    uptimeComplete: lastEpoch - firstEpoch >= DEFAULT_CUMULATIVE_UPTIME_EPOCHS,
     uptimeEpochs: _.size(epochsSeen),
+    uptimeEpochsSeen: epochsSeen,
   };
 }
 
diff --git a/api/views/tourdesol/index.js b/api/views/tourdesol/index.js
index cb84c492..ed95207b 100644
--- a/api/views/tourdesol/index.js
+++ b/api/views/tourdesol/index.js
@@ -113,6 +113,7 @@ export class TourDeSolIndexView {
         lastEpochUptimePercent,
         cumulativeUptimePercent,
         uptimeEpochs,
+        uptimeComplete,
       } = uptime;
 
       const score = this.computeNodeScore(x, scoreParams);
@@ -127,6 +128,7 @@ export class TourDeSolIndexView {
         lastEpochUptimePercent,
         cumulativeUptimePercent,
         uptimeEpochs,
+        uptimeComplete,
         uptime,
         score,
       };
diff --git a/src/v2/components/TourDeSol/Table/index.jsx b/src/v2/components/TourDeSol/Table/index.jsx
index 0e63d490..078460f3 100644
--- a/src/v2/components/TourDeSol/Table/index.jsx
+++ b/src/v2/components/TourDeSol/Table/index.jsx
@@ -13,10 +13,11 @@ import HelpLink from 'v2/components/HelpLink';
 import ValidatorName from 'v2/components/UI/ValidatorName';
 
 import useStyles from './styles';
+import Uptime from '../../UI/Uptime';
 
 const fields = [
   {
-    label: 'ranking',
+    label: 'rank',
     id: 'rank',
     text: '',
     term: '',
@@ -33,6 +34,12 @@ const fields = [
     text: '',
     term: '',
   },
+  {
+    label: 'Slot',
+    id: 'slot',
+    text: '',
+    term: '',
+  },
   {
     label: 'Uptime',
     id: 'uptimePercent',
@@ -59,40 +66,32 @@ const ValidatorsTable = ({
       avatarUrl,
       activatedStake,
       activatedStakePercent,
+      slot,
       lastEpochUptimePercent,
       cumulativeUptimePercent,
       uptimeEpochs,
+      uptimeComplete,
       rank,
     } = row;
 
     return (
       <TableRow hover key={pubkey}>
-        <TableCell width={100}>{rank}</TableCell>
-        <TableCell>
+        <TableCell width={20}>{rank}</TableCell>
+        <TableCell width={300}>
           <ValidatorName pubkey={pubkey} name={name} avatar={avatarUrl} />
         </TableCell>
         <TableCell width={200}>
           {activatedStake.toFixed(8) || 'N/A'} (
           {activatedStakePercent.toFixed(3)}%)
         </TableCell>
-        <TableCell
-          width={150}
-          title={
-            lastEpochUptimePercent &&
-            cumulativeUptimePercent &&
-            uptimeEpochs &&
-            `Last Epoch Uptime: ${lastEpochUptimePercent.toFixed(
-              1,
-            )}%; Recent Cumulative Uptime: ${cumulativeUptimePercent.toFixed(
-              3,
-            )}%; Epochs: ${uptimeEpochs}`
-          }
-        >
-          {(cumulativeUptimePercent &&
-            `${cumulativeUptimePercent.toFixed(
-              cumulativeUptimePercent ? 4 : 2,
-            )}%`) ||
-            'Unavailable'}
+        <TableCell width={80}>{slot}</TableCell>
+        <TableCell width={120}>
+          <Uptime
+            lastEpochUptimePercent={lastEpochUptimePercent}
+            cumulativeUptimePercent={cumulativeUptimePercent}
+            uptimeEpochs={uptimeEpochs}
+            uptimeComplete={uptimeComplete}
+          />
         </TableCell>
       </TableRow>
     );
@@ -107,7 +106,9 @@ const ValidatorsTable = ({
       lastEpochUptimePercent,
       cumulativeUptimePercent,
       uptimeEpochs,
+      uptimeComplete,
     } = card;
+
     return (
       <div
         className={cn(classes.card, separate && classes.cardVertical)}
@@ -124,29 +125,18 @@ const ValidatorsTable = ({
           </Grid>
           <Grid item xs={6} zeroMinWidth>
             <div className={classes.cardTitle}>Uptime</div>
-            <div
-              title={
-                lastEpochUptimePercent &&
-                cumulativeUptimePercent &&
-                uptimeEpochs &&
-                `Last Epoch Uptime: ${lastEpochUptimePercent.toFixed(
-                  1,
-                )}%; Recent Cumulative Uptime: ${cumulativeUptimePercent.toFixed(
-                  3,
-                )}%; Epochs: ${uptimeEpochs}`
-              }
-            >
-              {(cumulativeUptimePercent &&
-                `${cumulativeUptimePercent.toFixed(
-                  cumulativeUptimePercent ? 4 : 2,
-                )}%`) ||
-                'Unavailable'}
-            </div>
+            <Uptime
+              lastEpochUptimePercent={lastEpochUptimePercent}
+              cumulativeUptimePercent={cumulativeUptimePercent}
+              uptimeEpochs={uptimeEpochs}
+              uptimeComplete={uptimeComplete}
+            />
           </Grid>
         </Grid>
       </div>
     );
   };
+
   return (
     <div className={classes.root}>
       <div className={classes.header}>
diff --git a/src/v2/components/UI/Uptime/index.jsx b/src/v2/components/UI/Uptime/index.jsx
new file mode 100644
index 00000000..4f06376d
--- /dev/null
+++ b/src/v2/components/UI/Uptime/index.jsx
@@ -0,0 +1,48 @@
+// @flow
+import React from 'react';
+
+import useStyles from './styles';
+
+const Uptime = ({
+  lastEpochUptimePercent,
+  cumulativeUptimePercent,
+  uptimeEpochs,
+  uptimeComplete,
+}: {
+  lastEpochUptimePercent: number,
+  cumulativeUptimePercent: number,
+  uptimeEpochs: number,
+  uptimeComplete: boolean,
+}) => {
+  const classes = useStyles();
+
+  const uptimeDescription =
+    lastEpochUptimePercent &&
+    cumulativeUptimePercent &&
+    uptimeEpochs &&
+    `Last Epoch Uptime: ${lastEpochUptimePercent.toFixed(
+      1,
+    )}%; Recent Cumulative Uptime: ${cumulativeUptimePercent.toFixed(
+      3,
+    )}%; Epochs: ${uptimeEpochs}`;
+
+  const uptimeDisplay =
+    (cumulativeUptimePercent &&
+      `${cumulativeUptimePercent.toFixed(cumulativeUptimePercent ? 4 : 2)}%`) ||
+    'Unavailable';
+
+  return (
+    <div className={classes.root} title={uptimeDescription}>
+      {uptimeDisplay}
+      {!uptimeComplete && (
+        <span
+          title={`NOTE: Uptime calculation only contains ${uptimeEpochs} epochs`}
+        >
+          ***
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Uptime;
diff --git a/src/v2/components/UI/Uptime/styles.js b/src/v2/components/UI/Uptime/styles.js
new file mode 100644
index 00000000..39e13be2
--- /dev/null
+++ b/src/v2/components/UI/Uptime/styles.js
@@ -0,0 +1,19 @@
+import {makeStyles} from '@material-ui/core';
+
+export default makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    '& div': {
+      '&:first-child': {
+        marginRight: 15,
+      },
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+    },
+    [theme.breakpoints.down('sm')]: {
+      marginBottom: 22,
+    },
+  },
+}));