From 052f5c846c7538de8985ea7546d609128510bed4 Mon Sep 17 00:00:00 2001 From: Maciej Hirsz <1096222+maciejhirsz@users.noreply.github.com> Date: Thu, 31 Jan 2019 12:43:53 +0100 Subject: [PATCH] Add bandwidth monitors (#100) --- packages/backend/src/MeanList.ts | 6 ++- packages/backend/src/Node.ts | 14 +++++-- packages/backend/src/message.ts | 2 + packages/common/src/index.ts | 2 +- packages/common/src/types.ts | 3 +- packages/frontend/src/App.tsx | 2 + packages/frontend/src/components/List/Row.tsx | 42 +++++++++++++++++++ packages/frontend/src/state.ts | 8 +++- 8 files changed, 72 insertions(+), 7 deletions(-) diff --git a/packages/backend/src/MeanList.ts b/packages/backend/src/MeanList.ts index 45ca88d..50f0c9d 100644 --- a/packages/backend/src/MeanList.ts +++ b/packages/backend/src/MeanList.ts @@ -14,7 +14,11 @@ export class MeanList { * * @return {boolean} */ - public push(val: T): boolean { + public push(val: Maybe): boolean { + if (val == null) { + return false; + } + if (this.meanIndex === 20 && this.ticksPerMean < 32) { this.squashMeans(); } diff --git a/packages/backend/src/Node.ts b/packages/backend/src/Node.ts index eac4432..d7340d5 100644 --- a/packages/backend/src/Node.ts +++ b/packages/backend/src/Node.ts @@ -43,6 +43,8 @@ export default class Node { private txcount = 0 as Types.TransactionCount; private memory = new MeanList(); private cpu = new MeanList(); + private upload = new MeanList(); + private download = new MeanList(); private chartstamps = new MeanList(); private readonly ip: string; @@ -184,7 +186,7 @@ export default class Node { } public nodeHardware(): Types.NodeHardware { - return [this.memory.get(), this.cpu.get(), this.chartstamps.get()]; + return [this.memory.get(), this.cpu.get(), this.upload.get(), this.download.get(), this.chartstamps.get()]; } public blockDetails(): Types.BlockDetails { @@ -232,7 +234,9 @@ export default class Node { } private onSystemInterval(message: SystemInterval) { - const { peers, txcount, cpu, memory } = message; + const { peers, txcount, cpu, memory, bandwidth_download: download, bandwidth_upload: upload } = message; + + console.log('bandwidth', download, upload); if (this.peers !== peers || this.txcount !== txcount) { this.peers = peers; @@ -244,9 +248,13 @@ export default class Node { if (cpu != null && memory != null) { const cpuChange = this.cpu.push(cpu); const memChange = this.memory.push(memory); + + const uploadChange = this.upload.push(upload); + const downloadChange = this.download.push(download); + const stampChange = this.chartstamps.push(timestamp()); - if (cpuChange || memChange || stampChange) { + if (cpuChange || memChange || uploadChange || downloadChange || stampChange) { this.events.emit('hardware'); } } diff --git a/packages/backend/src/message.ts b/packages/backend/src/message.ts index 7237039..2b27066 100644 --- a/packages/backend/src/message.ts +++ b/packages/backend/src/message.ts @@ -57,6 +57,8 @@ export interface SystemInterval extends BestBlock { memory: Maybe; cpu: Maybe; status: 'Idle' | string; // TODO: 'Idle' | ...? + bandwidth_upload: Maybe; + bandwidth_download: Maybe; } export interface NodeStart extends BestBlock { diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index b974f7d..96e7148 100644 --- a/packages/common/src/index.ts +++ b/packages/common/src/index.ts @@ -9,4 +9,4 @@ import * as FeedMessage from './feed'; export { Types, FeedMessage }; // Increment this if breaking changes were made to types in `feed.ts` -export const VERSION: Types.FeedVersion = 19 as Types.FeedVersion; +export const VERSION: Types.FeedVersion = 20 as Types.FeedVersion; diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts index 784a2b4..e28a2cf 100644 --- a/packages/common/src/types.ts +++ b/packages/common/src/types.ts @@ -22,9 +22,10 @@ export type Longitude = Opaque; export type City = Opaque; export type MemoryUse = Opaque; export type CPUUse = Opaque; +export type BytesPerSecond = Opaque; export type BlockDetails = [BlockNumber, BlockHash, Milliseconds, Timestamp, Maybe]; export type NodeDetails = [NodeName, NodeImplementation, NodeVersion, Maybe
]; export type NodeStats = [PeerCount, TransactionCount]; -export type NodeHardware = [Array, Array, Array]; +export type NodeHardware = [Array, Array, Array, Array, Array]; export type NodeLocation = [Latitude, Longitude, City]; diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index e5c7976..f42cfc4 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -26,6 +26,8 @@ export default class App extends React.Component<{}, State> { txs: true, cpu: true, mem: true, + upload: false, + download: false, blocknumber: true, blockhash: true, blocktime: true, diff --git a/packages/frontend/src/components/List/Row.tsx b/packages/frontend/src/components/List/Row.tsx index 29388c2..0346b1e 100644 --- a/packages/frontend/src/components/List/Row.tsx +++ b/packages/frontend/src/components/List/Row.tsx @@ -20,6 +20,8 @@ import propagationTimeIcon from '../../icons/dashboard.svg'; import lastTimeIcon from '../../icons/watch.svg'; import cpuIcon from '../../icons/microchip-solid.svg'; import memoryIcon from '../../icons/memory-solid.svg'; +import uploadIcon from '../../icons/cloud-upload.svg'; +import downloadIcon from '../../icons/cloud-download.svg'; import parityPolkadotIcon from '../../icons/dot.svg'; import paritySubstrateIcon from '../../icons/substrate.svg'; @@ -77,6 +79,16 @@ function formatMemory(kbs: number, stamp: Maybe): string { } } +function formatBandwidth(bps: number, stamp: Maybe): string { + const ago = stamp ? ` (${formatStamp(stamp)})` : ''; + + if (bps >= 1000) { + return `${(bps / 1024).toFixed(1)} kB/s${ago}`; + } else { + return `${bps} B/s${ago}`; + } +} + function formatCPU(cpu: number, stamp: Maybe): string { const ago = stamp ? ` (${formatStamp(stamp)})` : ''; const fractionDigits = cpu > 100 ? 0 @@ -173,6 +185,36 @@ export class Row extends React.Component { ); } }, + { + label: 'Upload Bandwidth', + icon: uploadIcon, + width: 40, + setting: 'upload', + render: ({ upload, chartstamps }) => { + if (upload.length < 3) { + return '-'; + } + + return ( + + ); + } + }, + { + label: 'Download Bandwidth', + icon: downloadIcon, + width: 40, + setting: 'download', + render: ({ download, chartstamps }) => { + if (download.length < 3) { + return '-'; + } + + return ( + + ); + } + }, { label: 'Block', icon: blockIcon, diff --git a/packages/frontend/src/state.ts b/packages/frontend/src/state.ts index f667c9f..fcf7470 100644 --- a/packages/frontend/src/state.ts +++ b/packages/frontend/src/state.ts @@ -29,6 +29,8 @@ export class Node { public txs: Types.TransactionCount; public mem: Types.MemoryUse[]; public cpu: Types.CPUUse[]; + public upload: Types.BytesPerSecond[]; + public download: Types.BytesPerSecond[]; public chartstamps: Types.Timestamp[]; public height: Types.BlockNumber; @@ -81,10 +83,12 @@ export class Node { } public updateHardware(hardware: Types.NodeHardware) { - const [mem, cpu, chartstamps] = hardware; + const [mem, cpu, upload, download, chartstamps] = hardware; this.mem = mem; this.cpu = cpu; + this.upload = upload; + this.download = download; this.chartstamps = chartstamps; this.trigger(); @@ -150,6 +154,8 @@ export namespace State { txs: boolean; cpu: boolean; mem: boolean; + upload: boolean; + download: boolean; blocknumber: boolean; blockhash: boolean; blocktime: boolean;