Splunk Search

How to set class for different fields using JavaScript for changing font color and background color in Splunk table?

812456
New Member

Hi i am new to Splunk/JavaScript, Need your help for reducing my code, i have created two class for 2 fields, likewise we have 50 fields in splunk table. class is created for changing font and background color based on condition.
With this current approach i need to add/repeat 50 times (i.e.) for all the fields. Each time i need to add/call setTimeout(function() how can i customize the redundancy of the code for creating class and calling the setTimeout function for single time in javascript.
kindly find my code

enter code here

table.js

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
],
function(_, $, mvc, TableView) {

  // Row Coloring Example with custom, client-side range interpretation

 var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
     canRender: function(cell) {
         // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
         //return _(["LOgType"]).contains(cell.field);
          return true;
     },
     render: function($td, cell) {
         // Add a class to the cell based on the returned value

         var value = cell.value;

         // Apply interpretation for string of autorización
         if (cell.field === "LOgType") {
             if (value == "error") {
                 $td.addClass('range-cell').addClass('range-severe');
             }
         }
         if (cell.field === "ID") {
             if(value!==null) {
                 $td.addClass('range-con').addClass('range-low');
             }
 if (cell.field === "Desc") {
             if(value!==null) {
                 $td.addClass('range-cos').addClass('range-high');
             }
         }

         // Update the cell content
         $td.text(value).addClass("string");
     }
 });

 mvc.Components.get('Table1').getVisualization(function(tableView) {
     tableView.on('rendered', function() {

         setTimeout(function(){
         // Apply class of the cells to the parent row in order to color the whole row
         tableView.$el.find('td.range-cell').each(function() {
             $(this).parents('tr').addClass(this.className);
         });
      },100);
   setTimeout(function(){
         tableView.$el.find('td.range-con').each(function() {
             $(this).parents('tr').addClass(this.className);
         });
      },100);
     });
    setTimeout(function(){
         tableView.$el.find('td.range-cos').each(function() {
             $(this).parents('tr').addClass(this.className);
         });
      },100);
     });

`tableView.addCellRenderer(new CustomRangeRenderer()); // Add custom cell renderer, the table will re-render automatically.
});
});

table.css

         #Table1 tr.range-severe td{
            color: red;             
            }
            #Table1 tr td.range-low{
            background-color: #FFC597 !important;            
            }
           #Table1 tr td.range-high{
            background-color: #FFC597 !important;            
            }
0 Karma

niketn
Legend

@812456 while posting code on Splunk Answers use the Code button ( 101010 ), or shortcut Ctrl+K to ensure that special characters do not escape.

I think the better approach for you would be to use the Table Search Manager to get the list of fields you want to iterate and pass to the Cell Render extension as a string array. Refer to one of my older answers, see if it fits your needs: https://answers.splunk.com/answers/618930/how-can-i-get-the-table-cell-colorization-renderin-1.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...