jQuery code for displaying server status from XML feed

Question

I am using the below jQuery and HTML to read in and use an XML server status feed for a server widget. This is the code:

XML Feed:

<status>
<script id="tinyhippos-injected"/>
<serverinfo>
<hostname>harvey</hostname>
<external>
http://stats.pingdom.com/3tltrr03waho/1435422/history
</external>
</serverinfo>
<host>
<status>OK</status>
</host>
<service>
<http>OK</http>
<ftp>OK</ftp>
<mysql>OK</mysql>
<pop>OK</pop>
<imap>OK</imap>
<smtp>OK</smtp>
<load>OK</load>
</service>
</status>

jQuery:

$(document).ready(function() { 
 $.ajax({ 
 type: 'GET',
 url: 'https://status.clook.net/xml/status/harvey.xml',
 dataType: 'xml', 
 success: function(xml){
 var http = $(xml).find('http').text();
 var ftp = $(xml).find('ftp').text();
 var mysql = $(xml).find('mysql').text();
 var load = $(xml).find('load').text();
 if(http == 'OK') {
 $(".http img").attr("src","http://placehold.it/40/00cc33/ffffff");
 }
 else if(http == 'WARNING') {
 $(".http img").attr("src","http://placehold.it/40/ff6600/000000");
 }
 else if(http == 'CRITICAL') {
 $(".http img").attr("src","http://placehold.it/40/ff0000/000000");
 }
 if(ftp == 'OK') {
 $(".ftp img").attr("src","http://placehold.it/40/00cc33/ffffff");
 }
 else if(ftp == 'WARNING') {
 $(".ftp img").attr("src","http://placehold.it/40/ff6600/000000");
 }
 else if(ftp == 'CRITICAL') {
 $(".ftp img").attr("src","http://placehold.it/40/ff0000/000000");
 }
 if(mysql == 'OK') {
 $(".mysql img").attr("src","http://placehold.it/40/00cc33/ffffff");
 }
 else if(mysql == 'WARNING') {
 $(".mysql img").attr("src","http://placehold.it/40/ff6600/000000");
 }
 else if(mysql == 'CRITICAL') {
 $(".mysql img").attr("src","http://placehold.it/40/ff0000/000000");
 }
 if(load == 'OK') {
 $(".load img").attr("src","http://placehold.it/40/00cc33/ffffff");
 }
 else if(load == 'WARNING') {
 $(".load img").attr("src","http://placehold.it/40/ff6600/000000");
 }
 else if(load == 'CRITICAL') {
 $(".load img").attr("src","http://placehold.it/40/ff0000/000000");
 }
 }
 });
});

HTML:

<div class="container">
<h3>Server Status Widget</h3>
 <h4>Hosting Server</h4>
<p><strong>HTTP: </strong><span class="http"><img src="http://placehold.it/40" alt="" /></span></p>
<p><strong>FTP: </strong><span class="ftp"><img src="http://placehold.it/40" alt="" /></span></p>
<p><strong>MySQL: </strong><span class="mysql"><img src="http://placehold.it/40" alt="" /></span></p>
<p><strong>Load: </strong><span class="load"><img src="http://placehold.it/40" alt="" /></span></p>
</div>

The statuses can be either OK, WARNING, CRITICAL or UNKNOWN. I was going to use the default src in the HTML as the UNKNOWN image.

I would appreciate any feedback on the jQuery - it is really wordy and I am sure can be improved. All works fine currently.

Answer 1

Here is a proposition. The idea is to define an object that maps the property (http, ftp...) with related images url indexed by possible property values (OK, WARNING,...).

With this approach :

• get the img src for a service : object[service_name][service_status]
• get the service status : $(xml).find(service_name).text()
• get the img dom element $("." + service_name + " img")

Code :

 $(document).ready(function() { 
 var config = {
 "http":{
 "OK":"http://placehold.it/40/00cc33/ffffff",
 "WARNING":"http://placehold.it/40/ff6600/000000",
 "CRITICAL":"http://placehold.it/40/ff0000/000000",
 "UNKNOWN":"/path/to/unknow"
 },
 "ftp":{
 "OK":"http://placehold.it/40/00cc33/ffffff",
 "WARNING":"http://placehold.it/40/ff6600/000000",
 "CRITICAL":"http://placehold.it/40/ff0000/000000",
 "UNKNOWN":"/path/to/unknow"
 },
 "mysql":{
 "OK":"http://placehold.it/40/00cc33/ffffff",
 "WARNING":"http://placehold.it/40/ff6600/000000",
 "CRITICAL":"http://placehold.it/40/ff0000/000000",
 "UNKNOWN":"/path/to/unknow"
 },
 "load":{
 "OK":"http://placehold.it/40/00cc33/ffffff",
 "WARNING":"http://placehold.it/40/ff6600/000000",
 "CRITICAL":"http://placehold.it/40/ff0000/000000",
 "UNKNOWN":"/path/to/unknow"
 }
 };
 function refreshView (xml) {
 for (var name in config) {
 $("." + name +" img").attr("src",config[name][$(xml).find(name).text()] );
 } 
 }
 $.ajax({ 
 type: 'GET',
 url: 'https://status.clook.net/xml/status/harvey.xml',
 dataType: 'xml', 
 success: refreshView
 });
 });

You can simplify if status images are the same for all services.

var img = {
 "OK":"http://placehold.it/40/00cc33/ffffff",
 "WARNING":"http://placehold.it/40/ff6600/000000",
 "CRITICAL":"http://placehold.it/40/ff0000/000000",
 "UNKNOWN":"/path/to/unknow"
}
var services = ['http','ftp','mysql']
function refreshView (xml) {
 for (var i=0; i<services.length; i++) {
 $("." + services[i] +" img").attr("src",img[ $(xml).find(services[i]).text()] );
 }
}

• Mike Harrison: Thanks, that looks like a great approach. The OK, WARNING, CRITICAL and UNKNOWN images are actually always the same, does this mean the config could be slimmed down?
• RafH: yes, look at the edit
• Sjoerd Job Postmus: Instead of rewriting the code all together, maybe it would help if you could also comment on the original code as given. What is good about it, what could need some change? How did you transform the original code into this?