Offline indicator, average block time and stuff

packages/frontend/src/App.css

@@ -1,13 +1,14 @@
 .App {
   text-align: left;
   font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-size: 16px;
 }
 
 .App-no-telemetry {
   width: 100vw;
   height: 100vh;
   line-height: 80vh;
-  font-size: 3.5em;
+  font-size: 56px;
   font-weight: 100;
   text-align: center;
   color: #888;

packages/frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Types } from '@dotstats/common';
-import { Chains, Chain, Ago } from './components';
+import { Chains, Chain, Ago, OfflineIndicator } from './components';
 import { Connection } from './Connection';
 import { State } from './state';
 
@@ -8,8 +8,10 @@ import './App.css';
 
 export default class App extends React.Component<{}, State> {
   public state: State = {
+    status: 'offline',
     best: 0 as Types.BlockNumber,
     blockTimestamp: 0 as Types.Timestamp,
+    blockAverage: null,
     timeDiff: 0 as Types.Milliseconds,
     subscribed: null,
     chains: new Map(),
@@ -31,16 +33,22 @@ export default class App extends React.Component<{}, State> {
   }
 
   public render() {
-    const { chains, timeDiff, subscribed } = this.state;
+    const { chains, timeDiff, subscribed, status } = this.state;
 
     Ago.timeDiff = timeDiff;
 
     if (chains.size === 0) {
-      return <div className="App App-no-telemetry">Waiting for telemetry data...</div>;
+      return (
+        <div className="App App-no-telemetry">
+          <OfflineIndicator status={status} />
+          Waiting for telemetry data...
+        </div>
+      );
     }
 
     return (
       <div className="App">
+        <OfflineIndicator status={status} />
         <Chains chains={chains} subscribed={subscribed} connection={this.connection} />
         <Chain state={this.state} />
       </div>

packages/frontend/src/Connection.ts

@@ -1,4 +1,4 @@
-import { timestamp, FeedMessage, Types, Maybe, sleep } from '@dotstats/common';
+import { VERSION, timestamp, FeedMessage, Types, Maybe, sleep } from '@dotstats/common';
 import { State, Update } from './state';
 
 const { Actions } = FeedMessage;
@@ -68,7 +68,10 @@ export class Connection {
   }
 
   private bindSocket() {
-    this.state = this.update({ nodes: new Map() });
+    this.state = this.update({
+      status: 'online',
+      nodes: new Map()
+    });
     this.socket.addEventListener('message', this.handleMessages);
     this.socket.addEventListener('close', this.handleDisconnect);
     this.socket.addEventListener('error', this.handleDisconnect);
@@ -88,10 +91,24 @@ export class Connection {
 
     messages: for (const message of FeedMessage.deserialize(data)) {
       switch (message.action) {
-        case Actions.BestBlock: {
-          const [best, blockTimestamp] = message.payload;
+        case Actions.FeedVersion: {
+          if (message.payload !== VERSION) {
+            this.state = this.update({ status: 'upgrade-requested' });
+            this.clean();
 
-          this.state = this.update({ best, blockTimestamp });
+            // Force reload from the server
+            setTimeout(() => window.location.reload(true), 3000);
+
+            return;
+          }
+
+          continue messages;
+        }
+
+        case Actions.BestBlock: {
+          const [best, blockTimestamp, blockAverage] = message.payload;
+
+          this.state = this.update({ best, blockTimestamp, blockAverage });
 
           continue messages;
         }
@@ -215,6 +232,7 @@ export class Connection {
   }
 
   private handleDisconnect = async () => {
+    this.state = this.update({ status: 'offline' });
     this.clean();
     this.socket.close();
     this.socket = await Connection.socket();

packages/frontend/src/components/Chain.tsx

@@ -25,11 +25,17 @@ 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;
 
+  if (aPropagation === bPropagation) {
+    // Descending sort by block number
+    return b.blockDetails[0] - a.blockDetails[0];
+  }
+
+  // Ascending sort by propagation time
   return aPropagation - bPropagation;
 }
 
 export function Chain(props: Chain.Props) {
-  const { best, blockTimestamp } = props.state;
+  const { best, blockTimestamp, blockAverage } = props.state;
 
   const nodes = Array.from(props.state.nodes.values()).sort(sortNodes);
 
@@ -37,6 +43,7 @@ export function Chain(props: Chain.Props) {
     <div className="Chain">
       <div className="Chain-header">
         <Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
+        <Tile icon={blockTimeIcon} title="Avgerage Time">{ blockAverage == null ? '-' : (blockAverage / 1000).toFixed(3) + 's' }</Tile>
         <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
       </div>
       <div className="Chain-content">

packages/frontend/src/components/Chains.tsx

@@ -23,7 +23,7 @@ export class Chains extends React.Component<Chains.Props, {}> {
   public render() {
     return (
       <div className="Chains">
-        <Icon src={chainIcon} alt="Observed chain" />
+        <Icon src={chainIcon} alt="Observed Chain" />
         {
           this.chains.map((chain) => this.renderChain(chain))
         }
@@ -38,10 +38,9 @@ export class Chains extends React.Component<Chains.Props, {}> {
       ? 'Chains-chain Chains-chain-selected'
       : 'Chains-chain';
 
-
     return (
       <a key={label} className={className} onClick={this.subscribe.bind(this, label)}>
-        {label} <span className="Chains-node-count">{nodeCount}</span>
+        {label} <span className="Chains-node-count" title="Node Count">{nodeCount}</span>
       </a>
     )
   }

packages/frontend/src/components/Node.tsx

@@ -20,14 +20,14 @@ export function Node(props: Node.Props) {
   return (
     <tr>
       <td>{name}</td>
-      <td>{implementation} v{version}</td>
-      <td>{peers}</td>
-      <td>{txcount}</td>
-      <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>
+      <td style={{ width: 240 }}>{implementation} v{version}</td>
+      <td style={{ width: 26 }}>{peers}</td>
+      <td style={{ width: 26 }}>{txcount}</td>
+      <td style={{ width: 88 }}>#{formatNumber(height)}</td>
+      <td style={{ width: 154 }}><span title={hash}>{trimHash(hash, 16)}</span></td>
+      <td style={{ width: 80 }}>{(blockTime / 1000).toFixed(3)}s</td>
+      <td style={{ width: 58 }}>{propagationTime === null ? '∞' : `${propagationTime}ms`}</td>
+      <td style={{ width: 82 }}><Ago when={blockTimestamp} /></td>
     </tr>
   );
 }

packages/frontend/src/components/OfflineIndicator.css

@@ -0,0 +1,17 @@
+.OfflineIndicator {
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  z-index: 10;
+  background: #c00;
+  line-height: 16px;
+  color: #fff;
+  font-size: 30px;
+  padding: 16px;
+  border-radius: 50px;
+  box-shadow: rgba(0,0,0,0.5) 0 3px 20px;
+}
+
+.OfflineIndicator-upgrade {
+  background: #282;
+}

packages/frontend/src/components/OfflineIndicator.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import './OfflineIndicator.css';
+import { Icon } from './Icon';
+import { State } from '../state';
+import offlineIcon from '../icons/zap.svg';
+import upgradeIcon from '../icons/flame.svg';
+
+export namespace OfflineIndicator {
+  export interface Props {
+    status: State["status"];
+  }
+}
+
+export function OfflineIndicator(props: OfflineIndicator.Props): React.ReactElement<any> | null {
+  switch (props.status) {
+    case 'online':
+      return null;
+    case 'offline':
+      return <div className="OfflineIndicator"><Icon src={offlineIcon} alt="Offline" /></div>;
+    case 'upgrade-requested':
+      return (
+        <div className="OfflineIndicator OfflineIndicator-upgrade">
+          <Icon src={upgradeIcon} alt="New Version Available" />
+        </div>
+      );
+  }
+}

packages/frontend/src/components/index.ts

@@ -4,3 +4,4 @@ export * from './Icon';
 export * from './Node';
 export * from './Tile';
 export * from './Ago';
+export * from './OfflineIndicator';

packages/frontend/src/state.ts

@@ -2,12 +2,14 @@ import { Node } from './components/Node';
 import { Types, Maybe } from '@dotstats/common';
 
 export interface State {
-  best: Types.BlockNumber,
-  blockTimestamp: Types.Timestamp,
-  timeDiff: Types.Milliseconds,
-  subscribed: Maybe<Types.ChainLabel>,
-  chains: Map<Types.ChainLabel, Types.NodeCount>,
-  nodes: Map<Types.NodeId, Node.Props>,
+  status: 'online' | 'offline' | 'upgrade-requested';
+  best: Types.BlockNumber;
+  blockTimestamp: Types.Timestamp;
+  blockAverage: Maybe<Types.Milliseconds>;
+  timeDiff: Types.Milliseconds;
+  subscribed: Maybe<Types.ChainLabel>;
+  chains: Map<Types.ChainLabel, Types.NodeCount>;
+  nodes: Map<Types.NodeId, Node.Props>;
 }
 
 export type Update = <K extends keyof State>(changes: Pick<State, K> | null) => Readonly<State>;