diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/src/css/eventlog.less | 45 | ||||
-rw-r--r-- | web/src/css/flowdetail.less | 14 | ||||
-rw-r--r-- | web/src/css/layout.less | 2 | ||||
-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 |
9 files changed, 153 insertions, 30 deletions
diff --git a/web/src/css/eventlog.less b/web/src/css/eventlog.less index 993304cf..8b0a7647 100644 --- a/web/src/css/eventlog.less +++ b/web/src/css/eventlog.less @@ -1,10 +1,45 @@ .eventlog { + height: 200px; flex: 0 0 auto; - margin: 0; - border-radius: 0; - height: 200px; - overflow: auto; - overflow-y: scroll; + display: flex; + flex-direction: column; + + + > div { + background-color: #F2F2F2; + padding: 0 5px; + flex: 0 0 auto; + } + + > pre { + flex: 1 1 auto; + + margin: 0; + border-radius: 0; + overflow-x: auto; + overflow-y: scroll; + background-color: #fcfcfc; + } + + + .fa-close { + cursor: pointer; + float: right; + color: grey; + padding: 3px 0; + padding-left: 10px; + &:hover { + color: black; + } + } + + .label { + cursor: pointer; + vertical-align: middle; + display: inline-block; + margin-top: -2px; + margin-left: 3px; + } }
\ No newline at end of file diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less index 94920caa..3a6191d4 100644 --- a/web/src/css/flowdetail.less +++ b/web/src/css/flowdetail.less @@ -35,9 +35,9 @@ word-break: break-all; tr { - //&:not(:first-child){ + &:not(:first-child){ border-top: 1px solid #f7f7f7; - //} + } } td { @@ -51,7 +51,7 @@ .connection-table { td:first-child { - width: 33%; + width: 50%; padding-right: 1em; } } @@ -64,4 +64,12 @@ .header-value { } +} + +.connection-table, .timing-table { + td { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } }
\ No newline at end of file diff --git a/web/src/css/layout.less b/web/src/css/layout.less index 510fde6a..f6807f24 100644 --- a/web/src/css/layout.less +++ b/web/src/css/layout.less @@ -19,6 +19,8 @@ html, body, #container { display: flex; flex-direction: row; + outline: 0; + &.vertical { flex-direction: column; } 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 |