Ipfs-webui: Peers screen should be aware of Relays

[lidel]

Is your feature request related to a problem? Please describe.

A lot of people enable EnableAutoRelay which effectively prefixes PeerID with multiaddr of one of public relays.

This makes Peers screen pretty dull, and /p2p-circuit does not even fit on the screen, so user has a lot of weird entries like this:

Based on my anecdotal observations, each Relay has 10+ nodes connected to it, so Relay ID is duplicated multiple times as it is the first part of Peer multiaddr.

Describe the solution you'd like

Not sure, we need to do more UX/design work here.
Some quick ideas:

• Minimal: we should at least have different icon to distinguish relayed nodes
• Better: find out /ip4 of relay, and use its location
• Ideal: be smarter about the way Relayed nodes are listed, group all relayed peers under "parent entry", do not duplicate relay prefix etc

cc @ericronne

[olizilla]

More generally I think the peers UI needs a complete rethink to be more useful.

• What info is useful about a peer?
• What info is secondary

We could just list out truncated peerIDs, along with a flag, and perhaps some simplified connection info, with notes on which are boostrap nodes, and which are relays. Some icons for boostrap vs relay, and direct connection vs relayed connection could work wonders here (paging @ericronne )

| PeerID | Location | Connection | Latency | Notes | More
| ---------|----------|-------------|--------|--------|----
| QmS2...8Cbt | 🇬🇧 UK | ip4 | n/a | Your peer | ...
| QmaC...uvuJ | 🇺🇸 USA | ip4 | 980 ms | IPFS bootstrap node | ...
| QmQV...hc6o | 🌐 Unknown | ip4 | n/a | Relay node | ...
| QmSN...mBym | 🌐 Unknown | p2p-circuit | 538ms | via QmQV...hc6o | ...

This info is available from ipfs swarm peers --verbose we just need to do upgrade how we handle p2p-circuit addrs as @lidel suggests.

Behind the more info we could show things like your share ration which we can get gtom from ipfs bitswap ledger <peerId> now. we'd want to lazy load that, as it's a seperate call to the API per peer Id.

[JustMaier]

During our review call today, A few ideas came to mind:

• Sort peers by latency by default
• Using an identicon, it will make it easier to recognize peers

[olizilla]

Done in #1062