Synnefo

<!--

Copyright 2011 GRNET S.A. All rights reserved.

Redistribution and use in source and binary forms, with or

without modification, are permitted provided that the following

conditions are met:

  1. Redistributions of source code must retain the above

     copyright notice, this list of conditions and the following

     disclaimer.

  2. Redistributions in binary form must reproduce the above

     copyright notice, this list of conditions and the following

     disclaimer in the documentation and/or other materials

     provided with the distribution.

THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS

OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED

WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR

CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF

USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED

AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT

LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN

ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE

POSSIBILITY OF SUCH DAMAGE.

The views and conclusions contained in the software and

documentation are those of the authors and should not be

interpreted as representing official policies, either expressed

or implied, of GRNET S.A.

-->

{% load i18n %}

<!-- the standard view -->

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

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

        <div class="machine" id="machine-template">

            <div class='connect-border' title='{% trans 'Connect  machine' %}'></div>

            <div class='connect-arrow' title='{% trans 'Connect  machine' %}'></div>

            <div class="logo"></div>

            <div class="machine-details">

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

                    <h5 class="namecontainer editable">

                        <span class="name">node.name</span><span class="rename"></span>

                        <div class="editbuttons" style="display:none">

                            <div class="save"></div>

                            <div class="cancel"></div>

                        </div>

                    </h5>

                </div>

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

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

                </a>

            </div>

            <div class="info">

                <div class="info-header">

                    <div class="info-label">{% trans "info" %}</div>

                    <div class="toggler down"></div>

                </div>

            </div>

            <div class="info-content">

                <div class="metadata-container">

                    <div class="vm-details metadata-column">

                        {% trans "CPUs" %}: <span class="cpu-data">1</span><br />

                        {% trans "RAM" %}: <span class="ram-data">2048</span> (MB)<br />

                        {% trans "System Disk" %}: <span class="disk-data">20</span> (GB) <br /><br />

                        {% trans "Image" %}: <span class="image-data">Debian</span><br />

                        {% trans "Image Size" %}: <span class="image-size-data">2.3</span> (GB)

                    </div>

                    <div class="vm-stats metadata-column">

                        <div class='stat-label'>{% trans "CPU" %}</div>

                        <div class='stat-content'>

                            <img src="./static/icons/indicators/small/progress.gif" class="cpu busy" />

                            <div class='stat-error'>{% trans "Could not fetch CPU stats." %}</div>

                        </div>

                        <div class='stat-label'>{% trans "Net" %}</div>

                        <div class='stat-content'>

                            <img src="./static/icons/indicators/small/progress.gif" class="net busy" />

                            <div class='stat-error'>{% trans "Could not fetch Net stats." %}</div>

                        </div>

                        <a href="#" class="stats-report">{% trans "Full report" %}</a>

                    </div>

                    <div class="vm-metadata metadata-column">

                        <div class="metadata-left">

                            {% trans "Tags" %}: <br />

                            (<span class="metadata-count">0</span>)

                        </div>

                        <div class="metadata-keys-container">

                            <div class="scrollable vertical">

                                <div class="items">

                                </div>

                            </div>

                            <div class="metadata-actions">

                                <div class="prev"></div>

                                <div class="next"></div>

                            </div>

                        </div>

                        <a href="#" class="manage-metadata">{% trans "Manage Tags" %}</a>

                    </div>

                </div>

            </div>

            <div class="state">

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

                <div class="indicators">

                    <div class="indicator1"></div>

                    <div class="indicator2"></div>

                    <div class="indicator3"></div>

                    <div class="indicator4"></div>

                </div>

                <div class="action-indicator" style="display:none"></div>

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

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

            </div>

            <div class="actions">

                <div class="action-container start">

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

                    <div class="confirm_single">

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

                        <button class="no">X</button>

                    </div>

                </div>

                <div class="action-container reboot">

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

                    <div class="confirm_single">

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

                        <button class="no">X</button>

                    </div>

                </div>

                <div class="action-container shutdown">

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

                    <div class="confirm_single">

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

                        <button class="no">X</button>

                    </div>

                </div>

                <div class="action-container console">

                    <a href="#" class="action-console">{% trans "Console" %}</a>

                    <div class="confirm_single">

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

                        <button class="no">X</button>

                    </div>

                </div>

                <div class="action-container destroy">

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

                    <div class="confirm_single">

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

                        <button class="no">X</button>

                    </div>

                </div>

            </div>

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

                {% trans "<span>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>

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

    </div>

    <div class="running"><div class="large-spinner"></div></div>

    <div class="terminated" style="display:none;"></div>

</div>

<script>

CONFIRMBOX_OFFSET = 200;

init_action_indicator_handlers('icon');

// handle connect machine image states

$("div.connect-arrow, div.running .machine .logo").live('mouseover',

    function() {

        if ($(this).parent().parent().find('.status').text() != STATUSES['ACTIVE']) { return };

        set_machine_os_image($(this).parent().parent(), "icon", "hover", undefined, 1);

    });

$("div.connect-arrow, div.running .machine .logo").live('mouseleave',

    function() {

        if ($(this).parent().parent().find('.status').text() != STATUSES['ACTIVE']) { return };

        set_machine_os_image($(this).parent().parent(), "icon", "hover", undefined, 1, "hover");

        // mouseup outside the element is not fired

        set_machine_os_image($(this).parent().parent(), "icon", "hover", undefined, 1, "click");

    });

$("div.connect-arrow, div.running .machine .logo").live('mousedown',

function() {

        if ($(this).parent().parent().find(".connect-arrow:visible").length == 0) { return };

        set_machine_os_image($(this).parent().parent(), "icon", "click", undefined, 1);

    });

$("div.connect-arrow, div.running .machine .logo").live('mouseup',

    function() {

        if ($(this).parent().parent().find(".connect-arrow:visible").length == 0) { return };

        set_machine_os_image($(this).parent().parent(), "icon", "click", undefined, 1, "click");

    });

// actions on machine mouseover

$("#machinesview-icon.standard .machine").live('mouseover', function() {

    // show connect button only if the machine is active

    if ($(this).find('.status').text() == STATUSES['ACTIVE']) {

        $(this).find("div.connect-arrow").show();

        $(this).find("div.connect-border").show();

    }

});

// actions on machine mouseout

$("#machinesview-icon.standard .machine").live('mouseout', function() {

    // hide connect button

    $(this).find("div.connect-arrow").hide();

    $(this).find("div.connect-border").hide();

});

// actions on connect arrow border mouseover

$("#machinesview-icon.standard .running div.connect-border").live('mouseover', function() {

    $(this).next().addClass('border-hover');

});

// actions on connect arrow border mouseout

$("#machinesview-icon.standard .running div.connect-border").live('mouseout', function() {

    $(this).next().removeClass('border-hover');

});

// open console on machine logo click

$("#machinesview-icon.standard .running div.logo").live('click', function(){

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

    machine_connect([machine_connect, serverID]);

    return false;

});

$("#machinesview-icon.standard .running div.connect-arrow").live('click', function(){

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

    machine_connect([machine_connect, serverID]);

    return false;

});

// open console on connect arrow border click

$("#machinesview-icon.standard .running div.connect-border").live('click', function(){

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

    machine_connect([machine_connect, serverID]);

    return false;

});

//hide the all of the info contents

$("#machinesview-icon.standard .info-content").hide();

//toggle the component with class info-content

$("#machinesview-icon.standard div.info-header").live('click', function() {

    if ($(this).find('.toggler').hasClass('up')) {

        // toggle drop-down pane

        $(this).find('.toggler').removeClass('up');

        $(this).find('.toggler').addClass('down');

        $(this).find('.info-label').removeClass('darker');

        $(this).parent().parent().removeClass('light-background');

    } else {

        // reset stats

        $(this).closest('.machine-container').find('.vm-stats div.stat-error').hide();

        $(this).closest('.machine-container').find('.vm-stats img.cpu').attr('src', './static/icons/indicators/small/progress.gif').addClass('busy').show();

        $(this).closest('.machine-container').find('.vm-stats img.net').attr('src', './static/icons/indicators/small/progress.gif').addClass('busy').show();

        // get new stats

        var serverID = $(this).closest('.machine-container').attr('id');

        get_server_stats(serverID);

        // toggle drop-down pane

        $(this).find('.toggler').removeClass('down');

        $(this).find('.toggler').addClass('up');

        $(this).find('.info-label').addClass('darker');

        $(this).parent().parent().addClass('light-background');

    }

    $(this).parent().parent().find(".info-content").slideToggle(600);

    return false;

});

// intercept manage metadata click

$("#machinesview-icon.standard a.manage-metadata").live('click', function() {

    // get server name and server ID

    var serverID = $(this).closest('.machine-container').attr("id");

    var serverName = $(this).closest('.machine').find("span.name").text();

    // set server name to all related metadata dialogs

    $("#metadata-wizard div.machine-name").text(serverName);

    if ($(this).closest('.machine-container').parent().hasClass('terminated')) {

        $("#metadata-wizard div#on-off").text('off');

    } else {

        $("#metadata-wizard div#on-off").text('on');

    }

    // set server id to all related metadata dialogs

    $("#metadata-wizard p").text(serverID);

    show_metadata_wizard();

    return false;

});

//initiate machine renaming

$("#machinesview-icon.standard .rename, #machinesview-icon.standard h5.editable span.name").live('click', function() {

    $(this).parent().find('.name').html("<input type=\"text\" class=\"nametextbox\" value=\"" +

                                        $(this).parent().find('.name').text() +

                                        "\" / ><span class=\"oldValue\">" +

                                        $(this).parent().find('.name').text() + "</span>");

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

    $(this).parent().find(".editbuttons").fadeIn();

    $(this).parent().find(".nametextbox").focus().select();

    $(this).parent().removeClass('editable');

    //submit wizard by pressing enter on the name textbox

    $(".nametextbox").keydown(function (e) {

        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {

            $(this).parent().parent().find('div.editbuttons div.save').click();

            return false;

        } else if ((e.which && e.which == 27) || (e.keyCode && e.keyCode == 27)) {

            $(this).parent().parent().find('div.editbuttons div.cancel').click();

            return true;

        }

    });

    return false;

});

//rename machine

$("#machinesview-icon.standard .editbuttons .save").live('click', function() {

    serverID = $(this).closest('.machine-container').attr("id");

    serverName = $(this).parent().parent().find('.name').find('.nametextbox').val();

    if (serverName.trim() == ''){

        return false;

    }

    $(this).parent().parent().find('.name').html($(this).parent().parent().find('.nametextbox').val());

    $(this).parent().parent().find(".editbuttons").fadeOut("fast");

    $(this).parent().parent().find(".rename").fadeIn("slow");

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

    rename(serverID, serverName);

    return false;

});

//cancel renaming

$("#machinesview-icon.standard .editbuttons .cancel").live('click', function() {

    $(this).parent().parent().find('.name').html($(this).parent().parent().find('.oldValue').text());

    $(this).parent().parent().find(".editbuttons").hide();

    $(this).parent().parent().find(".rename").fadeIn();

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

    return false;

});

// intercept reboot click

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

    // get server id and server name from DOM

    var serverID = $(this).closest("div.machine-container").attr("id");

    var serverName = $(this).closest("div.machine").find("div.name span.name").text();

    var found = false;

    // show/hide proper menus

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

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

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

    $(this).closest("div.machine").find('.action_error').hide();

    // if there is already a pending action for this server replace it

    for (i=0; i<pending_actions.length; i++) {

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

            pending_actions[i][0] = reboot;

            found = true

        }

    }

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

    if (!found)

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

    // pass the proper action to update confirmation boxes

    update_confirmations();

    return false;

});

// intercept shutdown click

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

    // get server id and server name from DOM

    var serverID = $(this).closest("div.machine-container").attr("id");

    var serverName = $(this).closest("div.machine").find("div.name span.name").text();

    var found = false;

    // show/hide proper menus

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

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

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

    $(this).closest("div.machine").find('.action_error').hide();

    // if there is already a pending action for this server replace it

    for (i=0; i<pending_actions.length; i++) {

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

            pending_actions[i][0] = shutdown;

            found = true

        }

    }

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

    if (!found)

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

    update_confirmations();

    return false;

});

// intercept start click

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

    // get server id and server name from DOM

    var serverID = $(this).closest("div.machine-container").attr("id");

    var serverName = $(this).closest("div.machine").find("div.name span.name").text();

    var found = false;

    // show/hide proper menus

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

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

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

    $(this).closest("div.machine").find('.action_error').hide();

    // if there is already a pending action for this server replace it

    for (i=0; i<pending_actions.length; i++) {

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

            pending_actions[i][0] = start;

            found = true

        }

    }

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

    if (!found)

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

    update_confirmations();

    return false;

});

// intercept console click

$("#machinesview-icon.standard div.actions a.action-console").live('click', function() {

    // get server id and server name from DOM

    var serverID = $(this).closest("div.machine-container").attr("id");

    var serverName = $(this).closest("div.machine").find("div.name span.name").text();

    var found = false;

    // show/hide proper menus

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

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

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

    $(this).closest("div.machine").find('.action_error').hide();

    // if there is already a pending action for this server replace it

    for (i=0; i<pending_actions.length; i++) {

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

            pending_actions[i][0] = open_console;

            found = true

        }

    }

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

    if (!found)

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

    update_confirmations();

    return false;

});

// intercept destroy click

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

    // get server id and server name from DOM

    var serverID = $(this).closest("div.machine-container").attr("id");

    var serverName = $(this).closest("div.machine").find("div.name span.name").text();

    var found = false;

    // show/hide proper menus

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

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

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

    $(this).closest("div.machine").find('.action_error').hide();

    // if there is already a pending action for this server replace it

    for (i=0; i<pending_actions.length; i++) {

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

            pending_actions[i][0] = destroy;

            found = true

        }

    }

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

    if (!found)

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

    update_confirmations();

    return false;

});

$("#machinesview-icon.standard div.confirm_single button.yes").live('click', function(){

    var serverID = $(this).closest("div.machine-container").attr("id");

    // if there is a pending action for this server execute it

    for (i=0; i<pending_actions.length; i++) {

        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).closest("div.machine").find('.status').text(TRANSITIONS['Starting']);

                $(this).closest("div.machine").find('.state').removeClass().addClass('state starting-state');

                $(this).closest("div.machine").find('.spinner').show();

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

                $(this).closest("div.machine").find('.status').text(TRANSITIONS['Shutting down']);

                $(this).closest("div.machine").find('.state').removeClass().addClass('state shutting-state');

                $(this).closest("div.machine").find('.spinner').show();

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

                $(this).closest("div.machine").find('.status').text(TRANSITIONS['Rebooting']);

                $(this).closest("div.machine").find('.state').removeClass().addClass('state rebooting-state');

                $(this).closest("div.machine").find('.spinner').show();

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

                $(this).closest("div.machine").find('.status').text(TRANSITIONS['Destroying']);

                $(this).closest("div.machine").find('.state').removeClass().addClass('state destroying-state');

                $(this).closest("div.machine").find('.spinner').show();

            }

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

        }

    }

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

    $(this).closest('div.actions').find('a').removeClass('selected');

    $(this).closest("div.machine").children('.state').children('.spinner').show()

    $(this).closest("div.machine").children('div.actions').removeClass('display');

    update_confirmations();

    return false;

});

$("#machinesview-icon.standard div.confirm_single button.no").live('click', function(){

    // remove the action from the pending list

    var serverID = $(this).closest("div.machine-container").attr("id");

    $(this).closest('div.action-container').children('a').removeClass('selected');

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

});

$("#machinesview-icon.standard 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) {

        // get DOM element, if it exists

        existing = $('#machinesview-icon.standard #' + server.id);

        // get server OS, if it exists

        if (!(server.metadata == undefined)) {

            var server_image = os_icon(server.metadata);

        } else {

            var server_image = "unknown"

        }

        // get server status message, if it exists

        var current_message = existing.find(".status").text();

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

        // defensive coding - that shouldn't happen normally

        while (existing.length > 1){

            existing.remove();

        }

        // if server already exists in DOM, update its values

        if (existing.length){

            //  if the status is deleted

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

                // delete server entry from the DOM

                log_server_status_change(existing, 'DELETED');

                existing.remove();

            }

            // if the status has changed

            else if ( current_message != STATUSES[server.status]) {

                /*

                Here there are 4 possibilities:

                    1. From an active state to an inactive one

                    2. From an inactive state to an active one

                    3. From an active state to a different active one

                    4. From an inactive state to a different inactive one

                The last two (3, 4) can be dealt with the same way

                */

                if (ACTIVE_STATES.indexOf(current_message) >= 0 &&

                    INACTIVE_STATES.indexOf(STATUSES[server.status]) >= 0) {

                    // from an active state to an inactive one

                    log_server_status_change(existing, server.status);

                    moved = existing.clone().appendTo("#machinesview-icon.standard .terminated");

                    set_machine_os_image(moved, "icon", "off", server_image);

                    existing.remove();

                    existing = moved;

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

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

                    if ($("div.terminated").find("div.machine-container").length > 0) {

                        $("div.terminated").show();

                    }

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

                    existing.find('.state').removeClass().addClass('state terminated-state');

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

                }

                else if (INACTIVE_STATES.indexOf(current_message) >= 0 &&

                         ACTIVE_STATES.indexOf(STATUSES[server.status]) >= 0) {

                    // From an inactive state to an active one

                    log_server_status_change(existing, server.status);

                    moved = existing.clone().appendTo("#machinesview-icon.standard .running");

                    set_machine_os_image(moved, "icon", "on", server_image);

                    existing.remove();

                    existing = moved;

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

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

                    if ($("div.terminated").find("div.machine-container").length == 0) {

                        $("div.terminated").hide();

                    }

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

                    existing.find('.state').removeClass().addClass('state running-state');

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

                }

                else {

                    // handling active to active or inactive to inactive changes

                    if (TRANSITIONS[current_message] && TRANSITIONS[current_message] != 'Rebooting') {

                        // don't do anything if it is still in transition

                    }

                    else if ((TRANSITIONS[current_message] == 'Rebooting' && server.status == 'ACTIVE') ||

                             (STATUSES['BUILD'] == current_message && server.status == 'ACTIVE')) {

                        // if it has been rebooted or just created

                        log_server_status_change(existing, server.status);

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

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

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

                        existing.find('.state').removeClass().addClass('state running-state');

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

                    }

                    else if (STATUSES[server.status] == "Rebooting") { 

                        // from running to rebooting

                        log_server_status_change(existing, server.status);

                        existing.find(".state").removeClass().addClass('state rebooting-state');

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

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

                    } else {

                        // in any other case just change the status and ignore spinners/waves

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

                        existing.appendTo("#machinesview-icon.standard .running");

                        existing.find('.state').removeClass().addClass('state running-state');

                    }

                }

            }

            // find and display ips

            var ips = get_public_ips(server);

            existing.find("a.ip span.public").text(ips['ip4']);

        }

        // if it doesn't exist and the server is not DELETED, make a new entry

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

            // clone the proper template and put basic values in

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

            machine.find(".scrollable").scrollable({vertical: true});

            machine.find("div.name span.name").text(server.name.substring(0,50));

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

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

            // check server status to select where to append the new server to

            if (ACTIVE_STATES.indexOf(STATUSES[server.status]) >= 0 ) {

                // append to running

                set_machine_os_image(machine, "icon", "on", server_image);

                machine.appendTo("#machinesview-icon.standard .running");

            } else {

                // append to terminated

                set_machine_os_image(machine, "icon", "off", server_image);

                machine.appendTo("#machinesview-icon.standard .terminated");

                if (server.status == "STOPPED") { //if server status us stopped is a different case than status unknown/error

                    machine.find('.state').removeClass().addClass('state terminated-state');

                } else {

                       machine.find('.state').removeClass().addClass('state error-state');

                }

            }

            //show spinner if server is still building or rebooting

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

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

                machine.find('.state').removeClass().addClass('state build-state');

            }

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

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

                machine.find('.state').removeClass().addClass('state rebooting-state');

            }

            // find and display flavor parameters

            var flavor_params = get_flavor_params(server.flavorRef);

            machine.find(".cpu-data").text(flavor_params['cpus']);

            machine.find(".ram-data").text(flavor_params['ram']);

            machine.find(".disk-data").text(flavor_params['disk']);

            // find and display image parameters

            var image_params = get_image_params(server.imageRef);

            machine.find(".image-data").text(image_params['name'].substring(0,15));

            machine.find(".image-size-data").text(image_params['size']);

            // find and display ips

            var ips = get_public_ips(server);

            machine.find("a.ip span.public").text(ips['ip4']);

        }

        /*

        Do some repeated actions that include:

            1. Update actions

            2. Metadata list updating

        */

        update_iconview_actions(server.id, server.status);

        if (!(server.metadata == undefined)) {

                list_metadata_keys(server.id, server.metadata.values);

        }

    });

    /*

    Do some standard stuff, repeated each time

    FIXME: Can these be moved to a new function?

    */

    $("div.running > div.large-spinner").hide();

    // show all separators and hide the last one

    $("#machinesview-icon.standard div.machine-container div.separator").show();

    $("#machinesview-icon.standard div.machine-container:last-child").find("div.separator").hide();

    // the terminated div shows only when terminated machines are available

    if ($("#machinesview-icon.standard .terminated div.name").length > 0) {

        $("div.terminated").fadeIn("slow");

    } else {

        $("div.terminated").fadeOut("slow");

    }

    // show message in case user has no servers!

    if ($('#machinesview-icon .machine-container').length < 2) {

        showWelcome();

    } else {

        hideWelcome();

    }

    // set confirm box position

    if (window.innerHeight - CONFIRMBOX_OFFSET < $('#machinesview-icon.standard').height()) {

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

    } else {

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

    }

}

// reposition multiple confirmation box on window resize

$(window).resize(function(){

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

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

    else

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

});

// update metadata list

function list_metadata_keys(serverID, keys) {

    // empty the list if it already exists

    $("#machinesview-icon.standard div.#" +serverID).find("div.items").empty();

    //start counter

    var i=0;

    // show values

    for (var key in keys) {

        $("#machinesview-icon.standard div.#" +serverID).find(".items").append("<div class='item'>" + key + "</div>");

        i++;

    }

    //hide the metadata controls if we have less than 3 metadata

    if (i <= 3) {

        $("#machinesview-icon.standard div.#" +serverID).find(".metadata-actions").hide();

    }

    //show the metadata controls if we have more than 3 metadata

    if (i > 3) {

        $("#machinesview-icon.standard div.#" +serverID).find(".metadata-actions").show();

    }

    $("#machinesview-icon.standard div.#" +serverID).find(".metadata-count").text(i);

}

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

    $('#machinesview-icon.standard #'+serverID+ ' .spinner').hide();

    $('#machinesview-icon.standard #'+serverID+ ' .action_error .action').text(action);

    $('#machinesview-icon.standard #'+serverID+ ' .action_error .code').text(status);

    $('#machinesview-icon.standard #'+serverID+ ' .action_error .message').text(responseText);

    $('#machinesview-icon.standard #'+serverID+ ' .action_error').show();

}

// basic functions executed on page load

if ( flavors.length == 0 && images.length == 0 ) {

    // configure flavors, this also calls update_vms(UPDATE_INTERVAL)

    update_flavors();

    // populate image list

    update_images();

} else if ( flavors.length == 0 && images.length != 0 ) {

    // configure flavors, this also calls update_vms(UPDATE_INTERVAL)

    update_flavors();

} else if ( flavors.length != 0 && images.length == 0 ) {