Combining custom_table_row_expansion.js and table_...

fabrizioalleva · ‎04-22-2020

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

Combining custom_table_row_expansion.js and table_cell_highlighting.js in a dashboard

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life