Skip to main content
DevOps icon showing cogs

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
Ascension Launch Banner
Apr 26, 2022

Get ready for peak performance with’s newest AI-Powered DevOps Platform Ascension Release

Today, is excited to announce our latest AI-Powered DevOps ...
Read More
Jan 24, 2022 Value Stream Delivery for SAFe®: The key to amazing business outcomes

The Scaled Agile Framework (SAFe) is the world’s leading framework for ...
Read More
Dec 09, 2021

How SaaS and cloud-based solutions helped the U.S. Department of Veterans Affairs achieve digital transformation

Modernizing legacy systems was an ongoing goal for the U.S. Department ...
Read More
Nov 29, 2021

Increase velocity and reduce risk with AI and machine learning

Artificial Intelligence (AI) and machine learning (ML) have proven use ...
Read More
Contact Us