1 files changed, 136 insertions, 0 deletions
diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js
new file mode 100644
index 00000000..c7ce147c
--- /dev/null
+++ b/web/src/js/components/flowtable.js
@@ -0,0 +1,136 @@
+var React = require("react");
+var utils = require("./utils.js");
+var VirtualScrollMixin = require("./virtualscroll.js");
+var flowtable_columns = require("./flowtable-columns.js");
+
+var FlowRow = React.createClass({
+    render: function () {
+        var flow = this.props.flow;
+        var columns = this.props.columns.map(function (Column) {
+            return <Column key={Column.displayName} flow={flow}/>;
+        }.bind(this));
+        var className = "";
+        if (this.props.selected) {
+            className += " selected";
+        }
+        if (this.props.highlighted) {
+            className += " highlighted";
+        }
+        if (flow.intercepted) {
+            className += " intercepted";
+        }
+        if (flow.request) {
+            className += " has-request";
+        }
+        if (flow.response) {
+            className += " has-response";
+        }
+
+        return (
+            <tr className={className} onClick={this.props.selectFlow.bind(null, flow)}>
+                {columns}
+            </tr>);
+    },
+    shouldComponentUpdate: function (nextProps) {
+        return true;
+        // Further optimization could be done here
+        // by calling forceUpdate on flow updates, selection changes and column changes.
+        //return (
+        //(this.props.columns.length !== nextProps.columns.length) ||
+        //(this.props.selected !== nextProps.selected)
+        //);
+    }
+});
+
+var FlowTableHead = React.createClass({
+    render: function () {
+        var columns = this.props.columns.map(function (column) {
+            return column.renderTitle();
+        }.bind(this));
+        return <thead>
+            <tr>{columns}</tr>
+        </thead>;
+    }
+});
+
+
+var ROW_HEIGHT = 32;
+
+var FlowTable = React.createClass({
+    mixins: [utils.StickyHeadMixin, utils.AutoScrollMixin, VirtualScrollMixin],
+    getInitialState: function () {
+        return {
+            columns: flowtable_columns
+        };
+    },
+    componentWillMount: function () {
+        if (this.props.view) {
+            this.props.view.addListener("add update remove recalculate", this.onChange);
+        }
+    },
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.view !== this.props.view) {
+            if (this.props.view) {
+                this.props.view.removeListener("add update remove recalculate");
+            }
+            nextProps.view.addListener("add update remove recalculate", this.onChange);
+        }
+    },
+    getDefaultProps: function () {
+        return {
+            rowHeight: ROW_HEIGHT
+        };
+    },
+    onScrollFlowTable: function () {
+        this.adjustHead();
+        this.onScroll();
+    },
+    onChange: function () {
+        this.forceUpdate();
+    },
+    scrollIntoView: function (flow) {
+        this.scrollRowIntoView(
+            this.props.view.index(flow),
+            this.refs.body.getDOMNode().offsetTop
+        );
+    },
+    renderRow: function (flow) {
+        var selected = (flow === this.props.selected);
+        var highlighted =
+            (
+            this.props.view._highlight &&
+            this.props.view._highlight[flow.id]
+            );
+
+        return <FlowRow key={flow.id}
+            ref={flow.id}
+            flow={flow}
+            columns={this.state.columns}
+            selected={selected}
+            highlighted={highlighted}
+            selectFlow={this.props.selectFlow}
+        />;
+    },
+    render: function () {
+        //console.log("render flowtable", this.state.start, this.state.stop, this.props.selected);
+        var flows = this.props.view ? this.props.view.list : [];
+
+        var rows = this.renderRows(flows);
+
+        return (
+            <div className="flow-table" onScroll={this.onScrollFlowTable}>
+                <table>
+                    <FlowTableHead ref="head"
+                        columns={this.state.columns}/>
+                    <tbody ref="body">
+                        { this.getPlaceholderTop(flows.length) }
+                        {rows}
+                        { this.getPlaceholderBottom(flows.length) }
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+});
+
+module.exports = FlowTable;