From d854e08653ccee12119266e2cc3f5d6c279341e5 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 11 Dec 2016 22:52:17 +0100
Subject: [web] various fixes

---
 .../ContentView/ShowFullContentButton.jsx          |  4 +++-
 web/src/js/components/FlowTable/FlowColumns.jsx    | 12 +++++++++-
 web/src/js/components/Header.jsx                   |  4 +++-
 web/src/js/components/Header/FileMenu.jsx          |  8 +++----
 web/src/js/components/Header/FlowMenu.jsx          | 27 +++++++++++++---------
 web/src/js/components/Header/MenuToggle.jsx        |  2 +-
 web/src/js/components/common/Button.jsx            |  2 +-
 7 files changed, 39 insertions(+), 20 deletions(-)

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/ContentView/ShowFullContentButton.jsx b/web/src/js/components/ContentView/ShowFullContentButton.jsx
index cfd96dd8..fd68991e 100644
--- a/web/src/js/components/ContentView/ShowFullContentButton.jsx
+++ b/web/src/js/components/ContentView/ShowFullContentButton.jsx
@@ -16,7 +16,9 @@ function ShowFullContentButton ( {setShowFullContent, showFullContent, visibleLi
     return (
         !showFullContent &&
             <div>
-                <Button className="view-all-content-btn btn-xs" onClick={() => setShowFullContent()} text="Show full content"/>
+                <Button className="view-all-content-btn btn-xs" onClick={() => setShowFullContent()}>
+                    Show full content
+                </Button>
                 <span className="pull-right"> {visibleLines}/{contentLines} are visible &nbsp; </span>
             </div>
     )
diff --git a/web/src/js/components/FlowTable/FlowColumns.jsx b/web/src/js/components/FlowTable/FlowColumns.jsx
index 0ff80453..02a4fba1 100644
--- a/web/src/js/components/FlowTable/FlowColumns.jsx
+++ b/web/src/js/components/FlowTable/FlowColumns.jsx
@@ -54,6 +54,15 @@ IconColumn.getIcon = flow => {
 }
 
 export function PathColumn({ flow }) {
+
+    let err;
+    if(flow.error){
+        if (flow.error.msg === "Connection killed"){
+            err = <i className="fa fa-fw fa-times pull-right"></i>
+        } else {
+            err = <i className="fa fa-fw fa-exclamation pull-right"></i>
+        }
+    }
     return (
         <td className="col-path">
             {flow.request.is_replay && (
@@ -62,6 +71,7 @@ export function PathColumn({ flow }) {
             {flow.intercepted && (
                 <i className="fa fa-fw fa-pause pull-right"></i>
             )}
+            {err}
             {RequestUtils.pretty_url(flow.request)}
         </td>
     )
@@ -109,7 +119,7 @@ export function TimeColumn({ flow }) {
     return (
         <td className="col-time">
             {flow.response ? (
-                formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start))
+                formatTimeDelta(1000 * (flow.response.timestamp_end - flow.server_conn.timestamp_start))
             ) : (
                 '...'
             )}
diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx
index 1500db1b..c15c951f 100644
--- a/web/src/js/components/Header.jsx
+++ b/web/src/js/components/Header.jsx
@@ -22,7 +22,9 @@ class Header extends Component {
         if(selectedFlowId)
             entries.push(FlowMenu)
 
-        const Active = _.find(entries, (e) => e.title == activeMenu)
+        // Make sure to have a fallback in case FlowMenu is selected but we don't have any flows
+        // (e.g. because they are all deleted or not yet received)
+        const Active = _.find(entries, (e) => e.title == activeMenu) || MainMenu
 
         return (
             <header>
diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index 53c63ea1..ec32c857 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -21,23 +21,23 @@ function FileMenu ({clearFlows, loadFlows, saveFlows}) {
         <Dropdown className="pull-left" btnClass="special" text="mitmproxy">
             <a href="#" onClick={e => FileMenu.onNewClick(e, clearFlows)}>
                 <i className="fa fa-fw fa-file"></i>
-                New
+                &nbsp;New
             </a>
             <FileChooser
                 icon="fa-folder-open"
-                text="Open..."
+                text="&nbsp;Open..."
                 onOpenFile={file => loadFlows(file)}
             />
             <a href="#" onClick={e =>{ e.preventDefault(); saveFlows();}}>
                 <i className="fa fa-fw fa-floppy-o"></i>
-                Save...
+                &nbsp;Save...
             </a>
 
             <Divider/>
 
             <a href="http://mitm.it/" target="_blank">
                 <i className="fa fa-fw fa-external-link"></i>
-                Install Certificates...
+                &nbsp;Install Certificates...
             </a>
         </Dropdown>
     )
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index 420cb054..a404fdb7 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -8,21 +8,23 @@ FlowMenu.title = 'Flow'
 
 FlowMenu.propTypes = {
     flow: PropTypes.object,
-    acceptFlow: PropTypes.func.isRequired,
+    resumeFlow: PropTypes.func.isRequired,
+    killFlow: PropTypes.func.isRequired,
     replayFlow: PropTypes.func.isRequired,
     duplicateFlow: PropTypes.func.isRequired,
     removeFlow: PropTypes.func.isRequired,
     revertFlow: PropTypes.func.isRequired
 }
 
-function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
+function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
     if (!flow)
         return <div/>
     return (
         <div>
             <div className="menu-group">
                 <div className="menu-content">
-                    <Button title="[r]eplay flow" icon="fa-repeat text-primary" onClick={() => replayFlow(flow)}>
+                    <Button title="[r]eplay flow" icon="fa-repeat text-primary"
+                            onClick={() => replayFlow(flow)}>
                         Replay
                     </Button>
                     <Button title="[D]uplicate flow" icon="fa-copy text-info"
@@ -33,7 +35,8 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev
                             icon="fa-history text-warning" onClick={() => revertFlow(flow)}>
                         Revert
                     </Button>
-                    <Button title="[d]elete flow" icon="fa-trash text-danger" onClick={() => removeFlow(flow)}>
+                    <Button title="[d]elete flow" icon="fa-trash text-danger"
+                            onClick={() => removeFlow(flow)}>
                         Delete
                     </Button>
                 </div>
@@ -51,17 +54,18 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev
             <div className="menu-group">
                 <div className="menu-content">
                     <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow"
-                    icon="fa-play text-success" onClick={() => acceptFlow(flow)}
-                    >
-                Resume
-            </Button>
-
+                            icon="fa-play text-success" onClick={() => resumeFlow(flow)}>
+                        Resume
+                    </Button>
+                    <Button disabled={!flow || !flow.intercepted} title="kill intercepted flow [x]"
+                            icon="fa-times text-danger" onClick={() => killFlow(flow)}>
+                        Abort
+                    </Button>
                 </div>
                 <div className="menu-legend">Interception</div>
             </div>
 
 
-
         </div>
     )
 }
@@ -71,7 +75,8 @@ export default connect(
         flow: state.flows.byId[state.flows.selected[0]],
     }),
     {
-        acceptFlow: flowsActions.accept,
+        resumeFlow: flowsActions.resume,
+        killFlow: flowsActions.kill,
         replayFlow: flowsActions.replay,
         duplicateFlow: flowsActions.duplicate,
         removeFlow: flowsActions.remove,
diff --git a/web/src/js/components/Header/MenuToggle.jsx b/web/src/js/components/Header/MenuToggle.jsx
index 8977f3b9..91f093c6 100644
--- a/web/src/js/components/Header/MenuToggle.jsx
+++ b/web/src/js/components/Header/MenuToggle.jsx
@@ -14,7 +14,7 @@ export function MenuToggle({ value, onChange, children }) {
         <div className="menu-entry">
             <label>
                 <input type="checkbox"
-                       value={value}
+                       checked={value}
                        onChange={onChange}/>
                 {children}
             </label>
diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx
index 69471f25..f05a68d0 100644
--- a/web/src/js/components/common/Button.jsx
+++ b/web/src/js/components/common/Button.jsx
@@ -11,7 +11,7 @@ Button.propTypes = {
 export default function Button({ onClick, children, icon, disabled, className, title }) {
     return (
         <div className={classnames(className, 'btn btn-default')}
-             onClick={onClick}
+             onClick={!disabled && onClick}
              disabled={disabled}
              title={title}>
             {icon && (<i className={"fa fa-fw " + icon}/> )}
-- 
cgit v1.2.3