Skip to content

Commit 249538f

Browse files
gsta-cloudinsadriancole
gsta-cloudins
authored and
adriancole
committed
add i18n support (openzipkin#1801)
Fixes openzipkin#1792
1 parent e688d98 commit 249538f

22 files changed

+187
-35
lines changed

‎zipkin-ui/js/component_ui/i18n.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import 'jquery-i18n-properties';
2+
import $ from 'jquery';
3+
4+
export function i18nInit(file) {
5+
$.i18n.properties({
6+
name: file,
7+
path: '',
8+
mode: 'map',
9+
callback: () => {
10+
$('[data-i18n]').each((index, item) => {
11+
if (item.tagName === 'INPUT' || item.tagName === 'SELECT') {
12+
$(item).attr('placeholder', $.i18n.prop($(item).attr('data-i18n')));
13+
} else {
14+
$(item).html($.i18n.prop($(item).attr('data-i18n')));
15+
}
16+
});
17+
}
18+
});
19+
}

‎zipkin-ui/js/component_ui/navbar.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {component} from 'flightjs';
22
import $ from 'jquery';
3+
import {i18nInit} from '../component_ui/i18n';
34

45
const NavbarUI = component(function navbar() {
56
this.onNavigate = function(ev, {route}) {
@@ -14,6 +15,7 @@ const NavbarUI = component(function navbar() {
1415
};
1516

1617
this.after('initialize', function() {
18+
i18nInit('nav');
1719
this.on(document, 'navigate', this.onNavigate);
1820
});
1921
});

‎zipkin-ui/js/component_ui/trace.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import {component} from 'flightjs';
33
import queryString from 'query-string';
44
import $ from 'jquery';
5+
import {i18nInit} from '../component_ui/i18n';
56

67
// extracted for testing. this code mutates spans and selectedSpans
78
export function showSpans(spans, parents, children, selectedSpans) {
@@ -493,5 +494,7 @@ export default component(function trace() {
493494
} else {
494495
this.trigger(document, 'uiExpandAllSpans');
495496
}
497+
498+
i18nInit('trace');
496499
});
497500
});

‎zipkin-ui/js/page/default.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import TimeStampUI from '../component_ui/timeStamp';
1616
import BackToTop from '../component_ui/backToTop';
1717
import {defaultTemplate} from '../templates';
1818
import {contextRoot} from '../publicPath';
19+
import {i18nInit} from '../component_ui/i18n';
1920

2021
const DefaultPageComponent = component(function DefaultPage() {
2122
const sortOptions = [
@@ -79,6 +80,7 @@ const DefaultPageComponent = component(function DefaultPage() {
7980
TimeStampUI.attachTo('#end-ts');
8081
TimeStampUI.attachTo('#start-ts');
8182
BackToTop.attachTo('#backToTop');
83+
i18nInit('traces');
8284

8385
$('.timeago').timeago();
8486

‎zipkin-ui/js/page/dependency.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import ServiceDataModal from '../component_ui/serviceDataModal';
88
import TimeStampUI from '../component_ui/timeStamp';
99
import GoToDependencyUI from '../component_ui/goToDependency';
1010
import {dependenciesTemplate} from '../templates';
11+
import {i18nInit} from '../component_ui/i18n';
1112

1213
const DependencyPageComponent = component(function DependencyPage() {
1314
this.after('initialize', function() {
@@ -27,6 +28,7 @@ const DependencyPageComponent = component(function DependencyPage() {
2728
TimeStampUI.attachTo('#end-ts');
2829
TimeStampUI.attachTo('#start-ts');
2930
GoToDependencyUI.attachTo('#dependency-query-form');
31+
i18nInit('dep');
3032
});
3133
});
3234

‎zipkin-ui/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"extract-text-webpack-plugin": "^1.0.1",
4646
"file-loader": "^0.8.5",
4747
"html-webpack-plugin": "^2.10.0",
48+
"jquery-i18n-properties": "^1.2.7",
4849
"karma": "^0.13.21",
4950
"karma-babel-preprocessor": "^6.0.1",
5051
"karma-chai": "^0.1.0",

‎zipkin-ui/static/dep.properties

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dep.stime = Start time
2+
dep.etime = End time
3+
dep.analyze = Analyze Dependencies

‎zipkin-ui/static/dep_zh.properties

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dep.stime = 开始时间
2+
dep.etime = 结束时间
3+
dep.analyze = 依赖分析

‎zipkin-ui/static/dep_zh_CN.properties

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dep.stime = 开始时间
2+
dep.etime = 结束时间
3+
dep.analyze = 依赖分析

‎zipkin-ui/static/nav.properties

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
nav.inves = Investigate system behavior
2+
nav.find = Find a trace
3+
nav.dep = Dependencies
4+
nav.search = Go to trace

‎zipkin-ui/static/nav_zh.properties

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
nav.inves = 分布式事件分析
2+
nav.find = 查找调用链
3+
nav.dep = 依赖分析
4+
nav.search = 根据ID查找调用链

‎zipkin-ui/static/nav_zh_CN.properties

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
nav.inves = 分布式跟踪分析
2+
nav.find = 查找调用链
3+
nav.dep = 依赖分析
4+
nav.search = 根据ID查找调用链

‎zipkin-ui/static/trace.properties

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
trace.duration = Duration:
2+
trace.service = Services:
3+
trace.depth = Depth:
4+
trace.spans = Total Spans:
5+
trace.expand = Expand All
6+
trace.coollapse = Collapse All
7+
trace.more = More Info

‎zipkin-ui/static/trace_zh.properties

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
trace.duration = 持续时间:
2+
trace.service = 服务:
3+
trace.depth = 深度:
4+
trace.spans = Span总数:
5+
trace.expand = 全部展开
6+
trace.coollapse = 全部隐藏
7+
trace.more = 更多信息

‎zipkin-ui/static/trace_zh_CN.properties

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
trace.duration = 持续时间:
2+
trace.service = 服务:
3+
trace.depth = 深度:
4+
trace.spans = Span总数:
5+
trace.expand = 全部展开
6+
trace.coollapse = 全部隐藏
7+
trace.more = 更多信息

‎zipkin-ui/static/traces.properties

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
traces.stime = Start time
2+
traces.etime = End time
3+
traces.duration = Duration (μs) >=
4+
traces.limit = Limit
5+
traces.findBtn = Find Traces
6+
traces.sort = Sort
7+
service-percentage-desc = Service Percentage: Longest First
8+
service-percentage-asc = Service Percentage: Shortest First
9+
duration-desc = Longest First
10+
duration-asc = Shortest First
11+
timestamp-desc = Newest First
12+
timestamp-asc = Oldest First
13+
traces.des = Please select the criteria for your trace lookup.
14+
15+
modal.title = How to find a trace
16+
modal.p1 = So you want to find some traces, huh? You've come to the right place!
17+
modal.title2 = Service names
18+
modal.p2 = First off you have select a service to lookup by. All traces are indexed by service names.
19+
modal.p3 = Once that is done you have three options to pick from. See notes on each below.
20+
modal.title3 = 1. Lookups by span name
21+
modal.p4 = Span names are generally thrift method names or Rails endpoints. This allows you to look up traces that accessed a particular part of the service.
22+
modal.title4 = 2. Lookups by annotation
23+
modal.p5 = An annotation is a point in time in the trace. It is assigned a string value, this is what you can look up by in this field. Could be things like
24+
modal.title5 = 3. Lookups by key/value
25+
modal.p6 = Key / value annotations are just extra metadata attached to a trace. This could be things like the url hit,response codes or exceptions. See below for a few examples.
26+
modal.title6 = Dates and limits
27+
modal.p7 = Zipkin allows you to pick a point in time to help us guide the selection of traces. When doing a lookup we return traces before that point in time up until the limit number of results.

‎zipkin-ui/static/traces_zh.properties

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
traces.stime = 开始时间
2+
traces.etime = 结束时间
3+
traces.duration = 持续时间 (μs) >=
4+
traces.limit = 数量
5+
traces.findBtn = 查找
6+
traces.sort = 排序
7+
service-percentage-desc = 最大百分比优先
8+
service-percentage-asc = 最小百分比优先
9+
duration-desc = 耗时最长优先
10+
duration-asc = 耗时最短优先
11+
timestamp-desc = 时间倒序
12+
timestamp-asc = 时间顺序
13+
traces.des = 请选择跟踪查找的条件。
14+
15+
modal.title = 如何查找调用链
16+
modal.p1 = 如果你像查找调用链，那么你来对地方了！
17+
modal.title2 = 服务名
18+
modal.p2 = 首先，您可以选择要查找的服务。所有跟踪都由服务名称进行索引。
19+
modal.p3 = 一旦做到这一点，你有三个选择可供选择。见下面的注释。
20+
modal.title3 = 1. 通过跨名称查找
21+
modal.p4 = 跨度名称通常是节约方法名称或Rails端点。这允许您查找访问服务特定部分的跟踪。
22+
modal.title4 = 2. 通过annotation查找
23+
modal.p5 = annotation是跟踪中的一个时间点。它被赋值为一个字符串值，这是您可以在这个字段中查找的值。可能是这样的事情
24+
modal.title5 = 3. 通过key/value查找
25+
modal.p6 = Key / value annotations只是附加到跟踪的元数据。这可能是URL命中、响应代码或异常等事情。下面是几个例子。
26+
modal.title6 = 时间和数量
27+
modal.p7 = Zipkin允许你选择一个时间点来帮助我们指导痕迹的选择。在进行查找时，我们会在该点之前返回跟踪，直到结果的限制数为止。

‎zipkin-ui/static/traces_zh_CN.properties

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
traces.stime = 开始时间
2+
traces.etime = 结束时间
3+
traces.duration = 持续时间 (μs) >=
4+
traces.limit = 数量
5+
traces.findBtn = 查找
6+
traces.sort = 排序
7+
service-percentage-desc = 最大百分比优先
8+
service-percentage-asc = 最小百分比优先
9+
duration-desc = 耗时最长优先
10+
duration-asc = 耗时最短优先
11+
timestamp-desc = 时间倒序
12+
timestamp-asc = 时间顺序
13+
traces.des = 请选择跟踪查找的条件。
14+
15+
modal.title = 如何查找调用链
16+
modal.p1 = 如果你像查找调用链，那么你来对地方了！
17+
modal.title2 = 服务名
18+
modal.p2 = 首先，您可以选择要查找的服务。所有跟踪都由服务名称进行索引。
19+
modal.p3 = 一旦做到这一点，你有三个选择可供选择。见下面的注释。
20+
modal.title3 = 1. 通过跨名称查找
21+
modal.p4 = 跨度名称通常是节约方法名称或Rails端点。这允许您查找访问服务特定部分的跟踪。
22+
modal.title4 = 2. 通过annotation查找
23+
modal.p5 = annotation是跟踪中的一个时间点。它被赋值为一个字符串值，这是您可以在这个字段中查找的值。可能是这样的事情
24+
modal.title5 = 3. 通过key/value查找
25+
modal.p6 = Key / value annotations只是附加到跟踪的元数据。这可能是URL命中、响应代码或异常等事情。下面是几个例子。
26+
modal.title6 = 时间和数量
27+
modal.p7 = Zipkin允许你选择一个时间点来帮助我们指导痕迹的选择。在进行查找时，我们会在该点之前返回跟踪，直到结果的限制数为止。

‎zipkin-ui/templates/dependency.mustache

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
<div class="row well well-sm">
22
<form id="dependency-query-form" class="form-inline" role="form">
33
<div id="start-ts" class="form-group">
4-
<label for="timeStamp">Start time</label>
4+
<label for="timeStamp" data-i18n="dep.stime">Start time</label>
55
<input class="form-control input-sm date-input" type="text">
66
<input class="form-control input-sm time-input" type="text">
77
<input class="timestamp-value" id="startTs" name="startTs" type="hidden" value="">
88
</div>
99

1010
<div id="end-ts" class="form-group">
11-
<label for="timeStamp">End time</label>
11+
<label for="timeStamp" data-i18n="dep.etime">End time</label>
1212
<input class="form-control input-sm date-input" type="text">
1313
<input class="form-control input-sm time-input" type="text">
1414
<input class="timestamp-value" id="endTs" name="endTs" type="hidden" value="">
1515
</div>
1616

17-
<button type="submit" class="btn btn-default btn-sm">Analyze Dependencies</button>
17+
<button type="submit" class="btn btn-default btn-sm" data-i18n="dep.analyze">Analyze Dependencies</button>
1818
</form>
1919
</div>
2020

‎zipkin-ui/templates/index.mustache

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,30 @@
1111
</div>
1212

1313
<div id="start-ts" class="form-group">
14-
<label for="timeStamp">Start time</label>
14+
<label for="timeStamp" data-i18n="traces.stime">Start time</label>
1515
<input class="form-control input-sm date-input" type="text">
1616
<input class="form-control input-sm time-input" type="text">
1717
<input class="timestamp-value" id="startTs" name="startTs" type="hidden" value="{{startTs}}">
1818
</div>
1919

2020
<div id="end-ts" class="form-group">
21-
<label for="timeStamp">End time</label>
21+
<label for="timeStamp" data-i18n="traces.etime">End time</label>
2222
<input class="form-control input-sm date-input" type="text">
2323
<input class="form-control input-sm time-input" type="text">
2424
<input class="timestamp-value" id="endTs" name="endTs" type="hidden" value="{{endTs}}">
2525
</div>
2626

2727
<div class="form-group">
28-
<label for="minDuration">Duration (μs) >=</label>
28+
<label for="minDuration" data-i18n="traces.duration">Duration (μs) >=</label>
2929
<input class="form-control input-sm" id="minDuration" name="minDuration" type="text" value="{{minDuration}}">
3030
</div>
3131

3232
<div class="form-group">
33-
<label for="limit">Limit</label>
33+
<label for="limit" data-i18n="traces.limit">Limit</label>
3434
<input class="form-control input-sm" id="limit" name="limit" type="text" value="{{limit}}">
3535
</div>
3636

37-
<button type="submit" class="btn btn-default btn-sm">Find Traces</button>
37+
<button type="submit" class="btn btn-default btn-sm" data-i18n="traces.findBtn">Find Traces</button>
3838
<button type="button" class="btn btn-default btn-sm info-request">
3939
<span class="glyphicon glyphicon-question-sign"></span>
4040
</button>
@@ -50,9 +50,9 @@
5050
</span>
5151
</div>
5252
<div class="pull-right">
53-
<span class="selector">Sort:
53+
<span class="selector"><span data-i18n="traces.sort">Sort</span>:
5454
<select class="sort-order js-sort-order" form="submitForm" name="sortOrder">
55-
{{#sortOrderOptions}}<option value="{{value}}" {{sortOrderSelected}}>{{text}}</option>{{/sortOrderOptions}}
55+
{{#sortOrderOptions}}<option value="{{value}}" {{sortOrderSelected}} data-i18n="{{value}}">{{text}}</option>{{/sortOrderOptions}}
5656
</select>
5757
</span>
5858
</div>
@@ -76,7 +76,7 @@
7676
{{/queryError}}
7777
{{^queryWasPerformed}}
7878
<div class="alert alert-info" id="help-msg">
79-
<p>Please select the criteria for your trace lookup.</p>
79+
<p data-i18n="traces.des">Please select the criteria for your trace lookup.</p>
8080
</div>
8181
{{/queryWasPerformed}}
8282
{{#queryWasPerformed}}
@@ -114,25 +114,25 @@
114114
<div class="modal-content">
115115
<div class="modal-header">
116116
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
117-
<h4 class="modal-title">How to find a trace</h4>
117+
<h4 class="modal-title" data-i18n="modal.title">How to find a trace</h4>
118118
</div>
119119
<div class="modal-body">
120-
<p>So you want to find some traces, huh? You've come to the right place!</p>
120+
<p data-i18n="modal.p1">So you want to find some traces, huh? You've come to the right place!</p>
121121

122-
<h4>Service names</h4>
123-
<p>First off you have select a service to lookup by. All traces are indexed by service names.</p>
124-
<p>Once that is done you have three options to pick from. See notes on each below.</p>
122+
<h4 data-i18n="modal.title2">Service names</h4>
123+
<p data-i18n="modal.p2">First off you have select a service to lookup by. All traces are indexed by service names.</p>
124+
<p data-i18n="modal.p3">Once that is done you have three options to pick from. See notes on each below.</p>
125125

126-
<h4>1. Lookups by span name</h4>
127-
<p>Span names are generally thrift method names or Rails endpoints. This allows you to look up traces
126+
<h4 data-i18n="modal.title3">1. Lookups by span name</h4>
127+
<p data-i18n="modal.p4">Span names are generally thrift method names or Rails endpoints. This allows you to look up traces
128128
that accessed a particular part of the service.</p>
129129

130-
<h4>2. Lookups by annotation</h4>
131-
<p>An annotation is a point in time in the trace. It is assigned a string value, this is what you can look up
130+
<h4 data-i18n="modal.title4">2. Lookups by annotation</h4>
131+
<p data-i18n="modal.p5">An annotation is a point in time in the trace. It is assigned a string value, this is what you can look up
132132
by in this field. Could be things like <strong>finagle.timeout</strong></p>
133133

134-
<h4>3. Lookups by key/value</h4>
135-
<p>Key / value annotations are just extra metadata attached to a trace. This could be things like the url hit,
134+
<h4 data-i18n="modal.title5">3. Lookups by key/value</h4>
135+
<p data-i18n="modal.p6">Key / value annotations are just extra metadata attached to a trace. This could be things like the url hit,
136136
response codes or exceptions. See below for a few examples.</p>
137137
<table class="table table-bordered">
138138
<thead>
@@ -150,8 +150,8 @@
150150
</tbody>
151151
</table>
152152

153-
<h4>Dates and limits</h4>
154-
<p>Zipkin allows you to pick a point in time to help us guide the selection of traces. When doing a lookup
153+
<h4 data-i18n="modal.title6">Dates and limits</h4>
154+
<p data-i18n="modal.p7">Zipkin allows you to pick a point in time to help us guide the selection of traces. When doing a lookup
155155
we return traces before that point in time up until the limit number of results.</p>
156156
</div>
157157
</div>

‎zipkin-ui/templates/layout.mustache

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<div class='container'>
33
<div class='navbar-header'>
44
<a class='navbar-brand' href='{{contextRoot}}'>
5-
Zipkin<span class='muted' style='font-size: .75em; padding-left: 10px;'>Investigate system behavior</span>
5+
Zipkin<span class='muted' style='font-size: .75em; padding-left: 10px;' data-i18n="nav.inves">Investigate system behavior</span>
66
</a>
77
</div>
88
<div class="navbar-left">
99
<ul class="nav navbar-nav">
10-
<li data-route="index"><a href="{{contextRoot}}">Find a trace</a></li>
11-
<li data-route="dependency"><a href="{{contextRoot}}dependency/">Dependencies</a></li>
10+
<li data-route="index"><a href="{{contextRoot}}" data-i18n="nav.find">Find a trace</a></li>
11+
<li data-route="dependency"><a href="{{contextRoot}}dependency/" data-i18n="nav.dep">Dependencies</a></li>
1212
</ul>
1313
</div>
1414
<div class="navbar-right" style="width: 50%">
@@ -18,7 +18,7 @@
1818
<form id="traceIdQueryForm" class="form-inline" role="form">
1919
<div class="navbar-right" style="width: 25%; float: right">
2020
<div class="row well-sm clearfix">
21-
<input type="text" class="form-control input-sm" id="traceIdQuery" name="traceIdQuery" style="width: 100%" placeholder='Go to trace'>
21+
<input type="text" class="form-control input-sm" id="traceIdQuery" name="traceIdQuery" style="width: 100%" placeholder='Go to trace' data-i18n='nav.search'>
2222
</div>
2323
</div>
2424
</form>

0 commit comments

Comments
 (0)