Merge pull request #1441 from mitmproxy/integrate_mitmproxy_contentviews

Integrate mitmproxy contentviews

1 files changed, 58 insertions, 31 deletions

diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx
index a1adebea..cd593023 100644
--- a/web/src/js/components/ContentView/ContentViews.jsx
+++ b/web/src/js/components/ContentView/ContentViews.jsx
@@ -1,4 +1,6 @@
-import React, { PropTypes } from 'react'
+import React, { PropTypes, Component } from 'react'
+import { connect } from 'react-redux'
+import { setContentViewDescription, setContent } from '../../ducks/ui/flow'
 import ContentLoader from './ContentLoader'
 import { MessageUtils } from '../../flow/utils'
 import CodeEditor from './CodeEditor'
@@ -18,43 +20,68 @@ function ViewImage({ flow, message }) {
     )
 }
 
-
-ViewRaw.matches = () => true
-ViewRaw.propTypes = {
+Edit.propTypes = {
     content: React.PropTypes.string.isRequired,
 }
-function ViewRaw({ content, readonly, onChange }) {
-    return readonly ? <pre>{content}</pre> : <CodeEditor content={content} onChange={onChange}/>
+
+function Edit({ content, onChange }) {
+    return <CodeEditor content={content} onChange={onChange}/>
 }
-ViewRaw = ContentLoader(ViewRaw)
+Edit = ContentLoader(Edit)
 
+class ViewServer extends Component {
 
-const isJSON = /^application\/json$/i
-ViewJSON.matches = msg => isJSON.test(MessageUtils.getContentType(msg))
-ViewJSON.propTypes = {
-    content: React.PropTypes.string.isRequired,
-}
-function ViewJSON({ content }) {
-    let json = content
-    try {
-        json = JSON.stringify(JSON.parse(content), null, 2);
-    } catch (e) {
-        // @noop
+    componentWillMount(){
+        this.setContentView(this.props)
     }
-    return <pre>{json}</pre>
-}
-ViewJSON = ContentLoader(ViewJSON)
 
+    componentWillReceiveProps(nextProps){
+        if (nextProps.content != this.props.content) {
+            this.setContentView(nextProps)
+        }
+    }
+    setContentView(props){
+        try {
+            this.data = JSON.parse(props.content)
+        }catch(err) {
+            this.data = {lines: [], description: err.message}
+        }
+
+        props.setContentViewDescription(props.contentView != this.data.description ? this.data.description : '')
+        props.setContent(this.data.lines)
+    }
+    render() {
+        const {content, contentView, message, maxLines} = this.props
+        let lines = this.props.showFullContent ? this.data.lines : this.data.lines.slice(0, maxLines)
+        return <div>
+                <pre>
+                    {lines.map((line, i) =>
+                        <div key={`line${i}`}>
+                            {line.map((tuple, j) =>
+                                <span key={`tuple${j}`} className={tuple[0]}>
+                                    {tuple[1]}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </pre>
+            {ViewImage.matches(message) &&
+            <ViewImage {...this.props} />
+            }
+        </div>
+    }
 
-ViewAuto.matches = () => false
-ViewAuto.findView = msg => [ViewImage, ViewJSON, ViewRaw].find(v => v.matches(msg)) || ViewRaw
-ViewAuto.propTypes = {
-    message: React.PropTypes.object.isRequired,
-    flow: React.PropTypes.object.isRequired,
-}
-function ViewAuto({ message, flow, readonly, onChange }) {
-    const View = ViewAuto.findView(message)
-    return <View message={message} flow={flow} readonly={readonly} onChange={onChange}/>
 }
 
-export { ViewImage, ViewRaw, ViewAuto, ViewJSON }
+ViewServer = connect(
+    state => ({
+        showFullContent: state.ui.flow.showFullContent,
+        maxLines: state.ui.flow.maxContentLines
+    }),
+    {
+        setContentViewDescription,
+        setContent
+    }
+)(ContentLoader(ViewServer))
+
+export { Edit, ViewServer, ViewImage }