Reorganize Node components and state

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

@@ -0,0 +1,57 @@
+
+.Node-Location {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+  border: 2px solid #666;
+  border-radius: 6px;
+  margin-left: -4px;
+  margin-top: -4px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  cursor: pointer;
+  z-index: 1;
+  transition: border-color 0.25s linear;
+}
+
+.Node-Location-odd {
+  border-color: #bbb;
+}
+
+.Node-Location-synced {
+  z-index: 2;
+  border-color: #d64ca8;
+}
+
+.Node-Location:hover {
+  z-index: 3;
+  border-color: #fff;
+}
+
+.Node-Location-details {
+  min-width: 335px;
+  position: absolute;
+  left: 16px;
+  top: -4px;
+  font-family: monospace, sans-serif;
+  background: #222;
+  color: #fff;
+  box-shadow: 0 3px 20px rgba(0,0,0,0.5);
+  border-collapse: collapse;
+}
+
+.Node-Location-details td {
+  text-align: left;
+  padding: 0.5em 1em;
+}
+
+.Node-Location-details td:nth-child(odd) {
+  width: 16px;
+  text-align: center;
+  padding-right: 0.2em;
+}
+
+.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+/;