Hi all,
I've succeeded in making a table with custom_table_row_expansion,js which expand every rows publishing the child events of a correlated father.
Now I'm tryingto apply table_cell_highlighting to colour the child new event with a color for the dalay.
I've combined table_cell_highlighting.js in the dashboard. In the custom_table_row_expansion.js I set the id of the new table highlight, I made a style css inside the dashboard in the hidden panel:
<panel depends="$alwaysHideCSS$">
<html>
<style>
.table>thead>tr>th {
color: #0066ff !important;
text-shadow: none;
font-family : Verdana !important;
}
.table>thead>tr>th:hover {
/*background-image: linear-gradient(to bottom, #666, #444) !important;*/
color: #000000 !important;
text-shadow: none;
}
.table .sorts a {
text-decoration: none;
font-weight: bold;
font-size: 12px ;
color: #002966;
}
.table>tbody>tr {
width: 20%;
color: #006699;
font-family : Verdana !important;
}
td{
font-size: 11px !important;
font-family : Verdana !important;
}
#highlight tr.range-elevated td {
background-color: #000000 !important;
color: #ffffff;
}
#highlight tr.range-severe td {
background-color: #ff0000 !important;
color: #ffffff;
}
#highlight .table td {
border-top: 1px solid #fff;
}
#highlight td.range-severe, td.range-elevated {
font-weight: bold;
}
</style>
</html>
</panel>
and the javascript is this one:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Row Coloring by String Comparision of Numeric Time Value in HH:MM:SS
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for DELAY field
return _(['DELAY']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = cell.value;
// Apply interpretation for DELAY field
if (cell.field === 'DELAY') {
if (value >= "02:00:00") {
$td.addClass('range-cell').addClass('range-severe');
}
if (value < "02:00:00" && value > "01:30:00") {
$td.addClass('range-cell').addClass('range-elevated');
}
}
// Update the cell content with string DELAY value HH:MM:SS
$td.text(value).addClass('string');
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
But nothing happened when I expand the rows.
Any suggestion ?
Fabrizio