Reorganize Node components and state

2026-04-27 19:48:02 +00:00 · 2018-08-10 14:36:05 +02:00
parent 7f4b87eae4
commit ba545799fe
14 changed files with 218 additions and 177 deletions
@@ -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>
+    );
+  }
+}