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();
});
}
});
... View more