Add bandwidth monitors (#100)

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,