Dashboards & Visualizations

Highlight clicked row from a table using javascript

D2SI
Communicator

Hello there!

I am trying to highlight a table row whenever clicked:

screen.png

This is the JavaScript I use to highlight a row based on a cell string value:

 

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

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for status field
            return _(["host"]).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 status field
            // Since we have picked only one row for applying range Class, following if is not required.
            if (cell.field === "host") {
                //Add range class based on cell values.
                if (value == "test") {
                    $td.addClass("range-cell").addClass("range-green");
                }
            }

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

    mvc.Components.get('highlight').getVisualization(function(tableView) {

        tableView.on('rendered', function() {
            // Add a delay to ensure Custom Render applies to row without getting overridden with built in reder.
            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);
        });

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

 

It works with this dashboard:

 

<dashboard script="script.js">
  <label>test</label>
  <row>
    <panel>
      <table id="highlight">
        <search>
          <query>| makeresults 
| eval host="test" 
| append 
    [| makeresults 
    | eval host="hello"]
| table host</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">cell</option>
        <drilldown>
          <set token="clicked_row_tok">$click.value$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <title>$def$</title>
      <html>
        <style>
          #highlight tr.range-green td {
              background-color: #F2B827 !important;
          }
        </style>
      </html>
    </panel>
  </row>
</dashboard>

 

But instead of highlighting a row based on a value, I would like to highlight the clicked row (token $clicked_row_tok$)

So I guess I have to implement something like this:

 

    // Access the "default" token model
    var defaultTokenModel = mvc.Components.get("default");
    defaultTokenModel.on("change:clicked_row_tok", function(newTokenName, clicked_row_tok, options) {
        ...
        }
    });

 

To be able to do this:

 

if (cell.field == clicked_row_tok) {

 


But I am struggling mixing them both so I am here for help 🙏

Labels (4)
Tags (1)
1 Solution

niketnilay
Legend

@D2SI Following requirement is confusing... "But instead of highlighting a row based on a value, I would like to highlight the clicked row"

If you want clicked Row to be highlighted try the following Run anywhere example on similar lines as yours.

Screen Shot 2020-09-05 at 10.49.56 PM.png

Following is the Simple XML Dashboard:

<dashboard script="table_highlight_row_on_cell_click.js">
  <label>Table Clicked Row Highlight</label>
  <row>
    <panel>
      <html>
        <style>
          #highlight table tr.highlighted{
            border-style: solid !important;
            border-color: skyblue !important;
            background: orange !important;
          }
          #highlight table tr.highlighted td{
            background: orange !important;
            border: none !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
          }
        </style>
      </html>
      <table id="highlight">
        <search>
          <query>index=_internal sourcetype=splunkd
| stats count by log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="tokValue2">$click.value2$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript table_highlight_row_on_cell_click.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
     // Color Clicked Row of table with id #highlight
     $(document).on("click","#highlight",function(){
        // Apply class of the cells to the parent row in order to color the whole row
        $("#highlight table").find('td.highlighted').each(function() {
            $("#highlight table tr").removeClass("highlighted");
            $(this).parents('tr').addClass(this.className);
        });
     });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketnilay
Legend

@D2SI Following requirement is confusing... "But instead of highlighting a row based on a value, I would like to highlight the clicked row"

If you want clicked Row to be highlighted try the following Run anywhere example on similar lines as yours.

Screen Shot 2020-09-05 at 10.49.56 PM.png

Following is the Simple XML Dashboard:

<dashboard script="table_highlight_row_on_cell_click.js">
  <label>Table Clicked Row Highlight</label>
  <row>
    <panel>
      <html>
        <style>
          #highlight table tr.highlighted{
            border-style: solid !important;
            border-color: skyblue !important;
            background: orange !important;
          }
          #highlight table tr.highlighted td{
            background: orange !important;
            border: none !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
          }
        </style>
      </html>
      <table id="highlight">
        <search>
          <query>index=_internal sourcetype=splunkd
| stats count by log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="tokValue2">$click.value2$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript table_highlight_row_on_cell_click.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
     // Color Clicked Row of table with id #highlight
     $(document).on("click","#highlight",function(){
        // Apply class of the cells to the parent row in order to color the whole row
        $("#highlight table").find('td.highlighted').each(function() {
            $("#highlight table tr").removeClass("highlighted");
            $(this).parents('tr').addClass(this.className);
        });
     });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

D2SI
Communicator

Wow! Thanks a lot!