Synnefo

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

        <thead> 

            <tr> 

                <th id="selection" class="select-running">

                    <input type="checkbox"/>

                    <ul>

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

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

                        <li><a class="select-group" 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> 

                <th class="scroll"></th>

            </tr>

            <tr id="machine-template" style="display: none">

                <td><input type="checkbox" id="node-id" /></td>

                <td><span class="imagetag"></span><img class="list-logo" src="" width="16" height="16" /></td>

                <td><a class="name"><span class="name">node.name</span></a></td> 

                <td><a class="ip"><span class="public">node.public_ip</span></a></td>

                <td>group</td>

                <td class="status">Running</td>

            </tr>                        

        </thead> 

        <tbody class="running">

        </tbody>

    </table>

    <div id="mini" class="seperator"></div>

    <table>

        <thead> 

            <tr> 

                <th id="selection" class="select-terminated">

                    <input type="checkbox"/>

                    <ul>

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

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

                        <li><a class="select-group" 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="terminated"></tbody>

    </table>

</div>

<script>

// select/deselect all from checkbox widget of table headers

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

    // select/deselect running or terminated?

    var state = $(this).parent().attr("class").replace('select-','');

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

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

    }

    else {

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

    }

        updateActions();

});

// select all/none from drop down menu

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

    // find the state of the machines

    var state = $(this).closest("th#selection").attr("class").replace('select-','');

    // all or none?

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

    // toggle checkboxes

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

    // update actions

        updateActions();

});

// select group from drop down menu

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

    // find the state of the machines

    var state = $(this).closest("th#selection").attr("class").replace('select-','');

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

        updateActions();

});

var actions = { 'reboot':                ['PE_VM_RUNNING', 'PE_VM_MIGRATING', 'multiple'],

                                'shutdown':                ['PE_VM_RUNNING', 'PE_VM_MIGRATING', 'multiple'],

                                'connect':                ['PE_VM_RUNNING', ],

                                'disconnect':        ['PE_VM_RUNNING', 'network'],

                                'band':                        ['PE_VM_RUNNING', 'PE_VM_MIGRATING'],

                                'details':                ['PE_VM_RUNNING', 'PE_VM_MIGRATING', 'PE_VM_SUSPENDED'],

                                'start':                 ['PE_VM_SUSPENDED', 'multiple'],

                                'destroy':                ['PE_VM_RUNNING', 'PE_VM_SUSPENDED', 'PE_VM_MIGRATING', 'multiple'],

                                'group':                ['PE_VM_RUNNING', 'PE_VM_SUSPENDED', 'PE_VM_MIGRATING','multiple'],

                           };

// on checkbox click, update the actions

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

function updateActions() {

        var states = [];

        var on = [];

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

        // disable all actions to begin with

        for (action in actions) {

                $("#action-" + action).removeClass('enabled');

        }

        // are there multiple machines selected?

        if (checked.length>1)

                states[0] = 'multiple';

        // check the states of selected machines

        checked.forEach(function(checkbox) {

                states[states.length] = checkbox.className;

                var ip = $("#" + checkbox.id.replace('input-','') + ".ip span.public").text();

                if (ip.replace('undefined','').length)

                        states[states.length] = 'network';

        });

        // decide which actions should be enabled

        for (a in actions) {

                var enabled = false;

                for (s in states) {

                        if (actions[a].indexOf(states[s]) != -1 ) {

                                enabled = true;

                        } else {

                                enabled = false;

                                break;

                        }

                }

                if (enabled)

                        on[on.length]=a;

        }

        // enable those actions

        for (action in on) {

                $("#action-" + on[action]).addClass('enabled');

        }

}

// destroy action

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

        var checked = $("tbody input[type='checkbox']:checked").toArray();        

        for (c in checked) {

                $.ajax({

                        url: '/api/v1.0/servers/' + checked[c].id.replace('input-',''),

                        type: "DELETE",

                        //async: false,

                        dataType: "json",

                        success: function() {}

                });

        }

});

// reboot action

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

        var checked = $("tbody input[type='checkbox']:checked").toArray();        

        for (c in checked) {

                $.ajax({

                        url: '/api/v1.0/servers/' + checked[c].id.replace('input-','') + '/action',

                        type: "POST",

                        data: {

                                "reboot": '{"type" : "HARD"}'

                                },

                        //async: false,

                        dataType: "json",

                        success: function() {}

                });

        }

});

// shutdown action. Not implemented by rackspace API atm

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

        var checked = $("tbody input[type='checkbox']:checked").toArray();        

        for (c in checked) {

                $.ajax({

                        url: '/api/v1.0/servers/' + checked[c].id.replace('input-','') + '/action',

                        type: "POST",

                        data: {

                                "shutdown": '{"timeout" : "5"}'

                                },

                        //async: false,

                        dataType: "json",

                        success: function() {}

                });

        }

});

</script>