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

Minor CSS fixes

Browse Source
This commit is contained in:
maciejhirsz
2018-07-14 15:03:24 +02:00
parent 4f3e72d506
commit ba9931738b
3 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/backend/src/Chain.ts
+9 -9
View File
@@ -16,7 +16,8 @@ export default class Chain {
public height = 0 as Types.BlockNumber;
public blockTimestamp = 0 as Types.Timestamp;
private blockTimes: Array<number> = new Array(BLOCK_TIME_HISTORY);
private blockTimes: Array<number> = new Array(BLOCK_TIME_HISTORY).fill(0);
private averageBlockTime: Maybe<Types.Milliseconds> = null;
constructor(label: Types.ChainLabel) {
this.label = label;
@@ -82,7 +83,7 @@ export default class Chain {
const { height, blockTimestamp } = node;
if (this.blockTimestamp) {
this.blockTimes[height % BLOCK_TIME_HISTORY] = blockTimestamp - this.blockTimestamp;
this.updateAverageBlockTime(height, blockTimestamp);
}
this.height = height;
@@ -101,21 +102,20 @@ export default class Chain {
console.log(`[${this.label}] ${node.name} imported ${node.height}, block time: ${node.blockTime / 1000}s, average: ${node.average / 1000}s | latency ${node.latency}`);
}
private get averageBlockTime(): Maybe<Types.Milliseconds> {
private updateAverageBlockTime(height: Types.BlockNumber, now: Types.Timestamp) {
this.blockTimes[height % BLOCK_TIME_HISTORY] = now - this.blockTimestamp;
let sum = 0;
let count = 0;
for (const time of this.blockTimes) {
if (time != null) {
if (time) {
sum += time;
count += 1;
}
}
if (count === 0) {
return null;
}
return (sum / count) as Types.Milliseconds;
// We are guaranteed that count > 0
this.averageBlockTime = (sum / count) as Types.Milliseconds;
}
}
packages/frontend/src/components/Chain.css
+6 -2
View File
@@ -6,13 +6,17 @@
color: #000;
}
.Chain-content {
.Chain-content-container {
position: absolute;
left: 0; /*80px;*/
right: 0;
bottom: 0;
top: 148px;
min-height: 50vh;
}
.Chain-content {
width: 100%;
min-height: 100%;
background: #222;
color: #fff;
box-shadow: rgba(0,0,0,0.5) 0 3px 30px;
packages/frontend/src/components/Chain.tsx
+23 -21
View File
@@ -46,27 +46,29 @@ export function Chain(props: Chain.Props) {
<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">
<table className="Chain-node-list">
<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>
<tbody>
{
nodes.map((node) => <Node key={node.id} {...node} />)
}
</tbody>
</table>
<div className="Chain-content-container">
<div className="Chain-content">
<table className="Chain-node-list">
<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>
<tbody>
{
nodes.map((node) => <Node key={node.id} {...node} />)
}
</tbody>
</table>
</div>
</div>
</div>
);