A while ago I came across this page W3Schools How TO - Code snippets for HTML, CSS and JavaScript and it gave me quite a few ideas on how I could improve our customer's overall Orion experience.
So I set out to create a custom Node Health widget that shows a few useful metrics right on the device summary page and came up with this:
And this is the view for a node that is down:
Or unmanaged:
The tiles also change colors based on thresholds (I hard coded the default Orion thresholds, but with a little bit of effort you can add in dynamic thresholds based on custom properties for example): green is normal, yellow for warning and red for critical.
Code is below.
I recommend the W3 Schools How to collection to anyone learning HTML/CSS or who already has a firm grasp of web design or if you are simply searching for inspiration.
A few useful resouces:
W3Schools How TO - Code snippets for HTML, CSS and JavaScript
