web++

9 files changed, 171 insertions, 156 deletions

diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
index 08a6dfb4..34d84cdf 100644
--- a/web/src/js/components/eventlog.jsx.js
+++ b/web/src/js/components/eventlog.jsx.js
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 var LogMessage = React.createClass({
     render: function(){
         var entry = this.props.entry;
@@ -57,7 +55,8 @@ var EventLogContents = React.createClass({
 });
 
 var ToggleFilter = React.createClass({
-    toggle: function(){
+    toggle: function(e){
+        e.preventDefault();
         return this.props.toggleLevel(this.props.name);
     },
     render: function(){
@@ -97,7 +96,6 @@ var EventLog = React.createClass({
         var filter = this.state.filter;
         filter[level] = !filter[level];
         this.setState({filter: filter});
-        return false;
     },
     render: function () {
         return (
diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js
index 3ba025a9..5c4168a9 100644
--- a/web/src/js/components/flowdetail.jsx.js
+++ b/web/src/js/components/flowdetail.jsx.js
@@ -1,34 +1,32 @@
-/** @jsx React.DOM */
-
 var FlowDetailNav = React.createClass({
-    render: function(){
+    render: function () {
 
-        var items = this.props.tabs.map(function(e){
+        var items = this.props.tabs.map(function (e) {
             var str = e.charAt(0).toUpperCase() + e.slice(1);
             var className = this.props.active === e ? "active" : "";
-            var onClick = function(){
+            var onClick = function (e) {
                 this.props.selectTab(e);
-                return false;
+                e.preventDefault();
             }.bind(this);
             return <a key={e}
-                      href="#" 
-                      className={className}
-                      onClick={onClick}>{str}</a>;
+                href="#"
+                className={className}
+                onClick={onClick}>{str}</a>;
         }.bind(this));
         return (
             <nav ref="head" className="nav-tabs nav-tabs-sm">
                 {items}
             </nav>
         );
-    } 
+    }
 });
 
 var Headers = React.createClass({
-    render: function(){
-        var rows = this.props.message.headers.map(function(header, i){
+    render: function () {
+        var rows = this.props.message.headers.map(function (header, i) {
             return (
                 <tr key={i}>
-                    <td className="header-name">{header[0]+":"}</td>
+                    <td className="header-name">{header[0] + ":"}</td>
                     <td className="header-value">{header[1]}</td>
                 </tr>
             );
@@ -44,16 +42,16 @@ var Headers = React.createClass({
 });
 
 var FlowDetailRequest = React.createClass({
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         var first_line = [
-                flow.request.method,
-                RequestUtils.pretty_url(flow.request),
-                "HTTP/"+ flow.response.httpversion.join(".")
-            ].join(" ");
+            flow.request.method,
+            RequestUtils.pretty_url(flow.request),
+            "HTTP/" + flow.response.httpversion.join(".")
+        ].join(" ");
         var content = null;
-        if(flow.request.contentLength > 0){
-            content = "Request Content Size: "+ formatSize(flow.request.contentLength);
+        if (flow.request.contentLength > 0) {
+            content = "Request Content Size: " + formatSize(flow.request.contentLength);
         } else {
             content = <div className="alert alert-info">No Content</div>;
         }
@@ -72,16 +70,16 @@ var FlowDetailRequest = React.createClass({
 });
 
 var FlowDetailResponse = React.createClass({
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         var first_line = [
-                "HTTP/"+ flow.response.httpversion.join("."),
-                flow.response.code,
-                flow.response.msg
-            ].join(" ");
+            "HTTP/" + flow.response.httpversion.join("."),
+            flow.response.code,
+            flow.response.msg
+        ].join(" ");
         var content = null;
-        if(flow.response.contentLength > 0){
-            content = "Response Content Size: "+ formatSize(flow.response.contentLength);
+        if (flow.response.contentLength > 0) {
+            content = "Response Content Size: " + formatSize(flow.response.contentLength);
         } else {
             content = <div className="alert alert-info">No Content</div>;
         }
@@ -100,42 +98,53 @@ var FlowDetailResponse = React.createClass({
 });
 
 var TimeStamp = React.createClass({
-    render: function() {
+    render: function () {
 
-        if(!this.props.t){
+        if (!this.props.t) {
             //should be return null, but that triggers a React bug.
             return <tr></tr>;
         }
 
         var ts = (new Date(this.props.t * 1000)).toISOString();
-        ts = ts.replace("T", " ").replace("Z","");
+        ts = ts.replace("T", " ").replace("Z", "");
 
         var delta;
-        if(this.props.deltaTo){
-            delta = formatTimeDelta(1000 * (this.props.t-this.props.deltaTo));
+        if (this.props.deltaTo) {
+            delta = formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
             delta = <span className="text-muted">{"(" + delta + ")"}</span>;
         } else {
             delta = null;
         }
 
-        return <tr><td>{this.props.title + ":"}</td><td>{ts} {delta}</td></tr>;
+        return <tr>
+            <td>{this.props.title + ":"}</td>
+            <td>{ts} {delta}</td>
+        </tr>;
     }
 });
 
 var ConnectionInfo = React.createClass({
 
-    render: function() {
+    render: function () {
         var conn = this.props.conn;
         var address = conn.address.address.join(":");
 
         var sni = <tr key="sni"></tr>; //should be null, but that triggers a React bug.
-        if(conn.sni){
-            sni = <tr key="sni"><td><abbr title="TLS Server Name Indication">TLS SNI:</abbr></td><td>{conn.sni}</td></tr>;
+        if (conn.sni) {
+            sni = <tr key="sni">
+                <td>
+                    <abbr title="TLS Server Name Indication">TLS SNI:</abbr>
+                </td>
+                <td>{conn.sni}</td>
+            </tr>;
         }
         return (
             <table className="connection-table">
                 <tbody>
-                    <tr key="address"><td>Address:</td><td>{address}</td></tr>
+                    <tr key="address">
+                        <td>Address:</td>
+                        <td>{address}</td>
+                    </tr>
                     {sni}
                 </tbody>
             </table>
@@ -144,7 +153,7 @@ var ConnectionInfo = React.createClass({
 });
 
 var CertificateInfo = React.createClass({
-    render: function(){
+    render: function () {
         //TODO: We should fetch human-readable certificate representation
         // from the server
         var flow = this.props.flow;
@@ -165,7 +174,7 @@ var CertificateInfo = React.createClass({
 });
 
 var Timing = React.createClass({
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         var sc = flow.server_conn;
         var cc = flow.client_conn;
@@ -218,46 +227,46 @@ var Timing = React.createClass({
         }
 
         //Add unique key for each row.
-        timestamps.forEach(function(e){
+        timestamps.forEach(function (e) {
             e.key = e.title;
         });
 
         timestamps = _.sortBy(timestamps, 't');
 
-        var rows = timestamps.map(function(e){
-            return TimeStamp(e);
+        var rows = timestamps.map(function (e) {
+            return <TimeStamp {...e}/>;
         });
 
         return (
             <div>
-            <h4>Timing</h4>
-            <table className="timing-table">
-                <tbody>
+                <h4>Timing</h4>
+                <table className="timing-table">
+                    <tbody>
                     {rows}
-                </tbody>
-            </table>
+                    </tbody>
+                </table>
             </div>
         );
     }
 });
 
 var FlowDetailConnectionInfo = React.createClass({
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         var client_conn = flow.client_conn;
         var server_conn = flow.server_conn;
         return (
             <section>
 
-            <h4>Client Connection</h4>
-            <ConnectionInfo conn={client_conn}/>
+                <h4>Client Connection</h4>
+                <ConnectionInfo conn={client_conn}/>
 
-            <h4>Server Connection</h4>
-            <ConnectionInfo conn={server_conn}/>
+                <h4>Server Connection</h4>
+                <ConnectionInfo conn={server_conn}/>
 
-            <CertificateInfo flow={flow}/>
+                <CertificateInfo flow={flow}/>
 
-            <Timing flow={flow}/>
+                <Timing flow={flow}/>
 
             </section>
         );
@@ -271,29 +280,38 @@ var tabs = {
 };
 
 var FlowDetail = React.createClass({
-    getDefaultProps: function(){
+    getDefaultProps: function () {
         return {
-            tabs: ["request","response", "details"]
+            tabs: ["request", "response", "details"]
         };
     },
-    mixins: [StickyHeadMixin],
-    nextTab: function(i) {
+    mixins: [StickyHeadMixin, ReactRouter.Navigation, ReactRouter.State],
+    nextTab: function (i) {
         var currentIndex = this.props.tabs.indexOf(this.props.active);
         // JS modulo operator doesn't correct negative numbers, make sure that we are positive.
         var nextIndex = (currentIndex + i + this.props.tabs.length) % this.props.tabs.length;
-        this.props.selectTab(this.props.tabs[nextIndex]);
+        this.selectTab(this.props.tabs[nextIndex]);
+    },
+    selectTab: function (panel) {
+        this.replaceWith(
+            "flow",
+            {
+                flowId: this.getParams().flowId,
+                detailTab: panel
+            }
+        );
     },
-    render: function(){
+    render: function () {
         var flow = JSON.stringify(this.props.flow, null, 2);
         var Tab = tabs[this.props.active];
         return (
             <div className="flow-detail" onScroll={this.adjustHead}>
                 <FlowDetailNav ref="head"
-                               tabs={this.props.tabs}
-                               active={this.props.active}
-                               selectTab={this.props.selectTab}/>
+                    tabs={this.props.tabs}
+                    active={this.props.active}
+                    selectTab={this.selectTab}/>
                 <Tab flow={this.props.flow}/>
             </div>
-            );
-    } 
+        );
+    }
 });
\ No newline at end of file
diff --git a/web/src/js/components/flowtable-columns.jsx.js b/web/src/js/components/flowtable-columns.jsx.js
index b7db71b7..8a44c072 100644
--- a/web/src/js/components/flowtable-columns.jsx.js
+++ b/web/src/js/components/flowtable-columns.jsx.js
@@ -1,6 +1,3 @@
-/** @jsx React.DOM */
-
-
 var TLSColumn = React.createClass({
     statics: {
         renderTitle: function(){
diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
index fc4d8fbc..2baf728f 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -1,10 +1,8 @@
-/** @jsx React.DOM */
-
 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}/>;
+        var columns = this.props.columns.map(function(Column){
+            return <Column key={Column.displayName} flow={flow}/>;
         }.bind(this));
         var className = "";
         if(this.props.selected){
diff --git a/web/src/js/components/footer.jsx.js b/web/src/js/components/footer.jsx.js
index 9bcbbc2a..6ba253bf 100644
--- a/web/src/js/components/footer.jsx.js
+++ b/web/src/js/components/footer.jsx.js
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 var Footer = React.createClass({
     render: function () {
         var mode = this.props.settings.mode;
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index 994bc759..5c905889 100644
--- a/web/src/js/components/header.jsx.js
+++ b/web/src/js/components/header.jsx.js
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 var MainMenu = React.createClass({
     statics: {
         title: "Traffic",
@@ -48,15 +46,16 @@ var header_entries = [MainMenu, ToolsMenu, ReportsMenu];
 
 
 var Header = React.createClass({
+    mixins: [ReactRouter.Navigation],
     getInitialState: function () {
         return {
             active: header_entries[0]
         };
     },
-    handleClick: function (active) {
-        ReactRouter.transitionTo(active.route);
+    handleClick: function (active, e) {
+        e.preventDefault();
+        this.transitionTo(active.route);
         this.setState({active: active});
-        return false;
     },
     handleFileClick: function () {
         console.log("File click");
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index f0dfb59a..799bd0d2 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -1,71 +1,82 @@
-/** @jsx React.DOM */
-
 var MainView = React.createClass({
-    getInitialState: function() {
+    mixins: [ReactRouter.Navigation, ReactRouter.State],
+    getInitialState: function () {
         return {
-            flows: [],
+            flows: []
         };
     },
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.flowStore !== this.props.flowStore) {
+            this.closeView();
+            this.openView(nextProps.flowStore);
+        }
+    },
+    openView: function (store) {
+        var view = new FlowView(store);
+        this.setState({
+            view: view
+        });
+        view.addListener("add", this.onFlowChange);
+        view.addListener("update", this.onFlowChange);
+        view.addListener("remove", this.onFlowChange);
+        view.addListener("recalculate", this.onFlowChange);
+    },
+    closeView: function () {
+        this.state.view.close();
+    },
     componentDidMount: function () {
-        //FIXME: The store should be global, move out of here.
-        window.flowstore = new LiveFlowStore();
-
-        this.flowStore = window.flowstore.open_view();
-        this.flowStore.addListener("add",this.onFlowChange);
-        this.flowStore.addListener("update",this.onFlowChange);
-        this.flowStore.addListener("remove",this.onFlowChange);
-        this.flowStore.addListener("recalculate",this.onFlowChange);
+        this.openView(this.props.flowStore);
     },
     componentWillUnmount: function () {
-        this.flowStore.removeListener("change",this.onFlowChange);
-        this.flowStore.close();
+        this.closeView();
     },
     onFlowChange: function () {
+        console.warn("onFlowChange is deprecated");
         this.setState({
-            flows: this.flowStore.flows
+            flows: this.state.view.flows
         });
     },
-    selectDetailTab: function(panel) {
-        ReactRouter.replaceWith(
-            "flow",
-            {
-                flowId: this.props.params.flowId,
-                detailTab: panel
-            }
-        );
-    },
-    selectFlow: function(flow) {
-        if(flow){
-            ReactRouter.replaceWith(
-                "flow", 
+    selectFlow: function (flow) {
+        if (flow) {
+            this.replaceWith(
+                "flow",
                 {
                     flowId: flow.id,
-                    detailTab: this.props.params.detailTab || "request"
+                    detailTab: this.getParams().detailTab || "request"
                 }
             );
-            this.refs.flowTable.scrollIntoView(flow);
+            console.log("TODO: Scroll into view");
+            //this.refs.flowTable.scrollIntoView(flow);
         } else {
-            ReactRouter.replaceWith("flows");
+            this.replaceWith("flows");
         }
     },
-    selectFlowRelative: function(i){
+    selectFlowRelative: function (i) {
+        var flows = this.state.view.flows;
         var index;
-        if(!this.props.params.flowId){
-            if(i > 0){
-                index = this.state.flows.length-1;
+        if (!this.getParams().flowId) {
+            if (i > 0) {
+                index = flows.length - 1;
             } else {
                 index = 0;
             }
         } else {
-            index = _.findIndex(this.state.flows, function(f){
-                return f.id === this.props.params.flowId;
-            }.bind(this));
-            index = Math.min(Math.max(0, index+i), this.state.flows.length-1);
+            i = flows.length;
+            var currFlowId = this.getParams().flowId;
+            while (i--) {
+                if (flows[i].id === currFlowId) {
+                    index = i;
+                    break;
+                }
+            }
+            index = Math.min(
+                Math.max(0, index + i),
+                flows.length - 1);
         }
-        this.selectFlow(this.state.flows[index]);
+        this.selectFlow(flows[index]);
     },
-    onKeyDown: function(e){
-        switch(e.keyCode){
+    onKeyDown: function (e) {
+        switch (e.keyCode) {
             case Key.K:
             case Key.UP:
                 this.selectFlowRelative(-1);
@@ -86,14 +97,14 @@ var MainView = React.createClass({
                 break;
             case Key.H:
             case Key.LEFT:
-                if(this.refs.flowDetails){
+                if (this.refs.flowDetails) {
                     this.refs.flowDetails.nextTab(-1);
                 }
                 break;
             case Key.L:
             case Key.TAB:
             case Key.RIGHT:
-                if(this.refs.flowDetails){
+                if (this.refs.flowDetails) {
                     this.refs.flowDetails.nextTab(+1);
                 }
                 break;
@@ -101,18 +112,17 @@ var MainView = React.createClass({
                 console.debug("keydown", e.keyCode);
                 return;
         }
-        return false;
+        e.preventDefault();
     },
-    render: function() {
-        var selected = _.find(this.state.flows, { id: this.props.params.flowId });
+    render: function () {
+        var selected = this.props.flowStore.get(this.getParams().flowId);
 
         var details;
-        if(selected){
+        if (selected) {
             details = (
-                <FlowDetail ref="flowDetails" 
-                            flow={selected}
-                            selectTab={this.selectDetailTab}
-                            active={this.props.params.detailTab}/>
+                <FlowDetail ref="flowDetails"
+                    flow={selected}
+                    active={this.getParams().detailTab}/>
             );
         } else {
             details = null;
@@ -121,9 +131,9 @@ var MainView = React.createClass({
         return (
             <div className="main-view" onKeyDown={this.onKeyDown} tabIndex="0">
                 <FlowTable ref="flowTable"
-                           flows={this.state.flows}
-                           selectFlow={this.selectFlow}
-                           selected={selected} />
+                    flows={this.state.view ? this.state.view.flows : []}
+                    selectFlow={this.selectFlow}
+                    selected={selected} />
                 { details ? <Splitter/> : null }
                 {details}
             </div>
diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js
index ff6e8da1..3545cfe0 100644
--- a/web/src/js/components/proxyapp.jsx.js
+++ b/web/src/js/components/proxyapp.jsx.js
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 //TODO: Move out of here, just a stub.
 var Reports = React.createClass({
     render: function () {
@@ -10,7 +8,10 @@ var Reports = React.createClass({
 
 var ProxyAppMain = React.createClass({
     getInitialState: function () {
-        return { settings: SettingsStore.getAll() };
+        return {
+            settings: SettingsStore.getAll(),
+            flowStore: new LiveFlowStore()
+        };
     },
     componentDidMount: function () {
         SettingsStore.addListener("change", this.onSettingsChange);
@@ -25,30 +26,28 @@ var ProxyAppMain = React.createClass({
         return (
             <div id="container">
                 <Header settings={this.state.settings}/>
-                <this.props.activeRouteHandler settings={this.state.settings}/>
+                <RouteHandler settings={this.state.settings} flowStore={this.state.flowStore}/>
                 {this.state.settings.showEventLog ? <Splitter axis="y"/> : null}
                 {this.state.settings.showEventLog ? <EventLog/> : null}
                 <Footer settings={this.state.settings}/>
             </div>
-            );
+        );
     }
 });
 
 
-var Routes = ReactRouter.Routes;
 var Route = ReactRouter.Route;
+var RouteHandler = ReactRouter.RouteHandler;
 var Redirect = ReactRouter.Redirect;
 var DefaultRoute = ReactRouter.DefaultRoute;
 var NotFoundRoute = ReactRouter.NotFoundRoute;
 
 
-var ProxyApp = (
-    <Routes location="hash">
-        <Route path="/" handler={ProxyAppMain}>
-            <Route name="flows" path="flows" handler={MainView}/>
-            <Route name="flow" path="flows/:flowId/:detailTab" handler={MainView}/>
-            <Route name="reports" handler={Reports}/>
-            <Redirect path="/" to="flows" />
-        </Route>
-    </Routes>
-    );
\ No newline at end of file
+var routes = (
+    <Route path="/" handler={ProxyAppMain}>
+        <Route name="flows" path="flows" handler={MainView}/>
+        <Route name="flow" path="flows/:flowId/:detailTab" handler={MainView}/>
+        <Route name="reports" handler={Reports}/>
+        <Redirect path="/" to="flows" />
+    </Route>
+);
\ No newline at end of file
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
index 91cb8458..22aca577 100644
--- a/web/src/js/components/utils.jsx.js
+++ b/web/src/js/components/utils.jsx.js
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 //React utils. For other utilities, see ../utils.js
 
 var Splitter = React.createClass({