From b75d94785197fd79cd311babe23f0f6d47999735 Mon Sep 17 00:00:00 2001 From: xq2005 Date: Mon, 8 Nov 2010 07:19:05 +0000 Subject: [PATCH] use a tab to show the selected group's nodes in graphical type git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@8089 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd --- xCAT-UI/css/style.css | 139 ++++++++----------- xCAT-UI/js/nodes/nodes.js | 47 +++---- xCAT-UI/js/nodes/physical.js | 257 +++++++++++++---------------------- 3 files changed, 174 insertions(+), 269 deletions(-) diff --git a/xCAT-UI/css/style.css b/xCAT-UI/css/style.css index 8f2ed4b61..a5b0f301e 100644 --- a/xCAT-UI/css/style.css +++ b/xCAT-UI/css/style.css @@ -30,10 +30,7 @@ .tooltip h3 { margin : 0px; } -.tooltip table{ - font-size : 12px; - color: #fff; -} + /****************** Header ******************/ #header { height: 40px; @@ -167,82 +164,6 @@ body { display: inline-table; } -/****************** Physical layout section ******************/ -.physicaltree { - width: 200px; - vertical-align: top; - float: left; - position: relative; - margin: 15px 0px 15px 15px; - overflow: auto; -} - -.physicalview{ - width : 700px; - display : inline-table; -} - -.frameDiv{ - width : 179px; - height : 500px; - font-size: 10px; - background :url(../images/bpa.jpg); - border-width:2px; -} - -.fspDiv2{ - margin: 0px 12px 2px 17px; - font-size: 12px; - height: 20px; - line-height : 20px; - width : 140px; - text-align: center; - background:url(../images/4ufsp.jpg); - border-style:solid; - border-width:1px; - cursor: pointer; -} - -.fspDiv4{ - margin: 0px 12px 2px 17px; - font-size: 12px; - height: 44px; - line-height : 44px; - width : 140px; - text-align: center; - background:url(../images/4ufsp.jpg); - border-style:solid; - border-width:1px; - cursor: pointer; -} - -.fspDiv42{ - width : 179px; - height : 500px; - font-size: 15px; - background :url(../images/42ufsp.jpg); - border-width:2px; - cursor: pointer; -} - -.lparDiv{ - margin: 5px 0px 0px 9px; - width : 80px; - height : 10px; - opacity: 1; -} - -.lparStatus{ - width : 5px; - height : 5px; - padding: 0px; - border-width: 1px; - border-color: transparent; - border-style: solid; - font-size:1 -} - - /****************** Info/warning bar ******************/ span.ui-icon-info { float: left; @@ -733,4 +654,60 @@ table a:hover { width: 240px; height: 120px; margin: 0px 0px 15px 0px; -} \ No newline at end of file +} + +/****************** Physical layout section ******************/ +.frameDiv{ + width : 179px; + height : 500px; + font-size: 10px; + background :url(../images/bpa.jpg); + border-width:2px; +} + +.fspDiv2{ + margin: 0px 12px 2px 17px; + font-size: 12px; + height: 20px; + line-height : 20px; + width : 140px; + text-align: center; + background:url(../images/4ufsp.jpg); + border-style:solid; + border-width:1px; + cursor: pointer; +} + +.fspDiv4{ + margin: 0px 12px 2px 17px; + font-size: 12px; + height: 44px; + line-height : 44px; + width : 140px; + text-align: center; + background:url(../images/4ufsp.jpg); + border-style:solid; + border-width:1px; + cursor: pointer; +} + +.fspDiv42{ + width : 179px; + height : 500px; + font-size: 15px; + background :url(../images/42ufsp.jpg); + border-width:2px; + cursor: pointer; +} + +.lparDiv{ + margin: 5px 0px 0px 9px; + width : 80px; + height : 10px; + opacity: 1; +} + +.lparStatus{ + width : 5px; + height : 5px; +} diff --git a/xCAT-UI/js/nodes/nodes.js b/xCAT-UI/js/nodes/nodes.js index 7da6ac238..1e4f35d8b 100644 --- a/xCAT-UI/js/nodes/nodes.js +++ b/xCAT-UI/js/nodes/nodes.js @@ -54,36 +54,11 @@ function setNodesDataTable(table) { function loadNodesPage() { // If groups are not already loaded if (!$('#groups').length) { - - var layoutSelectorDiv = $('
'); - var logicalLayoutDiv = $('
'); - var physicalLayoutDiv = $('
'); - physicalLayoutDiv.hide(); - - $('#content').append(layoutSelectorDiv); - $('#content').append(logicalLayoutDiv); - $('#content').append(physicalLayoutDiv); - // Create layout selector - var groupRadio = $('Group'); - groupRadio.bind('click',function(){ - $('#physicalLayout').hide(); - $('#logicalLayout').show(); - }); - - var physicalRadio = $('Graphical'); - physicalRadio.bind('click', function(){ - $('#logicalLayout').hide(); - $('#physicalLayout').show(); - }); - layoutSelectorDiv.append(''); - layoutSelectorDiv.append(groupRadio); - layoutSelectorDiv.append(physicalRadio); - // Create a groups division groupDIV = $('
'); nodesDIV = $('
'); - logicalLayoutDiv.append(groupDIV); - logicalLayoutDiv.append(nodesDIV); + $('#content').append(groupDIV); + $('#content').append(nodesDIV); // Create loader var loader = createLoader(); @@ -118,7 +93,7 @@ function loadNodesPage() { }, success : function(data){ - createPhysicalLayout(data, $('#physicalLayout')); + extractGraphicalData(data); } }); } @@ -158,13 +133,14 @@ function loadGroups(data) { $('#nodes').children().remove(); // Create loader var loader = $('
').append(createLoader()); - + var loader2 = $('
').append(createLoader()); // Create a tab for this group var tab = new Tab(); setNodesTab(tab); tab.init(); $('#nodes').append(tab.object()); tab.add('nodesTab', 'Nodes', loader, false); + tab.add('graphTab', 'Graphical', loader2, false); // Get nodes within selected group $.ajax( { @@ -179,6 +155,19 @@ function loadGroups(data) { success : loadNodes }); + + $.ajax({ + url : 'lib/cmd.php', + dataType : 'json', + data : { + cmd : 'lsdef', + tgt : '', + args : thisGroup + ';-s', + msg : '' + }, + + success : createPhysicalLayout + }); } // End of if (thisGroup) }); subItem.append(link); diff --git a/xCAT-UI/js/nodes/physical.js b/xCAT-UI/js/nodes/physical.js index 1dcecee83..9c6b73fbd 100644 --- a/xCAT-UI/js/nodes/physical.js +++ b/xCAT-UI/js/nodes/physical.js @@ -3,168 +3,114 @@ var bpaList; var fspList; var lparList; +var nodeList; var selectLpar = new Object(); /** - * Get all nodes' nodetype and parent, and create the physical layout div + * extract all nodes userful data into a hash, which is used for creating graphical * * @param data: the response from xcat command "nodels all nodetype.nodetype ppc.parent ..." - * area: the element to append tree and graphical layout + * * @return */ -function createPhysicalLayout(data, area){ +function extractGraphicalData(data){ var nodes = data.rsp; - var tempList = new Object(); - bpaList = new Object(); - fspList = new Object(); - lparList = new Object(); + nodeList = new Object(); //extract useful info into tempList for (var i = 0; i < nodes.length; i++){ var nodeName = nodes[i][0]; - if (undefined == tempList[nodeName]){ - tempList[nodeName] = new Object(); + if (undefined == nodeList[nodeName]){ + nodeList[nodeName] = new Object(); } switch(nodes[i][2]){ case 'nodetype.nodetype': { - tempList[nodeName]['type'] = nodes[i][1]; + nodeList[nodeName]['type'] = nodes[i][1]; } break; case 'ppc.parent' : { - tempList[nodeName]['parent'] = nodes[i][1]; + nodeList[nodeName]['parent'] = nodes[i][1]; } break; case 'nodelist.status': { - tempList[nodeName]['status'] = nodes[i][1]; + nodeList[nodeName]['status'] = nodes[i][1]; } break; case 'vpd.mtm': { - tempList[nodeName]['mtm'] = nodes[i][1]; + nodeList[nodeName]['mtm'] = nodes[i][1]; } default : break; } - } - - for (var nodeName in tempList){ - var parentName = tempList[nodeName]['parent']; - var mtm = tempList[nodeName]['mtm']; - var status = tempList[nodeName]['status']; - switch(tempList[nodeName]['type']){ - case 'bpa': { - if (undefined == bpaList[nodeName]){ - bpaList[nodeName] = new Array(); - } - } - break; - case 'lpar,osi': { - if ('' == parentName){ - break; - } - - if (undefined == fspList[parentName]){ - fspList[parentName] = new Array(); - //default is 4 units. so i select a 4u mtm randomly - fspList[parentName]['mtm'] = '8202-E4B'; - fspList[nodeName]['children'] = new Array(); - } - - fspList[parentName]['children'].push(nodeName); - lparList[nodeName] = status; - } - break; - case 'fsp': { - if (undefined == fspList[nodeName]){ - fspList[nodeName] = new Array(); - fspList[nodeName]['children'] = new Array(); - } - - fspList[nodeName]['mtm'] = mtm; - - if ('' == parentName){ - break; - } - - if (undefined == bpaList[parentName]){ - bpaList[parentName] = new Array(); - } - - bpaList[parentName].push(nodeName); - } - break; - default: - break; - } - } - - createTree(bpaList, fspList, area); - createGraphical(bpaList, fspList, area); - + } } -/** - * create the physical tree layout - * - * @param bpa : all bpa and there related fsps - * fsp : all fsp and there related lpars - * area: the element to append tree layout - * @return - */ -function createTree(bpa, fsp, area){ - //create tree and layout - var usedFsp = new Object(); - var bpaList = ''; +function createPhysicalLayout(data){ + bpaList = new Object(); + fspList = new Object(); + lparList = new Object(); - var cecList = ''; - - var tree_area = $('
'); - - tree_area.append(''); - area.append(tree_area); - tree_area.jstree({ - themes : { - "theme" : "default", - "dots" : false, // No dots - "icons" : false // No icons - } - }); + createGraphical(bpaList, fspList, $('#graphTab')); } +function fillList(nodeName){ + var parentName = nodeList[nodeName]['parent']; + var mtm = nodeList[nodeName]['mtm']; + var status = nodeList[nodeName]['status']; + + switch(nodeList[nodeName]['type']){ + case 'bpa': { + if (undefined == bpaList[nodeName]){ + bpaList[nodeName] = new Array(); + } + } + break; + case 'lpar,osi': { + if ('' == parentName){ + break; + } + + if (undefined == fspList[parentName]){ + fillList(parentName); + } + + fspList[parentName]['children'].push(nodeName); + lparList[nodeName] = status; + } + break; + case 'fsp': { + if (undefined != fspList[nodeName]){ + break; + } + + fspList[nodeName] = new Array(); + fspList[nodeName]['children'] = new Array(); + fspList[nodeName]['mtm'] = mtm; + + if ('' == parentName){ + break; + } + + if (undefined == bpaList[parentName]){ + fillList(parentName); + } + + bpaList[parentName].push(nodeName); + } + break; + default: + break; + } +} /** * create the physical graphical layout * @@ -176,9 +122,7 @@ function createTree(bpa, fsp, area){ */ function createGraphical(bpa, fsp, area){ var usedFsp = new Object(); - var graphField = $('
'); - graphField.append('Graphical Layout'); - var graphTable = $('
'); + var graphTable = $('
'); var elementNum = 0; var row; for (var bpaName in bpa){ @@ -187,7 +131,7 @@ function createGraphical(bpa, fsp, area){ graphTable.append(row); } elementNum ++; - var td = $(''); + var td = $(''); var frameDiv = $('
'); frameDiv.append('
' + bpaName + '
'); for (var fspIndex in bpa[bpaName]){ @@ -235,15 +179,12 @@ function createGraphical(bpa, fsp, area){ } elementNum ++; - var td = $(''); + var td = $(''); td.append(createFspDiv(fspName, fsp[fspName]['mtm'], fsp)); td.append(createFspTip(fspName, fsp[fspName]['mtm'], fsp)); row.append(td); } - graphField.append(graphTable); - - var graphical_area = $('
'); var selectLparDiv = $('
'); var temp = 0; for (var i in selectLpar){ @@ -259,9 +200,13 @@ function createGraphical(bpa, fsp, area){ else{ updateSelectLparDiv(); } - graphical_area.append(selectLparDiv); - graphical_area.append(graphField); - area.append(graphical_area); + + //add buttons + var tempDiv = $('
'); + tempDiv.append(createActionMenu()); + area.append(tempDiv); + area.append(selectLparDiv); + area.append(graphTable); $('.tooltip input[type = checkbox]').bind('click', function(){ var lparName = $(this).attr('name'); @@ -274,14 +219,17 @@ function createGraphical(bpa, fsp, area){ } else{ delete selectLpar[lparName]; - $('#graphTable [name=' + lparName + ']').css('border-color', 'transparent'); + $('#graphTable [name=' + lparName + ']').css('border-color', '#BDBDBD'); } updateSelectLparDiv(); }); $('.fspDiv2, .fspDiv4, .fspDiv42').tooltip({ - + position: "top center", + relative : true, + offset : [20, 40], + effect: "fade" }); $('.fspDiv2, .fspDiv4, .fspDiv42').bind('click', function(){ @@ -301,7 +249,7 @@ function showSelectDialog(lpars){ var diaDiv = $('
'); if (0 == lpars.length){ - diaDiv.append(createInfoBar('There is not any lpars defined.')); + diaDiv.append(createInfoBar('There is not any lpars be selected(defined).')); } else{ //add the dialog content @@ -368,23 +316,10 @@ function showSelectDialog(lpars){ function updateSelectLparDiv(){ var temp = 0; $('#selectLparDiv').empty(); - - for (var LparName in selectLpar){ - temp ++; - break; - } - - if (0 == temp){ - $('#selectLparDiv').append(createInfoBar('Click CEC and select lpars to do operations.')); - return; - } - - temp =0; + //add buttons - var tempDiv = $('
'); - tempDiv.append(createActionMenu()); - $('#selectLparDiv').append(tempDiv); - $('#selectLparDiv').append('
Lpars: '); + + $('#selectLparDiv').append('Lpars: '); for(var lparName in selectLpar){ $('#selectLparDiv').append(lparName + ' '); temp ++; @@ -589,9 +524,13 @@ function createFspDiv(fspName, mtm, fsp){ var lparStatusRow = ''; for (var lparIndex in fsp[fspName]['children']){ + //show 8 lpars on one cec at most. + if (lparIndex >= 8){ + break; + } var lparName = fsp[fspName]['children'][lparIndex]; var color = statusMap(lparList[lparName]); - lparStatusRow += '1'; + lparStatusRow += '1'; } //select the backgroud @@ -632,8 +571,8 @@ function createFspTip(fspName, mtm, fsp){ var lparName = fsp[fspName]['children'][lparIndex]; var color = statusMap(lparList[lparName]); var row = ''; - row += ''+ lparName + ''; - row += '' + lparList[lparName] + ''; + row += ''+ lparName + ''; + row += '' + lparList[lparName] + ''; tempTable.append(row); }