Kibana Plugin Development - Vlad Bolibruk

Kibana Plugin Development (React, ChartJS, Typescript).

Transcript

1. Kibana Plugin Development (React, ChartJS, Typescript).
2. HELLO! I am Vlad, js dev @masterofcode.com ELK stack Development process Kibana popularity 2
3. 1. ELK stack 3
4. Usual flow 4
5. Elasticsearch » Lucene lib » Reverse index » The value is stored and the document in which this value is found 5
8. Kibana 8 » Angular 1.X , React, Jquery , etc => node_modules = 1.0G » Vega vis based on D3 » Powerful search » Time query » Bar, line, pie charts, metric visualisation and many others.
13. 2. Development process 13
14. 14 Project structure » Kibana src as git submodule » Kibana-extra as folder for plugins » Shared folder for interfaces and reusable code
15. 15 » Shared folder as symlink » Editors for plugin params » Plugin is generated with node scripts/generate_plugin my_plugin_name
16. OUR PROCESS IS EASY Determine base plugin Do you need additional ES request? Parse object 16 Create React view
17. 17 Determine
19. Factory 19
20. 20 Request object for ES
21. 21 Request object for ES
22. 22 Parse
23. 23 Final dashboard part 1
24. 24 Deploy with Jenkins » “yarn build” at kibana folder optional » “yarn build” each plugin » Copy plugin to the /kibana/plugins/ » rsync changes to server and restart kibana
25. 25 Issues » Nivo charts are not customizable enough Tooltips, colors, boarders, closed complex code, svg charts. » Custom request handler is complicated » Kibana was failing to build, node error » ChartJS » Copy request handler from kibana folder and add some code » export NODE_OPTIONS=--max_old_space_size=4096 Solutions
26. 3 developers 2 front-end , 1 nodejs 1 month With everyday sync 26 10 minutes For plugin build on stage 30 minutes For full kibana build on stage Facts in numbers
27. 3. Kibana popularity 27
28. Google suggest alternative 28
32. THANKS! Any questions? You can find me at » 20awesome@gmail.com » Linkedin qr code 32 «Пойми, сейчас на проекте только и разговоров, что о Kibana и Elasticsearch. О том, как это чертовски здорово — наблюдать, как огромный текстовый лог превращается в красивые графики, а еле видимая нагрузка на CPU горит где-то в глубине top-а. А ты?.. Что ты им скажешь?»
33. 33 » https://ru.wikipedia.org/wiki/%D0%98%D0%BD% D0%B2%D0%B5%D1%80%D1%82%D0%B8%D1%8 0%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1 %8B%D0%B9_%D0%B8%D0%BD%D0%B4%D0%B5 %D0%BA%D1%81 » https://blog.overops.com/splunk-vs-elk-the-log- management-tools-decision-making-guide/ » https://logz.io/blog/15-tech-companies-chose-el k-stack/ » https://logz.io/blog/grafana-vs-kibana/ Links