How to Build Your Own Kibana Plug-ins

Meet the Kibana of the future. It’s the Kibana you know and love, but with extension points for you to add your own, custom functionality. In this talk Tanya and Spencer from the Kibana team will walk you through building your first Kibana plugin.

Transcript

1. ‹#› Tanya Bragin Spencer Alger Feb 19 2016 How to Build Your Own Kibana Plug-ins
2. ‹#› Extensibility In Kibana
3. Why is extensibility important? 3
4. History of Kibana extensibility • Open source - can always fork it • Kibana 3 custom panels • Kibana 4 plugins 4
5. Goals of Kibana plugins • Evolution of Elastic UI • Experimentation === Innovation • Building cross-stack applications • Crowd-sourcing extensions 5
6. Disclaimer: Plugin framework will continue to evolve 6
7. Quick Poll 7
8. ‹#› Plugin Development
9. Plugin Resources Remember this 9 bit.ly/kibana-plugins
10. I'm not talking about Kibana 10 When I say Kibana... !
12. 12 Server UiExports Kibana bin/kibana Plugins HTTP Config Logging ! ! ! !
13. Starting a new plugin • Download kibana • Download boilerplate 13 https://www.elastic.co/downloads/kibana/ https://github.com/spalger/kibana-plugin-boilerplate
14. 14 ! The simplest plugin first
15. 15 DEMO
16. 16 DEMO
17. 17 ! Using the plugin generator
18. Using the plugin generator • Setup your kibana development environment • Install the kibana plugin generator 18 http://bit.ly/contributing-to-kibana https://npmjs.org/generator-kibana-plugin
19. Using the plugin generator 19 $ mkdir my_plugin $ cd my_pulgin $ yo kibana-plugin ? Your Plugin Name my_kibana_plugin ? Short Description An awesome Kibana plugin create package.json create index.js create public/app.js create public/less/main.less create public/templates/index.html ...
20. Using the plugin generator 20 my_kibana_plugin/ .eslintrc .gitignore package.json index.js public/ app.js less/main.less templates/index.html server/ routes/example.js
21. Using the plugin generator 21 my_kibana_plugin/ .eslintrc .gitignore package.json index.js public/ app.js less/main.less templates/index.html server/ routes/example.js
22. Using the plugin generator 22 my_kibana_plugin/ .eslintrc .gitignore package.json index.js public/ app.js less/main.less templates/index.html server/ routes/example.js
23. Using the plugin generator 23 npm start Start kibana and have it include this plugin npm run build Build a distributable archive npm run test:browser Run the browser tests in a real web browser npm tun test:server Run the server tests using mocha
24. where the party starts 24 Meet index.js !
25. Meet index.js 25 import exampleRoute from './server/routes/example'; export default function (kibana) { return new kibana.Plugin({ require: ['elasticsearch'], uiExports: { app: { title: 'My Kibana Plugin', description: 'An awesome Kibana plugin', // ... }); };
26. Meet index.js 26 import exampleRoute from './server/routes/example'; export default function (kibana) { return new kibana.Plugin({ require: ['elasticsearch'], uiExports: { app: { title: 'My Kibana Plugin', description: 'An awesome Kibana plugin', // ... }); };
27. Meet index.js 27 // ... return new kibana.Plugin({ require: ['elasticsearch'], uiExports: { app: { title: 'My Kibana Plugin', description: 'An awesome Kibana plugin', main: 'plugins/my_kibana_plugin/app' } }, config(Joi) { return Joi.object({
28. Meet index.js 28 // ... return new kibana.Plugin({ require: ['elasticsearch'], uiExports: { app: { title: 'My Kibana Plugin', description: 'An awesome Kibana plugin', main: 'plugins/my_kibana_plugin/app' } }, config(Joi) { return Joi.object({
29. Meet index.js 29 // ... uiExports: { app: { title: 'My Kibana Plugin', description: 'An awesome Kibana plugin', main: 'plugins/my_kibana_plugin/app' }, hacks: [ 'plugins/my_kibana_plugin/hack' ] }, config(Joi) {
30. Meet index.js 30 //... config(Joi) { return Joi.object({ enabled: Joi.boolean().default(true), esIndex: Joi.string().required(), }).default(); }, init(server, options) { exampleRoute(server); } });
31. Meet index.js 31 //... init(server, options) { exampleRoute(server); } }); };
32. Meet index.js 32 export default function (server) { server.route({ path: '/api/my_kibana_plugin/example', method: 'GET', handler(req, reply) { reply({ time: (new Date()).toISOString() }); } }); };
33. 33 Server UiExports Kibana bin/kibana Plugins HTTP Config Logging ! ! ! !
34. 34 Logging from a kibana plugin Make some noise ! ! ! !
35. Make some noise use your init() function 35 export default function (kibana) { return new kibana.Plugin({ //... init(server) { exampleRoute(server); const msg = `server address is: ${server.info.uri}`; console.log(msg);
 } }); };
36. Starting a new plugin 36 $ npm start > my-kibana-plugin@0.1.0 start /dev/my_kibana_plugin > ../kibana/bin/kibana --dev --plugin-path=. watching for changes (112 files) server log [info][optimize] Waiting for optimizer completion optmzr log [info][optimize] Lazy optimization of bundles for kiba server address is: https://localhost:5603 server log [info][status][plugin:my-kibana-plugin] Status changed server log [info][status][plugin:devMode] Status changed from uni server log [info][status][plugin:kibana] Status changed from unin ......
37. Starting a new plugin 37 export default function (kibana) { return new kibana.Plugin({ //... init(server) { exampleRoute(server); const msg = `server address is: ${server.info.uri}`; server.log(['info'], msg);
 } }); };
38. Starting a new plugin 38 $ npm start > my-kibana-plugin@0.1.0 start /dev/my_kibana_plugin > ../kibana/bin/kibana --dev --plugin-path=. watching for changes (112 files) server log [info][optimize] Waiting for optimizer completion optmzr log [info][optimize] Lazy optimization of bundles for kiba server log [info] server address is: https://localhost:5603 server log [info][status][plugin:my-kibana-plugin] Status changed server log [info][status][plugin:devMode] Status changed from uni server log [info][status][plugin:kibana] Status changed from unin ......
39. Starting a new plugin 39 $ npm start -- --logging.json=true > my-kibana-plug@0.1.0 start /Users/spalger/dev/es/my_kibana_plugin > ../kibana/bin/kibana --dev --plugin-path=. "--logging.json=true" watching for changes (112 files) {"type":"log","@timestamp":"2016-02-16T05:24:54+00:00","tags":["listening","info"],"pid":41523,"message":"basePath Proxy running at https:/ {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["info","optimize"],"pid":41527,"message":"Waiting for optimizer completion"} {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["info","optimize"],"pid":41526,"bundles":["kibana","statusPage"],"message":" {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["info"],"pid":41526,"message":"Plugin initialization disabled."} {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["info"],"pid":41527,"message":"server address is: https://localhost:5603"} {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:my-kibana-plug","info"],"pid":41527,"name":"plugin:my-kiban {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:devMode","info"],"pid":41527,"name":"plugin:devMode","state {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:kibana","info"],"pid":41527,"name":"plugin:kibana","state": {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:elasticsearch","info"],"pid":41527,"name":"plugin:elasticse {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:kbn_doc_views","info"],"pid":41527,"name":"plugin:kbn_doc_v {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:kbn_vislib_vis_types","info"],"pid":41527,"name":"plugin:kb {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:markdown_vis","info"],"pid":41527,"name":"plugin:markdown_v {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:metric_vis","info"],"pid":41527,"name":"plugin:metric_vis", {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:spyModes","info"],"pid":41527,"name":"plugin:spyModes","sta {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:statusPage","info"],"pid":41527,"name":"plugin:statusPage", {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:table_vis","info"],"pid":41527,"name":"plugin:table_vis","s {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["info","optimize"],"pid":41526,"bundles":["kibana","statusPage"],"message":" {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:testsBundle","info"],"pid":41527,"name":"plugin:testsBundle {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:elasticsearch","info"],"pid":41527,"name":"plugin:elasticse {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["listening","info"],"pid":41527,"message":"Server running at https://localho $ npm start -- --logging.json=true > my-kibana-plug@0.1.0 start /Users/spalger/dev/es/my_kibana_plugin > ../kibana/bin/kibana --dev --plugin-path=. "--logging.json=true" watching for changes (112 files) {"type":"log","@timestamp":"2016-02-16T05:24:54+00:00","tags":["listening","info"],"pid":41523,"message":"basePath Proxy running at https:/ {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["info","optimize"],"pid":41527,"message":"Waiting for optimizer completion"} {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["info","optimize"],"pid":41526,"bundles":["kibana","statusPage"],"message":" {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["info"],"pid":41526,"message":"Plugin initialization disabled."} {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["info"],"pid":41527,"message":"server address is: https://localhost:5603"} {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:my-kibana-plug","info"],"pid":41527,"name":"plugin:my-kiban {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:devMode","info"],"pid":41527,"name":"plugin:devMode","state {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:kibana","info"],"pid":41527,"name":"plugin:kibana","state": {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:elasticsearch","info"],"pid":41527,"name":"plugin:elasticse {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:kbn_doc_views","info"],"pid":41527,"name":"plugin:kbn_doc_v {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:kbn_vislib_vis_types","info"],"pid":41527,"name":"plugin:kb {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:markdown_vis","info"],"pid":41527,"name":"plugin:markdown_v {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:metric_vis","info"],"pid":41527,"name":"plugin:metric_vis", {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:spyModes","info"],"pid":41527,"name":"plugin:spyModes","sta {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:statusPage","info"],"pid":41527,"name":"plugin:statusPage", {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:table_vis","info"],"pid":41527,"name":"plugin:table_vis","s {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["info","optimize"],"pid":41526,"bundles":["kibana","statusPage"],"message":" {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:testsBundle","info"],"pid":41527,"name":"plugin:testsBundle {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["status","plugin:elasticsearch","info"],"pid":41527,"name":"plugin:elasticse {"type":"log","@timestamp":"2016-02-16T05:24:56+00:00","tags":["listening","info"],"pid":41527,"message":"Server running at https://localho
40. 40 Lets do something client side ! ! ! !
43. 43 http://bl.ocks.org/tomerd/1499279
44. 44 DEMO
45. UI Export Types • apps • Can use exports from any plugins • Listed in the App Switcher • Has full control of the viewport • Can use existing directives, services, filters, styles, etc. • Can also be build totally custom 45
46. UI Export Types • visTypes • Use in Visualize • Support for "embed" mode • Viewable on the Dashboard 46
47. UI Export Types • docViews • Render any document • Works inside dashboard search panels 47
48. UI Export Types • Hacks • Included in every application • No restrictions • Hook into angular • Manipulate the DOM • Inject stylesheets • Whatever! 48
49. UI Export Types • fieldFormats • spyModes • chromeNavControls • chromeConfigControls • navbarExtensions • settingsSections • aliases 49
50. ‹#› Plugins by Elastic
51. Sense 51
52. Timelion 52 {re}search app by rashidkpc
53. Monitoring 53
54. Security 54
55. Reporting 55
56. ‹#› Plugins by the Community
57. Prelert Anomaly Detective Elastic{ON} partner sponsor 57
58. Radar 58 by SIREN
59. Tag cloud 59 by stormpython
60. Try it out! • Check us out on Github • Ask questions on the Discuss forum • Engage with us on IRC (#kibana on Freenode) • Leverage community resources 60 bit.ly/kibana-plugins