{% extends base.html %}

{% block title %}Manager Interface{% end %}

{% block includes %}
<link href="{{ static_url('css/span-fix.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ static_url('js/moment.js') }}"></script>
{% end %}

{% block content %}
<!-- Workers Info Area -->
<div class="row">
    <div class="col col-md-12">
        <div class="btn-toolbar pull-right">
            <button class="btn btn-md btn-success" onclick="addWorker();"><i class="fa fa-plus"></i> Add worker!</button>
            <button class="btn btn-md btn-warning" onclick="pauseAllWorkers()"><i class="fa fa-pause"></i> Pause All</button>
            <button class="btn btn-md btn-info" onclick="resumeAllWorkers()"><i class="fa fa-play"></i> Resume All</button>
        </div>
    </div>
</div>
<br>
<h5><strong>Total scan progress</strong></h5>
<div id="progressbar">
  <div class="progress">
    <div id="pluginprogress" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
    </div>
  </div>
</div>
<div class="row" id="workersInfo">
</div>
<!-- End Workers Info Area -->
<script>
var mySpace = {
                    workers_api_url:"{{ workers_api_url }}",
                    targets_ui_url:"{{ targets_ui_url }}",
                    plugins_api_url:"{{ plugins_api_url }}",
                };

var num_workers;

// Abort worker with id using API
function abortWorker(workerId){
    addOverlay('#worker_'+workerId); // just add overlay the worker info refresh will auto. remove it
    $.get(mySpace.workers_api_url+workerId+'/abort');
    num_workers -= 1;
}

// Pause worker with id using API
function pauseWorker(workerId){
    addOverlay('#worker_'+workerId); // just add overlay the worker info refresh will auto. remove it
    $.get(mySpace.workers_api_url+workerId+'/pause');
}

function pauseAllWorkers() {
    var w = num_workers;
    while (w > 0) {
        addOverlay('#worker_'+w);
        w--;
    }
    $.get(mySpace.workers_api_url+'0'+'/pause');
}

// Resume worker with id using API
function resumeWorker(workerId){
    addOverlay('#worker_'+workerId); // just add overlay the worker info refresh will auto. remove it
    $.get(mySpace.workers_api_url+workerId+'/resume');
}

function resumeAllWorkers() {
    var w = num_workers;
    while (w > 0) {
        addOverlay('#worker_'+w);
        w--;
    }
    $.get(mySpace.workers_api_url+'0'+'/resume');
}

// Delete a worker process using API
function deleteWorker(workerId){
    $.ajax({
            url:mySpace.workers_api_url+workerId,
            type:'DELETE',
            error:function(xhr, textStatus, serverResponse){
                alertFail("Server replied: "+serverResponse);
                }
            });
    num_workers -= 1;
}

// Add new worker using API
function addWorker(){
    $.post(mySpace.workers_api_url);
    num_workers += 1;
}

// Function to get control buttons based on the present state of a worker i.e return pause button if worker is active & vice versa
function getControlButtons(obj){
    html = '<div class="btn-toolbar pull-right">';
    if (obj.busy){
        if(obj.paused){
            html += '<button class="btn btn-success btn-xs" href="#" onclick="resumeWorker('+obj.id+');"><i class="fa fa-play"></i></button>';
        }else{
            html += '<button class="btn btn-primary btn-xs" href="#" onclick="pauseWorker('+obj.id+');"><i class="fa fa-pause"></i></button>';
            html += '<button class="btn btn-danger btn-xs" href="#" onclick="abortWorker('+obj.id+');"><i class="fa fa-times"></i></button>';
        }
    } else {
        html += '<button class="btn btn-danger btn-xs" href="#" onclick="deleteWorker('+obj.id+');"><i class="fa fa-times"></i></button>';
    }
    html += '</div>';
    return(html);
}

// Function which populates worker info & is called at a regular interval
function displayWorkersInfo(){
    $.ajax({url: mySpace.workers_api_url,
            ifModified: true,
            dataType:'json',
            success:function(data, textStatus, jqXHR){
                if (304 != jqXHR.status){  // To do something only when some information has changed, i.e do nothing on 304 Not Modified
                    $('#workersInfo').html('');
                    num_workers = data.length;
                    $.each(data, function(index, obj){
                        // We add three span3 panels in a row, so we use index to add
                        // opening and closing tags for a row
                        if (index%2 === 0)
                            $('#workersInfo').append('<div class="col col-md-4 row-fluid">');

                        html = '<div class="span5 panel ';
                        if (obj.busy && !obj.paused){
                            html += 'panel-primary"';
                        }else if (obj.paused){
                            html += 'panel-info"';
                        }else{
                            html += 'panel-default"';
                        }
                        html += ' id="worker_'+obj.id+'">';
                        html += '<div class="panel-heading"><h3 class="panel-title">Worker '+obj.id+getControlButtons(obj)+'</h3></div>';
                        html += '<div class="panel-body">';
                        html += '<p><strong>PID:</strong> '+obj.worker+'</p>';
                        if (obj.start_time.localeCompare("NA") == -1) {
                            html += '<p><strong>Start Time: </strong> '+obj.start_time+' (~ ' + getElapsedTime(obj.start_time)+')'+'</p>';
                        } else {
                            html += '<p><strong>Start Time: </strong>N/A</p>';
                        }
                        if (obj.work.length > 0){
                            html += '<p><strong>Target:</strong> <a href="'+mySpace.targets_ui_url+obj.work[0]["id"]+'">'+obj.work[0].target_url+'</a></p>';
                            html += '<p><strong>Plugin:</strong> '+obj.work[1].title+'</p>';
                            html += '<p><strong>Type:</strong> '+obj.work[1].type.replace('_',' ')+'</p>';
                            html += '<p><strong>Group:</strong> '+obj.work[1].group+'</p>';
                        }
                        html += '</div>';
                        html += '</div>';

                        $('#workersInfo').append(html);

                        // We add three span3 panels in a row, so we use index to add
                        // opening and closing tags for a row
                        if (index%2 === 1)
                            $('#workersInfo').append('</div>');
                    });
                }
            }
    });
    setTimeout(displayWorkersInfo, 2000);
}

//Function which give elapsed time by calculting difference between two given times in string. Function uses moment.js
function getElapsedTime(start_time){
    var ms = moment(moment()).diff(moment(start_time,"YYYY/MM/DD HH:mm:ss"));
    var d = moment.duration(ms);
    var s = Math.floor(d.asHours()) + moment.utc(ms).format(":mm:ss");
    return s;
}

// Function which checks for last task completion
function checkForLastTaskCompletion() {
    var flag = true;
    $.ajax({
        url: mySpace.workers_api_url,
        ifModified: true,
        dataType: 'json',
        async: false,
        success: function(data) {
            $.each(data, function(index, obj) {
                if (obj.busy) {
                    flag = false;
                    return false;
                }
            });
        }
    });
    return flag;
}

// Function which returns the number of busy workers
function getBusyWorkers() {
    var count = 0;
    $.ajax({
        url: mySpace.workers_api_url,
        ifModified: true,
        dataType: 'json',
        async: false,
        success: function(data) {
            $.each(data, function(index, obj) {
                if (obj.busy) {
                    count++;
                }
            });
        }
    });
    return count;
}

//Function which updates progress bar
function moveProgressBar() {
    var elem = $("#pluginprogress");
    var progressbar = setInterval(function() {
        $.getJSON(mySpace.plugins_api_url + 'progress/', function(data) {
            var left_count = data.left_count;
            var complete_count = data.complete_count;
            left_count += getBusyWorkers();
            if (left_count == 1) {
                if (checkForLastTaskCompletion()) {
                    left_count--;
                }
            }
            if (left_count == 0 && complete_count == 0) {
                $('#progressbar').html('<p>You have not added anything to worklist yet</p>');
                clearInterval(progressbar);
            } else {
                percentage_done = (complete_count / (left_count + complete_count)) * 100;
                elem.css("width", percentage_done + '%');
                if (percentage_done == 100) {
                    elem.removeClass('active');
                    $('#progressbar').html('<p>Worklist is empty</p>');
                    clearInterval(progressbar);
                }
            }
        });
    }, 1000);
}

$(document).ready(function() {
        displayWorkersInfo();  // Then workers information can be displayed
        moveProgressBar();
});
</script>
{% end %}