feat: node stats page

[olizilla]

Adds a node stats bundle.

License: MIT
Signed-off-by: Oli Evans oli@tableflip.io

[hacdias]

What about adding a copy button for the ID and Public Keys and some interesting graphs on the right side?

[olizilla]

Yep, that sounds good.

I'm not convinced we need to show the public key in that box. Maybe there is an advanced info section that is collapsed, that has public key and the addresses the node is bound to in.

I think peer id, connected peer count, and the agent version, which we can just call "version" info is worth showing up top.

[hacdias]

Current state:

And it is responsive!

[hacdias]

@olizilla more screenshots:

[olizilla]

@hacdias this is looking good! Some thoughts

• How about using a details element for the advanced info section, and using the styling convention that it introduces with the arrow on the left, pointing to the right when the section is closed, and having it pointing down when it is open.. (which we should get out of the box). see https://gist.github.com/ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d
  and
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

The only issue is the is there is no support in IE or Edge: https://caniuse.com/#search=details

I imagine there is a react component that polyfills the behaviour where it's not available. If not, that'd be a super helpful component to publish!

• Reduce the padding around the graphs a little, particularly the right hand side of the bandwidth graph. They should have some padding, but we want to give as much space as possible to the info.

• if you get onto the graphs there is a good example of a Donut style progress bar here: https://github.com/jxnblk/rebass/blob/master/src/Donut.js and the svg could be modified to do the horse-shoe shape.

• (not related to this PR but) Add a title "unknown location" to the unknown flag on the bandwidth by peer graph.

[hacdias]

@olizilla couldn't find a component but I found a very simple plugin: https://github.com/rstacruz/details-polyfill

I will make a Reacty component though.

[hacdias]

@olizilla the tests started failing really randomly. Need to figure out why.

DO you agree with the three graphs on Invision?

• Speed In
• Speed Out
• Storage

I can't see to which compare the speed to to fill the graphs.
The storage by default is 10 GB maximum which will create a graph where you have barely nothing filled.

[olizilla]

@hacdias good point. Like a speedometer, we can pick a max value, and if it's over the "top speed" we can just show the bar as full. We could just say that the full is 100MB/s.

If we want it to be more visually exciting, then we could use a non-linear scale, that gives more space to lower numbers and bunches up higher numbers like http://www.speedtest.net/ does. I'm not sure we want to play those games though.

I do think it's a good thing to have the storage graph look empty if there is very little in your repo!

[hacdias]

@olizilla I'll open this to review. In the meanwhile, if anyone can discover why are the tests failing in the CI with No node found for selector: nav a[href="#/files/"], it would be nice. They pass on my machine.

It seems to have started after 2d41077, which doesn't appear to have nothing to do with navigation. Maybe it increased the rendering time?

[hacdias]

A screenshot:

[olizilla]

How about adding f7 lh-copy pa2 bg-light-gray to the two advanced blocks and removing monospace and adding blue to the details summary link?

[hacdias]

@olizilla done! 😉

[fsdiogo]

The code looks good, although in some resolutions the responsiveness isn't the best, but we can deal with that in another PR!

[olizilla]

I get duplicate react key errors, as it seems I have the same address twice in my list!

@hacdias this is clearly weird, but we should make the UI robust to that. Can you filter the list to contain only unique entries. I think they should be in monospace too, but they are showing up as sans-serif now. Same for the public key.

In another PR it'd be great to group them by ip4 and ip6, and pick out the ip address section in a different color, so users can quickly pick out what network interfaces their node is bound to.

[hacdias]

@olizilla just made some updates. If I recall correctly, you told me you were making some changes this afternoon? Did you commit them?