From 102bd075689892b06765fb857c89604fe9cf33e5 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Wed, 17 Sep 2014 17:30:19 +0200
Subject: implement FlowStore basics

---
 web/src/js/components/eventlog.jsx     |  11 ++-
 web/src/js/components/flowtable.jsx    | 121 +++++++++++++++++++++++++++++++++
 web/src/js/components/proxyapp.jsx     |   2 +-
 web/src/js/components/traffictable.jsx |  34 ---------
 4 files changed, 131 insertions(+), 37 deletions(-)
 create mode 100644 web/src/js/components/flowtable.jsx
 delete mode 100644 web/src/js/components/traffictable.jsx

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/eventlog.jsx b/web/src/js/components/eventlog.jsx
index 32fc01ee..df212177 100644
--- a/web/src/js/components/eventlog.jsx
+++ b/web/src/js/components/eventlog.jsx
@@ -27,8 +27,15 @@ var EventLog = React.createClass({
     },
     render: function () {
         var messages = this.state.log.map(function(row) {
-            return (<div key={row.id}>{row.message}</div>);
+            var indicator = null;
+            if(row.source === "ui"){
+                indicator = <i className="fa fa-html5"></i>;
+            }
+            return (
+                <div key={row.id}>
+                    { indicator } {row.message}
+                </div>);
         });
         return <pre className="eventlog">{messages}</pre>;
     }
-});
+});
\ No newline at end of file
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>
+            );
+    }
+});
diff --git a/web/src/js/components/proxyapp.jsx b/web/src/js/components/proxyapp.jsx
index 2f1a9861..63998ffe 100644
--- a/web/src/js/components/proxyapp.jsx
+++ b/web/src/js/components/proxyapp.jsx
@@ -38,7 +38,7 @@ var ProxyAppMain = React.createClass({
 var ProxyApp = (
     <ReactRouter.Routes location="hash">
         <ReactRouter.Route name="app" path="/" handler={ProxyAppMain}>
-            <ReactRouter.Route name="main" handler={TrafficTable}/>
+            <ReactRouter.Route name="main" handler={FlowTable}/>
             <ReactRouter.Route name="reports" handler={Reports}/>
             <ReactRouter.Redirect to="main"/>
         </ReactRouter.Route>
diff --git a/web/src/js/components/traffictable.jsx b/web/src/js/components/traffictable.jsx
deleted file mode 100644
index 8071b97e..00000000
--- a/web/src/js/components/traffictable.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/** @jsx React.DOM */
-
-var TrafficTable = React.createClass({
-    getInitialState: function () {
-        return {
-            flows: []
-        };
-    },
-    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>;
-         }); */
-        //Dummy Text for layout testing
-        x = "Flow";
-        i = 12;
-        while (i--) x += x;
-        return (
-            <div>Flow</div> 
-            );
-    }
-});
-- 
cgit v1.2.3