add table sort

3 files changed, 136 insertions, 42 deletions

diff --git a/web/src/js/components/flowtable-columns.js b/web/src/js/components/flowtable-columns.js
index 39c4bd8d..a82c607a 100644
--- a/web/src/js/components/flowtable-columns.js
+++ b/web/src/js/components/flowtable-columns.js
@@ -1,11 +1,17 @@
 var React = require("react");
-var flowutils = require("../flow/utils.js");
+var RequestUtils = require("../flow/utils.js").RequestUtils;
+var ResponseUtils = require("../flow/utils.js").ResponseUtils;
 var utils = require("../utils.js");
 
 var TLSColumn = React.createClass({
     statics: {
-        renderTitle: function () {
-            return <th key="tls" className="col-tls"></th>;
+        Title: React.createClass({
+            render: function(){
+                return <th {...this.props} className={"col-tls " + (this.props.className || "") }></th>;
+            }
+        }),
+        sortKeyFun: function(flow){
+            return flow.request.scheme;
         }
     },
     render: function () {
@@ -24,16 +30,18 @@ var TLSColumn = React.createClass({
 
 var IconColumn = React.createClass({
     statics: {
-        renderTitle: function () {
-            return <th key="icon" className="col-icon"></th>;
-        }
+        Title: React.createClass({
+            render: function(){
+                return <th {...this.props} className={"col-icon " + (this.props.className || "") }></th>;
+            }
+        })
     },
     render: function () {
         var flow = this.props.flow;
 
         var icon;
         if (flow.response) {
-            var contentType = flowutils.ResponseUtils.getContentType(flow.response);
+            var contentType = ResponseUtils.getContentType(flow.response);
 
             //TODO: We should assign a type to the flow somewhere else.
             if (flow.response.code == 304) {
@@ -64,8 +72,13 @@ var IconColumn = React.createClass({
 
 var PathColumn = React.createClass({
     statics: {
-        renderTitle: function () {
-            return <th key="path" className="col-path">Path</th>;
+        Title: React.createClass({
+            render: function(){
+                return <th {...this.props} className={"col-path " + (this.props.className || "") }>Path</th>;
+            }
+        }),
+        sortKeyFun: function(flow){
+            return RequestUtils.pretty_url(flow.request);
         }
     },
     render: function () {
@@ -73,7 +86,7 @@ var PathColumn = React.createClass({
         return <td className="col-path">
             {flow.request.is_replay ? <i className="fa fa-fw fa-repeat pull-right"></i> : null}
             {flow.intercepted ? <i className="fa fa-fw fa-pause pull-right"></i> : null}
-            {flow.request.scheme + "://" + flow.request.host + flow.request.path}
+            { RequestUtils.pretty_url(flow.request) }
         </td>;
     }
 });
@@ -81,8 +94,13 @@ var PathColumn = React.createClass({
 
 var MethodColumn = React.createClass({
     statics: {
-        renderTitle: function () {
-            return <th key="method" className="col-method">Method</th>;
+        Title: React.createClass({
+            render: function(){
+                return <th {...this.props} className={"col-method " + (this.props.className || "") }>Method</th>;
+            }
+        }),
+        sortKeyFun: function(flow){
+            return flow.request.method;
         }
     },
     render: function () {
@@ -94,8 +112,13 @@ var MethodColumn = React.createClass({
 
 var StatusColumn = React.createClass({
     statics: {
-        renderTitle: function () {
-            return <th key="status" className="col-status">Status</th>;
+        Title: React.createClass({
+            render: function(){
+                return <th {...this.props} className={"col-status " + (this.props.className || "") }>Status</th>;
+            }
+        }),
+        sortKeyFun: function(flow){
+            return flow.response ? flow.response.code : undefined;
         }
     },
     render: function () {
@@ -113,8 +136,17 @@ var StatusColumn = React.createClass({
 
 var SizeColumn = React.createClass({
     statics: {
-        renderTitle: function () {
-            return <th key="size" className="col-size">Size</th>;
+        Title: React.createClass({
+            render: function(){
+                return <th {...this.props} className={"col-size " + (this.props.className || "") }>Size</th>;
+            }
+        }),
+        sortKeyFun: function(flow){
+            var total = flow.request.contentLength;
+            if (flow.response) {
+                total += flow.response.contentLength || 0;
+            }
+            return total;
         }
     },
     render: function () {
@@ -132,8 +164,15 @@ var SizeColumn = React.createClass({
 
 var TimeColumn = React.createClass({
     statics: {
-        renderTitle: function () {
-            return <th key="time" className="col-time">Time</th>;
+        Title: React.createClass({
+            render: function(){
+                return <th {...this.props} className={"col-time " + (this.props.className || "") }>Time</th>;
+            }
+        }),
+        sortKeyFun: function(flow){
+            if(flow.response) {
+                return flow.response.timestamp_end - flow.request.timestamp_start;
+            }
         }
     },
     render: function () {
@@ -156,9 +195,7 @@ var all_columns = [
     MethodColumn,
     StatusColumn,
     SizeColumn,
-    TimeColumn];
-
-
-module.exports = all_columns;
-
+    TimeColumn
+];
 
+module.exports = all_columns;
\ No newline at end of file
diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js
index cd50b891..4217786a 100644
--- a/web/src/js/components/flowtable.js
+++ b/web/src/js/components/flowtable.js
@@ -1,5 +1,8 @@
 var React = require("react");
 var common = require("./common.js");
+var utils = require("../utils.js");
+var _ = require("lodash");
+
 var VirtualScrollMixin = require("./virtualscroll.js");
 var flowtable_columns = require("./flowtable-columns.js");
 
@@ -43,9 +46,56 @@ var FlowRow = React.createClass({
 });
 
 var FlowTableHead = React.createClass({
+    getInitialState: function(){
+        return {
+            sortColumn: undefined,
+            sortDesc: false
+        };
+    },
+    onClick: function(Column){
+        var sortDesc = this.state.sortDesc;
+        var hasSort = Column.sortKeyFun;
+        if(Column === this.state.sortColumn){
+            sortDesc = !sortDesc;
+            this.setState({
+                sortDesc: sortDesc
+            });
+        } else {
+            this.setState({
+                sortColumn: hasSort && Column,
+                sortDesc: false
+            })
+        }
+        var sortKeyFun;
+        if(!sortDesc){
+            sortKeyFun = Column.sortKeyFun;
+        } else {
+            sortKeyFun = hasSort && function(){
+                var k = Column.sortKeyFun.apply(this, arguments);
+                if(_.isString(k)){
+                    return utils.reverseString(""+k);
+                } else {
+                    return -k;
+                }
+            }
+        }
+        this.props.setSortKeyFun(sortKeyFun);
+    },
     render: function () {
-        var columns = this.props.columns.map(function (column) {
-            return column.renderTitle();
+        var columns = this.props.columns.map(function (Column) {
+            var onClick = this.onClick.bind(this, Column);
+            var className;
+            if(this.state.sortColumn === Column) {
+                if(this.state.sortDesc){
+                    className = "sort-desc";
+                } else {
+                    className = "sort-asc";
+                }
+            }
+            return <Column.Title
+                        key={Column.displayName}
+                        onClick={onClick}
+                        className={className} />;
         }.bind(this));
         return <thead>
             <tr>{columns}</tr>
@@ -63,13 +113,17 @@ var FlowTable = React.createClass({
             columns: flowtable_columns
         };
     },
-    componentWillMount: function () {
-        if (this.props.view) {
-            this.props.view.addListener("add", this.onChange);
-            this.props.view.addListener("update", this.onChange);
-            this.props.view.addListener("remove", this.onChange);
-            this.props.view.addListener("recalculate", this.onChange);
+    _listen: function(view){
+        if(!view){
+            return;
         }
+        view.addListener("add", this.onChange);
+        view.addListener("update", this.onChange);
+        view.addListener("remove", this.onChange);
+        view.addListener("recalculate", this.onChange);
+    },
+    componentWillMount: function () {
+        this._listen(this.props.view);
     },
     componentWillReceiveProps: function (nextProps) {
         if (nextProps.view !== this.props.view) {
@@ -79,10 +133,7 @@ var FlowTable = React.createClass({
                 this.props.view.removeListener("remove");
                 this.props.view.removeListener("recalculate");
             }
-            nextProps.view.addListener("add", this.onChange);
-            nextProps.view.addListener("update", this.onChange);
-            nextProps.view.addListener("remove", this.onChange);
-            nextProps.view.addListener("recalculate", this.onChange);
+            this._listen(nextProps.view);
         }
     },
     getDefaultProps: function () {
@@ -130,7 +181,8 @@ var FlowTable = React.createClass({
             <div className="flow-table" onScroll={this.onScrollFlowTable}>
                 <table>
                     <FlowTableHead ref="head"
-                        columns={this.state.columns}/>
+                        columns={this.state.columns}
+                        setSortKeyFun={this.props.setSortKeyFun}/>
                     <tbody ref="body">
                         { this.getPlaceholderTop(flows.length) }
                         {rows}
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 18d7318f..184ef49f 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -9,12 +9,12 @@ var Filt = require("../filt/filt.js");
 FlowTable = require("./flowtable.js");
 var flowdetail = require("./flowdetail.js");
 
-
 var MainView = React.createClass({
     mixins: [common.Navigation, common.State],
     getInitialState: function () {
         return {
-            flows: []
+            flows: [],
+            sortKeyFun: false
         };
     },
     getViewFilt: function () {
@@ -34,8 +34,6 @@ var MainView = React.createClass({
             return filt(flow);
         };
     },
-    getViewSort: function () {
-    },
     componentWillReceiveProps: function (nextProps) {
         if (nextProps.flowStore !== this.props.flowStore) {
             this.closeView();
@@ -45,11 +43,11 @@ var MainView = React.createClass({
         var filterChanged = (this.props.query[Query.FILTER] !== nextProps.query[Query.FILTER]);
         var highlightChanged = (this.props.query[Query.HIGHLIGHT] !== nextProps.query[Query.HIGHLIGHT]);
         if (filterChanged || highlightChanged) {
-            this.state.view.recalculate(this.getViewFilt(), this.getViewSort());
+            this.state.view.recalculate(this.getViewFilt(), this.state.sortKeyFun);
         }
     },
     openView: function (store) {
-        var view = new views.StoreView(store, this.getViewFilt(), this.getViewSort());
+        var view = new views.StoreView(store, this.getViewFilt(), this.state.sortKeyFun);
         this.setState({
             view: view
         });
@@ -87,6 +85,12 @@ var MainView = React.createClass({
     componentWillUnmount: function () {
         this.closeView();
     },
+    setSortKeyFun: function(sortKeyFun){
+        this.setState({
+            sortKeyFun: sortKeyFun
+        });
+        this.state.view.recalculate(this.getViewFilt(), sortKeyFun);
+    },
     selectFlow: function (flow) {
         if (flow) {
             this.replaceWith(
@@ -226,6 +230,7 @@ var MainView = React.createClass({
                 <FlowTable ref="flowTable"
                     view={this.state.view}
                     selectFlow={this.selectFlow}
+                    setSortKeyFun={this.setSortKeyFun}
                     selected={selected} />
                 {details}
             </div>