Splunk Search

Combining custom_table_row_expansion.js and table_cell_highlighting.js in a dashboard

fabrizioalleva
Path Finder

Hi all,
I've succeeded in making a table with custom_table_row_expansion,js which expand every rows publishing the child events of a correlated father.
Now I'm tryingto apply table_cell_highlighting to colour the child new event with a color for the dalay.

I've combined table_cell_highlighting.js in the dashboard. In the custom_table_row_expansion.js I set the id of the new table highlight, I made a style css inside the dashboard in the hidden panel:

    <panel depends="$alwaysHideCSS$">
      <html>
        <style>
          .table>thead>tr>th {
                  color: #0066ff !important;
                  text-shadow: none;
                  font-family :  Verdana !important;
          }

          .table>thead>tr>th:hover {
                  /*background-image: linear-gradient(to bottom, #666, #444) !important;*/
                  color: #000000 !important;
                  text-shadow: none;
          }


          .table .sorts a {
              text-decoration: none;
              font-weight: bold;
              font-size: 12px ;
              color: #002966;
          }
          .table>tbody>tr {
                  width: 20%;
                  color: #006699;
                  font-family :  Verdana !important;
          }
          td{
                  font-size: 11px !important;
                  font-family :  Verdana !important;
          }

          #highlight tr.range-elevated td {
               background-color: #000000 !important;
               color: #ffffff;
           }

           #highlight tr.range-severe td {
               background-color: #ff0000 !important;
               color: #ffffff;
           }

           #highlight .table td {
               border-top: 1px solid #fff;
           }

           #highlight td.range-severe, td.range-elevated {
               font-weight: bold;
           }
        </style>
      </html>
    </panel>

and the javascript is this one:

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

      // Row Coloring by String Comparision of Numeric Time Value in HH:MM:SS

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

             // Apply interpretation for DELAY field
             if (cell.field === 'DELAY') {
                 if (value >= "02:00:00") {
                     $td.addClass('range-cell').addClass('range-severe');
                 }
                 if (value < "02:00:00" && value > "01:30:00") {
                     $td.addClass('range-cell').addClass('range-elevated');
                 }
             }

             // Update the cell content with string DELAY value HH:MM:SS
             $td.text(value).addClass('string');
         }
     });

     mvc.Components.get('highlight').getVisualization(function(tableView) {
         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);
             });
         });
         // Add custom cell renderer, the table will re-render automatically.
         tableView.addCellRenderer(new CustomRangeRenderer());
     });
 });

But nothing happened when I expand the rows.
Any suggestion ?

Fabrizio

0 Karma
Get Updates on the Splunk Community!

Technical Workshop Series: Splunk Data Management and SPL2 | Register here!

Hey, Splunk Community! Ready to take your data management skills to the next level? Join us for a 3-part ...

Spotting Financial Fraud in the Haystack: A Guide to Behavioral Analytics with Splunk

In today's digital financial ecosystem, security teams face an unprecedented challenge. The sheer volume of ...

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability As businesses scale ...