Top Banner
Copyright © 2016 Splunk Inc. Marshall Agnew Senior So>ware Engineer at Splunk Building Splunk VisualizaDons with the New Custom VisualizaDon API
23

Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

May 24, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

Copyright©2016SplunkInc.

MarshallAgnewSeniorSo>wareEngineeratSplunk

BuildingSplunkVisualizaDonswiththeNewCustomVisualizaDonAPI

Page 2: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

Disclaimer

2

DuringthecourseofthispresentaDon,wemaymakeforwardlookingstatementsregardingfutureeventsortheexpectedperformanceofthecompany.WecauDonyouthatsuchstatementsreflectourcurrentexpectaDonsandesDmatesbasedonfactorscurrentlyknowntousandthatactualeventsorresultscoulddiffermaterially.Forimportantfactorsthatmaycauseactualresultstodifferfromthosecontainedinourforward-lookingstatements,pleasereviewourfilingswiththeSEC.Theforward-lookingstatementsmadeinthethispresentaDonarebeingmadeasoftheDmeanddateofitslivepresentaDon.Ifrevieweda>eritslivepresentaDon,thispresentaDonmaynotcontaincurrentor

accurateinformaDon.WedonotassumeanyobligaDontoupdateanyforwardlookingstatementswemaymake.InaddiDon,anyinformaDonaboutourroadmapoutlinesourgeneralproductdirecDonandis

subjecttochangeatanyDmewithoutnoDce.ItisforinformaDonalpurposesonlyandshallnot,beincorporatedintoanycontractorothercommitment.SplunkundertakesnoobligaDoneithertodevelopthefeaturesorfuncDonalitydescribedortoincludeanysuchfeatureorfuncDonalityinafuturerelease.

Page 3: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

Agenda

  WhyUseCustomVisualizaDons  CustomVisualizaDonsinSplunk  OverviewoftheAPI  CodingDemo  LearningMore

3

Page 4: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

WhyVisualizaDonMaZers

4

Splunkexcelsatunderstandingmachinedata

Page 5: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

WhyVisualizaDonMaZers

5

HumansareexcellentatseeingvisualpaZerns

Page 6: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

WhyVisualizaDonMaZers

6

VisualizaDonbridgesthegap

Page 7: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

Built-InVisualizaDons

7

Splunkhasbuilt-invisualizaDonsformanyofthemostcommondatatypesandtasks

Page 8: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

Built-InVisualizaDons

8

Splunkhasbuilt-invisualizaDonsformanyofthemostcommondatatypesandtasks

Page 9: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

CustomVisualizaDons

9

ThevisualizaDonframeworkmakesitpossibleforSplunkuserstobringinanyvisualizaDontheywant

Page 10: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

QuickDemo

10

Page 11: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

SplunkSupportedVisualizaDons

11

•  SankeyDiagram•  Treemap•  Timeline•  Punchcard•  CalendarHeatmap•  HorseshoeMeter•  StatusIndicator•  HorizonChart•  LocaDontracker•  ParallelCoordinates•  BulletChart

WebuiltasetofsupportedvisualizaDonstobothaddresssomeofthetoprequests,andtoserveassamplesfordevelopers

ButthatisjusttheDpoftheiceberg—therealpoweristheAPI

Page 12: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

CustomVisualizaDonsinSplunk

12

  Packagedinapps  AvailableacrossSplunk(Search,dashboards,reports,otherapps)  PermissionedlikeallSplunkknowledgeobjects  CanbefoundandinstalledfromtheSplunkUI  ImplementedinJavaScriptusinganyframeworkadeveloperwants

Page 13: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

ACustomVisualizaDonApp

13

appnameappserverstaDcvisualizaDons<visualizaDon_name>

visualizaDon.jsvisualizaDon.cssformaZer.htmldefaultvisualizaDons.conf

Page 14: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

JavaScript

14

SplunkVisualizaDonBase–  Mainentrypointforlogicandrendering–  ExtendinvisualizaDon.js–  Overridedatahandlingandrenderingmethods

SplunkVisualizaDonUDls–  UDliDesforcolorschemes,Dmezonehandling,booleannormalizaDon,and

securitybest-pracDces

Page 15: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

formaZer.html

15

  Containshtmlforthevizeditordialog  PropertyvaluesgetpickedupandpassedtoJavaScript  SupportsSplunk-styleformelementsaswebcomponents  Alsosupportshtmlinputs

Page 16: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

visualizaDon.css

16

  ContainscssrulesforthevisualizaDon

Page 17: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

visualizaDons.conf

17

  System-wideconfiguraDonforthevisualizaDons–  User-facinglabels–  Userhelpstrings–  Defaultheight–  Selectability

  CandeclaremulDplevizesperapp

Page 18: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

Webpack

18

  WestronglysuggestusingwebpacktobuildvisualizaDonsintoacontainedpackage

Page 19: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

ACustomVisualizaDonAppwithWebpack

19

appnameappserverstaDc

visualizaDons<visualizaDon_name>srcvisualizaDon_source.js

webpack.config.jsvisualizaDon.jsvisualizaDon.cssformaZer.html

package.jsondefaultvisualizaDons.conf

Page 20: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

CodingDemo

20

Page 21: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

LearningMore

21

  What'sNew–CustomVisualiza4ons:MichaelPorath  Dashboards,Aler4ng,Repor4ngandVisualiza4on-What’sNew:MichaelPorathandNicholasFilippi

  STEPupyourappdevelopmentgame:TeddHellmannandDavidPoncelow  DashboardWizardry:SiegfriedPuchbauerandNicholasFilippi  FasterSplunkAppCer4fica4onwithSplunkAppInspect:GrigoriMelnikandAndrewNortrup

  BestPrac4cesforDevelopingSplunkAppsandAdd-ons:JasonConger  Visualiza4onanddashboardclinicsandboothsontheshowfloor

RelatedbreakoutsessionsandacDviDes…

Page 22: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

LearningMore

22

CustomVisualizaDonOverviewStep-by-StepTutorialAPIReferenceExamplesonSplunkBaseCodeFromthisTalk

OnlineResources

Page 23: Building Splunk Visualizaons with the New Custom ... · package.json default visualizaons.conf Coding Demo 20 Learning More 21 What's New – Custom Visualiza4ons: Michael Porath

THANKYOU