Nagios Conference 2014 - Troy Lea - JavaScript and jQuery - Nagios XI Tips, Tricks and How-To

JavaScript and jQuery
Nagios XI Tips, Tricks
and How-To
Troy Lea aka Box293
tlea@nagios.com
Twitter: @box293

Introduction & Agenda
• JavaScript and jQuery … it's the #1 cause of
baldness!
• This presentation explains JavaScript and
jQuery

What is JavaScript?
• It allows you to change the content of the end
users web page
• Called the “client side”
• Can be performed as an action based on a
users selection or particular mouse click
• No need to reload the entire page

What is JavaScript?
• It's FRUSTRATING !!!
https://coderwall.com/p/y8gjbq

What is jQuery?
• A library of functions that make using
JavaScript easier
• jQuery is what
JavaScript should
have been

Time for some code
• We'll start with some basic examples and
expand from there
• WARNING:
<CODE>
ahead

CODE Notes
• Files need to be:
• Mode = Unix (LF)
• Encoding = UTF-8
• This will prevent
headaches

JavaScript Alert – Part 1
index.html
<!doctype html>
<html>
<head>
onclick="say_hello()
"
<meta charset="utf8"
/>
<title>Demo</title>
</head>
<body>
Blah blah blah
<br/><br/>
<input type="button" value="Click Me" onclick="say_hello()">
function say_hello()
{
alert('say hello');
}
<script>
function say_hello() {
alert('say hello');
}
</script>
</body>
</html>
"
{
alert('say hello');
}

index.html
<!doctype html>
<html>
<head>
onclick="say_hello('GDay
Mate')"
/>
Mate')"
<title>Demo</title>
</head>
<body>
Blah blah blah
<br/><br/>
<input type="button" value="Click Me" onclick="say_hello('GDay Mate')">
function <script>
function say_hello(say_input) {
hello(input) {
alert(input);
}
function alert(input);
say_hello(input) {
}
</alert(script>
input);
}
</body>
</html>

Example 1 = Called a function without any values
onclick="say_hello()"
alert('say hello');
}
Example 2 = Called a function sending a value
Mate')"
function say_hello(input) {
alert(input);
}

<SELECT> – JavaScript
var the_element =
document.getElementById(input);
var the_element =
document.getElementById(input);
JavaScript
var the_value =
the_element.options[the_element.selectedIndex]
.value;
var the_value =
the_element.options[the_element.selectedIndex]
.value;
Blah blah blah
<br/><br/>
<select id="id_select">
alert(the_value);
alert(the_value);
<option value="Value A">Value A</option>
<option value="Option 2">Option 2</option>
</select>
<br/><br/>
<input type="button" value="Click Me" onclick="select_value('id_select')">
<script>
function select_value(input) {
var the_element = document.getElementById(input);
var the_value = the_element.options[the_element.selectedIndex].value;
alert(the_value);
}
</script>

<SELECT> – jQuery
<script src="jquery2.1.1.
jQuery
min.js"></script>
<script>
Blah blah blah
<br/><br/>
var the_value = $('#' +
input).val();
alert(the_value);
}
</select>
<br/><br/>
</script>
min.js"></script>
<script>
var the_value = $('#' + input).val();
alert(the_value);
}
</script>
min.js"></script>
<script>
var the_value = $('#' +
input).val();
alert(the_value);
}
</script>

<SELECT> – Summary
Common HTML
JavaScript
<script>
var the_element = document.getElementById(input);
var the_value = the_element.options[the_element.selectedIndex].value;
alert(the_value);
}
</script>
jQuery
min.js"></script>
<script>
alert(the_value);
}
</script>

Separate JavaScript File – Part 1
index.html
<!doctype html>
<html>
<head>
/>
<title>Demo</title>
</head>
<body>
Blah blah blah
<br/><br/>
</select>
<br/><br/>
min.js"></script>
<script src="my_javascript.js"></script>
</body>
</html>

Separate JavaScript File – Part 2
my_javascript.js
alert(the_value);
}
● Separating the JavaScript/jQuery from the
HTML file
●Makes coding easier
● Code works the same

PHP – Time To Get Complicated
● PHP = "PHP: Hypertext Preprocessor"
– It's a recursive backronym!
● Builds HTML code on the fly
● PHP code is between the tags
– <?php
– ?>

PHP – Javascript Alert
index.php
<?php
$output = '
"
<!doctype html>
<html>
<head>
/>
<title>Demo</title>
</head>
<body>
Blah blah blah
<br/><br/>
{
alert('say
hello');
}
<script>
alert('say hello');
}
</script>
</body>
</html>
';
print $output;
?>
"
{
alert('say
hello');
}

PHP – Escaping Quotes Part 1
● PHP Variables use quotes for the variable value
– Single ' OR Double “
$test = 'Hello There and some HTML Code <br />';
OR
$test = "Hello There and some HTML Code <br />";

● Without escaping, PHP thinks the variable is
finished and does not expect the characters
that follow
$test = 'Hey look it's a single quote <br />';
OR
$test = "He said "GDay Mate" <br />";

index.php
<?php
$output = '
<!doctype html>
<html>
<head>
/>
<title>Demo</title>
</head>
<body>
onclick="select_value('id_se
lect')"
Blah blah blah
<br/><br/>
onclick="select_value('id_se
lect')"
</select>
<br/><br/>
min.js"></script>
</body>
</html>
';
print $output;
?>

my_javascript.js
alert(the_value);
}
● In the separate JavaScript file no escaping is
required
● On the previous slide we needed to escape the
single quotes:
● onclick="select_value('id_select')"

● Double quotes = PHP variables are expanded,
which allows the content to change
dynamically
$food_item = "pizza";
$output = "My favorite food is
$food_item";
● $output will now contain:
My favorite food is pizza

● Single quotes = The content between the
single quotes is treated as plain text (literal)
$food_item = 'pizza';
$output = 'My favorite food is
$food_item';
● $output will now contain:
My favorite food is $food_item
$food_item was not not expanded, it was treated
as plain text

● So then why don't I use double quotes like:
● $output = "HTML content";
● Then we won't have to escape those single
quotes right?
● Lets see …

index.php
<?php
$output = "
<!doctype html>
<html>
<head>
/>
<title>Demo</title>
</head>
<body>
Blah blah blah
<br/><br/>
<script>
alert('say hello');
}
</script>
</body>
</html>
";
print $output;
?>

● So now you can see that while I didn't need to
escape two single quotes, I needed to escape
eight double quotes!
● It's not right or wrong … there's just different
ways to do the same thing

Hiding and Showing – Part 1
HTML
<body>
Blah blah blah
<br/><br/>
<option value="one">Strawberry</option>
<option value="two">Grape</option>
<div id="id_one" class="foods"
style="display:none;">
<div id="id_one" class="foods"
</select>
<br/><<input <br/>
img type="src="button" value="foodstrawberry.
Click Me" onclick="show_png">
item('id_select')">
<br/><br/>
</div>
<div id="id_one" class="foods" style="display:none;">
<img src="foodstrawberry.
png">
<</div div>
id="id_two" class="foods"
<div id="id_two" class="foods" style="display:none;">
<<img img src="src="foodgrapes.
foodgrapes.
png">
png">
</div>
</div>
min.js"></script>
</body>
<img src="foodstrawberry.
png">
</div>
<div id="id_two" class="foods"
<img src="foodgrapes.
png">
</div>

Hiding and Showing – Part 2
my_javascript.js
function show_item(input) {
var item_selected = $('#' +
var item_selected = $('#' +
var item_selected = $('#' + input).val();
$('.foods').hide();
$('#id_' + item_selected).show();
}
input).val();
input).val();
$('.foods').hide();
}
$('.foods').hide();
}
First Load Strawberry Grape

What is AJAX?
• A group of technologies
used to implement
web applications
• Communication with a server in the
background
• Does not interfere with the current state of
the page

AJAX Example – Part 1
index.php
<?php
$output = '
<!doctype html>
<html>
<head>
/>
<title>Demo</title>
</head>
<body>
Blah blah blah
<br/><br/>
<div id="id_content">
<!<option this
value="one">Strawberry</option>
<option value="two">Grape</will option>
be populated
</select>
<br/><br/>
<input type="button" value="Click Me" onclick="load_content('id_select')">
<br/><br/>
later >
</div>
<!this
will be populated later >
</div>
min.js"></script>
</body>
</html>
';
print $output;
?>
<!this
will be populated
later >
</div>

my_javascript.js
function load_content(input) {
var item_selected = $('#' + input).val();
var div_to_load = '#id_content';
$(div_to_load).load('content.php?selection=' + item_selected);
}
content.php
<?php
$selection = $_GET['selection'];
if ($selection == 'one') {
$output = '<img src="foodstrawberry.
png">';
}
elseif ($selection == 'two') {
$output = '<img src="foodgrapes.
png">';
}
print $output;
?>

$(div_to_load).load('content.php?selection=' +
item_selected);
● .load() is a jQuery function that performs the
AJAX request
● Server is told to load the page content.php
● “selection” is passed as a variable with the value
of item_selected
● Only the required HTML is generated
● .load() REPLACES the DIV contents

Examples - Conclusion
● These examples have demonstrated simple
HTML and JavaScript/jQuery functionality along
with AJAX
● Next I will
demonstrate how to
use these
technologies in Nagios
XI

Nagios XI
● Component Demo
● GOAL:
● Show a list of hosts
● Select a host, show a list of services for that
host
● Demo code will be made available with the
presentation after the conference

Component Demo - Part 1
Extract from componentdemo.inc.php
case COMPONENT_CONFIGMODE_GETSETTINGSHTML:
$output .= '
Hey there and welcome to the demo!
<br/><br/><br/>
<div id="id_hosts">
<!This
will be populated by the line of script below →
</div>
<script>populate_hosts()</script>
<br/><br/><br/>
<div id="id_services">
<!This
will be populated by the users host selection →
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
Ignore these two buttons below, they are here by default and don't serve
any purpose in this demo.
';
break; /* End case COMPONENT_CONFIGMODE_GETSETTINGSHTML: */

componentdemo.js
function populate_hosts() {
var div_to_load = '#id_hosts';
$
(div_to_load).load('/nagiosxi/includes/components/componentdemo/componentdemo_mis
c.php?request=hosts');
}
function populate_services() {
var div_to_load = '#id_services';
var host_selected = $('#id_nagios_hosts').val();
$
c.php?request=services&host_name=' + encodeURIComponent(host_selected));
}

Extract from componentdemo_misc.php
case 'hosts':
/* Get the hosts */
$args = array(
'is_active' => 1,
'orderby' => 'host_name:a',
);
/* Returns an XML object, this is NOT an array. */
$xmlhosts = get_xml_host_objects($args);
/* Now create a select of the hosts */
$componentdemo_output .= '<select id="id_nagios_hosts">';
foreach($xmlhosts>
host as $h){
#print_r($h>
host_name . " = " . $h>
address . "<br/>");
$componentdemo_output .= '<option value="'.$h>
host_name.'">'.$h>
host_name.'</option>';
} /* End foreach($xmlhosts>
host as $h){ */
$componentdemo_output .= '</select>';
$componentdemo_output .= '
<br/><br/>
<input type="button" value="Get Host's Services"
onclick="populate_services()">
<br/>
';
break; /* End case 'hosts': */

componentdemo.js
$
c.php?request=hosts');
}
$
c.php?request=services&host_name=' + encodeURIComponent(host_selected));
}

case 'services':
/* Get the host name passed to us */
$host_name = urldecode(grab_request_var('host_name',false));
/* Service status fetch, brief listing, sorted by host_name */
$args = array(
'cmd' => 'getservicestatus',
'has_been_checked' => 1,
'host_name' => $host_name,
'is_active' => 1,
'brevity' => 3,
);
/* Returns an XML object, this is NOT an array. */
$statusinfo_services_xml = get_xml_service_status($args);
/* Make sure we've got results to display */
if (count($statusinfo_services_xml>
servicestatus) > 0) {
<table>
<thead><tr><th style="textalign:
left;">Service Name</th><th
style="width:10px;"></th><th style="width:40px;">State</th><th style="textalign:
left;">Status</th></tr></thead>
';
DON'T use
$_GET['xxx']
INSTEAD use
grab_request_var('xxx',false)

foreach($statusinfo_services_xml>
servicestatus as $service) {
$service_name = "$service>
name";
$current_state = "$service>
current_state";
$status_text = "$service>
status_text";
<tr>
<td>'.$service_name.'</td>
<td> </td>
<td style="textalign:
center;">'.$current_state.'</td>
<td>'.$status_text.'</td>
</tr>
';
} /* End foreach($statusinfo_services_xml>
servicestatus as $service)
{ */
$componentdemo_output .= '</table>';
} /* End if (count($statusinfo_services_xml>
servicestatus) > 0) { */
else {
/* This host does not have any services */
$componentdemo_output .= 'This host does not have any services!';
} /* End else { */
break; /* End case 'services': */

● You can see how to access the backend API
to get Nagios objects
● Loading DIV's makes this easy and dynamic

(¯`·._.· Making It Pretty ·._.·´¯)
● Add a spinning logo that will be displayed
when the AJAX calls are being made
● AJAX = Asynchronous = Complications
● AJAX options will make this work consistently
● The AJAX code will appear differently for the
hosts vs services. This demonstrates different
methods of using the jQuery AJAX (required
because of the encodeuri function)

Making It Pretty - Part 1
Extract from componentdemo.inc.php
<div id="id_hosts_throbber" style="display:none">
<br />
'.get_throbber_html().'
</div>
<div id="id_hosts">
<!This
will be populated by the line of script below >
</div>
<script>populate_hosts()</script>
<br/><br/><br/>
<div id="id_services_throbber" style="display:none">
<br />
</div>
<div id="id_services">
<!This
will be populated by the users host selection >
</div>

Extract from componentdemo.js
// This makes an ajax call synchronous
function componentdemo_ajaxSetup() {
$.ajaxSetup({
async: false,
cache: false,
}); // End $.ajaxSetup({
} // End function componentdemo_ajaxSetup() {
var div_throbber_id = '#id_hosts_throbber';
$(div_to_load).hide();
$(div_throbber_id).show();
componentdemo_ajaxSetup();
$
(div_to_load).load('/nagiosxi/includes/components/componentdemo/componentdemo_misc.php?
request=hosts',
function() {
$(div_throbber_id).hide();
$(div_to_load).show();
} // End function() {
); // End $(div_to_load).load(
} // End function populate_hosts() {

●While a list of hosts are retrieved a spinning
logo is shown

Extract from componentdemo.js
// This makes an ajax call synchronous
function componentdemo_ajaxSetup() {
$.ajaxSetup({
async: false,
cache: false,
}); // End $.ajaxSetup({
} // End function componentdemo_ajaxSetup() {
var div_throbber_id = '#id_services_throbber';
$(div_to_load).hide();
$(div_throbber_id).show();
componentdemo_ajaxSetup();
$
(div_to_load).load('/nagiosxi/includes/components/componentdemo/componentdemo_misc.php',
{
'request' : 'services',
'host_name' : encodeURIComponent(host_selected)
},
function() {
$(div_throbber_id).hide();
$(div_to_load).show();
} // End function() {
); // End $(div_to_load).load(
} // End function populate_services() {

●While a list of services are retrieved a spinning
logo is shown

Efficient Coding - Part 1
Example:
Status Info Dashlet

Efficient Coding - Part 2
Extract from the “Status Info Dashlet” available on the Nagios
Exchange
// Define a unique DIV
$statusinfo_inboard_object_container_div = 'statusinfo_inboard_object_container_' .$id;
$output='
<!This
is the DIV that holds the inboard dashlet >
<div id="'.$statusinfo_inboard_object_container_div.'">
</div>
<!create
an anonymous function to refresh the dashlet at the userdefined
interval >
<script type="text/javascript">
<!This
makes the inboard dashlet content do the inital load >
$("#'.
$statusinfo_inboard_object_container_div.'").load("/nagiosxi/includes/dashlets/statusinfo
/statusinfo_inboard.php?
statusinfo_inboard_args='.urlencode(base64_encode(serialize($args))).'");
<!This
makes the inboard dashlet refresh at the userdefined
interval >
setInterval(function() {
$("#'.
$statusinfo_inboard_object_container_div.'").load("/nagiosxi/includes/dashlets/statusinfo
/statusinfo_inboard.php?
statusinfo_inboard_args='.urlencode(base64_encode(serialize($args))).'");
},'.$statusinfo_inboard_refresh_interval.');
</script>
';

Troubleshooting – Part 1
● The smallest error in your JavaScipt / jQuery
code can cause everything to break
● Test frequently – don't code 300 lines in one
chunk otherwise you may spend ages working
out where your issue is
● alert() is a simple method for locating where
the issue is occurring
● console.log() is a better debugging method

● Alert example
● alert('It's working and the value of #id_nagios_hosts is: '' + host_selected + ''');
● Tip: Surround values with quotes (helps identify
when you have a blank value)

● console.log() example
● console.log('It's working and the value of #id_nagios_hosts is: '' + host_selected + ''');
● Depending on your browser, access the
console logs with: F12 or CTRL + SHIFT + J

● Comment out lines of code to disable them
● This can help identify where the issue is without
having to remove the code entirely
● It's two forward slashes //
var div_throbber_id = '#id_hosts_throbber';
alert('I am up to here');
// $(div_to_load).hide();
// $(div_throbber_id).show();
// componentdemo_ajaxSetup();
// $
(div_to_load).load('/nagiosxi/includes/components/componentdemo/componentdemo_misc.php?
request=hosts',
// function() {
// $(div_throbber_id).hide();
// $(div_to_load).show();
// } // End function() {
// ); // End $(div_to_load).load(
} // End function populate_hosts() {

Have A Look At These
AJAX Dependent
Wizards / Components / Dashlets
EMC CLARiiON Monitoring Wizard
Performance Data Tool
Highcharts
Ping Action & Traceroute Action
Google Maps Component & Dashlet
Birdseye

Conclusion
● Don't become a baldness statistic
● Keep that lovely head of hair by knowing
JavaScript/jQuery coding techniques
● Learn by
experimenting … take
baby steps
● Go forth and create
awesome Nagios XI
add-ons!

Questions?
Any questions?
Thanks!

The End
Troy Lea aka Box293
tlea@nagios.com
Twitter: @box293

Nagios Conference 2014 - Troy Lea - JavaScript and jQuery - Nagios XI Tips, Tricks and How-To

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Nagios Conference 2014 - Troy Lea - JavaScript and jQuery - Nagios XI Tips, Tricks and How-To

Similar to Nagios Conference 2014 - Troy Lea - JavaScript and jQuery - Nagios XI Tips, Tricks and How-To (20)

More from Nagios

More from Nagios (20)

Recently uploaded

Recently uploaded (20)

Nagios Conference 2014 - Troy Lea - JavaScript and jQuery - Nagios XI Tips, Tricks and How-To

Editor's Notes