1 files changed, 201 insertions, 0 deletions
diff --git a/web/src/js/components/flowtable-columns.js b/web/src/js/components/flowtable-columns.js
new file mode 100644
index 00000000..74d96216
--- /dev/null
+++ b/web/src/js/components/flowtable-columns.js
@@ -0,0 +1,201 @@
+var React = require("react");
+var RequestUtils = require("../flow/utils.js").RequestUtils;
+var ResponseUtils = require("../flow/utils.js").ResponseUtils;
+var utils = require("../utils.js");
+
+var TLSColumn = React.createClass({
+    statics: {
+        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 () {
+        var flow = this.props.flow;
+        var ssl = (flow.request.scheme === "https");
+        var classes;
+        if (ssl) {
+            classes = "col-tls col-tls-https";
+        } else {
+            classes = "col-tls col-tls-http";
+        }
+        return <td className={classes}></td>;
+    }
+});
+
+
+var IconColumn = React.createClass({
+    statics: {
+        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 = ResponseUtils.getContentType(flow.response);
+
+            //TODO: We should assign a type to the flow somewhere else.
+            if (flow.response.status_code === 304) {
+                icon = "resource-icon-not-modified";
+            } else if (300 <= flow.response.status_code && flow.response.status_code < 400) {
+                icon = "resource-icon-redirect";
+            } else if (contentType && contentType.indexOf("image") >= 0) {
+                icon = "resource-icon-image";
+            } else if (contentType && contentType.indexOf("javascript") >= 0) {
+                icon = "resource-icon-js";
+            } else if (contentType && contentType.indexOf("css") >= 0) {
+                icon = "resource-icon-css";
+            } else if (contentType && contentType.indexOf("html") >= 0) {
+                icon = "resource-icon-document";
+            }
+        }
+        if (!icon) {
+            icon = "resource-icon-plain";
+        }
+
+
+        icon += " resource-icon";
+        return <td className="col-icon">
+            <div className={icon}></div>
+        </td>;
+    }
+});
+
+var PathColumn = React.createClass({
+    statics: {
+        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 () {
+        var flow = this.props.flow;
+        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}
+            { RequestUtils.pretty_url(flow.request) }
+        </td>;
+    }
+});
+
+
+var MethodColumn = React.createClass({
+    statics: {
+        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 () {
+        var flow = this.props.flow;
+        return <td className="col-method">{flow.request.method}</td>;
+    }
+});
+
+
+var StatusColumn = React.createClass({
+    statics: {
+        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.status_code : undefined;
+        }
+    },
+    render: function () {
+        var flow = this.props.flow;
+        var status;
+        if (flow.response) {
+            status = flow.response.status_code;
+        } else {
+            status = null;
+        }
+        return <td className="col-status">{status}</td>;
+    }
+});
+
+
+var SizeColumn = React.createClass({
+    statics: {
+        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 () {
+        var flow = this.props.flow;
+
+        var total = flow.request.contentLength;
+        if (flow.response) {
+            total += flow.response.contentLength || 0;
+        }
+        var size = utils.formatSize(total);
+        return <td className="col-size">{size}</td>;
+    }
+});
+
+
+var TimeColumn = React.createClass({
+    statics: {
+        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 () {
+        var flow = this.props.flow;
+        var time;
+        if (flow.response) {
+            time = utils.formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
+        } else {
+            time = "...";
+        }
+        return <td className="col-time">{time}</td>;
+    }
+});
+
+
+var all_columns = [
+    TLSColumn,
+    IconColumn,
+    PathColumn,
+    MethodColumn,
+    StatusColumn,
+    SizeColumn,
+    TimeColumn
+];
+
+module.exports = all_columns;