Trying to custom color individuals cells based on values, why are 2 of 3 columns being ignored?

[muellernc]

Dear Splunk-Community,

I want to color individual cells in a table based on their value in green, orange, and red. The table has 2 columns in question: CPU Load, Memory Usage. I based my code on the Splunk 6.x Dashboard Examples App. In the dashboard, only the column CPU Loads gets a color, the others are simply ignored.

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

     // Row Coloring Example with custom, client-side range interpretation

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
            return _(["CPU Load", " Memory Usage"]).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 === "CPU Load") {
                if (value > 80) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if (value > 50) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if (value > 0) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }

if (cell.field === "Memory Usage") {
                if (value > 80) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if (value > 50) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if (value >= 0) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }

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

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

});

My CSS:

/* Cell Highlighting */

/*
#highlight td {
    background-color: #c1ffc3 !important;
}
*/

#highlight td.range-low {
    color: #20EE0D;
}

#highlight td.range-elevated {
    color: #ffc57a;
    font-weight: bold;
}

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

And my dashboard xml:

<dashboard script="table_cell_highlighting.js" stylesheet="table_cell_highlighting.css">
  <label>System Performance</label>
  <row>
    <panel>
      <chart>
        <search>
          <query>source="/home/ubuntu/performance.log" | timechart values(CPU_Load) by cluster</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="charting.chart">line</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight">
        <search>
          <query>source="/home/ubuntu/performance.log" cluster=Test8 | stats latest(CPU_Load) as "CPU Load" latest(Memory_Usag) as "Memory Usage" by host</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="wrap">undefined</option>
        <option name="rowNumbers">undefined</option>
        <option name="drilldown">row</option>
      </table>
    </panel>
  </row>
</dashboard>

js and css are located in $SPLUNK_HOME/etc/apps/testapp/appserver/static
xml in $SPLUNK_HOME/etc/apps/testapp/local/data/ui/views

Thanks for the support!

[sundareshr]

You have a typo here return _(["CPU Load", " Memory Usage"]).contains(cell.field);. Try removing the space before M in Memory.