Mercurial > hg > thermostat-ng > web-client

changeset 156:ed60038d7827

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>