diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/src/css/flowdetail.less | 3 | ||||
-rw-r--r-- | web/src/js/components/flowview/contentview.js | 43 | ||||
-rw-r--r-- | web/src/js/flow/utils.js | 13 |
3 files changed, 53 insertions, 6 deletions
diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less index 453cf425..9feb7245 100644 --- a/web/src/css/flowdetail.less +++ b/web/src/css/flowdetail.less @@ -5,7 +5,8 @@ .flow-detail { width: 100%; - overflow: auto; + overflow-x: auto; + overflow-y: scroll; nav { background-color: #F2F2F2; diff --git a/web/src/js/components/flowview/contentview.js b/web/src/js/components/flowview/contentview.js index 09a64bb2..30a40faa 100644 --- a/web/src/js/components/flowview/contentview.js +++ b/web/src/js/components/flowview/contentview.js @@ -12,23 +12,56 @@ var Image = React.createClass({ } }, render: function () { - var message_name = this.props.flow.request === this.props.message ? "request" : "response"; - var url = "/flows/" + this.props.flow.id + "/" + message_name + "/content"; + var url = MessageUtils.getContentURL(this.props.flow, this.props.message); return <div className="flowview-image"> <img src={url} alt="preview" className="img-thumbnail"/> </div>; } }); +var RawMixin = { + getInitialState: function () { + return { + content: undefined + } + }, + requestContent: function (nextProps) { + this.setState({content: undefined}); + var request = MessageUtils.getContent(nextProps.flow, nextProps.message); + request.done(function (data) { + this.setState({content: data}); + }.bind(this)).fail(function (jqXHR, textStatus, errorThrown) { + this.setState({content: "AJAX Error: " + textStatus}); + }.bind(this)); + + }, + componentWillMount: function () { + this.requestContent(this.props); + }, + componentWillReceiveProps: function (nextProps) { + if (nextProps.message !== this.props.message) { + this.requestContent(nextProps); + } + }, + render: function () { + if (!this.state.content) { + return <div className="text-center"> + <i className="fa fa-spinner fa-spin"></i> + </div>; + } + return this.renderContent(); + } +}; + var Raw = React.createClass({ + mixins: [RawMixin], statics: { matches: function (message) { return true; } }, - render: function () { - //FIXME - return <div>raw</div>; + renderContent: function () { + return <pre>{this.state.content}</pre>; } }); diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js index dd7f763b..a67db94f 100644 --- a/web/src/js/flow/utils.js +++ b/web/src/js/flow/utils.js @@ -1,4 +1,5 @@ var _ = require("lodash"); +var $ = require("jquery"); var MessageUtils = { getContentType: function (message) { @@ -34,6 +35,18 @@ var MessageUtils = { } } return false; + }, + getContentURL: function(flow, message){ + if(message === flow.request){ + message = "request"; + } else if (message === flow.response){ + message = "response"; + } + return "/flows/" + flow.id + "/" + message + "/content"; + }, + getContent: function(flow, message){ + var url = MessageUtils.getContentURL(flow, message); + return $.get(url); } }; |