Building and deploying Kibana plugins… And should I do it? Developing Kibana plugins seems an appealing way to enhance the Elastic frontend. Even though tactical problems can be overcome, it might not be the best choice from a strategical point of view

1. Building and deploying
Kibana plugins…
Alexandre Masselot
Elastic Meetup
March 29, 2017
… and should I do it?
@alex_mass

2. AVENUE DU THÉÂTRE, 7 – 1005 LAUSANNE > SUISSE > WWW.OCTO.CH
OCTO Suisse RECRUTE
5 consultants en 2017
rejoins.octo.com
Architecte
Software
Craftsman DataGeek
Coach
Méthodo
Expert
DevOps
Consultant
en Stratégie

3. http://blog.octo.com/en/a-journey-into-industrializing-the-
writing-and-deployment-of-kibana-plugins-riding-docker
https://github.com/alexmasselot/kibana-plugin-howto-infra

4. Kibana,
the perfect
Elasticsearch companion

7. “Cool! but I want more
than the vanilla flavor”

8. Customizing Kibana

9. Forking Kibana, a common pattern

10. Building and deploying
Kibana plugins…

12. From a list of localized tweets
Standalone
Aggregation
Field
formatter
kibana-howto-plugin-clock
kibana-howto-plugin-viz-data-country
kibana-howto-plugin-format-tweet-text

13. Format tweet text
./package.json
./public/twitter_text.css
./public/twitter_text.js
https://github.com/alexmasselot/kibana-howto-plugin-format-tweet-text

14. Format tweet text
./package.json
{
"name": "simple_twitter",
"version": "5.2.2",
"description": "A sample plugin to demonstrate field formatters",
"main": "index.js",
"kibana": {
"version": "5.2.2"
},
"devDependencies": {
"@elastic/eslint-config-kibana": "0.4.0",
"eslint": "3.11.1",
"eslint-plugin-mocha": "4.7.0",
"eslint-plugin-babel": "4.0.0",
"babel-eslint": "6.1.2",
"@elastic/plugin-helpers": "5.2.0"
},
"dependencies": {
"kibana-plugin-lodash-oo-mixin": "^1.0.2",
"lodash": "^3.10.1",
"shelf-pack": "^1.0.0"
}}

15. Format tweet text
./public/twitter_text.css
span.tweet-text span.hashtag{
color: red;
}
span.tweet-text span.at{
color: orange;
font-weight: bold;
}

16. Format tweet text
./public/twitter_text.js
let _StringProvider = function (Private) {
require('plugins/simple_twitter/twitter_text.css');
const FieldFormat = Private(require('ui/index_patterns/_field_format/field_format'));
_.class(_twitterTextFormat).inherits(FieldFormat);
_twitterTextFormat.id = 'twitter_text';
_twitterTextFormat.title = 'Twitter text';
_twitterTextFormat.fieldType = [
'string'
];
_twitterTextFormat.prototype._convert = {
html:function(val) {
var str = val.replace(/(#S+)/g, '<span class="hashtag">$1</span>');
str = str.replace(/(@S+)/g, '<span class="at">$1</span>');
return '<span class="tweet-text">'+str+'</span>';
},
text:function(val){
return '42';
}
};
return _twitterTextFormat;
};
return _StringProvider;

17. Format tweet text
#build the .zip archive
npm run build
git add build/xxx-5.2.2.zip
+ commit and push
#install the plugin
bin/kibana-plugin install
http://github…/xxx-5.2.2.zip

18. Aggregation visualization
• Angular + d3.js
https://github.com/alexmasselot/kibana-howto-plugin-viz-data-country

20. docker-compose.yml
version: '2'
services:
elasticsearch:
build: docker-containers/elasticsearch/
command: elasticsearch -Des.network.host=0.0.0.0
ports:
- "9200:9200"
- "9300:9300"
volumes:
- ./docker-containers/elasticsearch/config/elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml
elasticsearch-initial-data:
build: docker-containers/elasticsearch-initial-data/
links:
- kibana
kibana:
build: docker-containers/kibana/
volumes:
- ./docker-containers/kibana/config/:/opt/kibana/config/
ports:
- "5601:5601"
dns: 8.8.8.8
links:
- elasticsearch
jenkins:
build: docker-containers/jenkins/
dns: 8.8.8.8
volumes:
- ./docker-containers/jenkins/data/jenkins_home:/var/jenkins_home
ports:
- "8080:8080"

21. How to run it?
> git clone https://github.com/alexmasselot/kibana-plugin-howto-infra.git
> cd kibana-plugin-howto-infra
> export DOCKER_MACHINE_NAME=kibanahowto
> docker-machine create --driver=virtualbox
--virtualbox-memory 4096
--virtualbox-cpu-count 2
--virtualbox-host-dns-resolver
$DOCKER_MACHINE_NAME
> eval $(docker-machine env $DOCKER_MACHINE_NAME)
> docker-compose build
> echo "now start the machine and, when it's ready, open http://$(docker-
machine ip $DOCKER_MACHINE_NAME):5601/app/kibana#/dashboard/kibana-howto-
plugin?_g=(time:
(from:'2016-06-17T10:30:12.574Z',mode:quick,to:'2016-06-17T10:36:14.545Z'))
"
> docker-compose up

22. … and should I do it?
Building and deploying
Kibana plugins…

23. Kibana might not be
the ultimate
end user experience
outside this meetup audience…

26. 5.0.2
5.0.0
5.0.0
5.0.0
5.0
5.2.2
5.2.2
5.0.0-rc1
5.2.1
5.0.0
5.0.2
5.1.0
5.2.2
5.2.2
5.2.2
kibana current version: 5.2.2

27. Upgrading the demo plugins
was a real pain (4.2 to 5.2.2)
• No documentation available
• Compared diff commit of working plugins
• Google Developper console to debug
• … That was the last update

28. A few reasons not to go
• User Experience is tied to Kibana paradigms
• Development is not a smooth experience
• Undocumented features (resize…)
• Versioning hell

29. KISS
@alex_mass
http://blog.octo.com/en/a-journey-into-industrializing-the-writing-and-deployment-of-kibana-plugins-riding-docker