Dashboards & Visualizations

Splunk Javascript: Why did the Javascript stopped working after setting/unsetting a token in dashboard?

garenilla
Explorer

Hello splunkers!

On my journey in creating a library for my team with the methods we are using on each app I have encountered a strange issue, I don't know if I have errors on my JavaScript but it's kinda weird because it "works".
In this case it's a test and I have a dashboard with 4 buttons, first one use the library and make an alert, second one use the library and set a token, third one use a library and unset a token and the last one make an alert (without using a library). When I click on the first button or on the last, it works nice but when I click on set/unset buttons it works but then all the buttons stop working. There are no error messages and I haven't seen anything weird in debug mode.

My dashboard it's pretty simple.

<dashboard script="main.js">
  <label>TestGabri1</label>
  <init>
    <set token="myToken">Change Value</set>
  </init>
  <row>
    <panel>
      <html>
      <body>
        <div id="myButtons">
          <button id="myButton0">Do Console</button>
          <button id="myButton1">Set Token</button>
          <button id="myButton2">Unset Token</button>
          <button id="myButton3">Test</button>
        </div>
        <div>
          <h2>$myToken$</h2>
        </div>
      </body>
    </html>
    </panel>
  </row>
</dashboard>

And the scripts are both on etc/apps/testApp/appserver/static
Main.js

require(["../app/testApp/appUtils",
        "splunkjs/mvc/simplexml/ready!"
    ], function (appUtils) {

    $(document).ready(function () {
        console.log("Document Ready!");
        console.log(appUtils);
        $("#myButton0").on("click",appUtils.doAlert);
        $("#myButton1").on("click",function(){
            appUtils.setToken("myToken","Value");
        });
        $("#myButton2").on("click",function(){
            appUtils.unsetToken("myToken");
        });
        $("#myButton3").on("click",function(){
            alert("This works too!");
        });
        console.log("Document Ready Done!");
    });

});

appUtils.js (the library)

define(function(require, exports, module) {
    var mvc = require("splunkjs/mvc");

    class AppUtils {
        constructor() {
            this.defaultTokenModel = mvc.Components.getInstance('default', {
                    create: true
                });
            this.submittedTokenModel = mvc.Components.getInstance('submitted', {
                    create: true
                });
        }

        doAlert() {
            //debugger;
            alert("It works!");
        }
        setToken(name, value) {
            //debugger;
            alert("Set Token " + name + " : " + value);
            this.defaultTokenModel.set(name, value);
            this.submittedTokenModel.set(name, value);
        }
        unsetToken(name) {
            //debugger;
            alert("Unset Token " + name);
            this.defaultTokenModel.unset(name);
            this.submittedTokenModel.unset(name);
        }
    }

    var appUtils = new AppUtils();
    return appUtils;
});

Can anyone give me a helping hand with this weird issue?
I'm sorry if I have misspelled something.

Thank you all!

0 Karma
1 Solution

garenilla
Explorer

Hello splunkers!

i have managed to solve this problem and it was really simple. The problem is that when you have a token in an html inside a panel, when this token changes splunk rewrite all the code inside the html, so if you have events binded to elements these are destroyed. Knowing this the solution is bind the event to the panel and delegate to the elements.
First the xml.

 <dashboard script="main.js">
   <label>TestGabri1</label>
   <init>
     <set token="myToken">Change Value</set>
   </init>
   <row>
     <panel id="myPanel">
       <html>
       <body>
         <div id="myButtons">
           <button id="myButton0">Do Console</button>
           <button id="myButton1">Set Token</button>
           <button id="myButton2">Unset Token</button>
           <button id="myButton3">Test</button>
         </div>
         <div>
           <h2>$myToken$</h2>
         </div>
       </body>
     </html>
     </panel>
   </row>
 </dashboard>

and now the javascript

 require(["../app/testApp/appUtils",
         "splunkjs/mvc/simplexml/ready!"
     ], function (appUtils) {

     $(document).ready(function () {
         console.log("Document Ready!");
         console.log(appUtils);
         $("#myPanel").on("click","#myButton0",appUtils.doAlert);
         $("#myPanel").on("click","#myButton1",function(){
             appUtils.setToken("myToken","Value");
         });
         $("#myPanel").on("click","#myButton2",function(){
             appUtils.unsetToken("myToken");
         });
         $("#myPanel").on("click","#myButton3",function(){
             alert("This works too!");
         });
         console.log("Document Ready Done!");
     });

 });

With this change it works perfectly.
I hope this help you a little if you encounter a problem like this.

Best regards!

View solution in original post

garenilla
Explorer

Hello splunkers!

i have managed to solve this problem and it was really simple. The problem is that when you have a token in an html inside a panel, when this token changes splunk rewrite all the code inside the html, so if you have events binded to elements these are destroyed. Knowing this the solution is bind the event to the panel and delegate to the elements.
First the xml.

 <dashboard script="main.js">
   <label>TestGabri1</label>
   <init>
     <set token="myToken">Change Value</set>
   </init>
   <row>
     <panel id="myPanel">
       <html>
       <body>
         <div id="myButtons">
           <button id="myButton0">Do Console</button>
           <button id="myButton1">Set Token</button>
           <button id="myButton2">Unset Token</button>
           <button id="myButton3">Test</button>
         </div>
         <div>
           <h2>$myToken$</h2>
         </div>
       </body>
     </html>
     </panel>
   </row>
 </dashboard>

and now the javascript

 require(["../app/testApp/appUtils",
         "splunkjs/mvc/simplexml/ready!"
     ], function (appUtils) {

     $(document).ready(function () {
         console.log("Document Ready!");
         console.log(appUtils);
         $("#myPanel").on("click","#myButton0",appUtils.doAlert);
         $("#myPanel").on("click","#myButton1",function(){
             appUtils.setToken("myToken","Value");
         });
         $("#myPanel").on("click","#myButton2",function(){
             appUtils.unsetToken("myToken");
         });
         $("#myPanel").on("click","#myButton3",function(){
             alert("This works too!");
         });
         console.log("Document Ready Done!");
     });

 });

With this change it works perfectly.
I hope this help you a little if you encounter a problem like this.

Best regards!

Get Updates on the Splunk Community!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

(view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...