6.5 Environment Table |
|
6.5 Environment Table |
|
Viewpoint provides a table to detail all of the Environments that a user has privileges to access. This table provides a convenient method of summarizing the existing environments with some options to access more details if necessary.
The table provides a basic overview of each environment by populating several fields. While an administrator has the option to add or remove specific table columns (please see Customization below), the listed fields refer to the default table.
Some basic controls are provided to allow users to organize and manipulate their environments.
If a column is sortable, it will have a sorting icon in the column header. Clicking a sortable column header will toggle ascending or descending sorting. The column that is currently being sorted on will be highlighted. The default sortable columns are Name, ID, Owner, State, Creator, and Date Created.
For especially large collections of environments, pagination has been enabled. The bottom-left corner states how many of the total environments are being shown. while the bottom-right corner provides buttons for navigating the pages.
Administrators may customize the look, feel, and functionality of the Environment Table by editing the source files. Most changes can be made in vc_table.html and its associated JavaScript and CSS files.
The Environment Details table is implemented with a table plug-in for the jQuery Javascript library called DataTables. This tool provides support for a wide range of table functionality and customization.
The DataTable script will look something like this:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable({
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bInfo": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "../QueryVcs.groovy",
"aoColumns": [
{ "sTitle": "Name", "sType": "natural", "sWidth": "120px" },
{ "sTitle": "ID", "sType": "natural", "sWidth": "120px" },
{ "sTitle": "Owner", "sType": "natural", "sWidth": "120px" },
{ "sTitle": "VMs", "bSortable": false, "sWidth": "120px" },
{ "sTitle": "Resources", "bSortable": false, "sWidth": "120px" },
{ "sTitle": "State", "sType": "natural", "sWidth": "120px" },
{ "sTitle": "Attributes" , "bSortable": false, "sWidth": "120px" },
{ "sTitle": "Creator" , "bVisible": false, "sType": "natural", "sWidth": "120px" },
{ "sTitle": "Date Created" , "sType": "natural", "sWidth": "120px" }
]
});
top.setPageTitle('Virtual Environment Details');
top.setIcon('request-environment64.png', true);
});
</script>
Some common features can be enabled or disabled with a simple boolean value. For example, setting "bPaginate" to false would remove the pagination controls.
A boolean expression can also be used to easily hide columns by setting "bVisible" to false (which is the default setting for "Creator"). This may be preferable to the alternate method of removing a column from the script, because an error will occur if the number of columns does not match the output from "QueryVcs.groovy" (or whatever other AJAX source is being used).
The full functionality of DataTables is beyond the scope of this document, and it is recommended that the excellent DataTables resource at http://www.datatables.net/ be used as a more detailed reference.
A DataTable (and by extension, the Environment Table) also provides ThemeRoller support to easily change the theme. The theme currently being used is defined in the jquery-ui-1.8.11.custom.css file. Please visit http://jqueryui.com/themeroller/ for additional documentation and sample themes that can be used.
The groovy file that is called for AJAX calls to populate the table is "QueryVcs.groovy". If you make changes to the table showing the virtual environments, you will likely need to update this groovy file. This file interacts with the MoabFacade object to get the list of virtual containers Moab. Also, this file uses Viewpoint Server Methods to perform various actions like authentication.
The "QueryVcs.groovy" file returns all data to be shown in the table. Therefore in order to add site-specific terminology, administrators need to edit this file. The default file changes the name of all Moab flags reported to have only the first letter capitalized while all others are lowercase. Other naming conventions can be implemented in a similar way. The recommended procedure for setting site-specific names is using a groovy map object. The map should contain a mapping of the Moab name to the name to show.
For example, the following configuration will map airport codes to the appropriate cities:
def map = ['ATL':'Atlanta', 'ORD':'Chicago', 'LHR':'London', 'NRT':'Tokyo', 'CDG':'Paris', 'LAX':'Los Angeles", 'DFW':'Dallas']
for (name in vars.keySet()) {
attrs += name + "=" + map.get(vars.get(name), vars.get(name));
}
This example shows how the if the code cannot be found, the original name is shown. Alternatively, your code could throw an error or skip that entry.