pezkuwichain/pezkuwi-telemetry
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pezkuwi-telemetry.git synced 2026-06-13 06:51:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Display node details on map

Browse Source
This commit is contained in:
maciejhirsz
2018-07-18 15:18:35 +02:00
parent 966d390c46
commit 1a4322888c
6 changed files with 109 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/Node.tsx
+59 -7
View File
@@ -1,8 +1,20 @@
import * as React from 'react';
import { formatNumber, trimHash, milliOrSecond, secondsWithPrecision } from '../utils';
import { Ago } from './Ago';
import { Ago, Icon } from './';
import { Types, Maybe } from '@dotstats/common';
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 './Node.css';
export namespace Node {
export interface Props {
id: Types.NodeId;
@@ -17,6 +29,24 @@ export namespace Node {
top: number;
}
export function Header() {
return (
<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>
)
}
export function Row(props: Props) {
const [name, implementation, version] = props.nodeDetails;
const [height, hash, blockTime, blockTimestamp, propagationTime] = props.blockDetails;
@@ -39,14 +69,36 @@ export namespace Node {
export function Location(props: Props & PixelPosition) {
const { left, top } = props;
const [name, implementation, version] = props.nodeDetails;
const [height, hash, blockTime, blockTimestamp, propagationTime] = props.blockDetails;
return (
<span
className="Chain-map-node"
style={{ left, top }}
title={props.nodeDetails[0]}
data-location={JSON.stringify(props.location)}
/>
<div className="Node-Location" style={{ left, top }}>
<table className="Node-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={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>
</div>
);
}
}