@hrs2019 If you want table with icon (built-in or custom), you should try Splunk Dashboard Examples app which has Table Icon Set (Rangemap) specifically for such use case. You can also try out the following blogs: https://www.splunk.com/en_us/blog/tips-and-tricks/custom-icons-in-splunk-6-tables.html
You can also add your own glow animation as per your question:
Following is a run anywhere example.
Simple XML Dashboard:
<dashboard script="table_glowing_icons.js" theme="dark">
<label>Table with Glowing Icons</label>
<row>
<panel>
<html>
<style>
td.icon {
text-align: center;
}
td.icon i {
font-size: 25px;
}
td.icon .severe {
color: red;
}
td.icon .elevated {
color: orangered;
}
td.icon .low {
color: #006400;
}
td.icon i.severe::before,
td.icon i.elevated::before{
-webkit-animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
0% {opacity: 0.1;font-size:medium;text-shadow: 0 0 3px #DC4E41;}
25% {opacity: 0.7;font-size:large;text-shadow: 0 0 10px #DC4E41;}
75% {opacity: 1;font-size:x-large;text-shadow: 0 0 30px #DC4E41;}
100% {opacity: 0.7;font-size:large;text-shadow: 0 0 10px #DC4E41;}
}
.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;
}
</style>
</html>
<table id="table1">
<search>
<query>| makeresults
| eval ApName="CCP,SSD,FF,DDD,RT","Area CP Name"="test"
| makemv ApName delim=","
| mvexpand ApName
| streamstats count as sno
| eval CLevel=case(sno%2==0, "low",sno%3==0, "severe",true(),"elevated")
| table ApName "Area CP Name" CLevel</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>
Required JS file: table_glowing_icons.js
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Only use the cell renderer for the CLevel field
return cell.field === 'CLevel';
},
render: function($td, cell) {
// Create the icon element and add it to the table cell
$td.addClass('icon').html(_.template('<i class="icon-alert-circle <%- CLevel %>" title="<%- CLevel %>"></i>', {
CLevel: cell.value,
}));
}
});
mvc.Components.get('table1').getVisualization(function(tableView){
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});
});
PS: If you dont want JS and are fine without using Dark Theme, you can try out Unicode Icon in Table like
https://emojipedia.org/large-orange-circle/
https://emojipedia.org/large-red-circle/
https://emojipedia.org/large-green-circle/
Refer to answers:
https://answers.splunk.com/answers/681268/one-rangemap-column-for-multiple-values.html
https://answers.splunk.com/answers/755100/how-to-add-icons-for-the-multiple-fields-in-splunk.html
... View more