Dashboards & Visualizations

Why isn't JavaScript executing in my dashboard? I used a XML file.

fausap
Explorer

Hello,
I created a dashboard using this xml file :

`
FL ERRORS

<panel>
  <html>
    <h2>FL ERRS</h2>

    <p>Select a market:</p>
    <div id="marketlist"></div>&lt;br/&gt;

    <p>Here's the search:</p>
    <div id="text1"></div>
    <div id="tableindex"></div>
  </html>
</panel>

`
but, it doesn't execute the javascript file, and I have an empty dashboard.
Is something missing in my javascript ?

thanks,
Fausto


The javascript file is :

require([
    "splunkjs/mvc",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/dropdownview",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/textinputview",
    "splunkjs/mvc/simplexml/ready!"
], function(
    mvc,
    SearchManager,
    DropdownView,
    TableView,
    TextInputView
) {

    // Search query is based on the selected index
    var fl_error_search = new SearchManager({
        "id": "fl_error_search",
        "cache": true,
        "earliest_time": "0",
        "latest_time": "$latest$",
        "app": utils.getCurrentApp(),
        "search": mvc.tokenSafe("$searchQuery$")
    });

    // Display an arbitrary list of indexes
    var marketlist = new DropdownView({
        "id":"marketlist",
        "choices": [
            {label: "ITA", value: "ITA"},
            {label: "DEU", value: "DEU"},
            {label: "FRA", value: "FRA"},
            {label: "USA", value: "USA"},
            {label: "<all>", value: "*"}
        ],
        "showClearButton": false,
        "value": mvc.tokenSafe("$marketName$"),
        "el": $("#marketlist")
    }).render();

    // When the $indexName$ token changes, form the search query
    var defaultTokenModel = mvc.Components.get("default");
    defaultTokenModel.on("change:marketName", function(marketName) {
        var newQuery = "|datamodel msc_logger b2c search | fields msc_logger.CORRELATION_ID, msc_logger.MarketCode, MessageText | search msc_logger.CORRELATION_ID!=NULL | transaction msc_logger.CORRELATION_ID maxspan=5m |";
        var newQuery = newQuery + " search msc_logger.MarketCode=" + marketName + " | stats count AS "Total" BY MessageText | sort 3 - Total";
        // Update the $searchQuery$ token value
        defaultTokenModel.set('searchQuery', newQuery);
    });

    // Display the search results
    var textinput1 = new TextInputView({
        "id": "textinput1",
        "value": mvc.tokenSafe("$searchQuery$"),
        "el": $("#text1")
    }).render();


    var tableindex = new TableView({
        "id": "tableindex",
        "managerid": "fl_error_search",
        "pageSize": 5,
        "el": $("#tableindex")
    }).render();
});
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi fausap,

Can you please do minor correction??

First:

replace dashboard tag to form tag,

<form script="fl_b2c.js">

</form>

Second:

Have you debugged javascript by just making console?

console.log("hi");

It will let you know whether javascript file proper drafted/required or not.

Thanks

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi fausap,

Can you please do minor correction??

First:

replace dashboard tag to form tag,

<form script="fl_b2c.js">

</form>

Second:

Have you debugged javascript by just making console?

console.log("hi");

It will let you know whether javascript file proper drafted/required or not.

Thanks

fausap
Explorer

Hi kamlesh,

i tried as you said, but nothing happens, the javascript is not executed.
and I have nothing in the log.

thanks
Fausto

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi fausap,

Have you _bump splunk server after changing javascript ??
Login into splunk and hit below URL.

http://SPLUNK_SERVER/en-GB/_bump

Thanks

0 Karma

fausap
Explorer

Hi Kamlesh,

yes I bumped splunk, but the result is the same.
In the debug window in Chrome, in the Console tab I cannot see my message, and also in the Source tab I cannot see my javascript in any folder.

regards,
fausto

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi fausap,
You have placed you javascript in below path??

SPLUNK_HOME/etc/apps/YOUR_APP_FOLDER/appserver/static/fl_b2c.js

Thanks

0 Karma

fausap
Explorer

yes. it's very strange.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi fausap,

I have found 2 issue in javascript code ..
1)

// Search query is based on the selected index
     var fl_error_search = new SearchManager({
         "id": "fl_error_search",
         "cache": true,
         "earliest_time": "0",
         "latest_time": "$latest$",
         "app": utils.getCurrentApp(),
         "search": mvc.tokenSafe("$searchQuery$")
     });

For below line utils is not defined.

"app": utils.getCurrentApp(),

2)

// When the $indexName$ token changes, form the search query
 var defaultTokenModel = mvc.Components.get("default");
 defaultTokenModel.on("change:marketName", function(marketName) {
     var newQuery = "|datamodel msc_logger b2c search | fields msc_logger.CORRELATION_ID, msc_logger.MarketCode, MessageText | search msc_logger.CORRELATION_ID!=NULL | transaction msc_logger.CORRELATION_ID maxspan=5m |";
     var newQuery = newQuery + " search msc_logger.MarketCode=" + marketName + " | stats count AS "Total" BY MessageText | sort 3 - Total";
     // Update the $searchQuery$ token value
     defaultTokenModel.set('searchQuery', newQuery);
 });

Concatenation not proper in below line.

var newQuery = newQuery + " search msc_logger.MarketCode=" + marketName + " | stats count AS "Total" BY MessageText | sort 3 - Total";

Replace It with below line:

var newQuery = newQuery + " search msc_logger.MarketCode=" + marketName + " | stats count AS \"Total\" BY MessageText | sort 3 - Total";

Can you please make particular changes and run again ??

kamlesh_vaghela
SplunkTrust
SplunkTrust

HI
Any update on this?

0 Karma

fausap
Explorer

Hello Kamlesh,

sorry for this delayed response.
I did some step forward, but it's still not working.
I did the changes you said, and now the js is executed (I can see in the browser console the text I used in the "console.log" command.

But I have problems with utils class. I did this change in the code:

require([
     "splunkjs/mvc",
     "splunkjs/mvc/utils",
     "splunkjs/mvc/searchmanager",
     "splunkjs/mvc/dropdownview",
     "splunkjs/mvc/tableview",
     "splunkjs/mvc/textinputview",
     "splunkjs/mvc/simplexml/ready!"
 ], function(
     mvc,
     SearchManager,
     DropdownView,
     TableView,
     TextInputView
 ) {

but I got this error in the console :

VM288:29 Uncaught ReferenceError: utils is not defined
    at eval (eval at globalEval (common.js:14), <anonymous>:29:17)
    at Object.execCb (eval at module.exports (common.js:137), <anonymous>:1658:33)
    at Module.check (eval at module.exports (common.js:137), <anonymous>:874:51)
    at Module.enable (eval at module.exports (common.js:137), <anonymous>:1151:22)
    at Module.init (eval at module.exports (common.js:137), <anonymous>:782:26)
    at eval (eval at module.exports (common.js:137), <anonymous>:1424:36)
(anonymous) @ VM288:29
execCb @ VM260:1658
check @ VM260:874
enable @ VM260:1151
init @ VM260:782
(anonymous) @ VM260:1424
setTimeout (async)
(anonymous) @ VM260:1763
localRequire @ VM260:1413
requirejs @ VM260:1745
shimmedRequirejsRequire @ common.js:137
(anonymous) @ VM288:5
globalEval @ common.js:14
(anonymous) @ dashboard.js:1
(anonymous) @ common.js:25
fire @ common.js:25
add @ common.js:25
(anonymous) @ common.js:25
each @ common.js:14
(anonymous) @ common.js:25
Deferred @ common.js:25
then @ common.js:25
(anonymous) @ dashboard.js:1
(anonymous) @ common.js:25
fire @ common.js:25
fireWith @ common.js:25
done @ common.js:26
(anonymous) @ common.js:27
XMLHttpRequest.send (async)
(anonymous) @ VM251:1
send @ common.js:27
ajax @ common.js:26
_getScript @ dashboard.js:1
_loadScript @ dashboard.js:1
_loadExtension @ dashboard.js:1
loadScriptExtension @ dashboard.js:1
(anonymous) @ dashboard.js:229
_.each._.forEach @ common.js:27
applyCustomExtension @ dashboard.js:229
(anonymous) @ common.js:25
fire @ common.js:25
add @ common.js:25
(anonymous) @ common.js:25
each @ common.js:14
(anonymous) @ common.js:25
Deferred @ common.js:25
then @ common.js:25
applyDashboardStructure @ dashboard.js:229
later @ common.js:27
setTimeout (async)
(anonymous) @ common.js:27
triggerEvents @ common.js:29
trigger @ common.js:29
set @ common.js:29
parseDashboardXML @ dashboard.js:229
enter @ dashboard.js:229
_handleModeChange @ dashboard.js:225
(anonymous) @ common.js:25
fire @ common.js:25
add @ common.js:25
(anonymous) @ common.js:25
each @ common.js:14
(anonymous) @ common.js:25
Deferred @ common.js:25
then @ common.js:25
handleModeChange @ dashboard.js:225
triggerEvents @ common.js:29
trigger @ common.js:29
set @ common.js:29
(anonymous) @ dashboard.js:225
(anonymous) @ common.js:25
fire @ common.js:25
fireWith @ common.js:25
(anonymous) @ common.js:25
fire @ common.js:25
fireWith @ common.js:25
(anonymous) @ common.js:25
fire @ common.js:25
fireWith @ common.js:25
deferred.(anonymous function) @ common.js:25
(anonymous) @ common.js:47
(anonymous) @ common.js:47
(anonymous) @ common.js:25
fire @ common.js:25
fireWith @ common.js:25
deferred.(anonymous function) @ common.js:25
(anonymous) @ common.js:47
(anonymous) @ common.js:25
fire @ common.js:25
add @ common.js:25
(anonymous) @ common.js:25
each @ common.js:14
(anonymous) @ common.js:25
Deferred @ common.js:25
then @ common.js:25
(anonymous) @ common.js:47
fire @ common.js:25
fireWith @ common.js:25
done @ common.js:26
(anonymous) @ common.js:27
XMLHttpRequest.send (async)
(anonymous) @ VM251:1
send @ common.js:27
ajax @ common.js:26
Backbone.ajax @ common.js:29
Backbone.sync @ common.js:29
sync @ common.js:43
fetch @ common.js:29
fetch @ common.js:43
fetch @ common.js:43
fetch @ common.js:47
(anonymous) @ common.js:47
fire @ common.js:25
fireWith @ common.js:25
deferred.(anonymous function) @ common.js:25
(anonymous) @ common.js:46
options.success @ common.js:29
fire @ common.js:25
fireWith @ common.js:25
done @ common.js:26
(anonymous) @ common.js:27
XMLHttpRequest.send (async)
(anonymous) @ VM251:1
send @ common.js:27
ajax @ common.js:26
Backbone.ajax @ common.js:29
Backbone.sync @ common.js:29
sync @ common.js:43
fetch @ common.js:29
fetch @ common.js:43
fetch @ common.js:43
bootstrapAppLocals @ common.js:46
$whenPageViewDependencies @ common.js:46
$whenPageViewDependencies @ dashboard.js:225
(anonymous) @ dashboard.js:225
(anonymous) @ common.js:25
fire @ common.js:25
add @ common.js:25
(anonymous) @ common.js:25
each @ common.js:14
(anonymous) @ common.js:25
Deferred @ common.js:25
then @ common.js:25
page @ dashboard.js:225
view @ dashboard.js:225
execute @ common.js:29
(anonymous) @ common.js:29
(anonymous) @ common.js:29
_.some._.any @ common.js:27
loadUrl @ common.js:29
start @ common.js:29
exports.start_backbone_history @ common.js:43
(anonymous) @ dashboard.js:1
0 @ dashboard.js:1
__webpack_require__ @ common.js:1
window.webpackJsonp @ common.js:1
(anonymous) @ dashboard.js:1

How can I include "utils" in the js ?

thanks,
Fausto

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

HI

Just add below code.

var utils = require("splunkjs/mvc/utils");

Have you corrected all changes I'd mentioned for you?

Thanks
Kamlesh

fausap
Explorer

Hello Kamlesh,

I fixed more or less all the issues with the code.
This is the final version of js

require([
     "splunkjs/mvc",
     "splunkjs/mvc/utils",
     "splunkjs/mvc/searchmanager",
     "splunkjs/mvc/dropdownview",
     "splunkjs/mvc/tableview",
     "splunkjs/mvc/textinputview",
     "splunkjs/mvc/simplexml/ready!"
 ], function(
     mvc,
     SearchManager,
     DropdownView,
     TableView,
     TextInputView
 ) {

     console.log("DEBUG _ HI ");

     // Search query is based on the selected index
     var SearchManager = require("splunkjs/mvc/searchmanager");
     var DropdownView = require("splunkjs/mvc/dropdownview");
     var TextInputView = require("splunkjs/mvc/textinputview");
     var TableView = require("splunkjs/mvc/tableview");

     new SearchManager({
         "id": "fl_error_search",
         "cache": true,
         "earliest_time": "-24h@h",
         "latest_time": "now",
         // "app": Splunk.util.getCurrentApp(),
         "search": mvc.tokenSafe("$searchQuery$")
     });

     console.log("Created SearchManager");

     // Display an arbitrary list of indexes
     var marketName = new DropdownView({
         "id":"marketlist",
         "choices": [
             {label: "ITA", value: "ITA"},
             {label: "DEU", value: "DEU"},
             {label: "FRA", value: "FRA"},
             {label: "USA", value: "USA"},
             {label: "<all>", value: "*"}
         ],
         "showClearButton": false,
         "value": mvc.tokenSafe("$marketName$"),
         "el": $("#marketlist")
     }).render();

     console.log("Created DropdownView");

     // When the $searchQuery$ token changes, form the search query
     var defaultTokenModel = mvc.Components.get("default");
     defaultTokenModel.on("change:marketName", function(marketName) {
         var newQuery = "|datamodel msc_logger b2c search | fields msc_logger.CORRELATION_ID, msc_logger.MarketCode, MessageText | search msc_logger.CORRELATION_ID!=NULL | transaction msc_logger.CORRELATION_ID maxspan=5m |";
         var newQuery = newQuery + " search msc_logger.MarketCode=" + marketName + "| stats count AS \"Total\" BY MessageText | sort 3 - Total";
         // Update the $searchQuery$ token value
         defaultTokenModel.set('searchQuery', newQuery);
     });

     console.log("Created Token");

     // Display the search results
     new TextInputView({
         "id": "textinput1",
         "value": mvc.tokenSafe("$searchQuery$"),
         "el": $("#text1")
     }).render();


     new TableView({
         "id": "tableindex",
         "managerid": "fl_error_search",
         "pageSize": 5,
         "el": $("#tableindex")
     }).render();
 });

the problem I have is : how to pass the marketName argument to defaultTokenModel ?
If I do as above, have this :

|datamodel msc_logger b2c search | fields msc_logger.CORRELATION_ID, msc_logger.MarketCode, MessageText | search msc_logger.CORRELATION_ID!=NULL | transaction msc_logger.CORRELATION_ID maxspan=5m | search msc_logger.MarketCode=[object Object]| stats count AS "Total" BY MessageText | sort 3 - Total

so I suppose I could use a method to get the value of that [object Object].

thanks,
Fausto

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

HI

Can you please revised below code ??

 // When the $searchQuery$ token changes, form the search query
      var defaultTokenModel = mvc.Components.get("default");
      defaultTokenModel.on("change:marketName", function(e) {
        console.log(e.attributes['marketName'])
          var newQuery = "|datamodel msc_logger b2c search | fields msc_logger.CORRELATION_ID, msc_logger.MarketCode, MessageText | search msc_logger.CORRELATION_ID!=NULL | transaction msc_logger.CORRELATION_ID maxspan=5m |";
          var newQuery = newQuery + " search msc_logger.MarketCode="+e.attributes['marketName']+" | stats count AS \"Total\" BY MessageText | sort 3 - Total";

          console.log(newQuery)
          // Update the $searchQuery$ token value
          defaultTokenModel.set('searchQuery', newQuery);
      });

Thanks

fausap
Explorer

Hi Kamlesh,

eventually, it works ! 🙂

thank you very much
Fausto

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

HI Fausto,

great..

Can you please accept answer to close this question and upvote any comment which useful to you.

Glad to help you

Thanks

0 Karma

fausap
Explorer

I noticed the xml file for the dashboard is not showing correctly.

I hope this will be more readable.

<dashboard script="fl_b2c.js">
  <label>FL ERRORS</label>
  <description></description>
  <row>
    <panel>
      <html>
        <h2>FL ERRS</h2>

        <p>Select a market:</p>
        <div id="marketlist"></div>&lt;br/&gt;

        <p>Here's the search:</p>
        <div id="text1"></div>
        <div id="tableindex"></div>
      </html>
    </panel>
  </row>
</dashboard>
0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...