diff options
Diffstat (limited to 'web/src/js/components')
| -rw-r--r-- | web/src/js/components/eventlog.jsx | 11 | ||||
| -rw-r--r-- | web/src/js/components/flowtable.jsx | 121 | ||||
| -rw-r--r-- | web/src/js/components/proxyapp.jsx | 2 | ||||
| -rw-r--r-- | web/src/js/components/traffictable.jsx | 34 |
4 files changed, 131 insertions, 37 deletions
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> - ); - } -}); |