|
| 1 | +# Kibana Plugin - Custom Form Filter Visualization |
| 2 | + |
| 3 | +This project is a simple tutorial for Kibana new comers trying to developer their own vizualisation plugin. The actual usecase is to create a custom form to filter data to help end-users search their data. |
| 4 | + |
| 5 | +This plugin is a demo for the accounts data which can be downloaded from elastic web site [here](https://download.elastic.co/demos/kibana/gettingstarted/accounts.zip). |
| 6 | + |
| 7 | +As plugin architecture is being under heavy redesign in 7.x and document is rather obscure, I did my best to create something simple that works. |
| 8 | + |
| 9 | +This repository is for 7.7 while [this repository](https://github.com/guyplusplus/Kibana-Plugin-Custom-Form-Filter-Visualization-Legacy) is for 7.6 legacy architecture. |
| 10 | + |
| 11 | +## Sample Screenshots |
| 12 | + |
| 13 | +Few screen shots which makes it very easy to understand. |
| 14 | + |
| 15 | + |
| 16 | + |
| 17 | + |
| 18 | + |
| 19 | + |
| 20 | + |
| 21 | +## Creating a dev. environment from scratch on Ubuntu |
| 22 | + |
| 23 | +1. Install curl and JRE |
| 24 | + |
| 25 | +``` |
| 26 | +$ sudo apt install curl |
| 27 | +$ sudo apt install openjdk-11-jre-headless |
| 28 | +``` |
| 29 | + |
| 30 | +2. Install latest kibana and elasticsearch via apt |
| 31 | + |
| 32 | +``` |
| 33 | +$ wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add - |
| 34 | +$ sudo apt-get update |
| 35 | +$ sudo apt-get install elasticsearch |
| 36 | +$ sudo apt-get install kibana |
| 37 | +``` |
| 38 | + |
| 39 | +For testing purpose, it may be required to install a specific (not latest) version of kibana or elasticsearch. |
| 40 | + |
| 41 | +``` |
| 42 | +$ sudo apt-get remove kibana |
| 43 | +$ sudo apt-get install kibana=7.6.2 |
| 44 | +``` |
| 45 | + |
| 46 | +3. Adjust listening IP address of kibana if network access is required |
| 47 | + |
| 48 | +``` |
| 49 | +$ sudo vi /etc/kibana/kibana.yml |
| 50 | + server.host: "192.168.1.77" [update with correct value] |
| 51 | +``` |
| 52 | + |
| 53 | +4. Start ElasticSearch then Kibana. Then open browser http://192.168.1.77:5601 |
| 54 | + |
| 55 | +``` |
| 56 | +$ sudo systemctl start elasticsearch |
| 57 | +$ curl -X GET "localhost:9200" |
| 58 | +... |
| 59 | +$ sudo systemctl start kibana |
| 60 | +$ |
| 61 | +``` |
| 62 | + |
| 63 | +5. Now to create a development environment, download nvm, git client and yarn |
| 64 | + |
| 65 | +``` |
| 66 | +$ curl https://raw.githubusercontent.com/creationix/nvm/v0.25.0/install.sh | bash |
| 67 | +$ nvm install 10.18.0 |
| 68 | +$ sudo apt-get install git |
| 69 | +$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - |
| 70 | +$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list |
| 71 | +$ sudo apt update |
| 72 | +$ sudo apt install yarn |
| 73 | +``` |
| 74 | + |
| 75 | +6. Download Kibana source code and select the target version |
| 76 | + |
| 77 | +``` |
| 78 | +$ git clone https://github.com/elastic/kibana.git |
| 79 | +$ cd kibana |
| 80 | +$ git checkout v7.6.2 |
| 81 | +``` |
| 82 | + |
| 83 | +7. Copy the source code with modified name inside `kibana/plugins` |
| 84 | + |
| 85 | +8. Start in dev. mode, ensuring only OSS (Open Source) is used |
| 86 | + |
| 87 | +nvm use |
| 88 | +yarn kbn bootstrap |
| 89 | +yarn start --oss |
| 90 | + |
| 91 | +9. Kernel values for file monitoring may be required |
| 92 | + |
| 93 | +``` |
| 94 | +echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf |
| 95 | +sudo sysctl -p |
| 96 | +``` |
| 97 | + |
| 98 | +10. If you have problem to start Kibana dev 7.7.0 with ElasticSearch 7.7.0, add this line in kibana config file |
| 99 | + |
| 100 | +``` |
| 101 | +elasticsearch.ignoreVersionMismatch: true |
| 102 | +``` |
| 103 | + |
| 104 | +## Building the plugin |
| 105 | + |
| 106 | +Simply add the plugin directory inside a kibana folder and zip the file. The zip structure is |
| 107 | + |
| 108 | +``` |
| 109 | +my-plugin_7.6.0.zip |
| 110 | + kibana/ |
| 111 | + my-plugin/ |
| 112 | + package.json |
| 113 | + config.js |
| 114 | + public/ |
| 115 | + ... |
| 116 | + server/ |
| 117 | + ... |
| 118 | +``` |
| 119 | + |
| 120 | +The plugin can then be installed like this. |
| 121 | + |
| 122 | +``` |
| 123 | +$ sudo ./bin/kibana-plugin --allow-root install file:///home/john/downloads/kbn_tp_custom_form_filter_accounts_7.6.0_1.0.0.zip |
| 124 | +``` |
| 125 | + |
| 126 | +Deleting then installing again fails often for me. I fix it by running this command. |
| 127 | + |
| 128 | +``` |
| 129 | +$ rm -rf /usr/share/kibana/optimize/bundles |
| 130 | +``` |
0 commit comments