Synnefo

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

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

            <br />

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

            <br />

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

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

            <br />

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

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

        </div>

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

            <thead>

                <tr>

                    <th class="selection select-running">

                        <input type="checkbox"/>

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

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

});

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

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

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

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

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