web: raw content view

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);
     }
 };