Solved: Re: Why isn't JavaScript executing in my dashboard...

fausap · ‎09-26-2017

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();
});

kamlesh_vaghela · ‎10-03-2017

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 · ‎10-03-2017

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 · ‎10-12-2017

Hi kamlesh,

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

thanks
Fausto

kamlesh_vaghela · ‎10-12-2017

Hi fausap,

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

http://SPLUNK_SERVER/en-GB/_bump

Thanks

fausap · ‎10-13-2017

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

kamlesh_vaghela · ‎10-13-2017

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

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

Thanks

fausap · ‎10-13-2017

yes. it's very strange.

kamlesh_vaghela · ‎10-13-2017

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 · ‎11-04-2017

HI
Any update on this?

fausap · ‎11-07-2017

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

kamlesh_vaghela · ‎11-07-2017

HI

Just add below code.

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

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

Thanks
Kamlesh

fausap · ‎11-07-2017

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

kamlesh_vaghela · ‎11-07-2017

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 · ‎11-08-2017

Hi Kamlesh,

eventually, it works ! 🙂

thank you very much
Fausto

kamlesh_vaghela · ‎11-08-2017

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

fausap · ‎09-26-2017

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>

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

I hope this will be more readable.

Now Available: Cisco Talos Threat Intelligence Integrations for Splunk Security Cloud ...

Preparing your Splunk Environment for OpenSSL3

Easily Improve Agent Saturation with the Splunk Add-on for OpenTelemetry Collector