Discuss the key aspects of Kibana globalization from design to capability delivered.

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-
translateLoad
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