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

Author: lidel

public/locales/en/peers.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",

src/bundles/peer-locations.js

@@ -90,6 +90,13 @@ function createPeersLocations (opts) {
         )).sort()
         : []).join(', ')
 
+      // Truncate agent version as a defensive measure against excessively long strings
+      const rawAgentVersion = peer.identify?.AgentVersion || ''
+      const maxAgentVersionLength = 30
+      const agentVersion = rawAgentVersion.length > maxAgentVersionLength
+        ? rawAgentVersion.substring(0, maxAgentVersionLength) + '…'
+        : rawAgentVersion
+
       return {
         peerId,
         location,
@@ -101,7 +108,8 @@ function createPeersLocations (opts) {
         direction,
         latency,
         isPrivate,
-        isNearby
+        isNearby,
+        agentVersion
       }
     }))
   )

src/bundles/peers.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/peers/PeersTable/PeersTable.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='f6 charcoal truncate 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>
             </>
           )}