zipkin-web: query result sorting

Allow sorting by: - timestamp (asc|desc) - duration (asc|desc) Author: franklinhu Pull Request: #9 URL: #9
openzipkin · Jun 7, 2012 · a7d393d · a7d393d
1 parent c21b39b
commit a7d393d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git a/zipkin-web/app/assets/javascripts/application-index.js b/zipkin-web/app/assets/javascripts/application-index.js
@@ -20,6 +20,12 @@ var Zipkin = Zipkin || {};
 Zipkin.Application = Zipkin.Application || {};
 Zipkin.Application.Index = (function() {
 
+  var ORDER_DURATION_DESC = 0
+    , ORDER_DURATION_ASC = 1
+    , ORDER_TIMESTAMP_DESC = 2
+    , ORDER_TIMSTAMP_ASC = 3
+    ;
+
   var templatize = Zipkin.Util.templatize
     , TEMPLATES = Zipkin.Util.TEMPLATES
     ;
@@ -155,6 +161,21 @@ Zipkin.Application.Index = (function() {
       });
     };
 
+    var sortQueryResults = function(data, sortOrder) {
+      data.sort(function(a, b) {
+        if (sortOrder === ORDER_TIMSTAMP_ASC) {
+          return new Date(a.start_time) - new Date(b.start_time);
+        } else if (sortOrder === ORDER_TIMESTAMP_DESC) {
+          return new Date(b.start_time) - new Date(a.start_time);
+        } 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();
@@ -408,6 +429,21 @@ Zipkin.Application.Index = (function() {
         // $(this).DatePickerHide();
       });
     });
+
+    $(".js-sort-order").change(function (e) {
+      /* Option index directly maps to the correct sort order */
+      var sortOrder = e.target.selectedIndex;
+
+      var services = getFilteredServices();
+      var newData = updateFilteredServices(filterQueryResults(services));
+      sortQueryResults(newData, sortOrder);
+
+      templatize(TEMPLATES.QUERY, function(template) {
+        var context = { traces: newData };
+        var content = template.render(context);
+        refreshQueryResults(content);
+      });
+    });
   };
 
   return {

diff --git a/zipkin-web/app/assets/stylesheets/application.css b/zipkin-web/app/assets/stylesheets/application.css
@@ -295,6 +295,19 @@ div.infobar {
   padding-right: 14px;
 }
 
+div.infobar .selector select {
+  background-color: transparent;
+  background-image: none;
+  border: 0;
+  line-height: 14px;
+  height: 14px;
+  margin: -3px 0 0 0;
+  outline: 0;
+  padding: 0;
+  width: 100px;
+  -webkit-appearance: none;
+}
+
 ul.traces {
   list-style: none;
   margin: 10px 0 0 0;

diff --git a/zipkin-web/app/views/traces/index.html.erb b/zipkin-web/app/views/traces/index.html.erb
@@ -101,7 +101,14 @@
         <span>Showing: <span class="filter-current"></span> of <span class="filter-total"></span> traces over <span class="filter-duration"></span></span>
       </div>
       <div class="pull-right">
-        <span>Sorted by: Trace Duration <i class="icon-arrow-down"></i></span>
+        <span class="selector">Sorted by:
+          <select class="sort-order js-sort-order">
+            <option selected value="duration-desc">Duration Desc</i></span>
+            <option value="duration-asc">Duration Asc</span>
+            <option value="timestamp-desc">Timestamp Desc</span>
+            <option value="timestamp-asc">Timestamp Asc</span>
+          </select>
+        </span>
       </div>
       <div class="clearfix"></div>
     </div>