Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] i18n asciidocs #32547

Merged
merged 12 commits into from
Apr 3, 2019
3 changes: 3 additions & 0 deletions docs/development/plugin-development.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ The Kibana plugin interfaces are in a state of constant development. We cannot
* <<development-plugin-resources>>
* <<development-uiexports>>
* <<development-plugin-functional-tests>>
* <<development-plugin-localization>>
* <<development-visualize-index>>
* <<add-data-guide>>

Expand All @@ -19,6 +20,8 @@ include::plugin/development-uiexports.asciidoc[]

include::plugin/development-plugin-functional-tests.asciidoc[]

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

include::visualize/development-visualize-index.asciidoc[]

include::add-data-guide.asciidoc[]
164 changes: 164 additions & 0 deletions docs/development/plugin/development-plugin-localization.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
[[development-plugin-localization]]
=== Localization for plugins

To introduce localization for your plugin, use our i18n tool to create IDs and default messages. You can then extract these IDs with respective default messages into localization JSON files for Kibana to use when running your plugin.

[float]
==== Adding localization to your plugin

You must add a `translations` directory at the root of your plugin. This directory will contain the translation files that Kibana uses.

["source","shell"]
-----------
.
├── translations
│ ├── en.json
│ └── zh-CN.json
└── .i18nrc.json
-----------


[float]
==== Using Kibana i18n tooling
To simplify the localization process, Kibana provides tools for the following functions:

* Verify all translations have translatable strings and extract default messages from templates
* Verify translation files and integrate them into Kibana

To use Kibana i18n tooling, create a `.i18nrc.json` file with the following configs:

* `paths`. The directory from which the i18n translation IDs are extracted.
* `exclude`. The list of files to exclude while parsing paths.
* `translations`. The list of translations where JSON localizations are found.

["source","json"]
-----------
{
"paths": {
"myPlugin": "src/ui",
},
"exclude": [
],
"translations": [
"translations/zh-CN.json"
]
}
-----------

An example Kibana `.i18nrc.json` is {blob}.i18nrc.json[here].

Full documentation about i18n tooling is {blob}src/dev/i18n/README.md[here].

[float]
==== Extracting default messages
To extract the default messages from your plugin, run the following command:

["source","shell"]
-----------
node scripts/i18n_extract --output-dir ./translations --include-config ../kibana-extra/myPlugin/.i18nrc.json
-----------

This outputs a `en.json` file inside the `translations` directory. To localize other languages, clone the file and translate each string.

[float]
==== Checking i18n messages

Checking i18n does the following:

* Checks all existing labels for violations.
* Takes translations from .i18nrc.json and compares them to the messages extracted and validated at the step above and:
* Checks for unused translations. If you remove a label that has a corresponding translation, you must also remove the label from the translations file.
Bamieh marked this conversation as resolved.
Show resolved Hide resolved
* Checks for incompatible translations. If you add or remove a new parameter from an existing string, you must also remove the label from the translations file.

To check your i18n translations, run the following command:

["source","shell"]
-----------
node scripts/i18n_check --fix --include-config ../kibana-extra/myPlugin/.i18nrc.json
-----------


[float]
==== Implementing i18n in UI
Bamieh marked this conversation as resolved.
Show resolved Hide resolved

Kibana relies on several UI frameworks (ReactJS and AngularJS) and
requires localization in different environments (browser and NodeJS).
The internationalization engine is framework agnostic and consumable in
all parts of Kibana (ReactJS, AngularJS and NodeJS). In order to simplify
internationalization in UI frameworks, additional abstractions are
built around the I18n engine: `react-intl` for React and custom
components for AngularJS. https://github.com/yahoo/react-intl[React-intl]
is built around https://github.com/yahoo/intl-messageformat[intl-messageformat],
so both React and AngularJS frameworks use the same engine and the same
message syntax.


[float]
==== i18n for vanilla JavaScript
Bamieh marked this conversation as resolved.
Show resolved Hide resolved

["source","js"]
-----------
import { i18n } from '@kbn/i18n';

export const HELLO_WORLD = i18n.translate('hello.wonderful.world', {
defaultMessage: 'Greetings, planet Earth!',
});
-----------

Full details are {repo}tree/6.7/packages/kbn-i18n#vanilla-js[here].

[float]
==== i18n for React
Bamieh marked this conversation as resolved.
Show resolved Hide resolved

To localize strings in React, use either `FormattedMessage` or `i18n.translate`.


["source","js"]
-----------
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';

export const Component = () => {
return (
<div>
{i18n.translate('xpack.someText', { defaultMessage: 'Some text' })}
<FormattedMessage id="xpack.someOtherText" defaultMessage="Some other text">
</FormattedMessage>
</div>
);
};
-----------

Full details are {repo}tree/6.7/packages/kbn-i18n#react[here].



[float]
==== i18n for Angular
Bamieh marked this conversation as resolved.
Show resolved Hide resolved

AngularJS wrapper has 4 entities: translation `provider`, `service`, `directive` and `filter`. Both the directive and the filter use the translation `service` with i18n engine under the hood.


The translation directive has the following syntax:
["source","js"]
-----------
<ANY
i18n-id="{string}"
i18n-default-message="{string}"
[i18n-values="{object}"]
[i18n-description="{string}"]
></ANY>
-----------

Full details are {repo}tree/6.7/packages/kbn-i18n#angularjs[here].


[float]
==== Resources

To learn more about i18n tooling, see {blob}src/dev/i18n/README.md[i18n dev tooling].

To learn more about implementing i18n in the UI, follow the links below:

* {blob}packages/kbn-i18n/README.md[i18n plugin]
* {blob}packages/kbn-i18n/GUIDELINE.md[i18n Guidelines]
20 changes: 20 additions & 0 deletions docs/settings/i18n-settings.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
[role="xpack"]
[[i18n-settings-kb]]
=== i18n settings in Kibana
++++
Bamieh marked this conversation as resolved.
Show resolved Hide resolved
<titleabbrev>i18n Settings</titleabbrev>
Bamieh marked this conversation as resolved.
Show resolved Hide resolved
++++
Bamieh marked this conversation as resolved.
Show resolved Hide resolved

You do not need to configure any settings to run Kibana in English.

[float]
[[general-i18n-settings-kb]]
==== General i18n Settings

`i18n.locale`::
Kibana currently supports the following locales:
+
- English - `en` (default)
- Chinese - `zh-CN`


1 change: 1 addition & 0 deletions docs/settings/settings-xkb.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@ include::logs-ui-settings.asciidoc[]
include::ml-settings.asciidoc[]
include::reporting-settings.asciidoc[]
include::spaces-settings.asciidoc[]
include::i18n-settings.asciidoc[]
4 changes: 3 additions & 1 deletion docs/setup/settings.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -234,4 +234,6 @@ unauthenticated users to access the Kibana server status API and status page.

`rollup.enabled:`:: *Default: true* Set this value to false to disable the Rollup user interface.

`license_management.enabled`:: *Default: true* Set this value to false to disable the License Management user interface.
`license_management.enabled`:: *Default: true* Set this value to false to disable the License Management user interface.

`i18n.locale`:: *Default: en* Set this value to change the Kibana interface language. Valid locales are: `en`, `zh-CN`.