Getting Started wth iControl and AJAX

Ever wondered how you could bring the power of iControl to your browser? A little AJAX (Asynchronous Javascript and XML) magic and you'll be well on your way to building a real-time web-based management or monitoring application for your BIG-IP using iControl.

What's probably going to sound strange is that the AJAX part of the web application is the easy part. That's right, AJAX is easy. That's because security restrictions on the XMLHttpRequest object - the heart of AJAX - mean that you can't just write a bunch of client-side JavaScript that makes SOAP calls to iControl. You can't make cross-domain calls via the XMLHttpRequest object and at this time you can't serve up your AJAX-based application from the BIG-IP, which means you're going to need proxy of some kind in order to make this work. This means that there really isn't much to do on the client-side, it's mostly going to be work on the server-side. But if you can build the proxy you can get crazy with iControl and AJAX and make a sweet dashboard that monitors (and even controls, if you like) your BIG-IP in real-time that runs in any browser.

There's two ways to do this.

1. A true proxy. This option simply takes your AJAX requests and passes them onto iControl, no changes necessary. The cool thing about this option is that it can, if you so desire, not only proxy the requests but the transport layer as well. This way you can use HTTP on the browser and HTTPS (as required) on the backend.

2. Mediating proxy. This option requires that you build services that make use of iControl but have some logic and value in themselves as they can essentially encapsulate a process or specific task and wrap it up neatly in a service.

In this article we're going to look at option #2, the mediating proxy, as it's a bit less work to implement the first time around so you can get used to using AJAX and understanding how it interacts with the server.

The mediating proxy gives you some options about how you organize your services on the proxy. For example, you can combine all the API calls necessary to get the information about a particular virtual and call it your "getVIPinformation" service. Basically, you can compose a set of BIG-IP services that can be reused easily and that encapsulate functionality that best fits your needs and organization.

If you prefer to build the services as Web Services, i.e. using SOAP, you can reuse them in other applications as well, such as integrating them into BPM (Business Process Management) solutions so you can automate workflows, extract custom statistics for integration with ESB (Enterprise Service Bus) based orchestrations, or include them more easily in your web-applications to dynamically control the way in which requests are directed to back-end servers.

So while the inherent restrictions of the XMLHttpRequest object make AJAX-based applications that communicate with iControl a little harder to to implement, they can also provide the impetus to build out additional services that can easily be reused across the organization.

What you'll need:

1. The prototype JavaScript library

The Server Side

Before you can get started on the client side, you need a proxy. I like PHP and I've already written some basic services for iControl that will work nicely on the server side for this purpose. The language/environment you use is really irrelevant. AJAX is server-side agnostic; it doesn't care what you use so you can use whatever might be standard in your organization.

While this example returns pre-formatted HTMLfor display in the browser, you could just as easily return JSON, or POX (Plain Old XML), or any other format you wish.

<?
require_once 'SOAP/Client.php';
$soapoptions = array('namespace' => 'urn:iControl');

$wsdl_url = 'http://www.myserver.com/bigip/iControl/sdk/wsdl/LocalLB.VirtualServer.wsdl';
$proxy_parms = array( 'user' => $username, 'pass' => $password);
$client = new SOAP_Client($wsdl_url, true, '', $proxy_parms );
$client->setOpt('curl', CURLOPT_SSL_VERIFYPEER, 0);
$client->setOpt('curl', CURLOPT_SSL_VERIFYHOST, 0);
$params = array();

$response    = $client->call('get_all_statistics', $params, $soapoptions);

if (PEAR::isError($response)) {
        print "an error occurred in the call " . $response;
}
else {
$soapoptions = array('namespace' => 'urn:iControl:LocalLB/Pool');
$wsdl_url = 'http://www.myserver.com/bigip/iControl/sdk/wsdl/LocalLB.Pool.wsdl';

$client2 = new SOAP_Client($wsdl_url, true, '', $proxy_parms );
$client2->setOpt('curl', CURLOPT_SSL_VERIFYPEER, 0);
$client2->setOpt('curl', CURLOPT_SSL_VERIFYHOST, 0);

while (list ($key, $val) = each ($response)) {
while (list ($key2,$val2) = each ($val) ) {
while (list ($key3,$val3) = each ($val2) ) {
    if ($key3 == "virtual_server") {
        $virtualserver = $val3->name;
        $vaddy = $val3->address;
        $vport = $val3->port;
        $vproto = $val3->protocol;
        echo "<b>$virtualserver</b><br/><b>$vaddy:$vport</b><br/><b>$vproto</b><br/>    ";

    } else {
        // it's statistics
        echo "<table style='width:300px; padding: 5px; margin:5px;'>";
        foreach ($val3 as $statistic) {
                if ($statistic->type == "STATISTIC_TOTAL_REQUESTS") {
                        $bob = $statistic->value;
                        $total = ($bob->high << 16 ) | $bob->low;
                        echo "<tr><td>Total Requests</td><td>$total</td></tr>";
                }
                if ($statistic->type == "STATISTIC_CLIENT_SIDE_CURRENT_CONNECTIONS") {
                        $bob = $statistic->value;
                        $total = ($bob->high << 16 ) | $bob->low;
                        echo "<tr><td>Current Connections</td><td>$total</td></tr>";
                }
        }
        echo "</table>";
    }
}
}
}
}
?>

The Client Side

The client (browser) side of the equation is quite simple, owing to a nifty little AJAX library called prototype that wraps up the XMLHttpRequest with some easy to use utilities. prototype handles the actual AJAX calls with alacrity and gives you some nice options including the ability to "refresh" the call every X seconds, which makes building a real-time display a breeze.

In order to make your dashboard flashy (this one definitely isn't!) you'll need to brush up on your HTML, DHTML, and CSS skillz or grab a UI toolkit like Dojo or DHTML Suite or script.aculo.us.

The following HTML/JavaScript calls the proxy and then updates the web page with the response every ten seconds. This technique requires that a <div> element with an id be present in the page as the prototype call will update this <div> with the response from the proxy. If you need to parse the data there are other calls you can use which allow you to specify a callback function in which you can parse the data and present it as desired.

<html>
<head>

<script src="prototype.js" type='text/javascript' />

<script>

new Ajax.PeriodicalUpdater("icontrolresponse", 
"http://www.myserver.com/bigip/getVirtuals.php?username=viewer&password=viewer",{frequency: 10, decay: 1, method: 'get'} );

</script>

</head>

<body>
<div id="icontrolresponse">
</div>
</body>
</html>

That's all there is it to it. Next time we'll look at option #1: the "true" proxy.

Happy Coding!