how to higlight cell within html dashboards on splunk 7 ?

[sfatnass]

hi,

i upgraded the splunk version from 6.4 to 7
i use a lot of html dashboards and i have some eventlistener "onlick" to highlight cells and rows.
that's work perfectly with splunk 6.4 but not on version 7.

why? how can i fix that ?

[sfatnass]

anyone can help for this topic ?

[ludo1603]

Using html or xml is not the problem.
I have the same bug i think, i passed from 6.3.3 to splunk 6.8 and all my scripts js are like unabled.
When dashboard load at first time everything work perfectly. but when you try to add some event handler nothing happen.

So i downgrade to splunk 6.5 now. the highest version where everythink work.

I tried to report this on "submit case" but it's disabled for me.

anybody can report the bug about splunkjs stack?

[niketn]

@sfatnass if you are on Splunk 6.6 or higher there is a known issue with Table Row Highlight which does not work without adding a small setTimeout() delay to your JavaScript inside Table render() call. Refer to one of my older answers: https://answers.splunk.com/answers/614788/splunk-dashboard-examples-table-row-highlighting-b.html

The answer in turn refers to a run anywhere example which should work even on Splunk 7: https://answers.splunk.com/answers/588394/change-the-color-of-rows-in-a-table-based-on-text-1.html

Option 2: Table formatting using expression
If you are on Splunk 6.5 or higher you have several Table Formatting options for applying colorPalette including expression which allows you to apply color by range using nested if. (PS: case is not supported)
Refer to my recent answer below: https://answers.splunk.com/answers/469742/how-to-edit-dashboard-to-use-token-values-to-deter.html#an...

[sfatnass]

i tryied setTimeout() delay but nothing change.
the render function wont load

[Justinboucher0]

I get a 403 when trying to access your dashboard html. But shouldn't the value be labeled cell.value?

I edited this same code for an XML dashboard to use dynamic values. I'll post my code below and you can see if adding your click event handler will work:

JS File:

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

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             // Enable this custom cell renderer for 'Average Response Time SLA'
             return _(['Average Response Time SLA']).contains(cell.field);
         },
         render: function($td, cell) {
             // Add a class to the cell based on the returned value
             var strSLA = cell.value;
             if (strSLA!==undefined){
                 strSLA=strSLA.trim();
                 $td.addClass('range-cell').addClass("range-"+strSLA);
             }
             $td.text(strSLA).addClass('string');
         }
     });
     mvc.Components.get("response_time_highlight_cell").getVisualization(function(tableView){
         tableView.on("rendered", function() {
             console.log("Table Rendered");
             setTimeout(function(){
                 $("#response_time_highlight_cell tr").each(function() {
                     var strSLA=$(this).find("td:last").html();
                     if (strSLA!==undefined){
                         strSLA=strSLA.trim();
                         $(this).find("td:nth-child(4)").addClass("range-cell").addClass("range-"+strSLA);
                     }
                 });
             },100);
         });
     });
 });

Search Panel:

<panel>
      <title>Transaction Response by Objective and Threshold</title>
      <table id="response_time_highlight_cell">
        <search base="filteredSearch">
          <query>| search service IN (
                        $service$ ) transaction_status IN ( $transaction_status$ ) transaction_name IN (
                        $transaction_name$ ) username IN ( $username$ ) workstation_name IN ( $workstation_name$)
                        transaction_mode IN ( $transaction_mode$ ) threshold IN ( $threshold$ )  | stats
                        count avg(response_time) AS response_time BY transaction_name objective threshold
                        | where threshold!=100
                        | eval threshold=round(threshold,2)
                        | eval objective=round(objective,2)
                        | eval response_time=round(response_time,2)
                        | fields transaction_name count response_time objective threshold
                        | eval "Average Response Time SLA"=case(response_time&gt;=threshold,"severe",
                        response_time&lt;threshold AND response_time&gt;=objective,"elevated",objective==100 AND
                        threshold==100,"info",true(),"low")
                        | rename response_time AS "Average Response Time (secs)" transaction_name AS "Transaction Name"
                        objective as Objective threshold as Threshold count as "Transaction Count"
                        | sort +transaction_name
                    </query>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>

EDIT: Forgot to add the search itself.

NOTE I renamed the table and script to response_time_* since I wanted to separate this one from another script that used table_highlight_cell.

[sfatnass]

thx for your reply i tryied your code.

but the problem is the same, the range-cell added only if i switch the paginator 😞

the message into console : table Renderer not show up directly
so the function tableView.on('rendered', function() { not called correctly

splunk 7 make me crazy

[Justinboucher0]

Just wondering. Do you have to use HTML dashboards. Pre-Splunk 6.3 HTML dashboards were a must, but now most things can be done via simpleXML with extensions.

[sfatnass]

hi @Justinboucher0

i update an app to show us what's my problem

i try to color the cell "id" on click event.

https://splunkbase.splunk.com/app/4184/release/2.0.0/download/?origin=asc

the app is pending approval and is not yet publicly visible but your are able to download it

[sfatnass]

i have a lot of html dashboards.

when i try to use simple xml with js extension i can't retrieve the data from my handle event.

e.data return undefined.

/* jsrender.js */
require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/simplexml/ready!"
],

function($, mvc, SearchManager, TableView) {
    new SearchManager({
        id: "search_resulttable",
        search: "|inputlookup kv_data",
        preview: false,
        cache:true
    });

    new TableView({
        id: "table_search",
        managerid: "search_resulttable",
        drilldown: "none",
        wrap: true,
        el: $("#table_search")
    }).render();

    $("#table_search").on("click", function(e) {
        e.preventDefault();
        console.log(e.data);
    });
});

[sfatnass]

    <dashboard script="jsrender.js">
      <label>tryrender</label>
      <row>
        <panel>   
          <html>
            <h3>list of data</h3>
            <div id="table_search"></div>
          </html>
        </panel>
      </row>
    </dashboard>

[sfatnass]

this is my dashboard html
in my dashboard i try to call a function within a loader load.js

i edited the application : https://splunkbase.splunk.com/app/1603/
table_row_highlighting.js

 if (value == 1) {
      $td.addClass('range-cell').addClass('range-elevated');
   }

to highlight 'active_hist_searches' when the value equal to 2.
the highlight should work only if the handler "onclick" is done.

but not work 😞

[Justinboucher0]

Yeah, I had the same issue when I upgraded. Turns out they did something that affected the way onclick functions are accessed. My original onclick function was:

$('#submitButton').click(function (e) {
//snipped//

Had to change it to the following to get it to work in 7:

$('#submitButton').on("click", function (e) {
//snipped//

Hopefully that helps you out.

[sfatnass]

i use your solution from the beginning but the problem that the render function not loaded

[sfatnass]

that's what i'm using but the problem is not here. you can refer to my report below

[niketn]

@sfatnass will it be possible for you to share one of your onclick event handler?

[sfatnass]

thx for your reply i investigate and i found the problem is not in the event handler but in event render

if you run the dashboard : custom_table_row_highlighting
from : https://splunkbase.splunk.com/app/1603/

the render for highlight called by the js not work in splunk 7