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 FrameworkOptions 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.js provides an MVC framework as a structure for your code.

• RequireJS manages dependencies.• jQuery helps 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 Form• Top-level element

<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>

• PanelsEach 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 contentCreate the searches that power dashboards.

• Design the user interfaceCreate and modify dashboards, forms, and panels.

• Add interactivityDrill down into search data.

• Customize the dashboardAdd 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 stylesAdd custom stylesheets for individual dashboards in an app.

• LayoutMake simple layout changes, such as rearranging dashboard and form elements and hiding panels.

• TokensSet custom tokens throughout the dashboard page.

• Custom visualizationsBuild custom visualizations as dashboard panels.

• Table cell renderersSpecify 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 FLOWInstall Splunk.

Install firebug or 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/views directory.

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 Splunk and 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 _bump version and /debug/restart, as needed.

App building overview1. 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.• A more in-depth description of this step is located in this manual as Step 4: Add Objects.

App building overview5. 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 how object 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 about how to create roles in 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 in Step 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 the Default/ 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 to build dashboards,

form searches and other advanced views.

App directory structure• The other subdirectories in your app are:Appserver/• Add images, CSS or HTML to your app in the appserver/static directories within

your app's directory. Use the static directory to store any Web resources your app requires, or if you're customizing 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 as Default/

Metadata/• Store app objects permissions here in the local.meta or default.meta files. Learn

more about these files in Step 5: set permissions.