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

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

            <div class="state">

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

            </div>

            <div class="single-actions">

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

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

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

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

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

            </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 class="machine-label groups">{% trans "Groups" %}:</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 class="machine-detail groups">

                    <div class="machine-detail group">group</div>

                </div>

            </div>

        </div>

        <div class="disks">

            {% trans "disks" %}<span class="toggler">&#710;</span>

        </div>

        <div class="disks-content">

        </div>

        <div class="networks">

            {% trans "networks" %}<span class="toggler">&#710;</span>

        </div>

        <div class="networks-content">

        </div>

        <div class="stats">

            {% trans "stats" %}<span class="toggler">&#710;</span>

        </div>

        <div class="stats-content">

        </div>

    </div>

    <div class="column3">

        <div class="controls">

            <div class="previous">

                <{% trans "previous" %}

            </div>

            <div class="next">

                {% trans "next" %}>

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

//hide the all of the info contents

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

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

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

// intercept start click

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

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

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

    var found = false;

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

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

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

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

    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it

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

            pending_actions[i][0] = start;

            found = true

        }

    }

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

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

    update_confirmations()

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

        //hide next button if there is only one vm

        if (data.servers.values.length == 1) {

            $("#machinesview-single.single .column3 .next").hide();

        }

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

                try {

                    console.info(existing.find("div.name span.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(".state-label").text(STATUSES[server.status]);

                }

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

                }

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

                    }

                    else {

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

                        existing.find(".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 previous selected server

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

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

            //create and select the new one

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

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

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

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

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

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

            // find and display flavor parameters

            var CPUs, RAM, disk, image_name, image_size;

            if ( flavors.length > 0 ) {

                var current_flavor = '';

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

                    if (flavors[i]['id'] == server.flavorRef) {

                        current_flavor = flavors[i];

                    }

                }

                CPUs = current_flavor['cpu'];

                RAM = current_flavor['ram'];

                disk = current_flavor['disk'];

            } else {

                CPUs = 0;

                RAM = 0;

                disk = 0;

            }

            if ( images.length > 0 ) {

                var current_image = '';

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

                    if (images[i]['id'] == server.imageRef) {

                        current_image = images[i];

                    }

                }

                image_name = current_image['name'];

                image_size = current_image['metadata']['values']['size'];

            } else {

                image_name = ''

                image_size = ''

            }

            machine.find(".machine-details div.cpus").text(CPUs);

            machine.find(".machine-details div.ram").text(RAM);

            machine.find(".machine-details div.disk").text(disk);

            machine.find(".machine-details div.image-name").text(image_name.substring(0,15));

            machine.find(".machine-details div.image-size").text(image_size);

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

            }

            //show spinner while machine is building

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

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

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

            }

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

            } 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('selected');

        }

    });

    $("#machinesview-single.single > div.large-spinner").hide();

    // show message in case user has no servers!

    //if ($('.single-container').length < 2) {

    //    showWelcome();

    //} else {

    //    hideWelcome();

    //}

    // set confirm box position

    if (window.innerHeight - 220 < $('#machinesview-single').height())

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

    else

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

    //enable widget links

    $(".server-name").live('click', function() {

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

        $('.single').find('#' + $(this).attr('id').substring(5)).show();

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

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

        $(".single .column3 .previous").show();

        $(".single .column3 .next").show();

        if ($(this).attr("id") == $(".single .column3 .server-name:eq(1)").attr("id")) {

            $(".single .column3 .previous").hide();

        } else if ($(this).attr("id") == $(".single .column3 .server-name:last").attr("id")) {

            $(".single .column3 .next").hide();

        }

    });

    //toggle content

    $("div.disks").toggle(function() {

            $(this).find('.toggler').html("ˇ");

            $(this).next(".disks-content").slideToggle(600);

            return false;

        }, function() {

            $(this).find('.toggler').html('ˆ');

            $(this).next(".disks-content").slideToggle(600);

            return false;

    });

    $("div.networks").toggle(function() {

            $(this).find('.toggler').html("ˇ");

            $(this).next(".networks-content").slideToggle(600);

            return false;

        }, function() {

            $(this).find('.toggler').html('ˆ');

            $(this).next(".networks-content").slideToggle(600);

            return false;

    });

    $("div.stats").toggle(function() {

            $(this).find('.toggler').html("ˇ");

            $(this).next(".stats-content").slideToggle(600);

            return false;

        }, function() {

            $(this).find('.toggler').html('ˆ');

            $(this).next(".stats-content").slideToggle(600);

            return false;

    });

    if ($.cookie('server')) {

        $('div#link-' + $.cookie('server')).click();

        $.cookie('server', null);

    }

    //if it is the last vm, hide the next button

    if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:last").attr("id")) {

        $("#machinesview-single.single .column3 .next").hide()

    } else {

        $("#machinesview-single.single .column3 .next").show()

    }

    //if it is the first vm, hide the prev button

    if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:eq(1)").attr("id")) {

        $("#machinesview-single.single .column3 .previous").hide()

    } else {

        $("#machinesview-single.single .column3 .previous").show()

    }

}

//enable prev-next buttons

$("#machinesview-single.single .column3 .previous").live('click', function(){

    if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:eq(1)").attr("id")) {

        return false;

    } else {

        current_server = $('#machinesview-single.single .column3').find('.selected').attr("id").substring(5);

        $('#machinesview-single.single').find('#' + current_server).hide();

        $('#machinesview-single.single').find('#' + current_server).prev().show();

        $('#machinesview-single.single .column3').find('#link-' + current_server).removeClass('selected');

        $('#machinesview-single.single .column3').find('#link-' + current_server).prev().addClass('selected');

        if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:eq(1)").attr("id")) {

            $(this).hide()

        }

        $("#machinesview-single.single .column3 .next").show()

        return false;

    }

});

$("#machinesview-single.single .column3 .next").live('click', function(){

    if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:last").attr("id")) {

        return false;

        } else {

        current_server = $('#machinesview-single.single .column3').find('.selected').attr("id").substring(5);

        $('#machinesview-single.single').find('#' + current_server).hide();

        $('#machinesview-single.single').find('#' + current_server).next().show();

        $('#machinesview-single.single .column3').find('#link-' + current_server).removeClass('selected');

        $('#machinesview-single.single .column3').find('#link-' + current_server).next().addClass('selected');

        //if it is the last vm, hide the next button

        if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:last").attr("id")) {

            $(this).hide()

        }

        $("#machinesview-single.single .column3 .previous").show();

        return false;

    }

});

//hide prev button on startup

$("#machinesview-single.single .column3 .previous").hide()

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

    // populate image list

    update_images();

    update_vms(UPDATE_INTERVAL);

} else {

    // start updating vm list

    update_vms(UPDATE_INTERVAL);

}

//FIXME: Hide and show welcome depending on number of machines

hideWelcome();

</script>