feat: validators uptime

solana-labs · Jul 22, 2019 · f6202ce · f6202ce
1 parent d81c464
commit f6202ce
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 18 deletions.
diff --git a/src/v2/components/TourDeSol/Table/index.jsx b/src/v2/components/TourDeSol/Table/index.jsx
@@ -17,19 +17,19 @@ import {observer} from 'mobx-react-lite';
 import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
 import NodesStore from 'v2/stores/nodes';
-import HelpLink from '../../HelpLink';
+import getUptime from 'v2/utils/getUptime';
 
+import HelpLink from '../../HelpLink';
 import useStyles from './styles';
 
 const ValidatorsTable = ({separate}: {separate: boolean}) => {
   const classes = useStyles();
   const theme = useTheme();
   const showTable = useMediaQuery(theme.breakpoints.up('md'));
-  const {
-    cluster: {voting = []},
-  } = NodesStore;
+  const {validators} = NodesStore;
 
   const renderRow = row => {
+    const uptime = getUptime(row);
     return (
       <TableRow hover key={row.nodePubkey}>
         <TableCell>1</TableCell>
@@ -43,11 +43,12 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
           </Link>
         </TableCell>
         <TableCell>{row.stake}</TableCell>
-        <TableCell>TODO</TableCell>
+        <TableCell>{uptime}%</TableCell>
       </TableRow>
     );
   };
   const renderCard = card => {
+    const uptime = getUptime(card);
     return (
       <div
         className={cn(classes.card, separate && classes.cardVertical)}
@@ -64,7 +65,7 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
           </Grid>
           <Grid item xs={4} zeroMinWidth>
             <div className={classes.cardTitle}>Uptime</div>
-            <div>TODO</div>
+            <div>{uptime}%</div>
           </Grid>
         </Grid>
       </div>
@@ -77,7 +78,7 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
           Active Validators
           <HelpLink text="" term="" />
         </Typography>
-        <Typography variant="h5">{voting.length}</Typography>
+        <Typography variant="h5">{validators.length}</Typography>
         {!separate && (
           <Link to="/rc/validators/all" className={classes.link}>
             See all &gt;
@@ -99,12 +100,12 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
               root: classes.body,
             }}
           >
-            {map(renderRow)(voting)}
+            {map(renderRow)(validators)}
           </TableBody>
         </Table>
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
-          {map(renderCard)(voting)}
+          {map(renderCard)(validators)}
         </div>
       )}
     </div>

diff --git a/src/v2/components/Validators/Table/index.jsx b/src/v2/components/Validators/Table/index.jsx
@@ -17,17 +17,17 @@ import {observer} from 'mobx-react-lite';
 import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
 import NodesStore from 'v2/stores/nodes';
+import getUptime from 'v2/utils/getUptime';
 
 import useStyles from './styles';
 
 const ValidatorsTable = ({separate}: {separate: boolean}) => {
   const classes = useStyles();
   const theme = useTheme();
   const showTable = useMediaQuery(theme.breakpoints.up('md'));
-  const {
-    cluster: {voting = []},
-  } = NodesStore;
+  const {validators} = NodesStore;
   const renderRow = row => {
+    const uptime = getUptime(row);
     return (
       <TableRow hover key={row.nodePubkey}>
         <TableCell align="center">
@@ -41,10 +41,12 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
         </TableCell>
         <TableCell>{row.stake} Lamports</TableCell>
         <TableCell>{row.commission}</TableCell>
+        <TableCell>{uptime}%</TableCell>
       </TableRow>
     );
   };
   const renderCard = card => {
+    const uptime = getUptime(card);
     return (
       <div
         className={cn(classes.card, separate && classes.cardVertical)}
@@ -54,7 +56,7 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
           <span />
           <div>{card.nodePubkey}</div>
         </Link>
-        <Grid container>
+        <Grid container spacing={1}>
           <Grid item xs={4} zeroMinWidth>
             <div className={classes.cardTitle}>Stake</div>
             <div>{card.stake} Lamports</div>
@@ -63,6 +65,10 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
             <div className={classes.cardTitle}>Commission</div>
             <div>{card.commission}</div>
           </Grid>
+          <Grid item xs={4} zeroMinWidth>
+            <div className={classes.cardTitle}>Uptime</div>
+            <div>{uptime}%</div>
+          </Grid>
         </Grid>
       </div>
     );
@@ -71,7 +77,7 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
     <div className={classes.root}>
       <div className={classes.header}>
         <Typography>Validators</Typography>
-        <Typography variant="h5">{voting.length}</Typography>
+        <Typography variant="h5">{validators.length}</Typography>
         {!separate && (
           <Link to="/rc/validators/all" className={classes.link}>
             See all &gt;
@@ -85,19 +91,20 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
               <TableCell align="center">Name/Moniker</TableCell>
               <TableCell>Stake</TableCell>
               <TableCell>Commission</TableCell>
+              <TableCell>Uptime</TableCell>
             </TableRow>
           </TableHead>
           <TableBody
             classes={{
               root: classes.body,
             }}
           >
-            {map(renderRow)(voting)}
+            {map(renderRow)(validators)}
           </TableBody>
         </Table>
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
-          {map(renderCard)(voting)}
+          {map(renderCard)(validators)}
         </div>
       )}
     </div>

diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx
@@ -14,7 +14,7 @@ import useStyles from './styles';
 
 const Validators = () => {
   const classes = useStyles();
-  const {cluster, fetchClusterInfo, totalBondedTokens} = NodesStore;
+  const {cluster, validators, fetchClusterInfo, totalBondedTokens} = NodesStore;
   useEffect(() => {
     fetchClusterInfo();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -34,7 +34,7 @@ const Validators = () => {
     },
     {
       title: '# Active Validators',
-      value: cluster.nodes.length,
+      value: validators.length,
       changes: '',
       period: 'since yesterday',
     },

diff --git a/src/v2/stores/nodes.js b/src/v2/stores/nodes.js
@@ -8,6 +8,7 @@ import {
   mapValues,
   pick,
   merge,
+  find,
 } from 'lodash/fp';
 import {action, computed, decorate, observable, observe, flow} from 'mobx';
 import {parseClusterInfo} from 'v2/utils/parseMessage';
@@ -17,6 +18,7 @@ import calcChanges from 'v2/utils/calcChanges';
 class Store {
   cluster = {
     nodes: [],
+    voting: [],
   };
   clusterChanges = {};
 
@@ -54,6 +56,13 @@ class Store {
     }))(this.cluster.nodes);
   }
 
+  get validators() {
+    return map(vote => ({
+      ...vote,
+      uptime: find({votePubkey: vote.votePubkey})(this.cluster.uptime),
+    }))(this.cluster.voting);
+  }
+
   get totalBondedTokens() {
     return compose(
       sumBy('stake'),

diff --git a/src/v2/utils/getUptime.js b/src/v2/utils/getUptime.js
@@ -0,0 +1,7 @@
+import {compose, getOr, multiply} from 'lodash/fp';
+
+export default compose(
+  time => time.toFixed(time ? 4 : 2),
+  multiply(100),
+  getOr(0, 'uptime.uptime.[0].percentage'),
+);