Three table works just fine for me (refer to attached screenshot).
- You need to ensure table id is the same in Simple XML and JS i.e. table1, table2 and table2.
- After editing your Simple XML dashboard, you need to refresh your Dashboard for the first time.
- Also make sure you bump Splunk server and clear Browser history.
- Finally, use Browser inspect tool to ensure there are no JavaScript errors in Console logs.
Simple XML - Notice Table IDs table1, table2 and table3
<dashboard script="table_icons_rangemap.js" stylesheet="table_decorations.css">
<label>Table Icon Rangemap</label>
<description>Use Javascript and CSS in tables to convert rangemap results into icons.</description>
<row>
<panel>
<table id="table1">
<title>Render Icons based on rangemap result</title>
<search>
<query>index=_internal
| stats count by sourcetype,source
| rangemap field=count low=0-100 elevated=101-1000 default=severe</query>
<earliest>-1h</earliest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel>
<table id="table2">
<title>Render Icons based on rangemap result</title>
<search>
<query>index=_internal
| stats count by sourcetype,source
| rangemap field=count low=0-100 elevated=101-1000 default=severe</query>
<earliest>-1h</earliest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel>
<table id="table3">
<title>Render Icons based on rangemap result</title>
<search>
<query>index=_internal
| stats count by sourcetype,source
| rangemap field=count low=0-100 elevated=101-1000 default=severe</query>
<earliest>-1h</earliest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</dashboard>
JavaScript - Separate invocation for table1, table2 and table3
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Translations from rangemap results to CSS class
var ICONS = {
severe: 'alert-circle',
elevated: 'alert',
low: 'check-circle'
};
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Only use the cell renderer for the range field
return cell.field === 'range';
},
render: function($td, cell) {
var icon = 'question';
// Fetch the icon for the value
if (ICONS.hasOwnProperty(cell.value)) {
icon = ICONS[cell.value];
}
// Create the icon element and add it to the table cell
$td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- range %>" title="<%- range %>"></i>', {
icon: icon,
range: cell.value
}));
}
});
mvc.Components.get('table1').getVisualization(function(tableView){
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});
mvc.Components.get('table2').getVisualization(function(tableView){
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});
mvc.Components.get('table3').getVisualization(function(tableView){
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});
});
No Changes to CSS provided in Simple XML Examples for Table Icon Set(Rangemap) example.
If you still face the issue you might have to post XML and JS code snippet from your use case. Please make sure while posting the code you use Code button (101010).
