Splunk Search

How to change the background color of a table row in a dashboard panel based on a string value?

dstark75
New Member

I have JSON data that is broken into fields. I'm trying to add color to my stats panel or pivot table, but I'm unable to do so with my string data.

Example event:

{
    "name": "foo",
    "status": "HEALTHY"
}

I can create a search that I can use as a panel for my dashboard:

index="myindex" sourcetype="mysourcetype" | table name,status

I'd like to have the resultant rows in my stats table turn green if HEALTHY (red if some other status, like DEGRADED). I've tried editing my XML to include:

<option name="charting.fieldColors">

but for some reason this does not seem to work with my string data. Ideally, the whole row of name + status would turn a solid background color, but just the status changing would be okay.

<option name="charting.fieldColor">{"HEALTHY":0x00FF00,"DEGRADED":0xFF0000}</option>

I also tried creating a pivot table and mapping HEALTHY to a number and color, but I feel there must be an easier way. I have yet to explore JS/CSS options.

Thanks!

0 Karma

niketn
Legend

gyslainlatsa's example is for single table with with table id 'highlight', the same needs to be extended for multiple table ids like 'highlightfirst' 'highlightsecond' etc.

Please find my answer from thread below:

https://answers.splunk.com/answers/476930/how-to-change-row-color-in-multiple-tables-on-a-da.html#an...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

gyslainlatsa
Motivator

Hi dstark,
try like this: use view name_status.xml

<dashboard script="row_highlighting.js" stylesheet="decorations.css">
      <label>Color String_Field</label>

      <row>

          <table id="highlight">
            <search>
              <query>index="myindex" sourcetype="csv" |eval confirm=if(status="HEALTHY","2","0") |table name status confirm</query>
            </search>
             <option name="drilldown">none</option>
          </table>

      </row>
    </dashboard>

add the file row_highlighting.js in $Splunk/etc/apps/yourapp/appserver/static

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 the confirm field
                    return _(['confirm']).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 
                    if (cell.field === 'confirm') {
                        if (value > 1) {
                            $td.addClass('range-cell').addClass('range-elevated');
                        }
                        else {
                            $td.addClass('range-cell').addClass('range-severe');
                        }
                    }

                    // Apply interpretation for number of 
                    /*if (cell.field === 'confirm') {
                        if (value == 0 ) {
                            $td.addClass('range-cell').addClass('range-severe');
                        }
                    }*/

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

            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());
            });

        });

next your add the file decorations.css in $Splunk/etc/apps/yourapp/appserver/static

/* Row Coloring */

#highlight tr.range-elevated  td  {
    background-color: #08f540 !important;
}

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

after restart Splunk, look the result:

alt text

please forgive my english.
Let me know if this work.

email2vamsi
Explorer

I am able to use your code for a single table in a dash board.
Its not working if i have to add multiple tables inside a single dashboard.
Its not accepting the same table id for the second table. Please help.

0 Karma

niketn
Legend

Which version of Splunk are you running?

If you are on Splunk Cloud and upgrade to Splunk Enterprise 6.5, then this feature to color table cell is inbuilt to Splunk and you can directly change the same by editing the table column in UI.

Otherwise, Table View Base Cell Render will work only on the first table. I have not seen an example of making it work on the second table of the same dashboard.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

email2vamsi
Explorer

Thank you. I am using splunk enterprise 6.5. I would like to color the entire row of the table with green if one of the field value is 1 and color the row red, if the same column value is 0.
How can I achieve this in ui? What's the navigation?

I do not want to color a column.

0 Karma

dstark75
New Member

Hi gyslainlatsa,

I am running Splunk Cloud and can't create an app myself, but I will contact support and see if they can create this app for me. I'll let you know the result.

0 Karma

gyslainlatsa
Motivator

hi dstark75,
first of all I hope that's the result so you needed.
if that's the case, I await your final answer

0 Karma

dstark75
New Member

It's very, very close to what I had in my head, and is acceptable to me as is. Thanks!

I wish I didn't have to display another field confirm, but it makes sense for your solution. Is there no way around this? Other than that, I'll be making some minor css changes.

0 Karma

MuS
SplunkTrust
SplunkTrust

Hi dstark75,

Take a look at this answer https://answers.splunk.com/answers/241650/using-eval-to-change-text-color-in-single-value-mo.html to learn how this can be done.
You need to evaluate a new field based on status and use this field in the classField option.

Hope this helps ...

cheers, MuS

Update:
Okay, Splunk 6.3 did change on that so here is an updated XML that shows working examples for numbers and strings to be coloured :

<form>
  <label>rangemap Clone</label>
  <fieldset submitButton="true">
    <input type="text" token="field1" searchWhenChanged="true"></input>
    <input type="time" token="field2">
      <label></label>
      <default>
        <earliest>0</earliest>
        <latest></latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <single>
        <title>Temp (S1 Rack)</title>
        <search>
          <query>| stats count | eval reading="$field1$" | eval ok_level=if(reading="3", "3",null()) | eval sev_level=if(reading="0","0",null()) | eval warn_level=if(reading="2","2",null()) | eval level=coalesce(ok_level,sev_level,warn_level) | rangemap field=level green=3-3 blue=2-2 red=0-0 default=gray</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart.rangeValues">[0,30,40,60,70,100]</option>
        <option name="charting.gaugeColors">[0xd13b3b,0xFFE800,0x7e9f44,0xebe42d,0xd13b3b]</option>
        <option name="drilldown">none</option>
        <option name="classField">level</option>
        <option name="field">reading</option>
        <option name="useColors">0</option>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="numberPrecision">0</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="useThousandSeparators">1</option>
        <option name="linkView">search</option>
        <option name="rangeColors">["0x65a637","0x6db7c6","0xf7bc38","0xf58f39","0xd93f3c"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="trendInterval">auto</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count | eval reading="$field1$" | eval ok_level=if(reading="HEALTHY", "3",null()) | eval sev_level=if(reading="BAD","0",null()) | eval warn_level=if(reading="WARN","2",null()) | eval level=coalesce(ok_level,sev_level,warn_level) | table reading level | rangemap field=level low=3-3 elevated=2-2 severe=0-0 default=severe</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">none</option>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="numberPrecision">0</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
        <option name="linkView">search</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <single>
        <search>
          <query>index=_internal source="*splunkd.log" log_level="error" | timechart count as errors | rangemap field=errors low=11-25 guarded=26-50 elevated=51-99 high=100-150 severe=150-199 default=severe</query>
          <earliest>$field2.earliest$</earliest>
          <latest>$field2.latest$</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x65a637","0x6db7c6","0xf7bc38","0xf58f39","0xd93f3c"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="trendInterval">auto</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
        <option name="linkView">search</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>index=_internal source="*splunkd.log" log_level="error" | timechart count as errors | rangemap field=errors low=11-25 guarded=26-50 elevated=51-99 high=100-150 severe=150-199 default=severe</query>
          <earliest>$field2.earliest$</earliest>
          <latest>$field2.latest$</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
</form>
0 Karma

dstark75
New Member

Hi Mus,

This example uses a number, not a string. If I try to evaluate a new field, I don't get the desired result.

index="myindex" sourcetype="mysourcetype" | eval confirm=if(status="HEALTHY","2","0") | table name status confirm

gives me a value of 0 for confirm.

0 Karma

dstark75
New Member

I actually changed this to eval confirm=if(searchmatch("HEALTHY"),"2","0") which matches correctly, however I still don't get colors when I use the classField option.

0 Karma

MuS
SplunkTrust
SplunkTrust

update ping to give you an updated XML with working string and number colouring without any additional css or js scripts.....

Hope this helps ...

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...