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>

        <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="separator"></div>

    </div>

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

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

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

</div>

<div id="machines" class="separator"></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();

    confirm_action('reboot', reboot, [serverID], [serverName]);

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

    confirm_action('shutdown', shutdown, [serverID], [serverName]);

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

//    confirm_action('start', start, [serverID], [serverName]);

    start([serverID]);

    return false;

});

// update the servers list

function update_machines_view(data){

    /*

    Go through the already displayed running servers and remove those not in

    the data or are marked as deleted.

    */

    $('.running .machine').each(function(i,entry) {

        var deleted = true;

        $.each(data.servers, function(j,server) {

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

                deleted = false;

            }

        });

        if (deleted) {

            $('#'+entry.id).remove();

        }

    });

    // Do the same for the terminated ones.

    $('.terminated .machine').each(function(i,entry) {

        var deleted = true;

        $.each(data.servers, function(j,server) {

            if (server.id == entry.id && ['STOPPED','ERROR'].indexOf(server.status) >= 0) {

                deleted = false;

            }

        });

        if (deleted) {

            $('#'+entry.id).remove();

        }    

    });

    /* 

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

    new ones to the list

    */    

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

        // if the machine is deleted it should not be included in any list

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

            return;

        }

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

        if (existing.length > 1){

            existing.remove();

            existing = [];

        }

        if (existing.length){ 

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

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

                try {

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

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

                } catch(err) {}

                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.public.ip.addr).replace(',',' '));

        } else {

            // If it does not exist, 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.find("img.list-logo").attr("src","static/os_logos/"+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");

    }

}

if (images.length == 0) {

    // populate image list

    update_images();

}

if (flavors.length == 0) {

    // configure flavors

    update_flavors(); 

}

update_vms(UPDATE_INTERVAL);

</script>