Synnefo

{% load i18n %}

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

    <div id="spinner"></div>

    <div class="actions">

        <a id="action-start">Start</a>

        <a id="action-reboot">Reboot</a>

        <a id="action-shutdown">Shutdown</a>

        <br />

        <a id="action-destroy">Destroy</a>

        <br />

        <a id="action-details">Show Details</a>

        <a id="action-group">Add to group</a>

        <br />

        <a id="action-band">Out of band</a>

        <br />

        <a id="action-attach">Attach disk</a>

        <a id="action-detach">Detach disk</a>

        <br />

        <a id="action-connect">Connect to network</a>

        <a id="action-disconnect">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">OS</th> 

                <th id="name">Name</th> 

                <th id="ip">IP</th> 

                <th id="group">Group</th>

                <th id="status">Status</th> 

            </tr>

        </thead> 

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

    </table>

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

                <li class="select-all" ><a href="#">all</a></li>

                <li class="select-none"><a href="#">none</a></li>

                <li class="select-group"><a href="#">group</a></li>

        </ul>  

</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'],

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

        current = -1;

        // check server status to select the appropriate OS icon

        osTag = image_tags[server.imageRef]

        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, simply update the values

                        try {

                                console.info(server.name + ' from ' 

                                                        + tableData[current][5] + ' to ' + STATUS_MESSAGES[server.status]);

                        } catch(err) {}                

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

                                vmTable.fnDeleteRow(current);        

                        } else { // server exists and should not be deleted                

                // check server status to select the appropriate OS icon

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

                    osIcon = osTag + "-off.png";

                }

                                // if the new state does not differ from the previous one

                                if (tableData[current][5].indexOf(STATUS_MESSAGES[server.status]) > -1){

                                        // do nothing

                                } else { // state has changed

                                        //$('#'+server.id).parent().parent().find('.list-logo').attr('src').indexOf('wave')>-1){

                                        imgSrc = "static/wave.gif";

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

                                        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][3] = "<a class=ip><span class=public>"+ server.addresses.public.ip.addr + "</span></a>";

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

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

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

                                        //try{console.info('vm ' + server.id + ' from ' + tableData[current][5] + ' to ' + STATUS_MESSAGES[server.status])} catch(err) {}                                                

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

                                }

                        }

                        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 = osTag + "-off.png";

            }

            // 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=static/os_logos/" + osIcon +

                    " title=" + osTag + " height=16 width=16>",

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

                "<a class=ip><span class=public>"+ server.addresses.public.ip.addr + "</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();

    }

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

    ]

});

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>