Solved: Re: Is it possible to highlight a value within a m...

cmcdole · ‎10-23-2018

I am monitoring jobs that run multiple times a day. The query returns the times the job runs per day.

Here's an example of how the multi-value field looks.
4:40:32
8:32:55
12:51:40
16:01:03

I want to highlight 4:40:32 green, since it completed before 5:00, then highlight 16:01:03 red because it completed after 16:00.
Is it possible to highlight certain values within a cell?

niketn · ‎10-24-2018

@cmcdole try the following approach with TableView to capture table render event (Splunk 6.6 and above require setTimeout() to ensure table is rendered completely). Then it uses jQuery selector to iterate through multiple values in the multi-valued field using each() function.
PS: This run any where example assumes Multi-valued field is 2nd column data i.e. at the index of 1.

Following is the jQuery selector provided table in Simple XML has id="highlight"

div#highlight table td[data-cell-index="1"] div.multivalue-subcell'

Following is the Run anywhere Simple XML Dashboard Code. PS: Since the example performs a string comparison in JavaScript your search result would need to ensure that Time is always in HH:MM:SS format i.e. 04:01:20 and not 4:02:20 etc. Or else you would need to perform Date Time based conversion/calculation in JS.

<dashboard script="table_multivalue_highlight.js">
  <label>Table with Multivalue</label>
  <row>
    <panel>
      <html>
        <style>
            .highlight-green{
                background:green;
            }
            .highlight-yellow{
                background:yellow;
            }
            .highlight-red{
                background:red;
            }          
        </style>
      </html>
      <table id="highlight">
        <search>
          <query>| makeresults
| eval data="04:40:32;08:32:55;12:51:40;16:01:03"
| makemv data delim=";"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript file ( table_multivalue_highlight.js )

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    mvc.Components.get('highlight').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
             setTimeout(function(){ 
                $('div#highlight table td[data-cell-index="1"] div.multivalue-subcell') .each(function(){
                    var strMultiValueTest=$(this).text();
                    if(strMultiValueTest<"05:00:00"){
                        $(this).addClass("highlight-green");
                    }
                    else if(strMultiValueTest>="05:00:00" && strMultiValueTest<="16:00:00"){
                        $(this).addClass("highlight-yellow");
                    }else{
                        $(this).addClass("highlight-red");
                    }   
                }); 
             },100);
        });
    });
});

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

View solution in original post

niketn · ‎10-24-2018

@cmcdole try the following approach with TableView to capture table render event (Splunk 6.6 and above require setTimeout() to ensure table is rendered completely). Then it uses jQuery selector to iterate through multiple values in the multi-valued field using each() function.
PS: This run any where example assumes Multi-valued field is 2nd column data i.e. at the index of 1.

Following is the jQuery selector provided table in Simple XML has id="highlight"

div#highlight table td[data-cell-index="1"] div.multivalue-subcell'

Following is the Run anywhere Simple XML Dashboard Code. PS: Since the example performs a string comparison in JavaScript your search result would need to ensure that Time is always in HH:MM:SS format i.e. 04:01:20 and not 4:02:20 etc. Or else you would need to perform Date Time based conversion/calculation in JS.

<dashboard script="table_multivalue_highlight.js">
  <label>Table with Multivalue</label>
  <row>
    <panel>
      <html>
        <style>
            .highlight-green{
                background:green;
            }
            .highlight-yellow{
                background:yellow;
            }
            .highlight-red{
                background:red;
            }          
        </style>
      </html>
      <table id="highlight">
        <search>
          <query>| makeresults
| eval data="04:40:32;08:32:55;12:51:40;16:01:03"
| makemv data delim=";"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript file ( table_multivalue_highlight.js )

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    mvc.Components.get('highlight').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
             setTimeout(function(){ 
                $('div#highlight table td[data-cell-index="1"] div.multivalue-subcell') .each(function(){
                    var strMultiValueTest=$(this).text();
                    if(strMultiValueTest<"05:00:00"){
                        $(this).addClass("highlight-green");
                    }
                    else if(strMultiValueTest>="05:00:00" && strMultiValueTest<="16:00:00"){
                        $(this).addClass("highlight-yellow");
                    }else{
                        $(this).addClass("highlight-red");
                    }   
                }); 
             },100);
        });
    });
});

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

Pamela · ‎09-16-2021

Hi @niketn ,

this is a very interesting post. I have a similar task (but my mv values are simple text, no dates or timestamps), and I'm wondering whether it would possible to achieve such a mv value highlighting even without JavaScript?

shocko · ‎10-04-2020

This was extremely useful for me in a similar use case. Thanks for taking the time to post!

richielynch89 · ‎05-07-2020

Thanks for this solution, it works well for me.

Do you have any idea how this code could be tweaked so that it would highlight single value cells also?
I have a table that could have multi-value cells or single value cells.

niketn · ‎05-10-2020

@richielynch89 above is a generic example for Cell Rendering for multivalued-cells within table. If you want specific rendering depending on cell type you will have to pass on the cell field names and take actions accordingly. Following is an example of Table Cell rendering extension: https://answers.splunk.com/answers/637615/why-is-the-table-cell-highlighting-not-reading-the.html

You Should also check out Splunk Dashboard Examples app from Splunkbase for getting familier with Splunk JS Stack and Simple XML JS Extensions.

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

richielynch89 · ‎06-04-2020

@niketnilay Yes, I also tried to get it working using the method you advised in the link you pasted above which only works with single value cells.
My problem is that I don't know whether a table cell will have multiple values or a single value in it.
When I use your code to highlight cells that have multiple values then it works perfectly but if, in the same table a cell has a single value then it will not highlight the value.
This is because the code is expecting to see a multi-value field.

If I take the approach from the link you pasted above which highlights single value cells then it will work fine for single value cells in my table but it doesn't work for multiple value cells that I have in the table.

I've tried taking code from both js scripts but I've had no luck so far.

Did you ever write a script that can highlight a table cell if has either multiple values in it or a single value in the cell?

richielynch89 · ‎07-03-2020

If anybody else has table cells that can either be multi-value or single value, you may also have highlighting issues.

I used a workaround to append "+ " (that's a blank space after the plus sign) to single value cell and then I split the string by "+" to turn it into a multi-value cell.

The first value is the initial value and the 2nd value is a blank space

In javascript then you can write a condition so that cells that are equal to " " will not be highlighted.

niketn · ‎07-03-2020

@richielynch89 I have posted a reply to your other question. Can you please try and confirm?

https://community.splunk.com/t5/Dashboards-Visualizations/How-can-I-highlight-table-cells-that-can-e...

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

dkeck · ‎10-24-2018

If you try to do this in a dashboard you should look for "splunk cell renderer"
or if you don´t want to write java script for that, you can use the build in function on dashboards for color ranges.

Is it possible to highlight a value within a multi-value cell?

table

timechart

How to Monitor Google Kubernetes Engine (GKE)

Index This | How can you make 45 using only 4?

Splunk Education Goes to Washington | Splunk GovSummit 2024