To start off, I know that there are threads that already answer this, but those threads existed a long time ago. I have a question with the code that I will provide in the post. For some reason, when I try to apply this JS extension to the dashboard I have, it will not always work. If I refresh the page or go into edit mode... the rows don't stay highlighted. I'm wondering what would cause this since I thought the table would pre-render each time the page is refreshed or goes into and out of edit mode.
Here's the code for the JS extension...
require([
"underscore",
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/tableview",
"splunkjs/mvc/simplexml/ready!",
], function (_, $, mvc, TableView) {
// row Coloring by String Comparision of check field and True
let CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
// enable this custom cell renderer for check field
return _(["check"]).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 check field
if (cell.field === "check") {
if (value === "True") {
$td.addClass("range-cell").addClass("range-severe");
}
}
// update the cell content with string value
$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());
});
});
The CSS is here...
/* Row Coloring */
#highlight tr.range-severe td {
background-color: #D93F3C !important;
}
#highlight .table td {
border-top: 1px solid #fff;
}
#highlight td.range-severe {
font-weight: bold;
}
And finally the XML code to create the dashboard to replicate the issue. I should note that I am on Safari.
<dashboard stylesheet="js_functions:table_row_highlight.css" script="js_functions:table_row_highlight.js">
<label>JS Row Highlight test</label>
<row>
<panel>
<table id="highlight">
<search>
<query>| makeresults
| eval id=1
| eval check="True,False,True,False,False,True,False,True,False,True,False,False,True"
| eval check=split(check,",")
| mvexpand check
| accum id
| eval alert_name="Alert ".id</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
</dashboard>
... View more