“Daddy. DADDY! We’re out of Sriracha. Does Costco sell Sriracha? Can you go get some before you start working today?”
That was my five-year-old son at breakfast this morning, after he turned the Sriracha bottle upside down and banged the heck out of the bottom of the rooster-adorned bottle with his tiny fist, trying to get the last bits of the dark-red chili sauce deposited onto his scrambled eggs.
While I’m certain we will solve the 2014 Sriracha Crisis at the Brodsky household, the whole episode reminded me of a question (stick with me, you’ll see why) that a Splunk customer asked me a few months ago, which went something like this:
“When creating a dashboard in Splunk 6, I wanted to add my own pictures or use my own icons in tables to determine status. If I use the ones in the Splunk 6 Dashboard Examples app, everything works fine. But when I use my own images Splunk can’t find them. How can I add my own status icons to Splunk tables?”
With some help from fellow Splunker Nick Filippi, here’s one way to do it. The best way to understand this is to start with the Splunk 6 Dashboard Examples app, which can be found on apps.splunk.com. The app is chock-full of great examples to help you make dynamic and compelling dashboards. One of the examples in the app, “Table Icon Set (Rangemap)” shows how you can use the “rangemap” command in your Splunk search to define ranges, and then map a set of icons to those ranges. But the example doesn’t tell you how you can modify the standard icons. Out of the box, these icons look like the ones on the far right, below:
The end goal for this project is for the icons in the table to look like this:
Aha! Look at what’s happened to my “severe” icon – it’s a Sriracha bottle! Yes, here we have cleverly replaced the “severe” range with a Sriracha bottle, the “elevated” range with an delicious orange cupcake, the “attention” command with a menacing yellow dinosaur, and the “low” range with a cute pink pony. Quite whimsical, don’tcha think?
So how do we do it? Well, we are going to be modifying some .css on your Splunk search head to include the new icons and we’ll create a new CSS class to leverage these icons as background images in an empty cell. We also need to modify the javascript that re-renders the table and adds in the icons. You can follow along by modifying the example on your Splunk instance found at:
http://<splunksh:port>/en-US/app/simple_xml_examples/custom_table_icon_set_rangemap
…where splunksh:port is your Splunk search head hostname and port.
Set Up
- Go get some images to use as custom icons. In this case, I grabbed four of them from extremely cheesy clipart sources using a Google Images search. Size does not matter because we will resize the icons in the CSS.
- The files should be in .png or .jpeg format. Place these files in <SPLUNKHOME>/etc/apps/simple_xml_examples/appserver/static/images. If you were doing this for a custom app, change the app directory appropriately. If the “images” directory does not exist, create it. Mine looks like this:
- Now, we need to modify our dashboard. The best thing to do so we don’t break the Examples app completely is to copy the .css and the .js provided in the directory <SPLUNKHOME>/etc/apps/simple_xml_examples/appserver/static into new files. Copy the table_icons_rangemap.js and the table_decorations.css to customtable_icons_rangemap.js and customtable_decorations.css, respectively.
- Modify the XML underlying the dashboard to pull in the new .css and .js, like so (note the changes to “script” and “stylesheet” in the top line, in the graphic below.)
Modify the Javascript
- Modify the copy of the file customtable_icon_rangemap.js that you created in step 3 above. Sections in BLUE below are the modified sections. Note that “attention” is an additional range not included in the original example from the Examples app – if you want to use it you need to add it to the “rangemap” section of your search, like this:
… | rangemap field=count low=0-50 attention=51-100 elevated=101-1000 default=severe
customtable_icon_rangemap.js
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: 'hotsauce',
attention: 'yellowdino',
elevated: 'orangecupcake',
low: 'pinkpony'
};
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('<div class="myicon <%- icon%> title="<%- range %>"></div>', {
icon: icon,
range: cell.value
}));
}
});
mvc.Components.get('table1').getVisualization(function(tableView){
// Register custom cell renderer
tableView.table.addCellRenderer(new RangeMapIconRenderer());
// Force the table to re-render
tableView.table.render();
});
});
Modify the CSS
- Now modify the copy of the .css file, customtable_decorations.css, to add the new icons and the class “myicon.” Sections in BLUE below are new. (You should change the names of the files below to match the images and filenames that you have chosen.)
customtable_decorations.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 .attention {
color: yellow;
}
td.icon .hotsauce {
background-image: url('images/hotsauce.jpeg') !important;
background-size:20px 20px;
}
td.icon .pinkpony {
background-image: url('images/pinkpony.png') !important;
background-size:20px 20px;
}
td.icon .orangecupcake {
background-image: url('images/orangecupcake.jpeg') !important;
background-size:20px 20px;
}
td.icon .yellowdino {
background-image: url('images/yellowdino.jpeg') !important;
background-size:20px 20px;
}
td.icon .myicon {
width: 20px;
height: 20px;
margin-left: auto;
margin-right: auto
}
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;
}
View the Results
- Restart the Splunk web server (./splunk restart splunkweb on a *nix system).
- Clear the Javascript cache on your browser.
- Navigate to the examples page listed above. http://<splunksh:port>/en-US/app/simple_xml_examples/custom_table_icon_set_rangemap
- Enjoy your custom icons!
And that’s it. Did you find this useful? Have you found some icons to use in Splunk tables that are cheesier than mine? Or just want to share your favorite Sriracha recipe? The floor is yours, below.