Add location column (#57)

packages/frontend/src/App.tsx

@@ -20,11 +20,12 @@ export default class App extends React.Component<{}, State> {
       'settings',
       {
         validator: true,
+        location: true,
         implementation: true,
         peers: true,
         txs: true,
-        cpu: true,
-        mem: true,
+        cpu: false,
+        mem: false,
         blocknumber: true,
         blockhash: true,
         blocktime: true,

packages/frontend/src/components/Node/Row.css

@@ -8,6 +8,21 @@
   padding: 0.35em 13px;
 }
 
+.Node-Row td {
+  position: relative;
+}
+
+.Node-Row .Node-Row-truncate {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .Node-Row-synced {
   color: #fff;
 }

packages/frontend/src/components/Node/Row.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import Identicon from 'polkadot-identicon';
 import { Types } from '@dotstats/common';
-import { formatNumber, trimHash, milliOrSecond, secondsWithPrecision } from '../../utils';
+import { formatNumber, milliOrSecond, secondsWithPrecision } from '../../utils';
 import { State as AppState } from '../../state';
 import { PersistentSet } from '../../persist';
 import { SEMVER_PATTERN } from './';
 import { Ago, Icon } from '../';
 
 import nodeIcon from '../../icons/server.svg';
+import nodeLocationIcon from '../../icons/location.svg';
 import nodeValidatorIcon from '../../icons/shield.svg';
 import nodeTypeIcon from '../../icons/terminal.svg';
 import peersIcon from '../../icons/broadcast.svg';
@@ -43,12 +44,18 @@ interface Column {
   render: (node: AppState.Node) => React.ReactElement<any> | string;
 }
 
+function Truncate(props: { text: string }): React.ReactElement<any> {
+  const { text } = props;
+
+  return <div className="Node-Row-truncate" title={text}>{text}</div>;
+}
+
 export default class Row extends React.Component<RowProps, {}> {
   public static readonly columns: Column[] = [
     {
       label: 'Node',
       icon: nodeIcon,
-      render: ({ nodeDetails }) => nodeDetails[0]
+      render: ({ nodeDetails }) => <Truncate text={nodeDetails[0]} />
     },
     {
       label: 'Validator',
@@ -61,17 +68,24 @@ export default class Row extends React.Component<RowProps, {}> {
         return validator ? <span className="Node-Row-validator" title={validator}><Identicon id={validator} size={16} /></span> : '-';
       }
     },
+    {
+      label: 'Location',
+      icon: nodeLocationIcon,
+      width: 140,
+      setting: 'location',
+      render: ({ location }) => location && location[2] ? <Truncate text={location[2]} /> : '-'
+    },
     {
       label: 'Implementation',
       icon: nodeTypeIcon,
-      width: 100,
+      width: 90,
       setting: 'implementation',
       render: ({ nodeDetails }) => {
         const [, implementation, version] = nodeDetails;
         const [semver] = version.match(SEMVER_PATTERN) || [version];
         const implIcon = implementation === 'parity-polkadot' ? parityPolkadotIcon : unknownImplementationIcon;
 
-        return <span title={`${implementation} v${version}`}><Icon src={implIcon} /> v{semver}</span>;
+        return <span title={`${implementation} v${version}`}><Icon src={implIcon} /> {semver}</span>;
       }
     },
     {
@@ -122,11 +136,7 @@ export default class Row extends React.Component<RowProps, {}> {
       icon: blockHashIcon,
       width: 154,
       setting: 'blockhash',
-      render: ({ blockDetails }) => {
-        const hash = blockDetails[1];
-
-        return <span title={hash}>{trimHash(hash, 16)}</span>;
-      }
+      render: ({ blockDetails }) => <Truncate text={blockDetails[1]} />
     },
     {
       label: 'Block Time',

packages/frontend/src/state.ts

@@ -11,6 +11,7 @@ export namespace State {
   }
 
   export interface Settings {
+    location: boolean;
     validator: boolean;
     implementation: boolean;
     peers: boolean;