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 class="list-template" style="display: none">

        <tr id="machine-template">

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

    </table>

    <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="running terminated"></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();

});

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

                                'group':                ['ACTIVE', 'STOPPED', 'REBOOT','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",

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

                                },

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

                                },

                        dataType: "json",

                        success: function() {}

                });

        }

});

</script>