Synnefo

{% load i18n %}

<!-- the standard view -->

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

    <div id="emptymachineslist">{% trans "You have no virtual machines! Press Create New to create some!" %}</div>

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

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

        <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>

            <div class="spinner hidden"></div>

        </div>

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

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

            <h5>Name: <span class="name">node.name</span><span class="rename"></span></h5>

        </a>

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

            <h5>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="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="more">{% trans "more &hellip;" %}</a>

        </div>

        <div class="confirm_single">

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

            <button class="no">{% trans "Cancel" %}</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')

    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')

    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')

    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;

});

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

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

    return false;

});

function update_confirmations(){

    $('div.confirm_single').hide() // hide all confirm boxes to begin with

    $('div.confirm_multiple').hide()

    for (i=0;i<pending_actions.length;i++){ // show single confirms

        $("div.machine#"+pending_actions[i][1]+' .confirm_single').show();        

    }

        if (pending_actions.length>1) // if more than one pending action show multiple confirm box

                $('div.confirm_multiple').show();

}

// 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, function(i,server){

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

        if (existing.length > 1){

            existing.remove();

            existing = [];

        }

        if (existing.length){

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

            // If the machine already exists in the DOM then simply update or delete it

            if (server.deleted == true) {

                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(".status").text(STATUS_MESSAGES[server.status]);

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

            }

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

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

        } else if (server.deleted != true) {

            // 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.public.ip.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");

            }

        }

    });

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

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

        $("#emptymachineslist").fadeIn("slow");

    }

}

// indicate that the requested action was succesfully completed

function display_success(serverID) {

    $('#'+serverID+ ' .spinner').addClass('wave');

    console.info('success '+serverID);

    setTimeout("$('#'+serverID+ ' .spinner').hide();$('#'+serverID+ ' .wave').removeClass('wave')", 5000);

}

if (images.length == 0) {

    // populate image list

    update_images();

}

if (flavors.length == 0) {

    // configure flavors

    update_flavors(); 

}

update_vms(UPDATE_INTERVAL);

</script>