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!

Fall Into Learning with New Splunk Education Courses

Every month, Splunk Education releases new courses to help you branch out, strengthen your data science roots, ...

Super Optimize your Splunk Stats Searches: Unlocking the Power of tstats, TERM, and ...

By Martin Hettervik, Senior Consultant and Team Leader at Accelerate at Iver, Splunk MVPThe stats command is ...

How Splunk Observability Cloud Prevented a Major Payment Crisis in Minutes

Your bank's payment processing system is humming along during a busy afternoon, handling millions in hourly ...