Added Feature to display Node Allocation through Gauge Chart

[Imads608]

Screenshot of the Feature below
Component can also display Gauge Charts for Memory and CPU if props are provided.

@javier-op / @dgkanatsios let me know if anything else needs to be done here :)

[javier-op]

Hey, the gauge looks great!
Some small comments, you can see them in the gif below:

1. When you have multiple nodes, there is a shadow under the rows that leaves a blank
2. When you hover over the row, the text moves due to the new "View metric" tag
3. The tag itself is not clickable
4. The metric is called Capacity, but new standby servers can be created by K8s until we reach the max value, so the metric that could be more useful to us would be Allocation % = (# active) / (# standby + # active )

[Imads608]

Thanks Javier! I'll take a look and try to make those changes.

[Imads608]

@javier-op , I've made the changes as you suggested.
I'm not sure if I understood your first point on the shadows under the rows when we have multiple nodes.
But I think the other two should be fixed.

Let me know your thoughts!

[javier-op]

Amazing

[Imads608]

Amazing

Thanks! Could you merge?
Seems I don't have permissions haha

[Imads608]

Actually, sorry I think forgot to change the Gauge's configuration to be orange/red from 75-100% instead of 0-25%
That would make more sense to show that for Allocation.

What do you guys think @javier-op / @dgkanatsios

[dgkanatsios]

yeah, let's do it! also, any chance we can show all gauges for all Nodes at the same time? (definitely for a separate PR :D)

[javier-op]

Ah the colors of the gauge, yeah that would make more sense. Could you make a separate pr?

[Imads608]

@javier-op yeah will do!
@dgkanatsios sounds like a great idea :D, maybe I can start to be an open-source contributor for the project instead of just the hackathon :)