feat: add Agent Version column to peers table (#2433)

* feat: add Agent Version column to peers table

shows which IPFS implementation each peer is running (e.g., kubo/0.35.0)

depends on ipfs/js-kubo-rpc-client#342

* fix: increase agent version truncation to 64 chars

aligns with kubo's limit from ipfs/kubo#9465

* chore: update kubo-rpc-client to v5.3.0

- includes identify field support from ipfs/js-kubo-rpc-client#342
- add @babel/plugin-proposal-private-property-in-object to fix build warning
- update browserslist database

* refactor: remove agent version truncation

- removes client-side truncation as it will be handled upstream in kubo via ipfs/kubo#9465
- simplifies agentVersion to use undefined instead of empty string when not present

* refactor: compact connection column display

- use slash notation (ip4/tcp) instead of bullets
- shorten quic-v1 to quic
- use monospace font like other technical columns

Author: lidel

.aegir.js

@@ -34,6 +34,10 @@ export default {
       'tachyons',
       'uint8arrays',
 
+      // babel-preset-react-app uses this without declaring it as a dependency
+      // see: https://github.com/facebook/create-react-app/issues/13325
+      '@babel/plugin-proposal-private-property-in-object',
+
       // type-only deps
       'ipfs',
 

package-lock.json

@@ -73,7 +73,7 @@
     "it-first": "^1.0.6",
     "it-last": "^1.0.5",
     "it-map": "^1.0.5",
-    "kubo-rpc-client": "^5.2.0",
+    "kubo-rpc-client": "^5.3.0",
     "milliseconds": "^1.0.3",
     "money-clip": "^3.0.5",
     "multiformats": "^13.4.0",
@@ -107,6 +107,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.18.6",
     "@ipld/dag-pb": "^4.0.8",
     "@jest/globals": "^29.7.0",

package.json

@@ -3,6 +3,7 @@
   "localNetwork": "Local Network",
   "nearby": "nearby",
   "protocols": "Open streams",
+  "agentVersion": "Agent Version",
   "addConnection": "Add connection",
   "insertPeerAddress": "Insert the peer address you want to connect to.",
   "addPermanentPeer": "Add to the permanent peering configuration",

public/locales/en/peers.json

@@ -90,6 +90,9 @@ function createPeersLocations (opts) {
         )).sort()
         : []).join(', ')
 
+      // Get agent version (truncation will be handled upstream in kubo via https://github.com/ipfs/kubo/pull/9465)
+      const agentVersion = peer.identify?.AgentVersion
+
       return {
         peerId,
         location,
@@ -101,7 +104,8 @@ function createPeersLocations (opts) {
         direction,
         latency,
         isPrivate,
-        isNearby
+        isNearby,
+        agentVersion
       }
     }))
   )
@@ -157,7 +161,10 @@ const toLocationString = loc => {
 }
 
 const parseConnection = (multiaddr) => {
-  return multiaddr.protoNames().join(' • ')
+  const protocols = multiaddr.protoNames()
+    .map(p => p.startsWith('quic-v') ? 'quic' : p) // shorten quic-v1, quic-v2, etc to just 'quic'
+    .join('/')
+  return protocols
 }
 
 const parseLatency = (latency) => {

src/bundles/peer-locations.js

@@ -189,7 +189,8 @@ describe('selectPeerLocationsForSwarm', () => {
     expect(result).toEqual([
       {
         address: '1.test',
-        connection: '1/test • endOfTest',
+        agentVersion: undefined,
+        connection: '1/test/endOfTest',
         coordinates: [1.11, 1.01],
         direction: undefined,
         flagCode: 'ROM',
@@ -202,7 +203,8 @@ describe('selectPeerLocationsForSwarm', () => {
       },
       {
         address: '2.test',
-        connection: '2/test • endOfTest',
+        agentVersion: undefined,
+        connection: '2/test/endOfTest',
         coordinates: [2.22, 2.02],
         direction: undefined,
         flagCode: 'ROM',
@@ -252,8 +254,10 @@ describe('selectPeerLocationsForSwarm', () => {
     expect(result).toEqual([
       {
         address: '1.test',
-        connection: '1/test • endOfTest',
+        agentVersion: undefined,
+        connection: '1/test/endOfTest',
         coordinates: [1.11, 1.01],
+        direction: undefined,
         flagCode: 'ROM',
         isNearby: false,
         isPrivate: true,
@@ -292,7 +296,8 @@ describe('selectPeerLocationsForSwarm', () => {
     expect(result).toEqual([
       {
         address: '1.test',
-        connection: '1/test • endOfTest',
+        agentVersion: undefined,
+        connection: '1/test/endOfTest',
         direction: undefined,
         coordinates: null,
         flagCode: null,

src/bundles/peer-locations.test.js

@@ -6,7 +6,7 @@ const swarmPeersTTL = ms.seconds(10)
 const bundle = createAsyncResourceBundle({
   name: 'peers',
   actionBaseType: 'PEERS',
-  getPromise: ({ getIpfs }) => getIpfs().swarm.peers({ verbose: true, timeout: swarmPeersTTL }),
+  getPromise: ({ getIpfs }) => getIpfs().swarm.peers({ verbose: true, identify: true, timeout: swarmPeersTTL }),
   staleAfter: swarmPeersTTL,
   persist: false,
   checkIfOnline: false

src/bundles/peers.js

@@ -75,6 +75,22 @@ const protocolsCellRenderer = (t) => ({ rowData }) => {
   )
 }
 
+const agentVersionCellRenderer = (t) => ({ rowData }) => {
+  const ref = React.createRef()
+  const { agentVersion } = rowData
+  if (!agentVersion) return (<span className='dib o-40 no-select'>-</span>)
+  return (
+      <CopyToClipboard text={agentVersion} onCopy={() => copyFeedback(ref, t)}>
+        <span
+          ref={ref}
+          className='copyable'
+          title={agentVersion}>
+          { agentVersion }
+        </span>
+      </CopyToClipboard>
+  )
+}
+
 const connectionCellRenderer = (t) => ({ rowData }) => {
   const ref = React.createRef()
   const { address, direction, peerId } = rowData
@@ -140,7 +156,7 @@ export const PeersTable = ({ className, t, peerLocationsForSwarm, selectedPeers
   const filteredPeerList = useMemo(() => {
     const filterLower = filter.toLowerCase()
     if (filterLower === '') return awaitedPeerLocationsForSwarm
-    return awaitedPeerLocationsForSwarm.filter(({ location, latency, peerId, connection, protocols }) => {
+    return awaitedPeerLocationsForSwarm.filter(({ location, latency, peerId, connection, protocols, agentVersion }) => {
       if (location != null && location.toLowerCase().includes(filterLower)) {
         return true
       }
@@ -150,13 +166,15 @@ export const PeersTable = ({ className, t, peerLocationsForSwarm, selectedPeers
       if (peerId != null && peerId.toString().includes(filter)) {
         return true
       }
-      console.log('connection: ', connection)
       if (connection != null && connection.toLowerCase().includes(filterLower)) {
         return true
       }
       if (protocols != null && protocols.toLowerCase().includes(filterLower)) {
         return true
       }
+      if (agentVersion != null && agentVersion.toLowerCase().includes(filterLower)) {
+        return true
+      }
 
       return false
     })
@@ -186,11 +204,12 @@ export const PeersTable = ({ className, t, peerLocationsForSwarm, selectedPeers
                 sort={sort}
                 sortBy={sortBy}
                 sortDirection={sortDirection}>
-                <Column label={t('app:terms.location')} cellRenderer={locationCellRenderer(t)} dataKey='location' width={450} className='f6 charcoal truncate pl2' />
-                <Column label={t('app:terms.latency')} cellRenderer={latencyCellRenderer} dataKey='latency' width={200} className='f6 charcoal pl2' />
-                <Column label={t('app:terms.peerId')} cellRenderer={peerIdCellRenderer(t)} dataKey='peerId' width={250} className='charcoal monospace truncate f6 pl2' />
-                <Column label={t('app:terms.connection')} cellRenderer={connectionCellRenderer(t)} dataKey='connection' width={250} className='f6 charcoal truncate pl2' />
-                <Column label={t('protocols')} cellRenderer={protocolsCellRenderer(t)} dataKey='protocols' width={520} className='charcoal monospace truncate f7 pl2' />
+                <Column label={t('app:terms.location')} cellRenderer={locationCellRenderer(t)} dataKey='location' width={350} className='f6 charcoal truncate pl2' />
+                <Column label={t('app:terms.latency')} cellRenderer={latencyCellRenderer} dataKey='latency' width={100} className='f6 charcoal pl2' />
+                <Column label={t('app:terms.peerId')} cellRenderer={peerIdCellRenderer(t)} dataKey='peerId' width={200} className='charcoal monospace truncate f6 pl2' />
+                <Column label={t('app:terms.connection')} cellRenderer={connectionCellRenderer(t)} dataKey='connection' width={200} className='charcoal monospace truncate f7 pl2' />
+                <Column label={t('agentVersion')} cellRenderer={agentVersionCellRenderer(t)} dataKey='agentVersion' width={250} className='charcoal monospace truncate f7 pl2' />
+                <Column label={t('protocols')} cellRenderer={protocolsCellRenderer(t)} dataKey='protocols' width={420} className='charcoal monospace truncate f7 pl2' />
               </Table>
             </>
           )}