Node Uptime (#196)

* fix: node stats updating live
* fix: Propagation time for first node to hit a block
* chore: Leaner feed serialization
* fix: Handle old nodes with stringified network_state
* feat: Add Node Uptime to the list
* chore: Remove old backend from test pipeline

packages/frontend/src/App.tsx

@@ -39,6 +39,7 @@ export default class App extends React.Component<{}, State> {
         finalizedhash: false,
         blockpropagation: true,
         blocklasttime: false,
+        uptime: false,
         networkstate: false,
       },
       (settings) => this.setState({ settings })

packages/frontend/src/Connection.ts

@@ -159,9 +159,9 @@ export class Connection {
         }
 
         case Actions.AddedNode: {
-          const [id, nodeDetails, nodeStats, nodeHardware, blockDetails, location] = message.payload;
+          const [id, nodeDetails, nodeStats, nodeHardware, blockDetails, location, connectedAt] = message.payload;
           const pinned = this.pins.has(nodeDetails[0]);
-          const node = new Node(pinned, id, nodeDetails, nodeStats, nodeHardware, blockDetails, location);
+          const node = new Node(pinned, id, nodeDetails, nodeStats, nodeHardware, blockDetails, location, connectedAt);
 
           nodes.add(node);
 

packages/frontend/src/components/Ago.tsx

@@ -5,6 +5,7 @@ import { timestamp, Types } from '@dotstats/common';
 export namespace Ago {
   export interface Props {
     when: Types.Timestamp,
+    justTime?: boolean,
   }
 
   export interface State {
@@ -78,6 +79,10 @@ export class Ago extends React.Component<Ago.Props, Ago.State> {
       agoStr = `${ ago / (3600 * 24) | 0}d`;
     }
 
-    return <span title={new Date(this.props.when).toUTCString()}>{agoStr} ago</span>
+    if (this.props.justTime !== true) {
+      agoStr += ' ago';
+    }
+
+    return <span title={new Date(this.props.when).toUTCString()}>{agoStr}</span>
   }
 }

packages/frontend/src/components/Consensus/Consensus.tsx

@@ -233,7 +233,7 @@ export class Consensus extends React.Component<Consensus.Props, {}> {
     }
 
     return this.props.appState.authorities.map(address => {
-      const node2 = this.props.appState.nodes.sorted().filter(node => node.address === address)[0];
+      const node2 = this.props.appState.nodes.sorted().filter(node => node.validator === address)[0];
       if (!node2) {
         return {Address: address, NodeId: null, Name: null} as Types.Authority;
       }

packages/frontend/src/components/List/Row.tsx

@@ -24,6 +24,7 @@ import memoryIcon from '../../icons/memory-solid.svg';
 import uploadIcon from '../../icons/cloud-upload.svg';
 import downloadIcon from '../../icons/cloud-download.svg';
 import networkIcon from '../../icons/network.svg';
+import uptimeIcon from '../../icons/pulse.svg';
 import externalLinkIcon from '../../icons/link-external.svg';
 
 import parityPolkadotIcon from '../../icons/dot.svg';
@@ -305,6 +306,13 @@ export class Row extends React.Component<Row.Props, Row.State> {
       setting: 'blocklasttime',
       render: ({ blockTimestamp }) => <Ago when={blockTimestamp} />
     },
+    {
+      label: 'Node Uptime',
+      icon: uptimeIcon,
+      width: 58,
+      setting: 'uptime',
+      render: ({ connectedAt }) => <Ago when={connectedAt} justTime={true} />
+    },
     {
       label: 'NetworkState',
       icon: networkIcon,

packages/frontend/src/state.ts

@@ -24,12 +24,12 @@ export class Node {
   }
 
   public readonly id: Types.NodeId;
-  public readonly address: Types.Address;
   public readonly name: Types.NodeName;
   public readonly implementation: Types.NodeImplementation;
   public readonly version: Types.NodeVersion;
   public readonly validator: Maybe<Types.Address>;
   public readonly networkId: Maybe<Types.NetworkId>;
+  public readonly connectedAt: Types.Timestamp;
 
   public stale: boolean;
   public pinned: boolean;
@@ -64,19 +64,20 @@ export class Node {
     nodeStats: Types.NodeStats,
     nodeHardware: Types.NodeHardware,
     blockDetails: Types.BlockDetails,
-    location: Maybe<Types.NodeLocation>
+    location: Maybe<Types.NodeLocation>,
+    connectedAt: Types.Timestamp,
   ) {
-    const [name, implementation, version, validator, networkId, address] = nodeDetails;
+    const [name, implementation, version, validator, networkId] = nodeDetails;
 
     this.pinned = pinned;
 
     this.id = id;
     this.name = name;
-    this.address = address;
     this.implementation = implementation;
     this.version = version;
     this.validator = validator;
     this.networkId = networkId;
+    this.connectedAt = connectedAt;
 
     this.updateStats(nodeStats);
     this.updateHardware(nodeHardware);
@@ -199,6 +200,7 @@ export namespace State {
     blocktime: boolean;
     blockpropagation: boolean;
     blocklasttime: boolean;
+    uptime: boolean;
     networkstate: boolean;
   }
 }