Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Contributor's Guide to the Kibana Galaxy

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

Dd9d954997353b37b4c2684f478192d3?s=128

Elastic Co

March 19, 2015
Tweet

More Decks by Elastic Co

Other Decks in Programming

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