Welcome!

XebiaLabs | Continuous Delivery and Agile DevOps Tools

XebiaLabs Blog

Subscribe to XebiaLabs Blog: eMailAlertsEmail Alerts
Get XebiaLabs Blog via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: Intel XML, XML Magazine

Blog Feed Post

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="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></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.name] = 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:

Screenshot_2015-06-29-16-58-41

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:

Screenshot_2015-05-05-10-25-19

The individual tasks can be expanded to review the individual steps for those tasks as follows:

Screenshot_2015-05-05-10-25-45

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 https://github.com/zvercodebender/xebialabs-blog-files/tree/master/xld-tasklist

 

 

 

The post A Little Mobile Web App to Monitor XL Deploy Tasks appeared first on XebiaLabs.

Read the original blog entry...

More Stories By XebiaLabs Blog

XebiaLabs is the technology leader for automation software for DevOps and Continuous Delivery. It focuses on helping companies accelerate the delivery of new software in the most efficient manner. Its products are simple to use, quick to implement, and provide robust enterprise technology.