Adds JSON button to trace page

- Shows prettified JSON in modal dialog - Adds download link for JSON Fixes #1060
openzipkin · Jun 1, 2016 · b81fcc9 · b81fcc9
1 parent aa10062
commit b81fcc9
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 3 deletions.
diff --git a/zipkin-ui/css/trace.css b/zipkin-ui/css/trace.css
@@ -156,4 +156,12 @@
   max-width: 75%;
 }
 
+.modal-header .save {
+  float: right;
+  margin-right: 5px;
+}
+
+.save {
+  opacity: 0.2;
+}
 
diff --git a/zipkin-ui/js/component_data/trace.js b/zipkin-ui/js/component_data/trace.js
@@ -9,7 +9,7 @@ export default component(function TraceData() {
       dataType: 'json',
       success: trace => {
         const modelview = traceToMustache(trace);
-        this.trigger('tracePageModelView', modelview);
+        this.trigger('tracePageModelView', {modelview, trace});
       }
     });
   });

diff --git a/zipkin-ui/js/component_ui/jsonPanel.js b/zipkin-ui/js/component_ui/jsonPanel.js
@@ -0,0 +1,16 @@
+import {component} from 'flightjs';
+
+export default component(function jsonPanel() {
+  this.show = function(e, data) {
+    this.$node.find('.modal-title').text(data.title);
+
+    this.$node.find('.save').attr('href', data.link);
+    this.$node.find('.modal-body pre').text(JSON.stringify(data.obj, null, 2));
+    this.$node.modal('show');
+  };
+
+  this.after('initialize', function() {
+    this.$node.modal('hide');
+    this.on(document, 'uiRequestJsonPanel', this.show);
+  });
+});
diff --git a/zipkin-ui/js/component_ui/traceToMustache.js b/zipkin-ui/js/component_ui/traceToMustache.js
@@ -88,6 +88,7 @@ export function formatEndpoint({ipv4, port = 0, serviceName = ''}) {
 
 export default function traceToMustache(trace) {
   const summary = traceSummary(trace);
+  const traceId = summary.traceId;
   const duration = mkDurationStr(summary.duration);
   const groupedTimestamps = getGroupedTimestamps(summary);
   const serviceDurations = getServiceDurations(groupedTimestamps);
@@ -167,6 +168,7 @@ export default function traceToMustache(trace) {
   const spansBackup = spans;
 
   return {
+    traceId,
     duration,
     services,
     depth,

diff --git a/zipkin-ui/js/page/trace.js b/zipkin-ui/js/page/trace.js
@@ -3,6 +3,7 @@ import $ from 'jquery';
 import TraceData from '../component_data/trace';
 import FilterAllServicesUI from '../component_ui/filterAllServices';
 import FullPageSpinnerUI from '../component_ui/fullPageSpinner';
+import JsonPanelUI from '../component_ui/jsonPanel';
 import ServiceFilterSearchUI from '../component_ui/serviceFilterSearch';
 import SpanPanelUI from '../component_ui/spanPanel';
 import TraceUI from '../component_ui/trace';
@@ -17,19 +18,27 @@ const TracePageComponent = component(function TracePage() {
     TraceData.attachTo(document, {
       traceId: this.attr.traceId
     });
-    this.on(document, 'tracePageModelView', function(ev, modelview) {
-      this.$node.html(traceTemplate(modelview));
+    this.on(document, 'tracePageModelView', function(ev, data) {
+      this.$node.html(traceTemplate(data.modelview));
 
       FilterAllServicesUI.attachTo('#filterAllServices', {
         totalServices: $('.trace-details.services span').length
       });
       FullPageSpinnerUI.attachTo('#fullPageSpinner');
+      JsonPanelUI.attachTo('#jsonPanel');
       ServiceFilterSearchUI.attachTo('#serviceFilterSearch');
       SpanPanelUI.attachTo('#spanPanel');
       TraceUI.attachTo('#trace-container');
       FilterLabelUI.attachTo('.service-filter-label');
       ZoomOut.attachTo('#zoomOutSpans');
 
+      this.$node.find('#traceJsonLink').click(e => {
+        e.preventDefault();
+        this.trigger('uiRequestJsonPanel', {title: `Trace ${this.attr.traceId}`,
+                                            obj: data.trace,
+                                            link: `/api/v1/trace/${this.attr.traceId}`});
+      });
+
       $('.annotation:not(.core)').tooltip({placement: 'left'});
     });
   });

diff --git a/zipkin-ui/templates/trace.mustache b/zipkin-ui/templates/trace.mustache
@@ -4,6 +4,7 @@
     <li class=''><a href='#'><strong>Services:</strong> <span class='badge'>{{services}}</span></a></li>
     <li class=''><a href='#'><strong>Depth:</strong> <span class='badge'>{{depth}}</span></a></li>
     <li class=''><a href='#'><strong>Total Spans:</strong> <span class='badge'>{{totalSpans}}</span></a></li>
+    <li class='navbar-right'><a href='/api/v1/trace/{{ traceId }}' id='traceJsonLink'><span class='btn btn-primary btn-xs badge'>JSON</span></a></li>
   </ul>
 
   <form class='form-inline' role='form'>
@@ -199,3 +200,18 @@
   {{/spansBackup}}
 </div>
 
+<div class='modal fade' id='jsonPanel'>
+  <div class='modal-dialog modal-lg'>
+    <div class='modal-content'>
+      <div class='modal-header'>
+        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
+        <a href='#' class='save'><span class='glyphicon glyphicon-save' aria-hidden='true' aria-label='save'></span></a>
+        <h4 class='modal-title'></h4>
+      </div>
+      <div class='modal-body'>
+        <pre></pre>
+      </div>
+    </div>
+  </div>
+</div>
+