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>

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

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

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

});

// select all/none/group from drop down menu

$("table thead tr th#selection ul li").live('click', function() {

    // all or none?

    if ( $(this).attr("class") == "select-all" || $(this).attr("class") == "select-none") {

        var all = ($(this).attr("class") == "select-all");

        // toggle checkboxes

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

    } else if ($(this).attr("class") == "select-group"){

        // TODO: This shoud select only the vms in the selected group

        // right now the folowing has the functionality of select-all        

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

    }

    // update actions

        updateActions();

        return false;

});

// menu toggle, running menu

$("table.list-machines thead tr th#selection div.expand-icon").live('click', function () {

        $("table.list-machines thead tr th#selection ul").slideToggle('medium');

    return false;

});

$("table.list-machines thead tr th#selection ul").live('click', function () {

        $("table.list-machines thead tr th#selection ul").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(); });

// destroy action

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

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

        var serverIDs = [], serverNames=[];

        checked.each(function(i,c) {

                serverID=c.id;

                serverIDs.push(serverID);

                serverNames.push($('#'+serverID+' span.name').text());

        });

        confirm_action('destroy', destroy, serverIDs, serverNames);

        return false;

});

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

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

        var serverIDs = [], serverNames=[];

        checked.each(function(i,c) {

                serverID=c.id;

                serverIDs.push(serverID);

                serverNames.push($('#'+serverID+' span.name').text());

        });

        confirm_action('reboot', reboot, serverIDs, serverNames);

        return false;

});

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

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

        var serverIDs = [], serverNames=[];

        checked.each(function(i,c) {

                serverID=c.id;

                serverIDs.push(serverID);

                serverNames.push($('#'+serverID+' span.name').text());

        });

//        confirm_action('start', start, serverIDs, serverNames);

    start(serverIDs);

        return false;

});

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

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

        var serverIDs = [], serverNames=[];

        checked.each(function(i,c) {

                serverID=c.id;

                serverIDs.push(serverID);

                serverNames.push($('#'+serverID+' span.name').text());

        });

        confirm_action('shutdown', shutdown, serverIDs, serverNames);

        return false;

});

function update_machines_view(data){

    /*

    Go through the already displayed servers and remove those not in

    the data or those marked as deleted.

    */

    $('.machines tr td input').each(function(i,entry) {

        var deleted = true;

        $.each(data.servers, function(j,server) {

            if (server.id == entry.id && ['BUILD', 'ACTIVE', 'STOPPED', 'ERROR'].indexOf(server.status) >= 0) {

                deleted = false;

            }

        });

        if (deleted) {

            vmTable.fnDeleteRow(entry);

        }

    });

    /* 

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

    new ones to the list

    */    

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

        // if the machine is deleted it should not be included in any list

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

            return;

        }

        existing = $('#' + server.id).parent().parent();  

        if (existing.length){ // simply update the values

            // If the machine already exists in the DOM then simply update it

            if (existing.find(".status").text() != STATUS_MESSAGES[server.status]) {

                try {

                    console.info(existing.find("a.name span.name").text() + ' from ' 

                                + existing.find(".status").text() + ' to ' + STATUS_MESSAGES[server.status]);

                } catch(err) {}

                existing.find(".status").text(STATUS_MESSAGES[server.status]);

            }

            existing.find("a.name span.name").text(server.name);

            existing.find("a.ip span.public").text(String(server.addresses.public.ip.addr).replace(',',' '));

        } else { // does not exist, we should create it

            // check server status to select the appropriate OS icon

            osTag = image_tags[server.imageRef]

            var osIcon = osTag + ".png";

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

            ]);

        }

    });

        $("#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();

    }

}

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

}

update_vms(UPDATE_INTERVAL);

</script>