Thanks to @niketn I can now click on a table row, and get the whole row highlighted as needed. I am know trying to keep the row highlighted even after panel has been reloaded. Step 1: When clicking on a row, the selected row is highlighted (Working OK) Step 2: Click on a button that reload the panel (OK) Step 3: Selected row remains highlighted even if the panel is reloaded (No clue how for now) Here is a working example (except step 3): Dashboard: <dashboard script="table_highlight_row_on_cell_click.js,tokenlinks.js">
<label>Table Clicked Row Highlight</label>
<init>
<set token="update_list_tok">true</set>
<unset token="update_table_tok"></unset>
</init>
<row>
<panel>
<html>
<style>
#highlight table tr.highlighted{
border-style: solid !important;
border-color: skyblue !important;
background: orange !important;
}
#highlight table tr.highlighted td{
background: orange !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
</style>
</html>
<table id="highlight">
<search>
<query>index=_internal sourcetype=splunkd
| eval dummy="$update_list_tok$"
| fields - dummy
| stats count by log_level</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">100</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">cell</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
<drilldown>
<set token="tokValue2">$click.value2$</set>
</drilldown>
</table>
</panel>
</row>
<row>
<panel>
<html>
<a data-set-token="update_table_tok" data-value="true">Click me</a>
</html>
</panel>
</row>
<row>
<panel depends="$null_tok$">
<table>
<search>
<query>| makeresults
| eval dummy="$update_table_tok$"
| fields - dummy</query>
<earliest>0</earliest>
<latest></latest>
<done>
<eval token="update_list_tok">random()</eval>
</done>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</dashboard> Here is table_highlight_row_on_cell_click.js: require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Color Clicked Row of table with id #highlight
$(document).on("click","#highlight",function(){
// Apply class of the cells to the parent row in order to color the whole row
$("#highlight table").find('td.highlighted').each(function() {
$("#highlight table tr").removeClass("highlighted");
$(this).parents('tr').addClass(this.className);
});
});
}) And tokenlinks.js (from Simple Dashboards Examples: require(['jquery', 'underscore', 'splunkjs/mvc', 'util/console'], function($, _, mvc, console) {
function setToken(name, value) {
console.log('Setting Token %o=%o', name, value);
var defaultTokenModel = mvc.Components.get('default');
if (defaultTokenModel) {
defaultTokenModel.set(name, value);
}
var submittedTokenModel = mvc.Components.get('submitted');
if (submittedTokenModel) {
submittedTokenModel.set(name, value);
}
}
$('.dashboard-body').on('click', '[data-set-token],[data-unset-token],[data-token-json]', function(e) {
e.preventDefault();
var target = $(e.currentTarget);
var setTokenName = target.data('set-token');
if (setTokenName) {
setToken(setTokenName, target.data('value'));
}
var unsetTokenName = target.data('unset-token');
if (unsetTokenName) {
setToken(unsetTokenName, undefined);
}
var tokenJson = target.data('token-json');
if (tokenJson) {
try {
if (_.isObject(tokenJson)) {
_(tokenJson).each(function(value, key) {
if (value == null) {
// Unset the token
setToken(key, undefined);
} else {
setToken(key, value);
}
});
}
} catch (e) {
console.warn('Cannot parse token JSON: ', e);
}
}
});
}); Any idea is welcome! 🙏
... View more