Add bandwidth monitors (#100)

packages/backend/src/MeanList.ts

@@ -14,7 +14,11 @@ export class MeanList<T extends number> {
    *
    * @return {boolean}
    */
-  public push(val: T): boolean {
+  public push(val: Maybe<T>): boolean {
+    if (val == null) {
+      return false;
+    } 
+
     if (this.meanIndex === 20 && this.ticksPerMean < 32) {
       this.squashMeans();
     }

packages/backend/src/Node.ts

@@ -43,6 +43,8 @@ export default class Node {
   private txcount = 0 as Types.TransactionCount;
   private memory = new MeanList<Types.MemoryUse>();
   private cpu = new MeanList<Types.CPUUse>();
+  private upload = new MeanList<Types.BytesPerSecond>();
+  private download = new MeanList<Types.BytesPerSecond>();
   private chartstamps = new MeanList<Types.Timestamp>();
 
   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');
       }
     }

packages/backend/src/message.ts

@@ -57,6 +57,8 @@ export interface SystemInterval extends BestBlock {
   memory: Maybe<Types.MemoryUse>;
   cpu: Maybe<Types.CPUUse>;
   status: 'Idle' | string; // TODO: 'Idle' | ...?
+  bandwidth_upload: Maybe<Types.BytesPerSecond>;
+  bandwidth_download: Maybe<Types.BytesPerSecond>;
 }
 
 export interface NodeStart extends BestBlock {

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;

packages/common/src/types.ts

@@ -22,9 +22,10 @@ export type Longitude = Opaque<number, 'Longitude'>;
 export type City = Opaque<string, 'City'>;
 export type MemoryUse = Opaque<number, 'MemoryUse'>;
 export type CPUUse = Opaque<number, 'CPUUse'>;
+export type BytesPerSecond = Opaque<number, 'BytesPerSecond'>;
 
 export type BlockDetails = [BlockNumber, BlockHash, Milliseconds, Timestamp, Maybe<PropagationTime>];
 export type NodeDetails = [NodeName, NodeImplementation, NodeVersion, Maybe<Address>];
 export type NodeStats = [PeerCount, TransactionCount];
-export type NodeHardware = [Array<MemoryUse>, Array<CPUUse>, Array<Timestamp>];
+export type NodeHardware = [Array<MemoryUse>, Array<CPUUse>, Array<BytesPerSecond>, Array<BytesPerSecond>, Array<Timestamp>];
 export type NodeLocation = [Latitude, Longitude, City];

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,

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<Types.Timestamp>): string {
   }
 }
 
+function formatBandwidth(bps: number, stamp: Maybe<Types.Timestamp>): 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<Types.Timestamp>): string {
   const ago = stamp ? ` (${formatStamp(stamp)})` : '';
   const fractionDigits = cpu > 100 ? 0
@@ -173,6 +185,36 @@ export class Row extends React.Component<Row.Props, Row.State> {
         );
       }
     },
+    {
+      label: 'Upload Bandwidth',
+      icon: uploadIcon,
+      width: 40,
+      setting: 'upload',
+      render: ({ upload, chartstamps }) => {
+        if (upload.length < 3) {
+          return '-';
+        }
+
+        return (
+          <Sparkline width={44} height={16} stroke={1} format={formatBandwidth} values={upload} stamps={chartstamps} />
+        );
+      }
+    },
+    {
+      label: 'Download Bandwidth',
+      icon: downloadIcon,
+      width: 40,
+      setting: 'download',
+      render: ({ download, chartstamps }) => {
+        if (download.length < 3) {
+          return '-';
+        }
+
+        return (
+          <Sparkline width={44} height={16} stroke={1} format={formatBandwidth} values={download} stamps={chartstamps} />
+        );
+      }
+    },
     {
       label: 'Block',
       icon: blockIcon,

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;