topic Re: Splunk embed HTML (ServerSideInclude) in Dashboards & Visualizations

Splunk embed HTML (ServerSideInclude)

MHibbin — Sun, 10 Jun 2012 18:36:36 GMT

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

  }

Re: Splunk embed HTML (ServerSideInclude)

MHibbin — Sun, 10 Jun 2012 18:36:41 GMT

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.

Re: Splunk embed HTML (ServerSideInclude)

ziegfried — Sun, 10 Jun 2012 19:19:13 GMT

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.

Re: Splunk embed HTML (ServerSideInclude)

MHibbin — Sun, 10 Jun 2012 19:40:12 GMT

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

Re: Splunk embed HTML (ServerSideInclude)

ziegfried — Sun, 10 Jun 2012 19:42:35 GMT

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

Re: Splunk embed HTML (ServerSideInclude)

MHibbin — Sun, 10 Jun 2012 19:47:37 GMT

ah right, I see. Thanks 🙂

Re: Splunk embed HTML (ServerSideInclude)

MHibbin — Sun, 17 Jun 2012 15:42:26 GMT

@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

Re: Splunk embed HTML (ServerSideInclude)

ziegfried — Sun, 17 Jun 2012 15:47:12 GMT

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

Re: Splunk embed HTML (ServerSideInclude)

MHibbin — Sun, 17 Jun 2012 16:05:26 GMT

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

Re: Splunk embed HTML (ServerSideInclude)

ziegfried — Sun, 17 Jun 2012 16:08:29 GMT

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

Re: Splunk embed HTML (ServerSideInclude)

MHibbin — Sun, 17 Jun 2012 16:23:18 GMT

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

Re: Splunk embed HTML (ServerSideInclude)

ziegfried — Sun, 17 Jun 2012 16:27:52 GMT

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

Re: Splunk embed HTML (ServerSideInclude)

MHibbin — Sun, 17 Jun 2012 16:28:59 GMT

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

Thanks 🙂