Merge pull request #51 from open-falcon/i18n

i18n support
open-falcon · Jun 8, 2017 · fbecab2 · fbecab2
2 parents 6309eee + c082238
commit fbecab2
Show file tree

Hide file tree

Showing 27 changed files with 639 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,12 @@ Open-Falcon homepage：[http://open-falcon.org](http://open-falcon.org)
 ## Demo site
 - TODO
 
+## i18n
+Open-Falcon natively support zh_CN and currently partially support English. Any translation will be appreciated.
+
+[How to participate in the translation](./i18n.md)
+
+
 ## Run in docker
 ```
 # make the image，run commands under dir of dashboard:

diff --git a/babel.cfg b/babel.cfg
@@ -0,0 +1,3 @@
+[python: **.py]
+[jinja2: **/templates/**.html]
+extensions=jinja2.ext.autoescape,jinja2.ext.with_
diff --git a/i18n.md b/i18n.md
@@ -0,0 +1,24 @@
+Open-Falcon support zh_CN by default. Any translation will be appreciated.
+
+If you want to translate open-falcon to a new language or just refine the exist translation, you could follow the instructions below.
+
+## refine the exist translation
+
+1. find what you want to translate in the source code and replace it to `{{_('xxx')}}`.
+2. run `python ./scripts/tr_update.py`, it will update `rrd/translations/foo/LC_MESSAGES/messages.po`.
+3. run `python ./scripts/tr_compile.py`, it will generate a complied file in `rrd/translations/foo/LC_MESSAGES/messages.mo`
+
+
+## create a new language(such as Spanish support)
+1. update `rrd/config.py`, add a new key to `LANGUAGES`, such as:
+
+        LANGUAGES   = {
+            'en':  'English',
+            'zh_CN':  'Chinese-Simplified',
+            'es': Spanish,
+        }
+
+2. run `python ./scripts/tr_init.py`, it will update `rrd/translations/es/LC_MESSAGES/messages.po`.
+3. find what you want to translate in the source code and replace it to `{{_('xxx')}}`.
+4. run `python ./scripts/tr_update.py`, it will update `rrd/translations/es/LC_MESSAGES/messages.po`.
+5. run `python ./scripts/tr_compile.py`, it will generate a complied file in `rrd/translations/es/LC_MESSAGES/messages.mo`
diff --git a/pip_requirements.txt b/pip_requirements.txt
@@ -1,4 +1,5 @@
 Flask==0.10.1
+Flask-Babel==0.9
 Jinja2==2.7.2
 Werkzeug==0.9.4
 gunicorn==18.0

diff --git a/rrd/__init__.py b/rrd/__init__.py
@@ -1,17 +1,29 @@
 #-*- coding:utf-8 -*-
 import os
 import traceback
-from flask import Flask
+from flask import Flask, request
+from flask.ext.babel import Babel, gettext
+from rrd import config
 
 #-- create app --
 app = Flask(__name__)
 app.config.from_object("rrd.config")
+babel = Babel(app)
 
 @app.errorhandler(Exception)
 def all_exception_handler(error):
     tb = traceback.format_exc()
-    err_msg = '<pre>暂时无法访问,请联系管理员.\n\nerror: %s\n\ntraceback日志如下:\n%s</pre>' %(error, tb)
-    return err_msg, 500
+    err_tip = gettext('Temporary error, please contact your administrator.')
+    err_msg = err_tip + '\n\nError: %s\n\nTraceback:\n%s' %(error, tb)
+    return '<pre>' + err_msg + '</pre>', 500
+
+@babel.localeselector
+def get_locale():
+    return request.accept_languages.best_match(config.LANGUAGES.keys())
+
+@babel.timezoneselector
+def get_timezone():
+    return app.config.get("BABEL_DEFAULT_TIMEZONE")
 
 from view import index
 from view.auth import auth

diff --git a/rrd/config.py b/rrd/config.py
@@ -40,6 +40,15 @@
 LDAP_TLS_REQUIRE_CERT = True
 LDAP_TLS_CIPHER_SUITE = ""
 
+# i18n
+BABEL_DEFAULT_LOCALE   = 'zh_CN'
+BABEL_DEFAULT_TIMEZONE = 'Asia/Shanghai'
+# aviliable translations
+LANGUAGES   = {
+    'en':  'English',
+    'zh_CN':  'Chinese-Simplified',
+}
+
 # portal site config
 MAINTAINERS = ['root']
 CONTACT = '[email protected]'

diff --git a/rrd/templates/auth/register.html b/rrd/templates/auth/register.html
@@ -18,7 +18,7 @@ <h3 class="panel-title">Sign up</h3>
 									type="text" id="name" class="form-control" required autofocus />
 							</div>
 							<div class="form-group">
-								<label for="cnname">中文名:</label> <input
+                                <label for="cnname">{{ _('UserName') }}:</label> <input
 									type="text" id="cnname" class="form-control" required autofocus />
 							</div>
 							<div class="form-group">

diff --git a/rrd/templates/base.html b/rrd/templates/base.html
@@ -111,16 +111,16 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-                    <h4 class="modal-title">批量编辑 Graph</h4>
+                    <h4 class="modal-title">{{ _('batch edit') }} Graph</h4>
                 </div>
                 <div class="modal-body">
                     <div class="edit-area">
 
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
-                    <button type="button" class="btn btn-primary editModalYes">确定</button>
+                    <button type="button" class="btn btn-default" data-dismiss="modal"> {{ _('Close') }}</button>
+                    <button type="button" class="btn btn-primary editModalYes">{{ _('OK') }}</button>
                 </div>
             </div>
         </div>

diff --git a/rrd/templates/chart/big_ng.html b/rrd/templates/chart/big_ng.html
@@ -53,7 +53,7 @@
                         <span class="caret"></span></a>
                     <ul class="dropdown-menu" style="min-width:400px; margin:0 0 0 0px;">
                         <table class="table table-striped">
-                            <tbody><tr><td width="100px;"><span>时间跨度</span>
+                            <tbody><tr><td width="100px;"><span>{{_('date range')}}</span>
                                     </td><td>
                                         <a ng-class="{enable: vm.param.start == -3600}" ng-click="vm.param.start=-3600" class="chart-opt">1h</a>
                                         <a ng-class="{enable: vm.param.start == -21600}" ng-click="vm.param.start=-21600" class="chart-opt">6h</a>
@@ -64,19 +64,19 @@
                                         <a ng-class="{enable: vm.param.start == -2592000}" ng-click="vm.param.start=-2592000" class="chart-opt">1m</a>
                                 </td></tr>
 
-                                <tr><td> <span>采样方法</span>
+                                <tr><td> <span>{{_('sampling method')}}</span>
                                     </td><td>
-                                        <a ng-class="{enable: vm.param.cf=='MAX'}" ng-click="vm.param.cf='MAX'" class="chart-opt">最大值</a>
-                                        <a ng-class="{enable: vm.param.cf=='MIN'}" ng-click="vm.param.cf='MIN'" class="chart-opt">最小值</a>
-                                        <a ng-class="{enable: vm.param.cf=='AVERAGE'}" ng-click="vm.param.cf='AVERAGE'" class="chart-opt">平均值</a>
+                                        <a ng-class="{enable: vm.param.cf=='MAX'}" ng-click="vm.param.cf='MAX'" class="chart-opt">{{_('max')}}</a>
+                                        <a ng-class="{enable: vm.param.cf=='MIN'}" ng-click="vm.param.cf='MIN'" class="chart-opt">{{_('min')}}</a>
+                                        <a ng-class="{enable: vm.param.cf=='AVERAGE'}" ng-click="vm.param.cf='AVERAGE'" class="chart-opt">{{_('average')}}</a>
                                 </td></tr>
 
-                                <tr><td><span>其他</span>
+                                <tr><td><span>{{_('other')}}</span>
                                     </td><td>
-                                        <a ng-click="vm.param.sum='on';vm.param.sumonly='off'" data-k="sum|sumonly" data-v="1| " class="chart-opt">求和</a>
-                                        <a ng-click="vm.param.sum='on';vm.param.sumonly='on'" data-k="sumonly" data-v="1" class="chart-opt">只显示sum</a>
-                                        <a ng-click="vm.param.sum='off';vm.param.sumonly='off'" data-k="sum|sumonly" data-v=" | " class="chart-opt">取消求和</a>
-                                        <a ng-click="vm.reset()" data-k="start|end|sum|cf|tongbi|sumonly" data-v=" | | | | | | " class="chart-opt"><b>重置</b></a>
+                                        <a ng-click="vm.param.sum='on';vm.param.sumonly='off'" data-k="sum|sumonly" data-v="1| " class="chart-opt">{{_('sum')}}</a>
+                                        <a ng-click="vm.param.sum='on';vm.param.sumonly='on'" data-k="sumonly" data-v="1" class="chart-opt">{{_('sum only')}}m</a>
+                                        <a ng-click="vm.param.sum='off';vm.param.sumonly='off'" data-k="sum|sumonly" data-v=" | " class="chart-opt">{{_('cancel sum')}}</a>
+                                        <a ng-click="vm.reset()" data-k="start|end|sum|cf|tongbi|sumonly" data-v=" | | | | | | " class="chart-opt"><b>{{_('reset')}}</b></a>
                                 </td></tr>
                         </tbody></table>
                     </ul>
@@ -103,20 +103,20 @@
                                     <div class="form-group">
                                         <div class="checkbox">
                                             <label>
-                                                <input type="checkbox" name="all" id="" ng-model="vm.all" ng-change="vm.checkAll()"/> 全选
+                                                <input type="checkbox" name="all" id="" ng-model="vm.all" ng-change="vm.checkAll()"/>{{_('select all')}} 
                                             </label>
                                         </div>
                                         <div class="checkbox">
                                             <label>
-                                                <input type="checkbox" name="reverse" id="" ng-model="vm.reverse" ng-change="vm.checkReverse()" />反选
+                                                <input type="checkbox" name="reverse" id="" ng-model="vm.reverse" ng-change="vm.checkReverse()" />{{_('reverse select')}}反选
                                             </label>
                                         </div>
-                                        <a class="form-control input-sm btn btn-default check" ng-click="vm.checkSearch()"><small>刷新</small></a>
+                                        <a class="form-control input-sm btn btn-default check" ng-click="vm.checkSearch()"><small>{{_('refresh')}}</small></a>
                                     </div>
                                     <div class="form-group search-area">
                                         <input class="form-control input-sm" ng-model="vm.query" id="searchinput" style="width:250px;"
                                             ng-enter="vm.checkFilter(); vm.checkSearch();"
-                                            type="search" placeholder="输入字符过滤, 回车刷新..">
+                                            type="search" placeholder="{{_('type to fiter, enter to refresh...')}}">
                                     </div>
                                 </div>
                                 <ul multi-check-group class="list-unstyled" style="font-family: 'verdana', 'Microsoft YaHei', 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono';">

diff --git a/rrd/templates/chart/embed.html b/rrd/templates/chart/embed.html
@@ -52,7 +52,7 @@
                         <span class="caret"></span></a>
                     <ul class="dropdown-menu" style="min-width:400px; margin:0 0 0 0px;">
                         <table class="table table-striped">
-                            <tbody><tr><td width="100px;"><span>时间跨度</span>
+                            <tbody><tr><td width="100px;"><span>{{_('date range')}}</span>
                                     </td><td>
                                         <a ng-class="{enable: vm.param.start == -3600}" ng-click="vm.param.start=-3600" class="chart-opt">1h</a>
                                         <a ng-class="{enable: vm.param.start == -21600}" ng-click="vm.param.start=-21600" class="chart-opt">6h</a>
@@ -63,19 +63,19 @@
                                         <a ng-class="{enable: vm.param.start == -2592000}" ng-click="vm.param.start=-2592000" class="chart-opt">1m</a>
                                 </td></tr>
 
-                                <tr><td> <span>采样方法</span>
+                                <tr><td> <span>{{_('sampling method')}}</span>
                                     </td><td>
-                                        <a ng-class="{enable: vm.param.cf=='MAX'}" ng-click="vm.param.cf='MAX'" class="chart-opt">最大值</a>
-                                        <a ng-class="{enable: vm.param.cf=='MIN'}" ng-click="vm.param.cf='MIN'" class="chart-opt">最小值</a>
-                                        <a ng-class="{enable: vm.param.cf=='AVERAGE'}" ng-click="vm.param.cf='AVERAGE'" class="chart-opt">平均值</a>
+                                        <a ng-class="{enable: vm.param.cf=='MAX'}" ng-click="vm.param.cf='MAX'" class="chart-opt">{{_('max')}}</a>
+                                        <a ng-class="{enable: vm.param.cf=='MIN'}" ng-click="vm.param.cf='MIN'" class="chart-opt">{{_('min')}}</a>
+                                        <a ng-class="{enable: vm.param.cf=='AVERAGE'}" ng-click="vm.param.cf='AVERAGE'" class="chart-opt">{{_('average')}}</a>
                                 </td></tr>
 
-                                <tr><td><span>其他</span>
+                                <tr><td><span>{{_('other')}}</span>
                                     </td><td>
-                                        <a ng-click="vm.param.sum='on';vm.param.sumonly='off'" data-k="sum|sumonly" data-v="1| " class="chart-opt">求和</a>
-                                        <a ng-click="vm.param.sum='on';vm.param.sumonly='on'" data-k="sumonly" data-v="1" class="chart-opt">只显示sum</a>
-                                        <a ng-click="vm.param.sum='off';vm.param.sumonly='off'" data-k="sum|sumonly" data-v=" | " class="chart-opt">取消求和</a>
-                                        <a ng-click="vm.reset()" data-k="start|end|sum|cf|tongbi|sumonly" data-v=" | | | | | | " class="chart-opt"><b>重置</b></a>
+                                        <a ng-click="vm.param.sum='on';vm.param.sumonly='off'" data-k="sum|sumonly" data-v="1| " class="chart-opt">{{_('sum')}}</a>
+                                        <a ng-click="vm.param.sum='on';vm.param.sumonly='on'" data-k="sumonly" data-v="1" class="chart-opt">{{_('sum only')}}</a>
+                                        <a ng-click="vm.param.sum='off';vm.param.sumonly='off'" data-k="sum|sumonly" data-v=" | " class="chart-opt">{{_('cancel sum')}}</a>
+                                        <a ng-click="vm.reset()" data-k="start|end|sum|cf|tongbi|sumonly" data-v=" | | | | | | " class="chart-opt"><b>{{_('reset')}}</b></a>
                                 </td></tr>
                         </tbody></table>
                     </ul>

diff --git a/rrd/templates/chart/multi_ng.html b/rrd/templates/chart/multi_ng.html
@@ -43,7 +43,7 @@
                     <div class="col-md-12">
                         <form class="form-inline" role="form">
                             <div class="form-group">
-                                <label class="control-label">起始</label>
+                                <label class="control-label">{{_('begin')}}</label>
                                 <a class="dropdown-toggle form-control input-sm date-area" id="dropdown1" role="button" data-toggle="dropdown" href="javascript:;">
                                     <div class="input-group">
                                         <span class="form-control-static">[[ vm.globalParam.start | date: 'yyyy-MM-dd HH:mm' ]]</span>
@@ -56,7 +56,7 @@
                             </div>
 
                             <div class="form-group">
-                                <label class="control-label">结束</label>
+                                <label class="control-label">{{_('end')}}</label>
                                 <a class="dropdown-toggle form-control input-sm date-area" id="dropdown2" role="button" data-toggle="dropdown" href="javascript:;">
                                     <div class="input-group">
                                         <span class="form-control-static">[[ vm.globalParam.end | date: 'yyyy-MM-dd HH:mm' ]]</span>
@@ -69,34 +69,34 @@
                             </div>
 
                             <div class="form-group">
-                                <label class="control-label">采样方法</label>
+                                <label class="control-label">{{_('sampling method')}}</label>
                                 <select class="form-control input-sm" name="cf" ng-model="vm.globalParam.cf">
                                     <option value="AVERAGE" selected="">AVERAGE</option>
                                     <option value="MAX">MAX</option>
                                     <option value="MIN">MIN</option>
                                 </select>
                             </div>
                             <div class="form-group">
-                                <label class="control-label">视角</label>
+                                <label class="control-label">{{_('view')}}</label>
                                 <select class="form-control input-sm" name="graph_type"  ng-model="vm.globalParam.graph_type">
-                                    <option value="h" selected="">Endpoint视角</option>
-                                    <option value="k">Counter视角</option>
-                                    <option value="a">组合视角</option>
+                                    <option value="h" selected="">{{_('endpoint view')}}</option>
+                                    <option value="k">{{_('counter view')}}</option>
+                                    <option value="a">{{_('multi view')}}</option>
                                 </select>
                             </div>
 
                             <div class="form-group">
                                 <div class="checkbox">
                                     <label>
-                                        <input type="checkbox" id="sum" name="sum" value="on"  ng-model="vm.globalParam.sum" ng-true-value="on" ng-false-value="off"> 求和
+                                        <input type="checkbox" id="sum" name="sum" value="on"  ng-model="vm.globalParam.sum" ng-true-value="on" ng-false-value="off">{{_('sum')}}
                                     </label>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <button id="go" class="btn btn-default btn-sm" ng-click="vm.show()">看图</button>
+                                <button id="go" class="btn btn-default btn-sm" ng-click="vm.show()">{{_('show')}}</button>
                             </div>
                             <div class="form-group">
-                                <button id="reset" class="btn btn-default btn-sm" ng-click="vm.reset()">重置条件</button>
+                                <button id="reset" class="btn btn-default btn-sm" ng-click="vm.reset()">{{_('reset')}}</button>
                             </div>
 
                         </form>