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!

Exporting Splunk Apps

Join us on Monday, October 21 at 11 am PT | 2 pm ET!With the app export functionality, app developers and ...

Cisco Use Cases, ITSI Best Practices, and More New Articles from Splunk Lantern

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Build Your First SPL2 App!

Watch the recording now!.Do you want to SPL™, too? SPL2, Splunk's next-generation data search and preparation ...