Reorganize Node components and state

package-lock.json

@@ -0,0 +1,4 @@
+{
+  "version": "0.1.0",
+  "lockfileVersion": 1
+}

packages/backend/src/Node.ts

@@ -119,6 +119,8 @@ export default class Node {
       function handler(data: WebSocket.Data) {
         const message = parseMessage(data);
 
+        console.log(message);
+
         if (!message || !message.msg) {
           return;
         }
@@ -198,6 +200,8 @@ export default class Node {
   }
 
   private onMessage(message: Message) {
+    console.log(message);
+
     this.lastMessage = timestamp();
 
     const update = getBestBlock(message);

packages/backend/src/message.ts

@@ -46,6 +46,7 @@ interface SystemConnected {
   config: string,
   implementation: Types.NodeImplementation,
   version: Types.NodeVersion,
+  pubkey: Maybe<Types.NodePubKey>,
 }
 
 export interface SystemInterval extends BestBlock {

packages/common/src/types.ts

@@ -8,6 +8,7 @@ export type NodeId = Id<'Node'>;
 export type NodeName = Opaque<string, 'NodeName'>;
 export type NodeImplementation = Opaque<string, 'NodeImplementation'>;
 export type NodeVersion = Opaque<string, 'NodeVersion'>;
+export type NodePubKey = Opaque<string, 'NodePubKey'>;
 export type BlockNumber = Opaque<number, 'BlockNumber'>;
 export type BlockHash = Opaque<string, 'BlockHash'>;
 export type Milliseconds = Opaque<number, 'Milliseconds'>;

packages/frontend/src/Connection.ts

@@ -11,11 +11,11 @@ export class Connection {
     return new Connection(await Connection.socket(), update);
   }
 
-  private static readonly address = window.location.protocol === 'https:'
-                                      ? `wss://${window.location.hostname}/feed/`
-                                      : `ws://${window.location.hostname}:8080`;
+  // private static readonly address = window.location.protocol === 'https:'
+  //                                     ? `wss://${window.location.hostname}/feed/`
+  //                                     : `ws://${window.location.hostname}:8080`;
 
-  // private static readonly address = 'wss://telemetry.polkadot.io/feed/';
+  private static readonly address = 'wss://telemetry.polkadot.io/feed/';
 
   private static async socket(): Promise<WebSocket> {
     let socket = await Connection.trySocket();

packages/frontend/src/components/Chain.tsx

@@ -31,7 +31,7 @@ export namespace Chain {
   }
 }
 
-function sortNodes(a: Node.Props, b: Node.Props): number {
+function sortNodes(a: AppState.Node, b: AppState.Node): number {
   if (a.blockDetails[0] === b.blockDetails[0]) {
     const aPropagation = a.blockDetails[4] == null ? Infinity : a.blockDetails[4] as number;
     const bPropagation = b.blockDetails[4] == null ? Infinity : b.blockDetails[4] as number;
@@ -131,7 +131,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
   private renderTable() {
     return (
       <table className="Chain-node-list">
-        <Node.Header />
+        <Node.Row.Header />
         <tbody>
         {
           this.nodes().sort(sortNodes).map((node) => <Node.Row key={node.id} {...node} />)
@@ -145,7 +145,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     return Array.from(this.props.appState.nodes.values());
   }
 
-  private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): Node.PixelPosition {
+  private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): Node.Location.Position {
     const { map } = this.state;
 
     // Longitude ranges -180 (west) to +180 (east)

packages/frontend/src/components/Node.tsx

@@ -1,156 +0,0 @@
-import * as React from 'react';
-import { formatNumber, trimHash, milliOrSecond, secondsWithPrecision } from '../utils';
-import { Ago, Icon } from './';
-import { Types, Maybe } from '@dotstats/common';
-
-import nodeIcon from '../icons/server.svg';
-import nodeTypeIcon from '../icons/terminal.svg';
-import nodeLocationIcon from '../icons/location.svg';
-import peersIcon from '../icons/broadcast.svg';
-import transactionsIcon from '../icons/inbox.svg';
-import blockIcon from '../icons/package.svg';
-import blockHashIcon from '../icons/file-binary.svg';
-import blockTimeIcon from '../icons/history.svg';
-import propagationTimeIcon from '../icons/dashboard.svg';
-import lastTimeIcon from '../icons/watch.svg';
-
-import './Node.css';
-
-const SEMVER_PATTERN = /^\d+\.\d+\.\d+/;
-
-export namespace Node {
-  export interface Props {
-    id: Types.NodeId;
-    nodeDetails: Types.NodeDetails;
-    nodeStats: Types.NodeStats;
-    blockDetails: Types.BlockDetails;
-    location: Maybe<Types.NodeLocation>;
-  }
-
-  export interface PixelPosition {
-    left: number;
-    top: number;
-  }
-
-  export interface LocationState {
-    hover: boolean;
-  }
-
-  export function Header() {
-    return (
-      <thead>
-        <tr>
-          <th><Icon src={nodeIcon} alt="Node" /></th>
-          <th style={{ width: 240 }}><Icon src={nodeTypeIcon} alt="Implementation" /></th>
-          <th style={{ width: 26 }}><Icon src={peersIcon} alt="Peer Count" /></th>
-          <th style={{ width: 26 }}><Icon src={transactionsIcon} alt="Transactions in Queue" /></th>
-          <th style={{ width: 88 }}><Icon src={blockIcon} alt="Block" /></th>
-          <th style={{ width: 154 }}><Icon src={blockHashIcon} alt="Block Hash" /></th>
-          <th style={{ width: 80 }}><Icon src={blockTimeIcon} alt="Block Time" /></th>
-          <th style={{ width: 58 }}><Icon src={propagationTimeIcon} alt="Block Propagation Time" /></th>
-          <th style={{ width: 100 }}><Icon src={lastTimeIcon} alt="Last Block Time" /></th>
-        </tr>
-      </thead>
-    )
-  }
-
-  export function Row(props: Props) {
-    const [name, implementation, version] = props.nodeDetails;
-    const [height, hash, blockTime, blockTimestamp, propagationTime] = props.blockDetails;
-    const [peers, txcount] = props.nodeStats;
-    const [semver] = version.match(SEMVER_PATTERN) || [version];
-
-    let className = 'Node-Row';
-
-    if (propagationTime != null) {
-      className += ' Node-Row-synced';
-    }
-
-    return (
-      <tr className={className}>
-        <td>{name}</td>
-        <td><span title={`${implementation} v${version}`}>{implementation} v{semver}</span></td>
-        <td>{peers}</td>
-        <td>{txcount}</td>
-        <td>#{formatNumber(height)}</td>
-        <td><span title={hash}>{trimHash(hash, 16)}</span></td>
-        <td>{secondsWithPrecision(blockTime/1000)}</td>
-        <td>{propagationTime === null ? '∞' : milliOrSecond(propagationTime as number)}</td>
-        <td><Ago when={blockTimestamp} /></td>
-      </tr>
-    );
-  }
-
-  export class Location extends React.Component<Props & PixelPosition, LocationState> {
-    public readonly state = { hover: false };
-
-    public render() {
-      const { left, top, location } = this.props;
-      const height = this.props.blockDetails[0];
-      const propagationTime = this.props.blockDetails[4];
-
-      if (!location) {
-        return null;
-      }
-
-      let className = 'Node-Location';
-
-      if (propagationTime != null) {
-        className += ' Node-Location-synced';
-      } else if (height % 2 === 1) {
-        className += ' Node-Location-odd';
-      }
-
-      return (
-        <div className={className} style={{ left, top }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
-        {
-          this.state.hover ? this.renderDetails(location) : null
-        }
-        </div>
-      );
-    }
-
-    private renderDetails(location: Types.NodeLocation) {
-      const [name, implementation, version] = this.props.nodeDetails;
-      const [height, hash, blockTime, blockTimestamp, propagationTime] = this.props.blockDetails;
-
-      return (
-        <table className="Node-details">
-          <tbody>
-            <tr>
-              <td><Icon src={nodeIcon} alt="Node" /></td><td colSpan={5}>{name}</td>
-            </tr>
-            <tr>
-              <td><Icon src={nodeTypeIcon} alt="Implementation" /></td><td colSpan={5}>{implementation} v{version}</td>
-            </tr>
-            <tr>
-              <td><Icon src={nodeLocationIcon} alt="Location" /></td><td colSpan={5}>{location[2]}</td>
-            </tr>
-            <tr>
-              <td><Icon src={blockIcon} alt="Block" /></td><td colSpan={5}>#{formatNumber(height)}</td>
-            </tr>
-            <tr>
-              <td><Icon src={blockHashIcon} alt="Block Hash" /></td><td colSpan={5}>{trimHash(hash, 20)}</td>
-            </tr>
-            <tr>
-              <td><Icon src={blockTimeIcon} alt="Block Time" /></td>
-              <td style={{ width: 80 }}>{secondsWithPrecision(blockTime/1000)}</td>
-              <td><Icon src={propagationTimeIcon} alt="Block Propagation Time" /></td>
-              <td style={{ width: 58 }}>{propagationTime === null ? '∞' : milliOrSecond(propagationTime as number)}</td>
-              <td><Icon src={lastTimeIcon} alt="Last Block Time" /></td>
-              <td style={{ minWidth: 82 }}><Ago when={blockTimestamp} /></td>
-            </tr>
-          </tbody>
-        </table>
-      );
-    }
-
-    private onMouseOver = () => {
-      this.setState({ hover: true });
-    }
-
-    private onMouseOut = () => {
-      this.setState({ hover: false });
-    }
-  }
-}

packages/frontend/src/components/Node/Location.css

@@ -1,10 +1,3 @@
-.Node-Row {
-  color: #999;
-}
-
-.Node-Row-synced {
-  color: #fff;
-}
 
 .Node-Location {
   width: 6px;
@@ -36,7 +29,7 @@
   border-color: #fff;
 }
 
-.Node-details {
+.Node-Location-details {
   min-width: 335px;
   position: absolute;
   left: 16px;
@@ -48,17 +41,17 @@
   border-collapse: collapse;
 }
 
-.Node-details td {
+.Node-Location-details td {
   text-align: left;
   padding: 0.5em 1em;
 }
 
-.Node-details td:nth-child(odd) {
+.Node-Location-details td:nth-child(odd) {
   width: 16px;
   text-align: center;
   padding-right: 0.2em;
 }
 
-.Node-details td:nth-child(even) {
+.Node-Location-details td:nth-child(even) {
   padding-left: 0.2em;
 }

packages/frontend/src/components/Node/Location.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { Types } from '@dotstats/common';
+import { formatNumber, trimHash, milliOrSecond, secondsWithPrecision } from '../../utils';
+import { Ago, Icon } from '../';
+import { State as AppState } from '../../state';
+
+import nodeIcon from '../../icons/server.svg';
+import nodeTypeIcon from '../../icons/terminal.svg';
+import nodeLocationIcon from '../../icons/location.svg';
+import blockIcon from '../../icons/package.svg';
+import blockHashIcon from '../../icons/file-binary.svg';
+import blockTimeIcon from '../../icons/history.svg';
+import propagationTimeIcon from '../../icons/dashboard.svg';
+import lastTimeIcon from '../../icons/watch.svg';
+
+import './Location.css';
+
+namespace Location {
+  export interface Position {
+    left: number;
+    top: number;
+  }
+
+  export interface State {
+    hover: boolean;
+  }
+}
+
+class Location extends React.Component<AppState.Node & Location.Position, Location.State> {
+  public readonly state = { hover: false };
+
+  public render() {
+    const { left, top, location } = this.props;
+    const height = this.props.blockDetails[0];
+    const propagationTime = this.props.blockDetails[4];
+
+    if (!location) {
+      return null;
+    }
+
+    let className = 'Node-Location';
+
+    if (propagationTime != null) {
+      className += ' Node-Location-synced';
+    } else if (height % 2 === 1) {
+      className += ' Node-Location-odd';
+    }
+
+    return (
+      <div className={className} style={{ left, top }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+      {
+        this.state.hover ? this.renderDetails(location) : null
+      }
+      </div>
+    );
+  }
+
+  private renderDetails(location: Types.NodeLocation) {
+    const [name, implementation, version] = this.props.nodeDetails;
+    const [height, hash, blockTime, blockTimestamp, propagationTime] = this.props.blockDetails;
+
+    return (
+      <table className="Node-Location-details">
+        <tbody>
+          <tr>
+            <td><Icon src={nodeIcon} alt="Node" /></td><td colSpan={5}>{name}</td>
+          </tr>
+          <tr>
+            <td><Icon src={nodeTypeIcon} alt="Implementation" /></td><td colSpan={5}>{implementation} v{version}</td>
+          </tr>
+          <tr>
+            <td><Icon src={nodeLocationIcon} alt="Location" /></td><td colSpan={5}>{location[2]}</td>
+          </tr>
+          <tr>
+            <td><Icon src={blockIcon} alt="Block" /></td><td colSpan={5}>#{formatNumber(height)}</td>
+          </tr>
+          <tr>
+            <td><Icon src={blockHashIcon} alt="Block Hash" /></td><td colSpan={5}>{trimHash(hash, 20)}</td>
+          </tr>
+          <tr>
+            <td><Icon src={blockTimeIcon} alt="Block Time" /></td>
+            <td style={{ width: 80 }}>{secondsWithPrecision(blockTime/1000)}</td>
+            <td><Icon src={propagationTimeIcon} alt="Block Propagation Time" /></td>
+            <td style={{ width: 58 }}>{propagationTime === null ? '∞' : milliOrSecond(propagationTime as number)}</td>
+            <td><Icon src={lastTimeIcon} alt="Last Block Time" /></td>
+            <td style={{ minWidth: 82 }}><Ago when={blockTimestamp} /></td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+
+  private onMouseOver = () => {
+    this.setState({ hover: true });
+  }
+
+  private onMouseOut = () => {
+    this.setState({ hover: false });
+  }
+}
+
+export default Location;

packages/frontend/src/components/Node/Row.css

@@ -0,0 +1,7 @@
+.Node-Row {
+  color: #999;
+}
+
+.Node-Row-synced {
+  color: #fff;
+}

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { formatNumber, trimHash, milliOrSecond, secondsWithPrecision } from '../../utils';
+import { State as AppState } from '../../state';
+import { SEMVER_PATTERN } from './';
+import { Ago, Icon } from '../';
+
+import nodeIcon from '../../icons/server.svg';
+import nodeTypeIcon from '../../icons/terminal.svg';
+import peersIcon from '../../icons/broadcast.svg';
+import transactionsIcon from '../../icons/inbox.svg';
+import blockIcon from '../../icons/package.svg';
+import blockHashIcon from '../../icons/file-binary.svg';
+import blockTimeIcon from '../../icons/history.svg';
+import propagationTimeIcon from '../../icons/dashboard.svg';
+import lastTimeIcon from '../../icons/watch.svg';
+
+import './Row.css';
+
+export default class Row extends React.Component<AppState.Node, {}> {
+  public static Header = () => {
+    return (
+      <thead>
+        <tr>
+          <th><Icon src={nodeIcon} alt="Node" /></th>
+          <th style={{ width: 240 }}><Icon src={nodeTypeIcon} alt="Implementation" /></th>
+          <th style={{ width: 26 }}><Icon src={peersIcon} alt="Peer Count" /></th>
+          <th style={{ width: 26 }}><Icon src={transactionsIcon} alt="Transactions in Queue" /></th>
+          <th style={{ width: 88 }}><Icon src={blockIcon} alt="Block" /></th>
+          <th style={{ width: 154 }}><Icon src={blockHashIcon} alt="Block Hash" /></th>
+          <th style={{ width: 80 }}><Icon src={blockTimeIcon} alt="Block Time" /></th>
+          <th style={{ width: 58 }}><Icon src={propagationTimeIcon} alt="Block Propagation Time" /></th>
+          <th style={{ width: 100 }}><Icon src={lastTimeIcon} alt="Last Block Time" /></th>
+        </tr>
+      </thead>
+    )
+  }
+
+  public render() {
+    const { nodeDetails, blockDetails, nodeStats } = this.props;
+
+    const [name, implementation, version] = nodeDetails;
+    const [height, hash, blockTime, blockTimestamp, propagationTime] = blockDetails;
+    const [peers, txcount] = nodeStats;
+    const [semver] = version.match(SEMVER_PATTERN) || [version];
+
+    let className = 'Node-Row';
+
+    if (propagationTime != null) {
+      className += ' Node-Row-synced';
+    }
+
+    return (
+      <tr className={className}>
+        <td>{name}</td>
+        <td><span title={`${implementation} v${version}`}>{implementation} v{semver}</span></td>
+        <td>{peers}</td>
+        <td>{txcount}</td>
+        <td>#{formatNumber(height)}</td>
+        <td><span title={hash}>{trimHash(hash, 16)}</span></td>
+        <td>{secondsWithPrecision(blockTime/1000)}</td>
+        <td>{propagationTime === null ? '∞' : milliOrSecond(propagationTime as number)}</td>
+        <td><Ago when={blockTimestamp} /></td>
+      </tr>
+    );
+  }
+}

packages/frontend/src/components/Node/index.ts

@@ -0,0 +1,7 @@
+import { Types, Maybe } from '@dotstats/common';
+import Row from './Row';
+import Location from './Location';
+
+export { Row, Location };
+
+export const SEMVER_PATTERN = /^\d+\.\d+\.\d+/;

packages/frontend/src/components/index.ts

@@ -1,7 +1,10 @@
 export * from './Chains';
 export * from './Chain';
 export * from './Icon';
-export * from './Node';
 export * from './Tile';
 export * from './Ago';
 export * from './OfflineIndicator';
+
+import * as Node from './Node';
+
+export { Node };

packages/frontend/src/state.ts

@@ -1,6 +1,15 @@
-import { Node } from './components/Node';
 import { Types, Maybe } from '@dotstats/common';
 
+export namespace State {
+  export interface Node {
+    id: Types.NodeId;
+    nodeDetails: Types.NodeDetails;
+    nodeStats: Types.NodeStats;
+    blockDetails: Types.BlockDetails;
+    location: Maybe<Types.NodeLocation>;
+  }
+}
+
 export interface State {
   status: 'online' | 'offline' | 'upgrade-requested';
   best: Types.BlockNumber;
@@ -9,7 +18,7 @@ export interface State {
   timeDiff: Types.Milliseconds;
   subscribed: Maybe<Types.ChainLabel>;
   chains: Map<Types.ChainLabel, Types.NodeCount>;
-  nodes: Map<Types.NodeId, Node.Props>;
+  nodes: Map<Types.NodeId, State.Node>;
 }
 
 export type Update = <K extends keyof State>(changes: Pick<State, K> | null) => Readonly<State>;