Dashboards & Visualizations

Format row colour in multiple tables on a dashboard based on column value

ALXWBR
Path Finder

I have a dashboard that I'm working on that requires me to conditionally format table rows based on a field. The dashboard currently has 6 identical tables (in terms of the column names) and I need to be able to apply the JavaScript to each of them. I am aware that I can just state each table in the JavaScript, however, ideally I'd like to not have to do that, as I'm going to be adding additional tables to the dashboard over time. As this will live on cloud, I don't want to have to keep uploading the app every time I make a change.
 

Is there a way to replace 'the get('highlight01')' with something more generic or even loop that aspect of the code for all tables on the dashboard?

 

 

requirejs([
    // It's important that these don't end in ".js" per RJS convention
    '../app/TA-lgw_images_and-_files/libs/jquery-3.6.0-umd-min',
    '../app/TA-lgw_images_and-_files/libs/underscore-1.6.0-umd-min',
    '../app/TA-lgw_images_and-_files/theme_utils',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function($, _, themeUtils, mvc, TableView) {
    // Row Coloring Example with custom, client-side range interpretation

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer
            return _(['target_met']).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 === 'target_met') {
                if (value > 0) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
            }

            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });

    mvc.Components.get('highlight01').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());
    });
	

});

 

Example dashboard XML you can use

<dashboard version="1.1" script="dpi_ops_evaluation.js" stylesheet="dpi_ops_evaluation.css">
  <label>DPI TEST</label>
  <row>
    <panel>
      <table id="highlight01">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight02">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight03">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight04">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight05">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight06">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</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 (3)
0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...

New in Observability Cloud - Explicit Bucket Histograms

Splunk introduces native support for histograms as a metric data type within Observability Cloud with Explicit ...