Offline indicator, average block time and stuff

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';