‹#› Tanya Bragin Spencer Alger Feb 19 2016 How to Build Your Own Kibana Plug-ins 

‹#› Extensibility In Kibana 

Why is extensibility important? 3 

History of Kibana extensibility • Open source - can always fork it • Kibana 3 custom panels • Kibana 4 plugins 4 

Goals of Kibana plugins • Evolution of Elastic UI • Experimentation === Innovation • Building cross-stack applications • Crowd-sourcing extensions 5 

Disclaimer: Plugin framework will continue to evolve 6 

Quick Poll 7 

‹#› Plugin Development 

Plugin Resources Remember this 9 bit.ly/kibana-plugins 

I'm not talking about Kibana 10 When I say Kibana... ! 

11 

12 Server UiExports Kibana bin/kibana Plugins HTTP Config Logging ! ! ! ! 

Starting a new plugin • Download kibana • Download boilerplate 13 https://www.elastic.co/downloads/kibana/ https://github.com/spalger/kibana-plugin-boilerplate 

14 ! The simplest plugin first 

15 DEMO 

16 DEMO 

17 ! Using the plugin generator 

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 

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 ... 

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 

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 

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 

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 

where the party starts 24 Meet index.js ! 

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', // ... }); }; 

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', // ... }); }; 

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({ 

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({ 

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) { 

Meet index.js 30 //... config(Joi) { return Joi.object({ enabled: Joi.boolean().default(true), esIndex: Joi.string().required(), }).default(); }, init(server, options) { exampleRoute(server); } }); 

Meet index.js 31 //... init(server, options) { exampleRoute(server); } }); }; 

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 Server UiExports Kibana bin/kibana Plugins HTTP Config Logging ! ! ! ! 

34 Logging from a kibana plugin Make some noise ! ! ! ! 

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);
 } }); }; 

Starting a new plugin 36 $ npm start > [email protected] 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 ...... 

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);
 } }); }; 

Starting a new plugin 38 $ npm start > [email protected] 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 ...... 

Starting a new plugin 39 $ npm start -- --logging.json=true > [email protected] 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 > [email protected] 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 Lets do something client side ! ! ! ! 

41 

42 

43 http://bl.ocks.org/tomerd/1499279 

44 DEMO 

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 

UI Export Types • visTypes • Use in Visualize • Support for "embed" mode • Viewable on the Dashboard 46 

UI Export Types • docViews • Render any document • Works inside dashboard search panels 47 

UI Export Types • Hacks • Included in every application • No restrictions • Hook into angular • Manipulate the DOM • Inject stylesheets • Whatever! 48 

UI Export Types • fieldFormats • spyModes • chromeNavControls • chromeConfigControls • navbarExtensions • settingsSections • aliases 49 

‹#› Plugins by Elastic 

Sense 51 

Timelion 52 {re}search app by rashidkpc 

Monitoring 53 

Security 54 

Reporting 55 

‹#› Plugins by the Community 

Prelert Anomaly Detective Elastic{ON} partner sponsor 57 

Radar 58 by SIREN 

Tag cloud 59 by stormpython 

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