i18n.md

Internationalization (i18n)

Stratos supports i18n via Angular's $translate service. Dates and times are handled by Moment's i18n process.

The locale shown will at first be selected from the browser. Any change of locale by the user will be retained within the browser's session.

The source for all translations can be found in the relevant component's i18n folder. For example:

|-- i18n
|   |-- en_US

or

|-- frontend
|   |-- i18n
|       |-- en_US

Within each locale will be one or more json files. All json files within a locale will be combined and served as i18n/locale-locale name.json, for example locale-en_US.json.

Supported Locales

The Stratos UI Console is currently provided with a single locale - US English (en-US). Other locales can easily be added as needed.

Localization (i10n)

To add a new locale run through the following steps.

1. Copy the i18n/en_US directory in every plugin and rename it for the required locale. For instance here en_GB is added

|-- frontend
|   |-- i18n
|       |-- en_US
|       |-- en_GB

2. Add the new locale to the selection of locales to choose. For example

• Open the file components/app-core/frontend/i18n/en_US/locales.json
• Add the new locale

{
  "locales": {
    "locales": "en_US,fr,en_GB",
    "en_US": "English (US)",
    "en_GB": "English (UK)"
  }
}

• Repeat for all versions of the 'locales' object in all other locale files.

3. Start the stratos ui and the new locale should be visible in the change language drop down.
4. Go through all the new locale's json files and update with the required translations.

i10n Useful Information

• To find a string in HTML/JS flatten the property path. For example

{
  "login": {
    "timeout": {
      "prompt": "Are you still there?"
    }
  }
}

Becomes

login.timeout.prompt

• If any string is missing it's translation it will appear as a warning in the browser's console output
• Some strings use substitution. For example consider the following

{
  "login": {
    "login": "Login",
    "console": "@:product.console",
    "title": "[[@:product.name]] [[@:product.version]]",
    "welcome": "Use the [[@:product.console]] to develop, compose, and manage Cloud Native workloads.",
  }
}

login.console will be replaced with the entry for product.console. If a string contains more than the direct replacement then the [[@:]] notation should be used.

• Some strings can contain dynamic content. For exammple

{
  "login": {
    "timeout": {
      "notice": "You have been inactive for a while. For your protection, we will automatically log you out in {{timeout}}",
    }
  }
}

login.timeout.notice contains a countdown in seconds until the user is automatically logged out '{{timeout}}'. The text within the curly brackets should not be changed but it's location within the string is for the translator to decide