Dashboards & Visualizations

Can I use SplunkJS extension to highlight a table row based on cell value (works, but not always)?

kaneru
Explorer

To start off, I know that there are threads that already answer this, but those threads existed a long time ago. I have a question with the code that I will provide in the post. For some reason, when I try to apply this JS extension to the dashboard I have, it will not always work. If I refresh the page or go into edit mode... the rows don't stay highlighted.

I'm wondering what would cause this since I thought the table would pre-render each time the page is refreshed or goes into and out of edit mode.

Here's the code for the JS extension...

 

 

 

require([
  "underscore",
  "jquery",
  "splunkjs/mvc",
  "splunkjs/mvc/tableview",
  "splunkjs/mvc/simplexml/ready!",
], function (_, $, mvc, TableView) {
  // row Coloring by String Comparision of check field and True
  let CustomRangeRenderer = TableView.BaseCellRenderer.extend({
    canRender: function (cell) {
      // enable this custom cell renderer for check field
      return _(["check"]).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 check field
      if (cell.field === "check") {
        if (value === "True") {
          $td.addClass("range-cell").addClass("range-severe");
        }
      }
      // update the cell content with string value
      $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());
  });
});

 

 

 


The CSS is here...

 

 

 

/* Row Coloring */

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

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

#highlight td.range-severe {
    font-weight: bold;
}

 

 

 


And finally the XML code to create the dashboard to replicate the issue. I should note that I am on Safari.

 

 

 

<dashboard stylesheet="js_functions:table_row_highlight.css" script="js_functions:table_row_highlight.js">
  <label>JS Row Highlight test</label>
  <row>
    <panel>
      <table id="highlight">
        <search>
          <query>| makeresults
| eval id=1
|  eval check="True,False,True,False,False,True,False,True,False,True,False,False,True"
| eval check=split(check,",")
| mvexpand check
| accum id
| eval alert_name="Alert ".id</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

 

 

 

Labels (2)
0 Karma
Get Updates on the Splunk Community!

How I Instrumented a Rust Application Without Knowing Rust

As a technical writer, I often have to edit or create code snippets for Splunk's distributions of ...

Splunk Community Platform Survey

Hey Splunk Community, Starting today, the community platform may prompt you to participate in a survey. The ...

Observability Highlights | November 2022 Newsletter

 November 2022Observability CloudEnd Of Support Extension for SignalFx Smart AgentSplunk is extending the End ...