Skip to content

Commit

Permalink
Merge branch 'master' into saved-object-find-refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
stacey-gammon authored Dec 14, 2016
2 parents f8f842f + bff1533 commit 1ee49af
Show file tree
Hide file tree
Showing 1,120 changed files with 9,500 additions and 9,932 deletions.
10 changes: 7 additions & 3 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
/optimize
/src/fixtures/vislib/mock_data
/src/ui/public/angular-bootstrap
/test/fixtures/scenarios
/src/core_plugins/console/public/webpackShims
/src/core_plugins/console/public/tests/webpackShims
/src/core_plugins/timelion/bower_components
/src/core_plugins/timelion/vendor_components
test/fixtures/scenarios
optimize
test/fixtures/scenarios
/src/ui/public/utils/decode_geo_hash.js
2 changes: 2 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
---
extends: '@elastic/kibana'
rules:
no-unused-vars: off
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,4 @@ selenium
*.swp
*.swo
*.out
src/ui_framework/doc_site/build/*.js*
12 changes: 0 additions & 12 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,6 @@ module.exports = function (grunt) {
' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= package.author.company %>;' +
' Licensed <%= package.license %> */\n'
},

lintThese: [
'Gruntfile.js',
'<%= root %>/tasks/**/*.js',
'<%= root %>/test/**/*.js',
'<%= src %>/**/*.js',
'!<%= src %>/ui/public/angular-bootstrap/**/*.js',
'!<%= src %>/core_plugins/timelion/bower_components/**/*.js',
'!<%= src %>/core_plugins/timelion/vendor_components/**/*.js',
'!<%= src %>/fixtures/**/*.js',
'!<%= root %>/test/fixtures/scenarios/**/*.js'
]
};

grunt.config.merge(config);
Expand Down
4 changes: 4 additions & 0 deletions config/kibana.yml
Original file line number Diff line number Diff line change
Expand Up @@ -97,3 +97,7 @@
# Set the interval in milliseconds to sample system and process performance
# metrics. Minimum is 100ms. Defaults to 5000.
#ops.interval: 5000

# The default locale. This locale can be used in certain circumstances to substitute any missing
# translations.
#i18n.defaultLocale: "en"
16 changes: 16 additions & 0 deletions docs/development.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
[[development]]
= Contributing to Kibana

[partintro]
--
Contributing to Kibana can be daunting at first, but it doesn't have to be. If
you're planning a pull request to the Kibana repository, you may want to start
with <<core-development>>.

If you'd prefer to use Kibana's internal plugin API, then check out
<<plugin-development>>.
--

include::development/core-development.asciidoc[]

include::development/plugin-development.asciidoc[]
12 changes: 12 additions & 0 deletions docs/development/core-development.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
[[core-development]]
== Core Development

* <<development-basepath>>
* <<development-dependencies>>
* <<development-modules>>

include::core/development-basepath.asciidoc[]

include::core/development-dependencies.asciidoc[]

include::core/development-modules.asciidoc[]
87 changes: 87 additions & 0 deletions docs/development/core/development-basepath.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
[[development-basepath]]
=== Considerations for basePath

All communication from the Kibana UI to the server needs to respect the
`server.basePath`. Here are the "blessed" strategies for dealing with this
based on the context:

[float]
==== `<img>` and `<a>` elements

Write the `src` or `href` urls as you would without the base path, but then
replace `src` or `href` with `kbn-src` or `kbn-href`.

["source","shell"]
-----------
<img kbn-src="plugins/kibana/images/logo.png">
-----------

[float]
==== Getting a static asset url

Use webpack to import the asset into the build. This will give you a URL in
JavaScript and gives webpack a chance to perform optimizations and
cache-busting.

["source","shell"]
-----------
// in plugin/public/main.js
import uiChrome from 'ui/chrome';
import logoUrl from 'plugins/facechimp/assets/banner.png';
uiChrome.setBrand({
logo: `url(${logoUrl}) center no-repeat`
});
-----------

[float]
==== API requests from the front-end

Use `chrome.addBasePath()` to append the basePath to the front of the url.

["source","shell"]
-----------
import chrome from 'ui/chrome';
$http.get(chrome.addBasePath('/api/plugin/things'));
-----------

[float]
==== Server side

Append `config.get('server.basePath')` to any absolute URL path.

["source","shell"]
-----------
const basePath = server.config().get('server.basePath');
server.route({
path: '/redirect',
handler(req, reply) {
reply.redirect(`${basePath}/otherLocation`);
}
});
-----------

[float]
==== BasePathProxy in dev mode

The Kibana dev server automatically runs behind a proxy with a random
`server.basePath`. This way developers will be constantly verifying that their
code works with basePath, while they write it.

To accomplish this the `serve` task does a few things:

1. change the port for the server to the `dev.basePathProxyTarget` setting (default `5603`)
2. start a `BasePathProxy` at `server.port`
- picks a random 3-letter value for `randomBasePath`
- redirects from `/` to `/{randomBasePath}`
- redirects from `/{any}/app/{appName}` to `/{randomBasePath}/app/{appName}` so that refreshes should work
- proxies all requests starting with `/{randomBasePath}/` to the Kibana server

This proxy can sometimes have unintended side effects in development, so when
needed you can opt out by passing the `--no-base-path` flag to the `serve` task
or `npm start`.

["source","shell"]
-----------
npm start -- --no-base-path
-----------
103 changes: 103 additions & 0 deletions docs/development/core/development-dependencies.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
[[development-dependencies]]
=== Managing Dependencies

While developing plugins for use in the Kibana front-end environment you will
probably want to include a library or two (at least). While that should be
simple to do 90% of the time, there are always outliers, and some of those
outliers are very popular projects.

Before you can use an external library with Kibana you have to install it. You
do that using...

[float]
==== npm (preferred method)

Once you've http://npmsearch.com[found] a dependency you want to add, you can
install it like so:

["source","shell"]
-----------
npm install --save some-neat-library
-----------

At the top of a javascript file, just import the library using it's name:

["source","shell"]
-----------
import someNeatLibrary from 'some-neat-library';
-----------

Just like working in node.js, front-end code can require node modules installed
by npm without any additional configuration.

[float]
==== webpackShims

When a library you want to use does use es6 or common.js modules but is not
available on npm, you can copy the source of the library into a webpackShim.

["source","shell"]
-----------
# create a directory for our new library to live
mkdir -p webpackShims/some-neat-library
# download the library you want to use into that directory
curl https://cdnjs.com/some-neat-library/library.js > webpackShims/some-neat-library/index.js
-----------

Then include the library in your JavaScript code as you normally would:

["source","shell"]
-----------
import someNeatLibrary from 'some-neat-library';
-----------

[float]
==== Shimming third party code

Some JavaScript libraries do not declare their dependencies in a way that tools
like webpack can understand. It is also often the case that libraries do not
`export` their provided values, but simply write them to a global variable name
(or something to that effect).

When pulling code like this into Kibana we need to write "shims" that will
adapt the third party code to work with our application, other libraries, and
module system. To do this we can utilize the `webpackShims` directory.

The easiest way to explain how to write a shim is to show you some. Here is our
webpack shim for jQuery:

["source","shell"]
-----------
// webpackShims/jquery.js
module.exports = window.jQuery = window.$ = require('node_modules/jquery/dist/jquery');
require('ui/jquery/findTestSubject')(window.$);
-----------

This shim is loaded up anytime an `import 'jquery';` statement is found by
webpack, because of the way that `webpackShims` behaves like `node_modules`.
When that happens, the shim does two things:

. Assign the exported value of the actual jQuery module to the window at `$` and `jQuery`, allowing libraries like angular to detect that jQuery is available, and use it as the module's export value.
. Finally, a jQuery plugin that we wrote is included so that every time a file imports jQuery it will get both jQuery and the `$.findTestSubject` helper function.

Here is what our webpack shim for angular looks like:

["source","shell"]
-----------
// webpackShims/angular.js
require('jquery');
require('node_modules/angular/angular');
require('node_modules/angular-elastic/elastic');
require('ui/modules').get('kibana', ['monospaced.elastic']);
module.exports = window.angular;
-----------

What this shim does is fairly simple if you go line by line:

. makes sure that jQuery is loaded before angular (which actually runs the shim above)
. load the angular.js file from the npm installation
. load the angular-elastic plugin, a plugin we want to always be included whenever we import angular
. use the `ui/modules` module to add the module exported by angular-elastic as a dependency to the `kibana` angular module
. finally, export the window.angular variable. This means that writing `import angular from 'angular';` will properly set the angular variable to the angular library, rather than undefined which is the default behavior.
80 changes: 80 additions & 0 deletions docs/development/core/development-modules.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
[[development-modules]]
=== Modules and Autoloading

[float]
==== Autoloading

Because of the disconnect between JS modules and angular directives, filters,
and services it is difficult to know what you need to import. It is even more
difficult to know if you broke something by removing an import that looked
unused.

To prevent this from being an issue the ui module provides "autoloading"
modules. The sole purpose of these modules is to extend the environment with
certain components. Here is a breakdown of those modules:

- *`import 'ui/autoload/styles'`*
Imports all styles at the root of `src/ui/public/styles`

- *`import 'ui/autoload/directives'`*
Imports all directives in `src/ui/public/directives`

- *`import 'ui/autoload/filters'`*
Imports all filters in `src/ui/public/filters`

- *`import 'ui/autoload/modules'`*
Imports angular and several ui services and "components" which Kibana
depends on without importing. The full list of imports is hard coded in the
module. Hopefully this list will shrink over time as we properly map out
the required modules and import them were they are actually necessary.

- *`import 'ui/autoload/all'`*
Imports all of the above modules

[float]
==== Resolving Require Paths

Kibana uses Webpack to bundle Kibana's dependencies.

Here is how import/require statements are resolved to a file:

NOTE: if you're familiar with the node.js algorithm, the changes are in *2.ii* and *3.i.f* to *3.i.g*

. Pick an algorithm
* if the path starts with a '.'
** append it the directory of the current file
** proceed to *3*
* if the path starts with a '/'
** search for this exact path
** proceed to *3*
* proceed to *2*
. Search for a named module
* `moduleName` = dirname(require path)`
* match if `moduleName` is or starts with one of these aliases
** replace the alias with the match and continue to ***3***
* match when any of these conditions are met:
** `./webpackShims/${moduleName}` is a directory
** `./node_modules/${moduleName}` is a directory
* if no match was found
** move to the parent directory
** start again at *2.iii* until reaching the root directory or a match is found
* if a match was found
** replace the `moduleName` prefix from the require statement with the full path of the match and proceed to *3*
. Search for a file
* the first of the following paths that resolves to a **file** is our match
** path + '.js'
** path + '.json'
** path + '.jsx'
** path + '.less'
** path
** path/${basename(path)} + '.js'
** path/${basename(path)} + '.json'
** path/${basename(path)} + '.jsx'
** path/${basename(path)} + '.less'
** path/${basename(path)}
** path/index + '.js'
** path/index + '.json'
** path/index + '.jsx'
** path/index + '.less'
** path/index
* if none of the above paths matches then an error is thrown
14 changes: 14 additions & 0 deletions docs/development/plugin-development.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
[[plugin-development]]
== Plugin Development

[IMPORTANT]
==============================================
The Kibana plugin interfaces are in a state of constant development. We cannot provide backwards compatibility for plugins due to the high rate of change. Kibana enforces that the installed plugins match the version of Kibana itself. Plugin developers will have to release a new version of their plugin for each new Kibana release as a result.
==============================================

* <<development-plugin-resources>>
* <<development-uiexports>>

include::plugin/development-plugin-resources.asciidoc[]

include::plugin/development-uiexports.asciidoc[]
28 changes: 28 additions & 0 deletions docs/development/plugin/development-plugin-resources.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
[[development-plugin-resources]]
=== Plugin Resources

Here are some resources that will be helpful for getting started with plugin development

[float]
==== Our IRC channel
Many Kibana developers hang out on `irc.freenode.net` in the `#kibana` channel. We *want* to help you with plugin development. Even more than that, we *want your help* in understanding your plugin goals so we can build a great plugin system for you! If you've never used IRC, welcome to the fun. You can get started with the http://webchat.freenode.net/?channels=kibana[Freenode Web Client].

[float]
==== Some light reading
- Our {repo}blob/master/CONTRIBUTING.md[contributing guide] can help you get a development environment going
- Tim Roes' excellent blog series https://www.timroes.de/2016/02/21/writing-kibana-plugins-custom-applications/[Writing Kibana Plugins]

[float]
==== Videos
- https://www.elastic.co/elasticon/2015/sf/contributors-guide-to-the-kibana-galaxy[Contributors Guide to the Kibana Galaxy]
- https://www.elastic.co/elasticon/conf/2016/sf/how-to-build-your-own-kibana-plugins[Kibana Plugin Dev - Elasticon 2016]

[float]
==== Plugin Generator

Check out the https://github.com/elastic/generator-kibana-plugin[plugin generator] to kick-start your plugin.

[float]
==== References in the code
- {repo}blob/{branch}/src/server/plugins/plugin.js[Plugin class]: What options does the `kibana.Plugin` class accept?
- <<development-uiexports>>: What type of exports are available?
Loading

0 comments on commit 1ee49af

Please sign in to comment.