2017 03-29-elastic-meetup-kibana

Building and deploying Kibana plugins…

Alexandre Masselot Elastic Meetup

March 29, 2017

… and should I do it?

@alex_mass

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

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

Kibana, the perfect

Elasticsearch companion

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

Customizing Kibana

Forking Kibana, a common pattern

From a list of localized tweetsStandalone

Aggregation

Field formatter

kibana-howto-plugin-clock

kibana-howto-plugin-viz-data-country

kibana-howto-plugin-format-tweet-text

Format tweet text./package.json./public/twitter_text.css./public/twitter_text.js

https://github.com/alexmasselot/kibana-howto-plugin-format-tweet-text

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" }}

Format tweet text./public/twitter_text.css

span.tweet-text span.hashtag{ color: red;}span.tweet-text span.at{ color: orange; font-weight: bold;}

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, '$1'); str = str.replace(/(@\S+)/g, '$1'); return ''+str+''; }, text:function(val){ return '42'; } };

return _twitterTextFormat; };

return _StringProvider;

Format tweet text#build the .zip archivenpm run buildgit add build/xxx-5.2.2.zip+ commit and push

#install the pluginbin/kibana-plugin install \ http://github…/xxx-5.2.2.zip

Aggregation visualization

• Angular + d3.js

https://github.com/alexmasselot/kibana-howto-plugin-viz-data-country

docker-compose.ymlversion: '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"

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

… and should I do it?


Kibana might not be the ultimate

end user experience

outside this meetup audience…

5.0.25.0.05.0.05.0.05.05.2.25.2.25.0.0-rc15.2.15.0.05.0.25.1.05.2.25.2.25.2.2

kibana current version: 5.2.2

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

A few reasons not to go

• User Experience is tied to Kibana paradigms

• Development is not a smooth experience

• Undocumented features (resize…)

• Versioning hell

KISS

@alex_mass

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