Upload File

applications with building splunk ui and · splunk undertakes no obligation either to develop the...

  • Home
  • Documents
  • Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality
33
© 2019 SPLUNK INC. © 2019 SPLUNK INC. Applications with Splunk UI and React Visualizations

Upload: others

Post on 21-May-2020

7 views

Category:

Documents


0 download

Report

TRANSCRIPT

Page 1: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

© 2019 SPLUNK INC.

Building Applications with Splunk UI and React Visualizations

Page 2: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

During the course of this presentation, we may make forward‐looking statements regarding future events or plans of the company. We caution you that such statements reflect our current expectations and estimates based on factors currently known to us and that actual events or results may differ materially. The forward-looking statements made in the this presentation are being made as of the time and date of its live presentation. If reviewed after its live presentation, it may not contain current or accurate information. We do not assume any obligation to update any forward‐looking statements made herein.

In addition, any information about our roadmap outlines our general product direction and is subject to change at any time without notice. It is for informational purposes only, and shall not be incorporated into any contract or other commitment. Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality in a future release.

Splunk, Splunk>, Turn Data Into Doing, The Engine for Machine Data, Splunk Cloud, Splunk Light and SPL are trademarks and registered trademarks of Splunk Inc. in the United States and other countries. All other brand names, product names, or trademarks belong to their respective owners. © 2019 Splunk Inc. All rights reserved.

Forward-LookingStatements

© 2019 SPLUNK INC.

Page 3: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

Sr. Software Engineer | SplunkPatrick Wied

Software Engineer | SplunkZiyan Wang

Page 4: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

Overview• What we’re going to build / The End Result: 1min• How this would have been done in the old world: 1min• Quick reminder about React &

styled-components: 1min• The three primary building blocks that

we use for our app: 5-10min• Splunk UI intro• Dashboard Framework • React Visualizations• UI Deconstruction: 1min• Roughly associate the responsibilities

of packages to deconstructed UI: 1min• Setup: 1min• classic folder structure• The Main View: 5-10min• Dashboard definition• @splunk/dashboard/DashboardViewer (purpose, props, usage) • Add dependency• Add the viewer with definiton• The Modal View: 5-10min• Connect Main & Modal View: 3 min• configure events in dashboard definition• dashboard plugins• Summary: 5min

Page 5: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

1. Demo

2. The 3 building blocks we will use• Splunk UI• Dashboard Framework• React Visualizations

3. How we built the demo

4. Bonus

Action Plan

Page 6: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

Demo

Page 7: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

OverviewEnterprise• SimpleXML Dashboard• Custom Javascript Extension• Hide the Chrome• SplunkJS• Packaged as Splunk App

The New Way• React Single Page App• Packaged as web app• Component libraries that make it easy

to use Splunk services

Page 8: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

@splunk/react-ui...

@splunk/dashboard-core…

@splunk/react-visualizations…

Dashboard Framework

Splunk UI

React Visualizations

The 3 building blocks

Page 9: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

What’s Splunk UI• A front-end toolkit

Why Splunk UI• Documented• Isolated• Accessible• Tested• Versioned

Where to use

Splunk UI

Page 10: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

•A set of React components that make it easy to show dashboards

•Dashboards are powered by dashboard definition

{ dataSources: {...}, visualizations:{...}, layout: {...}}

Dashboard Framework

Page 11: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

DDISDODashboard Definition In Shiny Dashboard Out

dashboard framework

{ dataSources: {...}, visualizations:{...}, layout: {...}}

Dashboard Definition Shiny Dashboard

Page 12: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

• A React component to render dashboards

• Takes a dashboard definition as prop

• Exposes Dashboard Lifecycle Events via dashboardCorePlugin

<DashboardCore>

Page 13: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

React Visualizations

and many more!

Page 14: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

React Visualizations

Data Props Customization Props

Event Callback Props

Page 15: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

Let’s deconstruct the User Interface• Dashboard• Visualizations• User Interactions• Modal Window• Tab Bar• Table• Visualization

Page 16: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

• provides UI components (Table, Tab, Modal)• animates our Modal

• renders the dashboard• reacts to click events

• provides the Visualization component used in the Modal

Dashboard Framework

Splunk UI

React Visualizations

The 3 building blocks

Page 17: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

Dashboard

Main View

Modal View

Table Visualization

App Architecture

Page 18: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

Setup

Page 19: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

•React Single Page Application

•npx create-react-app buttercup-games-app

•yarn add / npm install to add dependencies

Set-up

Page 20: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

1. Used create-react-app to create the app

2. Added library dependencies• @splunk/dashboard-core

• @splunk/react-ui

• @splunk/react-visualizations

3. Added peer dependencies• styled-components

• babel-polyfill

• @splunk/dashboard-presets

What did we do?Recap

Page 21: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

The Main View

Page 22: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

•Splunk Investigate has a drag and drop editor to build dashboards

•Use the source, Luke!

Create the Dashboard Definition

Page 23: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

1. Imported the DashboardCore

2. Created a dashboard in Splunk Investigate

3. Copied the dashboard definition from source mode

4. Passed the dashboard definition toDashboardCore

What did we do?Recap

Page 24: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

The Modal View

Page 25: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

What Component we are using•Modal•TabLayout•Table•Area Visualization

The Modal View<Modal>

<TabLayout> <TabLayout.Panel>

<Area Visualization> </TabLayout.Panel>

<TabLayout.Panel> <Table>

</TabLayout.Panel><TabLayout>

</Modal>

Page 26: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

1. Imported the DashboardCore

2. Created a dashboard in Splunk Investigate

3. Copied the dashboard definition from source mode

4. Passed the dashboard definition toDashboardCore

What did we do?Recap

Page 27: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

Connect the Components

Page 28: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

1. Added event handlers to dashboard definition

2. Passed a dashboard core plugin with event callback functions

3. Set state when dashboard emits event

What did we do?Recap

Page 29: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

Bonus: Dark Mode

Page 30: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

1. Imported theme objects from our packages

2. Passed theme to ThemeProvider

3.

What did we do?Recap

Page 31: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

•How to create a dashboard that can be embedded in a web app

•How to use UI components from Splunk UI

•How to react to dashboard events

•How to use themes

What did we learn?

Page 32: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

© 2019 SPLUNK INC.

Patrick Wied | Senior Software EngineerZiyan Wang | Software Engineer

Source Code:https://github.com/splunk/customized-app-conf19

Dashboard Examples:https://github.com/splunk/dashboard-conf19-examples

Talk to us at the Visualizations Booth!

Page 33: Applications with Building Splunk UI and · Splunk undertakes no obligation either to develop the features or functionalities described or to include any such feature or functionality

RATE THIS SESSIONGo to the .conf19 mobile app to

© 2019 SPLUNK INC.

You!

Thank


Full*Stack** Splunk*Development or* “How*to*Build*a Splunk ... · Agenda! Team* Idea Implementaons* Architecture* Challenges* Final*SoluIon* Tips’n’Tricks Future* 3

Supercharge Your SOC with Automation · Splunk undertakes no obligation either to develop the features or functionality described or ... MACHINE LEARNING SELF-DRIVING EVERYTHING AUTONOMOUS

Splunk Enterprise Product Brief - Deutsche Messe AG...You can deploy Splunk Enterprise on-premises or in the cloud, use it as a SaaS service via Splunk Cloud, or in any combination

Rivium Splunk Windows · o Splunk Enterprise Security * o uberAgent* o Splunk App for Web Analytics Common Splunk Apps & Add-ons 15 SplunkingWIndows o Splunk Add-on for Microsoft

データ分析プラットフォーム「Splunk」 - Panasonicdl.it-sol.jpn.panasonic.com/data/splunk/splunk.pdfTitle データ分析プラットフォーム「Splunk」 Author パナソニック

DataOnBBoarding* - The 8th Annual Splunk Worldwide … · Splunk*Enterprise*app*or*addBon*thatextends*the*Splunk*Enterprise*framework*to*define*acustom*inputcapability* Scripted*Inputs*

Splunk in Rakuten: Splunk as a Service for all

Program Overview - Splunk...mission-critical services. None. Splunk Enterprise System Administration Splunk Enterprise Data Administration Splunk Cloud Administration Implementing

Referent / Redner Benjamin Tiggemann · 2015-07-08 · Splunk for Exchange Splunk for Enterprise Security* Splunk for Vmware Splunk for PCI Compliance* Splunk for Windows Splunk for

Splunk For IT Operational Intelligence · • Splunk Apps –Splunk App for VMware –Splunk Apps for Citrix & Hyper V –Splunk App for Microsoft Exchange –Splunk App for Active

ReversingLabs Explainable Threat Intelligence Enriches ... Data Sheets/RL-Splunk...sent to Splunk. • In Splunk, the TitaniumScale report is correlated with other available Splunk

Tenable and Splunk Integration · Splunk Splunkreceivesvulnerabilitydatacollectedby SecurityCenter Nessus NessusHost Scans,Nes-susPlugins Splunk SplunkreceivesvulnerabilitydatacollectedbyNes-

Splunk Conf2010: Corporate Express presents Splunk with SAP

Splunk Electrifiednot be incorporated into any contract or other commitment.Splunk undertakes no obligation either to develop the features or functionalities described or to include

Splunk Enterprise Product Brief · 2020-01-07 · You can deploy Splunk Enterprise on-premises or in the cloud, use it as a SaaS service via Splunk Cloud, or in any combination you

SPLUNK® ENTERPRISE - CDWwebobjects.cdw.com/.../Splunk/Product-Brief-Splunk-Enterprise-The... · Splunk Enterprise collects data from any source, including logs, clickstreams, sensors,

Admission Control using Splunk Enterprise Deployment Guide€¦ · Configuring Splunk Enterprise ... For more information on Splunk configuration, see Splunk documentation. Troubleshooting

SplunkingYour Mobile Apps - .conf19 | Splunk · Introducing Splunk for Mobile Intelligence (Splunk MINT) Deploying Splunk MINT – Intro to SDKs – Getting Started Using Splunk MINT

Exciting, To-Be-Announced Platform Session...or other commitment. Splunk undertakes no obligation either to develop the features or functionality described or to include any such feature

Leveraging*Splunk*AnalyDcs*For*Business* … · incorporated*into*any*contractor*other*commitment.*Splunk*undertakes*no*obligaon*either*to ... ANALYTICS* DIGITAL* MARKETING ... New*Advanced*Visualizaon*OpDons*In

Splunk conf2014 - Splunk Monitoring - New Native Tools for Monitoring your Splunk Deployment

Splunk Developer & Admin Certification Training...This Splunk course also includes various topics of Splunk, such as installation and configuration, Splunk Syslog, Syslog Server, log

FLASHSTACK CI FOR SPLUNK REFERENCE ARCHITECTURE or new to Splunk, you want to design a solution that will not go through peaks and valleys of performance and scale as Splunk takes

FireEye Splunk InterFireEye + Splunk: Intermediate Guidemediate Guide

Splunk for Security - exportbg_ca/documents/web...Splunk undertakes no obligation either to develop the features or functionality described or to include any such feature or functionality

Splunk P30X: Become a lean, mean, Splunkin’ …...or other commitment. Splunk undertakes no obligation either to develop the features or functionality described or to include any

Marianne*Faro* Daniel*Koops** GijsWobben - SplunkConf · PDF fileincorporated*into*any*contractor*other*commitment.*Splunk*undertakes*no*obligaon*either*to*develop* ... 9/21/2016 10:13:10

Fortscale Splunk Integrationinfo.fortscale.com/hubfs/UEBA Content/Fortscale Splunk Integration.pdf · Fortscale Splunk Integration ... Fortscale digests access and authentication

Time*ACer*Time*–** Comparing*Time*Ranges*in*Splunk* · AboutMe*! Splunk*Senior*Instructor*since*2009*! Frequentcontributor*to*Splunk*Answers*! Love*Splunk*search*language*puzzles*

Islands*of*Splunk* - .conf2017 | The 8th Annual Splunk ... · Background*! Splunk*administrators*are*increasingly*required*to*provision*Splunk* as*aservice*offering*to*mulJple*customers*

stoQ’ing your Splunk - SANS · PDF filestoQ’ingyour Splunk Ryan Kovar, Splunk Marcus LaFerrera, PUNCH SANS DFIR 2016

2016-04-18 Fight against Phishing with Splunk - · PDF fileSplunk undertakes no obligation either to develop the featuresor functionality ... 2016-04-18 Fight against Phishing with

Splunk user group - automating Splunk with Ansible

Splunk Review - University of Birmingham · Ref: Splunk Review, Dec 2014 Mohammad Rameez Shafsad [email protected] Indexing 2.2.1 Searching using splunk Splunk uses

Splunk Validated Architectures · Splunk Engineers Responsible for managing the Splunk lifecycle. Managed Service Providers Entities that deploy and run Splunk as a service for customers