Add static trace rendering page

zipkin-web/app/assets/javascripts/application-show.js

@@ -22,6 +22,77 @@ Zipkin.Application.Show = (function() {
     , TEMPLATES = Zipkin.Util.TEMPLATES
     ;
 
+  var exportTrace = function(traceId, clockSkew) {
+    window.open(root_url + "traces/get_trace.json?id=" + traceId + "&adjust_clock_skew=" + clockSkew);
+  };
+
+  var getTraceSuccess = function(data){
+    data.has_filtered_spans = data.spans.length > Zipkin.Config.MIN_SPANS_TO_FILTER;
+
+    templatize(TEMPLATES.GET_TRACE, function(template) {
+
+      Zipkin.Base.enableClockSkewBtn();
+
+      /* Construct Zipkin.Span, Zipkin.Annotation, and Zipkin.KvAnnotation objects to pass on */
+      var spanMap = {}
+        , spans = []
+        , annotations = []
+        , kvAnnotations = []
+        , kvAnnotationsMap = {}
+        ;
+
+      $.each(data.spans, function(i, span) {
+        var s = Zipkin.fromRawSpan(span);
+        spanMap[s.id] = s;
+        spans.push(s);
+      });
+
+      $.each(data.kv_annotations, function(spanId, kvAs) {
+        var span = spanMap[spanId];
+        $.each(kvAs, function(i, kvA) {
+          var annotation = Zipkin.fromRawKvAnnotation(kvA);
+          span.addKvAnnotation(annotation);
+          annotation.setSpan(span);
+
+          kvAnnotations.push(annotation);
+        });
+        kvAnnotationsMap[spanId] = kvAs
+      });
+
+      $.each(data.annotations, function(i, val) {
+        var spanId = val.id;
+        var span = spanMap[spanId];
+        var a = Zipkin.fromRawAnnotation(val);
+
+        span.addAnnotation(a);
+        a.setSpan(span);
+        annotations.push(a);
+
+        // Attach the kv annotations for trace timeline
+        if (kvAnnotationsMap.hasOwnProperty(spanId)) {
+          var kvAs = kvAnnotationsMap[spanId];
+          val.binary_annotations = kvAs;
+          val.has_binary_annotations = true;
+        } else {
+          val.has_binary_annotations = false;
+        }
+      });
+
+      var content = template.render(data);
+
+      $('#loading-data').hide();
+      $('#trace-content').html(content);
+      $('#trace-content').show();
+
+      /* Bind the export trace data to the handler */
+      $(".export-trace-btn").click(function(e) {
+        exportTrace(traceId, Zipkin.Base.clockSkewState() ? 'true' : 'false');
+      });
+
+      Zipkin.GetTrace.initialize(data.trace, spans, annotations, kvAnnotations);
+    })
+  };
+
   var initialize = function (traceId) {
     Zipkin.Base.initialize();
 
@@ -43,67 +114,7 @@ Zipkin.Application.Show = (function() {
         type: 'GET',
         url: root_url + url_method,
         data: query_data,
-        success: function(data){
-          data.has_filtered_spans = data.spans.length > Zipkin.Config.MIN_SPANS_TO_FILTER;
-
-          templatize(TEMPLATES.GET_TRACE, function(template) {
-
-            Zipkin.Base.enableClockSkewBtn();
-
-            /* Construct Zipkin.Span, Zipkin.Annotation, and Zipkin.KvAnnotation objects to pass on */
-            var spanMap = {}
-              , spans = []
-              , annotations = []
-              , kvAnnotations = []
-              , kvAnnotationsMap = {}
-              ;
-
-            $.each(data.spans, function(i, span) {
-              var s = Zipkin.fromRawSpan(span);
-              spanMap[s.id] = s;
-              spans.push(s);
-            });
-
-            $.each(data.kv_annotations, function(spanId, kvAs) {
-              var span = spanMap[spanId];
-              $.each(kvAs, function(i, kvA) {
-                var annotation = Zipkin.fromRawKvAnnotation(kvA);
-                span.addKvAnnotation(annotation);
-                annotation.setSpan(span);
-
-                kvAnnotations.push(annotation);
-              });
-              kvAnnotationsMap[spanId] = kvAs
-            });
-
-            $.each(data.annotations, function(i, val) {
-              var spanId = val.id;
-              var span = spanMap[spanId];
-              var a = Zipkin.fromRawAnnotation(val);
-
-              span.addAnnotation(a);
-              a.setSpan(span);
-              annotations.push(a);
-
-              // Attach the kv annotations for trace timeline
-              if (kvAnnotationsMap.hasOwnProperty(spanId)) {
-                var kvAs = kvAnnotationsMap[spanId];
-                val.binary_annotations = kvAs;
-                val.has_binary_annotations = true;
-              } else {
-                val.has_binary_annotations = false;
-              }
-            });
-
-            var content = template.render(data);
-
-            $('#loading-data').hide();
-            $('#trace-content').html(content);
-            $('#trace-content').show();
-
-            Zipkin.GetTrace.initialize(data.trace, spans, annotations, kvAnnotations);
-          });
-        },
+        success: getTraceSuccess,
         error: function(xhr, status, error) {
           $('#trace-content').hide();
           $('#loading-data').hide();
@@ -121,7 +132,8 @@ Zipkin.Application.Show = (function() {
   };
 
   return {
-    initialize: initialize
+    initialize: initialize,
+    getTraceSuccess: getTraceSuccess
   };
 })();
 

zipkin-web/app/assets/javascripts/application-static.js

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2012 Twitter Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*global root_url:false */
+//= require zipkin
+var Zipkin = Zipkin || {};
+Zipkin.Application = Zipkin.Application || {};
+Zipkin.Application.Static = (function() {
+
+  var hideError = function() {
+    $("#input-json-error").hide()
+  };
+
+  var showError = function(msg) {
+    $("#input-json-error-body").text(msg);
+    $("#input-json-error").show()
+  };
+
+  var initialize = function() {
+    Zipkin.Base.initialize();
+
+    $(window).on("click", ".js-input-json-btn", function(e) {
+      hideError();
+
+      var data = $("#input-json").val().trim();
+      if (data.length === 0) {
+        showError("Empty!");
+        return;
+      }
+
+      try {
+        var obj = $.parseJSON(data);
+        Zipkin.Application.Show.getTraceSuccess(obj);
+      } catch (e) {
+        showError("Invalid JSON");
+      }
+    });
+  };
+
+  return {
+    initialize: initialize
+  };
+})();

zipkin-web/app/views/traces/show.html.erb

@@ -30,6 +30,16 @@
 <div id="annotation-modal" class="trace-desc-body annotation-list modal">
 </div>
 
+<div class="modal hide" id="export-trace-modal">
+  <div class="modal-header">
+    <a class="close" data-dismiss="modal" href="#export-trace-modal">×</a>
+    <h3>Keep this JSON data somewhere safe</h3>
+  </div>
+  <div class="modal-body">
+    <p id="export-trace-data"></p>
+  </div>
+</div>
+
 <%= content_for :javascript_inline do %>
   $(Zipkin.Application.Show.initialize("<%= @trace_id %>"));
 <% end %>

zipkin-web/app/views/traces/static.html.erb

@@ -0,0 +1,19 @@
+<div id='trace-content'>
+  <!-- AJAX fetched data goes here -->
+</div>
+
+<div class="row">
+  <div class="span12">
+    <div id="input-json-error" class="alert alert-error hide">
+      <a class="close" data-dismiss="alert" href="#">x</a>
+      <p><strong id="input-json-error-body"></strong></p>
+    </div>
+    <h3>Input JSON</h3>
+    <textarea id="input-json" class="span12" rows="10"></textarea>
+    <button class="js-input-json-btn pull-right btn btn-primary">Render!</button>
+  </div>
+</div>
+
+<%= content_for :javascript_inline do %>
+  $(Zipkin.Application.Static.initialize());
+<% end %>

zipkin-web/config/routes.rb

@@ -28,6 +28,7 @@
   #   resources :products
 
   match 'hex/:id' => 'traces#hex'
+  match 'static' => 'traces#static'
 
   resources :traces, :only => [:index, :show] do
     collection do

zipkin-web/public/templates/get-trace.mustache

@@ -19,6 +19,11 @@
         </button>
       </a>
     </div>
+    <div class="pull-right">
+      <button class="btn export-trace-btn">
+        <i class="icon-download"></i>
+      </button>
+    </div>
     {{#has_filtered_spans}}
     <div class="pull-right">
       <button class="expand-all btn">Expand all</button>