From 2c1fa39db22dfda08eca223aebb48b8ec3a1e494 Mon Sep 17 00:00:00 2001 From: Franklin Hu Date: Thu, 23 Aug 2012 14:02:37 -0700 Subject: [PATCH 1/2] Remove Rails-isms from js --- .../src/main/resources/public/js/application-index.js | 1 - .../src/main/resources/public/js/application-show.js | 1 - .../src/main/resources/public/js/application-static.js | 1 - .../src/main/resources/public/js/application.js | 8 -------- .../src/main/resources/public/js/zipkin-filter-span.js | 2 -- .../src/main/resources/public/js/zipkin-lazy-tree.js | 2 -- .../src/main/resources/public/js/zipkin-onebox.js | 2 -- .../src/main/resources/public/js/zipkin-span.js | 2 -- .../main/resources/public/js/zipkin-trace-dependency.js | 3 --- .../src/main/resources/public/js/zipkin-trace-summary.js | 6 ------ .../src/main/resources/public/js/zipkin-tree.js | 2 -- 11 files changed, 30 deletions(-) diff --git a/zipkin-finatra/src/main/resources/public/js/application-index.js b/zipkin-finatra/src/main/resources/public/js/application-index.js index 8fa05e3b893..788212e3a8a 100644 --- a/zipkin-finatra/src/main/resources/public/js/application-index.js +++ b/zipkin-finatra/src/main/resources/public/js/application-index.js @@ -15,7 +15,6 @@ */ /*global root_url:false */ -//= require zipkin var Zipkin = Zipkin || {}; Zipkin.Application = Zipkin.Application || {}; Zipkin.Application.Index = (function() { diff --git a/zipkin-finatra/src/main/resources/public/js/application-show.js b/zipkin-finatra/src/main/resources/public/js/application-show.js index 6e679fb3d93..137bbd05062 100644 --- a/zipkin-finatra/src/main/resources/public/js/application-show.js +++ b/zipkin-finatra/src/main/resources/public/js/application-show.js @@ -14,7 +14,6 @@ * limitations under the License. */ /*global root_url:false */ -//= require zipkin var Zipkin = Zipkin || {}; Zipkin.Application = Zipkin.Application || {}; Zipkin.Application.Show = (function() { diff --git a/zipkin-finatra/src/main/resources/public/js/application-static.js b/zipkin-finatra/src/main/resources/public/js/application-static.js index 261b58ad046..5a0356623e6 100644 --- a/zipkin-finatra/src/main/resources/public/js/application-static.js +++ b/zipkin-finatra/src/main/resources/public/js/application-static.js @@ -14,7 +14,6 @@ * limitations under the License. */ /*global root_url:false */ -//= require zipkin var Zipkin = Zipkin || {}; Zipkin.Application = Zipkin.Application || {}; Zipkin.Application.Static = (function() { diff --git a/zipkin-finatra/src/main/resources/public/js/application.js b/zipkin-finatra/src/main/resources/public/js/application.js index 8e32831875d..9a81ab31256 100644 --- a/zipkin-finatra/src/main/resources/public/js/application.js +++ b/zipkin-finatra/src/main/resources/public/js/application.js @@ -18,14 +18,6 @@ // This file is automatically included by javascript_include_tag :defaults /*global root_url:false Trace:false */ - -//= require bootstrap -//= require hogan-2.0.0 - -//= require datepicker - -//= require_tree . - var Zipkin = Zipkin || {}; Zipkin.Base = (function() { diff --git a/zipkin-finatra/src/main/resources/public/js/zipkin-filter-span.js b/zipkin-finatra/src/main/resources/public/js/zipkin-filter-span.js index 85f6d90b7e9..8632c62bf1e 100644 --- a/zipkin-finatra/src/main/resources/public/js/zipkin-filter-span.js +++ b/zipkin-finatra/src/main/resources/public/js/zipkin-filter-span.js @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -//= require zipkin-span - var Zipkin = Zipkin || {}; Zipkin.FilterSpan = (function(superClass) { diff --git a/zipkin-finatra/src/main/resources/public/js/zipkin-lazy-tree.js b/zipkin-finatra/src/main/resources/public/js/zipkin-lazy-tree.js index 68fddc5b2b8..a129e6734ae 100644 --- a/zipkin-finatra/src/main/resources/public/js/zipkin-lazy-tree.js +++ b/zipkin-finatra/src/main/resources/public/js/zipkin-lazy-tree.js @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -//= require zipkin-tree - var Zipkin = Zipkin || {}; Zipkin.LazyTree = (function() { diff --git a/zipkin-finatra/src/main/resources/public/js/zipkin-onebox.js b/zipkin-finatra/src/main/resources/public/js/zipkin-onebox.js index 9e71530cd96..814ed98b198 100644 --- a/zipkin-finatra/src/main/resources/public/js/zipkin-onebox.js +++ b/zipkin-finatra/src/main/resources/public/js/zipkin-onebox.js @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - //= require zipkin-config - var Zipkin = Zipkin || {}; /* diff --git a/zipkin-finatra/src/main/resources/public/js/zipkin-span.js b/zipkin-finatra/src/main/resources/public/js/zipkin-span.js index b4a4a4e8375..5b17b16b7a5 100644 --- a/zipkin-finatra/src/main/resources/public/js/zipkin-span.js +++ b/zipkin-finatra/src/main/resources/public/js/zipkin-span.js @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -//= require zipkin-node - var Zipkin = Zipkin || {}; Zipkin.Span = (function(superClass) { diff --git a/zipkin-finatra/src/main/resources/public/js/zipkin-trace-dependency.js b/zipkin-finatra/src/main/resources/public/js/zipkin-trace-dependency.js index 7e56d877727..9492aa6101f 100644 --- a/zipkin-finatra/src/main/resources/public/js/zipkin-trace-dependency.js +++ b/zipkin-finatra/src/main/resources/public/js/zipkin-trace-dependency.js @@ -15,9 +15,6 @@ */ /*global d3:false */ - -//= require d3-2.9.1 - var Zipkin = Zipkin || {}; /* diff --git a/zipkin-finatra/src/main/resources/public/js/zipkin-trace-summary.js b/zipkin-finatra/src/main/resources/public/js/zipkin-trace-summary.js index 292c20fdc9f..2f24a6fbfbf 100644 --- a/zipkin-finatra/src/main/resources/public/js/zipkin-trace-summary.js +++ b/zipkin-finatra/src/main/resources/public/js/zipkin-trace-summary.js @@ -15,12 +15,6 @@ */ /*global d3:false */ - -//= require d3-2.9.1 - -//= require zipkin -//= require zipkin-node - var Zipkin = Zipkin || {}; Zipkin.TraceSummary = (function(Zipkin) { diff --git a/zipkin-finatra/src/main/resources/public/js/zipkin-tree.js b/zipkin-finatra/src/main/resources/public/js/zipkin-tree.js index 48d7d1821b2..f7d859f2986 100644 --- a/zipkin-finatra/src/main/resources/public/js/zipkin-tree.js +++ b/zipkin-finatra/src/main/resources/public/js/zipkin-tree.js @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -//= require zipkin-node - var Zipkin = Zipkin || {}; Zipkin.Tree = (function() { From 53e912ee59f0a9b114f76ca38eba14872600e2a3 Mon Sep 17 00:00:00 2001 From: Franklin Hu Date: Thu, 23 Aug 2012 15:44:45 -0700 Subject: [PATCH 2/2] Replace filter_submit with backbone-y code --- .../resources/public/js/application-index.js | 358 +++++++++--------- .../resources/public/js/application-models.js | 73 +++- .../main/resources/templates/index.mustache | 6 +- .../com/twitter/zipkin/web/QueryRequest.scala | 12 +- 4 files changed, 264 insertions(+), 185 deletions(-) diff --git a/zipkin-finatra/src/main/resources/public/js/application-index.js b/zipkin-finatra/src/main/resources/public/js/application-index.js index 788212e3a8a..bca8f8f7ada 100644 --- a/zipkin-finatra/src/main/resources/public/js/application-index.js +++ b/zipkin-finatra/src/main/resources/public/js/application-index.js @@ -138,6 +138,43 @@ Zipkin.Application.Index = (function() { }); + var QueryResultsView = Backbone.View.extend({ + initialize: function() { + this.collection.bind("all", this.render, this); + }, + + render: function() { + var data = this.collection.toJSON(); + + // FIXME more backbony + var parsed = parseQueryResults(data); + var traces = parsed.data + var serviceName = $("#service_name option:selected").val(); + addServiceTag(serviceName); + + traces = updateFilteredServices(traces); + sortQueryResults(traces); + + templatize(TEMPLATES.QUERY, function(template) { + var context = { traces: traces }; + var content = template.render(context); + $('#loading-data').hide(); + refreshQueryResults(content); + Zipkin.Base.enableClockSkewBtn(); + }); + + updateFilterCurrentCount(traces.length); + updateFilterTotalCount(traces.length); + updateFilterDuration(parsed.minStartTime, parsed.maxStartTime); + + $('#help-msg').hide(); + $('#error-box').hide(); + $(".infobar").show(); + $(".service-tag-list").show(); + return this; + } + }); + /* * @param serviceList: Zipkin.Application.Models.ServiceList */ @@ -203,34 +240,104 @@ Zipkin.Application.Index = (function() { }; }; - var initialize = function(services, queryResults) { - /** - * Helper functions for trace query results - */ + /* Adds a service tag to the service tag list */ + var addServiceTag = function(service_name, closeable) { + if ($("span[id*='service-tag-" + service_name + "']").length === 0) { + templatize(TEMPLATES.SERVICE_TAG, function(template) { + var context = { name : service_name, closeable: closeable }; + var content = template.render(context); + $(".service-tags").append(content); + }); + } + }; - /* Adds a service tag to the service tag list */ - var addServiceTag = function(service_name, closeable) { - if ($("span[id*='service-tag-" + service_name + "']").length === 0) { - templatize(TEMPLATES.SERVICE_TAG, function(template) { - var context = { name : service_name, closeable: closeable }; - var content = template.render(context); - $(".service-tags").append(content); - }); + /* Gets the services that are current in the service tag list */ + var getFilteredServices = function () { + var services = {}; + $(".service-tag").each(function (i, e) { + services[$(e).text()] = 1; + }); + return services; + }; + + var getSortOrder = function() { + return $(".js-sort-order").val(); + }; + + var sortQueryResults = function(data) { + /* Option index directly maps to the correct sort order */ + var sortOrder = getSortOrder(); + + data.sort(function(a, b) { + if (sortOrder == ORDER_TIMESTAMP_ASC) { + return new Date(a.startTimestamp) - new Date(b.startTimestamp); + } else if (sortOrder == ORDER_TIMESTAMP_DESC) { + return new Date(b.startTimestamp) - new Date(a.startTimestamp); + } else if (sortOrder == ORDER_DURATION_ASC) { + return a.duration - b.duration; + } else { + /* ORDER_DURATION_DESC */ + return b.duration - a.duration; } - }; + }); + }; - /* Gets the services that are current in the service tag list */ - var getFilteredServices = function () { - var services = {}; - $(".service-tag").each(function (i, e) { - services[$(e).text()] = 1; + /* Change the label colors of query results to reflect those that are filtered */ + var updateFilteredServices = function (traces) { + var services = getFilteredServices(); + return $.map(traces, function(t) { + $.each(t.serviceCounts, function (i, s) { + if (services && services.hasOwnProperty(s[0])) { + s.labelColor = "service-tag-filtered"; + } else { + s.labelColor = ""; + } }); - return services; - }; + return t; + }); + }; + + /* Plug in the new data */ + var refreshQueryResults = function (content) { + $('#query-results').hide(); + $('#query-results').html(content); + $('#query-results').show(); + }; + + /* Update the counter for number of traces displayed on the page */ + var updateFilterCurrentCount = function(n) { + $(".filter-current").text(n); + }; + + /* Update the counter for number of traces we have data for */ + var updateFilterTotalCount = function(n) { + $(".filter-total").text(n); + }; + + var updateFilterDuration = function(minStartStr, maxStartStr) { + var min = new Date(minStartStr) + , max = new Date(maxStartStr) + , delta = max.getTime() - min.getTime() + , suffix + ; - var getSortOrder = function() { - return $(".js-sort-order").val(); - }; + + if (delta < 1000) { + suffix = "ms"; + } else { + delta = delta / 1000; + if (delta < 60) { + suffix = "seconds"; + } else { + delta = delta / 60; + suffix = "minutes"; + } + } + + $(".filter-duration").text(delta.toFixed(3) + " " + suffix); + }; + + var initialize = function(services, queryResults) { /* Filter the query results based on service tag list */ var filterQueryResults = function (services) { @@ -252,79 +359,6 @@ Zipkin.Application.Index = (function() { }); }; - var sortQueryResults = function(data) { - /* Option index directly maps to the correct sort order */ - var sortOrder = getSortOrder(); - - data.sort(function(a, b) { - if (sortOrder == ORDER_TIMESTAMP_ASC) { - return new Date(a.startTimestamp) - new Date(b.startTimestamp); - } else if (sortOrder == ORDER_TIMESTAMP_DESC) { - return new Date(b.startTimestamp) - new Date(a.startTimestamp); - } else if (sortOrder == ORDER_DURATION_ASC) { - return a.duration - b.duration; - } else { - /* ORDER_DURATION_DESC */ - return b.duration - a.duration; - } - }); - }; - - /* Change the label colors of query results to reflect those that are filtered */ - var updateFilteredServices = function (traces) { - var services = getFilteredServices(); - return $.map(traces, function(t) { - $.each(t.serviceCounts, function (i, s) { - if (services && services.hasOwnProperty(s[0])) { - s.labelColor = "service-tag-filtered"; - } else { - s.labelColor = ""; - } - }); - return t; - }); - }; - - /* Plug in the new data */ - var refreshQueryResults = function (content) { - $('#query-results').hide(); - $('#query-results').html(content); - $('#query-results').show(); - }; - - /* Update the counter for number of traces displayed on the page */ - var updateFilterCurrentCount = function(n) { - $(".filter-current").text(n); - }; - - /* Update the counter for number of traces we have data for */ - var updateFilterTotalCount = function(n) { - $(".filter-total").text(n); - }; - - var updateFilterDuration = function(minStartStr, maxStartStr) { - var min = new Date(minStartStr) - , max = new Date(maxStartStr) - , delta = max.getTime() - min.getTime() - , suffix - ; - - - if (delta < 1000) { - suffix = "ms"; - } else { - delta = delta / 1000; - if (delta < 60) { - suffix = "seconds"; - } else { - delta = delta / 60; - suffix = "minutes"; - } - } - - $(".filter-duration").text(delta.toFixed(3) + " " + suffix); - }; - /* Click handler for adding a service filter */ var labelClick = function (event) { event.stopPropagation(); @@ -376,92 +410,66 @@ Zipkin.Application.Index = (function() { $('#error-box').hide(); $(".infobar").hide(); $('#query-results').hide(); - $('#loading-data').show(); - - $('.tab-content > div').each(function(){ - // Clear fields in inactive tabs before submission so server processes the field of the user's intent - if(!$(this).hasClass('active')) { - if($(this).find('input').length !== 0) { - $(this).find('input').val(''); - } else { - $(this).find('select').val('all'); - } - } - }); - - var service_name = $('select[name=service_name]').val(); - var spanName = $('select[name=span_name]').val() - - /* Cookie this service */ - Zipkin.Base.setCookie("lastServiceName", service_name); - Zipkin.Base.setCookie("lastSpanName", spanName); - - // Let's fetch the prerendered results - var query = { - "service_name" : service_name, - "end_datetime" : $('input[name=end_date]').val() + " " + $('input[name=end_time]').val(), - "limit" : $('input[name=limit]').val(), - "span_name" : spanName, - "time_annotation" : $('input[name=time_annotation]').val(), - "annotation_key" : $('input[name=annotation_key]').val(), - "annotation_value" : $('input[name=annotation_value]').val(), - "adjust_clock_skew" : Zipkin.Base.clockSkewState() ? 'true' : 'false' - }; - - var url_method = 'api/query'; - - $.ajax({ - type: 'GET', - url: root_url + url_method, - data: query, - success: function(data){ - if (data.length === 0) { - $('#loading-data').hide(); - $('#error-msg').text("Didn't find any traces for this search :("); - $('#error-box').show(); - return; - } else { - $("#error-box").hide(); - } - traceData = data; - - $(".service-tags").empty(); - addServiceTag(service_name); + var baseParams = { + serviceName: $('select[name=service_name]').val(), + endDatetime: $('input[name=end_date]').val() + " " + $('input[name=end_time]').val(), + limit: $('input[name=limit]').val() + } - var parsed = parseQueryResults(data); - var traces = parsed.data; - traces = updateFilteredServices(traces); + Zipkin.Base.setCookie("lastServiceName", baseParams.serviceName); - sortQueryResults(traces); + var tabType = $("li.active > a.filter-tab").attr("id") + var query = null; + var error = false; + if (tabType == "filter-span-tab") { + var spanName = $('select[name=span_name]').val(); + if (spanName === "") { + error = true; + } else { + query = new Zipkin.Application.Models.SpanQuery($.extend({}, baseParams, { + spanName: spanName + })); + Zipkin.Base.setCookie("lastSpanName", spanName); + } + } else if (tabType == "filter-annotation-tab") { + var timeAnnotation = $('input[name=time_annotation]').val(); + if (timeAnnotation === "") { + error = true; + } else { + query = new Zipkin.Application.Models.AnnotationQuery($.extend({}, baseParams, { + timeAnnotation: timeAnnotation + })); + } + } else if (tabType == "filter-key-value-tab") { + var key = $('input[name=annotation_key]').val(); + var value = $('input[name=annotation_value]').val(); + if (key === "" || value === "") { + error = true; + } else { + query = new Zipkin.Application.Models.KeyValueQuery($.extend({}, baseParams, { + annotationKey : key, + annotationValue : value + })); + } + } else { + $('#error-box').text("Invalid query").show(); + return false; + } - templatize(TEMPLATES.QUERY, function(template) { - var context = { traces: traces }; - var content = template.render(context); - $('#loading-data').hide(); - refreshQueryResults(content); - Zipkin.Base.enableClockSkewBtn(); - }); + if (error) { + $('#error-box').text("Invalid query").show(); + return false; + } - updateFilterCurrentCount(data.length); - updateFilterTotalCount(data.length); - updateFilterDuration(parsed.minStartTime, parsed.maxStartTime); + $('#loading-data').show(); - /* Shove the query string into the static link */ - searchQuery = this.url.split("?")[1]; - $("#static-search-link").attr("href", root_url + "?" + searchQuery).show(); + var queryResults = query.execute(); + queryResultsView = new QueryResultsView({collection: queryResults}); - $(".infobar").show(); - $(".service-tag-list").show(); - }, - error: function(xhr, status, error) { - $('#query-results').hide(); - $('#loading-data').hide(); - $('#error-msg').text('Could not fetch trace data. Sorry buddy.'); - $('#error-box').show(); - Zipkin.Base.enableClockSkewBtn(); - } - }); + /* Shove the query string into the static link */ + searchQuery = queryResults.url().split("?")[1]; + $("#static-search-link").attr("href", root_url + "?" + searchQuery).show(); return false; }; diff --git a/zipkin-finatra/src/main/resources/public/js/application-models.js b/zipkin-finatra/src/main/resources/public/js/application-models.js index 996569fafda..cabd9dffd20 100644 --- a/zipkin-finatra/src/main/resources/public/js/application-models.js +++ b/zipkin-finatra/src/main/resources/public/js/application-models.js @@ -41,11 +41,82 @@ Zipkin.Application.Models = (function() { } }); + /* + * @param serviceName: string + * @param endTime: string + * @param limit: int + */ + var Query = Backbone.Model.extend({ + execute: function() { + var params = this.params(); + var results = new (QueryResults.extend({ + url: function() { + return "/api/query?" + $.param(params) + } + })); + results.fetch(); + return results; + }, + + params: function() { + return { + serviceName: this.get("serviceName"), + endDatetime: this.get("endDatetime"), + limit: this.get("limit") + }; + } + }); + + /* + * @param spanName: string + */ + var SpanQuery = Query.extend({ + params: function() { + return $.extend({}, SpanQuery.__super__.params.apply(this), { + spanName: this.get("spanName") + }); + } + }); + + /* + * @param timeAnnotation: string + */ + var AnnotationQuery = Query.extend({ + params: function() { + return $.extend({}, AnnotationQuery.__super__.params.apply(this), { + timeAnnotation: this.get("timeAnnotation") + }); + } + }); + + /* + * @param annotationKey: string + * @param annotationValue: string + */ + var KeyValueQuery = Query.extend({ + params: function() { + return $.extend({}, KeyValueQuery.__super__.params.apply(this), { + annotationKey: this.get("annotationKey"), + annotationValue: this.get("annotationValue") + }); + } + }); + + var TraceSummary = Backbone.Model.extend(); + var QueryResults = Backbone.Collection.extend({ + model: TraceSummary + }); + return { Service: Service, ServiceList: ServiceList, Span: Span, - SpanList: SpanList + SpanList: SpanList, + + Query: Query, + SpanQuery: SpanQuery, + AnnotationQuery: AnnotationQuery, + KeyValueQuery: KeyValueQuery } })(); \ No newline at end of file diff --git a/zipkin-finatra/src/main/resources/templates/index.mustache b/zipkin-finatra/src/main/resources/templates/index.mustache index 91493f58f73..890f604b6aa 100644 --- a/zipkin-finatra/src/main/resources/templates/index.mustache +++ b/zipkin-finatra/src/main/resources/templates/index.mustache @@ -16,13 +16,13 @@
diff --git a/zipkin-finatra/src/main/scala/com/twitter/zipkin/web/QueryRequest.scala b/zipkin-finatra/src/main/scala/com/twitter/zipkin/web/QueryRequest.scala index 1ffec381454..bf21d2c1ca3 100644 --- a/zipkin-finatra/src/main/scala/com/twitter/zipkin/web/QueryRequest.scala +++ b/zipkin-finatra/src/main/scala/com/twitter/zipkin/web/QueryRequest.scala @@ -28,13 +28,13 @@ object QueryRequest { * () => None */ def apply(request: Request): Option[QueryRequest] = { - val serviceName = request.params.get("service_name") - val spanName = request.params.get("span_name") - val timeAnnotation = request.params.get("time_annotation") - val annotationKey = request.params.get("annotation_key") - val annotationValue = request.params.get("annotation_value") + val serviceName = request.params.get("serviceName") + val spanName = request.params.get("spanName") + val timeAnnotation = request.params.get("timeAnnotation") + val annotationKey = request.params.get("annotationKey") + val annotationValue = request.params.get("annotationValue") - val endTimestamp = request.params.get("end_datetime") match { + val endTimestamp = request.params.get("endDatetime") match { case Some(str) => { fmt.parse(str).getTime * 1000 }