Splunk Enterprise

Required help in applying color on the icons

DataOrg
Builder

Hi ALl,

I need help in applying color on icons of status, when i use only icons its works with color on the Javascript but if i added the text value with color its not working. @kamlesh_vaghela  could you pls help

I want to display results with text and icon together in a same column

Output:

Information (ICON)

Error(ICON)

Javascript:

 

 

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], 

function(_, $, mvc, TableView)
{
    //Translations from rangemap results to CSS class
    var ICONS = {
        Critical: 'check-circle',
        Error: 'alert',
        Warning: 'check-circle',
	Debug: 'check-circle',
	Information: 'check-circle',
	Trace: 'check-circle',
	None: 'check-circle',
	
    };

    var CustomIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            //Only use the cell renderer for the range field
            return _(['Event Level']).contains(cell.field);
        },
        render: function($td, cell) {
            var icon = 'question';
            //Fetch the icon for the value
            if (ICONS.hasOwnProperty(cell.value)) {
                icon = ICONS[cell.value];
            }
            //Create the icon element and add it to the table cell
            $td.addClass('icon').html(_.template('<%- text %> <i class="icon-<%-icon%>"></i>', {
                icon: icon,
                text: cell.value
				
            }));
        }
    });
   mvc.Components.get('tbl1').getVisualization(function(tableView)
	{
        //Register custom cell renderer, the table will re-render automatically
        tableView.addCellRenderer(new CustomIconRenderer());
    });
});

 

 

 

CSS:

 

 

/* Custom Icons */
          td.icon {
              text-align: center;
          }
          td.icon i {
              font-size: 25px;
              text-shadow: 1px 1px #aaa;
          }
          td.icon .Critical {
              color: #F70000;
          }
          td.icon .Error {
              color: #EEFA33;
          }
          td.icon .Warning {
              color: #006400;
          }
          td.icon .Debug {
              color: #006400;
          }
          td.icon .Information {
              color: #006400;
          }
           td.icon .Trace {
              color: #006400;
          }
           td.icon .None {
              color: #006400;
          }

 

 

 

Labels (1)
Tags (3)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hello @DataOrg 

You missed to add text in style also. Can you please update your code with below one?

 

//Create the icon element and add it to the table cell
            $td.addClass('icon').html(_.template('<%- text %> <i class="icon-<%-icon%> <%- text %>"></i>', {
                icon: icon,
                text: cell.value
            }));

 

Thanks
Kamlesh Vaghela

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hello @DataOrg 

You missed to add text in style also. Can you please update your code with below one?

 

//Create the icon element and add it to the table cell
            $td.addClass('icon').html(_.template('<%- text %> <i class="icon-<%-icon%> <%- text %>"></i>', {
                icon: icon,
                text: cell.value
            }));

 

Thanks
Kamlesh Vaghela

DataOrg
Builder

@kamlesh_vaghela  thanks, it worked

0 Karma
Get Updates on the Splunk Community!

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

March Community Office Hours Security Series Uncovered!

Hello Splunk Community! In March, Splunk Community Office Hours spotlighted our fabulous Splunk Threat ...

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

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars in April. This post ...