Synnefo

{% load i18n %}

<!-- the standard view -->

<div id="machinesview" class="standard">

    <div id="spinner"></div>

    <div class="machine" id="machine-template" style="display:none">

        <div class="actions">

            <a href="#" class="action-start">{% trans "Start" %}</a>

            <a href="#" class="action-reboot">{% trans "Reboot" %}</a>

            <a href="#" class="action-shutdown">{% trans "Shutdown" %}</a>

            <a href="#" class="action-destroy">{% trans "Destroy" %}</a>

        </div>        

        <div class="state">

            <div class="status">{% trans "Running" %}</div>

            <div class="indicator"></div>

            <div class="indicator"></div>

            <div class="indicator"></div>

            <div class="indicator"></div>

            <img class="spinner" style="display:none" src="/static/progress.gif" />

            <img class="wave" style="display:none" src="/static/wave.gif" />

        </div>

        <img class="logo" src="" />

        <a href="#" class="name">

            <h5>{% trans "Name: " %}<span class="name">node.name</span><span class="rename"></span></h5>

        </a>

        <a href="#" class="ip">

            <h5>{% trans "IP: " %}<span class="public">node.public_ip</span></h5>

        </a>

        <h5 class="settings">

            {% trans "Show:" %} 

            <a class="show-disks"href="#">{% trans "disks" %}</a> | 

            <a class="show-networks"href="#">{% trans "networks" %}</a> | 

            <a class="show-group"href="#">{% trans "group" %}</a> | 

            <a class="show-metadata" href="#">{% trans "metadata" %}</a>

        </h5>

        <div class="confirm_single">

            <button class="yes">{% trans "Confirm" %}</button>

            <button class="no">{% trans "Cancel" %}</button>

        </div>

        <div class="action_error" align="center">

            {% trans "<span class='orange'>Error</span> on" %} <span class="action">{% trans "error action" %}</span>

            <span class="code"></span>            

            <span class="message"></span>

            <button class="details">{% trans "Details" %}</button>

        </div>

        <div class="separator"></div>

    </div>

    <div class="running"></div>

    <div id="mini" class="separator"></div>

    <div class="terminated"></div>

</div>

<script>

// intercept edit metadata click

$("a.show-metadata").live('click', function() {

    // get server name and server ID

    var serverID = $(this).parent().parent().attr("id");

    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();

    // set server name to all related metadata dialogs

    $("#editor-1 h3 span").text(serverName);

    $("#editor-2 h3 span").text(serverName);

    // set server id to all related metadata dialogs

    $("#editor-1 h3").attr('id', serverID);

    $("#editor-2 h3").attr('id', serverID);

    editMetadata();

});

// intercept reboot click 

$("div.actions a.action-reboot").live('click', function(){

    var serverID = $(this).parent().parent().attr("id");

    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();

    var found = false;

    $(this).parent().children('a').removeClass('selected');

    $(this).addClass('selected');

    $(this).parent().addClass('display');

    $(this).parent().parent().find('.action_error').hide();

    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it

        if (pending_actions[i][1]==serverID){

            pending_actions[i][0] = reboot;

            found = true

        }

    }

    if (!found) // no pending action for this server was found, so let's just add it to the list

        pending_actions.push([reboot, serverID, serverName])

    update_confirmations();

    return false;

});

// intercept shutdown click

$("div.actions a.action-shutdown").live('click', function(){ 

    var serverID = $(this).parent().parent().attr("id");

    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();

    var found = false;

    $(this).parent().children('a').removeClass('selected');

    $(this).addClass('selected');

    $(this).parent().addClass('display')

    $(this).parent().parent().find('.action_error').hide();

    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it

        if (pending_actions[i][1]==serverID){

            pending_actions[i][0] = shutdown;

            found = true

        }

    }

    if (!found) // no pending action for this server was found, so let's just add it to the list 

        pending_actions.push([shutdown, serverID, serverName])

    update_confirmations();

    return false;

});

// intercept start click

$("div.actions a.action-start").live('click', function(){ 

    var serverID = $(this).parent().parent().attr("id");

    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();

    var found = false;

    $(this).parent().children('a').removeClass('selected');

    $(this).addClass('selected');

    $(this).parent().addClass('display')

    $(this).parent().parent().find('.action_error').hide();

    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it

        if (pending_actions[i][1]==serverID){

            pending_actions[i][0] = start;

            found = true

        }

    }

    if (!found) // no pending action for this server was found, so let's just add it to the list

        pending_actions.push([start, serverID, serverName])

    update_confirmations();    

    return false;

});

// intercept destroy click

$("div.actions a.action-destroy").live('click', function(){ 

    var serverID = $(this).parent().parent().attr("id");

    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();

    var found = false;

    $(this).parent().children('a').removeClass('selected');

    $(this).addClass('selected');

    $(this).parent().addClass('display')

    $(this).parent().parent().find('.action_error').hide();

    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it

        if (pending_actions[i][1]==serverID){

            pending_actions[i][0] = destroy;

            found = true

        }

    }

    if (!found) // no pending action for this server was found, so let's just add it to the list

        pending_actions.push([destroy, serverID, serverName])

    update_confirmations();    

    return false;

});

$("div.confirm_single .yes").live('click', function(){

    var serverID = $(this).parent().parent().attr("id");

    for (i=0;i<pending_actions.length;i++){ // if there is a pending action for this server execute it

        if (pending_actions[i][1]==serverID){

            action = pending_actions.splice(i,1)[0]; // extract action

            // change the status text in cases where no api state exists

            if (action[0] == start) {

                $(this).parent().parent().find('.status').text('Starting');

                $(this).parent().parent().find('.spinner').show();

            } else if (action[0] == shutdown) {

                $(this).parent().parent().find('.status').text('Shutting down');

                $(this).parent().parent().find('.spinner').show();

            } else if (action[0] == reboot) {

                $(this).parent().parent().find('.status').text('Rebooting');

                $(this).parent().parent().find('.spinner').show();

            }  else if (action[0] == destroy) {

                $(this).parent().parent().find('.status').text('Destroying');

                $(this).parent().parent().find('.spinner').show();

            }                    

            action[0]([action[1]]); // execute action

        }

    }

    $(this).parent().hide();

    $(this).parent().parent().children('div.actions').children('a').removeClass('selected');

    $(this).parent().parent().children('.state').children('.spinner').show()

    $(this).parent().parent().children('div.actions').removeClass('display');

    update_confirmations(); 

    return false;

});

$("div.confirm_single .no").live('click', function(){

    // remove the action from the pending list

    var serverID = $(this).parent().parent().attr("id");

    $(this).parent().parent().children('div.actions').children('a').removeClass('selected');

    $(this).parent().parent().children('div.actions').removeClass('display');    

    for (i=0;i<pending_actions.length;i++){ // if there is a pending action for this server remove it

        if (pending_actions[i][1]==serverID){

            pending_actions.splice(i,1);

        }

    }

    $(this).parent().hide();

    update_confirmations();    

    return false;

});

$("div.action_error .details").live('click', function(){

    // remove the action from the pending list

    ajax_error($(this).parent().children('.code').text(), undefined, $(this).parent().children('.action').text(), $(this).parent().children('.message').text());

    $(this).parent().hide();

});

// update the servers list

function update_machines_view(data){

    /* 

    Go through the servers in the input data. Update existing entries, add

    new ones to the list

    */     

    // show message in case user has no servers!

    if (data.servers.values.length == 0) {

        showWelcome()

    } else {

        hideWelcome()

    }  

    $.each(data.servers.values, function(i,server){

        existing = $('#' + server.id);

        // if multiple machines exist in the DOM, delete all but one

        // defensive coding - that shouldn't happen normally

        while (existing.length > 1){

            existing.remove();

        }

        var server_image = os_icon(server.metadata);

        // server already exists in DOM

        if (existing.length){

            $("div.machine:last-child").find("div.separator").show();                

            //  if the status is deleted, delete it from the DOM

            if (server.status == 'DELETED') {

                existing.remove();

                // Reload the page to check if server list is empty

                standard_view()

                try {

                    console.info(existing.find("a.name span.name").text() + ' removed');

                } catch(err) {}            

            } else if (existing.find(".status").text() != STATUS_MESSAGES[server.status]) {

                try { // firebug console logging

                    console.info(existing.find("a.name span.name").text() + ' from ' 

                                + existing.find(".status").text() + ' to ' + STATUS_MESSAGES[server.status]);

                } catch(err) {}

                //show reboot and shutdown actions

                if (server.status == 'ACTIVE' || server.status == 'REBOOT') {

                    $('div.#' + server.id + ' a.action-reboot').attr('style','');

                    $('div.#' + server.id + ' a.action-shutdown').attr('style','');

                    $('div.#' + server.id + ' a.action-destroy').removeClass('destroy-padding');        

                }

                if (['BUILD','ACTIVE','REBOOT'].indexOf(server.status) >= 0 &&

                    [STATUS_MESSAGES['STOPPED'], STATUS_MESSAGES['ERROR'],

                     'Starting'].indexOf(existing.find(".status").text()) >= 0) {

                    // from stopped, on error or starting to building, active or rebooting

                    // starting is not an api state, it means the vm is stopped or on error

                    moved = existing.clone().appendTo(".running");

                    moved.find("img.logo").attr("src","static/machines/" + server_image + '-on.png');

                    existing.remove();

                    existing = moved;

                    existing.find(".status").text(STATUS_MESSAGES[server.status]); 

                } else if (['STOPPED','ERROR'].indexOf(server.status) >= 0 &&

                           [STATUS_MESSAGES['ACTIVE'], STATUS_MESSAGES['BUILD'], STATUS_MESSAGES['REBOOT'],

                            'Shutting down'].indexOf(existing.find(".status").text()) >= 0) {

                    // from active, building, rebooting, or shutting down to stopped or on error

                    // shutting down is not an api state, it means the server is active

                    moved = existing.clone().appendTo(".terminated");

                    moved.find("img.logo").attr("src","static/machines/" + server_image + '-off.png');

                    existing.remove();

                    existing = moved;

                    existing.find(".status").text(STATUS_MESSAGES[server.status]); 

                } else if (['BUILD','ACTIVE','REBOOT'].indexOf(server.status) >= 0 && 

                            [STATUS_MESSAGES['ACTIVE'], STATUS_MESSAGES['BUILD'],

                             STATUS_MESSAGES['REBOOT']].indexOf(existing.find(".status").text()) >= 0) {

                    // the server changes status, but remains in running list

                    existing.find(".status").text(STATUS_MESSAGES[server.status]); 

                } else if (['STOPPED','ERROR'].indexOf(server.status) >= 0 &&

                    [STATUS_MESSAGES['STOPPED'], 

                     STATUS_MESSAGES['ERROR']].indexOf(existing.find(".status").text()) >= 0) {

                    // the server changes status, but remains in terminated list

                    existing.find(".status").text(STATUS_MESSAGES[server.status]); 

                }        

                existing.find('.spinner').hide();

                existing.find(' .wave').attr('src','static/wave.gif').show();

                setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);

                // show spinner while the server is rebooting, starting or shutting down  

                if ([STATUS_MESSAGES['REBOOT'], 

                    'Starting', 'Shutting down'].indexOf(existing.find(".status").text()) >= 0 ) {

                    existing.find(' .wave').hide();

                    existing.find('.spinner').show();

                }                            

            }

            existing.find("a.name span.name").text(server.name);

            existing.find("a.ip span.public").text(String(server.addresses.values[0].values[0].addr).replace(',',' '));

        } else if (server.status != 'DELETED') {

            // If it does not exist and it's not deleted, we should create it

            var machine = $("#machine-template").clone().attr("id", server.id).fadeIn("slow");

            machine.find("a.name span.name").text(server.name);

            machine.find("img.logo").attr("src","static/machines/"+server_image+'-on.png');

            machine.find("span.imagetag").text(server_image);

            machine.find("a.ip span.public").text(String(server.addresses.values[0].values[0].addr).replace(',',' '));            

            machine.find(".status").text(STATUS_MESSAGES[server.status]);

            if (['BUILD', 'ACTIVE', 'REBOOT'].indexOf(server.status) >= 0){

                machine.appendTo(".running");

            } else {

                machine.find("img.logo").attr("src","static/machines/"+server_image+'-off.png');

                machine.appendTo(".terminated");

            }

            //show spinner while machine is building

            if (server.status == 'BUILD' || 

                ['Starting', 'Shutting down'].indexOf(existing.find(".status").text()) >= 0 ) { 

                machine.find('.spinner').show();

            }   

            //allow destroy action only while machine is building

            if (server.status == 'BUILD') {

                $('div.#' + server.id + ' a.action-reboot').hide();

                $('div.#' + server.id + ' a.action-shutdown').hide();        

                $('div.#' + server.id + ' a.action-destroy').addClass('destroy-padding');        

            }

        }

    });

    $("#spinner").hide();

    // show all separators

    $("div.machine div.separator").show();

    // hide the last one

    $("div.machine:last-child").find("div.separator").hide();

    // the separator shows only when running and terminated machines are available

    if ($(".terminated a.name").length > 0 && $(".running a.name").length > 0) {

        $("#mini.separator").fadeIn("slow");

    } else {

        $("#mini.separator").fadeOut("slow");

    }     

    // set confirm box position

    if (window.innerHeight - 220 < $('#machinesview').height())

        $('.confirm_multiple').addClass('fixed');

    else

        $('.confirm_multiple').removeClass('fixed');

}

// indicate that the requested action was succesfully completed

function display_success(serverID) {

}

// indicate that the requested action was not completed

function display_failure(status, serverID, action, responseText) {

    $('#'+serverID+ ' .spinner').hide();

    $('#'+serverID+ ' .action_error .action').text(action);

    $('#'+serverID+ ' .action_error .code').text(status);

    $('#'+serverID+ ' .action_error .message').text(responseText);

    $('#'+serverID+ ' .action_error').show();    

}

// basic functions executed on page load

if (images.length == 0) {

    // populate image list

    update_images();

}

if (flavors.length == 0) {

    // configure flavors

    update_flavors(); 

}

// set the label of the multiple buttons 

$('div.confirm_multiple button.yes').text('Confirm All');

$('div.confirm_multiple button.no').text('Cancel All');

// reposition multiple confirmation box on window resize

$(window).resize(function(){

    if (this.innerHeight - 220 < $('#machinesview').height())

        $('.confirm_multiple').addClass('fixed');

    else

        $('.confirm_multiple').removeClass('fixed');

});

// start updating vm list

update_vms(UPDATE_INTERVAL);

</script>