Synnefo

{% load i18n %}

<!-- the standard view -->

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

    <div id="emptymachineslist"><h1 id="welcomeheader">{% trans "Welcome to the ocean!" %}</h1><br />

        <span class="welcomebody">{% trans "From this panel you will be able to manage your Virtual Machines (VMs). If you don't know what a VM is: take the " %}<a href="#">{% trans "tour" %}</a>.</span><br /><br />

        <span class="welcomebody">{% trans "The panel is currently empty, because you don't have any VMs yet. You can start by creating your new VM by clicking the blue button on the right. The wizard will guide you through the hole process." %}</span><br /><br />

        <span class="welcomefooter">{% trans "For more information or help, click " %}<a href="#">{% trans "here" %}</a>.</span>

    </div>

    <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 href="#">{% trans "disks" %}</a> | <a href="#">{% trans "networks" %}</a> | <a href="#">{% trans "group" %}</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 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

            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

    */    

    $.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();

        }

        // 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();            

                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) {}

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

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

                    // from stopped to running

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

                    moved.find("img.logo").attr("src","static/machines/"+image_tags[server.imageRef]+'.png');

                    existing.remove();

                    existing = moved;

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

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

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

                    moved.find("img.logo").attr("src","static/machines/"+image_tags[server.imageRef]+'-off.png');

                    existing.remove();

                    existing = moved;

                } 

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

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

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

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

            }

            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/"+image_tags[server.imageRef]+'.png');

            machine.find("span.imagetag").text(image_tags[server.imageRef]);

            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/"+image_tags[server.imageRef]+'-off.png');

                machine.appendTo(".terminated");

            }

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

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

        }

    });

    $("#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");

    }

    // show message in case user has no servers!

    if (servers.length == 0) {

        showWelcome()

    } else {

        hideWelcome()

    }           

    // 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();

}

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>