Skip to content

Commit 0976ca5

Browse files
virtualdadriancole
virtuald
authored and
adriancole
committed
Adds JSON button to trace page
- Shows prettified JSON in modal dialog - Adds download link for JSON Fixes openzipkin#1060
1 parent 8c644b5 commit 0976ca5

File tree

6 files changed

+54
-3
lines changed

6 files changed

+54
-3
lines changed

‎zipkin-ui/css/trace.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,4 +156,12 @@
156156
max-width: 75%;
157157
}
158158

159+
.modal-header .save {
160+
float: right;
161+
margin-right: 5px;
162+
}
163+
164+
.save {
165+
opacity: 0.2;
166+
}
159167

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default component(function TraceData() {
99
dataType: 'json',
1010
success: trace => {
1111
const modelview = traceToMustache(trace);
12-
this.trigger('tracePageModelView', modelview);
12+
this.trigger('tracePageModelView', {modelview, trace});
1313
}
1414
});
1515
});

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {component} from 'flightjs';
2+
3+
export default component(function jsonPanel() {
4+
this.show = function(e, data) {
5+
this.$node.find('.modal-title').text(data.title);
6+
7+
this.$node.find('.save').attr('href', data.link);
8+
this.$node.find('.modal-body pre').text(JSON.stringify(data.obj, null, 2));
9+
this.$node.modal('show');
10+
};
11+
12+
this.after('initialize', function() {
13+
this.$node.modal('hide');
14+
this.on(document, 'uiRequestJsonPanel', this.show);
15+
});
16+
});

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export function formatEndpoint({ipv4, port = 0, serviceName = ''}) {
8888

8989
export default function traceToMustache(trace) {
9090
const summary = traceSummary(trace);
91+
const traceId = summary.traceId;
9192
const duration = mkDurationStr(summary.duration);
9293
const groupedTimestamps = getGroupedTimestamps(summary);
9394
const serviceDurations = getServiceDurations(groupedTimestamps);
@@ -167,6 +168,7 @@ export default function traceToMustache(trace) {
167168
const spansBackup = spans;
168169

169170
return {
171+
traceId,
170172
duration,
171173
services,
172174
depth,

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import $ from 'jquery';
33
import TraceData from '../component_data/trace';
44
import FilterAllServicesUI from '../component_ui/filterAllServices';
55
import FullPageSpinnerUI from '../component_ui/fullPageSpinner';
6+
import JsonPanelUI from '../component_ui/jsonPanel';
67
import ServiceFilterSearchUI from '../component_ui/serviceFilterSearch';
78
import SpanPanelUI from '../component_ui/spanPanel';
89
import TraceUI from '../component_ui/trace';
@@ -17,19 +18,27 @@ const TracePageComponent = component(function TracePage() {
1718
TraceData.attachTo(document, {
1819
traceId: this.attr.traceId
1920
});
20-
this.on(document, 'tracePageModelView', function(ev, modelview) {
21-
this.$node.html(traceTemplate(modelview));
21+
this.on(document, 'tracePageModelView', function(ev, data) {
22+
this.$node.html(traceTemplate(data.modelview));
2223

2324
FilterAllServicesUI.attachTo('#filterAllServices', {
2425
totalServices: $('.trace-details.services span').length
2526
});
2627
FullPageSpinnerUI.attachTo('#fullPageSpinner');
28+
JsonPanelUI.attachTo('#jsonPanel');
2729
ServiceFilterSearchUI.attachTo('#serviceFilterSearch');
2830
SpanPanelUI.attachTo('#spanPanel');
2931
TraceUI.attachTo('#trace-container');
3032
FilterLabelUI.attachTo('.service-filter-label');
3133
ZoomOut.attachTo('#zoomOutSpans');
3234

35+
this.$node.find('#traceJsonLink').click(e => {
36+
e.preventDefault();
37+
this.trigger('uiRequestJsonPanel', {title: `Trace ${this.attr.traceId}`,
38+
obj: data.trace,
39+
link: `/api/v1/trace/${this.attr.traceId}`});
40+
});
41+
3342
$('.annotation:not(.core)').tooltip({placement: 'left'});
3443
});
3544
});

‎zipkin-ui/templates/trace.mustache

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<li class=''><a href='#'><strong>Services:</strong> <span class='badge'>{{services}}</span></a></li>
55
<li class=''><a href='#'><strong>Depth:</strong> <span class='badge'>{{depth}}</span></a></li>
66
<li class=''><a href='#'><strong>Total Spans:</strong> <span class='badge'>{{totalSpans}}</span></a></li>
7+
<li class='navbar-right'><a href='/api/v1/trace/{{ traceId }}' id='traceJsonLink'><span class='btn btn-primary btn-xs badge'>JSON</span></a></li>
78
</ul>
89

910
<form class='form-inline' role='form'>
@@ -199,3 +200,18 @@
199200
{{/spansBackup}}
200201
</div>
201202

203+
<div class='modal fade' id='jsonPanel'>
204+
<div class='modal-dialog modal-lg'>
205+
<div class='modal-content'>
206+
<div class='modal-header'>
207+
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
208+
<a href='#' class='save'><span class='glyphicon glyphicon-save' aria-hidden='true' aria-label='save'></span></a>
209+
<h4 class='modal-title'></h4>
210+
</div>
211+
<div class='modal-body'>
212+
<pre></pre>
213+
</div>
214+
</div>
215+
</div>
216+
</div>
217+

0 commit comments

Comments
 (0)