Make views translatable

Author: tagoh

.gitignore

@@ -1,3 +1,4 @@
 bower_components/*
 node_modules/*
-templates.js
+object-describer-translations.js
+templates.js

Gruntfile.js

@@ -80,7 +80,7 @@ module.exports = function(grunt) {
     },
     concat: {
       app: {
-        src: [ 'object-describer.js', 'templates.js' ],
+        src: [ 'object-describer.js', 'object-describer-translations.js', 'templates.js' ],
         dest: 'dist/object-describer.js'
       }
     },
@@ -89,6 +89,20 @@ module.exports = function(grunt) {
         src: 'views/**.html',
         dest: 'templates.js'
       }
+    },
+    nggettext_extract: {
+      pot: {
+        files: {
+          'po/kubernetes-object-describer.pot': ['views/*.html']
+        }
+      }
+    },
+    nggettext_compile: {
+      all: {
+        files: {
+          'object-describer-translations.js': ['po/*.po']
+        }
+      }
     }
   });
 
@@ -99,6 +113,9 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-wiredep');  
   grunt.loadNpmTasks('grunt-angular-templates');
+  grunt.loadNpmTasks('grunt-angular-gettext');
+
+  grunt.registerTask('update-po', ['nggettext_extract']);
 
   grunt.registerTask('serve', [
     'less',
@@ -109,10 +126,11 @@ module.exports = function(grunt) {
   ]);  
 
   grunt.registerTask('build', [
+    'nggettext_compile',
     'less',
     'ngtemplates',
     'concat'
   ]);
   grunt.registerTask('default', ['serve']);
 
-};
+};

bower.json

@@ -24,7 +24,8 @@
     "dist/object-describer.js"
   ],
   "dependencies": {
-    "angular": "~1.3.8"
+    "angular": "~1.3.8",
+    "angular-gettext": "~2.1.0"
   },
   "devDependencies": {
     "bootstrap": "~3.3.4",

dist/object-describer.js

@@ -45,6 +45,7 @@ <h1>Replication Controller describer</h1>
     <!-- build:js(.) scripts/vendor.js -->
     <!-- bower:js -->
     <script src="bower_components/angular/angular.js"></script>
+    <script src="bower_components/angular-gettext/dist/angular-gettext.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 

index.html

@@ -10,13 +10,14 @@
   "dependencies": {},
   "devDependencies": {
     "grunt": "~0.4.5",
+    "grunt-angular-gettext": "^2.1.3",
+    "grunt-angular-templates": "~0.5.7",
+    "grunt-contrib-concat": "~0.5.1",
     "grunt-contrib-connect": "~0.9.0",
     "grunt-contrib-jshint": "~0.11.1",
     "grunt-contrib-less": "~1.0.0",
-    "grunt-wiredep": "~2.0.0",
     "grunt-contrib-watch": "~0.6.1",
-    "grunt-angular-templates": "~0.5.7",
-    "grunt-contrib-concat": "~0.5.1"
+    "grunt-wiredep": "~2.0.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package.json

@@ -0,0 +1,221 @@
+msgid ""
+msgstr ""
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Project-Id-Version: \n"
+
+#: views/annotations.html:1
+msgid "Annotations"
+msgstr ""
+
+#: views/pod.html:28
+msgid "Container Statuses"
+msgstr ""
+
+#: views/pod-template.html:10
+msgid "Containers"
+msgstr ""
+
+#: views/metadata.html:6
+#: views/pod.html:8
+#: views/replication-controller.html:8
+#: views/service.html:8
+msgid "Created"
+msgstr ""
+
+#: views/pod-template.html:5
+msgid "DNS policy"
+msgstr ""
+
+#: views/containers.html:15
+msgid "Env vars"
+msgstr ""
+
+#: views/_collapse-long-text.html:3
+msgid "Expand"
+msgstr ""
+
+#: views/volumes.html:15
+msgid "GCE persistent disk"
+msgstr ""
+
+#: views/volumes.html:18
+msgid "Git repository"
+msgstr ""
+
+#: views/service.html:12
+msgid "IP"
+msgstr ""
+
+#: views/pod.html:22
+msgid "IP on node"
+msgstr ""
+
+#: views/containers.html:5
+msgid "Image"
+msgstr ""
+
+#: views/service.html:23
+msgid "Ingress points"
+msgstr ""
+
+#: views/labels.html:1
+msgid "Labels"
+msgstr ""
+
+#: views/container-statuses.html:9
+msgid "Last State"
+msgstr ""
+
+#: views/footer.html:2
+msgid "More details..."
+msgstr ""
+
+#: views/container-statuses.html:3
+#: views/containers.html:3
+#: views/metadata.html:2
+#: views/pod.html:4
+#: views/replication-controller.html:4
+#: views/service.html:4
+#: views/volumes.html:3
+msgid "Name"
+msgstr ""
+
+#: views/metadata.html:4
+#: views/pod.html:6
+#: views/replication-controller.html:6
+#: views/service.html:6
+msgid "Namespace"
+msgstr ""
+
+#: views/pod.html:19
+msgid "Node"
+msgstr ""
+
+#: views/service.html:16
+msgid "None"
+msgstr ""
+
+#: views/volumes.html:8
+msgid "Path"
+msgstr ""
+
+#: views/pod.html:17
+msgid "Phase"
+msgstr ""
+
+#: views/containers.html:8
+#: views/service.html:14
+msgid "Ports"
+msgstr ""
+
+#: views/container-statuses.html:13
+msgid "Ready"
+msgstr ""
+
+#: views/replication-controller.html:10
+msgid "Replicas"
+msgstr ""
+
+#: views/volumes.html:19
+msgid "Repository"
+msgstr ""
+
+#: views/container-statuses.html:15
+msgid "Restart Count"
+msgstr ""
+
+#: views/pod-template.html:3
+#: views/pod.html:10
+msgid "Restart policy"
+msgstr ""
+
+#: views/volumes.html:21
+msgid "Revision"
+msgstr ""
+
+#: views/container-state.html:9
+msgid "Running"
+msgstr ""
+
+#: views/replication-controller.html:13
+#: views/service.html:29
+msgid "Selector"
+msgstr ""
+
+#: views/pod-template.html:7
+#: views/pod.html:12
+msgid "Service account"
+msgstr ""
+
+#: views/service.html:21
+msgid "Session affinity"
+msgstr ""
+
+#: views/container-statuses.html:5
+msgid "State"
+msgstr ""
+
+#: views/pod.html:15
+msgid "Status"
+msgstr ""
+
+#: views/container-state.html:13
+msgid "Terminated"
+msgstr ""
+
+#: views/service.html:10
+#: views/volumes.html:11
+#: views/volumes.html:14
+#: views/volumes.html:17
+#: views/volumes.html:6
+msgid "Type"
+msgstr ""
+
+#: views/pod-template.html:12
+msgid "Volumes"
+msgstr ""
+
+#: views/container-state.html:5
+msgid "Waiting"
+msgstr ""
+
+#: views/container-state.html:14
+msgid "at {{stateDescription.finishedAt | date:'medium'}}"
+msgstr ""
+
+#: views/volumes.html:12
+msgid "empty directory"
+msgstr ""
+
+#: views/volumes.html:7
+msgid "host path"
+msgstr ""
+
+#: views/annotations.html:2
+#: views/container-state.html:1
+#: views/container-statuses.html:1
+#: views/containers.html:10
+#: views/containers.html:17
+#: views/containers.html:7
+#: views/labels.html:2
+#: views/pod.html:25
+#: views/volumes.html:1
+msgid "none"
+msgstr ""
+
+#: views/volumes.html:24
+msgid "not specified"
+msgstr ""
+
+#: views/container-state.html:10
+msgid "since {{stateDescription.startedAt | date:'medium'}}"
+msgstr ""
+
+#: views/containers.html:12
+msgid "to host port {{port.hostPort}}"
+msgstr ""
+
+#: views/container-state.html:15
+msgid "with exit code {{stateDescription.exitCode}}"
+msgstr ""

po/kubernetes-object-describer.pot

@@ -1,5 +1,5 @@
 <span ng-hide="enableCollapse && value.length > 120">{{value}}</span>
 <span ng-show="enableCollapse && value.length > 120">
-  <span class="reveal-contents-link" style="cursor: pointer;" title="Expand">{{value.substring(0, 120)}}<a href="javascript:;">...</a></span>
+  <span class="reveal-contents-link" style="cursor: pointer;" data-original-title="{{'Expand'|translate}}">{{value.substring(0, 120)}}<a href="javascript:;">...</a></span>
   <span style="display: none;" class="reveal-contents">{{value}}</span>
-</span>
+</span>

views/_collapse-long-text.html

@@ -1,6 +1,6 @@
-  <h3>Annotations</h3>
-  <span ng-if="!resource.metadata.annotations"><em>none</em></span>
+  <h3 translate>Annotations</h3>
+  <span ng-if="!resource.metadata.annotations"><em translate>none</em></span>
   <dl class="dl-horizontal" ng-if="resource.metadata.annotations">
     <dt ng-repeat-start="(annotationKey, annotationValue) in resource.metadata.annotations" title="{{annotationKey}}">{{annotationKey}}</dt>
     <dd ng-repeat-end collapse-long-text value="{{annotationValue}}"></dd>
-  </dl>
+  </dl>

views/annotations.html

@@ -1,18 +1,18 @@
-<span ng-if="containerState | isEmptyObj"><em>none</em></span>
+<span ng-if="containerState | isEmptyObj"><em translate>none</em></span>
 <span ng-repeat="(state, stateDescription) in containerState | limitTo: 1">
   <span ng-switch="state">
     <span ng-switch-when="waiting">
-      Waiting
+      <translate>Waiting</translate>
       <span ng-if="stateDescription.reason">({{stateDescription.reason}})</span>
     </span>
     <span ng-switch-when="running">
-      Running
-      <span ng-if="stateDescription.startedAt">since {{stateDescription.startedAt | date:'medium'}}</span>
+      <translate>Running</translate>
+      <span ng-if="stateDescription.startedAt" translate>since {{stateDescription.startedAt | date:'medium'}}</span>
     </span>
     <span ng-switch-when="terminated">
-      Terminated
-      <span ng-if="stateDescription.finishedAt">at {{stateDescription.finishedAt | date:'medium'}}</span>
-      <span ng-if="stateDescription.exitCode">with exit code {{stateDescription.exitCode}}</span>
+      <translate>Terminated</translate>
+      <span ng-if="stateDescription.finishedAt" translate>at {{stateDescription.finishedAt | date:'medium'}}</span>
+      <span ng-if="stateDescription.exitCode" translate>with exit code {{stateDescription.exitCode}}</span>
       <span ng-if="stateDescription.reason">({{stateDescription.reason}})</span>
     </span>
     <span ng-switch-default>{{state}}</span>