1 files changed, 121 insertions, 0 deletions
diff --git a/web/src/js/components/flowtable.jsx b/web/src/js/components/flowtable.jsx
new file mode 100644
index 00000000..5e9f6718
--- /dev/null
+++ b/web/src/js/components/flowtable.jsx
@@ -0,0 +1,121 @@
+/** @jsx React.DOM */
+
+var FlowRow = React.createClass({
+    render: function(){
+        var flow = this.props.flow;
+        var columns = this.props.columns.map(function(column){
+            return column({flow: flow});
+        }.bind(this));
+        return <tr>{columns}</tr>;
+    }
+});
+
+var FlowTableHead = React.createClass({
+    render: function(){
+        var columns = this.props.columns.map(function(column){
+            return column.renderTitle();
+        }.bind(this));
+        return <thead>{columns}</thead>;
+    }
+});
+
+var FlowTableBody = React.createClass({
+    render: function(){
+        var rows = this.props.flows.map(function(flow){
+            return <FlowRow flow={flow} columns={this.props.columns}/>
+        }.bind(this));
+        return <tbody>{rows}</tbody>;
+    }
+});
+
+var PathColumn = React.createClass({
+    statics: {
+        renderTitle: function(){
+            return <th key="PathColumn">Path</th>;
+        }
+    },
+    render: function(){
+        var flow = this.props.flow;
+        return <td key="PathColumn">{flow.request.scheme + "://" + flow.request.host + flow.request.path}</td>;
+    }
+});
+var MethodColumn = React.createClass({
+    statics: {
+        renderTitle: function(){
+            return <th key="MethodColumn">Method</th>;
+        }
+    },
+    render: function(){
+        var flow = this.props.flow;
+        return <td key="MethodColumn">{flow.request.method}</td>;
+    }
+});
+var StatusColumn = React.createClass({
+    statics: {
+        renderTitle: function(){
+            return <th key="StatusColumn">Status</th>;
+        }
+    },
+    render: function(){
+        var flow = this.props.flow;
+        var status;
+        if(flow.response){
+            status = flow.response.code + " " + flow.response.msg;
+        } else {
+            status = null;
+        }
+        return <td key="StatusColumn">{status}</td>;
+    }
+});
+var TimeColumn = React.createClass({
+    statics: {
+        renderTitle: function(){
+            return <th key="TimeColumn">Time</th>;
+        }
+    },
+    render: function(){
+        var flow = this.props.flow;
+        var time;
+        if(flow.response){
+            time = Math.round(1000 * (flow.response.timestamp_end - flow.request.timestamp_start))+"ms";
+        } else {
+            time = "...";
+        }
+        return <td key="TimeColumn">{time}</td>;
+    }
+});
+
+var all_columns = [PathColumn, MethodColumn, StatusColumn, TimeColumn];
+
+var FlowTable = React.createClass({
+    getInitialState: function () {
+        return {
+            flows: [],
+            columns: all_columns
+        };
+    },
+    componentDidMount: function () {
+        this.flowStore = FlowStore.getView();
+        this.flowStore.addListener("change",this.onFlowChange);
+    },
+    componentWillUnmount: function () {
+        this.flowStore.removeListener("change",this.onFlowChange);
+        this.flowStore.close();
+    },
+    onFlowChange: function () {
+        this.setState({
+            flows: this.flowStore.getAll()
+        });
+    },
+    render: function () {
+        var flows = this.state.flows.map(function(flow){
+         return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
+        });
+        return (
+            <table className="flow-table">
+                <FlowTableHead columns={this.state.columns}/>
+                <FlowTableBody columns={this.state.columns} flows={this.state.flows}/>
+            </table>
+            );
+    }
+});