chore: table ui

public/locales/en/peers.json

@@ -5,6 +5,9 @@
   "address": "Address",
   "location": "Location",
   "unknownLocation": "Unknown",
+  "latency": "latency",
+  "bootstrapNode": "bootstrap node",
+  "viaRelay": "via <0>{node}</0>",
   "addConnection": "Add Connection",
   "insertPeerAddress": "Insert the peer address you want to connect to.",
   "add": "Add",

src/bundles/peer-locations.js

@@ -281,22 +281,24 @@ const parseConnection = (multiaddr) => {
 }
 
 const parseLatency = (latency) => {
-  if (latency === 'n/a') return latency
+  if (latency === 'n/a') return
 
-  const value = parseInt(latency)
+  let value = parseInt(latency)
   const unit = /(s|ms)/.exec(latency)[0]
 
-  return `${value}${unit}`
+  value = unit === 's' ? value * 1000 : value
+
+  return `${value}ms`
 }
 
 const parseNotes = (peer, bootstrapPeers) => {
   const opts = peer.addr.toOptions()
 
   if (opts.transport === 'p2p-circuit') {
-    return `via ${opts.host}`
+    return { type: 'RELAY_NODE', node: opts.host }
   }
 
   if (bootstrapPeers.includes(peer.addr.toString())) {
-    return 'bootstrap node'
+    return { type: 'BOOTSTRAP_NODE' }
   }
 }

src/peers/PeersTable/PeersTable.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'redux-bundler-react'
-import { translate } from 'react-i18next'
+import { translate, Trans } from 'react-i18next'
 import { Table, Column, AutoSizer } from 'react-virtualized'
 import CountryFlag from 'react-country-flag'
+import Cid from '../../components/cid/Cid'
 
 export class PeersTable extends React.Component {
   static propTypes = {
@@ -31,6 +32,30 @@ export class PeersTable extends React.Component {
     </span>
   )
 
+  peerIdCellRenderer = ({ cellData }) => (
+    <Cid value={cellData} />
+  )
+
+  latencyCellRenderer = ({ cellData }) => (
+    cellData
+      ? <span>{cellData}</span>
+      : <span className='o-40'>-</span>
+  )
+
+  notesCellRenderer = ({ cellData }) => {
+    if (!cellData) return
+
+    if (cellData.type === 'BOOTSTRAP_NODE') {
+      return this.props.t('bootstrapNode')
+    } else if (cellData.type === 'RELAY_NODE') {
+      return <Trans
+        i18nKey='viaRelay'
+        defaults='via <0>{node}</0>'
+        values={{ node: cellData.node }}
+        components={[<Cid value={cellData.node} />]} />
+    }
+  }
+
   rowClassRenderer = ({ index }) => {
     return index === -1 ? 'bb b--near-white bg-near-white' : 'bb b--near-white'
   }
@@ -53,11 +78,11 @@ export class PeersTable extends React.Component {
               rowHeight={36}
               rowCount={peerLocationsForSwarm.length}
               rowGetter={({ index }) => peerLocationsForSwarm[index]}>
-              <Column label={t('peerId')} dataKey='peerId' width={500} className='charcoal monospace truncate f7 pl2' />
               <Column label={t('location')} cellRenderer={this.locationCellRenderer} dataKey='locationCode' width={350} className='f6 navy-muted truncate pl2' />
+              <Column label={t('peerId')} cellRenderer={this.peerIdCellRenderer} dataKey='peerId' width={500} className='charcoal monospace truncate f7 pl2' />
               <Column label={t('connection')} dataKey='connection' width={400} className='f6 navy-muted truncate pl2' />
-              <Column label={t('latency')} dataKey='latency' width={250} className='f6 navy-muted truncate pl2' />
-              <Column label={t('notes')} dataKey='notes' width={400} className='charcoal monospace truncate f7 pl2' />
+              <Column label={t('latency')} cellRenderer={this.latencyCellRenderer} dataKey='latency' width={250} className='f6 navy-muted monospace pl2' />
+              <Column label={t('notes')} cellRenderer={this.notesCellRenderer} dataKey='notes' width={400} className='charcoal monospace truncate f7 pl2' />
             </Table>
           )}
         </AutoSizer> }