Skip to main content
DevOps Image

This post is from the XebiaLabs blog and has not been updated since the original publish date.

Last Updated Aug 04, 2015 — DevOps Expert

A Little Mobile Web App to Monitor XL Deploy Tasks


With XL Deploy you can automate your deployments, so you don't even need to be around during the deployment itself.  Sometimes though, you might want to check on the status of a deployment from your phone. With that in mind I have developed a little example mobile web app to allow you to see the XL Deploy task list on your phone.  You will need an active XL Deploy server and access to an Apache web server to host the application.

First we need to make the XL Deploy REST api available from our phone.  To do this we can configure a proxy in Apache as follows:

ProxyRequests On ProxyPreserveHost On ProxyErrorOverride On
<Proxy balancer://deployit>      BalancerMember http://localhost:4516      Order Deny,Allow      Deny from none      Allow from all </Proxy> ProxyPass /deployit        balancer://deployit/deployit

We can put this in /etc/httpd/conf.d/xld-api.conf.  This will allow all traffic coming to the Apache web server on URI /deployit to be proxied through to the XL Deploy server.  The next step is to create a mobile web site.  I have created this web site using jQuery Mobile.  There is one html file that needs to be created and some javascript files.  Our html file is as follows:

!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script src=""></script> <script src=""></script> <script src="js/authentication.js"></script> <script src="js/xld-tasks.js"></script> </head> <body> <!-- =============================================== --> <div data-role="page" id="login">   <div data-role="header">     <h1>Welcome To XL Deploy Task Monitor</h1>   </div>   <div data-role="main" class="ui-content">    <p>login form</p>    <form method="post" id="loginForm">        <label for="myUsername">Username:</label>        <input name="myUsername" id="myUsername" value="" type="text">        <label for="myPassword">Password:</label>        <input name="myPassword" id="myPassword" value="" type="password">    </form>    <button class="ui-btn ui-corner-all" onClick="authenticate();">Login</button>    <a href="#home" class="ui-btn ui-corner-all">Task List</a>   </div> </div> <!-- =============================================== -->
<div data-role="page" id="home">   <div data-role="header">     <h1>Welcome To XL Deploy Task Monitor</h1>   </div>   <div data-role="main" class="ui-content">     <div id="taskList" data-role="collapsibleset" "data-content-theme="a" data-iconpos='right'>     </div>     <button onClick='getAllTasks();' class="ui-btn">Load Details</button>   </div> </div> <!-- =============================================== --> <script> $(document).ready(function(){ }); </script> </body> </html>

The html file defines out login screen and the task list screen.  After we have the html file we will need some code to make things happen.  Up at the top of the html file we included two JavaScript files.  The first one is authentication.js.  We use this file because in XL Deploy only privileged users can see the task list.  Since we will be allowing people to login to the mobile web page and we don't really want to get those users privileged access in XL Deploy we proxy those privileges here.  The next JavaScript file handles the actions associated with interacting with the XL Deploy server.  The xld-tasks.js is as follows:

var myUsername=""; var myPassword=""; function getFormData(dom_query) {     var out = {};     var s_data = $(dom_query).serializeArray();     //transform into simple data/value object     for(var i = 0; i<s_data.length; i++) {         var record = s_data[i];         out[] = record.value;     }     return out; } function authenticate() {     obj = getFormData('#loginForm');     myUsername = obj.myUsername;     myPassword = obj.myPassword;     isOK = validateUser( myUsername, myPassword );     if( isOK == 1 ) {         $.mobile.changePage($("#home"),"slide");         getAllTasks();     }     console.log( "isOK: " + isOK ); } function validateUser( u, p ) {
  URL="/deployit/security/user/" + u;   results = 0;   $.ajax({         type: "GET",         url: URL,         username: u,         password: p,         dataType: "xml",         async: false,         success: function ( data, status, jqXHR ) {              results = 1;         }   });   return results; } function getAllTasks() {   if( validateUser(myUsername, myPassword) == 1 ) {   URL="/deployit/tasts/v2/current/all";   $.ajax({         type: "GET",         url: "/deployit/tasks/v2/current/all",         username: username,         password: password,         dataType: "json",         async: false,         success: function ( data, status, jqXHR ) {
             html="";              for( i = 0; i < data.length; i++ ) {                 if( data[i].state != "XX EXECUTED" && data[i].state != "XX FAILED" ) {                    html=html + "<div data-role=\"collapsible\" data-theme=\"a\">";                    html=html + "<h4>" + data[i].state + " - ";                    html=html + data[i].description + "</h4>";                    var steps = data[i].block.steps;                    for( j=0; j < steps.length; j++ ) {                       html=html + "<div data-role=\"collapsible\" data-theme=\"b\"><h2>" + steps[j].state;                       html=html + " - " + steps[j].description + "</h2>";                       html=html + "<code>" + steps[j].log + "</code>";                       html=html + "</div>";                    }                    html=html + "</div>";                 }              }              $("#taskList").html( html ).collapsibleset("refresh");         }   });   } else {         $.mobile.changePage($("#login"),"slide");   } }

To do the login form we make a REST call to get information about the user by calling the REST interface with the login credentials provided in the login form.  The action associated with the login form calls the authenticate() method.  Once the username and password are verified the task list form is called and the getAllTasks() method.  So lets see what this little web app will look like.  When we first open the application we will be presented with a login screen as follows:
You will need a valid XL Deploy login.  If you are using active directory or LDAP for authentication in XL Deploy this will be a valid AD or LDAP login.  Once you have logged in you will get a list of tasks in XL Deploy as follows:
The individual tasks can be expanded to review the individual steps for those tasks as follows:
You can further expand the steps to see those details as well.
During demos we talk about our REST interface.  This mobile web application is an example of some of the things that can be done with XL Deploy's REST interface and how XL Deploy can easily integrate with a variety of applications.
All of the code in this blog is available in my GitHub repo at

More from the Blog

View more
Jul 22, 2021

DevOps as a Service (DaaS): scaling digital transformation the right way

When going through digital transformation, many organizations have dis ...
Read More
Jun 28, 2021

Smash through barriers to data availability, make analytics easier

In DevOps, "data availability" often refers to a state where the app o ...
Read More
Jun 24, 2021

Strategies for DevOps adoption across teams

Implementing DevOps is not merely a change in IT and it’s certainly no ...
Read More
Jun 10, 2021

Desilo DevOps: The power of bringing all your tools and data into one view

When discussing value stream management (VSM), our resources talk a lo ...
Read More
Contact Us