From 571925060034c2f965ef46344a4cc0cb37610c8c Mon Sep 17 00:00:00 2001
From: xq2005 <xq2005@8638fb3e-16cb-4fca-ae20-7b5d299a9bcd>
Date: Wed, 1 Jun 2011 03:00:03 +0000
Subject: [PATCH] transfer rmc monitor tab from jquery.flot.min.js to
 jquery.jqplot.min.js

git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@9724 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
---
 xCAT-UI/css/style.css        |  54 ++-
 xCAT-UI/js/monitor/rmcmon.js | 820 +++++++++++++++--------------------
 xCAT-UI/js/ui.js             |   1 +
 3 files changed, 383 insertions(+), 492 deletions(-)

diff --git a/xCAT-UI/css/style.css b/xCAT-UI/css/style.css
index 0ea1605e3..8a94dfa7f 100644
--- a/xCAT-UI/css/style.css
+++ b/xCAT-UI/css/style.css
@@ -608,6 +608,47 @@ table a:hover {
 }
 
 /*--------------- Provision and monitor forms ---------------*/
+.rmcnormal {
+	border: 2px outset #7FFFD4;
+	background: #66CD00;
+	cursor: pointer;
+}
+
+.rmcwarning {
+   	background: #FFD700;
+  	border: 2px outset #EEEE00;
+	cursor: pointer;
+}
+
+.rmcerror {
+	background:  #FF3030;
+	border: 2px outset #FF4040;
+}
+
+.rmcunknown {
+    background:  #8B8B7A;
+    border: 2px outset #858585;
+}
+
+.rmcnodeli {
+	width: 16px;
+	height: 16px;
+	float: left;
+}
+
+.rmcsumdiv {
+	width: 300px;
+	height: 150px;
+	float: left;
+	margin: 0px 0px 10px 0px;
+}
+
+.rmcnodediv {
+	width: 240px;
+	height: 120px;
+	margin: 0px 0px 15px 0px;
+}
+
 .provision div,.monitor div {
 	margin: 10px 0;
 	display: block;
@@ -622,19 +663,6 @@ table a:hover {
 	height: 150px;
 }
 
-.monitorsumdiv {
-	width: 300px;
-	height: 150px;
-	float: left;
-	margin: 0px 0px 10px 0px;
-}
-
-.monitornodediv {
-	width: 240px;
-	height: 120px;
-	margin: 0px 0px 15px 0px;
-}
-
 /*--------------- Physical layout section ---------------*/
 .frameDiv {
 	width: 179px;
diff --git a/xCAT-UI/js/monitor/rmcmon.js b/xCAT-UI/js/monitor/rmcmon.js
index 1e721b28c..5ca1fb661 100644
--- a/xCAT-UI/js/monitor/rmcmon.js
+++ b/xCAT-UI/js/monitor/rmcmon.js
@@ -1,63 +1,61 @@
-var globalErrNodes;
-var globalNodesDetail;
+var globalNodesDetail= new Object();
 var globalAllNodesNum = 0;
 var globalFinishNodesNum = 0;
-var globalSelectedAttributes = '';
 var globalTimeStamp;
 var globalCondition = '';
 var globalResponse = new Object();
 
-function loadRmcMon(){
-	//find the rmcmon tab
-	var rmcMonTab = $('#rmcmon');
-	
-	//add the stauts bar first. id = 'rmcMonStatus'
-	var rmcStatusBar = createStatusBar('rmcMonStatus');
-	rmcStatusBar.find('div').append(createLoader());
-	rmcMonTab.append(rmcStatusBar);
-	
-	//add the configure button.
-	var configButton = createButton('Configure');
-	configButton.hide();
-	configButton.click(function(){
-		if ($('#rmcMonConfig').is(':hidden')){
-			$('#rmcMonConfig').show();
-		}
-		else{
-			$('#rmcMonConfig').hide();
-		}
-	});
-	rmcMonTab.append(configButton);
-	
-	//add configure div
-	rmcMonTab.append("<div id='rmcMonConfig'></div>");
-	$('#rmcMonConfig').hide();
-	
-	//load the configure div's content
-	loadRmcMonConfigure();
-	
-	//add the content of the rmcmon, id = 'rmcMonTab'
-	rmcMonTab.append("<div id='rmcMonShow'><div id='rmcmonSummary'></div><div id='rmcmonDetail'></div><div id='nodeDetail'></div></div>");
-	$('#nodeDetail').hide();
-	
-	//check the software work status by platform(linux and aix)
-	$.ajax( {
-		url : 'lib/systemcmd.php',
-		dataType : 'json',
-		data : {
-			cmd : 'ostype'
-		},
+function loadRmcMon() {
+    // find the rmcmon tab
+    var rmcMonTab = $('#rmcmon');
 
-		success : rsctRpmCheck
-	});
+    // add the stauts bar first. id = 'rmcMonStatus'
+    var rmcStatusBar = createStatusBar('rmcMonStatus');
+    rmcStatusBar.find('div').append(createLoader());
+    rmcMonTab.append(rmcStatusBar);
+
+    // add the configure button.
+    var configButton = createButton('Configure');
+    configButton.hide();
+    configButton.click(function() {
+        if ($('#rmcMonConfig').is(':hidden')) {
+            $('#rmcMonConfig').show();
+        }
+        else {
+            $('#rmcMonConfig').hide();
+        }
+    });
+    rmcMonTab.append(configButton);
+
+    // add configure div
+    rmcMonTab.append("<div id='rmcMonConfig'></div>");
+    $('#rmcMonConfig').hide();
+
+    // load the configure div's content
+    loadRmcMonConfigure();
+
+    // add the content of the rmcmon, id = 'rmcMonTab'
+    rmcMonTab.append("<div id='rmcMonShow'><div id='rmcmonSummary'></div><div id='rmcmonDetail'></div><div id='nodeDetail'></div></div>");
+    $('#nodeDetail').hide();
+
+    // check the software work status by platform(linux and aix)
+    $.ajax( {
+        url : 'lib/systemcmd.php',
+        dataType : 'json',
+        data : {
+            cmd : 'ostype'
+        },
+
+        success : rsctRpmCheck
+    });
 }
 
 function loadRmcMonConfigure(){
-	//get the configure div and clean its content.
+	// get the configure div and clean its content.
 	var rmcmonCfgDiv = $('#rmcMonConfig');
 	rmcmonCfgDiv.empty();
 	
-	//add the start button
+	// add the start button
 	var startButton = createButton('Start');
 	rmcmonCfgDiv.append(startButton);
 	startButton.click(function(){
@@ -68,7 +66,7 @@ function loadRmcMonConfigure(){
 			data : {
 				cmd : 'webrun',
 				tgt : '',
-				args : 'rmcstart;lpar',
+				args : 'rmcstart;compute',
 				msg : ''
 			},
 
@@ -78,7 +76,7 @@ function loadRmcMonConfigure(){
 		});
 	});
 	
-	//add the stop button
+	// add the stop button
 	var stopButton = createButton('Stop');
 	rmcmonCfgDiv.append(stopButton);
 	stopButton.click(function(){
@@ -99,12 +97,6 @@ function loadRmcMonConfigure(){
 		});
 	});
 	
-	//add the attributes button
-	var attrButton = createButton('Attribute Select');
-	rmcmonCfgDiv.append(attrButton);
-	attrButton.bind('click',function(){
-		showConfigureDia();
-	});
 	//add the cancel button
 	var cancelButton = createButton('Cancel');
 	rmcmonCfgDiv.append(cancelButton);
@@ -114,7 +106,7 @@ function loadRmcMonConfigure(){
 }
 
 function rsctRpmCheck(data){
-	//linux had to check the rscp first
+	// linux had to check the rscp first
 	if ('aix' != data.rsp){
 		$.ajax( {
 			url : 'lib/systemcmd.php',
@@ -152,21 +144,21 @@ function xcatrmcRpmCheck(){
 			var softInstallStatus = data.rsp.split(/\n/);
 			var needHelp = false;
 			$('#rmcMonStatus div').empty();
-			//check the xcat-rmc
+			// check the xcat-rmc
 			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
+			// check the rrdtool
 			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
+			// add help info or load the rmc show
 			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>');
@@ -202,26 +194,25 @@ function rmcWorkingCheck(){
 	});
 }
 
+function removeStatusBar(){
+    if (globalAllNodesNum == globalFinishNodesNum){
+        $('#rmcMonStatus').remove();
+    }
+    
+    $('#rmcmonDetail [title]').tooltip({position:['center','right']});
+}
 function loadRmcMonShow(){
-	$('#rmcMonStatus div').empty().append("Getting monitoring Data (This step may take a long time).");
+	$('#rmcMonStatus div').empty().append("Getting Summary Data.");
 	$('#rmcMonStatus div').append(createLoader());
 	
-	//init the selected Attributes string
-	if ($.cookie('rmcmonattr')){
-		globalSelectedAttributes = $.cookie('rmcmonattr');
-	}
-	else{
-		globalSelectedAttributes = 'PctTotalTimeIdle,PctTotalTimeWait,PctTotalTimeUser,PctTotalTimeKernel,PctRealMemFree';
-	}
-	
-	//load the rmc status summary
+	// load the rmc status summary
 	$.ajax({
 		url : 'lib/cmd.php',
 		dataType : 'json',
 		data : {
 			cmd : 'webrun',
 			tgt : '',
-			args : 'rmcshow;summary;' + globalSelectedAttributes,
+			args : 'rmcshow;summary;PctTotalTimeIdle,PctRealMemFree',
 			msg : ''
 		},
 
@@ -231,413 +222,284 @@ function loadRmcMonShow(){
 	});
 }
 
-function showRmcSummary(returnData){
-	var attributes = returnData.split(';');
-	var attr;
-	var attrName;
-	var attrValues;
-	var attrDiv;
-	var summaryTable = $('<table><tbody></tbody></table>');
-	var summaryRow;
-	globalTimeStamp = new Array();
-	//load each nodes' status
-	$.ajax({
-		url : 'lib/cmd.php',
-		dataType : 'json',
-		data : {
-			cmd : 'webrun',
-			tgt : '',
-			args : 'rmcshow;lpar;' + globalSelectedAttributes,
-			msg : ''
-		},
-		
-		success : function(data){
-			parseRmcData(data.rsp);
-		}		
-	});
-	
-	//create the timestamp, the flot only use the UTC time, so had to change the value, to show the right time
-	var tempDate = new Date();	
-	var tempOffset = tempDate.getTimezoneOffset();
-	var tempTime = tempDate.getTime() - 3600000 - tempOffset * 60000;
-	
-	for (var i = 0; i < 60; i++){
-		globalTimeStamp.push(tempTime + i * 60000);
-	}
-	
-	//show the summary data
-	$('#rmcmonSummary').empty().append('<h3>Overview</h3><hr />');
-	$('#rmcmonSummary').append(summaryTable);
-	
-	for ( attr in attributes){
-		var tempTd = $('<td style="border:0px;padding:15px 5px;"></td>');
-		var tempArray = [];
-		var temp = attributes[attr].indexOf(':');
-		attrName = attributes[attr].substr(0, temp);
-		attrValues = attributes[attr].substr(temp + 1).split(',');
-		for (var i in attrValues){
-			tempArray.push([globalTimeStamp[i], attrValues[i]]);
-		}
+function showRmcSummary(returnData) {
+    var attributes = returnData.split(';');
+    var attr;
+    var attrName;
+    var attrValues;
+    var attrDiv;
+    var summaryTable = $('<table><tbody></tbody></table>');
+    var summaryRow;
+    globalTimeStamp = new Array();
 
-		if (0 == (attr % 3)){
-			summaryRow = $('<tr></tr>');
-			summaryTable.append(summaryRow);
-		}
-		summaryRow.append(tempTd);
-		attrDiv = $('<div class="monitorsumdiv"></div>');
-		tempTd.append(attrDiv);
-		$.plot(attrDiv, [tempArray], {xaxis: {mode:"time"}});
-		attrDiv.append('<center>' + attrName + '</center>');
-		
-	}	
+    //update the rmc status area
+    $('#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 : ''
+        },
+
+        success : function(data) {
+            parseRmcData(data.rsp);
+        }
+    });
+
+    // create the timestamp, the flot only use the UTC time, so had to change
+    // the value, to show the right time
+    var tempDate = new Date();
+    var tempOffset = tempDate.getTimezoneOffset();
+    var tempTime = tempDate.getTime() - 3600000;
+    for ( var i = 0; i < 60; i++) {
+        tempDate.setTime(tempTime + i * 60000);
+        globalTimeStamp.push(tempDate.getTime());
+    }
+
+    // show the summary data
+    $('#rmcmonSummary').empty().append('<h3>Overview</h3><hr />');
+    $('#rmcmonSummary').append(summaryTable);
+
+    for (attr in attributes) {
+        var tempTd = $('<td style="border:0px;padding:15px 5px;"></td>');
+        var tempArray = [];
+        var temp = attributes[attr].indexOf(':');
+        attrName = attributes[attr].substr(0, temp);
+        attrValues = attributes[attr].substr(temp + 1).split(',');
+
+        if (0 == (attr % 3)) {
+            summaryRow = $('<tr></tr>');
+            summaryTable.append(summaryRow);
+        }
+        summaryRow.append(tempTd);
+        attrDiv = $('<div id="monitorsumdiv' + attr + '" class="rmcsumdiv"></div>');
+        tempTd.append(attrDiv);
+        for ( var i in attrValues) {
+            tempArray.push( [ globalTimeStamp[i], Number(attrValues[i]) ]);
+        }
+
+        $.jqplot('monitorsumdiv' + attr, [ tempArray ], {
+            series : [ {
+                showMarker : false
+            } ],
+            axes : {
+                xaxis : {
+                    label : attrName,
+                    renderer : $.jqplot.DateAxisRenderer,
+                    numberTicks : 5,
+                    tickOptions : {
+                        formatString : '%R',
+                        show : true,
+                        fontSize : '10px'
+                    }
+                },
+                yaxis : {
+                    tickOptions : {
+                        formatString : '%.2f',
+                        fontSize : '10px'
+                    }
+                }
+            }
+        });
+    }
 }
 
 function parseRmcData(returnData){
-	var nodeName;
-	var nodeStatus;
-	var nodeChat;
-	
-	//clean all the history data, because all of the follow variables are global
-	globalAllNodesNum = returnData.length;
-	globalFinishNodesNum = 0;
-	globalErrNodes = {};
-	globalNodesDetail = {};
-	
-	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, '');
-		
-		//not active nodes
-		if ('OK' != nodeStatus){
-			globalErrNodes[nodeName] = nodeStatus;
-			globalFinishNodesNum ++;
-			if (globalFinishNodesNum == globalAllNodesNum){
-				showDetail();
-			}
-			continue;
-		}
-		
-		//ok
-		$.ajax({
-			url : 'lib/cmd.php',
-			dataType : 'json',
-			data : {
-				cmd : 'webrun',
-				tgt : '',
-				args : 'rmcshow;' + nodeName + ';' + globalSelectedAttributes,
-				msg : nodeName
-			},
-			
-			success : function(data){
-				var tempObject = {};
-				for (var i in data.rsp){
-					var temp = data.rsp[i].indexOf(':');
-					var attrName = data.rsp[i].substr(0, temp);
-					tempObject[attrName] = data.rsp[i].substr(temp + 1);
-				}
-				globalNodesDetail[data.msg] = tempObject;
-				globalFinishNodesNum++;
-				if (globalFinishNodesNum == globalAllNodesNum){
-					showDetail();
-				}
-			}		
-		});
-	}	
+    var nodeName;
+    var nodeStatus;
+    
+    $('#rmcmonDetail').empty().append('<h3>Detail</h3><hr/>');
+    
+    //add the table for show nodes
+    var detailUl = $('<ul style="margin:0px;padding:0px;"></ul>');
+    //update the table area
+    $('#rmcmonDetail ul').remove();
+    $('#rmcmonDetail').append(detailUl);
+    
+    globalAllNodesNum = returnData.length;
+    globalFinishNodesNum = 0;
+    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){
+            globalFinishNodesNum++;
+            detailUl.append(createUnkownNode(nodeName));
+            removeStatusBar();
+            continue;
+        }
+        $.ajax({
+            url : 'lib/cmd.php',
+            dataType : 'json',
+            data : {
+                cmd : 'webrun',
+                tgt : '',
+                args : 'rmcshow;' + nodeName + ';PctTotalTimeIdle,PctRealMemFree',
+                msg : nodeName
+            },
+            
+            success : function(data){
+                showRmcNodes(data.rsp, data.msg);
+            }
+        });
+    }
 }
 
-function showDetail(){
-	var nodeChat;
-	var select;
-	
-	var detailFilter = $('<div id="detailFilter"></div>');
-		
-	$('#rmcMonStatus div').empty().append("RMC Monitoring Show");
-	$('#rmcmonDetail').empty().append('<h3>Detail</h3><hr />');
-	$('#rmcmonDetail').append(detailFilter);
-	
-	select = $('<select id="metric"></select>');
-	for (var node in globalNodesDetail){
-		for (var attr in globalNodesDetail[node]){
-			select.append('<option value="' + attr + '">' + attr + '</option>');
-		}
-		break;
-	}
-	
-	detailFilter.append('<b>Metric:&nbsp;</b>');
-	detailFilter.append(select);
-	detailFilter.append('&nbsp;&nbsp;&nbsp;&nbsp;');
-	
-	//sort type
-	select = $('<select id="sortType"></select>');
-	select.append('<option value="1">ascend</option>');
-	select.append('<option value="2">descend</option>');
-	select.append('<option value="3">node name</option>');
-	
-	detailFilter.append('<b>Sort:&nbsp;</b>');
-	detailFilter.append(select);
-	detailFilter.append('&nbsp;&nbsp;&nbsp;&nbsp;');
-	
-	var filterButton = createButton('Filter');
-	detailFilter.append(filterButton);
-	filterButton.bind('click', function(){
-		var attr = $('#metric').val();
-		var type = $('#sortType').val();
-		showAllNodes(attr, type);
-	});
-	
-	filterButton.trigger('click');
+function createUnkownNode(nodeName){
+    var tempLi = '<li class="rmcunknown ui-corner-all rmcnodeli" id="' + nodeName + '" ' + 
+                 'title="Name:' + nodeName + '<br/>Unknown"></li>';
+    return tempLi;
 }
 
-function showAllNodes(attrName, type){
-	$('#rmcmonDetail table').remove();
-	var detailTable = $('<table><tbody></tbody></table>');
-	//remember how many nodes parsed, used for adding new table row
-	var parseNum = 0;
-	var detailRow;
-	var sortArray = new Array();
-
-	$('#rmcmonDetail').append(detailTable);
-	
-	for (var nodeName in globalErrNodes){
-		var tempTd = $('<td style="border:0px;padding:1px 1px;"></td>');
-		if (0 == (parseNum % 4)){
-			detailRow = $('<tr></tr>');
-			detailTable.append(detailRow);
-		}
-		detailRow.append(tempTd);
-		parseNum ++;
-		nodeChat = $('<div class="monitornodediv"></div>');
-		
-		if ('NA' == globalErrNodes[nodeName]){
-			nodeChat.css('background-color', '#f47a55');
-			nodeChat.append('<center><h4> Not Active</h4></center>');
-		}
-		else if ('NI' == globalErrNodes[nodeName]){
-			nodeChat.css('background-color', '#ffce7b');
-			nodeChat.append('<center><h4>' + nodeName + '\'s RSCT is not installed.</h4></center>');
-		}
-		else if ('NR' == globalErrNodes[nodeName]){
-			nodeChat.css('background-color', '#ffce7b');
-			nodeChat.append('<center><h4>' + nodeName + '\'s RSCT is not started.</h4></center>');
-		}
-		tempTd.append(nodeChat);
-		tempTd.append('<center>' + nodeName + '</center>');
-	}
-	
-	filterSort(attrName, type, sortArray);
-	for (var sortIndex in sortArray){
-		var tempTd = $('<td style="border:0px;padding:1px 1px;"></td>');
-		if (0 == (parseNum % 4)){
-			detailRow = $('<tr></tr>');
-			detailTable.append(detailRow);
-		}
-		detailRow.append(tempTd);
-		parseNum ++;
-		nodeChat = $('<div class="monitornodediv"></div>');
-		tempTd.append(nodeChat);
-		
-
-		var tempData = sortArray[sortIndex]['value'].split(',');
-		var tempArray = [];
-		for (var i in tempData){
-			tempArray.push([globalTimeStamp[i], tempData[i]]);				
-		}
-		$.plot(nodeChat, [tempArray], {xaxis: {mode:"time", tickSize: [20, "minute"]}});
-
-		tempTd.append('<center>' + sortArray[sortIndex]['name'] + '</center>');
-		tempTd.css('cursor', 'pointer');
-		tempTd.bind('click', function(){
-			showNode($('center', $(this)).html());
-		});		
-	}
+function createErrorNode(nodeName){
+    var tempLi = '<li class="rmcerror ui-corner-all rmcnodeli id="' + nodeName + '" ' +
+                 'title="Name:' + nodeName + '<br/>Error"></li>';
 }
 
-function showNode(nodeName){
-	var nodeTable = $('<table><tbody></tbody></table>');
-	var backButton = createButton('Go back to all nodes');
-	var nodeRow;
-	var parseNum = 0;
-	
-	$('#rmcmonDetail').hide();
-	$('#nodeDetail').empty().show();
-	$('#nodeDetail').append('<h3>' + nodeName +' Detail</h3><hr />');
-	$('#nodeDetail').append(backButton);
-	backButton.bind('click', function(){
-		$('#nodeDetail').hide();
-		$('#rmcmonDetail').show();
-	});
-
-	$('#nodeDetail').append(nodeTable);
-	
-	for(var attr in globalNodesDetail[nodeName]){
-		var tempTd = $('<td style="border:0px;padding:1px 1px;"></td>');
-		var attrChat = $('<div class="monitornodediv"></div>');
-		if (0 == parseNum % 4){
-			nodeRow = $('<tr></tr>');
-			nodeTable.append(nodeRow);
-		}
-		nodeRow.append(tempTd);
-		parseNum++;
-		
-		//data
-		tempTd.append(attrChat);
-		var tempData = globalNodesDetail[nodeName][attr].split(',');
-		var tempArray = [];
-		for (var i in tempData){
-			tempArray.push([globalTimeStamp[i], tempData[i]]);				
-		}
-		
-		$.plot(attrChat, [tempArray], {xaxis: {mode:"time", tickSize: [20, "minute"]}});
-		attrChat.append('<center>' + attr +'</center>');
-	}
+function showRmcNodes(data, nodename) {
+    var attrname = '';
+    var values = '';
+    var position = 0;
+    var index = 0;
+    var classname = '';
+    var tempObj = {};
+    
+    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){
+            $('#rmcmonDetail ul').append(createErrorNode(nodename));
+            if (globalNodesDetail[nodename]){
+                delete(globalNodesDetail[nodename]);
+            }
+            return;
+        }
+        
+        //normal node, save the values
+        tempObj[attrname] = values;
+    }
+    
+    globalNodesDetail[nodename] = tempObj;
+    
+    //get each average
+    var cpuAvg = 0;
+    var memAvg = 0;
+    var tempSum = 0;
+    var tempArray = globalNodesDetail[nodename]['PctTotalTimeIdle'].split(',');
+    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++){
+        tempSum += Number(tempArray[index]);
+    }
+    memAvg = parseInt(tempSum / index);
+    
+    if (cpuAvg >= 10 && memAvg <= 90){
+        classname = 'rmcnormal';
+    }
+    else{
+        classname = 'rmcwarning';
+    }
+    
+    var normalLi = $('<li class="' + classname + ' ui-corner-all rmcnodeli" id="' + nodename + '" title="' +
+         'Name:' + nodename + '<br/> CpuIdle: ' + cpuAvg + '%<br/> MemFree: ' + memAvg + '%"></li>');
+    
+    $('#rmcmonDetail ul').append(normalLi);
+    normalLi.bind('click', function() {
+        showNode($(this).attr('id'));
+    });
+    
+    //check if the process finished
+    globalFinishNodesNum++;
+    removeStatusBar();
 }
 
-function filterSort(attrName, sortType, retArray){
-	var tempObj = {};
-	
-	for (var node in globalNodesDetail){
-		tempObj['name'] = node; 
-		tempObj['value'] = globalNodesDetail[node][attrName];
-		retArray.push(tempObj);
-	}
-	
-	//by node name
-	if (3 == sortType){
-		retArray.sort(sortName);
-	}
-	//desend
-	else if (2 == sortType){
-		retArray.sort(sortDes);
-	}
-	//ascend
-	else{
-		retArray.sort(sortAsc);
-	}
-	
-	return;
-}
+function showNode(nodeName) {
+    var nodeTable = $('<table><tbody></tbody></table>');
+    var backButton = createButton('Go back to all nodes');
+    var nodeRow;
+    var parseNum = 0;
 
-function sortAsc(x, y){
-	if (x['value'] > y['value']){
-		return 1;
-	}
-	else{
-		return -1;
-	}
-}
+    $('#rmcmonDetail').hide();
+    $('#nodeDetail').empty().show();
+    $('#nodeDetail').append('<h3>' + nodeName + ' Detail</h3><hr />');
+    $('#nodeDetail').append(backButton);
+    backButton.bind('click', function() {
+        $('#nodeDetail').hide();
+        $('#rmcmonDetail').show();
+    });
 
-function sortDes(x, y){
-	if (x['value'] > y['value']){
-		return -1;
-	}
-	else{
-		return 1;
-	}
-}
+    $('#nodeDetail').append(nodeTable);
 
-function sortName(x, y){
-	if (x['name'] > y['name']){
-		return 1;
-	}
-	else{
-		return -1;
-	}
-}
+    for ( var attr in globalNodesDetail[nodeName]) {
+        var tempTd = $('<td style="border:0px;padding:1px 1px;"></td>');
+        var attrChat = $('<div id="monitornodediv' + nodeName + attr
+                + '" class="rmcnodediv"></div>');
+        if (0 == parseNum % 4) {
+            nodeRow = $('<tr></tr>');
+            nodeTable.append(nodeRow);
+        }
+        nodeRow.append(tempTd);
+        parseNum++;
 
-function showConfigureDia(){
-	var diaDiv = $('<div class="tab" title="Monitor Attributes Select"></div>');
-	var tempArray = globalSelectedAttributes.split(',');
-	var selectedAttrHash = new Object();
-	var wholeAttrArray = new Array('PctTotalTimeIdle','PctTotalTimeWait','PctTotalTimeUser','PctTotalTimeKernel','PctRealMemFree');
-	
-	//init the selectedAttrHash
-	for (var i in tempArray){
-		selectedAttrHash[tempArray[i]] = 1;
-	}
-	var attrTable = $('<table id="rmcAttrTable"></table>');
-	for (var i in wholeAttrArray){
-		var name = wholeAttrArray[i];
-		var tempString = '<tr>';
-		if (selectedAttrHash[name]){
-			tempString += '<td><input type="checkbox" name="' + name + '" checked="checked"></td>';
-		}
-		else{
-			tempString += '<td><input type="checkbox" name="' + name + '"></td>';
-		}
-		
-		tempString += '<td>' + name + '</td></tr>';
-		attrTable.append(tempString);		
-	}
-		
-	var selectAllButton = createButton('Select All');
-	selectAllButton.bind('click', function(){
-		$('#rmcAttrTable input[type=checkbox]').attr('checked', true);
-	});
-	diaDiv.append(selectAllButton);
-	
-	var unselectAllButton = createButton('Unselect All');
-	unselectAllButton.bind('click', function(){
-		$('#rmcAttrTable input[type=checkbox]').attr('checked', false);
-	});
-	diaDiv.append(unselectAllButton);
-	
-	diaDiv.append(attrTable);
-	
-	diaDiv.dialog({
-		modal: true,
-		width: 400,
-		close: function(event, ui){
-				$(this).remove();
-		},
-		buttons: {
-			cancel : function(){
-			 			$(this).dialog('close');
-		 			 },
-			ok : function(){
-		 			//collect all attibutes' name
-		 			var str = '';
-		 			$('#rmcAttrTable input:checked').each(function(){
-		 				if ('' == str){
-		 					str += $(this).attr('name');
-		 				}
-		 				else{
-		 					str += ',' + $(this).attr('name');
-		 				}
-		 			});
-		 			
-		 			//if no attribute is selected, alert the information.
-		 			if ('' == str){
-		 				alert('Please select one attribute at lease!');
-		 				return;
-		 			}
-		 			
-		 			//new selected attributes is different from the old, update the cookie and reload this tab
-		 			if ($.cookie('rmcmonattr') != str){
-		 				$.cookie('rmcmonattr', str, {path : '/xcat', expires : 10});
-		 				//todo reload the tab
-		 				$('#rmcmon').empty();
-		 				loadRmcMon();
-		 			}
-			     	$(this).dialog('close');
-				 }
-		}
-	});
+        // data
+        tempTd.append(attrChat);
+        var tempData = globalNodesDetail[nodeName][attr].split(',');
+        var tempArray = [];
+        for ( var i in tempData) {
+            tempArray.push( [ globalTimeStamp[i], Number(tempData[i]) ]);
+        }
+
+        $.jqplot('monitornodediv' + nodeName + attr, [ tempArray ], {
+            series : [ {
+                showMarker : false
+            } ],
+            axes : {
+                xaxis : {
+                    label : attr,
+                    renderer : $.jqplot.DateAxisRenderer,
+                    numberTicks : 5,
+                    tickOptions : {
+                        formatString : '%R',
+                        show : true,
+                        fontSize : '10px'
+                    }
+                },
+                yaxis : {
+                    tickOptions : {
+                        formatString : '%.2f',
+                        fontSize : '10px'
+                    }
+                }
+            }
+        });
+    }
 }
 
 /*===========RMC Event Tab============*/
 /**
  * load the rmc event tab.
  * 
- * @param 
+ * @param
  * 
  * @return
- *        
+ * 
  */
 function loadRmcEvent(){
-	//find the rmcevent tab
+	// find the rmcevent tab
 	
-	//add the stauts bar first. id = 'rmcMonStatus'
+	// add the stauts bar first. id = 'rmcMonStatus'
 	var rmcStatusBar = createStatusBar('rmcEventStatus');
 	rmcStatusBar.find('div').append(createLoader());
 	$('#rmcevent').append(rmcStatusBar);
@@ -658,10 +520,10 @@ function loadRmcEvent(){
 }
 
 /**
- * get all conditions  
+ * get all conditions
  * 
  * @return
- *        
+ * 
  */
 function getConditions(){
 	if ('' == globalCondition){
@@ -689,14 +551,14 @@ function getConditions(){
 }
 
 /**
- * get all response  
+ * get all response
  * 
  * @return
- *        
+ * 
  */
 function getResponse(){
 	var tempFlag = false;
-	//get all response first
+	// get all response first
 	for (var i in globalResponse){
 		tempFlag = true; 
 		break;
@@ -726,16 +588,16 @@ function getResponse(){
 }
 
 /**
- * show all the event in the rmc event tab 
+ * show all the event in the rmc event tab
  * 
  * @param data response from the xcat server.
 
  * @return
- *        
+ * 
  */
 function showEventLog(data){
 	$('#rmcEventStatus div').empty();
-	//rsct not installed.
+	// rsct not installed.
 	if (data.rsp[0] && (-1 != data.rsp[0].indexOf('lsevent'))){
 		$('#rmcEventStatus div').append('Please install RSCT first!');
 		return;
@@ -743,10 +605,10 @@ function showEventLog(data){
 	var eventDiv = $('#rmcEventDiv');
 	eventDiv.empty();
 	
-	//add the configure button
+	// add the configure button
 	loadRmcEventConfig();
 	
-	//get conditions and responses, save in the global
+	// get conditions and responses, save in the global
 	getConditions();
 	getResponse();
 	
@@ -767,7 +629,7 @@ function showEventLog(data){
 		'iDisplayLength' :10
 	});
 	
-	//unsort on the content column
+	// unsort on the content column
 	$('#lsEventTable thead tr th').eq(2).unbind('click');
 }
 
@@ -777,7 +639,7 @@ function showEventLog(data){
  * @param 
 
  * @return
- *        
+ * 
  */
 function loadRmcEventConfig(){
 	var buttons = $('<div id="rmcEventButtons" style="display:none;"></div>');
@@ -808,13 +670,13 @@ function loadRmcEventConfig(){
  * @param 
 
  * @return
- *        
+ * 
  */
 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
+	// add the conditions into fieldset
 	if ('' == globalCondition){
 		mkAssociationTable += 'Getting predefined conditions, open this dislogue later.';
 	}
@@ -825,7 +687,7 @@ function mkCondRespDia(){
 	mkAssociationTable += '</td><td id="mkAssResp">Plase 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
+	// change the response field when click the condition
 	diaDiv.find('input:radio').bind('click', function(){
 		diaDiv.find('#mkAssResp').empty().append('Getting response').append(createLoader());
 		$.ajax({
@@ -883,7 +745,7 @@ function mkCondRespDia(){
 				var oldResp = new Object();
 				var oldString = '';
 				var newString = '';
-				//get the old seelected responses
+				// get the old seelected responses
 				var conditionName = $(this).find('#mkAssCond :checked').attr('value');
 				if (!conditionName){
 					return;
@@ -896,7 +758,7 @@ function mkCondRespDia(){
 				for (var i in tempArray){
 					oldResp[tempArray[i]] = 1;
 				}
-				//get the new selected responses
+				// get the new selected responses
 				$(this).find('#mkAssResp input:checked').each(function(){
 					var respName = $(this).attr('value');
 					newResp[respName] = 1;
@@ -909,7 +771,7 @@ function mkCondRespDia(){
 					}
 				}
 				
-				//add the response which are delete.
+				// add the response which are delete.
 				for (var i in oldResp){
 					oldString += ',"' + i + '"';
 				}
@@ -917,7 +779,7 @@ function mkCondRespDia(){
 					oldString = oldString.substr(1);
 				}
 				
-				//add the response which are new add
+				// add the response which are new add
 				for (var i in newResp){
 					newString += ',"' + i +'"';
 				}
@@ -954,14 +816,14 @@ function mkCondRespDia(){
  * @param 
 
  * @return
- *        
+ * 
  */
 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
+	// add the conditions into fieldset
 	if ('' == globalCondition){
 		tableContent += 'Getting predefined conditions, open this dislogue later.';
 	}
@@ -970,7 +832,7 @@ function chCondScopeDia(){
 	}
 	tableContent += '</td><td id="changeGroup">';
 	
-	//add the groups into table
+	// add the groups into table
 	var groups = $.cookie('groups').split(',');
 	for (var i in groups){
 		tableContent += '<input type="checkbox" value="' + groups[i] + '">' + groups[i] + '<br/>';
@@ -978,9 +840,9 @@ function chCondScopeDia(){
 	
 	tableContent += '</td></tr></tbody></table></center>';
 	diaDiv.append(tableContent);
-	//fieldset to show status
+	// fieldset to show status
 	diaDiv.append('<fieldset id="changeStatus"></fieldset>');
-	//create the dislogue
+	// create the dislogue
 	diaDiv.dialog({
 		modal: true,
         width: 500,
@@ -1048,7 +910,7 @@ function chCondScopeDia(){
  * @param 
 
  * @return
- *        
+ * 
  */
 function mkResponseDia(){
 	var diaDiv = $('<div title="Make Response"><div>');
@@ -1079,7 +941,7 @@ function mkResponseDia(){
  * @param 
 
  * @return
- *        
+ * 
  */
 function startStopCondRespDia(){
 	var diaDiv = $('<div title="Start/Stop Association" id="divStartStopAss" class="tab"><div>');
@@ -1193,7 +1055,7 @@ function startStopCondRespDia(){
  * @param 
 
  * @return
- *        
+ * 
  */
 function stopCondRespDia(){
 	var diaDiv = $('<div title="Stop Association" id="stopAss"><div>');
@@ -1263,7 +1125,7 @@ function stopCondRespDia(){
  * @param 
 
  * @return
- *        
+ * 
  */
 function createConditionTd(cond){
 	var conditions = cond.split(';');
@@ -1286,7 +1148,7 @@ function createConditionTd(cond){
  * @param 
 
  * @return
- *        
+ * 
  */
 function createAssociationTable(cond){
 	var conditions = cond.split(';');
diff --git a/xCAT-UI/js/ui.js b/xCAT-UI/js/ui.js
index 3beb9d44b..4df1e32fe 100644
--- a/xCAT-UI/js/ui.js
+++ b/xCAT-UI/js/ui.js
@@ -508,6 +508,7 @@ function initPage() {
 	} else if (page == 'monitor.php') {
 		includeJs("js/jquery/jquery.jqplot.min.js");
 		includeJs("js/jquery/jqplot.pieRenderer.min.js");
+		includeJs("js/jquery/jqplot.dateAxisRenderer.min.js");
 		includeJs("js/monitor/xcatmon.js");
 		includeJs("js/monitor/rmcmon.js");
 		includeJs("js/monitor/gangliamon.js");