Add bandwidth monitors (#100)

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;