Hello,
I working on adding inline custom icons to a table in my dashboard using the code from Splunk 6.x Dashboard Examples and a blog post titled Custom Icons in Splunk 6 Tables.. to no avail. Unfortunately, my icons are not displaying at all. Any pointer will be greatly appreciated. My code is listed below:
Search:
index = test sourcetype = test_test| dedup entityType| convert num(test.Good) AS Good num(test.Critical) AS Critical num(test.Unknown) AS Unknown num(test.Warning) AS Warning | eval Total = Warning + Good + Unknown + Critical | table entityType Total Warning Critical | rename entityType AS Entity
Javascript:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'Warning';
},
render: function($td, cell) {
var warn = cell.value;
// Compute the icon base on the field value
var icon;
if(warn!= 3000) {
icon = 'Testcon';
}
// Create the icon element and add it to the table cell
$td.addClass('icon-inline numeric').html(_.template('<%- text %>', {
icon: icon,
text: cell.value
}));
}
});
mvc.Components.get('table1').getVisualization(function(tableView){
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new CustomIconRenderer());
});
});
CSS:
/* 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;
}
.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;
}
.icon-inline i.myclass{
width: 20px;
height: 20px;
margin-left: auto;
margin-right: auto;
}
.icon-inline i.Testcon {
background-image: url('http://cdn1.iconfinder.com/data/icons/function_icon_set/circle_red.png') !important;
}
↧