Add indicators for bitswap status: which peers

It would be nice to be able to see which peers we are exchanging data with. We can get this information with ipfs bitswap stat and ipfs bitswap ledger.

Context: https://github.com/ipfs/go-ipfs/issues/3330.

[lidel]

@jessicaschilling fysa we are able to tell how much data was sent / received per peer historically, and “at the moment”.

• Perhaps we could display RateIn / RateOut next to the green dot? (or on hover, like we do for Connection column)
  • It is useful to know if peer’s transfer is a little droplet, or a river
• Should we also display TotalIn / TotalOut for peers which don’t have green dot, but have those values above zero?
• (loose thought) by comparing In/Out we are able to tell the dominant direction of the data flow, perhaps we could reuse In/Out colors from bandwidth graph on Status page?

Some examples below, for your reference.

Stat source examples

Realtime stats per peer

(we use ipfs stats bw for bandwidth graph on Status page, but we don’t filter per peer, just get global stats)

$ ipfs stats bw -p QmPeer1
Bandwidth
TotalIn: 207 kB
TotalOut: 940 kB
RateIn: 0 B/s
RateOut: 0 B/s

Historical stats

ipfs bitswap ledger keeps track of past transfers, most numbers will overlap with totals from ipfs stats bw.

Peer that did not exchange data with us yet (no icon):

$ ipfs bitswap ledger QmPeer2
Ledger for QmPeer2
Debt ratio:	0.000000
Exchanges:	0
Bytes sent:	0
Bytes received:	0

Peer that fetched stuff from us (sent vs received, or just look at ratio)

$ ipfs bitswap ledger QmPeer3
Ledger for QmPeer3
Debt ratio:	561.000000
Exchanges:	1
Bytes sent:	561
Bytes received:	0

[jessicaschilling]

Closing this one in favor of general Peers page table enhancement in https://github.com/ipfs-shipyard/ipfs-webui/issues/1602.