Dashboards & Visualizations

how to higlight cell within html dashboards on splunk 7 ?

sfatnass
Contributor

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 ?

0 Karma

sfatnass
Contributor

anyone can help for this topic ?

0 Karma

ludo1603
New Member

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?

0 Karma

niketn
Legend

@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...

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

sfatnass
Contributor

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

0 Karma

Justinboucher0
Path Finder

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.

0 Karma

sfatnass
Contributor

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

0 Karma

Justinboucher0
Path Finder

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.

0 Karma

sfatnass
Contributor

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

0 Karma

sfatnass
Contributor

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);
    });
});
0 Karma

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

sfatnass
Contributor

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 😞

0 Karma

Justinboucher0
Path Finder

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.

0 Karma

sfatnass
Contributor

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

0 Karma

sfatnass
Contributor

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

0 Karma

niketn
Legend

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

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

sfatnass
Contributor

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

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 ...