cancel
Showing results for 
Search instead for 
Did you mean: 
Create Post

Custom Node Health widget

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:

node_UP.JPG

And this is the view for a node that is down:

node_DOWN.JPG

Or unmanaged:

node_UNMAN.JPG

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

HTML Tutorial

CSS Tutorial

JavaScript Tutorial

Font Awesome

Labels (3)
Attachments
Comments

Hi @ioan_bucsa,

Would you please share with us how to implement this?

Thanks in advance.

@Deltona 

Code is attached. Just paste it in a Custom HTML widget and you should be go.

Thanks for this 😀

I think I'm missing something.  I copied and pasted the code into a custom HTML and waiting about 30 min and everything still shows no data.  Is there something else we need to do besides copy and past?

I'm also not getting any data in the resource after an extended wait. is this working for anyone else?

@ioan_bucsa  

I copied the code into the HTML widget, but no data has been displayed. Do you need to do anything else?

1.png

@keegen Are you running 2020.2? I haven't upgrade yet and it runs on 2019.4 without any issues.

Maybe check the browser debug console to see the error message that you are getting.

Hi all,

i had the same issue.

Seems like if you copy it out of the file @ioan_bucsa provided, it does something weird with the newlines in the swql statement.

Just edit the file and set the 

var swql = "SELECT REPLACE(n.StatusIcon,'.gif','') as Status, CASE REPLACE(n.StatusIcon,'.gif','') WHEN 'Down' THEN CONCAT(FLOOR((minutediff(n.LASTSYSTEMUPTIMEPOLLUTC,getutcdate())/60.0)/24),' d ', FLOOR(round((minutediff(n.LASTSYSTEMUPTIMEPOLLUTC,getutcdate())/60.0),1) - FLOOR((minutediff(n.LASTSYSTEMUPTIMEPOLLUTC,getutcdate())/60.0)/24)*24), ' h ', FLOOR((round((minutediff(n.LASTSYSTEMUPTIMEPOLLUTC,getutcdate())/60.0),1) - FLOOR((minutediff(n.LASTSYSTEMUPTIMEPOLLUTC,getutcdate())/60.0)))*60), ' m') WHEN 'Unmanaged' THEN CONCAT(FLOOR((minutediff(n.UnManageFrom,getutcdate())/60.0)/24),' d ', FLOOR(round((minutediff(n.UnManageFrom,getutcdate())/60.0),1) - FLOOR((minutediff(n.UnManageFrom,getutcdate())/60.0)/24)*24), ' h ', FLOOR((round((minutediff(n.UnManageFrom,getutcdate())/60.0),1) - FLOOR((minutediff(n.UnManageFrom,getutcdate())/60.0)))*60), ' m') ELSE '0' END AS Since, n.ResponseTimeHistory.AvgResponseTime as ResponseTime, n.ResponseTimeHistory.PercentLoss as PacketLoss,n.PercentMemoryUsed as Memory, n.CPULoad as CPU FROM Orion.Nodes n WHERE n.ResponseTimeHistory.DateTime = (SELECT Max(Datetime) as Maxdate FROM Orion.ResponseTime WHERE NodeId= ${NodeId}) AND n.NodeId= ${NodeId} "

 

in one single line.

That just fixed it for me.

 

@ioan_bucsa Awesome work on that widget!

 

Best Regards

Rene

Version history
Revision #:
1 of 1
Last update:
‎06-01-2020 11:49 AM
Updated by: