web: various fixes, add clear button

5 files changed, 41 insertions, 18 deletions

diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js
index 5c4168a9..74522f57 100644
--- a/web/src/js/components/flowdetail.jsx.js
+++ b/web/src/js/components/flowdetail.jsx.js
@@ -4,9 +4,9 @@ var FlowDetailNav = React.createClass({
         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 (e) {
+            var onClick = function (event) {
                 this.props.selectTab(e);
-                e.preventDefault();
+                event.preventDefault();
             }.bind(this);
             return <a key={e}
                 href="#"
@@ -302,7 +302,6 @@ var FlowDetail = React.createClass({
         );
     },
     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}>
diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
index 76ceea41..6d0f5ee7 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -83,20 +83,23 @@ var FlowTable = React.createClass({
     scrollIntoView: function (flow) {
         // Now comes the fun part: Scroll the flow into the view.
         var viewport = this.getDOMNode();
-        var flowNode = this.refs.body.refs[flow.id].getDOMNode();
+        var thead_height = this.refs.body.getDOMNode().offsetTop;
+
+        var flow_top = (this.props.view.index(flow) * ROW_HEIGHT) + thead_height;
+
         var viewport_top = viewport.scrollTop;
         var viewport_bottom = viewport_top + viewport.offsetHeight;
-        var flowNode_top = flowNode.offsetTop;
-        var flowNode_bottom = flowNode_top + flowNode.offsetHeight;
+        var flow_bottom = flow_top + ROW_HEIGHT;
+
+        // Account for pinned thead
+
 
-        // Account for pinned thead by pretending that the flowNode starts
-        // -thead_height pixel earlier.
-        flowNode_top -= this.refs.body.getDOMNode().offsetTop;
+        console.log("scrollInto", flow_top, flow_bottom, viewport_top, viewport_bottom, thead_height);
 
-        if (flowNode_top < viewport_top) {
-            viewport.scrollTop = flowNode_top;
-        } else if (flowNode_bottom > viewport_bottom) {
-            viewport.scrollTop = flowNode_bottom - viewport.offsetHeight;
+        if (flow_top - thead_height < viewport_top) {
+            viewport.scrollTop = flow_top - thead_height;
+        } else if (flow_bottom > viewport_bottom) {
+            viewport.scrollTop = flow_bottom - viewport.offsetHeight;
         }
     },
     render: function () {
@@ -134,7 +137,7 @@ var FlowTable = React.createClass({
                 <table>
                     <FlowTableHead ref="head"
                         columns={this.state.columns}/>
-                    <tbody>
+                    <tbody ref="body">
                         <tr style={{height: space_top}}></tr>
                         { fix_nth_row }
                         {rows}
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index e50c4274..a3fe4d51 100644
--- a/web/src/js/components/header.jsx.js
+++ b/web/src/js/components/header.jsx.js
@@ -8,12 +8,17 @@ var MainMenu = React.createClass({
             showEventLog: !this.props.settings.showEventLog
         });
     },
+    clearFlows: function(){
+        $.post("/flows/clear");
+    },
     render: function () {
         return (
             <div>
                 <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
-                    <i className="fa fa-database"></i>
-                Display Event Log
+                    <i className="fa fa-database"></i>&nbsp;Display Event Log
+                </button>&nbsp;
+                <button className="btn btn-default" onClick={this.clearFlows}>
+                    <i className="fa fa-eraser"></i>&nbsp;Clear Flows
                 </button>
             </div>
         );
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index fd9fdb8d..fe5d1c7c 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -35,8 +35,7 @@ var MainView = React.createClass({
                     detailTab: this.getParams().detailTab || "request"
                 }
             );
-            console.log("TODO: Scroll into view");
-            //this.refs.flowTable.scrollIntoView(flow);
+            this.refs.flowTable.scrollIntoView(flow);
         } else {
             this.replaceWith("flows");
         }
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
index b1d9a006..12775adc 100644
--- a/web/src/js/components/utils.jsx.js
+++ b/web/src/js/components/utils.jsx.js
@@ -95,4 +95,21 @@ var Splitter = React.createClass({
             </div>
         );
     }
+});
+
+function getCookie(name) {
+    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
+    return r ? r[1] : undefined;
+}
+var xsrf = $.param({_xsrf: getCookie("_xsrf")});
+
+//Tornado XSRF Protection.
+$.ajaxPrefilter(function(options){
+    if(options.type === "post" && options.url[0] === "/"){
+        if(options.data){
+            options.data += ("&" + xsrf);
+        } else {
+            options.data = xsrf;
+        }
+    }
 });
\ No newline at end of file