Dashboards & Visualizations

Add ICONS to a table when the cell is a string

gballanti
Explorer

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

 

 

 

Labels (1)
0 Karma

gballanti
Explorer

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")

 

 

Tags (1)
0 Karma
Get Updates on the Splunk Community!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...