Hi guys, I'm trying to show a table where in one colums there will be some icons based on the cell value. I used the examples provvided from the Splunk dashboard example App.
the problem I'm experiencing is that if i load the dashboard the table is rendered with the string , but if i switch to edit mode then the table is rendered correctly with the icons. Reloading the page will render the table without icons and anytime i go trough the edit mode the table renders with icons.
<dashboard version="1.1" stylesheet="css/test.css" script="js/test.js">
<label>test</label>
<row>
<panel>
<table id="table1">
<search>
<query>| inputcsv thermal_structure.csv
| eval range = case(status=="ok","low",status=="warning","elevated",status=="no","severe")
| table zone,range</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
</dashboard> /* Custom Icons */
td.icon {
text-align: center;
}
td.icon i {
font-size: 25px;
text-shadow: 1px 1px #aaa;
}
td.icon .severe {
color: red;
}
td.icon .elevated {
color: orangered;
}
td.icon .low {
color: #006400;
}
/* Row Coloring */
#highlight tr td {
background-color: #c1ffc3 !important;
}
#highlight tr.range-elevated td {
background-color: #ffc57a !important;
}
#highlight tr.range-severe td {
background-color: #d59392 !important;
}
#highlight .table td {
border-top: 1px solid #fff;
}
#highlight td.range-severe, td.range-elevated {
font-weight: bold;
}
.icon-inline i {
font-size: 18px;
margin-left: 5px;
}
.icon-inline i.icon-alert-circle {
color: #ef392c;
}
.icon-inline i.icon-alert {
color: #ff9c1a;
}
.icon-inline i.icon-check {
color: #5fff5e;
}
/* Dark Theme */
td.icon i.dark {
text-shadow: none;
}
/* Row Coloring */
#highlight tr.dark td {
background-color: #5BA383 !important;
}
#highlight tr.range-elevated.dark td {
background-color: #EC9960 !important;
}
#highlight tr.range-severe.dark td {
background-color: #AF575A !important;
}
#highlight .table .dark td {
border-top: 1px solid #000000;
color: #F2F4F5;
} requirejs([
'../app/simple_xml_examples/libs/underscore-1.6.0-umd-min',
'../app/simple_xml_examples/theme_utils',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, themeUtils, 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';
var isDarkTheme = themeUtils.getCurrentTheme() === 'dark';
// Fetch the icon for the value
// eslint-disable-next-line no-prototype-builtins
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 %> <%- isDarkTheme %>" title="<%- range %>"></i>', {
icon: icon,
range: cell.value,
isDarkTheme: isDarkTheme ? 'dark' : ''
}));
}
});
mvc.Components.get('table1').getVisualization(function(tableView) {
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});
});
... View more