Tidy up UI (Part I)

[ypujante]

• Several pages like "Agents List", "Fabrics page" (admin) display tables that are too wide
• Rows should alternate colors to be easier to read
• Columns should be sortable
• Revisit position of checkboxes as apparently right is not standard.

[sodul]

For the checkboxes there is a very simple example here:
http://www.w3.org/wiki/HTML/Elements/input/checkbox

The basic is that the checkbox and the text are wrapped in a 'label' tag which makes the text clickable:
<label><input type="checkbox" name="ny"> New York</label>

In the current UI of Glu the checkboxes and text are usually in separate table cells so they should be moved together and the checkbox to the left.

[sodul]

As an example here are the updated checkboxes for /console/plan/deployments:

<div>
    <label style="display:inline"><input type="checkbox" name="autoRefresh" checked="checked" id="autoRefresh" onclick="autoRefresh();"> Auto Refresh<input type="hidden" name="_autoRefresh"></label> <img src="/console/static/images/spinner.gif" alt="Spinner" id="autoRefreshSpinner" name="autoRefreshSpinner">
    |
    <label style="display:inline"><input type="checkbox" name="usernameFilter" checked="checked" id="usernameFilter" onclick="showHide();"> Username<input type="hidden" name="_usernameFilter"></label>
    |
    <label style="display:inline"><input type="checkbox" name="startTimeFilter" checked="checked" id="startTimeFilter" onclick="showHide();"> Start Time<input type="hidden" name="_startTimeFilter"></label>
    |
    <label style="display:inline"><input type="checkbox" name="endTimeFilter" checked="checked" id="endTimeFilter" onclick="showHide();"> End Time<input type="hidden" name="_endTimeFilter"></label>
    |
    <label style="display:inline"><input type="checkbox" name="durationFilter" checked="checked" id="durationFilter" onclick="showHide();"> Duration<input type="hidden" name="_durationFilter"></label>
    |
    <label style="display:inline"><input type="checkbox" name="statusFilter" checked="checked" id="statusFilter" onclick="showHide();"> Status<input type="hidden" name="_statusFilter"></label>
    |
    <label style="display:inline"><input type="checkbox" name="actionsFilter" checked="checked" id="actionsFilter" onclick="showHide();"> Actions<input type="hidden" name="_actionsFilter"></label>
</div>

[ypujante]

Implemented Part I in glu 5.5.6. Created Part II #294 for the remainder.