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>

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

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

                        {% trans "CPU" %} <img src="static/cpu-bar.png" class="metadata-bar" /><br />

                        {% trans "RAM" %} <img src="static/ram-bar.png" class="metadata-bar" /><br />

                        {% trans "S.Disk" %} <img src="static/cpu-bar.png" class="metadata-bar" /><br />

                        {% trans "Net" %} <img src="static/net-bar.png" class="metadata-bar" /><br /><br />

                        {% trans "details" %}

                    </div>

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

                        <div class="metadata-left">

                            {% trans "Metadata" %}: <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');

// 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 img.logo").live('click', function(){

    $(this).parent().parent().find("a.action-console").click();

    return false;

});

// open console on connect arrow click

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

    $(this).parent().parent().find("a.action-console").click();

    return false;

});

// open console on connect arrow border click

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

    $(this).parent().parent().find("a.action-console").click();

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

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

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

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

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

    } else {

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

                    moved.find("img.logo").attr("src",'static/icons/machines/medium/' + server_image + '-off.png');

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

                    moved.find("img.logo").attr('src','static/icons/machines/medium/' + server_image + '-on.png');

                    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 {

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