Display block propagation time

packages/frontend/src/components/Chain.css

@@ -0,0 +1,33 @@
+.Chain-header {
+  width: 100%;
+  background: #eee;
+  color: #000;
+}
+
+.Chain-content {
+  position: absolute;
+  left: 80px;
+  right: 0;
+  min-height: 50vh;
+  background: #222;
+  color: #fff;
+  box-shadow: rgba(0,0,0,0.5) 0 3px 30px;
+}
+
+.Chain-node-list {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.Chain-node-list thead {
+  background: #3c3c3b;
+}
+
+.Chain-node-list tbody {
+  font-family: monospace, sans-serif;
+}
+
+.Chain-node-list th, .Chain-node-list td {
+  text-align: left;
+  padding: 0.8em 1em;
+}

packages/frontend/src/components/Chain.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { State } from '../state';
+import { formatNumber } from '../utils';
+import { Tile, Icon, Node, Ago } 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 './Chain.css';
+
+export namespace Chain {
+  export interface Props {
+    state: Readonly<State>
+  }
+}
+
+function sortNodes(a: Node.Props, b: Node.Props): number {
+  const aPropagation = a.blockDetails[4] == null ? Infinity : a.blockDetails[4] as number;
+  const bPropagation = b.blockDetails[4] == null ? Infinity : b.blockDetails[4] as number;
+
+  return aPropagation - bPropagation;
+}
+
+export function Chain(props: Chain.Props) {
+  const { best, blockTimestamp } = props.state;
+
+  const nodes = Array.from(props.state.nodes.values()).sort(sortNodes);
+
+  return (
+    <div className="Chain">
+      <div className="Chain-header">
+        <Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
+        <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
+      </div>
+      <div className="Chain-content">
+        <table className="Chain-node-list">
+          <thead>
+            <tr>
+              <th><Icon src={nodeIcon} alt="Node" /></th>
+              <th><Icon src={nodeTypeIcon} alt="Implementation" /></th>
+              <th><Icon src={peersIcon} alt="Peer Count" /></th>
+              <th><Icon src={transactionsIcon} alt="Transactions in Queue" /></th>
+              <th><Icon src={blockIcon} alt="Block" /></th>
+              <th><Icon src={blockHashIcon} alt="Block Hash" /></th>
+              <th><Icon src={blockTimeIcon} alt="Block Time" /></th>
+              <th><Icon src={propagationTimeIcon} alt="Block Propagation Time" /></th>
+              <th><Icon src={lastTimeIcon} alt="Last Block Time" /></th>
+            </tr>
+          </thead>
+          <tbody>
+          {
+            nodes.map((node) => <Node key={node.id} {...node} />)
+          }
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

packages/frontend/src/components/Node.tsx

@@ -14,7 +14,7 @@ export namespace Node {
 
 export function Node(props: Node.Props) {
   const [name, implementation, version] = props.nodeDetails;
-  const [height, hash, blockTime, blockTimestamp] = props.blockDetails;
+  const [height, hash, blockTime, blockTimestamp, propagationTime] = props.blockDetails;
   const [peers, txcount] = props.nodeStats;
 
   return (
@@ -26,6 +26,7 @@ export function Node(props: Node.Props) {
       <td>#{formatNumber(height)}</td>
       <td><span title={hash}>{trimHash(hash, 16)}</span></td>
       <td>{(blockTime / 1000).toFixed(3)}s</td>
+      <td>{propagationTime === null ? '∞' : `${propagationTime}ms`}</td>
       <td><Ago when={blockTimestamp} /></td>
     </tr>
   );

packages/frontend/src/components/Tile.css

@@ -9,17 +9,16 @@
 
 .Tile-label {
   position: absolute;
-  top: 20px;
+  top: 25px;
   left: 100px;
   right: 0;
   font-size: 0.4em;
   text-transform: uppercase;
-  font-weight: bold;
 }
 
 .Tile-content {
   position: absolute;
-  bottom: 20px;
+  bottom: 25px;
   left: 100px;
   right: 0;
   font-weight: 300;

packages/frontend/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './Chains';
+export * from './Chain';
 export * from './Icon';
 export * from './Node';
 export * from './Tile';