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

Elastic Co

March 19, 2015
Tweet

More Decks by Elastic Co

Other Decks in Programming

Transcript

  1. { } CC-BY-ND 4.0 Prepare for Launch Do not forget

    your towel 4 github.com/elastic/kibana/blob/master/CONTRIBUTING.md
  2. { } CC-BY-ND 4.0 8 Install Development Environment > npm

    install > bower install github.com/elastic/kibana/blob/master/CONTRIBUTING.md
  3. { } 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
  4. { } 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!
  5. { } CC-BY-ND 4.0 Few activities are as delightful as

    learning new vocabulary 13 Intro to Kiban-gular ―  Tim  Gunn
  6. { } 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:
  7. { } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules

    • Modern promise api based on $q 16
  8. { } 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:
  9. { } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules

    • Modern promise api • Better require.js support based on $injector 18
  10. { } 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) { });
  11. { } 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) { // .. }; });
  12. { } CC-BY-ND 4.0 Intro to Kiban-gular • Simplify modules

    • Modern promise api • Better require.js support 21 SWEET
  13. { } 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
  14. { } 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
  15. { } 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'
  16. { } CC-BY-ND 4.0 Meet the Gang 28 <kbn-info info="Popular

    Classes and Directives"></kbn-info>
  17. { } 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
  18. { } CC-BY-ND 4.0 • High-level container for related functionality

    • Define routes and views • Theoretically pluggable Meet the Gang 32 "Application"
  19. { } 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
  20. { } CC-BY-ND 4.0 Meet the Gang 35 VisType •

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

    Very similar to visTypes in design • Implements type specific response logic
  22. { } 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
  23. { } CC-BY-ND 4.0 Meet the Gang 38 AggConfig •

    Represents a single agg • Points to an aggType • Contains params (field, interval, etc.)
  24. { } 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 ??
  25. { } 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.
  26. { } 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