Solved: Re: Splunk embed HTML (ServerSideInclude)

MHibbin · ‎06-10-2012

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

  }

ziegfried · ‎06-10-2012

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 · ‎06-10-2012

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 · ‎06-17-2012

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

Thanks 🙂

ziegfried · ‎06-17-2012

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]), // <--
      });

MHibbin · ‎06-17-2012

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

ziegfried · ‎06-17-2012

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

MHibbin · ‎06-17-2012

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

ziegfried · ‎06-17-2012

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

MHibbin · ‎06-17-2012

@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

MHibbin · ‎06-10-2012

ah right, I see. Thanks 🙂

ziegfried · ‎06-10-2012

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

MHibbin · ‎06-10-2012

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

MHibbin · ‎06-10-2012

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.

Splunk embed HTML (ServerSideInclude)

Enterprise Security Content Update (ESCU) | New Releases

Why am I not seeing the finding in Splunk Enterprise Security Analyst Queue?

Index This | What are the 12 Days of Splunk-mas?