Hello All,
I am working on splunk dashboard with icons. I have two Columns one column is name of the server and other is status. if server is UP i have to use "green circle check" , if server is down "red cross". I am able to get icons with js file but server column is coming as blank.
Hi
You should install Splunk Dashboard Examples App
available on Splunkbase which has sample examples for Table Icon Set inline and rangemap under table elements.
Thank you very much for your support.I have already gone though it and created dashboard but its not returning coorect output.
Hi Darshana,
Share your javascript code and panel xml
below is my XML.
Icon Clone
<html>
<head>
<style>
.up {
background-image: url('ok-icon.png') !important;
background-repeat: no-repeat !important;
background-size: 20px 20px; !important;
}
.down {
background-image: url('') !important;
background-repeat: no-repeat !important;
background-size: 20px 20px; !important;
}
.unknown {
background-image: url('Lol_question_mark.png') !important;
background-repeat: no-repeat !important;
background-size: 20px 20px; !important;
}
.warn {
background-image: url('img_83533.png') !important;
background-repeat: no-repeat !important;
background-size: 20px 20px; !important;
}
</style>
</head>
</html>
<panel>
<table id="sample">
<search>
<query>index="****" sourcetype = "****"|table server,Status</query>
<earliest>-6d@w1</earliest>
<latest>-1d@w6</latest>
</search>
<option name="count">10</option>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
below is the icon.js
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return _(['Status']).contains(cell.field);
},
render: function($td, cell) {
var value = cell.value;
if(value=="UP" )
{
$td.html("<div class='up'> </div>")
}
else if(value=="DOWN")
{
$td.html("<div class='down'> </div>")
}
else if(value=="UNKNOWN" || value=="N/A")
{
$td.html("<div class='unknown'> </div>")
}
else if(value=="WARN")
{
$td.html("<div class='warn'> </div>")
}
}
});
var sh = mvc.Components.get("sample");
if(typeof(sh)!="undefined") {
sh.getVisualization(function(tableView) {
// Add custom cell renderer and force re-render
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.table.render();
});
}
});