The Contributor's Guide to the Kibana Galaxy

Slide 1

Slide 1 text

The Contributors Guide to the Kibana Galaxy Spencer Alger JavaScript Engineer

Slide 2

Slide 2 text

{ } CC-BY-ND 4.0 2 spalger in #kibana spalger @spenceralger Spencer Alger

Slide 3

Slide 3 text

{ } CC-BY-ND 4.0 3

Slide 4

Slide 4 text

{ } CC-BY-ND 4.0 Prepare for Launch Do not forget your towel 4 github.com/elastic/kibana/blob/master/CONTRIBUTING.md

Slide 5

Slide 5 text

{ } CC-BY-ND 4.0 5 Install Development Environment github.com/elastic/kibana/blob/master/CONTRIBUTING.md &

Slide 6

Slide 6 text

{ } CC-BY-ND 4.0 6 Install Development Environment github.com/elastic/kibana/blob/master/CONTRIBUTING.md

Slide 7

Slide 7 text

{ } CC-BY-ND 4.0 7 Install Development Environment github.com/elastic/kibana/blob/master/CONTRIBUTING.md

Slide 8

Slide 8 text

{ } CC-BY-ND 4.0 8 Install Development Environment > npm install > bower install github.com/elastic/kibana/blob/master/CONTRIBUTING.md

Slide 9

Slide 9 text

{ } CC-BY-ND 4.0 9 Liftoff Development Environment • Kibana server (dev edition) • on changes: – less → css – jshint – run tests > grunt dev --with-es Kibana localhost:5601 github.com/elastic/kibana/blob/master/CONTRIBUTING.md Test Runner localhost:5601/test/unit

Slide 10

Slide 10 text

{ } CC-BY-ND 4.0 Processing... 10

Slide 11

Slide 11 text

{ } CC-BY-ND 4.0 Process • Start with an issue • Claim the issue • Submit a WIP pull-request 11 submit WIP feedback & revise merge assign review github.com/elastic/kibana/blob/master/CONTRIBUTING.md HOORAY!

Slide 12

Slide 12 text

{ } CC-BY-ND 4.0 12 var session = "technical";

Slide 13

Slide 13 text

{ } CC-BY-ND 4.0 Few activities are as delightful as learning new vocabulary 13 Intro to Kiban-gular ― Tim Gunn

Slide 14

Slide 14 text

{ } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules 14

Slide 15

Slide 15 text

{ } CC-BY-ND 4.0 Intro to Kiban-gular 15 Module Factory • Creates and maps angular modules • Defines module dependencies (optional) • Load in any order angular.module('kibana', []) Angular: require('modules').get('kibana') Kiban-gular:

Slide 16

Slide 16 text

{ } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules • Modern promise api based on $q 16

Slide 17

Slide 17 text

{ } CC-BY-ND 4.0 Intro to Kiban-gular 17 Modern promise api function asyncOperation() {  var defer = $q.defer(); asyncOp(defer.resolve); return defer.promise; } Angular: function asyncOperation() {  return new Promise(function (resolve, reject) { asyncOp(resolve); }); } Kiban-gular:

Slide 18

Slide 18 text

{ } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules • Modern promise api • Better require.js support based on $injector 18

Slide 19

Slide 19 text

{ } CC-BY-ND 4.0 Intro to Kiban-gular 19 require('notify/notify'); require('courier/courier'); require('index_patterns/index_patterns'); require('state_management/app_state'); require('services/timefilter'); app.controller('discover', function ($scope, config, courier, $route, $window, savedSearches, savedVisualizations, Notifier, $location, globalState, AppState, timefilter, AdhocVis, Promise) { });

Slide 20

Slide 20 text

{ } CC-BY-ND 4.0 Intro to Kiban-gular 20 Private module loader app.controller('discover', function (Private, $http) { var subModule = Private(require('module/sub_module')); // ... }); define(function (require) { return function SubModuleProvider($http) { // .. }; });

Slide 21

Slide 21 text

{ } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules • Modern promise api • Better require.js support 21 SWEET

Slide 22

Slide 22 text

{ } CC-BY-ND 4.0 Where is everything? Services, Factories, Providers, oh my! 22

Slide 23

Slide 23 text

{ } CC-BY-ND 4.0 Where is everything? 23 Inside src/kibana/ components angular providers that make up the Kibana "api" registry modifiable lists of application components (vis types, field formats, etc.) plugins Theoretically pluggable pieces of Kibana. filters, directives, etc. Additional angular components, mostly to support UI utils helper modules, unaware of angular

Slide 24

Slide 24 text

{ } CC-BY-ND 4.0 What does ________ do? don't panic 24

Slide 25

Slide 25 text

{ } CC-BY-ND 4.0 25 What does ________ do? Search for a directive name to find it's implementation To find the directive from the UI, find the directive name and convert it to lowerCamelCase vis-‐agg-‐param-‐editor visAggParamEditor

Slide 26

Slide 26 text

{ } CC-BY-ND 4.0 26 What does ________ do? Search for a modules path to see where it's used To find usage of a file convert the filename into a module id and search the source. /src/kibana/utils/datemath.js 'utils/datemath'

Slide 27

Slide 27 text

{ } CC-BY-ND 4.0 27 What does ________ do? We <3 dev tools

Slide 28

Slide 28 text

{ } CC-BY-ND 4.0 Meet the Gang 28

Slide 29

Slide 29 text

{ } CC-BY-ND 4.0 Modularity Rocks 29

Slide 30

Slide 30 text

{ } CC-BY-ND 4.0 Registries 30 registry/apps registry/vis_types registry/spy_modes

Slide 31

Slide 31 text

{ } CC-BY-ND 4.0 UI Directives 31 kbn-info Shows a little help icon with a tooltip input-focus Focus an input when it first becomes visible visualize Renders a Vis object

Slide 32

Slide 32 text

{ } CC-BY-ND 4.0 • High-level container for related functionality • Define routes and views • Theoretically pluggable Meet the Gang 32 "Application"

Slide 33

Slide 33 text

{ } CC-BY-ND 4.0 Meet the Gang 33 SearchSource • Wraps the elasticsearch client • Exposes event-like interface for results • Can "inherit" another search source

Slide 34

Slide 34 text

{ } CC-BY-ND 4.0 Meet the Gang 34

Slide 35

Slide 35 text

{ } CC-BY-ND 4.0 Meet the Gang 35 VisType • Abstract Class – VislibVisType – TemplateVisType • Defines view options and agg compatibility (schemas) • Instances are singletons

Slide 36

Slide 36 text

{ } CC-BY-ND 4.0 Meet the Gang 36 AggType • Very similar to visTypes in design • Implements type specific response logic

Slide 37

Slide 37 text

{ } CC-BY-ND 4.0 Meet the Gang • Represents a single vis • Points to a visType • Contains the view options • Owns 0 or more aggConfigs • Pass to to render 37 Vis

Slide 38

Slide 38 text

{ } CC-BY-ND 4.0 Meet the Gang 38 AggConfig • Represents a single agg • Points to an aggType • Contains params (field, interval, etc.)

Slide 39

Slide 39 text

{ } CC-BY-ND 4.0 • Abstract class • Basic object persistence to elasticsearch • Avoids getters and setters • Can own a searchSource Meet the Gang 39 SavedObject SavedDashboard SavedVis SavedSearch SavedObject ??

Slide 40

Slide 40 text

{ } CC-BY-ND 4.0 Demo Time! 40

Slide 41

Slide 41 text

{ } CC-BY-ND 4.0 41 The following demo is a preview designed to illustrate how Kibana works internally. All APIs shown are evolving and are likely to change.

Slide 42

Slide 42 text

{ } CC-BY-ND 4.0 42 spalger in #kibana spalger @spenceralger Spencer Alger

Slide 43

Slide 43 text

{ } This work is licensed under the Creative Commons Attribution-NoDerivatives 4.0 International License. To view a copy of this license, visit: http://creativecommons.org/licenses/by-nd/4.0/ or send a letter to: Creative Commons PO Box 1866 Mountain View, CA 94042 USA CC-BY-ND 4.0 43