add summary pie chat into nodes page

git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@9816 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
This commit is contained in:
xq2005 2011-06-16 02:48:34 +00:00
parent bcc7c743f3
commit bafcee3503
6 changed files with 377 additions and 191 deletions

View File

@ -30,6 +30,7 @@
.tooltip h3 {
margin: 0px;
}
/*--------------- login dialog ---------*/
#logdialog {
width: 600px;
@ -44,7 +45,7 @@
}
#logdialog input{
width: 225px;
width: 219px;
border: solid 1px #0078AE;
font-size: 14px;
}
@ -203,7 +204,7 @@ body {
/*--------------- Nodes section ---------------*/
#nodes {
width: 760px;
width: 800px;
min-height: 570px;
margin: 15px 0px 15px 0px;
padding: 0px 0px 0px 10px;
@ -211,6 +212,11 @@ body {
border-left: medium solid #E6E6F2;
}
#nodes .summarypie {
width: 250px;
height: 250px;
}
/*--------------- Info/warning bar ---------------*/
span.ui-icon-info {
float: left;
@ -339,10 +345,26 @@ legend {
height: 300px;
}
/*--------------- Actions bar ---------------*/
/*--------------- menu Div Actions bar ---------------*/
.menuDiv {
background:none repeat scroll 0 0 #79B7E7;
padding: 0.5em;
}
.sf-menu {
background : none repeat scroll 0 0 #79B7E7;
border :1px solid #f5f5f5;
border-radius :0.5em 0.5em 0.5em 0.5em;
margin-bottom: 0;
}
.sf-sub-indicator{
right:0;
}
.actionBar {
display: inline-table;
padding: 8px 0px 0px 8px;
width:50%;
}
.actionBar div {
@ -385,11 +407,10 @@ legend {
/*** Search ***/
.dataTables_filter {
width: 50%;
width: 40%;
display: block;
float: right;
text-align: right;
padding: 8px 8px;
}
.tab input,select {

View File

@ -33,6 +33,6 @@ var hardwareInfo = {
'9117-MMB' : [ 'P7-770', '4' ],
'9119-FHB' : [ 'P7-795', '42' ],
'9179-MHB' : [ 'P7-780', '42' ],
'9125-F2C' : [ 'P7-IH', '2'], //fsp
'78AC-100' : [ 'P7-IH', '2'] //fsp
'9125-F2C' : [ 'Power 775', '2'],
'78AC-100' : [ 'Power 775', '2'] //fsp
};

View File

@ -83,12 +83,158 @@ function loadNodesPage() {
msg : ''
},
success : loadGroups
success : function(data){
loadGroups(data);
// draw cluster's summary by group names
loadPieSummary();
}
});
}
}
/**
* show cluster's summary in pie chats
*
* @return Nothing
*/
function loadPieSummary(){
$('#nodes').append('<h3>Cluster Summary</h3><hr/>');
var summaryTable = '<table>' +
'<tr>' +
'<td><div id="ospie" class="summarypie"></div></td>' +
'<td><div id="archpie" class="summarypie"></div></td>' +
'<td><div id="provmethodpie" class="summarypie"></td>' +
'</tr>' +
'<tr>' +
'<td><div id="nodetypepie" class="summarypie"></div></td>' +
'<td><div id="statuspie" class="summarypie"></div></td>' +
'</tr></table>';
$('#nodes').append(summaryTable);
$('#nodes .summarypie').append(createLoader());
// determine the group names
var groups = $.cookie('groups');
groups = groups.toLowerCase();
var tgtGroup = 'compute';
if (-1 != groups.indexOf('compute')){
tgtGroup = 'compute';
}
else if(-1 != groups.indexOf('lpar')){
tgtGroup = 'lpar';
}
else if(-1 != groups.indexOf('blade')){
tgtGroup = 'blade';
}
else if(-1 != groups.indexOf('ipmi')){
tgtGroup = 'ipmi';
}
drawPieSummary('Operating System', 'nodetype.os', tgtGroup, 'ospie');
drawPieSummary('Architecture', 'nodetype.arch', tgtGroup, 'archpie');
drawPieSummary('Provision Method', 'nodetype.provmethod', tgtGroup, 'provmethodpie');
drawPieSummary('Node Type', 'nodetype.nodetype', tgtGroup, 'nodetypepie');
drawPieSummary('Status', 'nodelist.status', tgtGroup, 'statuspie');
}
/**
* use nodels to get nodes' information and call jqplot to draw on the page
*
* @return Nothing
*/
function drawPieSummary(chattitle, field, tgtgroup, divid){
$.ajax({
url : 'lib/cmd.php',
dataType : 'json',
data : {
cmd : 'nodels',
tgt : tgtgroup,
args : field,
msg : ''
},
success : function(data){
var tempHash={};
var key = '';
for(var index in data.rsp){
key =data.rsp[index][1];
if('' == key){
key = 'unknown';
}
if(tempHash[key]){
tempHash[key]++;
}else {
tempHash[key] = 1;
}
}
var dataArray = [];
for (key in tempHash){
dataArray.push([key,tempHash[key]]);
}
$('#nodes #' + divid).empty();
var plot=$.jqplot(divid,
[dataArray],
{
title: chattitle,
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
padding: 2,
fill:true,
shadow:true,
shadowOffset: 2,
shadowDepth: 5,
shadowAlpha: 0.07,
dataLabels : 'value',
showDataLabels: true
}
},
legend: {
show:true,
rendererOptions: {
numberRows: 1
},
location: 's'
}
});
$('#'+divid).bind('jqplotDataClick',loadSummaryDetail);
$('#'+divid).bind('jqplotDataHighlight',function(){this.style.cursor='pointer';});
$('#'+divid).bind('jqplotDataUnhighlight',function(){this.style.cursor='';});
}
});
}
function loadSummaryDetail(ev, seriesIndex, pointIndex, data){
var temp = $(this).attr('id');
temp = temp.replace('pie', '');
var table = '';
switch(temp){
case 'os':
case 'arch':
case 'provmethod':
case 'nodetype':{
table = 'nodetype';
}
break;
case 'status': {
table = 'nodelist';
}
break;
}
var args = table + '.' + temp + '==';
if(data[0] != 'unknown'){
args += data[0];
}
drawNodesArea('all', args, '');
}
/**
* Load groups
*
@ -138,90 +284,11 @@ function loadGroups(data) {
var thisGroup = jQuery.trim(data.rslt.obj.text());
if (thisGroup) {
// Clear nodes division
$('#nodes').children().remove();
// Create loader
var loader = $('<center></center>').append(createLoader());
// Create a tab for this group
var tab = new Tab('nodesPageTabs');
setNodesTab(tab);
tab.init();
$('#nodes').append(tab.object());
tab.add('nodesTab', 'Table', loader, false);
tab.add('graphTab', 'Graphic', '', false);
$('#nodesPageTabs').bind('tabsselect', function(event, ui){
//for the graphical tab, we should check the graphical data first
if (1 == ui.index){
createPhysicalLayout(nodesList);
}
});
// To improve performance, get all nodes within selected group
// Get node definitions only for first 50 nodes
$.ajax( {
url : 'lib/cmd.php',
dataType : 'json',
data : {
cmd : 'nodels',
tgt : thisGroup,
args : '',
msg : thisGroup
},
/**
* Get node definitions for first 50 nodes
*
* @param data
* Data returned from HTTP request
* @return Nothing
*/
success : function(data) {
var rsp = data.rsp;
var group = data.msg;
// Save nodes in a list so it can be accessed later
nodesList = new Array();
for (var i in rsp) {
if (rsp[i][0]) {
nodesList.push(rsp[i][0]);
}
}
// Sort nodes list
nodesList.sort();
// Get first 50 nodes
var nodes = '';
for (var i = 0; i < nodesList.length; i++) {
if (i > 49) {
break;
}
nodes += nodesList[i] + ',';
}
// Remove last comma
nodes = nodes.substring(0, nodes.length-1);
// Get nodes definitions
$.ajax( {
url : 'lib/cmd.php',
dataType : 'json',
data : {
cmd : 'lsdef',
tgt : '',
args : nodes,
msg : group
},
success : loadNodes
});
}
});
//click the root, return directly
if ('root' == thisGroup){
return;
}
drawNodesArea(thisGroup, '', thisGroup);
/*
// Get subgroups within selected group
// only when this is the parent group and not a subgroup
@ -248,6 +315,101 @@ function loadGroups(data) {
$('#groups').append(mkAddNodeLink());
}
/**
* empty the nodes area, and add two tabs for add loading nodes result
*
* @param targetgroup: the name range for nodels command
* arguments: filter arguments for nodels command
* message: the useful information for the http request
*
* @return
*/
function drawNodesArea(targetgroup, arguments, message){
// Clear nodes division
$('#nodes').empty();
// Create loader
var loader = $('<center></center>').append(createLoader());
// Create a tab for this group
var tab = new Tab('nodesPageTabs');
setNodesTab(tab);
tab.init();
$('#nodes').append(tab.object());
tab.add('nodesTab', 'Table', loader, false);
tab.add('graphTab', 'Graphic', '', false);
$('#nodesPageTabs').bind('tabsselect', function(event, ui){
// for the graphical tab, we should check the graphical data
// first
if (1 == ui.index){
createPhysicalLayout(nodesList);
}
});
// To improve performance, get all nodes within selected group
// Get node definitions only for first 50 nodes
$.ajax( {
url : 'lib/cmd.php',
dataType : 'json',
data : {
cmd : 'nodels',
tgt : targetgroup,
args : arguments,
msg : message
},
/**
* Get node definitions for first 50 nodes
*
* @param data
* Data returned from HTTP request
* @return Nothing
*/
success : function(data) {
var rsp = data.rsp;
var group = data.msg;
// Save nodes in a list so it can be accessed later
nodesList = new Array();
for (var i in rsp) {
if (rsp[i][0]) {
nodesList.push(rsp[i][0]);
}
}
// Sort nodes list
nodesList.sort();
// Get first 50 nodes
var nodes = '';
for (var i = 0; i < nodesList.length; i++) {
if (i > 49) {
break;
}
nodes += nodesList[i] + ',';
}
// Remove last comma
nodes = nodes.substring(0, nodes.length-1);
// Get nodes definitions
$.ajax( {
url : 'lib/cmd.php',
dataType : 'json',
data : {
cmd : 'lsdef',
tgt : '',
args : nodes,
msg : targetgroup
},
success : loadNodes
});
}
});
}
/**
* Make a link to add nodes
*
@ -679,7 +841,6 @@ function loadNodes(data) {
if (tgtNodes) {
loadNodesetPage(tgtNodes);
}
});
// Boot to network
@ -827,10 +988,12 @@ function loadNodes(data) {
monitorCol.find('span a').click(function() {
refreshGangliaStatus(group, nodesTableId);
});
var menuDiv=$('<div id=\''+nodesTableId+'_menuDiv\' class=\'menuDiv\'></div>');
$('#' + nodesTableId + '_wrapper').prepend(menuDiv);
menuDiv.append(actionBar);
$('#'+nodesTableId+'_filter').appendTo(menuDiv);
$('#' + nodesTableId + '_wrapper').prepend(actionBar);
// Create tooltip for status
// Create tooltip for status
var tooltipConf = {
position: "center right",
offset: [-2, 10],
@ -849,7 +1012,7 @@ function loadNodes(data) {
powerCol.find('span').append(powerTip);
powerCol.find('span a').tooltip(tooltipConf);
// Create tooltip for monitor
// Create tooltip for monitor
var monitorTip = createMonitorToolTip();
monitorCol.find('span').append(monitorTip);
monitorCol.find('span a').tooltip(tooltipConf);
@ -933,51 +1096,10 @@ function loadNodes(data) {
});
/**
* Additional ajax requests need to be made for zVM
*/
// Get index of hcp column
var i = $.inArray('hcp', sorted);
var archCol = $.inArray('arch', sorted);
if (i) {
// Get hardware control point
var rows = nodesTable.object().find('tbody tr');
var hcps = new Object();
var rowsNum = rows.size();
for (var j = 0; j < rowsNum; j++) {
var val = rows.eq(j).find('td').eq(i).html();
var archval = rows.eq(j).find('td').eq(archCol).html();
if (-1 == archval.indexOf('390')){
continue;
}
hcps[val] = 1;
}
var args;
for (var h in hcps) {
// Get node without domain name
args = h.split('.');
// If there are no disk pools or network names cookie for this hcp
if (!$.cookie(args[0] + 'diskpools') || !$.cookie(args[0] + 'networks')) {
// Check if SMAPI is online
$.ajax( {
url : 'lib/cmd.php',
dataType : 'json',
data : {
cmd : 'lsvm',
tgt : args[0],
args : '',
msg : 'group=' + group + ';hcp=' + args[0]
},
// Load hardware control point specific info
// Get disk pools and network names
success : loadHcpInfo
});
}
} // End of for
} // End of if
* Additional ajax requests need to be made for zVM
* load advanced information based on hardware architecture
*/
advancedLoad();
}
/**
@ -1174,11 +1296,11 @@ function addNodes2Table(data) {
datatable.fnUpdate(rows[nodeRowPos], nodeRowPos, 0, false);
// Insert node comments
// This is done after datatable is updated because
// This is done after datatable is updated because
// you cannot insert an object using fnUpdate()
var comments = attrs[node]['usercomment'];
// If no comments exists, show 'No comments' and
// If no comments exists, show 'No comments' and
// set icon image source
var iconSrc;
if (!comments) {
@ -1223,7 +1345,7 @@ function addNodes2Table(data) {
/**
* Enable editable columns
*/
/*
// Do not make 1st, 2nd, 3rd, 4th, or 5th column editable
$('#' + nodesTableId + ' td:not(td:nth-child(1),td:nth-child(2),td:nth-child(3),td:nth-child(4),td:nth-child(5))').editable(
function(value, settings) {
@ -1256,6 +1378,7 @@ function addNodes2Table(data) {
placeholder: ' ',
height : '30px' // The height of the text area
});
*/
// If request to get node status is made
if (getNodeStatus) {
@ -1281,41 +1404,7 @@ function addNodes2Table(data) {
/**
* Additional ajax requests need to be made for zVM
*/
// If there is an hcp column
if (headersCol['hcp']) {
// Get hardware control point
var rows = $('#' + nodesTableId + ' tbody tr');
var hcps = new Object();
for (var j in rows) {
var val = rows.eq(j).find('td').eq(headersCol['hcp']).html();
hcps[val] = 1;
}
var args;
for (var h in hcps) {
// Get node without domain name
args = h.split('.');
// If there are no disk pools or network names cookie for this hcp
if (!$.cookie(args[0] + 'diskpools') || !$.cookie(args[0] + 'networks')) {
// Check if SMAPI is online
$.ajax( {
url : 'lib/cmd.php',
dataType : 'json',
data : {
cmd : 'lsvm',
tgt : args[0],
args : '',
msg : 'group=' + group + ';hcp=' + args[0]
},
// Load hardware control point specific info
// Get disk pools and network names
success : loadHcpInfo
});
}
} // End of for
} // End of if
advancedLoad();
}
/**
@ -1414,7 +1503,7 @@ function loadPowerStatus(data) {
* @param group
* Group name
* @param tableId
* Table to update node status
* Table to update node status
* @return Nothing
*/
function refreshPowerStatus(group, tableId) {
@ -1478,7 +1567,7 @@ function loadNodeStatus(data) {
* @param group
* Group name
* @param tableId
* Table to update node status
* Table to update node status
* @return Nothing
*/
function refreshNodeStatus(group, tableId) {
@ -2148,7 +2237,7 @@ function setOSImageCookies(data) {
var profilePos = 0;
var osversPos = 0;
var osarchPos = 0;
//get the column value
// get the column value
var colNameArray = rsp[0].substr(1).split(',');
for (var i in colNameArray){
switch (colNameArray[i]){
@ -3223,4 +3312,80 @@ function installGanglia(node) {
// Turn on Ganglia for node
monitorNode(node, 'on');
}
/**
* when nodes are loaded, based on different hardware architecture, should load different informations
*
* @return Nothing
*/
function advancedLoad(){
var tempIndex = 0;
var tableHeaders = $('#' + nodesTableId + ' th');
var colNameHash = new Object();
var colName = '';
var archCol = 0, hcpCol = 0;
//find out the column name and their index
for (tempIndex = 0; tempIndex < tableHeaders.size(); tempIndex++){
var header = tableHeaders.eq(tempIndex);
//if link header(status, power, monitor) can dump to next one
if (header.find('a').size() > 0){
continue;
}
colName = header.text();
if (colName){
colNameHash[colName] = tempIndex;
}
}
//there is not arch column, can not distinguish hardware type return directly
if (!colNameHash['arch']){
return;
}
if (!colNameHash['hcp']){
return;
}
archCol = colNameHash['arch'];
hcpCol = colNameHash['hcp'];
// Get hardware control point
var rows = $('#' + nodesTableId + ' tbody tr');
var hcps = new Object();
var rowsNum = rows.size();
for (var j = 0; j < rowsNum; j++) {
var val = rows.eq(j).find('td').eq(hcpCol).html();
var archval = rows.eq(j).find('td').eq(archCol).html();
if (-1 == archval.indexOf('390')){
continue;
}
hcps[val] = 1;
}
var args;
for (var h in hcps) {
// Get node without domain name
args = h.split('.');
// If there are no disk pools or network names cookie for this hcp
if (!$.cookie(args[0] + 'diskpools') || !$.cookie(args[0] + 'networks')) {
// Check if SMAPI is online
$.ajax( {
url : 'lib/cmd.php',
dataType : 'json',
data : {
cmd : 'lsvm',
tgt : args[0],
args : '',
msg : 'group=' + group + ';hcp=' + args[0]
},
// Load hardware control point specific info
// Get disk pools and network names
success : loadHcpInfo
});
}
} // End of for
}

View File

@ -355,7 +355,8 @@ function createGraphical(bpa, fsp, area){
position: "center right",
relative : true,
offset : [10, -40],
effect: "fade"
effect: "fade",
opacity: 0.9
});
$('.tooltip a').bind('click', function(){

View File

@ -440,7 +440,6 @@ function createMenu(items) {
'border-left' : '1px solid #BDBDBD'
});
}
menu.append(item);
}
@ -465,7 +464,10 @@ function initPage() {
includeJs("js/jquery/jquery.flot.min.js");
includeJs("js/jquery/tooltip.min.js");
includeJs("js/jquery/jquery.serverBrowser.min.js");
includeJs("js/jquery/jquery.jqplot.min.js");
includeJs("js/jquery/jqplot.pieRenderer.min.js");
includeJs("js/jquery/jqplot.dateAxisRenderer.min.js");
// Page plugins
includeJs("js/configure/configure.js");
includeJs("js/monitor/monitor.js");
@ -506,9 +508,6 @@ function initPage() {
headers.eq(2).css('background-color', '#A9D0F5');
loadProvisionPage();
} 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");

View File

@ -89,7 +89,7 @@ function login() {
<tr><td colspan=5></td></tr>
<tr><td align=right><img src="images/logo.png" width="50" height="35"></img></td><td colspan=4><p>eXtreme Cloud Administration Toolkit</p></td></tr>
<tr><td colspan=5></td></tr>
<tr><td></td><td><label for=username>User name:</label></td><td colspan=2><input id=username type=text name=username></td><td></td></tr>
<tr><td></td><td><label for=username>Username:</label></td><td colspan=2><input id=username type=text name=username></td><td></td></tr>
<tr><td></td><td><label for=password>Password:</label></td><td colspan=2><input id=password type=password name=password></td><td></td></tr>
<tr><td></td><td></td><td></td><td align=right><button>Login</button></td><td></td></tr>
<tr><td></td><td colspan=4><span id=logstatus></span></td></tr>