From 6da79b8af8993c675b0c60895ae3718366516373 Mon Sep 17 00:00:00 2001
From: phamt <phamt@8638fb3e-16cb-4fca-ae20-7b5d299a9bcd>
Date: Mon, 12 Sep 2011 16:10:53 +0000
Subject: [PATCH] Updated datatable to have action action. Cleaned up code.

git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@10497 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
---
 xCAT-UI/js/monitor/gangliamon.js | 280 ++++++++--------
 xCAT-UI/js/monitor/monitor.js    |  10 +-
 xCAT-UI/js/monitor/rmcmon.js     | 526 +++++++++++++++----------------
 xCAT-UI/js/monitor/xcatmon.js    | 344 ++++++++++----------
 4 files changed, 550 insertions(+), 610 deletions(-)

diff --git a/xCAT-UI/js/monitor/gangliamon.js b/xCAT-UI/js/monitor/gangliamon.js
index 173c26912..f1c5dc520 100644
--- a/xCAT-UI/js/monitor/gangliamon.js
+++ b/xCAT-UI/js/monitor/gangliamon.js
@@ -22,10 +22,10 @@ var gangliaTimer;
  */
 function loadGangliaMon() {
 	// Get Ganglia tab
-	$('#gangliamon').append(createInfoBar('Checking RPMs.'));
+	$('#gangliamon').append(createInfoBar('Checking RPMs'));
 	
 	//should get the groups first
-	if (!$.cookie('groups')){
+	if (!$.cookie('groups')) {
 	    $.ajax( {
             url : 'lib/cmd.php',
             dataType : 'json',
@@ -62,12 +62,13 @@ function loadGangliaMon() {
 function checkGangliaRPMs(data) {
 	var gangliaTab = $('#gangliamon');
 	gangliaTab.empty();
+	
 	// Get the list of Ganglia RPMs installed
 	var status = data.rsp.split(/\n/);
 	var gangliaRPMs = [ "rrdtool", "ganglia-gmetad", "ganglia-gmond"];
 	var warningMsg = 'Before continuing, please install the following packages: ';
 	var missingRPMs = false;
-	for ( var i in status) {
+	for (var i in status) {
 		if (status[i].indexOf("not installed") > -1) {
 			warningMsg += gangliaRPMs[i] + ' ';
 			missingRPMs = true;
@@ -82,8 +83,9 @@ function checkGangliaRPMs(data) {
 		warningBar.css('margin-bottom', '10px');
 		warningBar.prependTo(gangliaTab);
 	} else {
-	    gangliaTab.append(createInfoBar('Checking Running status.'));
-		// Check if ganglia is running on the xCAT MN
+	    gangliaTab.append(createInfoBar('Checking running status'));
+		
+	    // Check if ganglia is running on the xCAT MN
 		$.ajax( {
 			url : 'lib/cmd.php',
 			dataType : 'json',
@@ -155,7 +157,7 @@ function checkGangliaRunning(data){
     }
 
     groupsSelectStr = '<select style="padding:0px;" id="gangliagroup">';
-    for (var i in groupsArray){
+    for (var i in groupsArray) {
         groupsSelectStr += '<option value="' + groupsArray[i] + '">' + groupsArray[i] + '</option>';
     }
     groupsSelectStr += '</select>';
@@ -183,11 +185,11 @@ function checkGangliaRunning(data){
     gangliaTab.append(showStr);
 
     //get summary data and draw on the page
-    $('#gangliaGridSummary').append('Getting Grid summary Data.<img src="images/loader.gif"></img>');
+    $('#gangliaGridSummary').append('Getting grid summary data <img src="images/loader.gif"></img>');
     sendGridSummaryAjax();
     
     //get nodes current status and draw on the page
-    $('#gangliaNodes').append('Getting ' + $('#gangliagroup').val() + ' nodes Status.<img src="images/loader.gif"></img>');
+    $('#gangliaNodes').append('Getting ' + $('#gangliagroup').val() + ' nodes status <img src="images/loader.gif"></img>');
     sendNodeCurrentAjax();
     
     //start the timer to update page per minute.
@@ -220,14 +222,12 @@ function checkGangliaRunning(data){
 }
 
 /**
- * send ajax request to get grid summary information
- * 
- * @param 
- *        
+ * Send AJAX request to get grid summary information
+ *       
  * @return Nothing
  */
 function sendGridSummaryAjax(){
-  //get the summary data
+	//get the summary data
     $.ajax({
         url : 'lib/cmd.php',
         dataType : 'json',
@@ -246,15 +246,14 @@ function sendGridSummaryAjax(){
 }
 
 /**
- * send ajax request to get nodes current load information
- * 
- * @param which group name want to get
+ * Send AJAX request to get nodes current load information
  *        
  * @return Nothing
  */
 function sendNodeCurrentAjax(){
     var groupname = $('#gangliagroup').val();
-  //get all nodes current status
+    
+    //get all nodes current status
     $.ajax({
         url : 'lib/cmd.php',
         dataType : 'json',
@@ -273,10 +272,8 @@ function sendNodeCurrentAjax(){
 }
 
 /**
- * send ajax request to get grid current summary information for update the page
- * 
- * @param 
- *        
+ * Send AJAX request to get grid current summary information for update the page
+ *   
  * @return Nothing
  */
 function sendGridCurrentAjax(){
@@ -299,7 +296,7 @@ function sendGridCurrentAjax(){
 }
 
 /**
- * save the grid summary data to local global variable
+ * Save the grid summary data to local global variable
  * 
  * @param data structure
  *            metric1:time11,val11,time12,val12....;metric2:time21,val21,time22,val22,...;....
@@ -329,7 +326,7 @@ function createGridSummaryData(summaryString){
 }
 
 /**
- * update the grid summary data to local global variable
+ * Update the grid summary data to local global variable
  * 
  * @param data structure
  *            metric1:time11,val11;metric2:time21,val21,time22;....
@@ -344,11 +341,11 @@ function updateGridSummaryData(currentString){
     var tempArray;
     
     tempLength = metricArray.length;
-    for (index = 0; index < tempLength; index++){
+    for (index = 0; index < tempLength; index++) {
         position = metricArray[index].indexOf(':');
         metricname = metricArray[index].substr(0, position);
         tempArray = metricArray[index].substr(position + 1).split(',');
-        if (gridData[metricname]){
+        if (gridData[metricname]) {
             gridData[metricname].shift();
             gridData[metricname].shift();
             gridData[metricname].push(Number(tempArray[0]));
@@ -357,10 +354,8 @@ function updateGridSummaryData(currentString){
     }
 }
 /**
- * draw the Grid summay area by global data
+ * Draw the grid summay area by global data
  * 
- * @param data
- *            Data returned from HTTP request
  * @return Nothing
  */
 function drawGridSummary() {
@@ -369,13 +364,14 @@ function drawGridSummary() {
     var tempStr = $('#gangliamon').attr('class');
     
     //jqflot only draw on the area visiable, if the tab is hide, return directly
-    if (-1 != tempStr.indexOf('hide')){
-        return;
-    };
-    
-    if ('[Show]' == $('#gangliamon #hidesup').text()){
+    if (tempStr.indexOf('hide') != -1){
         return;
     }
+    
+    if ($('#gangliamon #hidesup').text() == '[Show]'){
+        return;
+    }
+    
     gridDrawArea.empty();
     showStr = '<table style="border-style:none;"><tr><td style="padding:0;border-style:none;"><div id="gangliasummaryload" class="monitorsumdiv"></div></td>' + 
               '<td style="padding:0;border-style:none;"><div id="gangliasummarycpu" class="monitorsumdiv"></div></td>' +
@@ -392,26 +388,26 @@ function drawGridSummary() {
 }
 
 /**
- * draw the load flot by data(maybe summary data, or one node's data)
+ * Draw the load flot by data(summary data, or one node's data)
  * 
- * @param areaid: which div draw this flot
- *        loadpair: the load timestamp and value pair
- *        cpupair: the cpu number and value pair
- *            
+ * @param areaid
+ * 			Which DIV draw this flot
+ * @param loadpair
+ * 			The load timestamp and value pair
+ * @param cpupair
+ * 			The CPU number and value pair
  * @return Nothing
  */
 function drawLoadFlot(areaid, titleprefix, loadpair, cpupair){
     var load = new Array();
     var cpunum = new Array();
     var index = 0;
-    var templength = 0;
     var yaxismax = 0;
     var interval = 1;
     
     $('#' + areaid).empty();
     //parse load pair, the timestamp must mutiply 1000, javascript time stamp is millisecond
-    templength = loadpair.length;
-    for (index = 0; index < templength; index += 2){
+    for (index = 0; index < loadpair.length; index += 2){
         load.push([loadpair[index] * 1000, loadpair[index + 1]]);
         if (loadpair[index + 1] > yaxismax){
             yaxismax = loadpair[index + 1];
@@ -419,8 +415,7 @@ function drawLoadFlot(areaid, titleprefix, loadpair, cpupair){
     }
     
     //parse cpu pair
-    templength = cpupair.length;
-    for (index = 0; index < templength; index += 2){
+    for (index = 0; index < cpupair.length; index += 2){
         cpunum.push([cpupair[index] * 1000, cpupair[index + 1]]);
         if (cpupair[index + 1] > yaxismax){
             yaxismax = cpupair[index + 1];
@@ -431,6 +426,7 @@ function drawLoadFlot(areaid, titleprefix, loadpair, cpupair){
     if (interval < 1){
         interval = 1;
     }
+    
     $.jqplot(areaid, [load, cpunum],{
         title: titleprefix + ' Loads/Procs Last Hour',
         axes:{
@@ -458,24 +454,25 @@ function drawLoadFlot(areaid, titleprefix, loadpair, cpupair){
 }
 
 /**
- * draw the cpu usage flot by data(maybe summary data, or one node's data)
+ * Draw the CPU usage flot by data(maybe summary data, or one node's data)
  * 
- * @param areaid: which div draw this flot
- *        titleprefix : title used name
- *        cpupair: the cpu timestamp and value pair
- *            
+ * @param areaid
+ * 			Which DIV draw this flot
+ * @param titleprefix
+ * 			Title used name
+ * @param cpupair
+ * 			The CPU timestamp and value pair        
  * @return Nothing
  */
 function drawCpuFlot(areaid, titleprefix, cpupair){
     var cpu = new Array();
     var index = 0;
-    var tempLength = 0;
     
     $('#' + areaid).empty();
-    tempLength = cpupair.length;
+    
     // time stamp should mutiply 1000
-    // we get the cpu idle from server, we should use 1 subtract the idle.
-    for(index = 0; index < tempLength; index +=2){
+    // we get the CPU idle from server, we should use 1 subtract the idle
+    for (index = 0; index < cpupair.length; index +=2) {
         cpu.push([(cpupair[index] * 1000), (100 - cpupair[index + 1])]);
     }
     
@@ -502,12 +499,14 @@ function drawCpuFlot(areaid, titleprefix, cpupair){
 }
 
 /**
- * draw the memory usage flot by data(maybe summary data, or one node's data)
+ * Draw the memory usage flot by data(summary data, or one node's data)
  * 
- * @param areaid: which div draw this flot
- *        titleprefix : title used name
- *        cpupair: the cpu timestamp and value pair
- *            
+ * @param areaid
+ * 			Which DIV draw this flot
+ * @param titleprefix
+ * 			Title used name
+ * @param cpupair
+ * 			The CPU timestamp and value pair
  * @return Nothing
  */
 function drawMemFlot(areaid, titleprefix, freepair, totalpair){
@@ -517,14 +516,13 @@ function drawMemFlot(areaid, titleprefix, freepair, totalpair){
     var index = 0;
     
     $('#' + areaid).empty();
-    if(freepair.length < totalpair.length){
+    if (freepair.length < totalpair.length) {
         tempsize = freepair.length;
-    }
-    else{
+    } else {
         tempsize = freepair.length;
     }
     
-    for(index = 0; index < tempsize; index += 2){
+    for (index = 0; index < tempsize; index += 2) {
         var temptotal = totalpair[index + 1];
         var tempuse = temptotal - freepair[index + 1];
         temptotal = temptotal / 1000000;
@@ -560,13 +558,16 @@ function drawMemFlot(areaid, titleprefix, freepair, totalpair){
 }
 
 /**
- * draw the disk usage flot by data(maybe summary data, or one node's data)
+ * Draw the disk usage flot by data(summary data, or one node's data)
  * 
- * @param areaid: which div draw this flot
- *        titleprefix : title used name
- *        freepair: the free disk number, ganglia only log the free data
- *        totalpair: the all disk number
- *            
+ * @param areaid
+ * 			Which div draw this flot
+ * @param titleprefix
+ * 			Title used name
+ * @param freepair
+ * 			The free disk number, Ganglia only logs the free data
+ * @param totalpair
+ * 			The total disk number
  * @return Nothing
  */
 function drawDiskFlot(areaid, titleprefix, freepair, totalpair){
@@ -616,52 +617,58 @@ function drawDiskFlot(areaid, titleprefix, freepair, totalpair){
     );
 }
 
+/**
+ * Draw the network load flot by data(summary data, or one node's data)
+ * 
+ * @param areaid
+ * 			Which div draw this flot
+ * @param titleprefix
+ * 			Title used name
+ * @param inpair
+ * 			The timestamp and value pair for download
+ * @param outpair
+ * 			The timestamp and value pair for upload
+ * @return Nothing
+ */
 function drawNetworkFlot(areaid, titleprefix, inpair, outpair){
     var inArray = new Array();
     var outArray = new Array();
-    var templength = 0;
     var index = 0;
     var maxvalue = 0;
     var unitname = 'B';
     var divisor = 1;
     
-    templength = inpair.length;
-    for (index = 0; index < templength; index += 2){
-        if (inpair[index + 1] > maxvalue){
+    for (index = 0; index < inpair.length; index += 2) {
+        if (inpair[index + 1] > maxvalue) {
             maxvalue = inpair[index + 1];
         }
     }
     
-    templength = outpair.length;
-    for (index = 0; index < templength; index += 2){
-        if (outpair[index + 1] > maxvalue){
+    for (index = 0; index < outpair.length; index += 2) {
+        if (outpair[index + 1] > maxvalue) {
             maxvalue = outpair[index + 1];
         }
     }
     
-    if (maxvalue > 3000000){
+    if (maxvalue > 3000000) {
         divisor = 1000000;
         unitname = 'GB';
-    }
-    else if(maxvalue >= 3000){
+    } else if (maxvalue >= 3000) {
         divisor = 1000;
         unitname = 'MB';
-    }
-    else{
+    } else {
         //do nothing
     }
     
-    templength = inpair.length;
-    for (index = 0; index < templength; index += 2){
+    for (index = 0; index < inpair.length; index += 2) {
         inArray.push([(inpair[index] * 1000), (inpair[index + 1] / divisor)]);
     }
     
-    templength = outpair.length;
-    for (index = 0; index < templength; index += 2){
+    for (index = 0; index < outpair.length; index += 2) {
         outArray.push([(outpair[index] * 1000), (outpair[index + 1] / divisor)]);
     }
     
-    $.jqplot(areaid, [inArray, outArray],{
+    $.jqplot(areaid, [inArray, outArray], {
         title: titleprefix + ' Network Last Hour',
         axes:{
             xaxis:{
@@ -683,10 +690,16 @@ function drawNetworkFlot(areaid, titleprefix, inpair, outpair){
         },
         series:[{label:'In'}, {label: 'Out'}],
         seriesDefaults : {showMarker: false}
-    } 
-    );
+    });
 }
 
+/**
+ * Create node status data
+ * 
+ * @param nodesStatus
+ * 			Node status
+ * @return Nothing
+ */
 function createNodeStatusData(nodesStatus){
     var index;
     var nodesArray = nodesStatus.split(';');
@@ -695,53 +708,49 @@ function createNodeStatusData(nodesStatus){
     var index = 0;
     var tempArray;
     var tempStr = '';
-    var templength = nodesArray.length;
     
-    for (index in nodePath){
+    for (index in nodePath) {
         delete(nodePath[index]);
     }
     
-    for (index in nodeStatus){
+    for (index in nodeStatus) {
         delete(nodeStatus[index]);
     }
     
-    for (index = 0; index < templength; index++){
+    for (index = 0; index < nodesArray.length; index++) {
         tempStr = nodesArray[index];
         position = tempStr.indexOf(':');
         nodename = tempStr.substring(0, position);
         tempArray = tempStr.substring(position + 1).split(',');
         
-        switch(tempArray[0]){
-            case 'UNKNOWN':{
+        switch (tempArray[0]) {
+            case 'UNKNOWN':
                 nodeStatus[nodename] = -2;
-            }
-            break;
-            case 'ERROR':{
+                break;
+            case 'ERROR':
                 nodeStatus[nodename] = -1;
-            }
-            break;
-            case 'WARNING':{
+                break;
+            case 'WARNING':
                 nodeStatus[nodename] = 0;
                 nodePath[nodename] = tempArray[1];
-            }
-            break;
-            case 'NORMAL':{
+                break;
+            case 'NORMAL':
                 nodeStatus[nodename] = 1;
                 nodePath[nodename] = tempArray[1];
-            }
-            break;
+                break;
         }
     }
 }
+
 /**
- * draw nodes current status, there are four type:
+ * Draw nodes current status, there are four type:
  *  a. unknown(gray): can not find save data for this node
  *  b. error(red): get status sometime early, but can not get now
  *  c. warning(orange): node are heavy load
  *  d. normal(green): 
  * 
- * @param 
- *            
+ * @param ordertype
+ * 			Ascending or descending order
  * @return Nothing
  */
 function drawGangliaNodesArea(ordertype){
@@ -751,51 +760,42 @@ function drawGangliaNodesArea(ordertype){
     var nodename = '';
     var sortarray = new Array();
     $('#gangliaNodes').html('<ul style="margin:0px;padding:0px;"></ul>');
+    
     //empty the hash
-    for (index in nodeStatus){
+    for (index in nodeStatus) {
         sortarray.push([index, nodeStatus[index]]);
     }
     
-    if ('asc' == ordertype){
+    if ('asc' == ordertype) {
         sortarray.sort(statusAsc);
-    }
-    else if('des' == ordertype){
+    } else if('des' == ordertype) {
         sortarray.sort(statusDes);
-    }
-    else{
+    } else {
         //do nothing
     }
     
     templength = sortarray.length;
-    for (index = 0; index < templength; index++){
+    for (index = 0; index < templength; index++) {
         nodename = sortarray[index][0];
-        switch(sortarray[index][1]){
-            case -2:{
-                showStr = '<li class="monitorunknown ui-corner-all monitornodeli" ' + 
-                        'title="' + nodename + '"></li>';
-            }
-            break;
-            case -1:{
-                showStr = '<li class="monitorerror ui-corner-all monitornodeli" ' + 
-                        'title="' + nodename + '"></li>';
-            }
-            break;
-            case 0:{
-                showStr = '<li class="mornitorwarning ui-corner-all monitornodeli" ' + 
-                        'title="' + nodename + '"></li>';
-            }
-            break;
-            case 1:{
-                showStr = '<li class="monitornormal ui-corner-all monitornodeli" ' + 
-                        'title="' + nodename + '"></li>';
-            }
-            break;
+        switch (sortarray[index][1]) {
+            case -2:
+                showStr = '<li class="monitorunknown ui-corner-all monitornodeli" title="' + nodename + '"></li>';
+                break;
+            case -1:
+                showStr = '<li class="monitorerror ui-corner-all monitornodeli" title="' + nodename + '"></li>';
+                break;
+            case 0:
+                showStr = '<li class="mornitorwarning ui-corner-all monitornodeli" title="' + nodename + '"></li>';
+                break;
+            case 1:
+                showStr = '<li class="monitornormal ui-corner-all monitornodeli" title="' + nodename + '"></li>';
+                break;
         }
         $('#gangliaNodes ul').append(showStr);
     }
     
     //bind all normal and warning nodes' click event
-    $('.monitornormal,.monitorwarning').bind('click', function(){
+    $('.monitornormal,.monitorwarning').bind('click', function() {
         var nodename = $(this).attr('title');
         window.open('ganglianode.php?n=' + nodename + '&p=' + nodePath[nodename],
                 'nodedetail','height=430,width=950,scrollbars=yes,status =no');
@@ -804,14 +804,12 @@ function drawGangliaNodesArea(ordertype){
 }
 
 /**
- * update all tab per minute.
+ * Update all tab per minute.
  * 
- * @param 
- *            
  * @return Nothing
  */
 function updateGangliaPage(){
-    if ($('#gangliaNodes').size() < 1){
+    if ($('#gangliaNodes').size() < 1) {
         return;
     }
     
@@ -821,10 +819,10 @@ function updateGangliaPage(){
     gangliaTimer = window.setTimeout('updateGangliaPage()', 60000);
 }
 
-function statusAsc(a, b){
+function statusAsc(a, b) {
     return a[1] - b[1];
 }
 
-function statusDes(a, b){
+function statusDes(a, b) {
     return b[1] - a[1];
 }
\ No newline at end of file
diff --git a/xCAT-UI/js/monitor/monitor.js b/xCAT-UI/js/monitor/monitor.js
index 1b69757e1..fd43f0e59 100644
--- a/xCAT-UI/js/monitor/monitor.js
+++ b/xCAT-UI/js/monitor/monitor.js
@@ -120,19 +120,19 @@ function loadMonitorPage() {
 			}
 						
 			var monTable = $('<table></table>');
-			monTable.append($('<thead><tr><th><b>Monitor Tool</b></th><th><b>Status</b></th><th><b>Description</b></th></tr></thead>'));
+			monTable.append($('<thead><tr><th><b>Tool</b></th><th><b>Status</b></th><th><b>Description</b></th></tr></thead>'));
 			
 			var monTableBody = $('<tbody></tbody>');
 			monTable.append(monTableBody);			
 			
 			var xcatMon = $('<tr></tr>');
-			xcatMon.append($('<td><a href="#" name="xcatmon">xCAT Monitor</a></td>'));
+			xcatMon.append($('<td><a href="#" name="xcatmon">xCAT</a></td>'));
 			xcatMon.append($('<td></td>').append(statusButtonHash['xcatmon']));
 			xcatMon.append($('<td>Provides node status monitoring using fping on AIX and nmap on Linux. It also provides application status monitoring. The status and the appstatus columns of the nodelist table will be updated periodically  with the latest status values for the nodes.</td>'));
 			monTableBody.append(xcatMon);
 			
 			var rmcMon = $('<tr></tr>');
-			rmcMon.append($('<td><a href="#" name="rmcmon">RMC Monitor</a></td>'));
+			rmcMon.append($('<td><a href="#" name="rmcmon">RMC</a></td>'));
 			rmcMon.append($('<td></td>').append(statusButtonHash['rmcmon']));
 			rmcMon.append($('<td>IBM\'s Resource Monitoring and Control (RMC) subsystem is our recommended software for monitoring xCAT clusters. It\'s is part of the IBM\'s Reliable Scalable Cluster Technology (RSCT) that provides a comprehensive clustering environment for AIX and Linux.</td>'));
 			monTableBody.append(rmcMon);
@@ -144,13 +144,13 @@ function loadMonitorPage() {
 			monTableBody.append(rmcEvent);
 
 			var gangliaMon = $('<tr></tr>');
-			gangliaMon.append($('<td><a href="#" name="gangliamon">Ganglia Monitor</a></td>'));
+			gangliaMon.append($('<td><a href="#" name="gangliamon">Ganglia</a></td>'));
 			gangliaMon.append($('<td></td>').append(statusButtonHash['gangliamon']));
 			gangliaMon.append($('<td>A scalable distributed monitoring system for high-performance computing systems such as clusters and Grids.</td>'));
 			monTableBody.append(gangliaMon);
 			
 			var pcpMon = $('<tr></tr>');
-			pcpMon.append($('<td><a href="#" name="pcpmon">PCP Monitor</a></td>'));
+			pcpMon.append($('<td><a href="#" name="pcpmon">PCP</a></td>'));
 			pcpMon.append($('<td></td>').append(statusButtonHash['pcpmon']));
 			pcpMon.append($('<td>Under construction.</td>'));
 			monTableBody.append(pcpMon);
diff --git a/xCAT-UI/js/monitor/rmcmon.js b/xCAT-UI/js/monitor/rmcmon.js
index f3638e98b..bb396fa21 100644
--- a/xCAT-UI/js/monitor/rmcmon.js
+++ b/xCAT-UI/js/monitor/rmcmon.js
@@ -14,14 +14,13 @@ function loadRmcMon() {
     rmcStatusBar.find('div').append(createLoader());
     rmcMonTab.append(rmcStatusBar);
 
-    //add the configure button.
+    //add the configure button
     var configButton = createButton('Configure');
     configButton.hide();
     configButton.click(function() {
         if ($('#rmcMonConfig').is(':hidden')) {
             $('#rmcMonConfig').show();
-        }
-        else {
+        } else {
             $('#rmcMonConfig').hide();
         }
     });
@@ -39,18 +38,18 @@ function loadRmcMon() {
     $('#nodeDetail').hide();
 
     //check the software work status by platform(linux and aix)
-    $.ajax( {
-        url : 'lib/systemcmd.php',
-        dataType : 'json',
-        data : {
-            cmd : 'ostype'
+    $.ajax({
+        url: 'lib/systemcmd.php',
+        dataType: 'json',
+        data: {
+            cmd: 'ostype'
         },
 
-        success : rsctRpmCheck
+        success: rsctRpmCheck
     });
 }
 
-function loadRmcMonConfigure(){
+function loadRmcMonConfigure() {
 	//get the configure div and clean its content.
 	var rmcmonCfgDiv = $('#rmcMonConfig');
 	rmcmonCfgDiv.empty();
@@ -61,13 +60,13 @@ function loadRmcMonConfigure(){
 	startButton.click(function(){
 		$('#rmcMonStatus div').empty().append(createLoader());
 		$.ajax({
-			url : 'lib/cmd.php',
-			dataType : 'json',
-			data : {
-				cmd : 'webrun',
-				tgt : '',
-				args : 'rmcstart;compute',
-				msg : ''
+			url: 'lib/cmd.php',
+			dataType: 'json',
+			data: {
+				cmd: 'webrun',
+				tgt: '',
+				args: 'rmcstart;compute',
+				msg: ''
 			},
 
 			success : function(data){
@@ -79,19 +78,19 @@ function loadRmcMonConfigure(){
 	//add the stop button
 	var stopButton = createButton('Stop');
 	rmcmonCfgDiv.append(stopButton);
-	stopButton.click(function(){
+	stopButton.click(function() {
 		$('#rmcMonStatus div').empty().append(createLoader());
 		$.ajax({
-			url : 'lib/cmd.php',
-			dataType : 'json',
-			data : {
-				cmd : 'monstop',
-				tgt : '',
-				args : 'rmcmon',
-				msg : ''
+			url: 'lib/cmd.php',
+			dataType: 'json',
+			data: {
+				cmd: 'monstop',
+				tgt: '',
+				args: 'rmcmon',
+				msg: ''
 			},
 
-			success : function(data){
+			success: function(data) {
 				$('#rmcMonStatus div').empty().append(data.rsp[0]);
 			}
 		});
@@ -100,93 +99,90 @@ function loadRmcMonConfigure(){
 	//add the cancel button
 	var cancelButton = createButton('Cancel');
 	rmcmonCfgDiv.append(cancelButton);
-	cancelButton.click(function(){
+	cancelButton.click(function() {
 		$('#rmcMonConfig').hide();
 	});
 }
 
-function rsctRpmCheck(data){
+function rsctRpmCheck(data) {
 	//linux had to check the rscp first
-	if ('aix' != data.rsp){
-		$.ajax( {
-			url : 'lib/systemcmd.php',
-			dataType : 'json',
-			data : {
-				cmd : 'rpm -q rsct.core'
+	if ('aix' != data.rsp) {
+		$.ajax({
+			url: 'lib/systemcmd.php',
+			dataType: 'json',
+			data: {
+				cmd: 'rpm -q rsct.core'
 			},
 
-			success : function(data){
-				if (-1 != data.rsp.indexOf("not")){
+			success: function(data) {
+				if (-1 != data.rsp.indexOf("not")) {
 					$('#rmcMonStatus div').empty().append(
 					'Please install the <a href="http://www14.software.ibm.com/webapp/set2/sas/f/rsct/rmc/download/home.html" target="install_window">RSCT</a> first.<br/>' +
 					'You can find more support from <a href="http://xcat.svn.sourceforge.net/viewvc/xcat/xcat-core/trunk/xCAT-client/share/doc/xCAT2-Monitoring.pdf" target="pdf_window">xCAT2-Monitoring.pdf</a>');
-				}
-				else{
+				} else {
 					xcatrmcRpmCheck();
 				}
 			}
 		});
-	}
-	else{		
+	} else {		
 		xcatrmcRpmCheck();
 	}
 }
 
-function xcatrmcRpmCheck(){
-	$.ajax( {
+function xcatrmcRpmCheck() {
+	$.ajax({
 		url : 'lib/systemcmd.php',
 		dataType : 'json',
 		data : {
 			cmd : 'rpm -q xCAT-rmc rrdtool'
 		},
 
-		success : function(data){
+		success : function(data) {
 			var softInstallStatus = data.rsp.split(/\n/);
 			var needHelp = false;
 			$('#rmcMonStatus div').empty();
 			//check the xcat-rmc
-			if (-1 != softInstallStatus[0].indexOf("not")){
+			if (-1 != softInstallStatus[0].indexOf("not")) {
 				needHelp = true;
 				$('#rmcMonStatus div').append(
 				'Please install the <a href="http://xcat.sourceforge.net/#download" target="install_window">xCAT-rmc</a> first.<br/>');
 			}
 			
 			//check the rrdtool
-			if (-1 != softInstallStatus[1].indexOf("not")){
+			if (-1 != softInstallStatus[1].indexOf("not")) {
 				needHelp = true;
 				$('#rmcMonStatus div').append(
 					'Please install the <a href="http://oss.oetiker.ch/rrdtool/download.en.html" target="install_window">RRD-tool</a> first.<br/>');
 			}
 			
 			//add help info or load the rmc show
-			if (needHelp){
+			if (needHelp) {
 				$('#rmcMonStatus div').append(
 				'You can find more support form <a href="http://xcat.svn.sourceforge.net/viewvc/xcat/xcat-core/trunk/xCAT-client/share/doc/xCAT2-Monitoring.pdf" target="pdf_window">xCAT2-Monitoring.pdf</a>');
-			}
-			else{
+			} else {
 				rmcWorkingCheck();
 			}
 		}
 	});
 }
 
-function rmcWorkingCheck(){
-	$('#rmcMonStatus div').empty().append("Checking RMC working status.");
+function rmcWorkingCheck() {
+	$('#rmcMonStatus div').empty().append("Checking RMC working status");
 	$('#rmcMonStatus div').append(createLoader());
 	$('#rmcmon button:first').show();
 	$.ajax({
-		url : 'lib/cmd.php',
-		dataType : 'json',
-		data : {
-			cmd : 'monls',
-			tgt : '',
-			args : 'rmcmon',
-			msg : ''
+		url: 'lib/cmd.php',
+		dataType: 'json',
+		data: {
+			cmd: 'monls',
+			tgt: '',
+			args: 'rmcmon',
+			msg: ''
 		},
 
-		success : function(data){
+		success: function(data) {
 			if (-1 != data.rsp[0].indexOf("not-monitored")){
-				$('#rmcMonStatus div').empty().append("Please start the RMC Monitoring first.");
+				$('#rmcMonStatus div').empty().append("Please start the RMC Monitoring first");
 				return;
 			}
 			loadRmcMonShow();
@@ -203,21 +199,21 @@ function removeStatusBar(){
 }
 
 function loadRmcMonShow(){
-	$('#rmcMonStatus div').empty().append("Getting Summary Data.");
+	$('#rmcMonStatus div').empty().append("Getting summary data");
 	$('#rmcMonStatus div').append(createLoader());
 	
 	//load the rmc status summary
 	$.ajax({
-		url : 'lib/cmd.php',
-		dataType : 'json',
-		data : {
-			cmd : 'webrun',
-			tgt : '',
-			args : 'rmcshow;summary;PctTotalTimeIdle,PctRealMemFree',
-			msg : ''
+		url: 'lib/cmd.php',
+		dataType: 'json',
+		data: {
+			cmd: 'webrun',
+			tgt: '',
+			args: 'rmcshow;summary;PctTotalTimeIdle,PctRealMemFree',
+			msg: ''
 		},
 
-		success : function(data){			
+		success: function(data) {			
 			showRmcSummary(data.rsp[0]);
 		}
 	});
@@ -234,19 +230,19 @@ function showRmcSummary(returnData) {
     globalTimeStamp = new Array();
 
     //update the rmc status area
-    $('#rmcMonStatus div').empty().append("Getting Nodes' Data").append(createLoader());
+    $('#rmcMonStatus div').empty().append("Getting nodes data").append(createLoader());
     //load each nodes' status
-    $.ajax( {
-        url : 'lib/cmd.php',
-        dataType : 'json',
-        data : {
-            cmd : 'webrun',
-            tgt : '',
-            args : 'rmcshow;compute;PctTotalTimeIdle,PctRealMemFree',
-            msg : ''
+    $.ajax({
+        url: 'lib/cmd.php',
+        dataType: 'json',
+        data: {
+            cmd: 'webrun',
+            tgt: '',
+            args: 'rmcshow;compute;PctTotalTimeIdle,PctRealMemFree',
+            msg: ''
         },
 
-        success : function(data) {
+        success: function(data) {
             parseRmcData(data.rsp);
         }
     });
@@ -256,7 +252,7 @@ function showRmcSummary(returnData) {
     var tempDate = new Date();
     var tempOffset = tempDate.getTimezoneOffset();
     var tempTime = tempDate.getTime() - 3600000;
-    for ( var i = 0; i < 60; i++) {
+    for (var i = 0; i < 60; i++) {
         tempDate.setTime(tempTime + i * 60000);
         globalTimeStamp.push(tempDate.getTime());
     }
@@ -279,29 +275,29 @@ function showRmcSummary(returnData) {
         summaryRow.append(tempTd);
         attrDiv = $('<div id="monitorsumdiv' + attr + '" class="monitorsumdiv"></div>');
         tempTd.append(attrDiv);
-        for ( var i in attrValues) {
+        for (var i in attrValues) {
             tempArray.push( [ globalTimeStamp[i], Number(attrValues[i]) ]);
         }
 
         $.jqplot('monitorsumdiv' + attr, [ tempArray ], {
-            series : [ {
+            series: [{
                 showMarker : false
-            } ],
-            axes : {
-                xaxis : {
-                    label : attrName,
-                    renderer : $.jqplot.DateAxisRenderer,
-                    numberTicks : 5,
-                    tickOptions : {
-                        formatString : '%R',
-                        show : true,
-                        fontSize : '10px'
+            }],
+            axes: {
+                xaxis: {
+                    label: attrName,
+                    renderer: $.jqplot.DateAxisRenderer,
+                    numberTicks: 5,
+                    tickOptions: {
+                        formatString: '%R',
+                        show: true,
+                        fontSize: '10px'
                     }
                 },
-                yaxis : {
-                    tickOptions : {
-                        formatString : '%.2f',
-                        fontSize : '10px'
+                yaxis: {
+                    tickOptions: {
+                        formatString: '%.2f',
+                        fontSize: '10px'
                     }
                 }
             }
@@ -309,7 +305,7 @@ function showRmcSummary(returnData) {
     }
 }
 
-function parseRmcData(returnData){
+function parseRmcData(returnData) {
     var nodeName;
     var nodeStatus;
     
@@ -323,12 +319,12 @@ function parseRmcData(returnData){
     
     globalAllNodesNum = returnData.length;
     globalFinishNodesNum = 0;
-    for(var i in returnData){
+    for (var i in returnData) {
         var temp = returnData[i].indexOf(':');;
         nodeName = returnData[i].substr(0, temp);
         nodeStatus = returnData[i].substr(temp + 1).replace(/(^\s*)|(\s*$)/g, '');
         
-        if ('OK' != nodeStatus){
+        if ('OK' != nodeStatus) {
             globalFinishNodesNum++;
             detailUl.append(createUnkownNode(nodeName));
             removeStatusBar();
@@ -351,13 +347,13 @@ function parseRmcData(returnData){
     }
 }
 
-function createUnkownNode(nodeName){
+function createUnkownNode(nodeName) {
     var tempLi = '<li class="monitorunknown ui-corner-all monitornodeli" id="' + nodeName + '" ' + 
                  'title="Name:' + nodeName + '<br/>Unknown"></li>';
     return tempLi;
 }
 
-function createErrorNode(nodeName){
+function createErrorNode(nodeName) {
     var tempLi = '<li class="monitorerror ui-corner-all monitornodeli id="' + nodeName + '" ' +
                  'title="Name:' + nodeName + '<br/>Error"></li>';
 }
@@ -370,14 +366,14 @@ function showRmcNodes(data, nodename) {
     var classname = '';
     var tempObj = {};
     
-    for (index in data){
+    for (index in data) {
         position = data[index].indexOf(':');
         attrname = data[index].substr(0, position);
         values = data[index].substr(position + 1);
         //error node, can not get the last hour's data
-        if ('' == values){
+        if (!values) {
             $('#rmcmonDetail ul').append(createErrorNode(nodename));
-            if (globalNodesDetail[nodename]){
+            if (globalNodesDetail[nodename]) {
                 delete(globalNodesDetail[nodename]);
             }
             return;
@@ -394,22 +390,21 @@ function showRmcNodes(data, nodename) {
     var memAvg = 0;
     var tempSum = 0;
     var tempArray = globalNodesDetail[nodename]['PctTotalTimeIdle'].split(',');
-    for (index = 0; index < tempArray.length; index++){
+    for (index = 0; index < tempArray.length; index++) {
         tempSum += Number(tempArray[index]);
     }
     cpuAvg = parseInt(tempSum / index);
     
     tempArray = globalNodesDetail[nodename]['PctRealMemFree'].split(',');
     tempSum = 0;
-    for (index = 0; index < tempArray.length; index++){
+    for (index = 0; index < tempArray.length; index++) {
         tempSum += Number(tempArray[index]);
     }
     memAvg = parseInt(tempSum / index);
     
     if (cpuAvg >= 10 && memAvg <= 90){
         classname = 'monitornormal';
-    }
-    else{
+    } else {
         classname = 'mornitorwarning';
     }
     
@@ -463,9 +458,9 @@ function showNode(nodeName) {
         }
 
         $.jqplot('monitornodediv' + nodeName + attr, [ tempArray ], {
-            series : [ {
+            series : [{
                 showMarker : false
-            } ],
+            }],
             axes : {
                 xaxis : {
                     label : attr,
@@ -488,14 +483,10 @@ function showNode(nodeName) {
     }
 }
 
-/*===========RMC Event Tab============*/
 /**
- * load the rmc event tab.
- * 
- * @param
- * 
- * @return
+ * load the rmc event tab
  * 
+ * @return nothing 
  */
 function loadRmcEvent(){
 	//find the rmcevent tab
@@ -506,7 +497,7 @@ function loadRmcEvent(){
 	$('#rmcevent').append(rmcStatusBar);
 	$('#rmcevent').append('<div id="rmcEventDiv"></div>');
 	
-	$.ajax( {
+	$.ajax({
 		url : 'lib/cmd.php',
 		dataType : 'json',
 		data : {
@@ -523,11 +514,10 @@ function loadRmcEvent(){
 /**
  * get all conditions
  * 
- * @return
- * 
+ * @return nothing
  */
 function getConditions(){
-	if ('' == globalCondition){
+	if (!globalCondition) {
 		$('#rmcEventStatus div').empty().append('Getting predefined conditions').append(createLoader());
 		$.ajax({
 			url : 'lib/cmd.php',
@@ -545,8 +535,7 @@ function getConditions(){
 				globalCondition = data.rsp[0];
 			}
 		});
-	}
-	else{
+	} else {
 		$('#rmcEventButtons').show();
 	}
 }
@@ -554,18 +543,17 @@ function getConditions(){
 /**
  * get all response
  * 
- * @return
- * 
+ * @return nothing
  */
-function getResponse(){
+function getResponse() {
 	var tempFlag = false;
 	//get all response first
-	for (var i in globalResponse){
+	for (var i in globalResponse) {
 		tempFlag = true; 
 		break;
 	}
 	
-	if (!tempFlag){
+	if (!tempFlag) {
 		$.ajax({
 			url : 'lib/cmd.php',
 			dataType : 'json',
@@ -576,9 +564,9 @@ function getResponse(){
 				msg : ''
 			},
 			
-			success : function(data){
+			success : function(data) {
 				var resps = data.rsp[0].split(';');
-				for (var i in resps){
+				for (var i in resps) {
 					var name = resps[i];
 					name = name.substr(1, (name.length - 2));
 					globalResponse[name] = 1;
@@ -591,24 +579,20 @@ function getResponse(){
 /**
  * show all the event in the rmc event tab
  * 
- * @param data response from the xcat server.
-
- * @return
- * 
+ * @param data 
+ * 			response from the xcat server
+ * @return nothing 
  */
-function showEventLog(data){
+function showEventLog(data) {
 	$('#rmcEventStatus div').empty();
 	// rsct not installed.
-	if (data.rsp[0] && (-1 != data.rsp[0].indexOf('lsevent'))){
+	if (data.rsp[0] && (-1 != data.rsp[0].indexOf('lsevent'))) {
 		$('#rmcEventStatus div').append('Please install RSCT first!');
 		return;
 	}
 	var eventDiv = $('#rmcEventDiv');
 	eventDiv.empty();
-	
-	//add the configure button
-	loadRmcEventConfig();
-	
+		
 	//get conditions and responses, save in the global
 	getConditions();
 	getResponse();
@@ -616,80 +600,87 @@ function showEventLog(data){
 	var eventTable = new DataTable('lsEventTable');
 	eventTable.init(['Time', 'Type', 'Content']);
 	
-	for (var i in data.rsp){
+	for (var i in data.rsp) {
 		var row = data.rsp[i].split(';');
 		eventTable.add(row);
 	}
 	
 	eventDiv.append(eventTable.object());
 	$('#lsEventTable').dataTable({
-		'bFilter' : true,
-		'bLengthChange' :true,
-		'bSort' :true,
-		'bPaginate' :true,
-		'iDisplayLength' :10
+		'iDisplayLength': 50,
+		'bLengthChange': false,
+		"sScrollX": "100%",
+		"bAutoWidth": true
 	});
 	
+	//add the configure button
+	loadRmcEventConfig();
+	
 	//unsort on the content column
 	$('#lsEventTable thead tr th').eq(2).unbind('click');
 }
 
 /**
  * Add the configure button into rmc event tab
- * 
- * @param 
-
- * @return
- * 
+ *
+ * @return nothing 
  */
 function loadRmcEventConfig(){
-	var buttons = $('<div id="rmcEventButtons" style="display:none;"></div>');
-	var chCondScopeBut = createButton('Change Condition Scope');
-	chCondScopeBut.bind('click', function(){
+	//create action bar
+	var actionBar = $('<div class="actionBar"></div>');
+	var chCondScopeLnk = $('<a>Change condition scope</a>');
+	chCondScopeLnk.bind('click', function() {
 		chCondScopeDia();
 	});
-	buttons.append(chCondScopeBut);
 	
-	var mkCondRespBut = createButton('Make/Remove Association');
-	mkCondRespBut.bind('click', function(){
+	var mkCondRespLnk = $('<a>Make/remove associatione</a>');
+	mkCondRespLnk.bind('click', function() {
 		mkCondRespDia();
 	});
-	buttons.append(mkCondRespBut);
 	
-	var startCondRespBut = createButton('Start/Stop Association');
-	startCondRespBut.bind('click', function(){
+	var startCondRespLnk = $('<a>Start/stop association</a>');
+	startCondRespLnk.bind('click', function() {
 		startStopCondRespDia();
 	});
-	buttons.append(startCondRespBut);
 	
-	$('#rmcEventDiv').append(buttons);
+	//actions
+	var actionsLnk = '<a>Actions</a>';
+	var actsMenu = createMenu([chCondScopeLnk, mkCondRespLnk, startCondRespLnk]);
+
+	//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="lsEventTable_menuDiv" class="menuDiv"></div>');
+	$('#lsEventTable_wrapper').prepend(menuDiv);
+	menuDiv.append(actionBar);	
+	$('#lsEventTable_filter').appendTo(menuDiv);
 }
 
 /**
  * show the make association dialogue
  * 
- * @param 
-
- * @return
- * 
+ * @return nothing
  */
 function mkCondRespDia(){
 	var diaDiv = $('<div title="Configure Association" id="mkAssociation" class="tab"></div>');
 	var mkAssociationTable = '<center><table><thead><tr><th>Condition Name</th><th>Response Name</th></tr></thead>';
 	mkAssociationTable += '<tbody><tr><td id="mkAssCond">';
 	//add the conditions into fieldset
-	if ('' == globalCondition){
-		mkAssociationTable += 'Getting predefined conditions, open this dislogue later.';
-	}
-	else{
+	if (!globalCondition) {
+		mkAssociationTable += 'Getting predefined conditions, open this dislogue later';
+	} else {
 		mkAssociationTable += createConditionTd(globalCondition);
 	}
 	
-	mkAssociationTable += '</td><td id="mkAssResp">Plase select condition first.</td></tr></tbody></table></center>';
+	mkAssociationTable += '</td><td id="mkAssResp">Please select condition first</td></tr></tbody></table></center>';
 	diaDiv.append(mkAssociationTable);
 	diaDiv.append('<div id="selectedResp" style="display: none;" ><div>');
 	//change the response field when click the condition
-	diaDiv.find('input:radio').bind('click', function(){
+	diaDiv.find('input:radio').bind('click', function() {
 		diaDiv.find('#mkAssResp').empty().append('Getting response').append(createLoader());
 		$.ajax({
 			url : 'lib/cmd.php',
@@ -701,25 +692,24 @@ function mkCondRespDia(){
 				msg : ''
 			},
 			
-			success : function (data){
+			success : function(data) {
 				var tempHash = new Object();
 				var oldSelectedResp = '';
 				var showStr = '';
 				if (data.rsp[0]){
 					var names = data.rsp[0].split(';');
-					for (var i in names){
+					for (var i in names) {
 						var name = names[i];
 						name = name.substr(1, name.length - 2);
 						tempHash[name] = 1;
 					}
 				}
 				
-				for (var name in globalResponse){
-					if (tempHash[name]){
+				for (var name in globalResponse) {
+					if (tempHash[name]) {
 						showStr += '<input type="checkbox" checked="checked" value="' + name + '">' + name + '<br/>';
 						oldSelectedResp += ';' + name;
-					}
-					else{
+					} else {
 						showStr += '<input type="checkbox" value="' + name + '">' + name + '<br/>';
 					}
 				}
@@ -734,14 +724,11 @@ function mkCondRespDia(){
 		 modal: true,
          width: 620,
          height: 600,
-         close: function(event, ui){
+         close: function(event, ui) {
 					$(this).remove();
 				},
 		buttons: {
-			cancel : function(){
-				$(this).dialog('close');
-			},
-			ok : function(){
+			'Ok' : function() {
 				var newResp = new Object();
 				var oldResp = new Object();
 				var oldString = '';
@@ -749,15 +736,15 @@ function mkCondRespDia(){
 				
 				//get the old seelected responses
 				var conditionName = $(this).find('#mkAssCond :checked').attr('value');
-				if (!conditionName){
+				if (!conditionName) {
 					return;
 				}
 				var temp = $(this).find('#selectedResp').html();
-				if('' == temp){
+				if(!temp) {
 					return;
 				}
 				var tempArray = temp.substr(1).split(';');
-				for (var i in tempArray){
+				for (var i in tempArray) {
 					oldResp[tempArray[i]] = 1;
 				}
 				
@@ -767,31 +754,31 @@ function mkCondRespDia(){
 					newResp[respName] = 1;
 				});
 				
-				for (var i in newResp){
-					if (oldResp[i]){
+				for (var i in newResp) {
+					if (oldResp[i]) {
 						delete oldResp[i];
 						delete newResp[i];
 					}
 				}
 				
 				//add the response which are delete.
-				for (var i in oldResp){
+				for (var i in oldResp) {
 					oldString += ',"' + i + '"';
 				}
-				if ('' != oldString){
+				if ('' != oldString) {
 					oldString = oldString.substr(1);
 				}
 				
 				//add the response which are new add
-				for (var i in newResp){
+				for (var i in newResp) {
 					newString += ',"' + i +'"';
 				}
-				if ('' != newString){
+				if ('' != newString) {
 					newString = newString.substr(1);
 				}
 				
-				if (('' != oldString) || ('' != newString)){
-					$('#rmcEventStatus div').empty().append('Create/Remove associations').append(createLoader());
+				if (('' != oldString) || ('' != newString)) {
+					$('#rmcEventStatus div').empty().append('Create/remove associations ').append(createLoader());
 					$.ajax({
 						url : 'lib/cmd.php',
 						dataType : 'json',
@@ -802,12 +789,15 @@ function mkCondRespDia(){
 							msg : ''
 						},
 						
-						success : function(data){
+						success : function(data) {
 							$('#rmcEventStatus div').empty().append(data.rsp[0]);;
 						}
 					});
 				}
 				$(this).dialog('close');
+			},
+			'Cancel' : function() {
+				$(this).dialog('close');
 			}
 		}
 	});
@@ -815,29 +805,25 @@ function mkCondRespDia(){
 
 /**
  * show the make condition dialogue
- * 
- * @param 
-
- * @return
- * 
+ *
+ * @return nothing 
  */
-function chCondScopeDia(){
+function chCondScopeDia() {
 	var diaDiv = $('<div title="Change Condition Scope" id="chScopeDiaDiv" class="tab"></div>');
 	var tableContent = '<center><table id="changeScopeTable" ><thead><tr><th>Condition Name</th><th>Group Name</th></tr></thead>';
 	
 	tableContent += '<tbody><tr><td id="changePreCond">';
 	//add the conditions into fieldset
-	if ('' == globalCondition){
-		tableContent += 'Getting predefined conditions, open this dislogue later.';
-	}
-	else{
+	if ('' == globalCondition) {
+		tableContent += 'Getting predefined conditions, open this dialogue later';
+	} else {
 		tableContent += createConditionTd(globalCondition);
 	}
 	tableContent += '</td><td id="changeGroup">';
 	
 	//add the groups into table
 	var groups = $.cookie('groups').split(',');
-	for (var i in groups){
+	for (var i in groups) {
 		tableContent += '<input type="checkbox" value="' + groups[i] + '">' + groups[i] + '<br/>';
 	}
 	
@@ -850,33 +836,29 @@ function chCondScopeDia(){
 		modal: true,
         width: 500,
         height : 600,
-        close: function(event, ui){
+        close: function(event, ui) {
 					$(this).remove();
 				},
 		buttons: {
-			cancel : function(){
-				$(this).dialog('close');
-			},
-			ok : function(){
+			'Ok' : function() {
 				$('#changeStatus').empty().append('<legend>Status</legend>');
 				var conditionName = $('#changePreCond :checked').attr('value');
 				var groupName = '';
-				$('#changeGroup :checked').each(function(){
-					if ('' == groupName){
+				$('#changeGroup :checked').each(function() {
+					if ('' == groupName) {
 						groupName += $(this).attr('value');
-					}
-					else{
+					} else {
 						groupName += ',' + $(this).attr('value');
 					}
 				});
 				
-				if (undefined == conditionName){
-					$('#changeStatus').append('Please select conditon.');
+				if (undefined == conditionName) {
+					$('#changeStatus').append('Please select conditon');
 					return;
 				}
 				
-				if ('' == groupName){
-					$('#changeStatus').append('Please select group.');
+				if ('' == groupName) {
+					$('#changeStatus').append('Please select group');
 					return;
 				}
 				
@@ -893,15 +875,17 @@ function chCondScopeDia(){
 					
 					success : function(data){
 						$('#changeStatus img').remove();
-						if (-1 != data.rsp[0].indexOf('Error')){
+						if (-1 != data.rsp[0].indexOf('Error')) {
 							$('#changeStatus').append(data.rsp[0]);
-						}
-						else{
+						} else {
 							$('#rmcEventStatus div').empty().append(data.rsp[0]);
 							$('#chScopeDiaDiv').remove();
 						}
 					}
 				});
+			},
+			'Cancel' : function() {
+				$(this).dialog('close');
 			}
 		}
 	});
@@ -910,26 +894,23 @@ function chCondScopeDia(){
 /**
  * show the make response dialogue
  * 
- * @param 
-
- * @return
- * 
+ * @return nothing
  */
-function mkResponseDia(){
+function mkResponseDia() {
 	var diaDiv = $('<div title="Make Response"><div>');
 	diaDiv.append('under construction.');
 	
 	diaDiv.dialog({
 		 modal: true,
          width: 400,
-         close: function(event, ui){
+         close: function(event, ui) {
 					$(this).remove();
 				},
 		buttons: {
-			cancel : function(){
+			'Ok' : function() {
 				$(this).dialog('close');
 			},
-			ok : function(){
+			'Cancel' : function() {
 				$(this).dialog('close');
 			}
 		}
@@ -941,16 +922,13 @@ function mkResponseDia(){
 /**
  * start the condition and response associations
  * 
- * @param 
-
- * @return
- * 
+ * @return nothing
  */
-function startStopCondRespDia(){
+function startStopCondRespDia() {
 	var diaDiv = $('<div title="Start/Stop Association" id="divStartStopAss" class="tab"><div>');
 	diaDiv.append('Getting conditions').append(createLoader());
 	
-	if ('' == globalCondition){
+	if (!globalCondition) {
 		$.ajax({
 			url : 'lib/cmd.php',
 			dataType : 'json',
@@ -961,19 +939,17 @@ function startStopCondRespDia(){
 				msg : ''
 			},
 			
-			success : function(data){
+			success : function(data) {
 				if (data.rsp[0]){
 					globalcondition = data.rsp[0];
 					$('#divStartStopAss').empty().append(createAssociationTable(globalCondition));
 					$('#divStartStopAss').dialog("option", "position", 'center');
-				}
-				else{
-					$('#divStartStopAss').empty().append('There is not condition.');
+				} else {
+					$('#divStartStopAss').empty().append('There are no conditions');
 				}
 			}
 		});
-	}
-	else{
+	} else {
 		diaDiv.empty().append(createAssociationTable(globalCondition));
 	}
 	
@@ -986,19 +962,18 @@ function startStopCondRespDia(){
 					$(this).remove();
 				},
 		buttons: {
-			close : function(){
+			'Close' : function(){
 				$(this).dialog('close');
 			}
 		}
 	});
 	
-	$('#divStartStopAss button').bind('click', function(){
+	$('#divStartStopAss button').bind('click', function() {
 		var operationType = '';
 		var conditionName = $(this).attr('name');
-		if ('Start' == $(this).html()){
+		if ('Start' == $(this).html()) {
 			operationType = 'start';
-		}
-		else{
+		} else {
 			operationType = 'stop';
 		}
 		
@@ -1019,13 +994,12 @@ function startStopCondRespDia(){
 				var newOperationType = '';
 				var associationStatus = '';
 				var backgroudColor = '';
-				if ('start' == data.msg.substr(0, 5)){
+				if ('start' == data.msg.substr(0, 5)) {
 					newOperationType = 'Stop';
 					conditionName = data.msg.substr(6);
 					associationStatus = 'Monitored';
 					backgroudColor = '#ffffff';
-				}
-				else{
+				} else {
 					newOperationType = 'Start';
 					conditionName = data.msg.substr(5);
 					associationStatus = 'Not Monitored';
@@ -1033,7 +1007,7 @@ function startStopCondRespDia(){
 				}
 								
 				var button = $('#divStartStopAss button[name="' + conditionName + '"]');
-				if (data.rsp[0]){
+				if (data.rsp[0]) {
 					$('#rmcEventStatus div').empty().append('Getting associations\' status').append(createLoader());
 					$('#rmcEventButtons').hide();
 					button.html(newOperationType);
@@ -1041,8 +1015,7 @@ function startStopCondRespDia(){
 					button.parent().parent().css('background-color', backgroudColor);
 					globalCondition = '';
 					getConditions();
-				}
-				else{
+				} else {
 					button.html('Error');
 				}
 				
@@ -1055,10 +1028,7 @@ function startStopCondRespDia(){
 /**
  * stop the condition and response associations
  * 
- * @param 
-
- * @return
- * 
+ * @return nothing
  */
 function stopCondRespDia(){
 	var diaDiv = $('<div title="Stop Association" id="stopAss"><div>');
@@ -1074,12 +1044,11 @@ function stopCondRespDia(){
 			msg : ''
 		},
 		
-		success : function(data){
-			if (data.rsp[0]){
+		success : function(data) {
+			if (data.rsp[0]) {
 				$('#stopAss').empty().append(createConditionTable(data.rsp[0]));
 				$('#stopAss').dialog("option", "position", 'center');
-			}
-			else{
+			} else {
 				$('#stopAss').empty().append('There is not monitored condition.');
 			}
 		}
@@ -1088,16 +1057,13 @@ function stopCondRespDia(){
 	diaDiv.dialog({
 		 modal: true,
          width: 570,
-         close: function(event, ui){
+         close: function(event, ui) {
 					$(this).remove();
 				},
 		buttons: {
-			cancel : function(){
-				$(this).dialog('close');
-			},
-			stop : function(){
+			'Stop' : function() {
 				var conditionName = $('#stopAss :checked').attr('value');
-				if (!conditionName){
+				if (!conditionName) {
 					alert('Select condition name please.');
 					return;
 				}
@@ -1112,11 +1078,14 @@ function stopCondRespDia(){
 						msg : ''
 					},
 					
-					success : function(data){
+					success : function(data) {
 						$('#rmcEventStatus div').empty().append(data.rsp[0]);
 					}
 				});
 				$(this).dialog('close');
+			},
+			'Cancel' : function() {
+				$(this).dialog('close');
 			}
 		}
 	});
@@ -1124,17 +1093,16 @@ function stopCondRespDia(){
 
 /**
  * create the condition table for dialogue
- * 
- * @param 
-
- * @return
- * 
+ *
+ * @param cond
+ * 			condition
+ * @return nothing
  */
 function createConditionTd(cond){
 	var conditions = cond.split(';');
 	var name = '';
 	var showStr = '';
-	for (var i in conditions){
+	for (var i in conditions) {
 		name = conditions[i];
 		//because there is status and quotation marks in name, so we must delete the status and quotation marks
 		name = name.substr(1, name.length - 6);
@@ -1148,10 +1116,9 @@ function createConditionTd(cond){
  * create the association table for dialogue, which show the status 
  * and start/stop associations
  * 
- * @param 
-
- * @return
- * 
+ * @param cond
+ * 			Condition
+ * @return nothing 
  */
 function createAssociationTable(cond){
 	var conditions = cond.split(';');
@@ -1161,17 +1128,16 @@ function createAssociationTable(cond){
 	var showStr = '<center><table><thead><tr><th>Condition Name</th><th>Status</th><th>Start/Stop</th></tr></thead>';
 	showStr += '<tbody>';
 	
-	for (var i in conditions){
+	for (var i in conditions) {
 		name = conditions[i];
 		tempLength = name.length;
 		tempStatus = name.substr(tempLength - 3);
 		name = name.substr(1, tempLength - 6);
 		
-		if ('Not' == tempStatus){
+		if ('Not' == tempStatus) {
 			showStr += '<tr style="background-color:#fffacd;"><td>' + name + '</td><td>Not Monitored</td>';
 			showStr += '<td><button id="button" name="' + name + '">Start</button></td>';
-		}
-		else{
+		} else {
 			showStr += '<tr><td>' + name + '</td><td>Monitored</td>';
 			showStr += '<td><button id="button" name="' + name + '">Stop</button></td>';
 		}
diff --git a/xCAT-UI/js/monitor/xcatmon.js b/xCAT-UI/js/monitor/xcatmon.js
index 1d2ea7a87..aa57a18e9 100644
--- a/xCAT-UI/js/monitor/xcatmon.js
+++ b/xCAT-UI/js/monitor/xcatmon.js
@@ -2,21 +2,6 @@
  * global variable
  */
 var XcatmonTableId="XcatMonsettingTable";
-var dataTables=new Object();
-
-/**
- * set datatable
- */
-function setDatatable(id,obj){
-	dataTables[id]=obj;
-}
-
-/**
- * get datatable from the given id
- */
-function getDatatable(id){
-	return dataTables[id];
-}
 
 /**
  * load xCAT monitor
@@ -26,6 +11,7 @@ function loadXcatMon(){
 	var xcatMonTab = $('#xcatmon');
 	
 	xcatMonTab.append("<div id= xcatmonTable></div>");
+	
 	//show the content of the table monsetting
 	$.ajax({
 		url:'lib/cmd.php',
@@ -42,13 +28,13 @@ function loadXcatMon(){
 
 function loadXcatMonSetting(data){	
 	var apps; //contain the xcatmon apps config
-	var rsp=data.rsp;	
-	var apps_flag=0; //is the apps is stored?
+	var rsp = data.rsp;	
+	var apps_flag = 0; //is the apps is stored?
 	var ping; //contain the xcatmon ping-interval setting
-	var ping_flag=0;
+	var ping_flag = 0;
 
 	//create a infoBar	
-	var infoBar=createInfoBar('Click on a cell to edit. Click outside the table to write to the cell.<br>Once you are finished configuring the xCAT monitor, click on Apply.');
+	var infoBar=createInfoBar('Click on a cell to edit. Click outside the table to write to the cell. Once you are finished configuring the xCAT monitor, click on Apply.');
 	$('#xcatmonTable').append(infoBar);
 	
 	//create xcatmonTable
@@ -74,55 +60,57 @@ function loadXcatMonSetting(data){
 
 	//create contariner for new contents use for update the monsetting table
 	var newCont =new Object();
-	newCont[0]=rsp[0].split(","); //table header	
+	newCont[0]=rsp[0].split(","); //table header
+	
 	//create container for other monsetting lines not xcatmon
 	var otherCont =new Array();
 
 	$('#xcatmonTable').append(XcatmonTable.object()); //add table object
-	var m=1; //the count for origCont
-	var n=0;
-	for (var i=1;i<rsp.length;i++){ //get the apps and the ping-interval configure
-		var pos=rsp[i].indexOf("xcatmon"); //only check the xcatmon setting
-		if (pos ==1){
+	var m = 1; //the count for origCont
+	var n = 0;
+	for (var i=1; i<rsp.length; i++) { //get the apps and the ping-interval configure
+		var pos = rsp[i].indexOf("xcatmon"); //only check the xcatmon setting
+		if (pos == 1) {
 			//get the useful info and add it to the page.
-			if ((rsp[i].indexOf("apps")== -1 )&&(rsp[i].indexOf("ping")== -1)){
+			if ((rsp[i].indexOf("apps")== -1 ) && (rsp[i].indexOf("ping")== -1)) {
 				var cols=rsp[i].split(',');
 
 				//pair the semicolon of the content
-				for (var j=0;j<cols.length;j++){
-					if (cols[j].count('"')%2==1){
-						while (cols[j].count('"')%2==1){
-						cols[j]=cols[j]+","+cols[j+1];
-						cols.splice(j+1,1);
+				for (var j=0; j<cols.length; j++) {
+					if (cols[j].count('"')%2 == 1) {
+						while (cols[j].count('"')%2 == 1) {
+							cols[j]=cols[j]+","+cols[j+1];
+							cols.splice(j+1,1);
 						}
 					}
-					cols[j]=cols[j].replace(new RegExp('"','g'),'');	
+					cols[j] = cols[j].replace(new RegExp('"','g'),'');	
 				}
+				
 				//remove the commend disable
 				cols.splice(3,2);
 				//remove the xcatmon
 				cols.splice(0,1);
 				
-				cols.push('<input type="checkbox" name="'+cols[0]+'" title="Click this checkbox will add/remove the app from the configure apps value." />');
+				cols.push('<input type="checkbox" name="' + cols[0] + '" title="Checking this checkbox will add/remove the app from the configure apps value" />');
 				cols.unshift('<span class="ui-icon ui-icon-close" onclick="deleteRow1(this)"></span>');
 				
 				//add the column tho the table
 				XcatmonTable.add(cols);
 				
-				origCont[m++]=cols;
-			} else{
-				if (!apps_flag){ //check the apps setting
-					if (rsp[i].indexOf("apps") > -1){ //check for  is  apps or not
+				origCont[m++] = cols;
+			} else {
+				if (!apps_flag) { //check the apps setting
+					if (rsp[i].indexOf("apps") > -1) { //check for  is  apps or not
 						apps=rsp[i].split(',');
 					
-						for (var j=0;j<apps.length;j++){ //pair the semicolon
-							if (apps[j].count('"')%2==1){
-								while (apps[j].count('"')%2==1){
-									apps[j]=apps[j]+","+apps[j+1];
+						for (var j=0; j<apps.length; j++) { //pair the semicolon
+							if (apps[j].count('"')%2 == 1) {
+								while (apps[j].count('"')%2 == 1){
+									apps[j] = apps[j]+","+apps[j+1];
 									apps.splice(j+1,1);
 								}
 							}
-							apps[j]=apps[j].replace(new RegExp('"','g'),'');
+							apps[j] = apps[j].replace(new RegExp('"','g'),'');
 						}
 					
 						apps_flag=1; //set the flag to 1 to avoid this subroute
@@ -130,72 +118,72 @@ function loadXcatMonSetting(data){
 				}
 				
 				//get into the ping setting subroute
-				if (!ping_flag){
+				if (!ping_flag) {
 					//check the ping-interval config
-					if (rsp[i].indexOf("ping-interval")> -1){
+					if (rsp[i].indexOf("ping-interval") > -1) {
 						ping=rsp[i].split(',');
 						//pair the semicolon
-						for (var j=0;j<ping.length;j++){
-							if (ping[j].count('"')%2 == 1){
-								while (ping[j].count('"')%2 == 1){
-									ping[j]=ping[j]+","+ping[j+1];
+						for (var j=0; j<ping.length; j++) {
+							if (ping[j].count('"')%2 == 1) {
+								while (ping[j].count('"')%2 == 1) {
+									ping[j] = ping[j]+"," + ping[j+1];
 									ping.splice(j+1,1);
 								}
 							}
-							ping[j]=ping[j].replace((new RegExp('"','g')),'');
+							ping[j] = ping[j].replace((new RegExp('"','g')),'');
 						}
-						ping_flag=1;
+						ping_flag = 1;
 					}
 				}
 			}			
-		} else if(pos !=1 ){
+		} else if (pos != 1) {
 			//the other monitor in the monsetting table
-			var otherCols=rsp[i].split(',');
-			for (var k=0;k<otherCols.length;k++){
-				if (otherCols[k].count('"')%2==1){
-					while (otherCols[k].count('"')%2==1){
-						otherCols[k]=otherCols[k]+","+otherCols[k+1];
+			var otherCols = rsp[i].split(',');
+			for (var k=0; k<otherCols.length; k++) {
+				if (otherCols[k].count('"')%2 == 1) {
+					while (otherCols[k].count('"')%2 == 1) {
+						otherCols[k] = otherCols[k]+","+otherCols[k+1];
 						otherCols.splice(k+1,1);
 					}
 				}
-				otherCols[k]=otherCols[k].replace(new RegExp('"','g'),'');
+				otherCols[k] = otherCols[k].replace(new RegExp('"','g'),'');
 			}
 			//add the rows to the otherCont.
-			otherCont[n++]=otherCols;
+			otherCont[n++] = otherCols;
 
 		}
 	}
 	//if the apps is not in the monsetting table.Then create the default apps row.
 	//when saving the changes,add the row to the table.
-	if(!apps_flag){
-		apps=rsp[0].split(',');
-		apps[0]="xcatmon";
-		apps[1]="apps";
-		apps[2]="";
-		apps[3]="";
-		apps[4]="";
+	if(!apps_flag) {
+		apps = rsp[0].split(',');
+		apps[0] = "xcatmon";
+		apps[1] = "apps";
+		apps[2] = "";
+		apps[3] = "";
+		apps[4] = "";
 	}
 
 	//if the ping-interval is not in the monsetting table.Then create the default ping-interval row.
 	//when saving the changes,add the row to the table.
-	if(!ping_flag){
-		ping=rsp[0].split(',');
-		ping[0]="xcatmon";
-		ping[1]="ping-interval";
+	if(!ping_flag) {
+		ping = rsp[0].split(',');
+		ping[0] = "xcatmon";
+		ping[1] = "ping-interval";
 		//the default ping-interval setting is 5
-		ping[2]="5";
-		ping[3]="";
-		ping[4]="";
+		ping[2] = "5";
+		ping[3] = "";
+		ping[4] = "";
 	}
 
 	//set the checkbox to be true according to the apps
-	var checked=apps[2].split(',');
-	for (var i=0;i<checked.length;i++){
+	var checked = apps[2].split(',');
+	for (var i=0; i<checked.length; i++) {
 		//set the selcet checkbox to  true
 		$("input:checkbox[name="+checked[i]+"]").attr('checked',true);
-		for (var j =0;j<origCont.length;j++){
+		for (var j=0; j<origCont.length; j++) {
 			//set the origCont's checkbox to true
-			if (origCont[j][1]==checked[i]){
+			if (origCont[j][1] == checked[i]) {
 				origCont[j].splice(3,1);
 				origCont[j].push('<input type="checkbox" name="'+origCont[j][1]+'" title="Click this checkbox will add/remove the app from the configure apps value." checked=true/>');
 			}
@@ -203,21 +191,12 @@ function loadXcatMonSetting(data){
 
 	}
 	$(":checkbox").tooltip();
-/*
-	$(':checkbox').hover(
-		function(){
-			$(this).append($("<span>***</span>"));
-		},
-		function(){
-			$(this).find("span:last").remove();
-		}
-	);
-*/
+
 	//make the table editable
-	$('#'+XcatmonTableId+' td:not(td:nth-child(1),td:last-child)').editable(
-		function (value,settings){
-			var colPos=this.cellIndex;
-			var rowPos=dTable.fnGetPosition(this.parentNode);
+	$('#'+ XcatmonTableId + ' td:not(td:nth-child(1),td:last-child)').editable(
+		function (value,settings) {
+			var colPos = this.cellIndex;
+			var rowPos = dTable.fnGetPosition(this.parentNode);
 			dTable.fnUpdate(value,rowPos,colPos);
 			return (value);
 		},{
@@ -229,29 +208,17 @@ function loadXcatMonSetting(data){
 	);
 	
 	//save the datatable 
-	dTable=$('#'+XcatmonTableId).dataTable();
-	//set the datatable to the global variables datatables
-	setDatatable(XcatmonTableId,dTable);
+	dTable = $('#' + XcatmonTableId).dataTable({
+		'iDisplayLength': 50,
+		'bLengthChange': false,
+		"sScrollX": "100%",
+		"bAutoWidth": true
+	});
 
-	//create button bar
-	var addBar = $('<div align="center"></div>');
-	$('#xcatmon').append(addBar);
-	//create the button add row
-	var addRowBtn=createButton('Add row');
-	//add the button to the page
-	addBar.append(addRowBtn);
-	//create the button apply
-	var ApplyBtn=createButton('Apply');
-	//add the apply button to the page
-	addBar.append(ApplyBtn);
-	//create the button Cancel
-	var CancelBtn=createButton('Cancel');
-	//add the cancel to the page
-	addBar.append(CancelBtn);
-	
-	//button click function
-	//create a empty row
-	addRowBtn.bind('click', function(event){
+	//create action bar
+	var actionBar = $('<div class="actionBar"></div>');
+	var addRowLnk = $('<a>Add row</a>');
+	addRowLnk.bind('click', function(event) {
 		//create the container of the new row
 		var row = new Array();
 	
@@ -259,23 +226,23 @@ function loadXcatMonSetting(data){
 		row.push('<span class="ui-icon ui-icon-close" onclick="deleteRow1(this)"></span>');
 		//add the xcatmon
 		//add the contain of the setting
-		for (var i =0;i<header.length-2;i++){
+		for (var i=0; i<header.length-2; i++) {
 			row.push('');
 		}
 		
 		//add the checkbox
-		row.push('<input type="checkbox" name="'+row[2]+'" title="Click this checkbox will add/remove the app from the configure apps value."/>');
+		row.push('<input type="checkbox" name="'+row[2]+'" title="Checking this checkbox will add/remove the app from the configure apps value"/>');
 		//get the datatable of the table
-		var dTable=getDatatable(XcatmonTableId);
+		var dTable = $('#' + XcatmonTableId).dataTable();
 		//add  the new row to the datatable
 		dTable.fnAddData(row);
 	
 		//make the datatable editable
 		$(":checkbox[title]").tooltip();
-		$('#'+XcatmonTableId+' td:not(td:nth-child(1),td:last-child)').editable(
-			function(value,settings){
-				var colPos=this.cellIndex;
-				var rowPos=dTable.fnGetPosition(this.parentNode);
+		$('#' + XcatmonTableId+' td:not(td:nth-child(1),td:last-child)').editable(
+			function(value,settings) {
+				var colPos = this.cellIndex;
+				var rowPos = dTable.fnGetPosition(this.parentNode);
 				dTable.fnUpdate(value,rowPos,colPos);
 				return (value);
 			},{
@@ -286,105 +253,101 @@ function loadXcatMonSetting(data){
 			}
 		);
 	});
-
+	
 	/**
 	 * apply button
 	 * 
 	 * the Apply button is used to store the contain of the table in the page to
 	 * the monsetting table on the MN.
 	 */
-	ApplyBtn.bind('click', function(event){
+	var applyLnk = $('<a>Apply</a>');
+	applyLnk.bind('click', function(event){ 
 		//get the datatable of the page
-		var dTable=getDatatable(XcatmonTableId);
+		var dTable = $('#' + XcatmonTableId).dataTable();
 		//get the rows of the datatable
-		var dRows=dTable.fnGetNodes();	
-		var count=0;
+		var dRows = dTable.fnGetNodes();	
+		var count = 0;
 		//create the new container of the apps' value.
-		var appValue="";
-		var tableName="monsetting";
+		var appValue = '';
+		var tableName = 'monsetting';
 		var tmp;
 		var tmp1;
-		var closeBtn=createButton("close");
+		var closeBtn = createButton('close');
+		
 		//get the contain of the rows 
-		for (var i =0; i< dRows.length;i++){
-			if (dRows[i]){
+		for (var i=0; i<dRows.length; i++) {
+			if (dRows[i]) {
 				//get the columns fo the row
-				var cols=dRows[i].childNodes;
+				var cols = dRows[i].childNodes;
 				//create the container of the new column 
 				var vals = new Array();
 
-				for (var j=1;j<cols.length-1;j++){
+				for (var j=1; j<cols.length-1; j++) {
 					//get the value of every column(except the first and the last.why ? .ni dong de)
 					var val=cols.item(j).firstChild.nodeValue;
 
-					if (val == ' ' ){
-						vals[j-1]='';	
-					} else{
-						vals[j-1]=val;
+					if (val == ' ') {
+						vals[j-1] = '';	
+					} else {
+						vals[j-1] = val;
 					}
 				}
 				
 				//prepare another space for the array/
-				var vals_orig=new Array();
+				var vals_orig = new Array();
 				//copy the data from vals to vals_orig
-				for (var p=0 ;p<2;p++){
-					var val=vals[p];
-					vals_orig[p]=val;	
+				for (var p=0; p<2; p++) {
+					var val = vals[p];
+					vals_orig[p] = val;	
 				}
 
-				vals.push("");
-				vals.push("");
-				vals.unshift("xcatmon");
+				vals.push('');
+				vals.push('');
+				vals.unshift('xcatmon');
 				//stored the new column to the newCont
-				newCont[i+1]=vals;
+				newCont[i+1] = vals;
 
 				//check the checkbox of the row and add different checkbox to the orignCont
 				//for the cancle button
-				if (cols.item(cols.length-1).firstChild.checked){
-					vals_orig.push('<input type="checkbox" name="'+vals_orig[0]+'" title="Click this checkbox will add/remove the app from the configure apps value." checked=true/>');
-				} else{
-					vals_orig.push('<input type="checkbox" name="'+vals_orig[0]+'" title="Click this checkbox will add/remove the app from the configure apps value."/>');
+				if (cols.item(cols.length-1).firstChild.checked) {
+					vals_orig.push('<input type="checkbox" name="' + vals_orig[0] + '" title="Click this checkbox will add/remove the app from the configure apps value." checked=true/>');
+				} else {
+					vals_orig.push('<input type="checkbox" name="' + vals_orig[0] + '" title="Click this checkbox will add/remove the app from the configure apps value."/>');
 				}
 				
 				//push the delete button to the row
 				vals_orig.unshift('<span class="ui-icon ui-icon-close" onclick="deleteRow1(this)"></span>');
 				//add the row to the orignCont
-
-				origCont[i+1]=vals_orig;
-				//tmp1=origCont;
-				//tmp=newCont;
-				count=i+1;
+				origCont[i+1] = vals_orig;
+				count = i+1;
 				
 				//check the checkbox fo everyrow for merging the appName to  the apps values
-				if (cols.item(cols.length-1).firstChild.checked){
+				if (cols.item(cols.length-1).firstChild.checked) {
 					//the new value for the apps.get the name fo every app.
-					appValue=appValue.concat(cols.item(2).firstChild.nodeValue+",");
+					appValue = appValue.concat(cols.item(2).firstChild.nodeValue+",");
 				}
 			}
 		}
 		
 		count++;
 		//delete the last "," of the apps value
-		appValue=appValue.substring(0,(appValue.length-1));
-		apps[2]=appValue;
+		appValue = appValue.substring(0,(appValue.length-1));
+		apps[2] = appValue;
 		
 		//newCont add the apps row
-		newCont[count++]=apps;
+		newCont[count++] = apps;
 		//newCont add the ping-interval row
-		newCont[count++]=ping;
-		//tmp=otherCont;
+		newCont[count++] = ping;
+
 		//add the other monitor setting of the mosetting
-		for(var j=0;j<otherCont.length;j++){
-			newCont[count++]=otherCont[j];
+		for (var j=0; j<otherCont.length; j++) {
+			newCont[count++] = otherCont[j];
 		}
-		//tmp=otherCont.length;
-		//tmp1=newCont;	
-		setDatatable(XcatmonTableId,dTable);
 		
 		//create the save dialog
-		var dialogSave=$('<div id="saveDialog" align="center">saving the configuration </div>');
+		var dialogSave = $('<div id="saveDialog" align="center">saving the configuration </div>');
 		dialogSave.append(createLoader());
-		addBar.append(dialogSave);
+		$('#xcatmon').append(dialogSave);
 		//open the dialog..modal is true
 		$("#saveDialog").dialog({modal: true});
 		//hide the cross...
@@ -415,32 +378,30 @@ function loadXcatMonSetting(data){
 		});
 
 		//clear the newCont
-		newCont=null;
-		newCont=new Object();
+		newCont = null;
+		newCont = new Object();
 		//just for tmp=newCont;
-		newCont[0]=rsp[0].split(",");
+		newCont[0] = rsp[0].split(",");
 	});
-
-	/**
-	 * undo button
-	 */
-	CancelBtn.bind('click', function(event){
+	
+	var cancelLnk = $('<a>Cancel</a>');
+	cancelLnk.bind('click', function(event){
 		//get the datatable of the page
-		var dTable=getDatatable(XcatmonTableId);
+		var dTable = $('#' + XcatmonTableId).dataTable();
 		
 		//clear the datatable
 		dTable.fnClearTable();
 
 		//add the contain of the origCont to the datatable
-		for (var i=1;i<origCont.length;i++){
+		for (var i=1; i<origCont.length; i++){
 			dTable.fnAddData(origCont[i],true);
 		}	
 
 		$(":checkbox[title]").tooltip();
 		$('#'+XcatmonTableId+' td:not(td:nth-child(1),td:last-child)').editable(
 		function (value,settings){
-			var colPos=this.cellIndex;
-			var rowPos=dTable.fnGetPosition(this.parentNode);
+			var colPos = this.cellIndex;
+			var rowPos = dTable.fnGetPosition(this.parentNode);
 			dTable.fnUpdate(value,rowPos,colPos);
 			return (value);
 		},{
@@ -450,18 +411,33 @@ function loadXcatMonSetting(data){
 			height : '30px'
 		});	
 	});
+	
+	//actions
+	var actionsLnk = '<a>Actions</a>';
+	var actsMenu = createMenu([addRowLnk, applyLnk, cancelLnk]);
+
+	//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="' + XcatmonTableId + '_menuDiv" class="menuDiv"></div>');
+	$('#' + XcatmonTableId + '_wrapper').prepend(menuDiv);
+	menuDiv.append(actionBar);	
+	$('#' + XcatmonTableId + '_filter').appendTo(menuDiv);
 }
 
 /**
  * delete a row from the table
  */
 function deleteRow1(obj){
-	//var tableid=$(obj).parent().parent().parent().parent().attr('id');
-	var dTable=getDatatable(XcatmonTableId);
-	var rows=dTable.fnGetNodes();
-	var tgtRow=$(obj).parent().parent().get(0);
-	for (var i in rows){
-		if (rows[i] == tgtRow){
+	var dTable = $('#' + XcatmonTableId).dataTable();
+	var rows = dTable.fnGetNodes();
+	var tgtRow = $(obj).parent().parent().get(0);
+	for (var i in rows) {
+		if (rows[i] == tgtRow) {
 			dTable.fnDeleteRow(i, null,true);
 			break;
 		}