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

<div id="machinesview-single" class="single">

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

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

        <div class="upper">

            <div class="column1">

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

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

                <img src="static/icons/machines/large/ubuntu-on.png" class="single-image" />

                <div class="state">

                    <span class="state-label">{% trans "Running" %}</span>

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

            <div class="column2">

                <div class="machine-labels">

                    <div class="machine-label name">{% trans "Name" %}:</div>

                    <div class="machine-label cpus">{% trans "CPUs" %}:</div>

                    <div class="machine-label ram">{% trans "RAM (MB)" %}:</div>

                    <div class="machine-label disk">{% trans "System Disk (GB)" %}:</div>

                    <div class="machine-label image-name">{% trans "Image Name" %}:</div>

                    <div class="machine-label image-size">{% trans "Image Size (GB)" %}:</div>

                    <div class="machine-label ipv4">{% trans "Public IPv4" %}:</div>

                    <div class="machine-label ipv6">{% trans "Public IPv6" %}:</div>

                </div>

                <div class="machine-details">

                    <div class="machine-detail name">My Desktop</div>

                    <div class="machine-detail cpus">4</div>

                    <div class="machine-detail ram">2048</div>

                    <div class="machine-detail disk">100</div>

                    <div class="machine-detail image-name">windos_XP_blah_blah</div>

                    <div class="machine-detail image-size">2.3</div>

                    <div class="machine-detail ipv4">no ipv4</div>

                    <div class="machine-detail ipv6">2001:db8:1f70::999:de8:7648:6e8</div>

                </div>

                <div class="tags">

                    <div class="tags-header">

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

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

                    </div>

                    <div class="tags-content">

                        <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="single-actions">

                <div class="action-container start">

                    <div class="single-action action-start">{% trans "Start" %}</div>

                    <div class="confirm_single">

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

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

                    </div>

                </div>

                <div class="action-container reboot">

                    <div class="single-action action-reboot">{% trans "Reboot" %}</div>

                    <div class="confirm_single">

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

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

                    </div>

                </div>

                <div class="action-container shutdown">

                    <div class="single-action action-shutdown">{% trans "Shutdown" %}</div>

                    <div class="confirm_single">

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

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

                    </div>

                </div>

                <div class="action-container console">

                    <div class="single-action action-console">{% trans "Console" %}</div>

                    <div class="confirm_single">

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

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

                    </div>

                </div>

                <div class="action-container destroy">

                    <div class="single-action action-destroy">{% trans "Destroy" %}</div>

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

            <div class="single-cpu">

                <div class="cpu-usage">

                    {% trans "CPU Utilization" %}

                </div>

                <div class="cpu-graph">

                    <img src="http://stats.okeanos.grnet.gr/test/cpu-ts.png" class="stats" />

                </div>

            </div>

            <div class="single-network">

                <div class="network-usage">

                    {% trans "Network Utilization" %}

                </div>

                <div class="network-graph">

                    <img src="http://stats.okeanos.grnet.gr/test/net-ts.png" class="stats" />

                </div>

            </div>

        </div>

    </div>

    <div class="column3" style="display:none;">

        <div class="controls">

            <div class="previous" style="display:block;">

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

                <div class="prev-label">

                    {% trans "previous" %}

                </div>

            </div>

            <div class="next" style="display:block;">

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

                <div class="next-label">

                    {% trans "next" %}

                </div>

            </div>

        </div>

        <div class="separator">

        </div>

        <div class="servers">

            <div class="server-name" id="servers-widget-template" style="display:none;">server1</div>

        </div>

    </div>

</div>

<script>

init_action_indicator_handlers('single');

//hide the all of the tags contents

$("#machinesview-single.single .tags-content").hide();

//toggle the component with class tags-content

$("#machinesview-single.single div.tags-header").live('click', function() {

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

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

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

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

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

    } else {

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

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

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

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

    }

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

    return false;

});

// indicate that the requested action was not completed

function display_failure(status, serverID, action, responseText) {

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

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

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

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

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

}

// cancel action

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

    pending_actions = [];

    $('#machinesview-single').find('div.single-action').removeClass("selected");

    update_confirmations();

});

// update metadata list

function list_metadata_keys(serverID, keys) {

    // empty the list if it already exists

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

    //start counter

    var i=0;

    // show values

    for (var key in keys) {

        $("#machinesview-single.single div.#" +serverID).find(".items").append("<div class='item'>" + key + ": " + keys[key].substring(0,40) + "</div>");

        i++;

    }

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

    if (i <= 3) {

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

    }

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

    if (i > 3) {

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

    }

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

}

//show error popup box

$("#machinesview-single.single 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();

});

//confirm action

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

    var serverID = $(this).closest(".single-container").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

            // change the status text in cases where no api state exists

            if (action[0] == start) {

                $(this).closest(".single-container").find(".column1 .state-label").text(TRANSITIONS['Starting']);

                $(this).closest(".single-container").find(".column1 .state").removeClass().addClass('state starting-state');

                $(this).closest(".single-container").find(".column1 .state .spinner").show();

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

                $(this).closest(".single-container").find(".column1 .state-label").text(TRANSITIONS['Shutting down']);

                $(this).closest(".single-container").find(".column1 .state").removeClass().addClass('state shutting-state');

                $(this).closest(".single-container").find(".column1 .state .spinner").show();

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

                $(this).closest(".single-container").find(".column1 .state-label").text(TRANSITIONS['Rebooting']);

                $(this).closest(".single-container").find(".column1 .state").removeClass().addClass('state rebooting-state');

                $(this).closest(".single-container").find(".column1 .state .spinner").show();

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

                $(this).closest(".single-container").find(".column1 .state-label").text(TRANSITIONS['Destroying']);

                $(this).closest(".single-container").find(".column1 .state").removeClass().addClass('state destroying-state');

                $(this).closest(".single-container").find(".column1 .state .spinner").show();

            }

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

        }

    }

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

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

    $(this).parent().parent().find('.state').children('.spinner').show();

    update_confirmations();

    return false;

});

// intercept manage metadata click

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

    // get server name and server ID

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

    var serverName = $(this).closest('.machine-container').find("div.machine-details div.name").text();

    if (['BUILD', 'ACTIVE', 'REBOOT'].indexOf($(this).parent().parent().parent().parent().parent().find(".status").text()) < 0) {

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

    } else {

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

    }

    // set server name to all related metadata dialogs

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

    // set server id to all related metadata dialogs

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

    show_metadata_wizard();

    return false;

});

// intercept start click

$("#machinesview-single.single div.action-start").live('click', function(){

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

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

    $('#machinesview-single').find('div.single-action').removeClass('selected');

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

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

    // reset pending actions so not to allow multiple actions in this view

    pending_actions = [];

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

    update_confirmations();

    return false;

});

// intercept shutdown click

$("#machinesview-single.single div.action-shutdown").live('click', function(){

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

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

    $('#machinesview-single').find('div.single-action').removeClass('selected');

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

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

    // reset pending actions so not to allow multiple actions in this view

    pending_actions = [];

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

    update_confirmations();

    return false;

});

// intercept reboot click

$("#machinesview-single.single div.action-reboot").live('click', function(){

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

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

    $('#machinesview-single').find('div.single-action').removeClass('selected');

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

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

    // reset pending actions so not to allow multiple actions in this view

    pending_actions = [];

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

    update_confirmations();

    return false;

});

// intercept destroy click

$("#machinesview-single.single div.action-destroy").live('click', function(){

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

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

    $('#machinesview-single').find('div.single-action').removeClass('selected');

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

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

    // reset pending actions so not to allow multiple actions in this view

    pending_actions = [];

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

    update_confirmations();

    return false;

});

// intercept console click

$("#machinesview-single.single div.action-console").live('click', function(){

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

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

    $('#machinesview-single').find('div.single-action').removeClass('selected');

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

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

    // reset pending actions so not to allow multiple actions in this view

    pending_actions = [];

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

    update_confirmations();

    return false;

});

// open console on connect arrow click

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

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

    return false;

});

// open console on connect arrow border click

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

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

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

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

        existing_link = $('#machinesview-single div.column3 #link-' + server.id);

        var current_Id = current_serverId();

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

        // defensive coding - that shouldn't happen normally

        while (existing.length > 1){

            existing.remove();

        }

        // 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(".state-label").text();

        // server already exists in DOM

        if (existing.length){

            $("#machinesview-single.single div.single-container:last-child").find("div.separator").show();

            //  if the status is deleted, delete it from the DOM

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

                existing.remove();

                existing_link.remove();

                //if the deleted vm is the displayed one, display the 1st vm

                if (server.id == current_Id) {

                    $("#machinesview-single.single div.single-container:eq(1)").show()

                    $('#machinesview-single.single .column3').find('.server-name:eq(1)').addClass('column3-selected');

                }

                try {

                    console.info(existing.find(".machine-details div.name").text() + ' removed');

                } catch(err) {}

            }

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

                    existing.find("img.single-image").attr("src","static/icons/machines/large/" + server_image + '-off.png');

                    existing.find(".column1 .state-label").text(STATUSES[server.status]);

                    existing.find(".connect-border").hide();

                    existing.find(".connect-arrow").hide();

                    existing.find(".column1 .state .spinner").hide();

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

                    existing.find(".column1 .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);

                    existing.find("img.single-image").attr("src","static/icons/machines/large/" + server_image + '-on.png');

                    existing.find(".column1 .state-label").text(STATUSES[server.status]);

                    existing.find(".connect-border").show();

                    existing.find(".connect-arrow").show();

                    existing.find(".column1 .state .spinner").hide();

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

                    existing.find(".column1 .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(".column1 .state-label").text(STATUSES[server.status]);

                        existing.find(".connect-border").show();

                        existing.find(".connect-arrow").show();

                        existing.find(".column1 .state .spinner").hide();

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

                        existing.find(".column1 .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(".column1 .state-label").text(STATUSES[server.status]);

                    }

                }

            }

            // find and display ips

            var ips = get_public_ips(server);

            existing.find(".machine-details div.ipv4").text(ips['ip4']);

            existing.find(".machine-details div.ipv6").text(ips['ip6']);

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

            // If it does not exist and it's not deleted, we should create it

            var serverwidget = $("#servers-widget-template").clone().attr("id", 'link-' + server.id);

            if (server.name.length > 18) {

                serverwidget.text(server.name.substring(0,15) + '...');

            } else {

                serverwidget.text(server.name)

            }

            serverwidget.appendTo('.servers');

            serverwidget.show();

            //find and hide the previously selected server

            $('.single').find('.single-container').hide();

            $('.single .column3').find('.column3-selected').removeClass('column3-selected');

            //create and select the new one

            var machine = $("#machinesview-single.single #machine-container-template").clone().attr("id", server.id);

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

            machine.find(".machine-details div.name").text(server.name.substring(0,30));

            machine.find("img.single-image").attr("src","static/icons/machines/large/"+server_image+'-on.png');

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

            machine.find(".column1 .state-label").text(STATUSES[server.status]);

            // find and display flavor parameters

            var flavor_params = get_flavor_params(server.flavorRef);

            machine.find(".machine-details div.cpus").text(flavor_params['cpus']);

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

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

            // find and display image parameters

            var image_params = get_image_params(server.imageRef);

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

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

            // find and display ips

            var ips = get_public_ips(server);

            machine.find(".machine-details div.ipv4").text(ips['ip4']);

            machine.find(".machine-details div.ipv6").text(ips['ip6']);

            //show off image if server is not active

            if (['BUILD', 'ACTIVE', 'REBOOT'].indexOf(server.status) < 0){

                    machine.find("img.single-image").attr("src","static/icons/machines/large/"+server_image+'-off.png');

                    machine.find(".connect-border").hide();

                    machine.find(".connect-arrow").hide();

                    machine.find(".column1 .state").removeClass().addClass("state terminated-state");

            }

            //show spinner while machine is building or rebooting

            if (server.status == 'BUILD' ||

                [TRANSITIONS['Starting'], TRANSITIONS['Shutting down']].indexOf(existing.find(".status").text()) >= 0 ) {

                machine.find(".column1 .state .spinner").show();

                machine.find(".connect-border").hide();

                machine.find(".connect-arrow").hide();

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

            }

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

                machine.find(".column1 .state").find('.spinner').show();

                machine.find(".connect-border").hide();

                machine.find(".connect-arrow").hide();

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

            }

            machine.appendTo("#machinesview-single.single");

            //disable reboot and shutdown actions while machine is building

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

                $('#machinesview-single.single div.#' + server.id + ' div.action-reboot').hide();

                $('#machinesview-single.single div.#' + server.id + ' div.action-shutdown').hide();

            }

            // show console action only on active servers

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

                $('#machinesview-single.single div.#' + server.id + ' div.action-console').show();

                $('#machinesview-single.single div.#' + server.id + ' div.action-start').hide();

                machine.find(".connect-border").show();

                machine.find(".connect-arrow").show();

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

                $('#machinesview-single.single div.#' + server.id + ' div.action-console').hide();

            } else {

                $('#machinesview-single.single div.#' + server.id + ' div.action-console').hide();

                $('#machinesview-single.single div.#' + server.id + ' div.action-reboot').hide();

                $('#machinesview-single.single div.#' + server.id + ' div.action-shutdown').hide();

            }

            //show the first machine and select it in the widget

            $('.single-container:eq(1)').show();

            $('.single .column3').find('.server-name:eq(1)').addClass('column3-selected');

        }

        update_iconview_actions(server.id, server.status);

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

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

        }

    });