Kibana Globalization - Phase 2 #8766

hickeyma · 2016-10-19T21:43:25Z

Phase 2

Purpose

Integrate angular-translate globalization framework with i18n engine (from phase 1)
Provide template for enabling translations in an AngularJS view by translating a view
Implement a tool to generate the translation plugin
Documentation

Translations Available Client Side

Make the translations available on the client side by:
- Embedding the translations in the initial HTML payload:
  - Reduces complexity and removes a round trip
  - Evaluation required to test if it performs well and does not create a large payload
- If the evaluation of HTML payload is non performant, then the following approaches should be investigated in this order:
  1. Use current bundle mechanism:
    - (Kibana Jade template) to call API and generate the bundle which will be loaded during start-up
    - The JavaScript bundle produced will be of the following format: i18n_<language>.bundle.js
    - Kibana loads all resource bundles on the client side after starting the single-page application
  2. Client side directly calls REST API and loads the JSON payload:
    - GET /i18n/translations ==> returns the English (or German or whatever) translations negotiated with the browser HTTP header “accept-language” priority list compared against the languages supported
    - GET /i18n/translationsForDefaultLocale ==> returns the default locale translations
- All approaches will decide the language to be served up by using the language deciding algorithm (from Phase 1)
  hose that want to enable translation in Kibana
  those that want to contribute translations to Kibana
  those that want to create a Kibana Plugin

Translation Identifiers Added to Kibana UI

Ids are added to the relevant view with Angular and HTML content
English (en) translation file is generated for the Ids defined
Approach for translating UI content:
- Angular UI portion:
  - Use angular-translate for simplicity of the UI template resources, taking advantage of angular idioms.

BEFORE (HTML)

    <div class="sidebar-list">
    …

    <div class="sidebar-list-header">
        <h5>Selected Fields</h5>
    </div>

AFTER (HTML)

    <div class="sidebar-list">
    …

    <div class="sidebar-list-header">
        <h5 translate="FIELDS_SELECTEDFIELDS"></h5>
    </div>

Tool for Verifying All Translations have Translatable Strings (Update)

Verify translation IDs in Angular templates
Possible solutions are:
- Use grunt-angular-translate . Searches all view and JS scripts to find angular-translate calls and extracts keys to file
- Update current verification tool to search for angular-translate pattern in code and extract the keys
The keys in the key file(s) would then be checked against the language translation files registered

Translation Plugin Generator

Tool which generates a translation plugin
Localization engineer should only need to add translation file(s) within the plugin directory, refernce the file(s) in the 'uiExports' plugin extension, and add plugin to Kibana
All integration with Kibana works OOTB

Deliverable

Angular View where globalization is enabled showing the pattern to use
Verification tool updated to check translations in angular-translate constructs
[Elastic] Translatation and verification of xplugins (React)
A generator that localization engineers can use to produce language translations and integrate them in Kibana in an easy manner
Documentation relevant for the following stakeholders:
- those that want to enable translation in Kibana
- those that want to contribute translations to Kibana
- those that want to create a Kibana Plugin

elasticmachine · 2016-10-19T21:43:27Z

Can one of the admins verify this patch?

hickeyma · 2016-10-20T09:09:53Z

Dependent on #7545

elasticmachine · 2016-12-15T18:44:35Z

Can one of the admins verify this patch?

hickeyma · 2017-02-08T17:10:09Z

@spalger PR ready for review.

spalger · 2017-02-08T20:28:07Z

jenkins, test this

spalger · 2017-02-08T20:13:42Z

webpackShims/ui-bootstrap.js

+        return deferred.promise;
+      };
+  })
+  .config(['$translateProvider', function ($translateProvider) {


No need for the ['$translateProvider', ...] wrapper around this provider.

Nice, updated.

spalger · 2017-02-08T20:22:49Z

webpackShims/ui-bootstrap.js

+      };
+  })
+  .config(['$translateProvider', function ($translateProvider) {
+    $translateProvider.preferredLanguage('en');


IIRC the language is not variable at this point, so perhaps we could simplify this (and remove the translationLoader factory) by just using $translateProvider.translations('default', chrome.getTranslations())

Good catch, thanks, Means I can now remove the custom loader.

spalger · 2017-02-08T20:24:45Z

src/ui/index.js

@@ -66,6 +66,7 @@ export default async (kbnServer, server, config) => {

  async function getKibanaPayload({ app, request, includeUserProvidedConfig }) {
    const uiSettings = server.uiSettings();
+    const translations = await uiI18n.getTranslationsForRequest(request);


It may not be necessary, but if angular-translate requires the language code for the translations it's providing, perhaps we could update getTranslationsForRequest to return the resolved language code as well.

Good point but unnecessary now.

spalger · 2017-02-08T20:33:33Z

webpackShims/ui-bootstrap.js

@@ -1,11 +1,27 @@
 define(function (require) {


This file is specifically for the ui-bootstrap dependency. I think it would be better if we moved the new logic into src/ui/public/chrome/api/translations.js

Due to loading the translations directly with angular-translate then the custom loader factory function is now obsolete.

spalger · 2017-02-08T20:34:51Z

webpackShims/angular.js

@@ -1,7 +1,8 @@
 require('jquery');
 require('node_modules/angular/angular');
+require('node_modules/angular-translate/dist/angular-translate.min');


no need to override the default import. We minify the distributable and prefer non-minified code for development.

Ok, sure. Removed.

spalger · 2017-02-08T20:45:15Z

TRANSLATION.md

@@ -0,0 +1,140 @@
+Translating Kibana


Let's move this into docs/development/plugin/development-internationalization.asciidoc.

I'll hold back my review of the docs until we move them there, since the transition will wipe out all comments anyway.

Ok, moved and converted to an asciidoc.

spalger · 2017-02-08T20:49:07Z

src/fixtures/translation_plugin_template/README.md

@@ -0,0 +1,23 @@
+A Kibana translation plugin structure. 


I love the intention here, but I'm not a fan of having an unused template as a part of the source. Fixtures are for tests, so if we wanted to make use of them that way I would feel better about it, but this would be best as a pull-request to generator-kibana-plugin

We aim to amuse! :) I have made changes in the other repo as elastic/generator-kibana-plugin#45

This commit is part og Kibana globalization and PR elastic/kibana#8766

Updates after review comments: elastic#8766 (review)

hickeyma · 2017-02-10T15:12:45Z

@spalger Thanks for #8766 (review) . Comments updated and ready for review again.

- use translate directive in HTML attribute instead of body for variable replacement

…tterns

Updates after review comments: elastic#8766 (review)

* Otherwise, the '$http GET' to fetch translation resources shows up as a deferred task here. * Referenced from: srl295@5d9959c

Updates following review comments: elastic#8766 (review)

Update the following review comments: elastic#8766 (review) elastic#8766 (review)

…te pattern view

hickeyma · 2017-03-06T16:28:59Z

lol @Bargs. Added strings to the translation file and then got distracted! Committed the changes now.

Bargs · 2017-03-20T16:40:58Z

jenkins, test this

Backports PR #8766 **Commit 1:** Add boilerplate plugin * Original sha: 9ac0878 * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2016-12-15T18:39:17Z **Commit 2:** Load translations on the client side Translations need to be loaded on the client side so that they can be used the globalization frameworks like 'angular-translate'. This translations are made available by embedding the translations in the initial HTML payload. * Original sha: 1f84e57 * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-01-13T15:30:26Z **Commit 3:** Update translation plugin template for the change in how translations are published * Original sha: d2fc0c4 * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-01-16T15:05:04Z **Commit 4:** Add angular-translate as the Angular globalization framework The angular-translate framework integrates with the Kibana i18n engine whereby it consumes translations from the i18n engine and not the translations directly. This is achieved by using a custom loader which calls the client side getTranslations() method. This method return the translations loaded by the i18n engine during instantation of Kibana server instance. * Original sha: 0ab48f0 * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-02-01T22:03:17Z **Commit 5:** Extract translation strings from the index pattern create page into translation file This commit is where the strings are now localized for this page and therefore will be loaded by the Angular globalization framework. It also associates a translation ID to each string block and therefore enables translation of the strings into different languages. It also provides the pattern for localizing other pages in the UI. * Original sha: 959c7ed * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-02-02T11:33:08Z **Commit 6:** Add Kibana translation documentation * Original sha: 5317e6e * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-02-02T15:18:26Z **Commit 7:** Update "translate" tag syntax - use translate directive in HTML attribute instead of body for variable replacement * Original sha: 68202d9 * Authored by Jonathan Lo <jlo@us.ibm.com> on 2017-02-07T20:24:30Z * Committed by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-03-06T15:56:26Z **Commit 8:** Add new translation key pattern to verify task * Original sha: 13cfd15 * Authored by Jonathan Lo <jlo@us.ibm.com> on 2017-02-07T22:14:55Z * Committed by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-03-06T15:56:26Z **Commit 9:** Fix syntax error in create view * Original sha: 165d4cd * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-02-08T10:43:18Z **Commit 10:** Update the translation verification to handle separate translation patterns * Original sha: 48e1ecd * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-02-08T17:01:45Z **Commit 11:** Update after review Updates after review comments: #8766 (review) * Original sha: afee6d9 * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-02-10T15:01:46Z **Commit 12:** Update internationalization documentation * Original sha: 177408e * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-02-16T16:33:25Z **Commit 13:** [test] call $timeout.flush() before debounce tests * Otherwise, the '$http GET' to fetch translation resources shows up as a deferred task here. * Referenced from: srl295@5d9959c * Original sha: 4dbf3a0 * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-02-21T11:12:18Z **Commit 14:** Update after review Updates following review comments: #8766 (review) * Original sha: c2438de * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-02-28T16:35:27Z **Commit 15:** Merge extract and verify translation build tasks into one task * Original sha: 622802c * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-03-01T16:53:02Z **Commit 16:** Update document after new changes for js and info string translations * Original sha: 2f269f8 * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-03-01T17:15:04Z **Commit 17:** Update after review Update the following review comments: #8766 (review) #8766 (review) * Original sha: 5e94886 * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-03-03T14:27:28Z **Commit 18:** Replace the translation string with the translation IDs in index create pattern view * Original sha: fb8dffb * Authored by Martin Hickey <martin.hickey@ie.ibm.com> on 2017-03-06T16:20:05Z

* Integrate angular-translate globalization framework with i18n engine * Provide template for enabling translations in an AngularJS view by translating a view * Verification tool for translation keys used in angular-translate * Documentation

hickeyma · 2017-03-20T18:41:35Z

Thanks @Bargs, @posijon and @spalger for all the work on phase 2.

* Integrate angular-translate globalization framework with i18n engine * Provide template for enabling translations in an AngularJS view by translating a view * Verification tool for translation keys used in angular-translate * Documentation

…38daaefc30e21bdd18d1ce2263923cfe12a * Integrate angular-translate globalization framework with i18n engine * Provide template for enabling translations in an AngularJS view by translating a view * Verification tool for translation keys used in angular-translate * Documentation # Conflicts: # src/core_plugins/kibana/public/management/sections/indices/_create.html # src/ui/public/chrome/chrome.js # tasks/build/verify_translations.js # tasks/utils/i18n_verify_keys.js

hickeyma changed the title ~~Kibana Globalization - Phase 2~~ [WIP] Kibana Globalization - Phase 2 Oct 20, 2016

hickeyma force-pushed the i18n_phase2 branch from 773aaf0 to ddfc6a7 Compare October 24, 2016 11:44

hickeyma mentioned this pull request Dec 14, 2016

Kibana Globalization #6515

Closed

hickeyma closed this Dec 15, 2016

hickeyma force-pushed the i18n_phase2 branch from 21255b2 to 8fe6204 Compare December 15, 2016 18:27

hickeyma reopened this Dec 15, 2016

hickeyma force-pushed the i18n_phase2 branch 5 times, most recently from 3a33bff to a6cd076 Compare January 16, 2017 10:56

epixa added the Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc label Jan 26, 2017

hickeyma force-pushed the i18n_phase2 branch 5 times, most recently from c6830ec to cc72df8 Compare February 8, 2017 17:09

hickeyma changed the title ~~[WIP] Kibana Globalization - Phase 2~~ Kibana Globalization - Phase 2 Feb 8, 2017

spalger added the review label Feb 8, 2017

spalger suggested changes Feb 8, 2017

View reviewed changes

hickeyma force-pushed the i18n_phase2 branch from cc72df8 to 4926fab Compare February 10, 2017 11:20

hickeyma added a commit to hickeyma/generator-kibana-plugin that referenced this pull request Feb 10, 2017

Update the generator to add translation capability

3554876

This commit is part og Kibana globalization and PR elastic/kibana#8766

hickeyma mentioned this pull request Feb 10, 2017

Update the generator to add translation capability elastic/generator-kibana-plugin#45

Merged

hickeyma added a commit to hickeyma/kibana that referenced this pull request Feb 10, 2017

Update after review

e5b00ef

Updates after review comments: elastic#8766 (review)

hickeyma and others added 12 commits March 6, 2017 15:56

Add Kibana translation documentation

5317e6e

Update "translate" tag syntax

68202d9

- use translate directive in HTML attribute instead of body for variable replacement

Fix syntax error in create view

165d4cd

Add new translation key pattern to verify task

13cfd15

Update the translation verification to handle separate translation pa…

48e1ecd

…tterns

Update after review

afee6d9

Updates after review comments: elastic#8766 (review)

Update internationalization documentation

177408e

[test] call $timeout.flush() before debounce tests

4dbf3a0

* Otherwise, the '$http GET' to fetch translation resources shows up as a deferred task here. * Referenced from: srl295@5d9959c

Update after review

c2438de

Updates following review comments: elastic#8766 (review)

Merge extract and verify translation build tasks into one task

622802c

Update document after new changes for js and info string translations

2f269f8

Update after review

5e94886

Update the following review comments: elastic#8766 (review) elastic#8766 (review)

hickeyma force-pushed the i18n_phase2 branch from 16b1359 to 5e94886 Compare March 6, 2017 15:57

Replace the translation string with the translation IDs in index crea…

fb8dffb

…te pattern view

Bargs approved these changes Mar 20, 2017

View reviewed changes

Bargs added v5.4.0 v6.0.0 labels Mar 20, 2017

Bargs merged commit 3aa5938 into elastic:master Mar 20, 2017

elastic-jasper mentioned this pull request Mar 20, 2017

[5.x] Kibana Globalization - Phase 2 #10819

Merged

Bargs mentioned this pull request Mar 20, 2017

Kibana Globalization - Phase 2 - React #10823

Closed

srl295 mentioned this pull request Mar 21, 2017

escape ' -> \' for the UI-WELCOME_ERROR #10581

Closed

lukasolson mentioned this pull request Apr 18, 2017

汉化 #11300

Closed

hickeyma deleted the i18n_phase2 branch May 15, 2017 12:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kibana Globalization - Phase 2 #8766

Kibana Globalization - Phase 2 #8766

hickeyma commented Oct 19, 2016 •

edited

Loading

elasticmachine commented Oct 19, 2016

hickeyma commented Oct 20, 2016

elasticmachine commented Dec 15, 2016

hickeyma commented Feb 8, 2017

spalger commented Feb 8, 2017

spalger Feb 8, 2017

hickeyma Feb 10, 2017

spalger Feb 8, 2017

hickeyma Feb 10, 2017

spalger Feb 8, 2017

hickeyma Feb 10, 2017

spalger Feb 8, 2017

hickeyma Feb 10, 2017

spalger Feb 8, 2017

hickeyma Feb 10, 2017

spalger Feb 8, 2017

spalger Feb 8, 2017

hickeyma Feb 10, 2017

spalger Feb 8, 2017

hickeyma Feb 10, 2017

hickeyma commented Feb 10, 2017

hickeyma commented Mar 6, 2017

Bargs commented Mar 20, 2017

hickeyma commented Mar 20, 2017

Kibana Globalization - Phase 2 #8766

Kibana Globalization - Phase 2 #8766

Conversation

hickeyma commented Oct 19, 2016 • edited Loading

Phase 2

Purpose

Translations Available Client Side

Translation Identifiers Added to Kibana UI

BEFORE (HTML)

AFTER (HTML)

Tool for Verifying All Translations have Translatable Strings (Update)

Translation Plugin Generator

Deliverable

elasticmachine commented Oct 19, 2016

hickeyma commented Oct 20, 2016

elasticmachine commented Dec 15, 2016

hickeyma commented Feb 8, 2017

spalger commented Feb 8, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hickeyma commented Feb 10, 2017

hickeyma commented Mar 6, 2017

Bargs commented Mar 20, 2017

hickeyma commented Mar 20, 2017

hickeyma commented Oct 19, 2016 •

edited

Loading