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 ...
What is JavaScript?
• It allows you to change the content of the end
users web page
• Called the “client side”
• Can b...
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 be...
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="utf­8"
/>...
JavaScript Alert – Part 2
index.html
<!doctype html>
<html>
<head>
onclick="say_hello('GDay
Mate')"
onclick="say_he...
JavaScript Alert – Part 3
Example 1 = Called a function without any values
onclick="say_hello()"
function say_hello() {...
Quick Break
<SELECT> – JavaScript
var the_element =
document.getElementById(input);
var the_element =
document.getElementById(inpu...
<SELECT> – jQuery
<script src="jquery­2.1.1.
jQuery
<script src="jquery­2.1.1.
min.js"></script>
<script>
function s...
<SELECT> – Summary
Common HTML
<input type="button" value="Click Me" onclick="select_value('id_select')">
JavaScript
<...
Quick Break
Separate JavaScript File – Part 1
index.html
<!doctype html>
<html>
<head>
<meta charset="utf­8"
/>
<title>Demo</ti...
Separate JavaScript File – Part 2
my_javascript.js
function select_value(input) {
var the_value = $('#' + input).val();...
Quick Break
PHP – Time To Get Complicated
● PHP = "PHP: Hypertext Preprocessor"
– It's a recursive backronym!
● Builds HTML code on...
PHP – Javascript Alert
index.php
<?php
$output = '
onclick="say_hello()
"
<!doctype html>
<html>
<head>
<meta cha...
PHP – Escaping Quotes Part 1
● PHP Variables use quotes for the variable value
– Single ' OR Double “
$test = 'Hello Th...
PHP – Escaping Quotes Part 2
● Without escaping, PHP thinks the variable is
finished and does not expect the characters ...
PHP – Escaping Quotes Part 3
index.php
<?php
$output = '
<!doctype html>
<html>
<head>
<meta charset="utf­8"
/>
<...
PHP – Escaping Quotes Part 4
my_javascript.js
function select_value(input) {
var the_value = $('#' + input).val();
ale...
PHP – Escaping Quotes Part 5
● Double quotes = PHP variables are expanded,
which allows the content to change
dynamical...
PHP – Escaping Quotes Part 6
● Single quotes = The content between the
single quotes is treated as plain text (literal) ...
PHP – Escaping Quotes Part 7
● So then why don't I use double quotes like:
● $output = "HTML content";
● Then we won't ...
PHP – Escaping Quotes Part 8
index.php
<?php
$output = "
<!doctype html>
<html>
<head>
<meta charset="utf­8"
/>
<...
PHP – Escaping Quotes Part 9
● So now you can see that while I didn't need to
escape two single quotes, I needed to esca...
Quick Break
Hiding and Showing – Part 1
HTML
<body>
Blah blah blah
<br/><br/>
<select id="id_select">
<option value="one">Strawb...
Hiding and Showing – Part 2
my_javascript.js
function show_item(input) {
function show_item(input) {
var item_selected...
Quick Break
What is AJAX?
• A group of technologies
used to implement
web applications
• Communication with a server in the
backg...
AJAX Example – Part 1
index.php
<?php
$output = '
<!doctype html>
<html>
<head>
<meta charset="utf­8"
/>
<title>D...
AJAX Example – Part 2
my_javascript.js
function load_content(input) {
var item_selected = $('#' + input).val();
var di...
AJAX Example – Part 3
$(div_to_load).load('content.php?selection=' +
item_selected);
● .load() is a jQuery function tha...
Examples - Conclusion
● These examples have demonstrated simple
HTML and JavaScript/jQuery functionality along
with AJA...
Nagios XI
● Component Demo
● GOAL:
● Show a list of hosts
● Select a host, show a list of services for that
host
● D...
Component Demo - Part 1
Extract from componentdemo.inc.php
case COMPONENT_CONFIGMODE_GETSETTINGSHTML:
$output .= '
Hey...
Component Demo - Part 2
componentdemo.js
function populate_hosts() {
var div_to_load = '#id_hosts';
$
(div_to_load).l...
Component Demo - Part 3
Extract from componentdemo_misc.php
case 'hosts':
/* Get the hosts */
$args = array(
'is_acti...
Component Demo - Part 4
componentdemo.js
function populate_hosts() {
var div_to_load = '#id_hosts';
$
(div_to_load).l...
Component Demo - Part 5
Extract from componentdemo_misc.php
case 'services':
/* Get the host name passed to us */
$hos...
Component Demo - Part 6
Extract from componentdemo_misc.php
foreach($statusinfo_services_xml­>
servicestatus as $servic...
Component Demo - Part 7
● You can see how to access the backend API
to get Nagios objects
● Loading DIV's makes this ea...
Quick Break
(¯`·._.· Making It Pretty ·._.·´¯)
● Add a spinning logo that will be displayed
when the AJAX calls are being made
● AJ...
Making It Pretty - Part 1
Extract from componentdemo.inc.php
<div id="id_hosts_throbber" style="display:none">
<br />
...
Making It Pretty - Part 2
Extract from componentdemo.js
// This makes an ajax call synchronous
function componentdemo_a...
Making It Pretty - Part 3
●While a list of hosts are retrieved a spinning
logo is shown
Making It Pretty - Part 4
Extract from componentdemo.js
// This makes an ajax call synchronous
function componentdemo_a...
Making It Pretty - Part 5
●While a list of services are retrieved a spinning
logo is shown
Quick Break
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 DI...
Quick Break
Troubleshooting – Part 1
● The smallest error in your JavaScipt / jQuery
code can cause everything to break
● Test freq...
Troubleshooting – Part 2
● Alert example
● alert('It's working and the value of #id_nagios_hosts is: '' + host_selected ...
Troubleshooting – Part 3
● console.log() example
● console.log('It's working and the value of #id_nagios_hosts is: '' + ...
Troubleshooting – Part 4
● Comment out lines of code to disable them
● This can help identify where the issue is without...
Quick Break
Have A Look At These
AJAX Dependent
Wizards / Components / Dashlets
EMC CLARiiON Monitoring Wizard
Performance Data To...
Conclusion
● Don't become a baldness statistic
● Keep that lovely head of hair by knowing
JavaScript/jQuery coding tech...
Questions?
Any questions?
Thanks!
The End
Troy Lea aka Box293
tlea@nagios.com
Twitter: @box293
of 66

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

Troy Lea's presentation on JavaScript and jQuery - Nagios XI Tips, Tricks and How-To. The presentation was given during the Nagios World Conference North America held Oct 13th - Oct 16th, 2014 in Saint Paul, MN. For more information on the conference (including photos and videos), visit: http://go.nagios.com/conference
Published on: Mar 3, 2016
Published in: Technology      
Source: www.slideshare.net


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

  • 1. JavaScript and jQuery Nagios XI Tips, Tricks and How-To Troy Lea aka Box293 tlea@nagios.com Twitter: @box293
  • 2. Introduction & Agenda • JavaScript and jQuery … it's the #1 cause of baldness! • This presentation explains JavaScript and jQuery
  • 3. 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
  • 4. What is JavaScript? • It's FRUSTRATING !!! https://coderwall.com/p/y8gjbq
  • 5. What is jQuery? • A library of functions that make using JavaScript easier • jQuery is what JavaScript should have been
  • 6. Time for some code • We'll start with some basic examples and expand from there • WARNING: <CODE> ahead
  • 7. CODE Notes • Files need to be: • Mode = Unix (LF) • Encoding = UTF-8 • This will prevent headaches
  • 8. JavaScript Alert – Part 1 index.html <!doctype html> <html> <head> onclick="say_hello() " <meta charset="utf­8" /> <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> onclick="say_hello() " function say_hello() { alert('say hello'); }
  • 9. JavaScript Alert – Part 2 index.html <!doctype html> <html> <head> onclick="say_hello('GDay Mate')" onclick="say_hello('GDay <meta charset="utf­8" /> 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>
  • 10. JavaScript Alert – Part 3 Example 1 = Called a function without any values onclick="say_hello()" function say_hello() { alert('say hello'); } Example 2 = Called a function sending a value onclick="say_hello('GDay Mate')" function say_hello(input) { alert(input); }
  • 11. Quick Break
  • 12. <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>
  • 13. <SELECT> – jQuery <script src="jquery­2.1.1. jQuery <script src="jquery­2.1.1. min.js"></script> <script> function select_value(input) { Blah blah blah <br/><br/> <select id="id_select"> var the_value = $('#' + <option value="Value A">Value A</option> <option value="Option 2">Option 2</option> input).val(); alert(the_value); } </select> <br/><br/> <input type="button" value="Click Me" onclick="select_value('id_select')"> </script> <script src="jquery­2.1.1. min.js"></script> <script> function select_value(input) { var the_value = $('#' + input).val(); alert(the_value); } </script> min.js"></script> <script> function select_value(input) { var the_value = $('#' + input).val(); alert(the_value); } </script>
  • 14. <SELECT> – Summary Common HTML <input type="button" value="Click Me" onclick="select_value('id_select')"> JavaScript <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> jQuery <script src="jquery­2.1.1. min.js"></script> <script> function select_value(input) { var the_value = $('#' + input).val(); alert(the_value); } </script>
  • 15. Quick Break
  • 16. Separate JavaScript File – Part 1 index.html <!doctype html> <html> <head> <meta charset="utf­8" /> <title>Demo</title> </head> <body> Blah blah blah <br/><br/> <select id="id_select"> <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 src="jquery­2.1.1. min.js"></script> <script src="my_javascript.js"></script> </body> </html>
  • 17. Separate JavaScript File – Part 2 my_javascript.js function select_value(input) { var the_value = $('#' + input).val(); alert(the_value); } ● Separating the JavaScript/jQuery from the HTML file ●Makes coding easier ● Code works the same
  • 18. Quick Break
  • 19. 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 – ?>
  • 20. PHP – Javascript Alert index.php <?php $output = ' onclick="say_hello() " <!doctype html> <html> <head> <meta charset="utf­8" /> <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> '; print $output; ?> onclick="say_hello() " function say_hello() { alert('say hello'); }
  • 21. 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 />";
  • 22. PHP – Escaping Quotes Part 2 ● 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 />";
  • 23. PHP – Escaping Quotes Part 3 index.php <?php $output = ' <!doctype html> <html> <head> <meta charset="utf­8" /> <title>Demo</title> </head> <body> onclick="select_value('id_se lect')" Blah blah blah <br/><br/> <select id="id_select"> onclick="select_value('id_se lect')" <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 src="jquery­2.1.1. min.js"></script> <script src="my_javascript.js"></script> </body> </html> '; print $output; ?>
  • 24. PHP – Escaping Quotes Part 4 my_javascript.js function select_value(input) { var the_value = $('#' + input).val(); 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')"
  • 25. PHP – Escaping Quotes Part 5 ● 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
  • 26. PHP – Escaping Quotes Part 6 ● 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
  • 27. PHP – Escaping Quotes Part 7 ● 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 …
  • 28. PHP – Escaping Quotes Part 8 index.php <?php $output = " <!doctype html> <html> <head> <meta charset="utf­8" /> <title>Demo</title> </head> <body> Blah blah blah <br/><br/> <input type="button" value="Click Me" onclick="say_hello()"> <script> function say_hello() { alert('say hello'); } </script> </body> </html> "; print $output; ?>
  • 29. PHP – Escaping Quotes Part 9 ● 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
  • 30. Quick Break
  • 31. Hiding and Showing – Part 1 HTML <body> Blah blah blah <br/><br/> <select id="id_select"> <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" style="display:none;"> </select> <br/><<input <br/> img type="src="button" value="food­strawberry. Click Me" onclick="show_png"> item('id_select')"> <br/><br/> </div> <div id="id_one" class="foods" style="display:none;"> <img src="food­strawberry. png"> <</div div> id="id_two" class="foods" style="display:none;"> <div id="id_two" class="foods" style="display:none;"> <<img img src="src="food­grapes. food­grapes. png"> png"> </div> </div> <script src="jquery­2.1.1. min.js"></script> <script src="my_javascript.js"></script> </body> <img src="food­strawberry. png"> </div> <div id="id_two" class="foods" style="display:none;"> <img src="food­grapes. png"> </div>
  • 32. Hiding and Showing – Part 2 my_javascript.js function show_item(input) { function show_item(input) { var item_selected = $('#' + function show_item(input) { var item_selected = $('#' + var item_selected = $('#' + input).val(); $('.foods').hide(); $('#id_' + item_selected).show(); } input).val(); input).val(); $('.foods').hide(); $('#id_' + item_selected).show(); } $('.foods').hide(); $('#id_' + item_selected).show(); } First Load Strawberry Grape
  • 33. Quick Break
  • 34. 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
  • 35. AJAX Example – Part 1 index.php <?php $output = ' <!doctype html> <html> <head> <meta charset="utf­8" /> <title>Demo</title> </head> <body> Blah blah blah <br/><br/> <select id="id_select"> <div id="id_content"> <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> <div id="id_content"> <!­­this will be populated later ­­> </div> <script src="jquery­2.1.1. min.js"></script> <script src="my_javascript.js"></script> </body> </html> '; print $output; ?> <!­­this will be populated later ­­> </div>
  • 36. AJAX Example – Part 2 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="food­strawberry. png">'; } elseif ($selection == 'two') { $output = '<img src="food­grapes. png">'; } print $output; ?>
  • 37. AJAX Example – Part 3 $(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
  • 38. 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
  • 39. 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
  • 40. 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: */
  • 41. Component Demo - Part 2 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(); $ (div_to_load).load('/nagiosxi/includes/components/componentdemo/componentdemo_mis c.php?request=services&host_name=' + encodeURIComponent(host_selected)); }
  • 42. Component Demo - Part 3 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': */
  • 43. Component Demo - Part 4 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(); $ (div_to_load).load('/nagiosxi/includes/components/componentdemo/componentdemo_mis c.php?request=services&host_name=' + encodeURIComponent(host_selected)); }
  • 44. Component Demo - Part 5 Extract from componentdemo_misc.php 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) { $componentdemo_output .= ' <table> <thead><tr><th style="text­align: left;">Service Name</th><th style="width:10px;"></th><th style="width:40px;">State</th><th style="text­align: left;">Status</th></tr></thead> '; DON'T use $_GET['xxx'] INSTEAD use grab_request_var('xxx',false)
  • 45. Component Demo - Part 6 Extract from componentdemo_misc.php foreach($statusinfo_services_xml­> servicestatus as $service) { $service_name = "$service­> name"; $current_state = "$service­> current_state"; $status_text = "$service­> status_text"; $componentdemo_output .= ' <tr> <td>'.$service_name.'</td> <td> </td> <td style="text­align: 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': */
  • 46. Component Demo - Part 7 ● You can see how to access the backend API to get Nagios objects ● Loading DIV's makes this easy and dynamic
  • 47. Quick Break
  • 48. (¯`·._.· 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)
  • 49. 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 /> '.get_throbber_html().' </div> <div id="id_services"> <!­­This will be populated by the users host selection ­­> </div>
  • 50. Making It Pretty - Part 2 Extract from componentdemo.js // This makes an ajax call synchronous function componentdemo_ajaxSetup() { $.ajaxSetup({ async: false, cache: false, }); // End $.ajaxSetup({ } // End function componentdemo_ajaxSetup() { function populate_hosts() { var div_to_load = '#id_hosts'; 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() {
  • 51. Making It Pretty - Part 3 ●While a list of hosts are retrieved a spinning logo is shown
  • 52. Making It Pretty - Part 4 Extract from componentdemo.js // This makes an ajax call synchronous function componentdemo_ajaxSetup() { $.ajaxSetup({ async: false, cache: false, }); // End $.ajaxSetup({ } // End function componentdemo_ajaxSetup() { function populate_services() { var div_to_load = '#id_services'; var host_selected = $('#id_nagios_hosts').val(); 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() {
  • 53. Making It Pretty - Part 5 ●While a list of services are retrieved a spinning logo is shown
  • 54. Quick Break
  • 55. Efficient Coding - Part 1 Example: Status Info Dashlet
  • 56. 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.'"> '.get_throbber_html().' </div> <!­­create an anonymous function to refresh the dashlet at the user­defined 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 user­defined 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> ';
  • 57. Quick Break
  • 58. 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
  • 59. Troubleshooting – Part 2 ● 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)
  • 60. Troubleshooting – Part 3 ● 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
  • 61. Troubleshooting – Part 4 ● 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 // function populate_hosts() { var div_to_load = '#id_hosts'; 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() {
  • 62. Quick Break
  • 63. 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
  • 64. 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!
  • 65. Questions? Any questions? Thanks!
  • 66. The End Troy Lea aka Box293 tlea@nagios.com Twitter: @box293

Related Documents