Writing Hacks

Hacks are base-level UI extension for Kibana. They are included in every application and have access to all services, directives, everything.

Create your own

Hacks are provided to Kibana through plugins, so before you create any hacks you should create a plugin for them to go in.

Start with a plugin

A plugin has two important parts:

package.json file

At the root of your plugin there should be a package.json file. This file exposes some metadata for your plugin, as well as the location of extensions for Kibana.

An example of a simple package.json file can be found in the kbn_vislib_vis_types plugin that is included in Kibana. Your package.json file should look similar:

{
  "name": "my_plugin",
  "version": "0.0.1",
  "kibana": {}
}

public/ directory

The public/ directory is where all of your plugin's UI code goes, and it's where kibana will look for your extensions. Create this directory right next to your package.json at the root of your plugin.

Checkout the directory layout of the kbn_vislib_vis_types plugin for an example.

Add hacks to your plugin

Now that you have a plugin defined, adding hacks to it is simple.

1. First you need to create the file that should be loaded into the UI. This file should be somewhere in your plugin's public directory. Paste this into public/hello_world.js:

alert('hello world');

2. Now tell Kibana that this file is a hack by adding it to your package.json:

   {
     "name": "my_plugin",
     "version": "0.0.1",
     "kibana": {
       // note that paths are relative to the public directory
       "hack": "hello_world.js"
     }
   }