Added image tab under Provision page to edit images, set image attributes, and run copycds.

git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@8289 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd

xCAT-UI/css/style.css

@@ -430,7 +430,6 @@ legend {
 	border-style: solid;
 	border-color: #BDBDBD;
 	vertical-align: middle;
-	text-align: center;
 }
 
 /*** Row color (odd) ***/

xCAT-UI/js/jquery/jquery.serverBrowser.js

@@ -0,0 +1,465 @@
+/*
+    author: ApmeM (artem.votincev@gmail.com)
+    date: 9-June-2010
+    version: 1.4
+    download: http://code.google.com/p/jq-serverbrowse/
+ */
+
+(function($) {
+	$.fn.serverBrowser = function(settings) {
+		this.each(function() {
+
+			var config = {
+				// Event function
+				// Appear when user click 'Ok' button, or doubleclick on file
+				onSelect : function(file) {
+					alert('You select: ' + file);
+				},
+				onLoad : function() {
+					return config.basePath;
+				},
+				multiselect : false,
+				// Image parameters
+				// System images (loading.gif, unknown.png, folder.png and
+				// images from knownPaths) will be referenced to systemImageUrl
+				// if systemImageUrl is empty or not specified - imageUrl will
+				// be taken
+				// All other images (like images for extension) will be taken
+				// from imageUrl
+				imageUrl : 'img/',
+				systemImageUrl : '',
+				showUpInList : false,
+				// Path properties
+				// Base path, that links should start from.
+				// If opened path is not under this path, alert will be shown
+				// and nothing will be opened
+				// Path separator, that will be used to split specified paths
+				// and join paths to a string
+				basePath : 'C:',
+				separatorPath : '/',
+				// Paths, that will be displayed on the left side of the dialog
+				// This is a link to specified paths on the server
+				useKnownPaths : true,
+				knownPaths : [ {
+					text : 'Desktop',
+					image : 'desktop.png',
+					path : 'C:/Users/All Users/Desktop'
+				}, {
+					text : 'Documents',
+					image : 'documents.png',
+					path : 'C:/Users/All Users/Documents'
+				} ],
+				// Images for known extension (like 'png', 'exe', 'zip'), that
+				// will be displayed with its real names
+				// Images, that is not in this list will be referenced to
+				// 'unknown.png' image
+				// If list is empty - all images is known.
+				knownExt : [],
+				// Server path to this plugin handler
+				handlerUrl : 'browserDlg.txt',
+				// JQuery-ui dialog settings
+				title : 'Browse',
+				width : 300,
+				height : 300,
+				position : [ 'center', 'center' ],
+
+				// Administrative parameters used to
+				// help programmer or system administrator
+				requestMethod : 'POST'
+			};
+
+			if (settings)
+				$.extend(config, settings);
+			// Required configuration elements
+			// We need to set some configuration elements without user
+			// For example there should be 2 buttons on the bottom,
+			// And dialog should be opened after button is pressed, not when it
+			// created
+			// Also we need to know about dialog resizing
+			$.extend(config, {
+				autoOpen : false,
+				modal : true,
+				buttons : {
+					"Open" : function() {
+						doneOk();
+					},
+					"Cancel" : function() {
+						browserDlg.dialog("close");
+					}
+				},
+				resize : function(event, ui) {
+					recalculateSize(event, ui);
+				}
+			});
+
+			function systemImageUrl() {
+				if (config.systemImageUrl.length == 0) {
+					return config.imageUrl;
+				} else {
+					return config.systemImageUrl;
+				}
+			}
+
+			var privateConfig = {
+				// This stack array will store history navigation data
+				// When user open new directory, old directory will be added to
+				// this list
+				// If user want, he will be able to move back by this history
+				browserHistory : [],
+
+				// This array contains all currently selected items
+				// When user select element, it will add associated path into
+				// this array
+				// When user deselect element - associated path will be removed
+				// Exception: if 'config.multiselect' is false, only one element
+				// will be stored in this array.
+				selectedItems : []
+			};
+
+			// Main dialog div
+			// It will be converted into jQuery-ui dialog box using my
+			// configuration parameters
+			// It contains 3 divs
+			var browserDlg = $('<div title="' + config.title + '"></div>').css( {
+				'overflow' : 'hidden'
+			}).appendTo(document.body);
+			browserDlg.dialog(config);
+
+			// First div on the top
+			// It contains textbox field and buttons
+			// User can enter any paths he want to open in this textbox and
+			// press enter
+			// There is 3 buttons on the panel:
+			var enterPathDiv = $('<div></div>').addClass('ui-widget-content').appendTo(browserDlg).css( {
+				'height' : '30px',
+				'width' : '100%',
+				'padding-top' : '7px'
+			});
+
+			var enterButton = $('<div></div>').css( {
+				'float' : 'left',
+				'vertical-align' : 'middle',
+				'margin-left' : '6px'
+			}).addClass('ui-corner-all').hover(function() {
+				$(this).addClass('ui-state-hover');
+			}, function() {
+				$(this).removeClass('ui-state-hover');
+			});
+
+			var enterLabel = $('<span></span>').text('Look in: ').appendTo(enterButton.clone(false).appendTo(enterPathDiv));
+
+			var enterText = $('<input type="text">').keypress(function(e) {
+				if (e.keyCode == '13') {
+					e.preventDefault();
+					loadPath(enterText.val());
+				}
+			}).css('width', '200px').appendTo(enterButton.clone(false).appendTo(enterPathDiv));
+
+			// Back button.
+			// When user click on it, 2 last elements of the history pop from
+			// the list, and reload second of them.
+			var enterBack = $('<div></div>').addClass('ui-corner-all ui-icon ui-icon-circle-arrow-w').click(function() {
+				privateConfig.browserHistory.pop(); // Remove current element.
+													// It is not required now.
+				var backPath = config.basePath;
+				if (privateConfig.browserHistory.length > 0) {
+					backPath = privateConfig.browserHistory.pop();
+				}
+				loadPath(backPath);
+			}).appendTo(enterButton.clone(true).appendTo(enterPathDiv));
+
+			// Level Up Button
+			// When user click on it, last element of the history will be taken,
+			// and '..' will be applied to the end of the array.
+			var enterUp = $('<div></div>').addClass('ui-corner-all ui-icon ui-icon-arrowreturnthick-1-n').click(function() {
+				backPath = privateConfig.browserHistory[privateConfig.browserHistory.length - 1];
+				if (backPath != config.basePath) {
+					loadPath(backPath + config.separatorPath + '..');
+				}
+			}).appendTo(enterButton.clone(true).appendTo(enterPathDiv));
+
+			// Second div is on the left
+			// It contains images and texts for pre-defined paths
+			// User just click on them and it will open pre-defined path
+			var knownPathDiv = $('<div></div>').addClass('ui-widget-content').css( {
+				'text-align' : 'center',
+				'overflow' : 'auto',
+				'float' : 'left',
+				'width' : '100px'
+			});
+			if (config.useKnownPaths) {
+				knownPathDiv.appendTo(browserDlg);
+				$.each(config.knownPaths, function(index, path) {
+					var knownDiv = $('<div></div>').css( {
+						'margin' : '10px'
+					}).hover(function() {
+						$(this).addClass('ui-state-hover');
+					}, function() {
+						$(this).removeClass('ui-state-hover');
+					}).click(function() {
+						loadPath(path.path);
+					}).appendTo(knownPathDiv);
+
+					$('<img />').attr( {
+						src : systemImageUrl() + config.separatorPath + path.image
+					}).css( {
+						width : '32px',
+						margin : '5px 10px 5px 5px'
+					}).appendTo(knownDiv);
+					$('<br/>').appendTo(knownDiv);
+					$('<span></span>').text(path.text).appendTo(knownDiv);
+				});
+			}
+
+			// Third div is everywhere :)
+			// It show files and folders in the current path
+			// User can click on path to select or deselect it
+			// Doubleclick on path will open it
+			// Also doubleclick on file will select this file and close dialog
+			var browserPathDiv = $('<div></div>').addClass('ui-widget-content').css( {
+				'float' : 'right',
+				'overflow' : 'auto'
+			}).appendTo(browserDlg);
+
+			// Now everything is done
+			// When user will be ready - he just click on the area you select
+			// for this plugin and dialog will appear
+			$(this).click(function() {
+				privateConfig.browserHistory = [];
+				var startpath = removeBackPath(config.onLoad());
+
+				startpath = startpath.split(config.separatorPath);
+				startpath.pop();
+				startpath = startpath.join(config.separatorPath);
+
+				if (!checkBasePath(startpath)) {
+					startpath = config.basePath;
+				}
+				loadPath(startpath);
+				browserDlg.dialog('open');
+				recalculateSize();
+			});
+
+			// Function check if specified path is a child path of a
+			// 'config.basePath'
+			// If it is not - user should see message, that path invalid, or
+			// path should be changed to valid.
+			function checkBasePath(path) {
+				if (config.basePath == '')
+					return true;
+				var confPath = config.basePath.split(config.separatorPath);
+				var curPath = path.split(config.separatorPath);
+				if (confPath.length > curPath.length)
+					return false;
+				var result = true;
+				$.each(confPath, function(index, partConfPath) {
+					if (partConfPath != curPath[index]) {
+						result = false;
+					}
+				});
+				return result;
+			}
+
+			// Function remove '..' parts of the path
+			// Process depend on config.separatorPath option
+			// On the server side you need to check / or \ separators
+			function removeBackPath(path) {
+				var confPath = config.basePath.split(config.separatorPath);
+				var curPath = path.split(config.separatorPath);
+				var newcurPath = [];
+				$.each(curPath, function(index, partCurPath) {
+					if (partCurPath == "..") {
+						newcurPath.pop();
+					} else {
+						newcurPath.push(partCurPath);
+					}
+				});
+				return newcurPath.join(config.separatorPath);
+			}
+
+			// This function will be called when user click 'Open'
+			// It check if any path is selected, and call config.onSelect
+			// function with path list
+			function doneOk() {
+				var newCurPath = [];
+				$.each(privateConfig.selectedItems, function(index, item) {
+					newCurPath.push($.data(item, 'path'));
+				});
+				if (newCurPath.length == 0) {
+					newCurPath.push(privateConfig.browserHistory.pop());
+				}
+
+				if (config.multiselect)
+					config.onSelect(newCurPath);
+				else {
+					if (newCurPath.length == 1) {
+						config.onSelect(newCurPath[0]);
+					} else if (newCurPath.length > 1) {
+						alert('Plugin work incorrectly. If error repeat, please add issue into http://code.google.com/p/jq-serverbrowse/issues/list with steps to reproduce.');
+						return;
+					}
+				}
+				browserDlg.dialog("close");
+			}
+
+			// Function recalculate and set new width and height for left and
+			// right div elements
+			// height have '-2' because of the borders
+			// width have '-4' because of a border an 2 pixels space between
+			// divs
+			function recalculateSize(event, ui) {
+				knownPathDiv.css( {
+					'height' : browserDlg.height() - enterPathDiv.outerHeight(true) - 2
+				});
+				browserPathDiv.css( {
+					'height' : browserDlg.height() - enterPathDiv.outerHeight(true) - 2,
+					'width' : browserDlg.width() - knownPathDiv.outerWidth(true) - 4
+				});
+			}
+
+			// Function adds new element into browserPathDiv element depends on
+			// file parameters
+			// If file.isError is set, error message will be displayed instead
+			// of clickable area
+			// Clickable div contain image from extension and text from file
+			// parameter
+			function addElement(file) {
+				var itemDiv = $('<div></div>').css( {
+					margin : '2px'
+				}).appendTo(browserPathDiv);
+				if (file.isError) {
+					itemDiv.addClass('ui-state-error ui-corner-all').css( {
+						padding : '0pt 0.7em'
+					});
+					var p = $('<p></p>').appendTo(itemDiv);
+					$('<span></span>').addClass('ui-icon ui-icon-alert').css( {
+						'float' : 'left',
+						'margin-right' : '0.3em'
+					}).appendTo(p);
+					$('<span></span>').text(file.name).appendTo(p);
+				} else {
+					var fullPath = file.path + config.separatorPath + file.name;
+					itemDiv.hover(function() {
+						$(this).addClass('ui-state-hover');
+					}, function() {
+						$(this).removeClass('ui-state-hover');
+					});
+					var itemImage = $('<img />').css( {
+						width : '16px',
+						margin : '0 5px 0 0'
+					}).appendTo(itemDiv);
+					var itemText = $('<span></span>').text(file.name).appendTo(itemDiv);
+					if (file.isFolder)
+						itemImage.attr( {
+							src : systemImageUrl() + 'folder.png'
+						});
+					else {
+						ext = file.name.split('.').pop();
+						var res = '';
+						if (ext == '' || ext == file.name || (config.knownExt.length > 0 && $.inArray(ext, config.knownExt) < 0))
+							itemImage.attr( {
+								src : systemImageUrl() + 'unknown.png'
+							});
+						else
+							itemImage.attr( {
+								src : config.imageUrl + ext + '.png'
+							});
+					}
+					$.data(itemDiv, 'path', fullPath);
+					itemDiv.unbind('click').bind('click', function(e) {
+						if (!$(this).hasClass('ui-state-active')) {
+							if (!config.multiselect && privateConfig.selectedItems.length > 0) {
+								$(privateConfig.selectedItems[0]).click();
+							}
+							privateConfig.selectedItems.push(itemDiv);
+						} else {
+							var newCurPath = [];
+							$.each(privateConfig.selectedItems, function(index, item) {
+								if ($.data(item, 'path') != fullPath)
+									newCurPath.push(item);
+							});
+							privateConfig.selectedItems = newCurPath;
+						}
+						$(this).toggleClass('ui-state-active');
+					});
+
+					itemDiv.unbind('dblclick').bind('dblclick', function(e) {
+						if (file.isFolder) {
+							loadPath(fullPath);
+						} else {
+							privateConfig.selectedItems = [ itemDiv ];
+							doneOk();
+						}
+					});
+				}
+			}
+
+			// Main plugin function
+			// When user enter path manually, select it from pre-defined path,
+			// or doubleclick in browser this function will call
+			// It send a request on the server to retrieve child directories and
+			// files of the specified path
+			// If path is not under 'config.basePath', alert will be shown and
+			// nothing will be opened
+			function loadPath(path) {
+				privateConfig.selectedItems = [];
+
+				// First we need to remove all '..' parts of the path
+				path = removeBackPath(path);
+
+				// Then we need to check, if path based on 'config.basePath'
+				if (!checkBasePath(path)) {
+					alert('Path should be based from ' + config.basePath);
+					return;
+				}
+
+				// Then we can put this path into history
+				privateConfig.browserHistory.push(path);
+
+				// Show it to user
+				enterText.val(path);
+
+				// And load
+				$.ajax( {
+					url : config.handlerUrl,
+					type : config.requestMethod,
+					data : {
+						action : 'browse',
+						path : path,
+						time : new Date().getTime()
+					},
+					beforeSend : function() {
+						browserPathDiv.empty().css( {
+							'text-align' : 'center'
+						});
+						$('<img />').attr( {
+							src : systemImageUrl() + 'loading.gif'
+						}).css( {
+							width : '32px'
+						}).appendTo(browserPathDiv);
+					},
+					success : function(files) {
+						browserPathDiv.empty().css( {
+							'text-align' : 'left'
+						});
+						if (path != config.basePath && config.showUpInList) {
+							addElement( {
+								name : '..',
+								isFolder : true,
+								isError : false,
+								path : path
+							});
+						}
+						$.each(files, function(index, file) {
+							addElement($.extend(file, {
+								path : path
+							}));
+						});
+					},
+					dataType : 'json'
+				});
+			}
+		});
+		return this;
+	};
+})(jQuery);

xCAT-UI/js/nodes/nodes.js

@@ -363,8 +363,6 @@ function loadNodes(data) {
 		var checkBx = '<input type="checkbox" name="' + node + '"/>';
 		// Open node onclick
 		var nodeLink = $('<a class="node" id="' + node + '">' + node + '</a>').bind('click', loadNode);
-		// Left align node link
-		nodeLink.css('text-align', 'left');		
 		// Push in checkbox, node link, ping, and power
 		row.push(checkBx, nodeLink, '', '');
 
@@ -632,6 +630,11 @@ function loadNodes(data) {
 	$('#nodesDataTable tbody tr td:nth-child(3)').css('min-width', '60px');
 	$('#nodesDataTable tbody tr td:nth-child(4)').css('min-width', '60px');
 	
+	// Center align power, ping, and comments
+	$('#nodesDataTable tbody tr td:nth-child(3)').css('text-align', 'center');
+	$('#nodesDataTable tbody tr td:nth-child(4)').css('text-align', 'center');
+	$('#nodesDataTable tbody tr td:nth-child(5)').css('text-align', 'center');
+	
 	// Instead refresh the ping status and power status
 	pingCol.bind('click', function(event) {
 		refreshPingStatus(group);
@@ -640,7 +643,7 @@ function loadNodes(data) {
 	powerCol.bind('click', function(event) {
 		refreshPowerStatus(group);
 	});
-		
+	
 	/**
 	 * Enable editable columns
 	 */
@@ -1202,7 +1205,7 @@ function powerNode(node, power2) {
  * @return Nothing
  */
 function loadDeletePage(tgtNodes) {
-	// Get datatable
+	// Get nodes tab
 	var myTab = getNodesTab();
 
 	// Generate new tab ID
@@ -1993,7 +1996,7 @@ function showChdefOutput(data) {
 	if (!info.length) {
 		// Create info bar if one does not exist
 		info = createInfoBar('');
-		$('#nodesTab').append(info);
+		$('#' + tabID).append(info);
 	}
 		
 	// Go through output and append to paragraph

xCAT-UI/js/provision/images.js

@@ -0,0 +1,698 @@
+/**
+ * Global variables
+ */
+var origAttrs = new Object();	// Original image attributes
+var defAttrs; 					// Definable image attributes
+
+/**
+ * Load images page
+ * 
+ * @return Nothing
+ */
+function loadImagesPage() {
+	// Set padding for images page
+	$('#imagesTab').css('padding', '20px 60px');
+	
+	// Get images within the database
+	$.ajax( {
+		url : 'lib/cmd.php',
+		dataType : 'json',
+		data : {
+			cmd : 'lsdef',
+			tgt : '',
+			args : '-t;osimage;-l',
+			msg : ''
+		},
+
+		success : loadImages
+	});
+}
+
+/**
+ * Load images within the database
+ * 
+ * @param data
+ *            Data returned from HTTP request
+ * @return Nothing
+ */
+function loadImages(data) {
+	// Data returned
+	var rsp = data.rsp;
+	// Image attributes hash
+	var attrs = new Object();
+	// Image attributes
+	var headers = new Object();
+	
+	// Clear cookie containing list of images where their attributes 
+	// need to be updated
+	$.cookie('images2update', '');
+	// Clear hash table containing image attributes
+	origAttrs = '';
+	// Clear hash table containing definable image attributes
+	defAttrs = new Array();
+
+	var image;
+	var args;
+	for (var i in rsp) {
+		// Get the image
+		var pos = rsp[i].indexOf('Object name:');
+		if (pos > -1) {
+			var temp = rsp[i].split(': ');
+			image = jQuery.trim(temp[1]);
+
+			// Create a hash for the image attributes
+			attrs[image] = new Object();
+			i++;
+		}
+
+		// Get key and value
+		args = rsp[i].split('=');
+		var key = jQuery.trim(args[0]);
+		var val = jQuery.trim(args[1]);
+
+		// Create a hash table
+		attrs[image][key] = val;
+		headers[key] = 1;
+	}
+	
+	// Save attributes in hash table
+	origAttrs = attrs;
+
+	// Sort headers
+	var sorted = new Array();
+	for (var key in headers) {
+		sorted.push(key);
+	}
+	sorted.sort();
+
+	// Add column for check box and image name
+	sorted.unshift('<input type="checkbox" onclick="selectAllCheckbox(event, $(this))">', 'imagename');
+
+	// Create a datatable
+	var dTable = new DataTable('imagesDataTable');
+	dTable.init(sorted);
+
+	// Go through each image
+	for (var img in attrs) {
+		// Create a row
+		var row = new Array();
+		// Create a check box
+		var checkBx = '<input type="checkbox" name="' + img + '"/>';
+		// Push in checkbox and image name
+		row.push(checkBx, img);
+		
+		// Go through each header
+		for (var i = 2; i < sorted.length; i++) {
+			// Add the node attributes to the row
+			var key = sorted[i];
+			var val = attrs[img][key];
+			if (val) {
+				row.push(val);
+			} else {
+				row.push('');
+			}
+		}
+
+		// Add the row to the table
+		dTable.add(row);
+	}
+
+	// Clear the tab before inserting the table
+	$('#imagesTab').children().remove();
+	
+	// Create info bar for images tab
+	var info = createInfoBar('Click on a cell to edit.  Click outside the table to write to the cell.  Hit the Escape key to ignore changes. Once you are satisfied with how the table looks, click on Save.');
+	$('#imagesTab').append(info);
+
+	// Create action bar
+	var actionBar = $('<div class="actionBar"></div>');
+
+	/**
+	 * The following actions are available to perform against a given image:
+	 * copy CD and set properties
+	 */
+
+	// Copy CDs
+	var copyCdLnk = $('<a>Copy CDs</a>');
+	copyCdLnk.bind('click', function(event) {
+		loadCopyCdsPage();
+	});
+	
+	// Set image properties
+	var setProps = $('<a>Set properties</a>');
+	setProps.bind('click', function(event){
+		var tgtImages = getNodesChecked('imagesDataTable').split(',');
+		for (var i in tgtImages) {
+			 loadSetImagePropsPage(tgtImages[i]);
+		}
+	});
+	
+	/**
+	 * Create an action menu
+	 */
+	var actionsDiv = $('<div></div>');
+	var actions = [ copyCdLnk, setProps ];
+	var actionMenu = createMenu(actions);
+	actionMenu.superfish();
+	actionsDiv.append(actionMenu);
+	actionBar.append(actionsDiv);
+	$('#imagesTab').append(actionBar);
+	
+	// Insert table
+	$('#imagesTab').append(dTable.object());
+	
+	// Save changes
+	var saveLnk = $('<a>Save</a>');
+	saveLnk.bind('click', function(event){
+		updateImageAttrs();
+	});
+	
+	// Undo changes
+	var undoLnk = $('<a>Undo</a>');
+	undoLnk.bind('click', function(event){
+		restoreImageAttrs();
+	});
+
+	/**
+	 * Create menu to save and undo table changes
+	 */
+	// It will be hidden until a change is made
+	var tableActionsMenu = createMenu([saveLnk, undoLnk]).hide();
+	tableActionsMenu.css('margin-left', '490px');
+	actionsDiv.append(tableActionsMenu);
+
+	// Turn table into a datatable
+	var myDataTable = $('#imagesDataTable').dataTable({
+		'iDisplayLength': 50
+	});
+	
+	// Set datatable width
+	$('#imagesDataTable_wrapper').css({
+		'width': '880px',
+		'margin': '0px'
+	});
+	
+	/**
+	 * Enable editable columns
+	 */
+	// Do not make 1st, 2nd, 3rd, 4th, or 5th column editable
+	$('#imagesDataTable td:not(td:nth-child(1),td:nth-child(2))').editable(
+		function(value, settings) {	
+			// Change text color to red
+			$(this).css('color', 'red');
+			
+			// Get column index
+			var colPos = this.cellIndex;
+						
+			// Get row index
+			var dTable = $('#imagesDataTable').dataTable();
+			var rowPos = dTable.fnGetPosition(this.parentNode);
+			
+			// Update datatable
+			dTable.fnUpdate(value, rowPos, colPos);
+			
+			// Get image name
+			var image = $(this).parent().find('td:eq(1)').text();
+			
+			// Flag image to update
+			flagImage2Update(image);
+			
+			// Show table menu actions
+			tableActionsMenu.show();
+
+			return (value);
+		}, {
+			onblur : 'submit', 	// Clicking outside editable area submits
+								// changes
+			type : 'textarea',
+			placeholder: ' ',
+			height : '30px' 	// The height of the text area
+		});
+		
+	// Get definable node attributes
+	$.ajax( {
+		url : 'lib/cmd.php',
+		dataType : 'json',
+		data : {
+			cmd : 'lsdef',
+			tgt : '',
+			args : '-t;osimage;-h',
+			msg : ''
+		},
+
+		success : setImageDefAttrs
+	});
+}
+
+/**
+ * Flag the image in the table to update
+ * 
+ * @param image
+ *            The image name
+ * @return Nothing
+ */
+function flagImage2Update(image) {
+	// Get list containing current images to update
+	var images = $.cookie('images2update');
+
+	// If the node is not in the list
+	if (images.indexOf(image) == -1) {
+		// Add the new node to list
+		images += image + ';';
+		$.cookie('images2update', images);
+	}
+}
+
+/**
+ * Update the image attributes
+ * 
+ * @return Nothing
+ */
+function updateImageAttrs() {
+	// Get the nodes datatable
+	var dTable = $('#imagesDataTable').dataTable();
+	// Get all nodes within the datatable
+	var rows = dTable.fnGetNodes();
+	
+	// Get table headers
+	var headers = $('#imagesDataTable thead tr th');
+							
+	// Get list of nodes to update
+	var imagesList = $.cookie('images2update');
+	var images = imagesList.split(';');
+		
+	// Create the arguments
+	var args;
+	var row, colPos, value;
+	var attrName;
+	// Go through each node where an attribute was changed
+	for (var i in images) {
+		if (images[i]) {
+			args = '';
+			
+        	// Get the row containing the image name
+        	row = getImageRow(images[i], rows);
+        	$(row).find('td').each(function (){
+        		if ($(this).css('color') == 'red') {
+        			// Change color back to normal
+        			$(this).css('color', '');
+        			
+        			// Get column position
+        			colPos = $(this).parent().children().index($(this));
+        			// Get column value
+        			value = $(this).text();
+        			
+        			// Get attribute name
+        			attrName = jQuery.trim(headers.eq(colPos).text());
+        			
+        			// Build argument string
+        			if (args) {
+        				// Handle subsequent arguments
+        				args += ';' + attrName + '=' + value;
+        			} else {
+        				// Handle the 1st argument
+        				args += attrName + '=' + value;
+        			}		
+        		}
+        	});
+        	
+        	// Send command to change image attributes
+        	$.ajax( {
+        		url : 'lib/cmd.php',
+        		dataType : 'json',
+        		data : {
+        			cmd : 'chdef',
+        			tgt : '',
+        			args : '-t;osimage;-o;' + images[i] + ';' + args,
+        			msg : 'out=imagesTab;node=' + images[i]
+        		},
+
+        		success: showChdefOutput
+        	});
+		} // End of if
+	} // End of for
+	
+	// Clear cookie containing list of images where
+	// their attributes need to be updated
+	$.cookie('images2update', '');
+}
+
+/**
+ * Restore image attributes to their original content
+ * 
+ * @return Nothing
+ */
+function restoreImageAttrs() {
+	// Get list of images to restore
+	var imagesList = $.cookie('images2update');
+	var images = imagesList.split(';');
+	
+	// Get the image datatable
+	var dTable = $('#imagesDataTable').dataTable();
+	// Get table headers
+	var headers = $('#imagesDataTable thead tr th');
+	// Get all nodes within the datatable
+	var rows = dTable.fnGetNodes();
+		
+	// Go through each node where an attribute was changed
+	var row, colPos;
+	var attrName, origVal;
+	for (var i in images) {
+		if (images[i]) {			
+			// Get the row containing the image name
+        	row = getImageRow(images[i], rows);
+        	$(row).find('td').each(function (){
+        		if ($(this).css('color') == 'red') {
+        			// Change color back to normal
+        			$(this).css('color', '');
+        			
+        			// Get column position
+        			colPos = $(this).parent().children().index($(this));	        			
+        			// Get attribute name
+        			attrName = jQuery.trim(headers.eq(colPos).text());
+        			// Get original content
+        			origVal = origAttrs[images[i]][attrName];
+        			
+        			// Update column
+        			rowPos = findRowIndexUsingCol(images[i], '#imagesDataTable', 1);
+        			dTable.fnUpdate(origVal, rowPos, colPos);
+        		}
+        	});
+		} // End of if
+	} // End of for
+	
+	// Clear cookie containing list of images where
+	// their attributes need to be updated
+	$.cookie('images2update', '');
+}
+
+/**
+ * Find the row index using a column search value
+ * 
+ * @param searchStr
+ *            String to search for
+ * @param table
+ *            Table to check
+ * @param col
+ *            Column to find string under
+ * @return The row index containing the image name
+ */
+function findRowIndexUsingCol(searchStr, table, col){
+	var dTable, rows, cols;
+	
+	// Get datatable
+	dTable = $(table).dataTable();
+	rows = dTable.fnGetData();
+	
+	// Loop through each row
+	for (var i = 0; i < rows.length; i++) {
+		// Get columns in row
+		cols = dTable.fnGetData(i);
+		// If column contains string
+		if ( cols[col] == searchStr ) {
+			// Return index
+			return i;
+		}
+	}
+	
+	return -1;
+}
+
+/**
+ * Set definable image attributes
+ * 
+ * @param data
+ *            Data returned from HTTP request
+ * @return Nothing
+ */
+function setImageDefAttrs(data) {
+	// Get definable attributes
+	var attrs = data.rsp[2].split(/\n/);
+
+	// Go through each line
+	var attr, key, descr;
+	for (var i in attrs) {
+		attr = attrs[i];
+		
+		// If the line is not empty
+		if (attr) {
+			// If the line has the attribute name 
+			if (attr.indexOf(':') && attr.indexOf(' ')) {
+    			// Get attribute name and description
+    			key = jQuery.trim(attr.substring(0, attr.indexOf(':')));
+    			descr = jQuery.trim(attr.substring(attr.indexOf(':') + 1));
+    			
+    			// Set hash table where key = attribute name and value = description
+        		defAttrs[key] = descr;
+			} else {				
+				// Append description to hash table
+				defAttrs[key] = defAttrs[key] + '\n' + attr;
+			}
+		} // End of if
+	} // End of for
+}
+
+/**
+ * Load set image properties page
+ * 
+ * @param tgtImage
+ *            Target image to set properties
+ * @return Nothing
+ */
+function loadSetImagePropsPage(tgtImage) {
+	// Get nodes tab
+	var tab = getProvisionTab();
+
+	// Generate new tab ID
+	var inst = 0;
+	var newTabId = 'setImagePropsTab' + inst;
+	while ($('#' + newTabId).length) {
+		// If one already exists, generate another one
+		inst = inst + 1;
+		newTabId = 'setImagePropsTab' + inst;
+	}
+
+	// Open new tab
+	// Create set properties form
+	var setPropsForm = $('<div class="form"></div>');
+
+	// Create status bar
+	var barId = 'setImagePropsStatusBar' + inst;
+	var statBar = createStatusBar(barId);
+	statBar.hide();
+	setPropsForm.append(statBar);
+
+	// Create loader
+	var loader = createLoader('setImagePropsLoader' + inst);
+	statBar.append(loader);
+
+	// Create info bar
+	var infoBar = createInfoBar('Choose the properties you wish to change on the node. When you are finished, click Save.');
+	setPropsForm.append(infoBar);
+
+	// Create an input for each definable attribute
+	var div, label, input, descr, value;
+	// Set node attribute
+	origAttrs[tgtImage]['imagename'] = tgtImage;
+	for (var key in defAttrs) {
+		// If an attribute value exists
+		if (origAttrs[tgtImage][key]) {
+			// Set the value
+			value = origAttrs[tgtImage][key];
+		} else {
+			value = '';
+		}
+		
+		// Create label and input for attribute
+		div = $('<div></div>').css('display', 'inline');
+		label = $('<label>' + key + ':</label>').css('vertical-align', 'middle');
+		input = $('<input type="text" value="' + value + '" title="' + defAttrs[key] + '"/>').css('margin-top', '5px');
+		
+		// Change border to blue onchange
+		input.bind('change', function(event) {
+			$(this).css('border-color', 'blue');
+		});
+		
+		div.append(label);
+		div.append(input);
+		setPropsForm.append(div);
+	}
+	
+	// Change style for last division
+	div.css({
+		'display': 'block',
+		'margin': '0px 0px 10px 0px'
+	});
+	
+	// Generate tooltips
+	setPropsForm.find('div input[title]').tooltip({
+		position: "center right",	// Place tooltip on the right edge
+		offset: [-2, 10],	// A little tweaking of the position
+		effect: "fade",		// Use the built-in fadeIn/fadeOut effect
+		opacity: 0.8		// Custom opacity setting
+	});
+
+	/**
+	 * Save
+	 */
+	var saveBtn = createButton('Save');
+	saveBtn.bind('click', function(event) {	
+		// Get all inputs
+		var inputs = $('#' + newTabId + ' input');
+		
+		// Go through each input
+		var args = '';
+		var attrName, attrVal;
+		inputs.each(function(){
+			// If the border color is blue
+			if ($(this).css('border-left-color') == 'rgb(0, 0, 255)') {
+				// Change border color back to normal
+				$(this).css('border-color', '');
+				
+				// Get attribute name and value
+    			attrName = $(this).parent().find('label').text().replace(':', '');
+    			attrVal = $(this).val();
+    			
+    			// Build argument string
+    			if (args) {
+    				// Handle subsequent arguments
+    				args += ';' + attrName + '=' + attrVal;
+    			} else {
+    				// Handle the 1st argument
+    				args += attrName + '=' + attrVal;
+    			}
+    		}
+		});
+		
+		// Send command to change node attributes
+    	$.ajax( {
+    		url : 'lib/cmd.php',
+    		dataType : 'json',
+    		data : {
+    			cmd : 'chdef',
+    			tgt : '',
+    			args : '-t;osimage;-o;' + tgtImage + ';' + args,
+    			msg : 'out=' + newTabId + ';node=' + tgtImage
+    		},
+
+    		success: showChdefOutput
+    	});
+	});
+	setPropsForm.append(saveBtn);
+	
+	/**
+	 * Cancel
+	 */
+	var cancelBtn = createButton('Cancel');
+	cancelBtn.bind('click', function(event) {
+		// Close the tab
+		tab.remove($(this).parent().parent().attr('id'));
+	});
+	setPropsForm.append(cancelBtn);
+
+	// Append to discover tab
+	tab.add(newTabId, 'Properties', setPropsForm, true);
+
+	// Select new tab
+	tab.select(newTabId);
+}
+
+/**
+ * Get row element that contains given image
+ * 
+ * @param tgtImage
+ *            Image to find
+ * @param rows
+ *            Rows within the datatable
+ * @return Row element
+ */
+function getImageRow(tgtImage, rows) {
+	// Find the row
+	for (var i in rows) {
+		// Get all columns within the row
+		var cols = rows[i].children;
+		// Get the 1st column (image name)
+		var image = cols[1].innerHTML;
+
+		// If the node matches the target node
+		if (image == tgtImage) {
+			// Return the row
+			return rows[i];
+		}
+	}
+
+	return;
+}
+
+/**
+ * Load copy CDs page
+ * 
+ * @return Nothing
+ */
+function loadCopyCdsPage() {
+	// Get provision tab
+	var tab = getProvisionTab();
+
+	// Generate new tab ID
+	var inst = 0;
+	newTabId = 'copyCdsTab' + inst;
+	while ($('#' + newTabId).length) {
+		// If one already exists, generate another one
+		inst = inst + 1;
+		newTabId = 'copyCdsTab' + inst;
+	}
+	
+	// Create info bar
+	var infoBar = createInfoBar('Copy Linux distributions and service levels from CDs/DVDs to install directory');
+
+	// Create copy CDs form
+	var copyCdsForm = $('<div class="form"></div>');
+	copyCdsForm.append(infoBar);
+	
+	// Create file input
+	var file = $('<div></div>');
+	var label = $('<label>File:</label>').css('vertical-align', 'middle');
+	var input = $('<input type="text" id="file" name="file"/>').css('width', '300px');
+	file.append(label);
+	file.append(input);
+	copyCdsForm.append(file);
+	
+	// Create select button
+	var selectBtn = createButton('Select');
+	file.append(selectBtn);
+	// Browse server directory and files
+	selectBtn.serverBrowser({
+		onSelect: function(path) {
+            $('#file').val(path);
+        },
+        onLoad: function() {
+            return $('#file').val();
+        },
+        knownExt: ['exe', 'js', 'txt'],
+        knownPaths: [{text:'Install', image:'desktop.png', path:'/install'}],
+        imageUrl: 'images/',
+        systemImageUrl: 'images/',
+        handlerUrl: 'lib/getpath.php',
+        title: 'Browse',
+        basePath: '',
+        requestMethod: 'POST',
+        width: '500',
+        height: '300',
+        basePath: '/install'
+    });
+	
+	// Create copy button
+	var copyBtn = createButton('Copy');
+	copyCdsForm.append(copyBtn);
+	
+	// Create cancel button
+	var cancelBtn = createButton('Cancel');
+	copyCdsForm.append(cancelBtn);
+	cancelBtn.bind('click', function(event) {
+		// Close the tab
+		tab.remove($(this).parent().parent().attr('id'));
+	});
+
+	tab.add(newTabId, 'Copy', copyCdsForm, true);
+	tab.select(newTabId);
+}

xCAT-UI/js/provision/provision.js

@@ -38,11 +38,10 @@ function loadProvisionPage() {
 
 	// Create info bar
 	var infoBar = createInfoBar('Provision or re-provision a node on a selected platform');
-	$('#content').append(infoBar);
-
-	// Create provision form
-	provForm = $('<div class="form"></div>');
-	provForm.append(infoBar);
+	
+	// Create provision page
+	var provPg = $('<div class="form"></div>');
+	provPg.append(infoBar);
 
 	// Create provision tab
 	var tab = new Tab();
@@ -65,7 +64,7 @@ function loadProvisionPage() {
 	hwList.append(ivm);
 	hwList.append(fsp);
 	hwList.append(zvm);
-	provForm.append(hwList);
+	provPg.append(hwList);
 
 	/**
 	 * Ok
@@ -113,7 +112,13 @@ function loadProvisionPage() {
 		tab.select(newTabId);
 		plugin.loadProvisionPage(newTabId);
 	});
-	provForm.append(okBtn);
+	provPg.append(okBtn);
 
-	tab.add('provisionTab', 'Provision', provForm, false);
+	// Add provision tab
+	tab.add('provisionTab', 'Provision', provPg, false);
+	
+	// Add image tab
+	var loader = $('<center></center>').append(createLoader(''));
+	tab.add('imagesTab', 'Images', loader, false);
+	loadImagesPage();
 }

xCAT-UI/js/ui.js

@@ -426,6 +426,7 @@ function initPage() {
 	includeJs("js/jquery/jquery.jstree.js");
 	includeJs("js/jquery/jquery.flot.js");
 	includeJs("js/jquery/tooltip.min.js");
+	includeJs("js/jquery/jquery.serverBrowser.js");
 	
 	// Page plugins
 	includeJs("js/configure/configure.js");	
@@ -460,10 +461,10 @@ function initPage() {
 		loadNodesPage();
 	} else if (page == 'configure.php') {
 		includeJs("js/configure/update.js");
-		
 		headers.eq(1).css('background-color', '#A9D0F5');
 		loadConfigPage();
 	} else if (page == 'provision.php') {
+		includeJs("js/provision/images.js");
 		headers.eq(2).css('background-color', '#A9D0F5');
 		loadProvisionPage();
 	} else if (page == 'monitor.php') {

xCAT-UI/lib/getpath.php

@@ -0,0 +1,29 @@
+<?php
+
+$path = $_POST["path"];
+$result = array();
+
+if(false && !isset($path)) {
+	$element = array();
+	$element["name"] = "path should be specified";
+	$element["isFolder"] = false;
+	$element["isError"] = true;
+	$result[$file] = $element;
+	return;
+} else {
+	$path = $path.'/';
+	$handle =  opendir($path);
+	while (false !== ($file = readdir($handle))) {
+		if ($file != "." && $file != "..") {
+			$element = array();
+			$element["name"] = $file;
+			$element["isFolder"] = is_dir($path.$file);
+			$element["isError"] = false;
+			$result[$file] = $element;
+		}
+	}
+}
+
+echo json_encode($result);
+
+?>