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
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
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
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
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)
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)
“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
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
(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
Infrastructure nearly there for language packs • “Phase 3”, enables translations to existing Kibana AngularJS views • “Phase 4”, contributing the languages packs Conclusion 26