Learn How To Create a Custom Threat Map in Splunk: Part 3



In part 2, I went over the customization of our Threat Map including adding our skull icons and popovers to the map.

Now that we have our custom map, let’s create an area chart that will populate based on a token value we pass it from our map when we click on a specific source ip.

Also, you may watch the associated screencasts if you prefer.

Part 1: Add our new Search Manager

Below the mapsearch searchmanager add the following:

var timeRangeSearch = new SearchManager({
    id: "ip-timerange",
    managerid: "ip-timerange",
    search: 'sourcetype=ufw | search SRC=$ip_address$ | timechart count by SRC',
    earliest_time: "-30d@d",
    latest_time: "now",
    preview: true,
}, {tokens: true});

In our search, we are defining a new token $ip_address$ for SRC. This token value will be set from our map when we click on a specific src. That value will then be passed to this search’s token $ip_address$ so it populates the search. I also defined the tokens: true option which makes all the properties in the search manager token safe.

Part 2: Add our area chart visualization

At this point, let’s add the ChartView. Place the following below your CustomGoogleMapView:

var areaView = new ChartView({
    id: "timerange-search",
    managerid: "ip-timerange",
    type: "area",
    el: $("#ip-timechart")
}).render();

Now, we need to add the #ip-timechart, so it renders the area chart. So, go back up to the {% block content %} section and add the #ip-timechart div so it looks like this:

<div>
    <div>
        <div id="googlemap"></div>
        <div id="ip-timechart"></div>
    </div>
</div>

If you go back to view the page in your browser and you click on a specific location, you’ll notice that the chart view below is still not populating any data. This is because we still need to set the token value.

Part 3: Set the token value

The only thing left to do is to set the token value, which luckily is very easy to do. In order to set the value all we need is something like this: tokens.set("<token_name>", <value>);

First you will want to define tokens with var tokens = mvc.Components.getInstance("default"); which you can place in the same place as the other variables we've defined previously.

Then, we will want to add the following to the click event listener we currently have set up in the map, because we want the value set when we click on a specific location in the map. So, set the token in the listener so it looks something like this:

google.maps.event.addListener(marker, 'click', function() {
    … code omitted for brevity …
    tokens.set("ip_address", src_ip);
});

Here, we are setting the $ip_address$ token with the src_ip value that we provide when we click on a specific location in our map.

If you go back to view the page in the browser you should see something like this:

Map Area Chart 1024X476
Map area

We can apply the same principle across multiple charts and graphs. So, if we wanted to, we could populate many charts at once, or we could add a link to our popover which drills down to a detailed search that we define.

Congratulations! You now have a customized Splunk Threat Map built with Google Maps




Close off Canvas Menu