Embed node status in public web page

The forum for help and support with FreeNATS as well as any useful hints and tips
Post Reply
paullanders
Posts: 92
Joined: Thu Sep 04, 2008 9:48 pm

Embed node status in public web page

Post by paullanders » Sat Apr 24, 2010 11:32 pm

Hi Dave! It's been a while since I've posted :-)

I would like to embed in a public web page the status of a few selected nodes. This would allow everyone to see the current up/down status. I've studied the API page in the wiki, but I am a newbie in javascripting. Can you assist me in generating the code to do this?

Thanks!

Paul

dave
Site Admin
Posts: 260
Joined: Fri May 30, 2008 9:09 pm
Location: UK
Contact:

Re: Embed node status in public web page

Post by dave » Sun Apr 25, 2010 12:52 am

Hi Paul,

Good to hear from you.

There are two ways to accomplish what you're after. The easiest way is to use views but you can also use the Data API.

A view is configured within FreeNATS itself and then just a single line of code is added to your web page. The advantage of this method is that you can control what is displayed easily from within the interface without having to alter any code and the nice colours etc can be displayed.

The API is the solution if you want to deal programatically for example to actually display your own output dependent on the output of the status requests from FreeNATS.

In the example below I show both methods - first displaying a view with the view id of 123 and then calling the API with the key of wibble (see the API docs for details of how the security works).

I always tend to use views unless I really need to do something clever with the data. In quite a few implementations I use "cascading views" where a user can click on a node and just be shown a more detailed view without going into the actual interface e.g.

Have two views (1 and 2) for the nodes bob and fred
These are both "simple" views (you can turn off most formatting) just with a single node status
Each of these links to another view (3 and 4) showing much more detailed output for the nodes in question
The web page then just includes/shows view 1 and 2

Anyway I hope the example below is easy enough to cut+paste for your purposes:

Code: Select all

<HTML>
<BODY>
<H1>View Example</H1>
This is simply how to include a view into a page...<BR />

<SCRIPT TYPE="text/javascript" SRC="http://freenats/view.php?viewid=123&mode=js"></SCRIPT>

<BR /><BR />

<H1>API Example</H1>
<DIV ID="status_div"></DIV>

<SCRIPT TYPE="text/javascript">
function HandleData( data ) // this function handles the data when it is returned
{
var output="";
// loop through the returned nodes
for (i=0; i<data.length; i++)
	{ // for each node
	for (z=0; z<data[i].length; z++)
		{
		if (data[i][z][0]=="nodename") output = output + data[i][z][1]+": ";
		else if (data[i][z][0]=="alertlevel") // this is the alertlevel of the node
			{
			if (data[i][z][1]=="-1") output = output + "Untested";
			else if (data[i][z][1]=="0") output = output + "Ok";
			else if (data[i][z][1]=="1") output = output + "Warning";
			else if (data[i][z][1]=="2") output = output + "Failed";
			else output = output + "Unknown";
			}
		}
	output = output + "<BR />";
	}
// now write the output to the screen
document.getElementById('status_div').innerHTML = output;

}

// Now we actually do the call to get the data

var url="http://freenats/api.php?mode=js"; // URL of FreeNATS and mode JavaScript
url=url+"&apikey=wibble"; // the API key
  
url=url+"&query[0]=node"; // first query (0) for the node bob
url=url+"&param[0]=bob";

url=url+"&query[1]=node"; // second query (1) for the node fred
url=url+"&param[1]=fred";

url=url+"&callback=HandleData"; // the callback handler we defined above


var output="";

output=unescape("%3Cscript src='");
output=output+url;

output=output+"' ";
output=output+"type='";
output=output+"text/javascript'";
output=output+unescape("%3E%3C/script%3E");
document.write(output);

</SCRIPT>

</BODY></HTML>
Cheers,

Dave.

Post Reply