From e6ef149a03b37d74c7ebbf3a5f3a51e3c7341311 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 5 Jun 2016 18:23:06 -0700
Subject: web: modernize flow table columns

---
 web/src/js/components/flowtable-columns.js | 293 +++++++++++------------------
 1 file changed, 112 insertions(+), 181 deletions(-)

(limited to 'web/src/js/components/flowtable-columns.js')

diff --git a/web/src/js/components/flowtable-columns.js b/web/src/js/components/flowtable-columns.js
index dbbe8847..1eae6409 100644
--- a/web/src/js/components/flowtable-columns.js
+++ b/web/src/js/components/flowtable-columns.js
@@ -1,190 +1,121 @@
-import React from "react";
-import {RequestUtils, ResponseUtils} from "../flow/utils.js";
-import {formatSize, formatTimeDelta} from "../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>;
+import React from "react"
+import {RequestUtils, ResponseUtils} from "../flow/utils.js"
+import {formatSize, formatTimeDelta} from "../utils.js"
+
+
+function TLSColumn({flow}) {
+    let ssl = (flow.request.scheme === "https")
+    let classes
+    if (ssl) {
+        classes = "col-tls col-tls-https"
+    } else {
+        classes = "col-tls col-tls-http"
     }
-});
-
-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);
+    return <td className={classes}></td>
+}
+TLSColumn.Title = ({className = "", ...props}) => <th {...props} className={"col-tls " + className }></th>
+TLSColumn.sortKeyFun = flow => flow.request.scheme
+
+
+function IconColumn({flow}) {
+    let 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"
         }
-    },
-    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>;
+    if (!icon) {
+        icon = "resource-icon-plain"
     }
-});
-
-
-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>;
+
+    icon += " resource-icon"
+    return <td className="col-icon">
+        <div className={icon}></div>
+    </td>
+}
+IconColumn.Title = ({className = "", ...props}) => <th {...props} className={"col-icon " + className }></th>
+
+
+function PathColumn({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>
+}
+PathColumn.Title = ({className = "", ...props}) =>
+    <th {...props} className={"col-path " + className }>Path</th>
+PathColumn.sortKeyFun = flow => RequestUtils.pretty_url(flow.request)
+
+
+function MethodColumn({flow}) {
+    return <td className="col-method">{flow.request.method}</td>
+}
+MethodColumn.Title = ({className = "", ...props}) =>
+    <th {...props} className={"col-method " + className }>Method</th>
+MethodColumn.sortKeyFun = flow => flow.request.method
+
+
+function StatusColumn({flow}) {
+    let status
+    if (flow.response) {
+        status = flow.response.status_code
+    } else {
+        status = null
     }
-});
-
-
-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;
+    return <td className="col-status">{status}</td>
 
-        var total = flow.request.contentLength;
-        if (flow.response) {
-            total += flow.response.contentLength || 0;
-        }
-        var size = formatSize(total);
-        return <td className="col-size">{size}</td>;
+}
+StatusColumn.Title = ({className = "", ...props}) =>
+    <th {...props} className={"col-status " + className }>Status</th>
+StatusColumn.sortKeyFun = flow => flow.response ? flow.response.status_code : undefined
+
+
+function SizeColumn({flow}) {
+    let total = flow.request.contentLength
+    if (flow.response) {
+        total += flow.response.contentLength || 0
     }
-});
-
-
-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 = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
-        } else {
-            time = "...";
-        }
-        return <td className="col-time">{time}</td>;
+    let size = formatSize(total)
+    return <td className="col-size">{size}</td>
+
+}
+SizeColumn.Title = ({className = "", ...props}) =>
+    <th {...props} className={"col-size " + className }>Size</th>
+SizeColumn.sortKeyFun = flow => {
+    let total = flow.request.contentLength
+    if (flow.response) {
+        total += flow.response.contentLength || 0
+    }
+    return total
+}
+
+
+function TimeColumn({flow}) {
+    let time
+    if (flow.response) {
+        time = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start))
+    } else {
+        time = "..."
     }
-});
+    return <td className="col-time">{time}</td>
+}
+TimeColumn.Title = ({className = "", ...props}) =>
+    <th {...props} className={"col-time " + className }>Time</th>
+TimeColumn.sortKeyFun = flow => flow.response.timestamp_end - flow.request.timestamp_start
 
 
 var all_columns = [
@@ -195,6 +126,6 @@ var all_columns = [
     StatusColumn,
     SizeColumn,
     TimeColumn
-];
+]
 
-export default all_columns;
+export default all_columns
-- 
cgit v1.2.3