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 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 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.deleted == true) {

                                vmTable.fnDeleteRow(current);        

                        } else {

                                // update status

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

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

                                // TODO: update name & ip

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

                        }

                        updateActions();

        } else if (server.deleted != true) { // 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>"

            ]);

        }

    });

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

    }

}

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>