Enable configure tables to be scrollabe. Cleaned up code and added appropriate comments where needed.

git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@10489 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
This commit is contained in:
phamt 2011-09-09 19:34:05 +00:00
parent 3345d3ad7c
commit a340b92ba4
4 changed files with 156 additions and 203 deletions

View File

@ -191,7 +191,7 @@ function loadTable(data) {
$('#' + tabId).find('img').remove();
// Create info bar
var infoBar = createInfoBar('Click on a cell to edit. Click outside the table to write to the cell.<br>Once you are satisfied with how the table looks, click on Save.');
var infoBar = createInfoBar('Click on a cell to edit. ddClick outside the table to write to the cell. Once you are satisfied with how the table looks, click on Save.');
$('#' + tabId).append(infoBar);
// Create action bar
@ -287,82 +287,27 @@ function loadTable(data) {
});
// Turn table into datatable
dTable = $('#' + id + 'Datatable').dataTable();
setConfigDatatable(id + 'Datatable', dTable);
// Create add row button
var addBar = $('<div></div>');
$('#' + tabId).append(addBar);
var addRowBtn = createButton('Add row');
addBar.append(addRowBtn);
// Create save and undo buttons
var saveBtn = createButton('Save');
var undoBtn = createButton('Undo');
actionBar.append(saveBtn);
actionBar.append(undoBtn);
/**
* Add row
*/
addRowBtn.bind('click', function(event) {
// Create an empty row
var row = new Array();
/**
* Remove button
*/
row.push('<span class="ui-icon ui-icon-close" onclick="deleteRow(this)"></span>');
for ( var i = 0; i < headers.length; i++) {
row.push('');
dTable = $('#' + id + 'Datatable').dataTable({
'iDisplayLength': 50,
'bLengthChange': false,
"sScrollX": "100%",
"bAutoWidth": true,
"fnInitComplete": function() {
}
// Get tab ID
var tabId = $(this).parent().parent().attr('id');
// Get table name
var tableName = tabId.replace('Tab', '');
// Get table ID
var tableId = tableName + 'Datatable';
// Get datatable
var dTable = getConfigDatatable(tableId);
// Add the row to the data table
dTable.fnAddData(row);
// Enable editable columns (again)
// Do not make 1st column editable
$('#' + tabId + ' td:not(td:nth-child(1))').editable(
function(value, settings) {
// Get column index
var colPos = this.cellIndex;
// Get row index
var rowPos = dTable.fnGetPosition(this.parentNode);
// Update datatable
dTable.fnUpdate(value, rowPos, colPos);
return (value);
}, {
onblur : 'submit', // Clicking outside editable area submits changes
type : 'textarea',
placeholder: ' ',
height : '30px' // The height of the text area
});
});
/**
* Save changes
*/
saveBtn.bind('click', function(event) {
// Get tab ID
var tabId = $(this).parent().parent().attr('id');
// Get table name
var tableName = tabId.replace('Tab', '');
// Get table ID
var tableId = tableName + 'Datatable';
// Create action bar
var actionBar = $('<div class="actionBar"></div>');
var saveLnk = $('<a>Save</a>');
saveLnk.click(function() {
// Get table ID and name
var tableId = $(this).parents('.dataTables_wrapper').attr('id').replace('_wrapper', '');
var tableName = tableId.replace('Datatable', '');
// Get datatable
var dTable = getConfigDatatable(tableId);
var dTable = $('#' + tableId).dataTable();
// Get the nodes from the table
var dRows = dTable.fnGetNodes();
@ -390,9 +335,6 @@ function loadTable(data) {
}
}
// Update datatable
setConfigDatatable(tableId, dTable);
// Update xCAT table
$.ajax( {
type : 'POST',
@ -407,22 +349,15 @@ function loadTable(data) {
}
});
});
/**
* Undo changes
*/
undoBtn.bind('click', function(event) {
// Get tab ID
var tabId = $(this).parent().parent().attr('id');
// Get table name
var tableName = tabId.replace('Tab', '');
var undoLnk = $('<a>Undo</a>');
undoLnk.click(function() {
// Get table ID
var tableId = tableName + 'Datatable';
var tableId = $(this).parents('.dataTables_wrapper').attr('id').replace('_wrapper', '');
// Get datatable
var dTable = getConfigDatatable(tableId);
// Get the nodes from the table
var dTable = $('#' + tableId).dataTable();
// Clear entire datatable
dTable.fnClearTable();
@ -451,6 +386,66 @@ function loadTable(data) {
height : '30px' // The height of the text area
});
});
var addLnk = $('<a>Add row</a>');
addLnk.click(function() {
// Create an empty row
var row = new Array();
/**
* Remove button
*/
row.push('<span class="ui-icon ui-icon-close" onclick="deleteRow(this)"></span>');
for ( var i = 0; i < headers.length; i++) {
row.push('');
}
// Get table ID and name
var tableId = $(this).parents('.dataTables_wrapper').attr('id').replace('_wrapper', '');
var tableName = tableId.replace('Datatable', '');
// Get datatable
var dTable = $('#' + tableId).dataTable();
// Add the row to the data table
dTable.fnAddData(row);
// Enable editable columns (again)
// Do not make 1st column editable
$('#' + tableId + ' td:not(td:nth-child(1))').editable(
function(value, settings) {
// Get column index
var colPos = this.cellIndex;
// Get row index
var rowPos = dTable.fnGetPosition(this.parentNode);
// Update datatable
dTable.fnUpdate(value, rowPos, colPos);
return (value);
}, {
onblur : 'submit', // Clicking outside editable area submits changes
type : 'textarea',
placeholder: ' ',
height : '30px' // The height of the text area
});
});
// Actions
var actionsLnk = '<a>Actions</a>';
var actsMenu = createMenu([saveLnk, undoLnk, addLnk]);
// Create an action menu
var actionsMenu = createMenu([ [ actionsLnk, actsMenu ] ]);
actionsMenu.superfish();
actionsMenu.css('display', 'inline-block');
actionBar.append(actionsMenu);
// Create a division to hold actions menu
var menuDiv = $('<div id="' + id + 'Datatable_menuDiv" class="menuDiv"></div>');
$('#' + id + 'Datatable_wrapper').prepend(menuDiv);
menuDiv.append(actionBar);
$('#' + id + 'Datatable_filter').appendTo(menuDiv);
}
/**
@ -462,10 +457,10 @@ function loadTable(data) {
*/
function deleteRow(obj) {
// Get table ID
var tableId = $(obj).parent().parent().parent().parent().attr('id');
var tableId = $(obj).parents('table').attr('id');
// Get datatable
var dTable = getConfigDatatable(tableId);
var dTable = $('#' + tableId).dataTable();
// Get all nodes within the datatable
var rows = dTable.fnGetNodes();

View File

@ -43,9 +43,7 @@ var discoverEnv;
/**
* create the discover page
*
* @param
*
* @return
* @return nothing
*/
function loadDiscoverPage(){
currentStep = 0;
@ -60,9 +58,7 @@ function loadDiscoverPage(){
/**
* update the step show are on the left side of discover page
*
* @param
*
* @return
* @return nothing
*/
function updateDiscoverStep(){
$('#discoverStepDiv').empty();
@ -81,9 +77,7 @@ function updateDiscoverStep(){
/**
* create the navigator buttons on the bottom of discover page
*
* @param
*
* @return
* @return nothing
*/
function createDiscoverButtons(){
var buttonDiv = $('<div style="text-align:center;padding:20px 0px 10px 0px;"></div>');
@ -113,9 +107,7 @@ function createDiscoverButtons(){
/**
* create the next button base on the currentStep, the last step does not need this button
*
* @param
*
* @return
* @return nothing
*/
function createNextButton(){
var tempFlag = true;
@ -143,9 +135,7 @@ function createNextButton(){
/**
* create the next button base on the currentStep, the first step does not need this button
*
* @param
*
* @return
* @return nothing
*/
function createBackButton(){
var tempFlag = true;
@ -174,9 +164,8 @@ function createBackButton(){
/**
* get the input value on discover page
*
* @param
* envName : value's name(discoverEnv's key)
*
* @param envName
* value's name(discoverEnv's key)
* @return
* if there is assciate value, return the value.
* else return null.
@ -193,10 +182,11 @@ function getDiscoverEnv(envName){
/**
* set the input value on discover page
*
* @param
* envName : value's name(discoverEnv's key)
* envValue: value
* @return null.
* @param envName
* value's name(discoverEnv's key)
* @param envValue
* value
* @return nothing
*/
function setDiscoverEnv(envName, envValue){
if (envName){
@ -207,10 +197,9 @@ function setDiscoverEnv(envName, envValue){
/**
* delete the input value on discover page
*
* @param
* envName : value's name(discoverEnv's key)
*
* @return null.
* @param envName
* value's name(discoverEnv's key)
* @return nothing
*/
function removeDiscoverEnv(envName){
if (discoverEnv[envName]){
@ -221,12 +210,8 @@ function removeDiscoverEnv(envName){
/**
* Expand the noderange into node names.
*
* @param
* nodeRange :
*
* @return
* node names array.
*
* @param nodeRange
* @return node names array
*/
function expandNR(nodeRange){
var retArray = new Array();
@ -294,8 +279,6 @@ function expandNR(nodeRange){
/**
* collect all inputs' value from the page
*
* @param
*
* @return true: this step is correct, can go to the next page
* false: this step contains error.
*/
@ -318,9 +301,7 @@ function collectInputValue(){
* Step 1: show the wizard's function
* platform selector(system P or system X)
*
* @param
*
* @return
* @return nothing
*/
function initSelectPlatform(){
var temp = '';
@ -351,9 +332,7 @@ function initSelectPlatform(){
/**
* Step 1: Get the platform type
*
* @param
*
* @return
* @return true
*/
function getPlatform(){
var radioValue = $('#discoverContentDiv :checked').attr('id');
@ -367,16 +346,14 @@ function getPlatform(){
* hmcs' name range, number and start ip
* frames' name range, number and start ip
* drawers' name range, number and start ip
*
* @param
*
* @return
* @return nothing
*/
function initBasicPattern(){
$('#discoverContentDiv').empty();
$('.tooltip').remove();
var showString = '<div style="min-height:360px" id="patternDiv"><h2>' + steps[currentStep] + '</h2>';
showString += '<table><tbody>';
//Frame title
showString += '<tr><td><h3>Frames:</h3></td></tr>';
//Frame Name
@ -433,9 +410,9 @@ function initBasicPattern(){
/**
* Step 2: check basic patterns
* when user input the basic patterns, we should check if the input is correct.
* @param
*
* @return
* @param operType
* type of operation
* @return true or false
*/
function checkBasicPattern(operType){
collectInputValue();
@ -547,9 +524,7 @@ function checkBasicPattern(operType){
/**
* Step 3: allowed the users to edit the super node condigure file
*
* @param
*
* @return
* @return nothing
*/
function initSupernode(){
$('#discoverContentDiv').empty();
@ -582,9 +557,9 @@ function initSupernode(){
/**
* Step 3: check the super node configure file
*
* @param
*
* @return
* @param operType
* type of operation
* @return true or false
*/
function checkSupernode(operType){
collectInputValue();
@ -662,9 +637,9 @@ function calcCec(spConfigStr){
/**
* Step 4: show the field which need to be configured in site table
*
* @param
*
* @return
* @param operType
* type of operation
* @return nothing
*/
function initSiteTable(operType){
$('#discoverContentDiv').empty();
@ -715,13 +690,12 @@ function initSiteTable(operType){
/**
* Step 4: when the values are ready, create the table
*
* @param
*
* @return
* @return nothing
*/
function showSiteArea(){
var showString = '<table><tbody>';
//domain name:
showString += '<tr><td>Domain Name:</td><td><input type="text" name="domainname" value="' + getDiscoverEnv('domainname') +
'" title="The DNS domain name used for the cluster."></td></tr>';
@ -814,9 +788,9 @@ function calcEndIp(ipStart, num){
/**
* Step 4: check the input are all filled
*
* @param
*
* @return
* @param operType
* type of operation
* @return true or false
*/
function checkSiteTable(operType){
$('#discoverContentDiv input[name=ipStart]').trigger('change');
@ -851,10 +825,8 @@ function checkSiteTable(operType){
/**
* Step 5: told users to power on machines
*
* @param
*
* @return
* @return nothing
*/
function initPoweronHardware(){
$('#discoverContentDiv').empty();
@ -872,10 +844,8 @@ function initPoweronHardware(){
/**
* Step 6: discover all frames from the cluster and map all mtms with frame name
*
* @param
*
* @return
*
* @return nothing
*/
function initDiscoverFrames(){
$('#discoverContentDiv').empty();
@ -901,6 +871,7 @@ function initDiscoverFrames(){
}
statBar.find('div').append('Discovering all Frames by lsslp.').append(createLoader());
//use lsslp to find all bpas in cluster
$.ajax({
url : 'lib/cmd.php',
@ -1001,9 +972,9 @@ function deleteMap(obj){
/**
* Step 6: write the frame and mtms map file
*
* @param
*
* @return
* @param operType
* type of operation
* @return true or false
*/
function checkFrameMtms(operType){
//check the number of radio button
@ -1051,8 +1022,8 @@ function checkFrameMtms(operType){
* Step 7: create the xcatsetup configure file and run xcatsetup to define all objects
* in xcat database.
*
* @param
*
* @param operType
* type of operation
* @return
*/
function initConfig(operType){
@ -1085,9 +1056,7 @@ function initConfig(operType){
/**
* Step 7: create the xcat configure file
*
* @param
*
* @return
* @return nothing
*/
function createSetupFile(){
var fileContent = '';
@ -1150,9 +1119,7 @@ function createSetupFile(){
/**
* Step 7: run the xcatsetup command
*
* @param
*
* @return
* @return nothing
*/
function runSetup(){
$('#setupLine').append(createLoader());
@ -1178,10 +1145,8 @@ function runSetup(){
/**
* Step 7: create the dhcp configure file
*
* @param
*
* @return
* @return nothing
*/
function configDHCP(){
$('#dhcpLine').append(createLoader());
@ -1208,9 +1173,9 @@ function configDHCP(){
/**
* Step 8: discover all hmc,cec in cluster and update into xcat database
*
* @param
*
* @return
* @param operType
* type of operation
* @return nothing
*/
function initUpdateDefinition(operType){
$('#discoverContentDiv').empty();
@ -1236,9 +1201,7 @@ function initUpdateDefinition(operType){
/**
* Step 8: write all the lsslp -s FRAME info into database
*
* @param
*
* @return
* @return nothing
*/
function lsslpWriteFrame(){
$('#frameLine').append(createLoader());
@ -1264,10 +1227,8 @@ function lsslpWriteFrame(){
/**
* Step 8: write all the lsslp -s HMC info into database
*
* @param
*
* @return
* @return nothing
*/
function lsslpWriteHMC(){
$('#hmcLine1').append(createLoader());
@ -1351,10 +1312,8 @@ function lsslpWriteHMC(){
/**
* Step 8: write all the lsslp -s cec info into database
*
* @param
*
* @return
* @return nothing
*/
function lsslpWriteCec(){
$('#cecLine').append(createLoader());
@ -1379,10 +1338,8 @@ function lsslpWriteCec(){
/**
* Step 9: create lpars
*
* @param
*
* @return
* @return nothing
*/
function initCreateLpar(){
$('#discoverContentDiv').empty();
@ -1526,10 +1483,8 @@ function nonihCreateLpar(parentDiv){
/**
* Step 10: complete
*
* @param
*
* @return
* @return nothing
*/
function complete(){
$('#discoverContentDiv').empty();

View File

@ -65,7 +65,7 @@ function showRepository(data) {
// Display the Devel Repository, remember user's last selection
show = show + "<li><input type='radio' ";
if (1 == $.cookie('xcatrepository')) {
if ($.cookie('xcatrepository') == 1) {
show = show + "checked='true'";
}
show = show + "name='reporadio' value='" + develRepository + "'>";
@ -74,7 +74,7 @@ function showRepository(data) {
// Display the Stable Repository, remember user's last selection
show = "<li><input type='radio' ";
if (2 == $.cookie('xcatrepository')) {
if ($.cookie('xcatrepository') == 2) {
show = show + "checked='true'";
}
show = show + "name='reporadio' value='" + stableRepository + "' checked='true'>";
@ -82,8 +82,8 @@ function showRepository(data) {
repoList.append(show);
// Display the Input Repository, remember user's last selection
if (($.cookie('xcatrepository')) && (1 != $.cookie('xcatrepository'))
&& (2 != $.cookie('xcatrepository'))) {
if (($.cookie('xcatrepository')) && ($.cookie('xcatrepository') != 1)
&& ($.cookie('xcatrepository') != 2)) {
show = "<li><input type='radio' checked='true' name='reporadio' value=''>Other: ";
show += "<input style='width: 500px' id='repositoryaddr' value='"
+ $.cookie('xcatrepository') + "'</li>";
@ -92,6 +92,7 @@ function showRepository(data) {
show += "<input style='width: 500px' id='repositoryaddr' value=''</li>";
}
repoList.append(show);
$('#repository fieldset').append(repoList);
}
@ -114,6 +115,7 @@ function showRpmInfo(data) {
}
rpms = data.rsp.split(/\n/);
// No rpm installed, return
if (1 > rpms.length) {
$('#rpm fieldset').append("No RPMs installed!");
@ -130,12 +132,12 @@ function showRpmInfo(data) {
show += "</tr></thead>";
for (temp = 0; temp < rpms.length; temp++) {
// Empty line continue
if ("" == rpms[temp]) {
if (!rpms[temp]) {
continue;
}
// The RPM is not installed, continue
if (-1 != rpms[temp].indexOf("not")) {
if (rpms[temp].indexOf("not") != -1) {
continue;
}
@ -161,7 +163,6 @@ function showRpmInfo(data) {
/**
* Select all checkboxes
*
* @param Nothing
* @return Nothing
*/
function updateSelectAll() {
@ -189,7 +190,7 @@ function updateRpm() {
// Select other and we should use the value in the input
if ("" == rpmPath) {
// user input the repo, and we must stroe it in the cookie
// Store repo in a cookie
rpmPath = $('#repositoryaddr').val();
rpmPathType = rpmPath;
} else {

View File

@ -923,10 +923,12 @@ function loadNodes(data) {
monitorCol.find('span a').click(function() {
refreshGangliaStatus(group, nodesTableId);
});
var menuDiv=$('<div id=\''+nodesTableId+'_menuDiv\' class=\'menuDiv\'></div>');
// Create a division to hold actions menu
var menuDiv = $('<div id="' + nodesTableId + '_menuDiv" class="menuDiv"></div>');
$('#' + nodesTableId + '_wrapper').prepend(menuDiv);
menuDiv.append(actionBar);
$('#'+nodesTableId+'_filter').appendTo(menuDiv);
$('#' + nodesTableId + '_filter').appendTo(menuDiv);
// Create tooltip for status
var tooltipConf = {