<!DOCTYPE HTML>
<html>
<body>
<h2>Deployment</h2>

<section>
<p>Deployment ID <span id="id">Loading...</span></p>

<p>Status <span id="status">Loading...</span></p>

<p>Actions Completed <span id="actions">Loading...</span></p>

<p><div id="progress"></div></p>
<form class="form">
  <p>
    <button id="expand" onClick="return showHide()">More details...</button>
    <button id="abort" onClick="return confirmAbort()">Abort</button>
  </p>
</form>

</section>

<div id="details" style="display:none;"></div>

<script type="text/javascript">
  function showHide() {
    var style = $('#details').is(':visible');
    if(style == false) {
      $('#expand').html('Less details...');
    } else {
      $('#expand').html('More details...');
    }
    $('#details').toggle();
    return false;
  }

  function render(command) {
    var cmd = $.getUrlVar('cmd');
    $('#id').text(cmd);
    $('#status').text(command['status']);
    var buffer = [];
    var i = 0;
    buffer[i++]=command['completedActions'];
    buffer[i++]=' of ';
    buffer[i++]=command['totalActions'];
    $('#actions').text(buffer.join(""));
    var progress = command['completedActions']/command['totalActions']*100;
    $('#progress').progressbar({ value: progress });
    buffer = [];
    i = 0;
    var actionEntries;
    try {
      if(command['actionEntries'].constructor.toString().indexOf('Array') == -1) {
        actionEntries = [];
        actionEntries[0] = command['actionEntries'];
      } else {
        actionEntries = command['actionEntries'];
      }
      for(var action in actionEntries) {
        buffer[i++]=renderAction(actionEntries[action]['action']);
        try {
          buffer[i++]=renderHostStatus(actionEntries[action]['hostStatus']);
        } catch(err) {
          // Protect rendering code from missing data.
        }
      }
    } catch(err2) {
      // Protect rendering code from missing data.
    }
    $('#details').html(buffer.join(""));
  }

  function renderAction(action) {
  
    var buffer = [];
    var i = 0;
    if(action['@type']=='scriptAction') {
      buffer[i++] = renderScriptAction(action);
    } else if(action['@type']=='packageAction') {
      buffer[i++] = renderPackageAction(action);
    } else if(action['@type']=='daemonAction') {
      buffer[i++] = renderDaemonAction(action);
    }
    return buffer.join("");
  }

  function renderScriptAction(action) {
    var buffer = [];
    var i = 0;
    buffer[i++] = "<p>Action: ";
    buffer[i++] = action['script'];
    buffer[i++] = " ";
    if (action['parameters'].constructor.toString().indexOf('Array') == -1) {
      buffer[i++] = action['parameters'];
    } else {
      buffer[i++] = action['parameters'].join(" ");
    }
    buffer[i++] = "</p>";
    return buffer.join("");
  }

  function renderPackageAction(action) {
    var buffer = [];
    var i = 0;
    buffer[i++] = "<p>Action: ";
    buffer[i++] = action['actionType'];
    buffer[i++] = " ";
    var list = action['packages'];
    if(list.constructor.toString().indexOf('Array') == -1) {
      buffer[i++] = action['packages']['name'];
    } else {
      for(var x in list) {
        buffer[i++] = list[x]['name'];
        buffer[i++] = " ";
      }
    }
    buffer[i++] = "</p>";
    return buffer.join("");
  }

  function renderDaemonAction(action) {
    console.log(action);
    var buffer = [];
    var i = 0;
    buffer[i++] = "<p>Action: ";
    buffer[i++] = action['actionType'];
    buffer[i++] = " ";
    buffer[i++] = action['daemon'];
    buffer[i++] = "</p>";
    return buffer.join("");
  }

  function renderHostStatus(hostStatus) {
    var buffer = [];
    var i = 0;
    if (hostStatus.constructor.toString().indexOf('Array') == -1) {
      buffer[i++] = "<span class='block'>"+hostStatus['host']+" "+hostStatus['status']+"</span> ";
    } else {
      for(var hs in hostStatus) {
        buffer[i++] = "<span class='block'>"+hostStatus[hs]['host']+" "+hostStatus[hs]['status']+"</span> ";
      }
    }
    return buffer.join("");
  }

  function checkStatus() {
    var cmd = $.getUrlVar('cmd');
    jQuery.getJSON('/v1/command/status/'+cmd,
      function(command) {
        render(command);
        if(command['status']!='SUCCEEDED' &&
           command['status']!='FAILED') {
          var timeout = setTimeout("checkStatus()",3000);
        }
      }
    )
    .error(
      function() {
        var command = [];
        command['status'] = "Unknown";
        command['completedActions'] = "0";
        command['totalActions'] = "0";
        render(command);
        var timeout = setTimeout("checkStatus()",3000);
      }
    );
  }

  function confirmAbort() {
    var question = "Abort deployment "+$.getUrlVar('cmd')+"?";
    if(confirm(question)) {
      abortCommand($.getUrlVar('cmd'));
    }
    return false;
  }

  function abortCommand(cmd) {
    $.ajax({
      type: 'DELETE',
      url: '/v1/controller/abort/'+cmd,
      success: function(data) {
        console.log(data);
      },
      dataType:'json'
    });
  }

  $.extend({
    getUrlVars: function(){
      var vars = [], hash;
      var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
      for(var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
      }
      return vars;
    },
    getUrlVar: function(name){
      return $.getUrlVars()[name];
    }
  });

  $(document).ready(function() {
    checkStatus();
  });
</script>
</body>
</html>