Splunk Web Framework - Part 2
Last time I showed you how easy it was to create a Splunk Web Framework App of your own. Of course the App didn't do very much so this time I'm going to show you how you can add some core Splunk functionality to it.
Before I do that however I want to talk a little bit about the App we created and the Splunk Web Framework in general. Let's start be looking again at the App. You will remember that the creation process created a home.html
file deep within the Splunk application folders. For us, with our app called smon the file was created in $SPLUNK/etc/apps/smon/django/smon/templates
. This is the first (and currently the only) HTML file for our App. We can add addiitional files here, all with a similar format.
You will recall that one unfamiliar feature of these files is that they contained directives between {% and %}. These are django directives and though we don't need to know django we do need to know a little about what goes where within these sections of the template file. The first directive {% extends "splunkdj:base_with_account_bar.html" %}
is used to build the basics of the template we start with. This makes our template inherit things from another base template file called base_with_account_bar.html
and that is why our App has started life with a menu bar and a footer. If we decide that we don't want those things we inherit from a different base template. Try changing this to be just base_with_basic_styles.html
to see the difference. You will need to load this bypassing browser cache or you may see no change. Take a look in $SPLUNK/etc/apps/framework/server/splunkdj/templates
to see the different base templates that you can inherit from.
The other django directives do different things and we shall explore some of those now.
Actually doing something
So the first thing to do is to build a markup framework for our App. this bit is very simple because it is just HTML. We need to layout how we want things to look and to create a framework for our data to live in. If you aren't familiar with HTML and CSS then you can just take an existing Web page and use that or you can go to one of the many sites which will produce a CSS/HTML template for you. The existing HTML framework lives inside the {% block content %}
and {% endblock content%}
django directives. That is to say it is between these two. It currently looks like this:
<div><div class="main-area"><p>Template message: {{message}}</p><p class="muted">You should also look in the JavaScript console...</p></div></div>
This is pretty standard and simple markup; hopefully you agree, it is a couple of nested DIV's and the {{message}}
element is not HTML but another django directive, which is how it passes variables into the HTML. What we are going to do now is to replace this section with our own HTML to allow us to place our tables charts and other elements in order to display our Splunk data. You can put your own HTML in here; my HTML is below:
<div class="dashboard-body container-fluid main-section-body" data-role="main><div> class="dashboard-header clearfix><h2>Reader Information</h2><p class="description">Details about our readers...</p><div class="dashboard-row dashboard-row2"><div class="dashboard-cell" style="width: 50%; "><div class="dashboard-panel"><div class="dashboard-element"><div class="dashboard-head"><h3>Operating Systems</h3></div><div class="dashboard-body">
{% table id="table_searchresults" managerid="search_resulttable"
drilldown="none" pageSize="13"%}</div></div></div></div><div class="dashboard-cell" style="width: 50%;"><div class="dashboard-panel"><div class="dashboard-element"><div class="dashboard-head"><h3>Operating Systems</h3></div><div class="dashboard-body">
{% chart id="chart_searchresults" managerid="search_resulttable"
type="bar" drilldown="none" height="394" %}</div></div></div></div></div></div>
You will be pretty disappointed by how your App looks but now add this lines to the {% block css %}
section and we can fix that.
<link rel="stylesheet" type="text/css"
href="{{STATIC_URL}}splunkjs/css/dashboard.css"/>
What we did is use some of the default Web Framwework styling by using the dashboard.css
stylesheets which then style the Div
classes above. You have to use the standard Splunk class names in the Div
sections to make this work. Reload your browser and you should see something a little more pleasing.
You will notice that we have two more django directives hidden deep within our HTML:
{% table id="table_searchresults" managerid="search_resulttable"
drilldown="none" pageSize="13"%}
and
{% chart id="chart_searchresults" managerid="search_resulttable"
type="bar" drilldown="none" height="394" %}
The first of these is a Splunk django table and the second is a splunk django chart. The problem is that there doesn't appear to be any data. the reason for that is that these are both visualisations. To make them work we need to link them to a search. You will see that we already have the code to do that, we just need to create those searches in the Web Framework. The first thing to notice is that both visualisations use the same search for its data managerid="search_resulttable"
.
Lets add that now… the best way to do this is to go to your splunk instance and run a search which returns the results that you want. then create a Search manager by copying code like this into the {% block managers %}
. For our exapme we need to add the {% block managers %}
after the CSS section as it isn't created for us.
{% block managers %}
{% searchmanager
id="search_resulttable"
search='host=Blog2 | rename os_name AS "Operating System" | top "Operating System"'
app="search"
cache=True
%}
{% endblock managers %}
You can see that the search is defined explicitly as part of the search manager. The id
is the name referenced in the visualisations. You can have as many search managers in you template as you need.
If all went well you should have a working Splunk app that actually displays some useful data. Mine looks like this:
Next time I'll tell you how to improve this and make it a little bit more slick. In the mean time, play around and see what you can do; get used to adding search managers and visualisations or fiddle around with the HTML markup to see if you can make things fit your need.