arif/xcat-core
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

using the dataTables plugin to represent the tables in xCAT

Browse Source 
git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@4672 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
This commit is contained in:
mxi1 2009-11-26 07:31:17 +00:00
parent 0a76a95b56
commit 5f56cd6d3c
9 changed files with 278 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
xCAT-UI/css/main.css
View File

@ -385,54 +385,6 @@ padding:10px 2px;
display: block;
}
#condresp {
width: 770px;
margin: 10px;
padding: 10px;
float: left;
display: block;
border-bottom: 1px dotted #555;
}
#assocaition {
margin: 10px;
padding: 10px;
float:left;
display: block;
width: 720px;
border-bottom: 1px dotted #555;
}
#avail_cond {
width: 275px;
margin: 5px;
padding: 10px;
float: left;
background-color: #ffee33;
}
#avail_cond tbody {
height: 640px;
overflow-y: scroll;
overflow-x: hide;
}
#condition .ui-selecting {background: #FECA40;}
#condition .ui-selected { background: #F39814; color: white; }
#condition {list-style-type: none; margin: 0; padding: 0;}
#avail_resp {
width: 425px;
margin: 5px;
padding: 10px;
float: left;
background-color: #eeffee;
}
#avail_resp tbody {
height: 640px;
overflow-y: scroll;
overflow-x: hide;
}
#monsetting_tips {
width: 920px;

46
xCAT-UI/css/monitor.css
View File

@ -126,3 +126,49 @@ fieldset {
outline: 1px dotted #ccc;
}
#condresp {
width: 71%;
margin: 5px;
padding: 5px;
float: left;
display: block;
border: 1px solid orange;
}
#assocaition {
margin: 5px;
padding: 5px;
float:left;
display: block;
border: 1px solid lime;
}
#avail_cond {
width: 33%;
margin: 5px;
padding: 5px;
float: left;
background-color: #ffee33;
}
#avail_cond tbody {
overflow-y: scroll;
overflow-x: hide;
}
#condition .ui-selecting {background: #FECA40;}
#condition .ui-selected { background: #F39814; color: white; }
#condition {list-style-type: none; margin: 0; padding: 0;}
#avail_resp {
width: 60%;
margin: 5px;
padding: 5px;
float: left;
background-color: #eeffee;
}
#avail_resp tbody {
overflow-y: scroll;
overflow-x: hide;
}

3
xCAT-UI/js/loading.js
View File

@ -99,7 +99,8 @@ var xStart = function(){
myBar.addScript("jsTree/jquery.cookie.js");
myBar.addScript("jsTree/css.js");
myBar.addScript("jquery.form.js");
myBar.addScript("jquery.jeditable.mini.js");
myBar.addScript("jquery.jeditable.mini.js");
myBar.addScript("jquery.dataTables.min.js");
myBar.addScript("hoverIntent.js");
myBar.addScript("superfish.js");
myBar.addScript("jquery.tablesorter.js");

71
xCAT-UI/js/monitor.js
View File

@ -114,6 +114,30 @@ function monPluginSetStat()
);
}
/*setMonsettingTab is used to initialize the configuration of monsetting in the monlist */
function setMonsettingTab()
{
makeEditable('monsetting','.editme', '.Ximg', '.Xlink');
$("#reset").click(function() {
alert('You sure you want to discard changes?');
$("#settings").tabs("load",1); //reload the "config" tabs
$("#settings .ui-tabs-panel #accordion").accordion('activate',1);//activate the "monsetting" accordion
});
$("#monsettingaddrow").click(function() {
var line = $(".mContent #tabTable tbody tr").length + 1;
var newrow = formRow(line, 6, line%2);
$(".mContent #tabTable tbody").append($(newrow));
makeEditable('monsetting', '.editme2', '.Ximg2', '.Xlink2');
});
$("#saveit").click(function() {
var plugin=$('.pluginstat.ui-state-active').attr('id');
$.get("monitor/options.php",{name:plugin, opt:"savetab"},function(data){
$("#settings").tabs("load",1); //reload the "config" tabs
$("#settings .ui-tabs-panel #accordion").accordion('activate',1);//activate the "monsetting" accordion
});
});
}
function nodemonSetStat()
{
//enable/disable buttons for setting of the Node monitoring status
@ -130,5 +154,52 @@ function appmonSetStat()
//TODO
}
//create the associations for the condition & response
//which is be used in the PHP function displayCondResp() in rmc_event_define.php
function mkCondResp()
{
//get the name of the selected condition
//then, get the response in "checked" status
//then, run the command "mkcondresp"
var cond_val = $(':input[name=conditions][checked]').val();
if(cond_val) {
//get the response in "checked" status
var resps_obj = $(':input[name=responses][checked]');
if(resps_obj) {
$.each(resps_obj,function(i,n) {
//i is the index
//n is the content
//TODO:add one new php file to handle "mkcondresp" command
$.get("monitor/makecondresp.php", {cond: cond_val, resp: n.value}, function(data) {
$("#devstatus").html(data);
});
});
$("#association").load("monitor/updateCondRespTable.php");
}
}
}
//clearEventDisplay()
//is used to clear the selection in the page for configuring the condtion&response association
function clearEventDisplay()
{
$(':input[name=conditions][checked]').attr('checked', false);
$(':input[name=responses][checked]').attr('checked', false);
}
//control_RMCAssoc()
//is used to update the association table in rmc_event_define.php
function control_RMCAssoc(cond, node, resp, action)
{
//TODO:for define_rmc_event
//control the RMC Association: startcondresp & stopcondresp;
$.get("monitor/updateCondResp.php",
{c: cond, n: node, r: resp, a: action},
function(data) {
$("#association").html(data);
}
);
}
// for the progress bar
myBar.loaded('monitor.js');

68
xCAT-UI/js/xcat.js
View File

@ -400,48 +400,6 @@ function goto_next()
}
}
function mkCondResp()
{
//get the name of the selected condition
//then, get the response in "checked" status
//then, run the command "mkcondresp"
var cond_val = $('input[@name=conditions][@checked]').val();
if(cond_val) {
//get the response in "checked" status
var resps_obj = $('input[@name=responses][@checked]');
if(resps_obj) {
$.each(resps_obj,function(i,n) {
//i is the index
//n is the content
//TODO:add one new php file to handle "mkcondresp" command
$.get("monitor/makecondresp.php", {cond: cond_val, resp: n.value}, function(data) {
$("#devstatus").html(data);
});
});
$("#association").load("monitor/updateCondRespTable.php");
}
}
}
function control_RMCAssoc(cond, node, resp, action)
{
//TODO:for define_rmc_event
//control the RMC Association: startcondresp & stopcondresp;
$.get("monitor/updateCondResp.php",
{c: cond, n: node, r: resp, a: action},
function(data) {
$("#association").html(data);
}
);
}
function clearEventDisplay()
{
$('input[@name=conditions][@checked]').attr('checked', false);
$('input[@name=responses][@checked]').attr('checked', false);
}
function showRMCAttrib()
{
var class_val = $('input[@name=classGrp][@checked]').val();
@ -452,32 +410,6 @@ function showRMCAttrib()
}
}
//TODO: when mouse hover the list of monitor plugins, the .ListLine_hover style will
//be applied on the <tr>,
function hoverOnMonlist()
{
$(".tabTable tr").hover(
function() {
$(this).addClass("ListLine_hover");
},
function() {
$(this).removeClass("ListLine_hover");
}
);
}
function monsetupAction(plugin, action_val)
{
//plugin = the name of plugin
//action = "start" or "stop"
$.get("monitor/setup.php", {name: plugin, action: action_val}, function(data) {
$.get("monitor/updateMonList.php", {}, function(data) {
$("#monlist_table").html(data);
});
});
}
function show_monshow_data(type,range)
{
//type = "text" or "graph"

2
xCAT-UI/lib/display.php
View File

@ -16,6 +16,8 @@ echo <<<EOS1
<link rel="stylesheet" type="text/css" href="css/monitor.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/theme/jquery-ui-1.7.2.custom.css" media="screen">
<link rel="stylesheet" type="text/css" href="js/jsTree/tree_component.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/demo_page.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/demo_table.css" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-all.min.js"></script>
<script type="text/javascript" src="js/loading.js"></script>

236
xCAT-UI/lib/monitor_display.php
View File

@ -1,48 +1,4 @@
<?php
/*
* All the <html> code related with monitor interface is put here.
*/
#displayMonitorLists() will generate all the monitoring plug-ins,
#the user can select the plug-ins he wants to operate on,
#and press the "Next" button;
function displayMonitorLists() {
#The command "monls -a" is used to get the monitoring plug-ins list
$xml = docmd("monls"," ", array('-a'));
if(getXmlErrors($xml,$errors)) {
echo "<p class=Error>",implode(' ', $errors), "</p>";
exit;
}
#then, parse the xml data
$ooe = 0;
$line = 0;
foreach($xml->children() as $response) foreach($response->children() as $data) {
list($name, $stat, $nodemonstatus) = preg_split("/\s+/", $data);
$ooe = $ooe%2;
echo "<tr class='ListLine$ooe' id='row$line'>";
echo "<td >$name</td>";
echo "<td >$stat</td>";
if(isset($nodemonstatus)) { echo "<td >Enabled</td>";}else {echo "<td >Disabled</td>";}
echo "<td>";
insertButtons(array('label'=>'Configure', 'id'=>'configure', 'onclick'=>''));
echo "</td>";
echo "<td>";
$name_str = '"'.$name.'"';
if($stat == "monitored") {
$act_str = '"stop"';
insertButtons(array('label'=>'Stop', 'id'=>'stop', 'onclick'=>"monsetupAction($name_str, $act_str)"));
}else {
$act_str = addslashes('"start"');
insertButtons(array('label' => 'Start', 'id'=>'start', 'onclick' => "monsetupAction($name_str, $act_str)"));
}
echo "</td>";
echo " </tr>";
$ooe++;
$line++;
//echo "<tr><td><input type='checkbox' />$name</td><td>$stat</td><td><a onclick='LoadMainPage("main.php")'>$name</a></td></tr>";
}
return 0;
}
function displayTips($tips)
{
@ -110,29 +66,49 @@ function displayStatus()
function displayOSITree()
{
//display the node range tree, but only with the nodes with OSI type
//this follows the function displayNrTree();
//it doesn't work on firefox!!!
echo <<<EOS3
//this follows the function showNrTreeInput();
echo "<div id=nrtree-input class='ui-state-default ui-corner-all'>";
echo <<<TOS3
<script type="text/javascript">
$(init_ositree());
$(function() {
nrtree = new tree_component(); // -Tree begin
nrtree.init($("#nrtree-input"),{
rules: { multiple: "Ctrl" },
ui: { animation: 250 },
callback : { onchange : printtree },
data : {
type : "json",
async : "true",
url: "noderangesource.php"
}
}); //Tree finish
});
</script>
<div id=ositree></div>
EOS3;
TOS3;
echo "</div>";
}
function displayAssociation()
{
echo '<div id="association">';
//TODO: the return message of "webrun lscondresp" is changed
//and, also, DataTables is used to draw the tabls
echo '<div id="association" class="ui-cornel-all">';
echo <<<TOS5
<b>Available Condition/Response Associations</b>
<table id="tabTable" class="tabTable" cellspacing="1">
<script type="text/javascript">
$("#association").dataTable({
"bLengthChange": false,
"bFilter": true,
"bSort": true
});
</script>
<table>
<thead>
<tr class="colHeaders">
<td>Condition</td>
<td>Response</td>
<td>Node</td>
<td>State</td>
<td>Action</td>
<tr>
<th>Condition</td>
<th>Response</td>
<th>Node</td>
<th>State</td>
<th>Action</td>
</tr>
</thead>
<tbody>
@ -145,35 +121,46 @@ TOS5;
//get all the condition&response associations for RMC
foreach ($xml->children() as $response) foreach($response->children() as $data) {
//get the data from xcatd
$association = explode("=", $data);
$ooe = 0;
$line = 0;
foreach($association as $elem) {
$ooe = $ooe%2;
//the format should be
//"NodeReachability"\t"EmailRootOffShift"\t"hv8plus01.ppd.pok.ibm.com"\t"Active"
$record = explode("\"", $elem);
$cond = $record[1];
$resp = $record[3];
$node = $record[5];
$state = $record[7];
echo "<tr class='ListLine$ooe' id='row$line'>";
echo "<td>$cond</td>";
echo "<td>$resp</td>";
echo "<td>$node</td>";
echo "<td>$state</td>";
echo "<td>";
if($state == "Active") {
insertButtons(array('label'=>'DeActivate', 'id'=>'deactivate', 'onclick'=>"control_RMCAssoc(\"$cond\", \"$node\", \"$resp\", \"stop\")"));
}else if($state == "Not active"){
insertButtons(array('label'=>'Activate', 'id'=>'activate', 'onclick'=>"control_RMCAssoc(\"$cond\", \"$node\", \"$resp\", \"start\")"));
}
echo "</td>";
echo "</tr>";
$ooe++;
$line++;
}
$record = split('"',$data);
echo "<tr>";
echo <<<TOS6
<td>$record[1]</td>
<td>$record[3]</td>
<td>$record[5]</td>
<td>$record[7]</td>
TOS6;
//TODO: insert the button here
echo "<td>Button</td>";
echo "</tr>";
// $association = explode("=", $data);
//
// $ooe = 0;
// $line = 0;
// foreach($association as $elem) {
// $ooe = $ooe%2;
// //the format should be
// //"NodeReachability"\t"EmailRootOffShift"\t"hv8plus01.ppd.pok.ibm.com"\t"Active"
// $record = explode("\"", $elem);
// $cond = $record[1];
// $resp = $record[3];
// $node = $record[5];
// $state = $record[7];
// echo "<tr class='ListLine$ooe' id='row$line'>";
// echo "<td>$cond</td>";
// echo "<td>$resp</td>";
// echo "<td>$node</td>";
// echo "<td>$state</td>";
// echo "<td>";
// if($state == "Active") {
// insertButtons(array('label'=>'DeActivate', 'id'=>'deactivate', 'onclick'=>"control_RMCAssoc(\"$cond\", \"$node\", \"$resp\", \"stop\")"));
// }else if($state == "Not active"){
// insertButtons(array('label'=>'Activate', 'id'=>'activate', 'onclick'=>"control_RMCAssoc(\"$cond\", \"$node\", \"$resp\", \"start\")"));
// }
// echo "</td>";
// echo "</tr>";
// $ooe++;
// $line++;
// }
}
echo "</tbody></table></div>";
return 0;
@ -181,35 +168,49 @@ TOS5;
function displayCond()
{
//the user selects one node/noderange from the #ositree div
//display all the avaiable conditions to a <table> element
echo <<<COND
<div id="avail_cond">
<b>Available Conditions</b>
<table id="tabTable" class="tabTable" cellspacing="1">
<table>
<thead>
<tr class="colHeaders">
<td></td>
<td>Conditions</td>
<th></td>
<th>Conditions</td>
</tr>
</thead>
<tbody>
COND;
$xml = docmd("webrun", '', array("lscondition"));
foreach($xml->children() as $response) foreach($response->children() as $data) {
//get the data from xcatd
$conditions = explode("=", $data);
}
$ooe = 0;
$line = 0;
foreach($conditions as $elem) {
$ooe = $ooe%2;
echo "<tr class='ListLine$ooe' id='row$line'>";
echo "<td><input type=\"radio\" name=\"conditions\" value=\"$elem\" /></td>";
echo "<td>$elem</td>";
echo "</tr>";
$ooe++;
$line++;
/*
* the data format like this
* "HFI_not_configured" "ca4lpar02" "Not monitored"
* "Drawer_not_configured" "ca4lpar02" "Not monitored"
* "AnyNodeFileSystemSpaceUsed_H" "ca4lpar02" "Not monitored"
*/
$tmp = split('"', $data);
//$tmp[1] = condition name
//$tmp[3] = nodename
//$tmp[5] = status
echo <<<TOS99
<tr>
<td><input type='radio' name='conditions' value='$tmp[1]]' /></td>
<td>$tmp[1]</td>
</tr>
TOS99;
}
// $ooe = 0;
// $line = 0;
// foreach($conditions as $elem) {
// $ooe = $ooe%2;
// echo "<tr class='ListLine$ooe' id='row$line'>";
// echo "<td><input type=\"radio\" name=\"conditions\" value=\"$elem\" /></td>";
// echo "<td>$elem</td>";
// echo "</tr>";
// $ooe++;
// $line++;
// }
echo "</tbody></table></div>";
return 0;
@ -233,17 +234,23 @@ RESP;
$ooe=0;
$line=0;
foreach($xml->children() as $response) foreach($response->children() as $data) {
$responses = explode("=", $data);
}
foreach($responses as $elem) {
$ooe = $ooe%2;
echo "<tr class='ListLine$ooe' id='row$line'>";
echo "<td><input type='checkbox' name='responses' value='$elem' /></td>";
echo "<td>$elem</td>";
$record = split('"', $data);
echo "<tr>";
echo <<<TOS7
<td><input type='checkbox' name='responses' value='$record[1]]' /></td>
<td>$record[1]</td>
TOS7;
echo "</tr>";
$ooe++;
$line++;
}
// foreach($responses as $elem) {
// $ooe = $ooe%2;
// echo "<tr class='ListLine$ooe' id='row$line'>";
// echo "<td><input type='checkbox' name='responses' value='$elem' /></td>";
// echo "<td>$elem</td>";
// echo "</tr>";
// $ooe++;
// $line++;
// }
echo '</tbody></table></div>';
return 0;
}
@ -257,7 +264,6 @@ function displayCondResp()
insertButtons(array('label'=>'Add', id=>'addAssociation', 'onclick'=>'mkCondResp()'));
insertButtons(array('label'=>'Cancel', id=>'cancel_op', 'onclick'=>'clearEventDisplay()'));
echo '</div>';
displayStatus();
}
function displayRMCRsrc()

52
xCAT-UI/monitor/options.php
View File

@ -92,6 +92,37 @@ echo <<<TOS10
TOS10;
showMonsettingTab();
echo "</div>";
if($name == "rmcmon") {//special cases for RMCMON
echo "<h3><a href='#'>RMC Event Monitor Setting</a></h3>";
echo "<div>";
echo <<<TOS11
<div class='ui-state-highlight ui-corner-all'>
<p>RMC Event configuration is independent from the monstart/monstop command</p>
<p>To make your change effect, you don't need to restart RMC plugin</p>
</div>
TOS11;
showRMCAssocTab();
echo "<p>click the REDIRECT button to go to the configure web page</p>";
echo "<button class='fg-button ui-state-active ui-corner-all' onclick=\"loadMainPage('monitor/rmc_event_define.php')\">Redirect</button>";
echo "</div>";
echo "<h3><a href='#'>The Available RMC Resources and their attributes</a></h3>";
echo <<<TOS15
<div>
<p class='ui-state-highlight'>For your convenience, all the available RMC Resources and their attributes will list here</p>
</div>
TOS15;
}
echo "</div>";
}
/* showRMCAssocTab()
* is used to display all the current associations of RMC conditions&responses
*/
function showRMCAssocTab()
{
echo "<div>";
echo "</div>";
}
@ -247,25 +278,7 @@ function showMonsettingTab()
echo <<<TOS22
<script type="text/javascript">
$(function() {
makeEditable('monsetting','.editme', '.Ximg', '.Xlink');
$("#reset").click(function() {
alert('You sure you want to discard changes?');
$("#settings").tabs("load",1); //reload the "config" tabs
$("#settings .ui-tabs-panel #accordion").accordion('activate',1);//activate the "monsetting" accordion
});
$("#monsettingaddrow").click(function() {
var line = $(".mContent #tabTable tbody tr").length + 1;
var newrow = formRow(line, 6, line%2);
$(".mContent #tabTable tbody").append($(newrow));
makeEditable('monsetting', '.editme2', '.Ximg2', '.Xlink2');
});
$("#saveit").click(function() {
var plugin=$('.pluginstat.ui-state-active').attr('id');
$.get("monitor/options.php",{name:plugin, opt:"savetab"},function(data){
$("#settings").tabs("load",1); //reload the "config" tabs
$("#settings .ui-tabs-panel #accordion").accordion('activate',1);//activate the "monsetting" accordion
});
});
setMonsettingTab();
});
</script>
TOS22;
@ -314,6 +327,7 @@ TOS00;
$ooe = 1 - $ooe;
}
echo "</table>\n";
echo "</div>";
$_SESSION["editable-$tab"] = & $editable; # save the array so we can access it in the next call of this file or change.php
echo "<p>";
echo "<button id='monsettingaddrow' class='fg-button ui-state-default ui-corner-all'>Add Row</button>";

5
xCAT-UI/monitor/rmc_event_define.php
View File

@ -19,8 +19,9 @@ displayTips(array(
"Use \"mkcondition\" and \"mkresponse\" to create new conditions and new responses",
"Select the condition, and response to create condition/response association"
));
echo "<div>";
//TODO:one "text input" widget should be put here, to allow the user to input noderange
displayOSITree();
displayCondResp();
echo "</div>";
?>