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

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

    }

}

if (images.length == 0) {

    // populate image list

    update_images();

}

if (flavors.length == 0) {

    // configure flavors

    update_flavors(); 

}

update_vms(UPDATE_INTERVAL);

</script>