Merge pull request #2504 from MatthewShao/static-viewer

[WIP] [web] Static viewer for mitmweb

15 files changed, 90 insertions, 31 deletions

diff --git a/mitmproxy/tools/web/static/static.js b/mitmproxy/tools/web/static/static.js
new file mode 100644
index 00000000..4ffedbcf
--- /dev/null
+++ b/mitmproxy/tools/web/static/static.js
@@ -0,0 +1 @@
+MITMWEB_STATIC = false;
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index a42abf89..d9224530 100644
--- a/web/package.json
+++ b/web/package.json
@@ -28,11 +28,11 @@
     "lodash": "^4.17.4",
     "mock-xmlhttprequest": "^1.1.0",
     "prop-types": "^15.5.10",
-    "react": "^15.5.4",
+    "react": "16.0.0-beta.3",
     "react-codemirror": "^1.0.0",
-    "react-dom": "^15.4.2",
+    "react-dom": "16.0.0-beta.3",
     "react-redux": "^5.0.5",
-    "react-test-renderer": "^15.5.4",
+    "react-test-renderer": "16.0.0-beta.3",
     "redux": "^3.6.0",
     "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.2.3",
diff --git a/web/src/js/__tests__/components/Header/FlowMenuSpec.js b/web/src/js/__tests__/components/Header/FlowMenuSpec.js
index 1278d8ee..65fde213 100644
--- a/web/src/js/__tests__/components/Header/FlowMenuSpec.js
+++ b/web/src/js/__tests__/components/Header/FlowMenuSpec.js
@@ -7,7 +7,6 @@ import { TFlow, TStore }from '../../ducks/tutils'
 import { MessageUtils } from "../../../flow/utils"
 import { Provider } from 'react-redux'
 
-
 describe('FlowMenu Component', () => {
     let actions = {
         resumeFlow: jest.fn(),
diff --git a/web/src/js/__tests__/components/Header/OptionMenuSpec.js b/web/src/js/__tests__/components/Header/OptionMenuSpec.js
index b84fce6e..980285ef 100644
--- a/web/src/js/__tests__/components/Header/OptionMenuSpec.js
+++ b/web/src/js/__tests__/components/Header/OptionMenuSpec.js
@@ -4,7 +4,6 @@ import { Provider } from 'react-redux'
 import OptionMenu from '../../../components/Header/OptionMenu'
 import { TStore } from '../../ducks/tutils'
 
-
 describe('OptionMenu Component', () => {
     it('should render correctly', () => {
         let store = TStore(),
diff --git a/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap
index 15c1afbc..ef935914 100644
--- a/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap
+++ b/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap
@@ -72,17 +72,9 @@ exports[`FileMenu Component should render correctly 1`] = `
         />
          Options
       </a>
-       
-    </li>
-    <li>
-       
       <hr
         className="divider"
       />
-       
-    </li>
-    <li>
-       
       <a
         href="http://mitm.it/"
         target="_blank"
diff --git a/web/src/js/app.jsx b/web/src/js/app.jsx
index 76720124..ee660fd6 100644
--- a/web/src/js/app.jsx
+++ b/web/src/js/app.jsx
@@ -9,6 +9,7 @@ import rootReducer from './ducks/index'
 import { add as addLog } from './ducks/eventLog'
 import useUrlState from './urlState'
 import WebSocketBackend from './backends/websocket'
+import StaticBackend from './backends/static'
 import { logger } from 'redux-logger'
 
 
@@ -25,7 +26,11 @@ const store = createStore(
 )
 
 useUrlState(store)
-window.backend = new WebSocketBackend(store)
+if (MITMWEB_STATIC) {
+    window.backend = new StaticBackend(store)
+} else {
+    window.backend = new WebSocketBackend(store)
+}
 
 window.addEventListener('error', msg => {
     store.dispatch(addLog(msg))
diff --git a/web/src/js/backends/static.js b/web/src/js/backends/static.js
new file mode 100644
index 00000000..6657fecf
--- /dev/null
+++ b/web/src/js/backends/static.js
@@ -0,0 +1,33 @@
+/*
+ * This backend uses the REST API only to host static instances,
+ * without any Websocket connection.
+ */
+import { fetchApi } from "../utils"
+
+export default class StaticBackend {
+   constructor(store) {
+       this.store = store
+       this.onOpen()
+   }
+
+   onOpen() {
+        this.fetchData("settings")
+        this.fetchData("flows")
+        this.fetchData("events")
+        this.fetchData("options")
+   }
+
+   fetchData(resource) {
+       fetchApi(`/${resource}`)
+           .then(res => res.json())
+           .then(json => {
+               this.receive(resource, json)
+           })
+   }
+
+   receive(resource, data) {
+       let type = `${resource}_RECEIVE`.toUpperCase()
+       this.store.dispatch({ type, cmd: "receive", resource, data })
+   }
+
+}
diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx
index 08d15496..db9afe6f 100644
--- a/web/src/js/components/Footer.jsx
+++ b/web/src/js/components/Footer.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { formatSize } from '../utils.js'
+import HideInStatic from '../components/common/HideInStatic'
 
 Footer.propTypes = {
     settings: PropTypes.object.isRequired,
@@ -49,11 +50,14 @@ function Footer({ settings }) {
                 <span className="label label-success">stream: {formatSize(stream_large_bodies)}</span>
             )}
             <div className="pull-right">
-                {server && (
+                <HideInStatic>
+                {
+                    server && (
                     <span className="label label-primary" title="HTTP Proxy Server Address">
                         {listen_host||"*"}:{listen_port}
-                    </span>
-                )}
+                    </span>)
+                }
+                </HideInStatic>
             <span className="label label-info" title="Mitmproxy Version">
             v{version}
             </span>
diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx
index ebe7453c..9b7354eb 100644
--- a/web/src/js/components/Header.jsx
+++ b/web/src/js/components/Header.jsx
@@ -8,6 +8,7 @@ import FileMenu from './Header/FileMenu'
 import FlowMenu from './Header/FlowMenu'
 import {setActiveMenu} from '../ducks/ui/header'
 import ConnectionIndicator from "./Header/ConnectionIndicator"
+import HideInStatic from './common/HideInStatic'
 
 class Header extends Component {
     static entries = [MainMenu, OptionMenu]
@@ -40,7 +41,9 @@ class Header extends Component {
                             {Entry.title}
                         </a>
                     ))}
-                    <ConnectionIndicator/>
+                    <HideInStatic>
+                        <ConnectionIndicator/>
+                    </HideInStatic>
                 </nav>
                 <div>
                     <Active/>
diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index 62f721cf..5cb8e507 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -5,6 +5,7 @@ import FileChooser from '../common/FileChooser'
 import Dropdown, {Divider} from '../common/Dropdown'
 import * as flowsActions from '../../ducks/flows'
 import * as modalActions from '../../ducks/ui/modal'
+import HideInStatic from "../common/HideInStatic";
 
 FileMenu.propTypes = {
     clearFlows: PropTypes.func.isRequired,
@@ -36,17 +37,18 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openModal}) {
                 &nbsp;Save...
             </a>
 
+            <HideInStatic>
             <a href="#" onClick={e => { e.preventDefault(); openModal(); }}>
                 <i className="fa fa-fw fa-cog"></i>
                 &nbsp;Options
             </a>
-
             <Divider/>
 
             <a href="http://mitm.it/" target="_blank">
                 <i className="fa fa-fw fa-external-link"></i>
                 &nbsp;Install Certificates...
             </a>
+            </HideInStatic>
         </Dropdown>
     )
 }
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index 8f104213..70c8bfcf 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -4,6 +4,7 @@ import { connect } from "react-redux"
 import Button from "../common/Button"
 import { MessageUtils } from "../../flow/utils.js"
 import * as flowsActions from "../../ducks/flows"
+import HideInStatic from "../common/HideInStatic";
 
 FlowMenu.title = 'Flow'
 
@@ -22,6 +23,7 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
         return <div/>
     return (
         <div>
+            <HideInStatic>
             <div className="menu-group">
                 <div className="menu-content">
                     <Button title="[r]eplay flow" icon="fa-repeat text-primary"
@@ -43,6 +45,8 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
                 </div>
                 <div className="menu-legend">Flow Modification</div>
             </div>
+            </HideInStatic>
+
             <div className="menu-group">
                 <div className="menu-content">
                     <Button title="download" icon="fa-download"
@@ -52,6 +56,8 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
                 </div>
                 <div className="menu-legend">Export</div>
             </div>
+
+            <HideInStatic>
             <div className="menu-group">
                 <div className="menu-content">
                     <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow"
@@ -65,6 +71,7 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
                 </div>
                 <div className="menu-legend">Interception</div>
             </div>
+            </HideInStatic>
 
 
         </div>
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index b33d578d..c41c9d99 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -3,12 +3,14 @@ import PropTypes from 'prop-types'
 import { connect } from "react-redux"
 import { SettingsToggle, EventlogToggle } from "./MenuToggle"
 import DocsLink from "../common/DocsLink"
+import HideInStatic from "../common/HideInStatic";
 
 OptionMenu.title = 'Options'
 
 export default function OptionMenu() {
     return (
         <div>
+            <HideInStatic>
             <div className="menu-group">
                 <div className="menu-content">
                     <SettingsToggle setting="http2">HTTP/2.0</SettingsToggle>
@@ -17,6 +19,7 @@ export default function OptionMenu() {
                 </div>
                 <div className="menu-legend">Protocol Support</div>
             </div>
+
             <div className="menu-group">
                 <div className="menu-content">
                     <SettingsToggle setting="anticache">
@@ -29,12 +32,17 @@ export default function OptionMenu() {
                 </div>
                 <div className="menu-legend">HTTP Options</div>
             </div>
+            </HideInStatic>
+
             <div className="menu-group">
                 <div className="menu-content">
+                    <HideInStatic>
                     <SettingsToggle setting="showhost">
                         Use Host Header <i className="fa fa-question-circle"
                                            title="Use the Host header to construct URLs for display."></i>
                     </SettingsToggle>
+                    </HideInStatic>
+
                     <EventlogToggle/>
                 </div>
                 <div className="menu-legend">View Options</div>
diff --git a/web/src/js/components/common/HideInStatic.jsx b/web/src/js/components/common/HideInStatic.jsx
new file mode 100644
index 00000000..c5f3bf47
--- /dev/null
+++ b/web/src/js/components/common/HideInStatic.jsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function HideInStatic({ children }) {
+    return global.MITMWEB_STATIC ? null : [children]
+}
diff --git a/web/src/templates/index.html b/web/src/templates/index.html
index db9d2ecb..d2d01776 100644
--- a/web/src/templates/index.html
+++ b/web/src/templates/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/static/vendor.css"/>
     <link rel="stylesheet" href="/static/app.css"/>
     <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon"/>
+    <script src="/static/static.js"></script>
     <script src="/static/vendor.js"></script>
     <script src="/static/app.js"></script>
 </head>
diff --git a/web/yarn.lock b/web/yarn.lock
index f841e38b..6efd8885 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -4309,7 +4309,7 @@ promise@^7.1.1:
   dependencies:

     asap "~2.0.3"

 

-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@~15.5.7:

+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6:

   version "15.5.10"

   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"

   dependencies:

@@ -4404,14 +4404,14 @@ react-codemirror@^1.0.0:
     lodash.isequal "^4.5.0"

     prop-types "^15.5.4"

 

-react-dom@^15.4.2:

-  version "15.5.4"

-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"

+react-dom@16.0.0-beta.3:

+  version "16.0.0-beta.3"

+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0-beta.3.tgz#6b662e8db127d14565b98799c13532044c7768b9"

   dependencies:

     fbjs "^0.8.9"

     loose-envify "^1.1.0"

     object-assign "^4.1.0"

-    prop-types "~15.5.7"

+    prop-types "^15.5.6"

 

 react-redux@^5.0.5:

   version "5.0.5"

@@ -4425,21 +4425,21 @@ react-redux@^5.0.5:
     loose-envify "^1.1.0"

     prop-types "^15.5.10"

 

-react-test-renderer@^15.5.4:

-  version "15.5.4"

-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.5.4.tgz#d4ebb23f613d685ea8f5390109c2d20fbf7c83bc"

+react-test-renderer@16.0.0-beta.3:

+  version "16.0.0-beta.3"

+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0-beta.3.tgz#334a97818c0fd841bb377da34bc2e5a0284772fb"

   dependencies:

     fbjs "^0.8.9"

     object-assign "^4.1.0"

 

-react@^15.5.4:

-  version "15.5.4"

-  resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"

+react@16.0.0-beta.3:

+  version "16.0.0-beta.3"

+  resolved "https://registry.yarnpkg.com/react/-/react-16.0.0-beta.3.tgz#f3974ce09dfef8e7debaba87c063a35aa09878a4"

   dependencies:

     fbjs "^0.8.9"

     loose-envify "^1.1.0"

     object-assign "^4.1.0"

-    prop-types "^15.5.7"

+    prop-types "^15.5.6"

 

 read-only-stream@^2.0.0:

   version "2.0.0"