Merge remote-tracking branch 'upstream/master' into security-app-privs

.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
  'packages/kbn-pm/**/*',
  'packages/kbn-es/**/*',
  'packages/kbn-datemath/**/*',
+ 'packages/kbn-i18n/**/*',
  'packages/kbn-dev-utils/**/*',
  'packages/kbn-plugin-helpers/**/*',
  'packages/kbn-plugin-generator/**/*',

docs/apm/index.asciidoc

@@ -18,3 +18,4 @@ For more information about the components of Elastic APM, see
 
 include::getting-started.asciidoc[]
 include::bottlenecks.asciidoc[]
+include::using-the-apm-ui.asciidoc[]

docs/apm/using-the-apm-ui.asciidoc

@@ -0,0 +1,63 @@
+[role="xpack"]
+[[apm-ui]]
+== Using the APM UI
+
+The APM UI is designed to be as intuitive as possible, but you might come across certain terms or concepts that don’t feel native to you. Not to worry, that’s why we’ve created this guide to help you get the most out of the solution.
+
+* <<services>>
+* <<transactions>>
+* <<spans>>
+* <<errors>>
+* <<errors-alerts-with-watcher>>
+
+[[services]]
+=== Services
+
+You can add services by setting the `service.name` in the APM agent configuration per service you’re instrumenting. The global time range filter in Kibana defines which services are available. The Services overview gives you a quick insight into the health and general performance of each service.
+
+[role="screenshot"]
+image::apm/images/apm-services-overview.png[Example view of services table the APM UI in Kibana]
+
+[[transactions]]
+=== Transactions
+
+The APM agents automatically collect performance metrics on HTTP requests, database queries, and much more. Please refer to the documentation for each agent for more detail. Each `transaction.type` is displayed separately to make it easy for you to navigate to the transaction.
+
+[role="screenshot"]
+image::apm/images/apm-transactions-overview.png[Example view of transactions table in the APM UI in Kibana]
+
+[[spans]]
+=== Spans
+
+A span is defined as the duration of a single event. Spans are automatically captured by the APM agents, but you can also define custom spans. Each span has a type and is defined by a different colour in the Timeline visualization (also known as the waterfall).
+
+[role="screenshot"]
+image::apm/images/apm-transaction-detail.png[Example view of transactions detail page in the APM UI in Kibana]
+
+You can view a span in detail by clicking it in the Timeline. This displays the recorded SQL database query or source code (in-app frames) around the event that was captured.
+
+[role="screenshot"]
+image::apm/images/apm-span-detail.png[Example view of a span detail in the APM UI in Kibana]
+
+[[errors]]
+=== Errors
+
+Errors are defined as groups of exceptions with matching exception or log messages. Each error group features a breakdown of the exception including the stackframes from when the error occurred and additional contextual information to help debug the issue.
+
+[role="screenshot"]
+image::apm/images/apm-errors-overview.png[Example view of the errors overview in the APM UI in Kibana]
+
+[role="screenshot"]
+image::apm/images/apm-error-group.png[Example view of the error group page in the APM UI in Kibana]
+
+[[errors-alerts-with-watcher]]
+=== Errors alerts with Watcher
+
+You can use the power of the alerting features with Watcher to get alerts on error occurrences. The Watcher assistant, which is available on the Errors overview page, can help you set up a watch per service.
+
+Configure the watch with occurrences threshold and time interval and set the desired actions, such as email or Slack notifications. Your team can be set up with alerts in minutes.
+
+Watches are managed separately in the dedicated Watcher UI available in Advanced Settings.
+
+[role="screenshot"]
+image::apm/images/apm-errors-watcher-assistant.png[Example view of the Watcher assistant for errors in APM UI in Kibana]

docs/index.asciidoc

@@ -24,8 +24,6 @@ include::introduction.asciidoc[]
 
 include::setup.asciidoc[]
 
-include::setup/setup-xkb.asciidoc[]
-
 include::monitoring/monitoring-xkib.asciidoc[]
 
 include::security/securing-kibana.asciidoc[]

docs/management/managing-licenses.asciidoc

@@ -1,7 +1,7 @@
 [[managing-licenses]]
 == License Management
 
-When you install Kibana, it generates a Basic license
+When you install {kib}, it generates a Basic license
 with no expiration date. To start a 30-day trial,
 view the status of your license, or install a new license
 go to *Management* and click *License
@@ -13,11 +13,17 @@ image::images/management-license.png[]
 The 30-day trial enables you to try out the full set of
 https://www.elastic.co/subscriptions[Platinum features],
 including security, machine learning, alerting, graph capabilities,
-and more.
+and more. For example, the following pages are added to the side navigation:
 
-At the end of the trial period, your license reverts
-to a Basic license. To continue using the Platinum features,
-purchase a subscription and update your license.
+* **Machine Learning**
+* **Graph**
+
+The **Management** page gains options related to configuring security, managing 
+{ls} pipelines, and using {watcher}. 
+
+At the end of the trial period, the Platinum features operate in a 
+{stack-ov}/license-expiration.html[degraded mode]. You can revert to a Basic 
+license, extend the trial, or purchase a subscription. 
 
 For a comparison of the Elastic license levels,
 see https://www.elastic.co/subscriptions[the subscription page].

package.json

@@ -83,11 +83,11 @@
  "@elastic/ui-ace": "0.2.3",
  "@kbn/babel-preset": "link:packages/kbn-babel-preset",
  "@kbn/datemath": "link:packages/kbn-datemath",
+ "@kbn/i18n": "link:packages/kbn-i18n",
  "@kbn/pm": "link:packages/kbn-pm",
  "@kbn/test-subj-selector": "link:packages/kbn-test-subj-selector",
  "@kbn/ui-framework": "link:packages/kbn-ui-framework",
  "JSONStream": "1.1.1",
- "accept-language-parser": "1.2.0",
  "angular": "1.6.9",
  "angular-aria": "1.6.6",
  "angular-elastic": "2.5.0",

packages/kbn-i18n/.babelrc

@@ -0,0 +1,10 @@
+{
+ "env": {
+ "web": {
+ "presets": ["@kbn/babel-preset/webpack_preset"]
+ },
+ "node": {
+ "presets": ["@kbn/babel-preset/node_preset"]
+ }
+ }
+}

src/ui/ui_i18n/README.md → packages/kbn-i18n/README.md

@@ -98,16 +98,23 @@ data to UI frameworks and provides methods for the direct translation.
 
 Here is the public API exposed by this engine:
 
+- `addMessages(messages: Map<string, string>, [locale: string])` - provides a way to register
+translations with the engine
 - `getMessages()` - returns messages for the current language
 - `setLocale(locale: string)` - tells the engine which language to use by given
 language key
 - `getLocale()` - returns the current locale
 - `setDefaultLocale(locale: string)` - tells the library which language to fallback
 when missing translations
 - `getDefaultLocale()` - returns the default locale
-- `defineFormats(formats: object)` - supplies a set of options to the underlying formatter.
+- `setFormats(formats: object)` - supplies a set of options to the underlying formatter.
 For the detailed explanation, see the section below
-- `translate(id: string, [{values: object, defaultMessage: string}])` – translate message by id
+- `getFormats()` - returns current formats
+- `getRegisteredLocales()` - returns array of locales having translations
+- `translate(id: string, [{values: object, defaultMessage: string, context: string}])` –
+translate message by id. `context` is optional context comment that will be extracted
+by i18n tools and added as a comment next to translation message at `defaultMessages.json`.
+- `init(messages: Map<string, string>)` - initializes the engine
 
 #### I18n engine internals
 
@@ -179,37 +186,32 @@ React Intl uses the provider pattern to scope an i18n context to a tree of compo
 are able to use `FormattedMessage` component in order to translate messages.
 `IntlProvider` should wrap react app's root component (inside each react render method).
 
-In order to translate messages we need to pass them into the `IntlProvider`
-from I18n engine:
+In order to translate messages we need to use `I18nProvider` component that
+uses I18n engine under the hood:
 
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { ReactI18n } from '@kbn/i18n';
 
-import i18n from 'kbn-i18n';
-import { IntlProvider } from 'ui/i18n/react-intl';
-
-const locale = i18n.getLocale();
-const messages = i18n.getMessages();
+const { I18nProvider } = ReactI18n;
 
 ReactDOM.render(
- <IntlProvider
- locale={locale}
- messages={messages}
- >
+ <I18nProvider>
  <RootComponent>
  ...
  </RootComponent>
- </IntlProvider>,
+ </I18nProvider>,
  document.getElementById('container')
 );
 ```
 
 After that we can use `FormattedMessage` components inside `RootComponent`:
 ```js
 import React, { Component } from 'react';
+import { ReactI18n } from '@kbn/i18n';
 
-import { FormattedMessage } from 'ui/i18n/react-intl';
+const { FormattedMessage } = ReactI18n;
 
 class RootComponent extends Component {
  constructor(props) {
@@ -244,6 +246,40 @@ class RootComponent extends Component {
 }
 ```
 
+Optionally we can pass `context` prop into `FormattedMessage` component.
+This prop is optional context comment that will be extracted by i18n tools
+and added as a comment next to translation message at `defaultMessages.json`
+
+
+#### Attributes translation in React
+React wrapper provides an API to inject the imperative formatting API into a React
+component by using render callback pattern. This should be used when your React
+component needs to format data to a string value where a React element is not
+suitable; e.g., a `title` or `aria` attribute. In order to use it, you should
+wrap your components into `I18nContext` component. The child of this component
+should be a function that takes `intl` object into parameters:
+
+```js
+import React from 'react';
+import { ReactI18n } from '@kbn/i18n';
+
+const { I18nContext } = ReactI18n;
+
+const MyComponent = () => (
+ <I18nContext>
+ {intl => (
+ <input
+ type="text"
+ placeholder={intl.formatMessage({
+ id: 'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER',
+ defaultMessage: 'Search',
+ })}
+ />
+ )}
+ </I18nContext>
+);
+```
+
 ## Angular
 
 Angular wrapper has 4 entities: translation `provider`, `service`, `directive`
@@ -260,58 +296,65 @@ language key
 - `setDefaultLocale(locale: string)` - tells the library which language to fallback
 when missing translations
 - `getDefaultLocale()` - returns the default locale
-- `defineFormats(formats: object)` - supplies a set of options to the underlying formatter
+- `setFormats(formats: object)` - supplies a set of options to the underlying formatter
+- `getFormats()` - returns current formats
+- `getRegisteredLocales()` - returns array of locales having translations
+- `init(messages: Map<string, string>)` - initializes the engine
 
 The translation `service` provides only one method:
-- `translate(id: string, [{values: object, defaultMessage: string}])` – translate message by id
+- `i18n(id: string, [{values: object, defaultMessage: string, context: string }])`–
+translate message by id
 
 The translation `filter` is used for attributes translation and has
 the following syntax:
 ```
-{{'translationId' | i18n[:{ values: object, defaultMessage: string }]}}
+{{'translationId' | i18n[:{ values: object, defaultMessage: string, context: string }]}}
 ```
 
 Where:
 - `translationId` - translation id to be translated
 - `values` - values to pass into translation
 - `defaultMessage` - will be used unless translation was successful (the final
  fallback in english, will be used for generating `en.json`)
+- `context` - optional context comment that will be extracted by i18n tools
+and added as a comment next to translation message at `defaultMessages.json`
 
 The translation `directive` has the following syntax:
 ```html
 <ANY
  i18n-id="{string}"
  [i18n-values="{object}"]
  [i18n-default-message="{string}"]
+ [i18n-context="{string}"]
 ></ANY>
 ```
 
 Where:
 - `i18n-id` - translation id to be translated
 - `i18n-values` - values to pass into translation
 - `i18n-default-message` - will be used unless translation was successful
+- `i18n-context` - optional context comment that will be extracted by i18n tools
+and added as a comment next to translation message at `defaultMessages.json`
 
-In order to initialize the translation service, we need to pass locale and
-localization messages from I18n engine into the `i18nProvider`:
-
-```js
-import { uiModules } from 'ui/modules';
-import i18n from 'kbn-i18n';
-
-uiModules.get('kibana').config(function (i18nProvider) {
- i18nProvider.addMessages(i18n.getMessages());
- i18nProvider.setLocale(i18n.getLocale());
-});
-```
-
-After that we can use i18n directive in Angular templates:
+Angular `I18n` module is placed into `autoload` module, so it will be
+loaded automatically. After that we can use i18n directive in Angular templates:
 ```html
 <span
  i18n-id="welcome"
  i18n-default-message="Hello!"
 ></span>
 ```
 
+In order to translate attributes in Angular we should use `i18nFilter`:
+```html
+<input
+ type="text"
+ placeholder="{{'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER' | i18n: {
+ defaultMessage: 'Search'
+ } }}"
+>
+```
+
 ## Node.JS
 
 `Intl-messageformat` package assumes that the
@@ -320,10 +363,13 @@ global object exists in the runtime. `Intl` is present in all modern
 browsers and Node.js 0.10+. In order to load i18n engine
 in Node.js we should simply `import` this module (in Node.js, the
 [data](https:/yahoo/intl-messageformat/tree/master/dist/locale-data)
-for all 200+ languages is loaded along with the library):
+for all 200+ languages is loaded along with the library) and pass the translation
+messages into `init` method:
 
 ```js
-import i18n from 'kbn-i18n';
+import { i18n } from '@kbn/i18n';
+
+i18n.init(messages);
 ```
 
 After that we are able to use all methods exposed by the i18n engine