Splunk's visualization

Search
Dashboards
Dashboard visual editor
Pivot
Reports

Web Framework
Web Framework provides the rest:
The Splunk Web Framework is built right into
Splunk Enterprise 6
Pre-built components (search managers and
Splunk views) to run Splunk searches, display
your data, and customize interactive behavior.
Splunk dashboard styles so that your apps can
have the same Splunk look and feel, including
Splunk chrome and navigation bars.
Development tools, templates, and libraries that
you can use to interact with Splunk.

Web Framework
The Web Framework includes views
for:
Visualizations
Search controls
Form inputs
Header and footer

Splunk Web Framework

Options for creating dashboards and
forms

Simple XML
Simple XML Extensions
HTML accessing SplunkJS Stack
Django Bindings
Advanced XML and the Splunk
module system

Selection of Method
data you want to present,
the complexity you need to present
the data, and
your preferences for a development
environment.

Architecture

SplunkJS Stack
Libraries for Splunk views and search
managers for working with searches
and interacting with Splunk data.
Backbone.jsprovides an MVC
framework as a structure for your
code.
RequireJSmanages dependencies.
jQueryhelps manage the document
object model (DOM).

Simple XML
Create dashboards and forms with any number of
panels that contain various visualizations of data.
Splunk Web has interactive editing tools for
creating and modifying simple XML dashboards
and panels.
Splunk provides an XML editor that you can use to
edit the source code.
Drilldown capability is available for visualizations.
PDF generation is available in various forms for
the dashboard

Simple XML Extensions

Accesses SplunkJS Stack
Custom CSS stylesheets and
JavaScript files provide more
flexibility for layout and styling.
Tokens are available for styling
elements similarly across panels in a
dashboard.
You can create custom visualizations
to model your data.

HTML accessing SplunkJS Stack

can convert a simple XML dashboard
to HTML that accesses features
available from SplunkJS Stack, such
as form inputs, tables, and charts.
Full layout control
Web development environment that
uses HTML plus JavaScript

Django Bindings
Server-side access to files,
databases, and data stores on the
server
Django templates
server-side functions not available
with HTML and JavaScript
Allows for reusable components with
Django tags.

Advanced XML and the Splunk module system

legacy Splunk applications and

dashboards created with advanced
XML and the Splunk module system
is supported
Advanced XML provides configurable
and reusable server side modules
that you use to create advanced
Splunk dashboards and applications.

Anatomy of Dashboard and

Top-level elementForm
<dashboard> or <form>
Title
<label> (Optional)
Description
<description> (Optional)
Global search
<searchTemplate> (Optional)
Time range for the global search
<earliestTime> (Optional)
<latestTime> (Optional)
Form inputs (Forms only)
<fieldset><input>
<dropdown>
<radio>
<text>
<time>

Anatomy of Dashboard and

Form
Rows
Each row contains one or more panels.
<row>
Panels
Each panel contains a visualization of search
results.
<chart>
<event>
<list>
<map>
<single>
<table>
Searches defined for panels
<searchName>
<searchString>
<searchPostProcess>

Differences between
dashboards and forms
Each has a different top-level element,
<dashboard> and <form>.
Forms have user inputs, such as a time
range picker, dropdown lists, radio group,
or a text box.
Forms often take advantage of post process
searches, although you can also do this in a
dashboard.
The order of simple XML elements differ
slightly in the source code.

Editors for Splunk dashboards

Dashboard Editor :create new dashboards,
add panels to dashboards, edit existing
dashboards, and generate PDFs for a dashboard
Panel Editor
Visualization Editor

Pivot Editor : provides more options for

defining a visualization than the Visualization
Editor because it matches properties in the
visualization with their definition in the pivot.
Splunk Source Editor
source code editor

Splunk Source Editor

Control a much wider range of dashboard panel formatting properties. Use
the custom chart configuration reference to customize the appearance of
your charts and gauges.
Create geographic maps that display location markers.
Configure advanced, dynamic drilldown behaviors (such as drilldown clicks
that take users to a second dashboard).
Create HTML panels that display static text, images, and HTML formatting.
Configure panels where you overlay charts. Splunk's charting library
includes special chart types designed specifically for overlay purposes.
Design forms that:
Include text boxes, dropdown lists, and dynamic radio buttons.
Have different searches for each panel that all make use of the input from the form
controls (text box, list, or radio button)
Make use of post-process searches (searches whose results are "post-processed" by
child panels, using reporting commands like timechart, chart, and stats).
Auto-run on page load with a default value. Users can rerun the page after it loads
with different values if they wish.

Other Views
Advanced XML views
HTML plus SplunkJS Stack

workflow for creating dashboards

Add content
Create the searches that power dashboards.
Design the user interface
Create and modify dashboards, forms, and
panels.
Add interactivity
Drill down into search data.
Customize the dashboard
Add customized features to your dashboard.

Add interactivity
use Splunk's interactive tools to
design a dashboard with searches
and visualizations. Then use the
source editor to convert the
dashboard to a form.
default drilldown from the
Visualization Editor.
dynamic drilldown
send parameters to forms or third
party web pages

Customize Dashboard
CSS styles
Add custom stylesheets for individual dashboards in
an app.
Layout
Make simple layout changes, such as rearranging
dashboard and form elements and hiding panels.
Tokens
Set custom tokens throughout the dashboard page.
Custom visualizations
Build custom visualizations as dashboard panels.
Table cell renderers
Specify custom styles and behavior within table cells.

Basic template using Django tags

{% extends "splunkdj:base_with_app_bar.html" %}
{% load splunkmvc %}
{% block title %}Basic template example (Django){% endblock title %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}{{app_name}}/custom.css" />
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css" />
{% endblock css %}
{% block content %}
<h4>A chart and an events viewer displaying results of a search</h4>
{% chart id="chart1" managerid="search1" type="bar" %}
{% eventsviewer id="eviewer1" managerid="search1" %}
{% endblock content%}
{% block managers %}
{% searchmanager id="search1"
search="index=_internal | head 1000 | stats count by sourcetype"
preview=True cache=True
status_buckets=300
%}
{% endblock managers %}

 The Dashboard Editor makes it easy to build interactive dashboards and

user workflows as well as add custom styling, behavior, and
visualizations in Simple XML, which is ideal for fast, lightweight app
customization and building. Simple XML development requires minimal
coding knowledge and is well suited for Splunk power users in IT to get
fast visualization and analytics from their machine data. Simple XML
also lets the developer convert the dashboard to HTML with one click to
do more powerful customization and integration with JavaScript.
Developers looking for more advanced functionality and capabilities can
build Splunk apps from the ground up using popular, standards-based
web technologies: JavaScript and Django. The Splunk Web Framework
lets developers quickly create Splunk apps by using prebuilt
components, styles, templates, and reusable samples as well as
supporting the development of custom logic, interactions, components,
and UI. Developers can choose to program their Splunk app using
Simple XML, JavaScript, or Django (or any combination thereof).

Splunk SDKs
alternative to working within the
Splunk Web Framework,
The Splunk SDKs available for the
release of Splunk 6:

C#
Java
JavaScript
PHP
Python
Ruby

Overview of Splunk App

APPLICATION CREATION FLOW

Install Splunk.
Installfirebugor similar JavaScript debugger, depending on your browser.
Define your presentation layer ...
Setup your app directory structure in a local directory.
Define your app in app.conf.
Define your app navigation in default.xml.
Define your app views in the/default/data/ui/viewsdirectory.
Implement your module(s) ...
Define the module class, base class and parameters.
(optional) Write your module HTML and stylesheet.
Write your client-side JavaScript code.
Write your server-side Python code.
Install and run your app ...
Copy your app directory structure to the $SPLUNK_HOME/etc/apps directory.
Start Splunkand login.
Run the Module System Tutorial app.
Debug your app ...
Restart Splunk.
Edit your code using your favorite editor, modifying the target app code or
copying your modified code to the target directory.
Restart Splunk and login, or_bumpversion and/debug/restart, as needed.

App building overview

1.Get started:
What is your use case and how do you want to solve it?
Decide what data you want to work with and how you're going to import it.
Storyboard your app so you know who will use it and how they'll navigate
around.
2.Create your app workspace:
Use app builder to create your app workspace.
A more in-depth description of this step is located in this manual as
Step 2: Create your app.
3.Add configurations to your app:
Add custom configurations to index and process your data.
App configurations include data inputs, indexes, users and roles.
A more in-depth description of this step is located in this manual as
Step 3: Add configurations.
4.Create objects for your app:
Add saved searches and reports that display the information you're
interested in.
Add dashboards and other views, and put your saved searches and reports
in your dashboards.

App building overview

5.Set access controls and permissions for your app users:
Set permissions to allow your app users to add knowledge objects to your
app.
Learn more about howobject permissions work.
Optionally add users and roles for your app. Create a role for the users you
want to access your app.
For example, if you're building an app for your web developer team, create
a role called "Web_Developer" and add all your users into this role.
A more in-depth description of this step is located in this manual as
Step 5: Set permissions.
Read more abouthow to create rolesin Securing Splunk.
6.Build navigation
Build navigation for your app so users can easily navigate to dashboards,
reports, saved searches and other views.
A more in-depth description of this step is located in this manual as
Step 6: Build a navigation for your app.
7.Optionally add a setup screen for your app.
If your app requires user input to be configured, add a setup screen.
See examples of how to do this inStep 7: Configure a setup screen.

App directory structure

All apps live in a custom directory, within$SPLUNK_HOME/etc/apps. Typically,
you do most of your work within theDefault/directory, and its subdirectories:
Default/
Put all the Splunk configuration files your app needs in Default. All Apps must
have an app.conf. Some may also contain savedsearches.conf, inputs.conf, or
other relevant configuration files. Read more about configuration files inStep
3: add configurations.
Within theDefault/directory, there are more subdirectories for configuring the
UI. These are contained
within$SPLUNK_HOME/etc/apps/<App_name>/default/data/UI/, and include:
Nav/
This directory contains only default.xml. Use this file to
build navigation for your app.
Views/
Put all the views you create in this directory. Use views tobuild dashboards,
form searchesand otheradvanced views.

App directory structure

The other subdirectories in your app are:
Appserver/
Add images, CSS or HTML to your app in theappserver/staticdirectories
within your app's directory. Use the static directory to store any Web
resources your app requires, or if you'recustomizing Splunk Web.
Bin/
Store any custom scripts for your app in the bin directory. For example,
any search scripts you may write.
Local/
Developers don't configure anything within the local dir. It is there for
app users and admins to overwrite any default
configurations.Local/mimics the same structure asDefault/
Metadata/
Store app objects permissions here in the local.meta or default.meta
files. Learn more about these files inStep 5: set permissions.