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

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

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

    <div id="machinesview_content">

        <div class="actions">

            <a id="action-start">{% trans "Start" %}</a>

            <a id="action-reboot">{% trans "Reboot" %}</a>

            <a id="action-shutdown">{% trans "Shutdown" %}</a>

            <br />

            <a id="action-destroy">{% trans "Destroy" %}</a>

            <br />

            <a id="action-details">{% trans "Show Details" %}</a>

            {% comment %}<a id="action-group">{% trans "Add to group" %}</a>{% endcomment %}

            <br />

            <a id="action-console">{% trans "Console" %}</a>

            <a id="action-connect">{% trans "Connect" %}</a>

            <br />

            {% comment %}

            <a id="action-attach">{% trans "Attach disk" %}</a>

            <a id="action-detach">{% trans "Detach disk" %}</a>

            <br />

            <a id="action-network-connect">{% trans "Connect to network" %}</a>

            <a id="action-network-disconnect">{% trans "Disconnect from net" %}</a>

            {% endcomment %}

        </div>

        <table class="list-machines" style="display: none">

            <thead>

                <tr>

                    <th class="selection select-running">

                        <input type="checkbox"/>

                        <!-- Drop down selector is commented out for v0.5

                        <div class="expand-icon"></div>

                        -->

                    </th>

                    <th class="vmos">{% trans "OS" %}</th>

                    <th class="vmname">{% trans "Name" %}</th>

                    <th class="vmflavor">{% trans "Flavor" %}</th>

                    <th class="vmgroup">{% trans "Group" %}</th>

                    <th class="vmstatus">{% trans "Status" %}</th>

                </tr>

            </thead>

            <tbody class="machines"></tbody>

        </table>

        <!-- Drop down selector is commented out for v0.5

        <ul class="dropdown-selector" style="display: none">

            <li class="select-all" ><a href="#">{% trans "all" %}</a></li>

            <li class="select-none"><a href="#">{% trans "none" %}</a></li>

            <li class="select-group"><a href="#">{% trans "group" %}</a></li>

        </ul>

        -->

    </div>

</div>

<script>

// select/deselect all from checkbox widget of table headers

$("#machinesview .list table thead tr th.selection :checkbox").live('change', function() {

    if ( $(this).is(":checked") ) {

        $(":checkbox").attr("checked", true);

    }

    else {

        $(":checkbox").attr("checked", false);

    }

    update_listview_actions();

    return false;

});

/* Drop down selector is commented out for v0.5

// select all from drop down menu

$("#machinesview .list ul.dropdown-selector li.select-all a").live('click', function() {

    $(":checkbox").attr("checked", true);

    $(".dropdown-selector").slideToggle('medium');

    update_listview_actions();

    return false;

});

// select none from drop down menu

$("#machinesview .list ul.dropdown-selector li.select-none a").live('click', function() {

    $(":checkbox").attr("checked", false);

    $(".dropdown-selector").slideToggle('medium');

    update_listview_actions();

    return false;

});

// select group from drop down menu

$("#machinesview .list ul.dropdown-selector li.select-group a").live('click', function() {

    $(":checkbox").attr("checked", true);

    $(".dropdown-selector").slideToggle('medium');

    update_listview_actions();

    return false;

});

// menu toggle, running menu

$("#machinesview .list table.list-machines thead tr th.selection .expand-icon").click( function (obj) {

    $(".dropdown-selector").slideToggle('medium');

    return false;

});

*/

// TODO: This should be populated with more rules for all available states

//a key represents an action, while values are lists with permitted states to which the action can be applied

var actions = { 'reboot':        ['UNKOWN', 'ACTIVE', 'REBOOT', 'multiple'],

                'shutdown':      ['UNKOWN', 'ACTIVE', 'REBOOT', 'multiple'],

                'connect':       ['UNKOWN', 'ACTIVE'],

                //'network-connect':       ['UNKOWN', 'ACTIVE'],

                //'network-disconnect':    ['UNKOWN', 'ACTIVE', 'network'],

                'console':       ['UNKOWN', 'ACTIVE', 'multiple'],

                'details':       ['UNKOWN', 'ACTIVE', 'REBOOT', 'STOPPED'],

                'start':         ['UNKOWN', 'STOPPED', 'multiple'],

                'destroy':       ['UNKOWN', 'ACTIVE', 'STOPPED', 'REBOOT', 'ERROR', 'BUILD', 'multiple'],

                //'group':         ['UNKOWN', 'ACTIVE', 'STOPPED', 'REBOOT','multiple'],

               };

// on checkbox click, update the actions

$("#machinesview .list tbody input[type='checkbox']").live('change', function() {

    update_listview_actions();

    pending_actions = [];

    $(".selected").removeClass('selected');

    update_confirmations();

});

$("div.confirm_multiple button").click(function() {

    $(".selected").removeClass('selected');

});

// destroy action

$("#machinesview .list a.enabled#action-destroy").live('click', function() {

    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");

    $("#machinesview .list .selected").removeClass('selected');

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

    pending_actions = []; // reset pending actions

    checked.each(function(i,c) {

        serverID=c.id;

        serverName = $('#machinesview .list #'+serverID+' span.name').text();

        pending_actions.push([destroy, serverID]);

    });

    update_confirmations();

    return false;

});

$("#machinesview .list a.enabled#action-reboot").live('click', function() {

    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");

    $("#machinesview .list .selected").removeClass('selected');

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

    pending_actions = []; // reset pending actions

    checked.each(function(i,c) {

        serverID=c.id;

        serverName = $('#machinesview .list #'+serverID+' span.name').text();

        pending_actions.push([reboot, serverID]);

    });

    update_confirmations();

    return false;

});

$("#machinesview .list a.enabled#action-start").live('click', function() {

    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");

    $("#machinesview .list .selected").removeClass('selected');

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

    pending_actions = []; // reset pending actions

    checked.each(function(i,c) {

        serverID=c.id;

        serverName = $('#machinesview .list #'+serverID+' span.name').text();

        pending_actions.push([start, serverID]);

    });

    update_confirmations();

    return false;

});

$("#machinesview .list a.enabled#action-shutdown").live('click', function() {

    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");

    $("#machinesview .list .selected").removeClass('selected');

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

    pending_actions = []; // reset pending actions

    checked.each(function(i,c) {

        serverID=c.id;

        serverName = $('#machinesview .list #'+serverID+' span.name').text();

        pending_actions.push([shutdown, serverID]);

    });

    update_confirmations();

    return false;

});

$("#machinesview .list a.enabled#action-console").live('click', function() {

    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");

    $("#machinesview .list .selected").removeClass('selected');

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

    pending_actions = []; // reset pending actions

    checked.each(function(i,c) {

        serverID=c.id;

        serverName = $('#machinesview .list #'+serverID+' span.name').text();

        pending_actions.push([open_console, serverID]);

    });

    update_confirmations();

    return false;

});

function update_machines_view(data){

    /*

    Go through the servers in the input data. Update existing entries, add

    new ones to the list

    */

    tableData = vmTable.fnGetData();

    $.each(data.servers.values, function(i,server){

        current = -1;

        // check server status to select the appropriate OS icon, defaults to on state

        osTag = os_icon(server.metadata);

        var osIcon = osTag + "-on.png", imgStr, imgSrc;

        // check if the server already exists in the datatable

        tableData.forEach(function(row,index){

            if (row[0].split(' ')[2].replace('id=','') == server.id){

                current = index;

            }

        });

        if (current != -1) { // if it's there, update the values

            // get current status description, including non api states

            var server_row = $('#machinesview .list #' + server.id).parent().parent();

            var status_desc = server_row.find('span.status').text();

            // firebug console logging

            try {

                console.info(server.name + ' from ' + status_desc + ' to ' + STATUSES[server.status]);

            } catch(err) {}

            // when server is in deleted status it must be removed from the list

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

                vmTable.fnDeleteRow(current);

            } else { // when server is not deleted, it should be updated

                if (['BUILD','ACTIVE','REBOOT'].indexOf(server.status) >= 0 &&

                    [STATUSES['STOPPED'], STATUSES['ERROR'], STATUSES['UNKNOWN'],

                     TRANSITIONS['Starting']].indexOf(server_row.find('span.status').text()) >= 0) {

                    // from stopped, on error or starting to building, active or rebooting

                    // starting is not an api state, it means the server is stopped or on error

                    tableData[current][0] = "<input class="+server.status+" id="+server.id+" type=checkbox>";

                    imgSrc = "static/icons/indicators/small/wave.gif";

                    imgStr = "<img class=list-logo src=" + imgSrc + " title=" + osTag + "></img>";

                    tableData[current][1] = "<span class=imagetag>" + osTag + "</span>" + imgStr;

                    tableData[current][2] = "<a class=name><span class=name>" + server.name.substring(0,60) + "</span></a>";

                    //tableData[current][4] = "group"; //TODO

                    tableData[current][5] = "<span class=status>" + STATUSES[server.status] + "</span>";

                    vmTable.fnUpdate(tableData[current],current);

                    setTimeout("$('#machinesview .list #"+server.id+"').parent().parent().find('.list-logo').attr('src','static/icons/machines/small/" + osIcon + "')", 1600);

                } else if (['STOPPED','ERROR', 'UNKNOWN'].indexOf(server.status) >= 0 &&

                           [STATUSES['ACTIVE'], STATUSES['BUILD'], STATUSES['REBOOT'],

                            TRANSITIONS['Shutting down']].indexOf(server_row.find('span.status').text()) >= 0) {

                    tableData[current][0] = "<input class="+server.status+" id="+server.id+" type=checkbox>";

                    imgSrc = "static/icons/indicators/small/wave.gif";

                    imgStr = "<img class=list-logo src=" + imgSrc + " title=" + osTag + "></img>";

                    tableData[current][1] = "<span class=imagetag>" + osTag + "</span>" + imgStr;

                    tableData[current][2] = "<a class=name><span class=name>" + server.name.substring(0,60) + "</span></a>";

                    //tableData[current][4] = "group"; //TODO

                    tableData[current][5] = "<span class=status>" + STATUSES[server.status] + "</span>";

                    vmTable.fnUpdate(tableData[current],current);

                    setTimeout("$('#machinesview .list #"+server.id+"').parent().parent().find('.list-logo').attr('src','static/icons/machines/small/" + osTag + "-off.png')", 1600);

                } else if ( STATUSES[server.status] == server_row.find('span.status').text()) {

                } else if (server.status == 'ACTIVE' &&

                           [STATUSES['BUILD'],TRANSITIONS['Rebooting']].indexOf(server_row.find('span.status').text()) >= 0) {

                    tableData[current][0] = "<input class="+server.status+" id="+server.id+" type=checkbox>";

                    imgSrc = "static/icons/indicators/small/wave.gif";

                    imgStr = "<img class=list-logo src=" + imgSrc + " title=" + osTag + "></img>";

                    tableData[current][1] = "<span class=imagetag>" + osTag + "</span>" + imgStr;

                    tableData[current][2] = "<a class=name><span class=name>" + server.name.substring(0,60) + "</span></a>";

                    //tableData[current][4] = "group"; //TODO

                    tableData[current][5] = "<span class=status>" + STATUSES[server.status] + "</span>";

                    vmTable.fnUpdate(tableData[current],current);

                    setTimeout("$('#machinesview .list #"+server.id+"').parent().parent().find('.list-logo').attr('src','static/icons/machines/small/" + osIcon + "')", 1600);

                }

            }

            update_listview_actions();

        } else if (server.status != "DELETED") { // does not exist, we should create it

            // check server status to select the appropriate OS icon

            if (['ERROR', 'STOPPED', 'UNKNOWN'].indexOf(server.status) >= 0) {

                osIcon = "static/icons/machines/small/" + osTag + "-off.png";

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

                osIcon = "static/icons/indicators/small/progress.gif";

            } else {

                osIcon = "static/icons/machines/small/" + osTag + "-on.png";

            }

            // find flavor parameters

            var flavorLabel;

            if ( flavors.length > 0 ) {

                var current_flavor = '';

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

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

                        current_flavor = flavors[i];

                    }

                }

                var flavor_label = '';

                if (current_flavor['cpu'] == '1') {

                    flavorLabel = '1 CPU, ';

                } else {

                    flavorLabel = current_flavor['cpu'] + ' CPUs, ';

                }

                flavorLabel = flavorLabel + current_flavor['ram'] + 'MB, ' + current_flavor['disk'] + 'GB';

            } else {

                flavorLabel = 'No flavor data';

            }

            // add new row to the table

            vmTable.fnAddData([

                "<input class=" + server.status + " id=" + server.id + " type=checkbox>",

                "<span class=imagetag>" + osTag + "</span><img class=list-logo src=" + osIcon +

                    " title=" + osTag + ">",

                "<a class=name><span class=name>" + server.name.substring(0,60) + "</span></a>",

                "<a class=flavor><span>"+ flavorLabel + "</span></a>",

                "group",

                "<span class=status>" + STATUSES[server.status] + "</span>"

            ]);

        }

    });

    update_listview_actions();

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

    // in case there are no data, leave the page empty

    if ($("#machinesview .list table.list-machines tbody").length > 0) {

        $("#machinesview .list div.dataTables_filter").show();

        $("#machinesview .list div.dataTables_filter input").show();

        $("#machinesview .list table.list-machines").show();

        $("#machinesview .list div.actions").show();

    }

    // show message in case user has no servers!

    if ($("#machinesview .list tbody.machines .dataTables_empty").length > 0) {

        standard_view();

    } else {

        hideWelcome();

        $("#machinesview_content").fadeIn("fast");

    }

    // set confirm box position

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

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

    else

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

    $('#machinesview .list .dataTables_scrollHeadInner table').attr('style','');

    $('#machinesview .list .dataTables_scrollHeadInner th').attr('style','');

}

function display_success(serverID) {

    // do nothing

}

// indicate that the requested action was not completed

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

    osIcon = $('#machinesview .list #'+serverID).parent().parent().find('.list-logo');

    osIcon.attr('src',osIcon.attr('os'));

    ajax_error(status, serverID, action, responseText);

}

var vmTable = $("div.list table.list-machines").dataTable({

    "bInfo": false,

    "bRetrieve": true,

    "bPaginate": false,

    "bAutoWidth": false,

    "bSort": true,

    "bStateSave": true,

    "sScrollY": "270px",

    "sScrollX": "515px",

    "sScrollXInner": "500px",

    "aoColumnDefs": [

        { "bSortable": false, "aTargets": [ 0 ] }

    ]

});

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

}

// reposition multiple confirmation box on window resize

$(window).resize(function(){

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

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

    else

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

});

// set the label of the multiple buttons

$('.confirm_multiple button.yes').text({% trans 'Confirm' %});

$('.confirm_multiple button.no').text({% trans 'Cancel' %});

</script>