Mercurial > hg > thermostat-ng > web-client
changeset 156:ed60038d7827
Use angular-translate messageformat interpolation for pluralized dropdowns
Reviewed-by: jkang
Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-August/024546.html
author | Andrew Azores <aazores@redhat.com> |
---|---|
date | Tue, 15 Aug 2017 17:28:33 -0400 |
parents | abae7ebe2fee |
children | bf297ee94d9d |
files | package.json src/app/app.module.js src/app/components/jvm-info/jvm-gc/en.locale.yaml src/app/components/jvm-info/jvm-gc/jvm-gc.html src/app/components/jvm-info/jvm-memory/en.locale.yaml src/app/components/jvm-info/jvm-memory/jvm-memory.html src/app/components/multichart/en.locale.yaml src/app/components/multichart/multichart.html src/app/components/system-info/en.locale.yaml src/app/components/system-info/system-info.html |
diffstat | 10 files changed, 79 insertions(+), 45 deletions(-) [+] |
line wrap: on
line diff
--- a/package.json Wed Aug 16 09:29:14 2017 -0400 +++ b/package.json Tue Aug 15 17:28:33 2017 -0400 @@ -14,6 +14,7 @@ "angular-mocks": "1.5.*", "angular-patternfly": "^3.23.3", "angular-translate": "^2.15.2", + "angular-translate-interpolation-messageformat": "^2.15.2", "babel-core": "^6.24.0", "babel-loader": "^7.0.0", "babel-plugin-angularjs-annotate": "^0.7.0",
--- a/src/app/app.module.js Wed Aug 16 09:29:14 2017 -0400 +++ b/src/app/app.module.js Tue Aug 15 17:28:33 2017 -0400 @@ -28,6 +28,7 @@ import 'angular-patternfly'; import '@uirouter/angularjs'; import angularTranslate from 'angular-translate'; +import 'angular-translate-interpolation-messageformat'; import 'oclazyload'; import 'bootstrap'; import 'bootstrap-switch'; @@ -71,6 +72,7 @@ 'ngInject'; $translateProvider .useSanitizeValueStrategy('escapeParameters') + .addInterpolation('$translateMessageFormatInterpolation') .registerAvailableLanguageKeys(['en'], { 'en_*': 'en' })
--- a/src/app/components/jvm-info/jvm-gc/en.locale.yaml Wed Aug 16 09:29:14 2017 -0400 +++ b/src/app/components/jvm-info/jvm-gc/en.locale.yaml Tue Aug 15 17:28:33 2017 -0400 @@ -2,7 +2,16 @@ REFRESH_RATE_LABEL: Refresh Rate MAX_DATA_AGE_LABEL: Max Data Age CARD_TITLE: Garbage Collection Timeseries + chart: UNITS: microseconds X_AXIS_LABEL: timestamp Y_AXIS_LABEL: elapsed + + refresh: + DISABLED: Disabled + SECONDS: '{SECONDS, plural, =0{0 Seconds} one{1 Second} other{# Seconds}}{DEFAULT, select, true{ (Default)} other{}}' + + dataAge: + SECONDS: '{SECONDS, plural, =0{0 Seconds} one{1 Second} other{# Seconds}}{DEFAULT, select, true{ (Default)} other{}}' + MINUTES: '{MINUTES, plural, =0{0 Minutes} one{1 Minute} other{# Minutes}}{DEFAULT, select, true{ (Default)} other{}}'
--- a/src/app/components/jvm-info/jvm-gc/jvm-gc.html Wed Aug 16 09:29:14 2017 -0400 +++ b/src/app/components/jvm-info/jvm-gc/jvm-gc.html Tue Aug 15 17:28:33 2017 -0400 @@ -4,23 +4,23 @@ <div class="col-xs-12 col-md-3"> <label for="refreshCombo" class="label label-info" translate>jvmGc.REFRESH_RATE_LABEL</label> <select name="refreshCombo" class="combobox form-control" ng-model="refreshRate"> - <option value="-1">Disabled</option> - <option value="1000" selected>1 Second (Default)</option> - <option value="2000" selected>2 Seconds</option> - <option value="5000">5 Seconds</option> - <option value="10000">10 Seconds</option> - <option value="30000">30 Seconds</option> + <option value="-1" translate>jvmGc.refresh.DISABLED</option> + <option value="1000" selected translate="jvmGc.refresh.SECONDS" translate-values="{ SECONDS: 1, DEFAULT: true }" translate-interpolation="messageformat"></option> + <option value="2000" translate="jvmGc.refresh.SECONDS" translate-values="{ SECONDS: 2 }" translate-interpolation="messageformat"></option> + <option value="5000" translate="jvmGc.refresh.SECONDS" translate-values="{ SECONDS: 5 }" translate-interpolation="messageformat"></option> + <option value="10000" translate="jvmGc.refresh.SECONDS" translate-values="{ SECONDS: 10 }" translate-interpolation="messageformat"></option> + <option value="30000" translate="jvmGc.refresh.SECONDS" translate-values="{ SECONDS: 30 }" translate-interpolation="messageformat"></option> </select> </div> <div class="col-xs-12 col-md-3"> <label for="dataAgeCombo" class="label label-info" translate>jvmGc.MAX_DATA_AGE_LABEL</label> <select name="dataAgeCombo" class="combobox form-control" ng-model="dataAgeLimit"> - <option value="10000" selected>10 Seconds</option> - <option value="30000" selected>30 Seconds (Default)</option> - <option value="60000">1 Minute</option> - <option value="300000">5 Minutes</option> - <option value="900000">15 Minutes</option> + <option value="10000" translate="jvmGc.dataAge.SECONDS" translate-values="{ SECONDS: 10 }" translate-interpolation="messageformat"></option> + <option value="30000" selected translate="jvmGc.dataAge.SECONDS" translate-values="{ SECONDS: 30, DEFAULT: true }" translate-interpolation="messageformat"></option> + <option value="60000" translate="jvmGc.dataAge.MINUTES" translate-values="{ MINUTES: 1 }" translate-interpolation="messageformat"></option> + <option value="300000" translate="jvmGc.dataAge.MINUTES" translate-values="{ MINUTES: 5 }" translate-interpolation="messageformat"></option> + <option value="900000" translate="jvmGc.dataAge.MINUTES" translate-values="{ MINUTES: 15 }" translate-interpolation="messageformat"></option> </select> </div> </div>
--- a/src/app/components/jvm-info/jvm-memory/en.locale.yaml Wed Aug 16 09:29:14 2017 -0400 +++ b/src/app/components/jvm-info/jvm-memory/en.locale.yaml Tue Aug 15 17:28:33 2017 -0400 @@ -3,3 +3,7 @@ METASPACE: Metaspace COLLECTOR: '{{name}} ({{collector}})' SPACE: Space {{index}} + + refresh: + DISABLED: Disabled + SECONDS: '{SECONDS, plural, =0{0 Seconds} one{1 Second} other{# Seconds}}{DEFAULT, select, true{ (Default)} other{}}'
--- a/src/app/components/jvm-info/jvm-memory/jvm-memory.html Wed Aug 16 09:29:14 2017 -0400 +++ b/src/app/components/jvm-info/jvm-memory/jvm-memory.html Tue Aug 15 17:28:33 2017 -0400 @@ -4,12 +4,12 @@ <div class="col-xs-12 col-md-3"> <label for="refreshCombo" class="label label-info" translate>jvmMemory.REFRESH_RATE_LABEL</label> <select name="refreshCombo" class="combobox form-control" ng-model="refreshRate"> - <option value="-1">Disabled</option> - <option value="1000">1 Second</option> - <option value="2000" selected>2 Seconds (Default)</option> - <option value="5000">5 Seconds</option> - <option value="10000">10 Seconds</option> - <option value="30000">30 Seconds</option> + <option value="-1" translate>jvmMemory.refresh.DISABLED</option> + <option value="1000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 1 }" translate-interpolation="messageformat"></option> + <option value="2000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 2, DEFAULT: true }" translate-interpolation="messageformat"></option> + <option value="5000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 5 }" translate-interpolation="messageformat"></option> + <option value="10000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 10 }" translate-interpolation="messageformat"></option> + <option value="30000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 30 }" translate-interpolation="messageformat"></option> </select> </div> </div>
--- a/src/app/components/multichart/en.locale.yaml Wed Aug 16 09:29:14 2017 -0400 +++ b/src/app/components/multichart/en.locale.yaml Tue Aug 15 17:28:33 2017 -0400 @@ -9,6 +9,16 @@ PLACEHOLDER: Enter new chart name SUBMIT_LABEL: Create Chart + refresh: + DISABLED: Disabled + SECONDS: '{SECONDS, plural, =0{0 Seconds} one{1 Second} other{# Seconds}}{DEFAULT, select, true{ (Default)} other{}}' + MINUTES: '{MINUTES, plural, =0{0 Minutes} one{1 Minute} other{# Minutes}}{DEFAULT, select, true{ (Default)} other{}}' + + dataAge: + SECONDS: '{SECONDS, plural, =0{0 Seconds} one{1 Second} other{# Seconds}}{DEFAULT, select, true{ (Default)} other{}}' + MINUTES: '{MINUTES, plural, =0{0 Minutes} one{1 Minute} other{# Minutes}}{DEFAULT, select, true{ (Default)} other{}}' + HOURS: '{HOURS, plural, =0{0 Hours} one{1 Hour} other{# Hours}}{DEFAULT, select, true{ (Default)} other{}}' + chart: X_AXIS_LABEL: timestamp X_AXIS_DATA_TYPE: timestamp
--- a/src/app/components/multichart/multichart.html Wed Aug 16 09:29:14 2017 -0400 +++ b/src/app/components/multichart/multichart.html Tue Aug 15 17:28:33 2017 -0400 @@ -33,15 +33,15 @@ <div class="col-xs-12 col-md-3"> <label for="refreshCombo" class="label label-info" translate>multicharts.chart.REFRESH_RATE_LABEL</label> <select name="refreshCombo" class="combobox form-control" ng-model="refreshRate"> - <option value="-1">Disabled</option> - <option value="1000">1 Second</option> - <option value="2000" selected>2 Seconds (Default)</option> - <option value="5000">5 Seconds</option> - <option value="10000">10 Seconds</option> - <option value="30000">30 Seconds</option> - <option value="60000">1 Minute</option> - <option value="300000">5 Minutes</option> - <option value="600000">10 Minutes</option> + <option value="-1" translate>multicharts.refresh.DISABLED</option> + <option value="1000" translate="multicharts.refresh.SECONDS" translate-values="{ SECONDS: 1 }" translate-interpolation="messageformat"></option> + <option value="2000" selected translate="multicharts.refresh.SECONDS" translate-values="{ SECONDS: 2, DEFAULT: true }" translate-interpolation="messageformat"></option> + <option value="5000" translate="multicharts.refresh.SECONDS" translate-values="{ SECONDS: 5 }" translate-interpolation="messageformat"></option> + <option value="10000" translate="multicharts.refresh.SECONDS" translate-values="{ SECONDS: 10 }" translate-interpolation="messageformat"></option> + <option value="30000" translate="multicharts.refresh.SECONDS" translate-values="{ SECONDS: 30 }" translate-interpolation="messageformat"></option> + <option value="60000" translate="multicharts.refresh.MINUTES" translate-values="{ MINUTES: 1 }" translate-interpolation="messageformat"></option> + <option value="300000" translate="multicharts.refresh.MINUTES" translate-values="{ MINUTES: 5 }" translate-interpolation="messageformat"></option> + <option value="600000" translate="multicharts.refresh.MINUTES" translate-values="{ MINUTES: 10 }" translate-interpolation="messageformat"></option> </select> </div> @@ -49,14 +49,14 @@ <div class="col-xs-12 col-md-3"> <label for="dataAgeCombo" class="label label-info" translate>multicharts.chart.MAX_DATA_AGE_LABEL</label> <select name="dataAgeCombo" class="combobox form-control" ng-model="dataAgeLimit"> - <option value="10000">10 Seconds</option> - <option value="30000">30 Seconds</option> - <option value="60000" selected>1 Minute (Default)</option> - <option value="300000">5 Minutes</option> - <option value="600000">10 Minutes</option> - <option value="900000">15 Minutes</option> - <option value="1800000">30 Minutes</option> - <option value="3600000">1 Hour</option> + <option value="10000" translate="multicharts.dataAge.SECONDS" translate-values="{ SECONDS: 10 }" translate-interpolation="messageformat"></option> + <option value="30000" translate="multicharts.dataAge.SECONDS" translate-values="{ SECONDS: 30 }" translate-interpolation="messageformat"></option> + <option value="60000" selected translate="multicharts.dataAge.MINUTES" translate-values="{ MINUTES: 1, DEFAULT: true}" translate-interpolation="messageformat"></option> + <option value="300000" translate="multicharts.dataAge.MINUTES" translate-values="{ MINUTES: 5 }" translate-interpolation="messageformat"></option> + <option value="600000" translate="multicharts.dataAge.MINUTES" translate-values="{ MINUTES: 10 }" translate-interpolation="messageformat"></option> + <option value="900000" translate="multicharts.dataAge.MINUTES" translate-values="{ MINUTES: 15 }" translate-interpolation="messageformat"></option> + <option value="1800000" translate="multicharts.dataAge.MINUTES" translate-values="{ MINUTES: 30 }" translate-interpolation="messageformat"></option> + <option value="3600000" translate="multicharts.dataAge.HOURS" translate-values="{ HOURS: 1 }" translate-interpolation="messageformat"></option> </select> </div>
--- a/src/app/components/system-info/en.locale.yaml Wed Aug 16 09:29:14 2017 -0400 +++ b/src/app/components/system-info/en.locale.yaml Tue Aug 15 17:28:33 2017 -0400 @@ -16,6 +16,14 @@ CPU_MODEL_FMT: '{{model}} ({{coreCount}} cores)' MEMORY: Memory + refresh: + DISABLED: Disabled + SECONDS: '{SECONDS, plural, =0{0 Seconds} one{1 Second} other{# Seconds}}{DEFAULT, select, true{ (Default)} other{}}' + + dataAge: + SECONDS: '{SECONDS, plural, =0{0 Seconds} one{1 Second} other{# Seconds}}{DEFAULT, select, true{ (Default)} other{}}' + MINUTES: '{MINUTES, plural, =0{0 Minutes} one{1 Minute} other{# Minutes}}{DEFAULT, select, true{ (Default)} other{}}' + systemCpu: CHART_LABEL: CPU Usage
--- a/src/app/components/system-info/system-info.html Wed Aug 16 09:29:14 2017 -0400 +++ b/src/app/components/system-info/system-info.html Tue Aug 15 17:28:33 2017 -0400 @@ -94,23 +94,23 @@ <div class="col-xs-12 col-md-3"> <label for="refreshCombo" class="label label-info" translate>systemInfo.systemMemory.REFRESH_RATE_LABEL</label> <select name="refreshCombo" class="combobox form-control" ng-model="refreshRate"> - <option value="-1">Disabled</option> - <option value="1000">1 Second (Default)</option> - <option value="2000">2 Seconds</option> - <option value="5000">5 Seconds</option> - <option value="10000">10 Seconds</option> - <option value="30000">30 Seconds</option> + <option value="-1" translate>systemInfo.refresh.DISABLED</option> + <option value="1000" selected translate="systemInfo.refresh.SECONDS" translate-values="{ SECONDS: 1, DEFAULT: true }" translate-interpolation="messageformat"></option> + <option value="2000" translate="systemInfo.refresh.SECONDS" translate-values="{ SECONDS: 2 }" translate-interpolation="messageformat"></option> + <option value="5000" translate="systemInfo.refresh.SECONDS" translate-values="{ SECONDS: 5 }" translate-interpolation="messageformat"></option> + <option value="10000" translate="systemInfo.refresh.SECONDS" translate-values="{ SECONDS: 10 }" translate-interpolation="messageformat"></option> + <option value="30000" translate="systemInfo.refresh.SECONDS" translate-values="{ SECONDS: 30 }" translate-interpolation="messageformat"></option> </select> </div> <!-- Metric Controls: Max Data Age --> <div class="col-xs-12 col-md-3"> <label for="dataAgeCombo" class="label label-info" translate>systemInfo.systemMemory.MAX_DATA_AGE_LABEL</label> <select name="dataAgeCombo" class="combobox form-control" ng-model="dataAgeLimit"> - <option value="10000">10 Seconds</option> - <option value="30000">30 Seconds (Default)</option> - <option value="60000">1 Minute</option> - <option value="300000">5 Minutes</option> - <option value="600000">10 Minutes</option> + <option value="10000" translate="systemInfo.dataAge.SECONDS" translate-values="{ SECONDS: 10 }" translate-interpolation="messageformat"></option> + <option value="30000" selected translate="systemInfo.dataAge.SECONDS" translate-values="{ SECONDS: 30, DEFAULT: true }" translate-interpolation="messageformat"></option> + <option value="60000" translate="systemInfo.dataAge.MINUTES" translate-values="{ MINUTES: 1 }" translate-interpolation="messageformat"></option> + <option value="300000" translate="systemInfo.dataAge.MINUTES" translate-values="{ MINUTES: 5 }" translate-interpolation="messageformat"></option> + <option value="900000" translate="systemInfo.dataAge.MINUTES" translate-values="{ MINUTES: 15 }" translate-interpolation="messageformat"></option> </select> </div> </div>