Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question

In an HTML dashboard, why is a simple JS file parsed into HTML?

curtismcginity
Explorer
‎04-07-2021 05:51 PM

In the context of an HTML Dashboard, why would a simple JS file get parsed into HTML within .../static/app/myapp/?

For example, line 20 of myClass.js reads:

 

size(width,height) {

 

which, inside of my.splunk.domain/en-US/static/@12B...85/app/myapp/myClass.js becomes

 

<tr>
  <td id="L20" class="blob-num js-line-number" data-line-number="20"></td>
  <td id="LC20" class="blob-code blob-code-inner js-file-line">
   <span class=pl-en>size</span>
   <span class=pl-kos>(</span>
   <span class=pl-s1>width</span>
   <span class=pl-kos>,</span>
   <span class=pl-s1>height</span>
   <span class=pl-kos>)</span>
   <span class=pl-kos>{</span></td>
</tr>

 

and so on for the entire file. Please note that myClass.js has the simple form

 

// this is the entire file
class myClass {
 // vanilla js stuff...
}

 

Here's the relevant context:

  • I have an HTML dashboard, properly converted from a simple XML via the UI.
  • This dashboard uses two JS files: d3.js and myClass.js.
    • The first file, d3, works just fine; the second is included identically:

 

require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0, // Disable require.js load timeout
    paths: {
        'd3': '{{SPLUNKWEB_URL_PREFIX}}/static/app/myapp/d3v5',
        'myClass': '{{SPLUNKWEB_URL_PREFIX}}/static/app/myapp/myClass'
    }
});​
require([
    "splunkjs/mvc",
    // ...
    "myClass",
    "d3"
    // Add comma-separated libraries and modules manually here, for example:
    // ..."splunkjs/mvc/simplexml/urltokenmodel"
    ],
    function(
        mvc,
        // ...
        myClass,
        d3
        // Add comma-separated parameter names here, for example:
        // ...UrlTokenModel
        ) {
      // Everything else...
    }​

 

  • Both scripts are properly located in /splunk/etc/apps/myapp/appserver/static
  • myClass.js does depend on d3.js.
  • The browser console logs two errors:
    • Uncaught SyntaxError: Unexpected token '<' in myClass.js:

 

// Translations for en_US
i18n_register({"plural": function(n) { return n == 1 ? 0 : 1; }, "catalog": {}});

<!DOCTYPE html> // ERROR THROWN HERE
// ...

 

  • bubbling to Uncaught TypeError: Cannot read property 'myProperty' of undefined

Again, d3.js is also included in the same way and works fine; the script includes a similar preamble but is otherwise unchanged.

Any ideas and/or solutions would be very much appreciated. Also, apologies for the formatting; extra spaces are being inserted.

Labels (1)
Labels
0 Karma
Reply
Get Updates on the Splunk Community!

Dashboards: Hiding charts while search is being executed and other uses for tokens

There are a couple of features of SimpleXML / Classic dashboards that can be used to enhance the user ...

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

This is the fourth post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how ...

Brains, Bytes, and Boston: Learn from the Best at .conf25

When you think of Boston, you might picture colonial charm, world-class universities, or even the crack of a ...
Top