Dashboards & Visualizations

.js and .css scripts not working for Splunk Dashboard

nagar57
Communicator

I have uploaded my .js and .css scripts in $SPLUNK_HOME/etc/apps/search/appserver/static path, but still these scripts are now working.

Below is my .js script:

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 _(['ProductName']).contains(cell.field);
         },
         render: function($td, cell) {
             // Add a class to the cell based on the returned value
             var value = cell.value;
             // Apply interpretation for number of historical searches
             if (cell.field === 'ProductName') {
                 if (value === "Dream Crusher" ) {
                     $td.addClass('range-cell').addClass('range-green');
                 }
             }
             // Update the cell content
             $td.text(value).addClass('string');
         }
     });
     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);
             });
         },100);
         // Add custom cell renderer, the table will re-render automatically.
         tableView.addCellRenderer(new CustomRangeRenderer());
     });
 });

Below is my .css script:

> #highlight tr.range-orange td {
>      background-color:#ffcc99 !important;  }  #highlight
> tr.range-red td {
>      background-color:#ff0000 !important;  }  #highlight
> tr.range-green td {
>      background-color:#00ff00 !important;  }

I have added these scripts in my Dashboard as:

>  script="oip_table_row_color.js"
> stylesheet="oip_table_row_color.css">

I have already tried /debus/refresh and Clearing browser cookies.
Also, restarted Splunk. But still The color coding is not reflecting in my dashboard.
Do I need to add something in my Dashboard Xml?
TIA

0 Karma

paramagurukarth
Builder

Possible reason,
1. Check the permission and user role of the two file added
2. Check whether it is in the same application. if not prefix app_name: in your dashboard
e.g: script="search:my_code.js" stylesheet="my_code.css"

I guess yours is reason 1

After changing permission restart SH

0 Karma

niketn
Legend

@nagar57, while posting code on Splunk Answers make sure you use the Code button i.e. one with 101010 or shortcut Ctrl+K, so that special characters do not escape. Based on the details provided, if you are trying to use the CSS and JS from Simple XML Dashboard examples app then it should have worked after refreshing Splunk and clearing Browser cache history. So try the following things for debugging:

1) Type in the following URL if you have uploaded the static files under the search app's appserver/static folder.

http://<yourSplunkServerAndPort>/en-US/static/app/search/oip_table_row_color.js

and

http://<yourSplunkServerAndPort>/en-US/static/app/search/oip_table_row_color.css

1) If you get Not Found error, then you have not uploaded the file to correct folder. You can also confirm this by right click and choosing Browser Inspector to see any Console error/s.
2) If you can see the source code of JS and CSS then you have uploaded files to the correct folder but there is issue with the code.

In order to look further at code related issues. Try the following:
2 a) For CSS move the code from CSS file to html panel in dashboard i.e. under the following code

<row depends="$alwaysHideCSSPanel$">
    <panel>
        <html>
            <style>
                <!-- Your CSS Style override goes here-->
            </style>
        </html
    </panel>
</row>

2 b) Once CSS is found to be written correctly, change the JS Code to print only debug info first i.e.

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
       console.log("Inside JS Script for Table Render Extension");
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

nagar57
Communicator

First of all Thanks a lot for taking so much pain to explain in this detail 🙂
I am able to read my .jss and .css files through http://localhost:8000/static/app/search/oip_table_row_color.js
Now as you mentioned I changed the .js script to just print only debug info. I am pretty knew to Splunk so could you please help me out on how can I see this debug log info through splunk

0 Karma

niketn
Legend

Right Click on browser and select the Inspect Option. You should have several tabs of which one would be Console.

https://answers.splunk.com/answers/590387/how-do-i-update-panel-color-in-splunk-using-css-1.html

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

nagar57
Communicator

Yes, I can see the debug log.
Also, I tried with bump and what I can see is when I am refreshing the dashboard color appears and then goes away. I don't know what is going wrong.

0 Karma

niketn
Legend

Seems like you are running into known issue with 6.6+ where TableView needs slight delay in rendering. So setTimeout needs to be added. Refer to one of previous answers: https://answers.splunk.com/answers/614788/splunk-dashboard-examples-table-row-highlighting-b.html

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

gcusello
SplunkTrust
SplunkTrust

Hi nagar57,
did you created your dashboard in Search App on in a different one?
bye.
Giuseppe

0 Karma

nagar57
Communicator

Yes the dashboard is in Search App

0 Karma

pallavi25
New Member

You might have created your dashboard in search app and might have put js and css in appserver/static folder of some other app. This has happened with me once.

Thanks,
Pallavi

0 Karma

nagar57
Communicator

@pallavi25 Well this was not the issue. The issue was with the file permissions.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@nagar57

have you tried https://SPLUNK_HOME:8000/en-GB/_bump ?

0 Karma

nagar57
Communicator

You mean
http://localhost:8000/en-GB/_bump

It gave Forbidden

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