diff options
Diffstat (limited to 'web/src/js')
| -rw-r--r-- | web/src/js/actions.js | 7 | ||||
| -rw-r--r-- | web/src/js/components/eventlog.jsx.js | 102 | ||||
| -rw-r--r-- | web/src/js/components/flowdetail.jsx.js | 2 | ||||
| -rw-r--r-- | web/src/js/components/mainview.jsx.js | 1 | ||||
| -rw-r--r-- | web/src/js/connection.js | 6 | ||||
| -rw-r--r-- | web/src/js/stores/eventlogstore.js | 4 |
6 files changed, 100 insertions, 22 deletions
diff --git a/web/src/js/actions.js b/web/src/js/actions.js index 43fbfb14..9211403f 100644 --- a/web/src/js/actions.js +++ b/web/src/js/actions.js @@ -23,14 +23,15 @@ var SettingsActions = { } }; +var event_id = 0; var EventLogActions = { - add_event: function(message, level){ + add_event: function(message){ AppDispatcher.dispatchViewAction({ type: ActionTypes.ADD_EVENT, data: { message: message, - level: level || "info", - source: "ui" + level: "web", + id: "viewAction-"+event_id++ } }); } diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js index df212177..08a6dfb4 100644 --- a/web/src/js/components/eventlog.jsx.js +++ b/web/src/js/components/eventlog.jsx.js @@ -1,6 +1,31 @@ /** @jsx React.DOM */ -var EventLog = React.createClass({ +var LogMessage = React.createClass({ + render: function(){ + var entry = this.props.entry; + var indicator; + switch(entry.level){ + case "web": + indicator = <i className="fa fa-fw fa-html5"></i>; + break; + case "debug": + indicator = <i className="fa fa-fw fa-bug"></i>; + break; + default: + indicator = <i className="fa fa-fw fa-info"></i>; + } + return ( + <div> + { indicator } {entry.message} + </div> + ); + }, + shouldComponentUpdate: function(){ + return false; // log entries are immutable. + } +}); + +var EventLogContents = React.createClass({ mixins:[AutoScrollMixin], getInitialState: function () { return { @@ -20,22 +45,75 @@ var EventLog = React.createClass({ log: this.log.getAll() }); }, + render: function () { + var messages = this.state.log.map(function(row) { + if(!this.props.filter[row.level]){ + return null; + } + return <LogMessage key={row.id} entry={row}/>; + }.bind(this)); + return <pre>{messages}</pre>; + } +}); + +var ToggleFilter = React.createClass({ + toggle: function(){ + return this.props.toggleLevel(this.props.name); + }, + render: function(){ + var className = "label "; + if (this.props.active) { + className += "label-primary"; + } else { + className += "label-default"; + } + return ( + <a + href="#" + className={className} + onClick={this.toggle}> + {this.props.name} + </a> + ); + } +}); + +var EventLog = React.createClass({ + getInitialState: function(){ + return { + filter: { + "debug": false, + "info": true, + "web": true + } + }; + }, close: function () { SettingsActions.update({ showEventLog: false }); }, + toggleLevel: function(level){ + var filter = this.state.filter; + filter[level] = !filter[level]; + this.setState({filter: filter}); + return false; + }, render: function () { - var messages = this.state.log.map(function(row) { - 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>; + return ( + <div className="eventlog"> + <div> + Eventlog + <div className="pull-right"> + <ToggleFilter name="debug" active={this.state.filter.debug} toggleLevel={this.toggleLevel}/> + <ToggleFilter name="info" active={this.state.filter.info} toggleLevel={this.toggleLevel}/> + <ToggleFilter name="web" active={this.state.filter.web} toggleLevel={this.toggleLevel}/> + <i onClick={this.close} className="fa fa-close"></i> + </div> + + </div> + <EventLogContents filter={this.state.filter}/> + </div> + ); } });
\ No newline at end of file diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js index ad1cfe67..3ba025a9 100644 --- a/web/src/js/components/flowdetail.jsx.js +++ b/web/src/js/components/flowdetail.jsx.js @@ -231,7 +231,7 @@ var Timing = React.createClass({ return ( <div> <h4>Timing</h4> - <table> + <table className="timing-table"> <tbody> {rows} </tbody> diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index d521635a..795b8136 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -7,7 +7,6 @@ var MainView = React.createClass({ }; }, componentDidMount: function () { - console.log("get view"); this.flowStore = FlowStore.getView(); this.flowStore.addListener("change",this.onFlowChange); }, diff --git a/web/src/js/connection.js b/web/src/js/connection.js index 640e9742..3edbfc20 100644 --- a/web/src/js/connection.js +++ b/web/src/js/connection.js @@ -14,7 +14,7 @@ _Connection.prototype.openWebSocketConnection = function () { ws.onclose = this.onclose.bind(this); }; _Connection.prototype.onopen = function (open) { - console.log("onopen", this, arguments); + console.debug("onopen", this, arguments); }; _Connection.prototype.onmessage = function (message) { //AppDispatcher.dispatchServerAction(...); @@ -23,11 +23,11 @@ _Connection.prototype.onmessage = function (message) { }; _Connection.prototype.onerror = function (error) { EventLogActions.add_event("WebSocket Connection Error."); - console.log("onerror", this, arguments); + console.debug("onerror", this, arguments); }; _Connection.prototype.onclose = function (close) { EventLogActions.add_event("WebSocket Connection closed."); - console.log("onclose", this, arguments); + console.debug("onclose", this, arguments); }; var Connection = new _Connection(location.origin + "/updates"); diff --git a/web/src/js/stores/eventlogstore.js b/web/src/js/stores/eventlogstore.js index dc6dbbbf..e356959a 100644 --- a/web/src/js/stores/eventlogstore.js +++ b/web/src/js/stores/eventlogstore.js @@ -26,7 +26,7 @@ _.extend(EventLogView.prototype, EventEmitter.prototype, { }, add: function (entry) { this.log.push(entry); - if(this.log.length > 50){ + if(this.log.length > 200){ this.log.shift(); } this.emit("change"); @@ -96,4 +96,4 @@ _.extend(_EventLogStore.prototype, EventEmitter.prototype, { var EventLogStore = new _EventLogStore(); -AppDispatcher.register(EventLogStore.handle.bind(EventLogStore)); +AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
\ No newline at end of file |