Dashboards & Visualizations

Splunk embed HTML (ServerSideInclude)

MHibbin
Influencer

All,

I'm trying to include a HTML file in my advanced view, but all I get is the "div" element... The HTML should query an online API through javascript, which works fine outside of Splunk, but the moment I try to include the HTML file in Splunk I see the "div" - as in it hasn't worked correctly.

The javascript has a main function "initialise()", which I call with a "\<body onload="initialize()"\>" in the HTML and works, but when I try to call this in Splunk it does not.

I'm point Splunk to the following HTML file..

    <!DOCTYPE html>
<html>

<head>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="locations.js"></script>

<script type="text/javascript" src="maps.js"></script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width: 1200px; height: 700px;">map div</div>

</body>

</html>

And using the following XML file:

<view template="dashboard.html">
  <label>My Dashboard</label>
  <module name="AccountBar" layoutPanel="appHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>
  <module name="Message" layoutPanel="messaging">
    <param name="filter">*</param>
    <param name="clearOnJobDispatch">False</param>
    <param name="maxSize">1</param>
  </module>
  <module name="ServerSideInclude" layoutPanel="panel_row1_col1">
    <param name="src">testMap1.html</param>
  </module>
</view>

Any advice on what I'm doing wrong, it's just a simple view to display a map (yes I know there is an App for this, which is great, just not for my use-case 😞 ).

Thanks in advance,

MHibbin

EDIT - including javascript...

  var centerPoint = new google.maps.LatLng(9.449062,7.950439);
  var marker;
  var map;
  var i;

  var locations = [
     [9.449062, 7.950439, 0],
     [34.449062, 10.950439, 50]
  ];

  function initialize() {
      var mapOptions = {
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        center: centerPoint
      };

      map = new google.maps.Map(document.getElementById("map_canvas"),
              mapOptions);


      for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            map:map,
            draggable: false,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(locations[i][0], locations[i][1]),
          });
          google.maps.event.addListener(marker, 'click', toggleBounce);
      }
  }

// for toggleBounce, need to add ", toggleBounce" back into previous brackets.

  function toggleBounce() {

      if (marker.getAnimation() != null) {
        marker.setAnimation(null);
      } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
      }

  }
1 Solution

ziegfried
Influencer

When using the ServerSideInclude module you should prepare the file to only contain the fragment that should be placed in the dashboard panel. Additionally when including assets (like JS files) should rather use a server-relative url. Here's a little example that should work:

testMap1.html:

<div id="map_canvas" style="width: 1200px; height: 700px;">map div</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/static/app/myapp/locations.js"></script>
<script type="text/javascript" src="/static/app/myapp/maps.js"></script>
<script type="text/javascript">
    $(initialize); // will call intialize on DOM-ready, like <body onload="...">
</script>

(You'd have to replace the app-name (myapp) in the script source URL)

Additionally the IframeInclude module might also suit your needs.

View solution in original post

ziegfried
Influencer

When using the ServerSideInclude module you should prepare the file to only contain the fragment that should be placed in the dashboard panel. Additionally when including assets (like JS files) should rather use a server-relative url. Here's a little example that should work:

testMap1.html:

<div id="map_canvas" style="width: 1200px; height: 700px;">map div</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/static/app/myapp/locations.js"></script>
<script type="text/javascript" src="/static/app/myapp/maps.js"></script>
<script type="text/javascript">
    $(initialize); // will call intialize on DOM-ready, like <body onload="...">
</script>

(You'd have to replace the app-name (myapp) in the script source URL)

Additionally the IframeInclude module might also suit your needs.

MHibbin
Influencer

OK, thanks I will try this tomorrow when I'm in the office and check.

Thanks 🙂

0 Karma

ziegfried
Influencer

Alright, Syntax error is in the constructor call of the google.maps.Marker({...}). The javascript object ends with an trailing comma, this isn't allowed. Most browsers tolerate that, but IE doesn't.

      marker = new google.maps.Marker({
        map:map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(locations[i][0], locations[i][1]), // <--
      });
0 Karma

MHibbin
Influencer

OK I will do. I have updated the question with my javascript.

0 Karma

ziegfried
Influencer

Could be a simple syntax error. Let me know when you know which errors show up.

0 Karma

MHibbin
Influencer

Yeah there script errors, I'm not at work at the moment so can't check the specific errors. The map view does not load up when testing on IE7/8

0 Karma

ziegfried
Influencer

Are getting any script errors in IE or how can you tell there are restrictions? Jquery runs fine in IE...

0 Karma

MHibbin
Influencer

@ziegfried,

Just have another question, it looks like there are some restrictions on the scripts being run on IE 7/8, are there things you may know of that will stop this? - someone mentioned it could be the use of JQuery.

Is there a way around this at all?

Thanks

Matt

0 Karma

MHibbin
Influencer

ah right, I see. Thanks 🙂

0 Karma

ziegfried
Influencer

Yes, the template engine extracts the content of the body tag. The $-function is jQuery. You can use it because it's included by Splunk by default. Here's a link to the relevant API docs: http://api.jquery.com/jQuery/#jQuery3

0 Karma

MHibbin
Influencer

Hi Ziegfried,

That's great! I assume that because Splunk does not use the "body" tag that I "onload"ing. I'm still learning my JS, didn't know about the "$(.." bit. Is there a name for this usage, so I look it up?

Thanks for the help (once again 🙂 ).

Regards,

MHibbin

0 Karma

MHibbin
Influencer

I should note that I have also tried embedding the JS straight into the HTML file (with and without CDATA), but neither seems to work.

0 Karma
Get Updates on the Splunk Community!

Introduction to Splunk Observability Cloud - Building a Resilient Hybrid Cloud

Introduction to Splunk Observability Cloud - Building a Resilient Hybrid Cloud  In today’s fast-paced digital ...

Observability protocols to know about

Observability protocols define the specifications or formats for collecting, encoding, transporting, and ...

Take Your Breath Away with Splunk Risk-Based Alerting (RBA)

WATCH NOW!The Splunk Guide to Risk-Based Alerting is here to empower your SOC like never before. Join Haylee ...