The Contributor's Guide to the Kibana Galaxy

Don't Panic! Exploring the expanses of the Kibana galaxy alone can be daunting, but join us to discover the answer to the greatest question - how does it all work? We will venture into the belly of the beast to discover how Kibana works, and how you can modify and extend it.

In this presentation, we'll cover:
- Setting up Kibana for Development
- Under the Hood: Dependency Management to Server Architecture
- Major Components: Apps to Aggregation Types
- Contributing: Enhancing Kibana

Transcript

1. The Contributors Guide to the Kibana Galaxy Spencer Alger JavaScript Engineer
2. { } CC-BY-ND 4.0 2 spalger in #kibana spalger @spenceralger Spencer Alger
3. { } CC-BY-ND 4.0 3
4. { } CC-BY-ND 4.0 Prepare for Launch Do not forget your towel 4 github.com/elastic/kibana/blob/master/CONTRIBUTING.md
5. { } CC-BY-ND 4.0 5 Install Development Environment github.com/elastic/kibana/blob/master/CONTRIBUTING.md &
6. { } CC-BY-ND 4.0 6 Install Development Environment github.com/elastic/kibana/blob/master/CONTRIBUTING.md
7. { } CC-BY-ND 4.0 7 Install Development Environment github.com/elastic/kibana/blob/master/CONTRIBUTING.md
8. { } CC-BY-ND 4.0 8 Install Development Environment > npm install > bower install github.com/elastic/kibana/blob/master/CONTRIBUTING.md
9. { } 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
10. { } CC-BY-ND 4.0 Processing... 10
11. { } 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!
12. { } CC-BY-ND 4.0 12 var session = "technical";
13. { } CC-BY-ND 4.0 Few activities are as delightful as learning new vocabulary 13 Intro to Kiban-gular ―  Tim  Gunn
14. { } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules 14
15. { } 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:
16. { } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules • Modern promise api based on $q 16
17. { } 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:
18. { } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules • Modern promise api • Better require.js support based on $injector 18
19. { } 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) { });
20. { } 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) { // .. }; });
21. { } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules • Modern promise api • Better require.js support 21 SWEET
22. { } CC-BY-ND 4.0 Where is everything? Services, Factories, Providers, oh my! 22
23. { } 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
24. { } CC-BY-ND 4.0 What does ________ do? don't panic 24
25. { } 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
26. { } 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'
27. { } CC-BY-ND 4.0 27 What does ________ do? We <3 dev tools
28. { } CC-BY-ND 4.0 Meet the Gang 28 <kbn-info info="Popular Classes and Directives"></kbn-info>
29. { } CC-BY-ND 4.0 Modularity Rocks 29
30. { } CC-BY-ND 4.0 Registries 30 registry/apps registry/vis_types registry/spy_modes
31. { } 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
32. { } CC-BY-ND 4.0 • High-level container for related functionality • Define routes and views • Theoretically pluggable Meet the Gang 32 "Application"
33. { } 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
34. { } CC-BY-ND 4.0 Meet the Gang 34
35. { } CC-BY-ND 4.0 Meet the Gang 35 VisType • Abstract Class – VislibVisType – TemplateVisType • Defines view options and agg compatibility (schemas) • Instances are singletons
36. { } CC-BY-ND 4.0 Meet the Gang 36 AggType • Very similar to visTypes in design • Implements type specific response logic
37. { } 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 <visualize> to render 37 Vis
38. { } CC-BY-ND 4.0 Meet the Gang 38 AggConfig • Represents a single agg • Points to an aggType • Contains params (field, interval, etc.)
39. { } 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 ??
40. { } CC-BY-ND 4.0 Demo Time! 40
41. { } 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.
42. { } CC-BY-ND 4.0 42 spalger in #kibana spalger @spenceralger Spencer Alger
43. { } 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