Localizing Kibana for the Global Language Landscape

Martin Hickey l Advisory Software Engineer l IBM
Shikha Srivastava l Senior Technical Staff Member l IBM

1. IBM Wednesday, March 8th 2017 GitHub: hickeyma & GitHub: shikhasriva Localizing Kibana for the Global Language Landscape Martin Hickey, Advisory Software Engineer & Shikha Srivastava, Senior Technical Staff Member
2. KIBANA CURRENTLY SUPPORTS ONLY THE ENGLISH LANGUAGE KIBANA GLOBALIZATION IS THE PROCESS OF ENABLING KIBANA TO SUPPORT OTHER LANGUAGES IN ADDITION TO ENGLISH
3. Nelson Mandela { } If you talk to [someone] in a language [he or she] understands, that goes to [the person’s] head. If you talk to [somebody] in [his or her] language, that goes to [the] heart.
4. • Let’s briefly touch on the beginning • Discuss creativity and solution • Who will be involved? • Where are we now and where to next? • Finishing up! How’s it Going to Roll? 4
5. Background
6. • Globalization of its products is very important to IBM and its customers • IBM have offerings which leverage the Elastic stack • Identified globalization of Kibana as a core enhancement in 2016 • Empowered its engineers to become contributors in the Elastic open-source community • The journey began…. Background 6
7. Design
8. • Goal: Translation readiness on the Kibana dashboard • Scope: Enabling of text on the Kibana views; capability delivered in a phased approach • Initial Design: Angular globalization framework (‘angular-translate’) consumes the translations directly • Re-think: Agnostic service which is consumed rather than the translations directly • Result: Integrated framework for federation of multiple globalization frameworks: https://github.com/elastic/kibana/issues/6515 • The advantages: • Independent of the underlying UI frameworks and the subsequent globalization frameworks • Facilitates a plug-and-play approach for language packs (i.e. no coding required) Design Journey 8
9. 9 Architecture Diagram en translations de Kibana plugin es-mx Kibana plugin <kibana_root>/plugins de translations es-mx translations …….. …….. i18n Client Side Server Side Requested locale translations accept-language header Register translations @server startup Create Drop Initial request Load Angular- translate Load Render
10. Stakeholders
11. • The stakeholders of Kibana globalization are as follows • those that want to enable translations on existing Kibana AngularJS views • those that want to contribute language packs to Kibana • those that want to create a new Kibana plugin Stakeholders 11
12. • Translations are enabled on a Kibana plugin basis; for example, kibana, timelion, status_page • Create default translation file (‘translations/en.json’) if it doesn’t exist • Pick AngularJS view(s); for example, index pattern page (‘_create.html’, ‘_edit.html’) • Replace translation text with translation keys/IDs • Extract translation text to translation file • If it does not exist for the plugin, add ‘translation’ plugin extension (attribute to ‘uiExports’ object) • Refresh view • Refer to Kibana documentation for more details Enable Translations on Existing Views 12
13. 13 Before (HTML): <h1>Configure an index pattern</h1> In order to use Kibana you must …. …………. <kbn-info info="This field will be used to filter ..."></kbn- info> After (HTML): <h1 translate=“KIBANA-CONFIGURE_INDEX_PATTERN”></h1> <p translate=“KIBANA-MUST_CONFIGURE_INDEX_PATTERN”></p> …………… <kbn-info info=“ {{ 'KIBANA-FIELD_FILTER_EVENTS_GLOBAL_TIME' | translate }}"></kbn-info> Enable Translations on Existing Views (Cont’d)
14. 14 Before (JS): notify.error('Could not locate any indices .....'); After (JS): notify.error($translate.instant('KIBANA- NO_INDICES_MATCHING_PATTERN')); Enable Translations on Existing Views (Cont’d)
15. 15 en.json: { "KIBANA-CONFIGURE_INDEX_PATTERN": "Configure an index pattern", "KIBANA-MUST_CONFIGURE_INDEX_PATTERN": "In order to use Kibana you "KIBANA-FIELD_FILTER_EVENTS_GLOBAL_TIME" : "This field will be used "KIBANA-NO_INDICES_MATCHING_PATTERN": "Could not locate any indices } Enable Translations on Existing Views (Cont’d)
16. 16 index.js: return new kibana.Plugin({ id: 'kibana', ….. uiExports { translations: [ resolve(__dirname, './translations/en.json') ], …. } }); Enable Translations on Existing Views (Cont’d)
17. • Create a Kibana plugin for the translation(s) using the “Kibana Plugin Yeoman Generator” • Replace the template translation file (‘translations/es.json’) with the language translation file (for example, ‘mt.json’) • Update ‘translations’ attribute in ‘uiExports’ to the path of the new translations file(s) • Translate file in a JSON editor • Add plugin to the Kibana ‘plugins’ path • Restart Kibana • Refer to Kibana documentation for more details Contributing Language Packs 17
18. 18 es.json: { "KIBANA-CONFIGURE_INDEX_PATTERN": " Configurar un patrón de índice "KIBANA-MUST_CONFIGURE_INDEX_PATTERN": " Para usar Kibana debes…“ } Contributing Language Packs (Cont’d)
19. 19 index.js: return new kibana.Plugin({ id: 'kibana', ….. uiExports { translations: [ resolve(__dirname, './translations/es.json') ], …. } }); Contributing Language Packs (Cont’d)
20. 20 Kibana Examples Showing Different Languages
21. • All plugins created using the “Kibana Plugin Yeoman Generator” will be enabled for translations • If plugin is created manually, refer to “Enable Translations on Existing Views” section • As you develop the plugin, remember to: • Add the translation IDs to the views • Add the corresponding translation IDs and text to the default translation file (‘translations/en.json’) • Refer to Kibana document for more details Creating New Kibana Plugins 21
22. Current Status
23. • “Phase 1” merged! • “Phase 1” delivered: • Internationalization (i18n) engine • Translation enabled for Kibana loading • Tool for verifying translations during build phase What’s Implemented 23
24. Roadmap 24 PHASE DESCRIPTION STATUS PR 1 Add integrated framework (i18n engine) Done https://github.com/elastic/kibana/pull/7545 2 Integrate AngularJS globalization In progress https://github.com/elastic/kibana/pull/8766 3 Enable translations on existing AngularJS views TODO TODO 4 Contribute language packs TODO TODO
25. Let’s Wrap!
26. • Good progress, thanks to all involved so far • Infrastructure nearly there for language packs • “Phase 3”, enables translations to existing Kibana AngularJS views • “Phase 4”, contributing the languages packs Conclusion 26
27. 27 More Questions? Visit us at the AMA