Enable scrollable datatable header.
git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@10349 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
This commit is contained in:
parent
7a5a296e6c
commit
752cdb1dda
@ -42,6 +42,7 @@
|
||||
color: #0078AE;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
#logdialog input{
|
||||
@ -457,37 +458,26 @@ legend {
|
||||
|
||||
/*** Table ***/
|
||||
.datatable {
|
||||
width: 100%;
|
||||
border-width: 1px;
|
||||
border: solid 1px #BDBDBD;
|
||||
border-spacing: 0px;
|
||||
border-style: solid;
|
||||
border-color: #BDBDBD;
|
||||
border-collapse: collapse;
|
||||
display: inline-table;
|
||||
}
|
||||
|
||||
.datatable th {
|
||||
.datatable th,td {
|
||||
font: 12px verdana, arial, helvetica, sans-serif;
|
||||
color: #424242;
|
||||
padding: 10px;
|
||||
background-color: #F2F2F2;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #BDBDBD;
|
||||
padding: 5px 0px;
|
||||
white-space: nowrap; /* Do not use word wrap */
|
||||
border: solid 1px #BDBDBD;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.datatable td {
|
||||
font: 12px verdana, arial, helvetica, sans-serif;
|
||||
color: #424242;
|
||||
padding: 6px 12px;
|
||||
white-space: nowrap; /* Do not use word wrap */
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #BDBDBD;
|
||||
vertical-align: middle;
|
||||
.datatable th {
|
||||
font: bold 12px verdana, arial, helvetica, sans-serif;
|
||||
background-color: #F2F2F2;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
/*** Row color (odd) ***/
|
||||
@ -540,6 +530,10 @@ legend {
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.sorting_asc,.sorting_desc,.sorting {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/*--------------- jQuery context menu ---------------*/
|
||||
.context-menu-theme-vista {
|
||||
background: #FAFAFA url(../images/contextmenu/context-menu-bg.gif) repeat-y left top
|
||||
@ -841,4 +835,13 @@ table a:hover {
|
||||
font: normal bold 15px verdana, arial, helvetica, sans-serif;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*--------------- jqPlot Pie legend ---------------*/
|
||||
td.jqplot-table-legend {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
td.jqplot-table-legend > div {
|
||||
border-width: 0px;
|
||||
}
|
@ -132,7 +132,7 @@ bladePlugin.prototype.loadProvisionPage = function(tabId) {
|
||||
var provForm = $('<div class="form"></div>');
|
||||
|
||||
// Create info bar
|
||||
var infoBar = createInfoBar('Provision a blade');
|
||||
var infoBar = createInfoBar('Provision a blade. This will install an operating system onto the blade.');
|
||||
provForm.append(infoBar);
|
||||
|
||||
// Append to provision tab
|
||||
|
@ -133,7 +133,7 @@ ipmiPlugin.prototype.loadProvisionPage = function(tabId) {
|
||||
var provForm = $('<div class="form"></div>');
|
||||
|
||||
// Create info bar
|
||||
var infoBar = createInfoBar('Provision an iDataPlex.');
|
||||
var infoBar = createInfoBar('Provision an iDataPlex. This will install an operating system onto the iDataPlex.');
|
||||
provForm.append(infoBar);
|
||||
|
||||
// Append to provision tab
|
||||
|
@ -103,12 +103,12 @@ 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 style="border: 0px;"><div id="ospie" class="summarypie"></div></td>' +
|
||||
'<td style="border: 0px;"><div id="archpie" class="summarypie"></div></td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td><div id="provmethodpie" class="summarypie"></td>' +
|
||||
'<td><div id="nodetypepie" class="summarypie"></div></td>' +
|
||||
'<td style="border: 0px;"><div id="provmethodpie" class="summarypie"></td>' +
|
||||
'<td style="border: 0px;"><div id="nodetypepie" class="summarypie"></div></td>' +
|
||||
'</tr></table>';
|
||||
$('#nodes').append(summaryTable);
|
||||
|
||||
@ -489,6 +489,9 @@ function loadSubgroups(data) {
|
||||
* @return Nothing
|
||||
*/
|
||||
function loadNodes(data) {
|
||||
// Clear the tab before inserting the table
|
||||
$('#nodesTab').children().remove();
|
||||
|
||||
// Data returned
|
||||
var rsp = data.rsp;
|
||||
// Group name
|
||||
@ -548,7 +551,7 @@ function loadNodes(data) {
|
||||
var sorted = new Array();
|
||||
for (var key in headers) {
|
||||
// Do not put comments and status in twice
|
||||
if (key != 'usercomment' && key != 'status' && key.indexOf('statustime') < 0) {
|
||||
if (key != 'usercomment' && key != 'status' && key.indexOf('status') < 0) {
|
||||
sorted.push(key);
|
||||
}
|
||||
}
|
||||
@ -631,7 +634,7 @@ function loadNodes(data) {
|
||||
var key = sorted[i];
|
||||
|
||||
// Do not put comments and status in twice
|
||||
if (key != 'usercomment' && key != 'status' && key.indexOf('statustime') < 0) {
|
||||
if (key != 'usercomment' && key != 'status' && key.indexOf('status') < 0) {
|
||||
var val = attrs[node][key];
|
||||
if (val) {
|
||||
row.push(val);
|
||||
@ -844,7 +847,12 @@ function loadNodes(data) {
|
||||
// Turn table into a datatable
|
||||
var nodesDatatable = $('#' + nodesTableId).dataTable({
|
||||
'iDisplayLength': 50,
|
||||
'bLengthChange': false
|
||||
'bLengthChange': false,
|
||||
"sScrollX": "100%",
|
||||
"bAutoWidth": true,
|
||||
"fnInitComplete": function() {
|
||||
adjustColumnSize();
|
||||
}
|
||||
});
|
||||
|
||||
// Filter table when enter key is pressed
|
||||
@ -874,19 +882,20 @@ function loadNodes(data) {
|
||||
var cols = $('#' + nodesTableId + ' thead tr th').click(function() {
|
||||
getNodeAttrs(group);
|
||||
});
|
||||
var pingCol = $('#' + nodesTableId + ' thead tr th').eq(2);
|
||||
var powerCol = $('#' + nodesTableId + ' thead tr th').eq(3);
|
||||
var monitorCol = $('#' + nodesTableId + ' thead tr th').eq(4);
|
||||
var commentCol = $('#' + nodesTableId + ' thead tr th').eq(5);
|
||||
var checkboxCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(0)');
|
||||
var pingCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(2)');
|
||||
var powerCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(3)');
|
||||
var monitorCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(4)');
|
||||
var commentCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(5)');
|
||||
checkboxCol.unbind('click');
|
||||
pingCol.unbind('click');
|
||||
powerCol.unbind('click');
|
||||
monitorCol.unbind('click');
|
||||
commentCol.unbind('click');
|
||||
|
||||
|
||||
// Create enough space for loader to be displayed
|
||||
// Center align power, ping, and comments
|
||||
$('#' + nodesTableId + ' td:nth-child(3),td:nth-child(4),td:nth-child(5)').css({
|
||||
'min-width': '65px',
|
||||
'text-align': 'center'
|
||||
});
|
||||
|
||||
@ -1006,7 +1015,7 @@ function loadNodes(data) {
|
||||
});
|
||||
} else {
|
||||
// Hide status loader
|
||||
var statCol = $('#' + nodesTableId + ' thead tr th').eq(2);
|
||||
var statCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(2)');
|
||||
statCol.find('img').hide();
|
||||
}
|
||||
|
||||
@ -1271,7 +1280,6 @@ function addNodes2Table(data) {
|
||||
/**
|
||||
* Enable editable columns
|
||||
*/
|
||||
alert('I am here');
|
||||
// Do not make 1st, 2nd, 3rd, 4th, 5th, or 6th 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),td:nth-child(6))').editable(
|
||||
function(value, settings) {
|
||||
@ -1337,7 +1345,7 @@ function addNodes2Table(data) {
|
||||
});
|
||||
} else {
|
||||
// Hide status loader
|
||||
var statCol = $('#' + nodesTableId + ' thead tr th').eq(2);
|
||||
var statCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(2)');
|
||||
statCol.find('img').hide();
|
||||
}
|
||||
|
||||
@ -1373,8 +1381,9 @@ function loadGangliaStatus(data) {
|
||||
}
|
||||
|
||||
// Hide Ganglia loader
|
||||
var gangliaCol = $('#' + nodesTableId + ' thead tr th').eq(4);
|
||||
var gangliaCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(4)');
|
||||
gangliaCol.find('img').hide();
|
||||
adjustColumnSize();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1386,7 +1395,7 @@ function loadGangliaStatus(data) {
|
||||
*/
|
||||
function refreshGangliaStatus(group) {
|
||||
// Show ganglia loader
|
||||
var gangliaCol = $('#' + nodesTableId + ' thead tr th').eq(4);
|
||||
var gangliaCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(4)');
|
||||
gangliaCol.find('img').show();
|
||||
|
||||
// Get power status for nodes shown
|
||||
@ -1433,8 +1442,9 @@ function loadPowerStatus(data) {
|
||||
}
|
||||
|
||||
// Hide power loader
|
||||
var powerCol = $('#' + nodesTableId + ' thead tr th').eq(3);
|
||||
var powerCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(3)');
|
||||
powerCol.find('img').hide();
|
||||
adjustColumnSize();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1448,7 +1458,7 @@ function loadPowerStatus(data) {
|
||||
*/
|
||||
function refreshPowerStatus(group, tableId) {
|
||||
// Show power loader
|
||||
var powerCol = $('#' + tableId + ' thead tr th').eq(3);
|
||||
var powerCol = $('#' + tableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(3)');
|
||||
powerCol.find('img').show();
|
||||
|
||||
// Get power status for nodes shown
|
||||
@ -1497,8 +1507,9 @@ function loadNodeStatus(data) {
|
||||
}
|
||||
|
||||
// Hide status loader
|
||||
var statCol = $('#' + nodesTableId + ' thead tr th').eq(2);
|
||||
var statCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(2)');
|
||||
statCol.find('img').hide();
|
||||
adjustColumnSize();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -3409,4 +3420,15 @@ function provisionStopCheck(){
|
||||
else{
|
||||
provisionClock = setTimeout('provisionStopCheck()', 5000);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjust datatable column size
|
||||
*/
|
||||
function adjustColumnSize() {
|
||||
var cols = $('#' + nodesTableId).find('tbody tr:eq(0) td');
|
||||
for (var i in cols) {
|
||||
var header = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th').eq(i);
|
||||
header.css('width', cols.eq(i).outerWidth());
|
||||
}
|
||||
}
|
@ -28,7 +28,7 @@ function loadPage(){
|
||||
'<body>
|
||||
<div id="header">
|
||||
<ul>
|
||||
<li><img src="images/logo.gif" height="100%"/></li>
|
||||
<li><img src="images/logo.gif" height="100%" style="margin-right: 60px;"/></li>
|
||||
<li><a href="index.php" class="top_link">Nodes</a></li>
|
||||
<li><a href="configure.php" class="top_link">Configure</a></li>
|
||||
<li><a href="provision.php" class="top_link">Provision</a></li>
|
||||
|
Loading…
Reference in New Issue
Block a user