Synnefo

{% load i18n %}

<div id="machinesview_wrapper" class="list">

    <div id="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-band">{% trans "Out of band" %}</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 id="selection" class="select-running">

                        <input type="checkbox"/>

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

                    </th>

                    <th id="os">{% trans "OS" %}</th> 

                    <th id="name">{% trans "Name" %}</th> 

                    <th id="flavor">{% trans "Flavor" %}</th> 

                    <th id="group">{% trans "Group" %}</th>

                    <th id="status">{% 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

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

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

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

    }

    else {

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

    }

        updateActions();

        return false;

});

// select all from drop down menu

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

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

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

        updateActions();

        return false;        

});

// select none from drop down menu

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

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

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

        updateActions();

        return false;        

});

// select group from drop down menu

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

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

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

        updateActions();

        return false;

});

// menu toggle, running menu

$("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':                ['ACTIVE', 'REBOOT', 'multiple'],

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

                                'connect':                ['ACTIVE', ],

                                'disconnect':        ['ACTIVE', 'network'],

                                'band':                        ['ACTIVE', 'REBOOT'],

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

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

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

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

                           };

// on checkbox click, update the actions

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

    updateActions();

    pending_actions = [];

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

    update_confirmations(); 

});

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

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

});

// destroy action

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

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

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

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

        pending_actions = []; // reset pending actions

        checked.each(function(i,c) {

                serverID=c.id;

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

                pending_actions.push([destroy, serverID]);

        });

        update_confirmations();

        return false;

});

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

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

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

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

        pending_actions = []; // reset pending actions

        checked.each(function(i,c) {

                serverID=c.id;

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

                pending_actions.push([reboot, serverID]);

        });

        update_confirmations();

        return false;

});

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

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

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

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

        pending_actions = []; // reset pending actions

        checked.each(function(i,c) {

                serverID=c.id;

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

                pending_actions.push([start, serverID]);

        });

        update_confirmations();

        return false;

});

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

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

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

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

        pending_actions = []; // reset pending actions

        checked.each(function(i,c) {

                serverID=c.id;

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

                pending_actions.push([shutdown, 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

        osTag = os_icon(server.metadata);

        var osIcon = osTag + ".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 = $('#' + 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 ' + STATUS_MESSAGES[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 be deleted, it should be updated

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

                    [STATUS_MESSAGES['STOPPED'], STATUS_MESSAGES['ERROR'],

                     '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/wave.gif";

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

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

                                        tableData[current][2] = "<a class=name><span class=name>" + server.name + "</span></a>";

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

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

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

                    setTimeout("$('#"+server.id+"').parent().parent().find('.list-logo').attr('src','static/os_logos/" 

                                                                                               + osIcon + "')", 1600);

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

                           [STATUS_MESSAGES['ACTIVE'], STATUS_MESSAGES['BUILD'], STATUS_MESSAGES['REBOOT'],

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

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

                    imgSrc = "static/wave.gif";

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

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

                                        tableData[current][2] = "<a class=name><span class=name>" + server.name + "</span></a>";

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

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

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

                    setTimeout("$('#"+server.id+"').parent().parent().find('.list-logo').attr('src','static/os_logos/" 

                                                                                        + osTag + "-off.png')", 1600);        

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

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

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

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

                    imgSrc = "static/wave.gif";

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

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

                                        tableData[current][2] = "<a class=name><span class=name>" + server.name + "</span></a>";

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

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

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

                    setTimeout("$('#"+server.id+"').parent().parent().find('.list-logo').attr('src','static/os_logos/" 

                                                                                               + osIcon + "')", 1600);

                }

                        }

                        updateActions();

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

            // check server status to select the appropriate OS icon

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

                osIcon = "static/os_logos/" + osTag + "-off.png";

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

                osIcon = "static/progress.gif"; 

            } else {

                osIcon = "static/os_logos/" + osTag + ".png";

            }

            // find flavor parameters

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

            // 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 + " height=16 width=16>",

                "<a class=name><span class=name>" + server.name + "</span></a>",

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

                "group",

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

            ]);

        }

    });

        updateActions();

        $("#spinner").hide();        

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

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

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

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

        $("div.list table.list-machines").show();

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

    }

    // show message in case user has no servers!

    if (servers.length == 0) {

        showWelcome()

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

}

function display_success(serverID) {

        // do nothing

}

// indicate that the requested action was not completed

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

        osIcon = $('#'+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 (images.length == 0) {

    // populate image list

    update_images();

}

if (flavors.length == 0) {

    // configure flavors

    update_flavors(); 

}

// set the label of the multiple buttons 

$('div.confirm_multiple button.yes').text('Confirm');

$('div.confirm_multiple button.no').text('Cancel');

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

});

// start updating vm list

update_vms(UPDATE_INTERVAL);

</script>