topic Re: Table - Row Colouring - (Splunk 6.x examples app) in Splunk Search

Table - Row Colouring - (Splunk 6.x examples app)

splunker12er — Fri, 20 Feb 2015 13:44:40 GMT

I was just trying to use the same example javascript and css with different search query, but i'm not able to get the rows colored.
Please help in this.

Trial.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 Age and the State field
            return _(['Age', 'State']).contains(cell.field);
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);
            // Apply interpretation for number of historical searches
            if (cell.field === 'Age') {
                if (value > 2) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
            }
            // Apply interpretation for number of realtime searches
            if (cell.field === 'State') {
                if (value > 1) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
            }
            // Update the cell content
    //        $td.text(value.toFixed(2)).addClass('numeric');
        }
    });
    mvc.Components.get('Trial').getVisualization(function(tableView) {
        // Add custom cell renderer
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        tableView.on('rendered', 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);
            });
        });
        // Force the table to re-render
        tableView.table.render();
    });
});

Trial.css

/* 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;
}

XML:

<dashboard script="Trial.js" stylesheet="Trial.css">
  <label>Trial</label>
  <row>
      <table id="Trial">
        <title>Trial</title>
        <search>
          <query>source="Trial.csv" host="10.0.255.247" sourcetype="csv"|table Timestamp User Age State</query>
          <earliest>-24h</earliest>
        </search>
        <option name="drilldown">none</option>
      <option name="wrap">true</option>
      <option name="rowNumbers">false</option>
      <option name="dataOverlayMode">none</option>
      <option name="count">10</option>
      </table>
  </row>
</dashboard>

Re: Table - Row Colouring - (Splunk 6.x examples app)

splunker12er — Fri, 20 Feb 2015 13:45:58 GMT

Also , from the javascript i wanted to know, (from the 35th Block of code)
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.on('rendered', 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);
});

What is 'rendered' ? Is this common to all examples / I need to modify this ?

Re: Table - Row Colouring - (Splunk 6.x examples app)

splunker12er — Fri, 20 Feb 2015 13:48:40 GMT

This is very similar to the example data. Even i exported the same example data and just tired it with column name different. But , I am not getting the rows colored. Instead some fields bold

Re: Table - Row Colouring - (Splunk 6.x examples app)

markthompson — Fri, 20 Feb 2015 14:23:07 GMT

I'm also interested in this solution, I've tried this before but in the end gave up.

Re: Table - Row Colouring - (Splunk 6.x examples app)

NOUMSSI — Mon, 16 Mar 2015 09:26:12 GMT

Hi everyone;

You are not able to get the rows colored because you have some mistakes in your trial.css file:

In your css file, remove this And it'll work very well.

#highlight tr td {
     background-color: #c1ffc3 !important;
 }

Now here was the problem:
You gave background color to you table and after you gave some color to your rows; this make a conflict and it's the raison why there is no rows colored.

Re: Table - Row Colouring - (Splunk 6.x examples app)

davisja — Mon, 03 Aug 2015 22:07:02 GMT

Hopefully you've already figured out the answer, as I'm about four months late to the party here, but for future reference:

The reason your rows wouldn't highlight is because your CSS selectors are wrong. Notice that, in the XML, your table has id="Trial". Thus, you need to target #Trial with your CSS selectors, rather than #highlight (as the example uses id="highlight" for its table).

Fixed CSS (only necessary fix to get row highlighting working):

/* Row Coloring */
 #Trial tr td {
     background-color: #c1ffc3 !important;
 }
 #Trial tr.range-elevated td {
     background-color: #ffc57a !important;
 }
 #Trial tr.range-severe td {
     background-color: #d59392 !important;
 }
 #Trial .table td {
     border-top: 1px solid #fff;
 }
 #Trial td.range-severe, td.range-elevated {
     font-weight: bold;
 }