Add ICONS to a table when the cell is a string

[gballanti]

Hi all,

i'm trying to visualize an icon on a table when a specific IP address is found. To do  that i have used the code  and the CSS from Splunk dashboard example app.

The table where i have to use the code is like this

Time                                    DNS     Count  Site 
-------------------                -------    -----       ----- 
2021-04-16 12:25:25 8.8.8.8 10          Site One 
2021-04-16 12:25:25 1.1.1.1 20          Site Two 
2021-04-16 12:25:25 8.8.4.4 30          Site Three 

code and css as below

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return _(['DNS']).contains(cell.field);
},
render: function($td, cell) {
var ip_dns = cell.value;
// Compute the icon base on the field value
var icon;
if(ip_dns != '8.8.8.8' || (ip_dns != '8.8.4.4') {
icon = 'alert-circle';
} else {
icon = 'check';
}
// Create the icon element and add it to the table cell
$td.addClass('icon-inline numeric').html(_.template('<%- text %> <i class="icon-<%-icon%>"></i>', {
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());
});
});

------

/* 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;
}
/* 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;
}
/* Dark Theme */
td.icon i.dark {
text-shadow: none;
}

/* Row Coloring */
 #highlight tr.dark td {
background-color: #5BA383 !important;
}
#highlight tr.range-elevated.dark td {
background-color: #EC9960 !important;
}
#highlight tr.range-severe.dark td {
background-color: #AF575A !important;
}
#highlight .table .dark td {
border-top: 1px solid #000000;
color: #F2F4F5;
}

When i use as cell.field the column Count no problem, instead using the column DNS the icon is not set.

I guess the problem comes from the field type, numeric / not numeric. How can i set icon checking the DNS field (not numeric) ?

thanks

[gballanti]

Solved ... just use double quote in the if check 

from --> if(ip_dns != '8.8.8.8' || (ip_dns != '8.8.4.4')

to --> if(ip_dns != "8.8.8.8" || (ip_dns != "8.8.4.4")