From e400e9f51322e4a85ab81c9c4a3e65b1d7b02b77 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Sat, 25 Jun 2016 09:52:49 +0800
Subject: [web] ErrorView

---
 mitmproxy/web/static/app.js                 |  4 ++--
 web/src/js/components/FlowView.jsx          |  2 +-
 web/src/js/components/FlowView/Messages.jsx | 17 +++++++++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/mitmproxy/web/static/app.js b/mitmproxy/web/static/app.js
index f0033098..cbe04b34 100644
--- a/mitmproxy/web/static/app.js
+++ b/mitmproxy/web/static/app.js
@@ -38,7 +38,7 @@
 "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function FlowTableHead(e){var r=e.sortColumn,t=e.sortDesc,a=e.onSort,s=t?"sort-desc":"sort-asc";return _react2["default"].createElement("tr",null,_FlowColumns2["default"].map(function(e){return _react2["default"].createElement("th",{className:(0,_classnames2["default"])(e.headerClass,r===e.name&&s),key:e.name,onClick:function(){return a(e.name,e.name!==r?!1:!t)}},e.headerName)}))}Object.defineProperty(exports,"__esModule",{value:!0});var _react=require("react"),_react2=_interopRequireDefault(_react),_reactRedux=require("react-redux"),_classnames=require("classnames"),_classnames2=_interopRequireDefault(_classnames),_FlowColumns=require("./FlowColumns"),_FlowColumns2=_interopRequireDefault(_FlowColumns),_main=require("../../ducks/views/main");FlowTableHead.propTypes={onSort:_react.PropTypes.func.isRequired,sortDesc:_react2["default"].PropTypes.bool.isRequired,sortColumn:_react2["default"].PropTypes.string},exports["default"]=(0,_reactRedux.connect)(function(e){return{sortDesc:e.flows.views.main.sorter.desc,sortColumn:e.flows.views.main.sorter.column}},{onSort:_main.updateSorter})(FlowTableHead);
 
 },{"../../ducks/views/main":51,"./FlowColumns":11,"classnames":"classnames","react":"react","react-redux":"react-redux"}],14:[function(require,module,exports){
-"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_Nav=require("./FlowView/Nav"),_Nav2=_interopRequireDefault(_Nav),_Messages=require("./FlowView/Messages"),_Details=require("./FlowView/Details"),_Details2=_interopRequireDefault(_Details),_Prompt=require("./Prompt"),_Prompt2=_interopRequireDefault(_Prompt),FlowView=function(e){function t(e,r){_classCallCheck(this,t);var o=_possibleConstructorReturn(this,Object.getPrototypeOf(t).call(this,e,r));return o.state={prompt:!1},o.closePrompt=o.closePrompt.bind(o),o.selectTab=o.selectTab.bind(o),o}return _inherits(t,e),_createClass(t,[{key:"getTabs",value:function(){var e=this;return["request","response","error"].filter(function(t){return e.props.flow[t]}).concat(["details"])}},{key:"nextTab",value:function(e){var t=this.getTabs();this.selectTab(t[(t.indexOf(this.props.tab)+e+t.length)%t.length])}},{key:"selectTab",value:function(e){this.props.updateLocation("/flows/"+this.props.flow.id+"/"+e)}},{key:"closePrompt",value:function(e){this.setState({prompt:!1}),e&&this.refs.tab.edit(e)}},{key:"promptEdit",value:function(){var e=void 0;switch(this.props.tab){case"request":e=["method","url",{text:"http version",key:"v"},"header"];break;case"response":e=[{text:"http version",key:"v"},"code","message","header"];break;case"details":return;default:throw"Unknown tab for edit: "+this.props.tab}this.setState({prompt:{options:e,done:this.closePrompt}})}},{key:"render",value:function(){var e=this.getTabs(),r=this.props,o=r.flow,a=r.tab,s=r.onUpdate;e.indexOf(a)<0&&(a="response"===a&&o.error?"error":"error"===a&&o.response?"response":e[0]);var n=t.allTabs[_lodash2["default"].capitalize(a)];return _react2["default"].createElement("div",{className:"flow-detail",onScroll:this.adjustHead},_react2["default"].createElement(_Nav2["default"],{flow:o,tabs:e,active:a,onSelectTab:this.selectTab}),_react2["default"].createElement(n,{ref:"tab",flow:o,onUpdate:s}),this.state.prompt&&_react2["default"].createElement(_Prompt2["default"],this.state.prompt))}}]),t}(_react.Component);FlowView.allTabs={Request:_Messages.Request,Response:_Messages.Response,Error:_Messages.Error,Details:_Details2["default"]},exports["default"]=FlowView;
+"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_Nav=require("./FlowView/Nav"),_Nav2=_interopRequireDefault(_Nav),_Messages=require("./FlowView/Messages"),_Details=require("./FlowView/Details"),_Details2=_interopRequireDefault(_Details),_Prompt=require("./Prompt"),_Prompt2=_interopRequireDefault(_Prompt),FlowView=function(e){function t(e,r){_classCallCheck(this,t);var o=_possibleConstructorReturn(this,Object.getPrototypeOf(t).call(this,e,r));return o.state={prompt:!1},o.closePrompt=o.closePrompt.bind(o),o.selectTab=o.selectTab.bind(o),o}return _inherits(t,e),_createClass(t,[{key:"getTabs",value:function(){var e=this;return["request","response","error"].filter(function(t){return e.props.flow[t]}).concat(["details"])}},{key:"nextTab",value:function(e){var t=this.getTabs();this.selectTab(t[(t.indexOf(this.props.tab)+e+t.length)%t.length])}},{key:"selectTab",value:function(e){this.props.updateLocation("/flows/"+this.props.flow.id+"/"+e)}},{key:"closePrompt",value:function(e){this.setState({prompt:!1}),e&&this.refs.tab.edit(e)}},{key:"promptEdit",value:function(){var e=void 0;switch(this.props.tab){case"request":e=["method","url",{text:"http version",key:"v"},"header"];break;case"response":e=[{text:"http version",key:"v"},"code","message","header"];break;case"details":return;default:throw"Unknown tab for edit: "+this.props.tab}this.setState({prompt:{options:e,done:this.closePrompt}})}},{key:"render",value:function(){var e=this.getTabs(),r=this.props,o=r.flow,a=r.tab,s=r.onUpdate;e.indexOf(a)<0&&(a="response"===a&&o.error?"error":"error"===a&&o.response?"response":e[0]);var n=t.allTabs[_lodash2["default"].capitalize(a)];return _react2["default"].createElement("div",{className:"flow-detail",onScroll:this.adjustHead},_react2["default"].createElement(_Nav2["default"],{flow:o,tabs:e,active:a,onSelectTab:this.selectTab}),_react2["default"].createElement(n,{ref:"tab",flow:o,onUpdate:s}),this.state.prompt&&_react2["default"].createElement(_Prompt2["default"],this.state.prompt))}}]),t}(_react.Component);FlowView.allTabs={Request:_Messages.Request,Response:_Messages.Response,Error:_Messages.ErrorView,Details:_Details2["default"]},exports["default"]=FlowView;
 
 },{"./FlowView/Details":15,"./FlowView/Messages":17,"./FlowView/Nav":18,"./Prompt":29,"lodash":"lodash","react":"react"}],15:[function(require,module,exports){
 "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function TimeStamp(e){var t=e.t,a=e.deltaTo,r=e.title;return t?_react2["default"].createElement("tr",null,_react2["default"].createElement("td",null,r,":"),_react2["default"].createElement("td",null,(0,_utils.formatTimeStamp)(t),a&&_react2["default"].createElement("span",{className:"text-muted"},"(",(0,_utils.formatTimeDelta)(1e3*(t-a)),")"))):_react2["default"].createElement("tr",null)}function ConnectionInfo(e){var t=e.conn;return _react2["default"].createElement("table",{className:"connection-table"},_react2["default"].createElement("tbody",null,_react2["default"].createElement("tr",{key:"address"},_react2["default"].createElement("td",null,"Address:"),_react2["default"].createElement("td",null,t.address.address.join(":"))),t.sni?_react2["default"].createElement("tr",{key:"sni"}):_react2["default"].createElement("tr",{key:"sni"},_react2["default"].createElement("td",null,_react2["default"].createElement("abbr",{title:"TLS Server Name Indication"},"TLS SNI:")),_react2["default"].createElement("td",null,t.sni))))}function CertificateInfo(e){var t=e.flow;return _react2["default"].createElement("div",null,t.client_conn.cert&&[_react2["default"].createElement("h4",{key:"name"},"Client Certificate"),_react2["default"].createElement("pre",{key:"value",style:{maxHeight:100}},t.client_conn.cert)],t.server_conn.cert&&[_react2["default"].createElement("h4",{key:"name"},"Server Certificate"),_react2["default"].createElement("pre",{key:"value",style:{maxHeight:100}},t.server_conn.cert)])}function Timing(e){var t=e.flow,a=t.server_conn,r=t.client_conn,n=t.request,l=t.response,c=[{title:"Server conn. initiated",t:a.timestamp_start,deltaTo:n.timestamp_start},{title:"Server conn. TCP handshake",t:a.timestamp_tcp_setup,deltaTo:n.timestamp_start},{title:"Server conn. SSL handshake",t:a.timestamp_ssl_setup,deltaTo:n.timestamp_start},{title:"Client conn. established",t:r.timestamp_start,deltaTo:n.timestamp_start},{title:"Client conn. SSL handshake",t:r.timestamp_ssl_setup,deltaTo:n.timestamp_start},{title:"First request byte",t:n.timestamp_start},{title:"Request complete",t:n.timestamp_end,deltaTo:n.timestamp_start},l&&{title:"First response byte",t:l.timestamp_start,deltaTo:n.timestamp_start},l&&{title:"Response complete",t:l.timestamp_end,deltaTo:n.timestamp_start}];return _react2["default"].createElement("div",null,_react2["default"].createElement("h4",null,"Timing"),_react2["default"].createElement("table",{className:"timing-table"},_react2["default"].createElement("tbody",null,c.filter(function(e){return e}).sort(function(e,t){return e.t-t.t}).map(function(e){return _react2["default"].createElement(TimeStamp,_extends({key:e.title},e))}))))}function Details(e){var t=e.flow;return _react2["default"].createElement("section",null,_react2["default"].createElement("h4",null,"Client Connection"),_react2["default"].createElement(ConnectionInfo,{conn:t.client_conn}),_react2["default"].createElement("h4",null,"Server Connection"),_react2["default"].createElement(ConnectionInfo,{conn:t.server_conn}),_react2["default"].createElement(CertificateInfo,{flow:t}),_react2["default"].createElement(Timing,{flow:t}))}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e};exports.TimeStamp=TimeStamp,exports.ConnectionInfo=ConnectionInfo,exports.CertificateInfo=CertificateInfo,exports.Timing=Timing,exports["default"]=Details;var _react=require("react"),_react2=_interopRequireDefault(_react),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_utils=require("../../utils.js");
@@ -47,7 +47,7 @@
 "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_reactDom=require("react-dom"),_reactDom2=_interopRequireDefault(_reactDom),_ValueEditor=require("../ValueEditor"),_ValueEditor2=_interopRequireDefault(_ValueEditor),_utils=require("../../utils.js"),HeaderEditor=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){return _react2["default"].createElement(_ValueEditor2["default"],_extends({ref:"input"},this.props,{onKeyDown:this.onKeyDown,inline:!0}))}},{key:"focus",value:function(){_reactDom2["default"].findDOMNode(this).focus()}},{key:"onKeyDown",value:function(e){switch(e.keyCode){case _utils.Key.BACKSPACE:var t=window.getSelection().getRangeAt(0);0===t.startOffset&&0===t.endOffset&&this.props.onRemove(e);break;case _utils.Key.TAB:e.shiftKey||this.props.onTab(e)}}}]),t}(_react.Component),Headers=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return _inherits(t,e),_createClass(t,[{key:"onChange",value:function(e,t,r){var n=_.cloneDeep(this.props.message.headers);n[e][t]=r,n[e][0]||n[e][1]||(1===n.length?(n[0][0]="Name",n[0][1]="Value"):(n.splice(e,1),e===n.length&&(this._nextSel=e-1+"-value"))),this.props.onChange(n)}},{key:"edit",value:function(){this.refs["0-key"].focus()}},{key:"onTab",value:function(e,t,r){var n=this.props.message.headers;if(e===n.length-1&&1===t){r.preventDefault();var o=_.cloneDeep(this.props.message.headers);o.push(["Name","Value"]),this.props.onChange(o),this._nextSel=e+1+"-key"}}},{key:"componentDidUpdate",value:function(){this._nextSel&&this.refs[this._nextSel]&&(this.refs[this._nextSel].focus(),this._nextSel=void 0)}},{key:"onRemove",value:function(e,t,r){1===t?(r.preventDefault(),this.refs[e+"-key"].focus()):e>0&&(r.preventDefault(),this.refs[e-1+"-value"].focus())}},{key:"render",value:function(){var e=this,t=this.props.message;return _react2["default"].createElement("table",{className:"header-table"},_react2["default"].createElement("tbody",null,t.headers.map(function(t,r){return _react2["default"].createElement("tr",{key:r},_react2["default"].createElement("td",{className:"header-name"},_react2["default"].createElement(HeaderEditor,{ref:r+"-key",content:t[0],onDone:function(t){return e.onChange(r,0,t)},onRemove:function(t){return e.onRemove(r,0,t)},onTab:function(t){return e.onTab(r,0,t)}}),":"),_react2["default"].createElement("td",{className:"header-value"},_react2["default"].createElement(HeaderEditor,{ref:r+"-value",content:t[1],onDone:function(t){return e.onChange(r,1,t)},onRemove:function(t){return e.onRemove(r,1,t)},onTab:function(t){return e.onTab(r,1,t)}})))})))}}]),t}(_react.Component);Headers.propTypes={onChange:_react.PropTypes.func.isRequired,message:_react.PropTypes.object.isRequired},exports["default"]=Headers;
 
 },{"../../utils.js":55,"../ValueEditor":31,"react":"react","react-dom":"react-dom"}],17:[function(require,module,exports){
-"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.Response=exports.Request=void 0;var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_utils=require("../../flow/utils.js"),_utils2=require("../../utils.js"),_ContentView=require("../ContentView"),_ContentView2=_interopRequireDefault(_ContentView),_ValueEditor=require("../ValueEditor"),_ValueEditor2=_interopRequireDefault(_ValueEditor),_Headers=require("./Headers"),_Headers2=_interopRequireDefault(_Headers),RequestLine=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){var e=this.props,t=e.flow,r=e.onUpdate;return _react2["default"].createElement("div",{className:"first-line request-line"},_react2["default"].createElement(_ValueEditor2["default"],{ref:"method",content:t.request.method,onDone:function(e){return r({request:{method:e}})},inline:!0})," ",_react2["default"].createElement(_ValueEditor2["default"],{ref:"url",content:_utils.RequestUtils.pretty_url(t.request),onDone:function(e){return r({request:Object.assign({path:""},(0,_utils.parseUrl)(e))})},isValid:function(e){return!!(0,_utils.parseUrl)(e).host},inline:!0})," ",_react2["default"].createElement(_ValueEditor2["default"],{ref:"httpVersion",content:t.request.http_version,onDone:function(e){return r({request:{http_version:(0,_utils.parseHttpVersion)(e)}})},isValid:_utils.isValidHttpVersion,inline:!0}))}}]),t}(_react.Component),ResponseLine=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){var e=this.props,t=e.flow,r=e.onUpdate;return _react2["default"].createElement("div",{className:"first-line response-line"},_react2["default"].createElement(_ValueEditor2["default"],{ref:"httpVersion",content:t.response.http_version,onDone:function(e){return r({response:{http_version:(0,_utils.parseHttpVersion)(e)}})},isValid:_utils.isValidHttpVersion,inline:!0})," ",_react2["default"].createElement(_ValueEditor2["default"],{ref:"code",content:t.response.status_code+"",onDone:function(e){return r({response:{code:parseInt(e)}})},isValid:function(e){return/^\d+$/.test(e)},inline:!0})," ",_react2["default"].createElement(_ValueEditor2["default"],{ref:"msg",content:t.response.reason,onDone:function(e){return r({response:{msg:e}})},inline:!0}))}}]),t}(_react.Component),Request=exports.Request=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){var e=this.props,t=e.flow,r=e.onUpdate;return _react2["default"].createElement("section",{className:"request"},_react2["default"].createElement(RequestLine,{ref:"requestLine",flow:t,onUpdate:r}),_react2["default"].createElement(_Headers2["default"],{ref:"headers",message:t.request,onChange:function(e){return r({request:{headers:e}})}}),_react2["default"].createElement("hr",null),_react2["default"].createElement(_ContentView2["default"],{flow:t,message:t.request}))}},{key:"edit",value:function(e){switch(e){case"m":this.refs.requestLine.refs.method.focus();break;case"u":this.refs.requestLine.refs.url.focus();break;case"v":this.refs.requestLine.refs.httpVersion.focus();break;case"h":this.refs.headers.edit();break;default:throw new Error("Unimplemented: "+e)}}}]),t}(_react.Component),Response=exports.Response=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){var e=this.props,t=e.flow,r=e.onUpdate;return _react2["default"].createElement("section",{className:"response"},_react2["default"].createElement(ResponseLine,{ref:"responseLine",flow:t,onUpdate:r}),_react2["default"].createElement(_Headers2["default"],{ref:"headers",message:t.response,onChange:function(e){return r({response:{headers:e}})}}),_react2["default"].createElement("hr",null),_react2["default"].createElement(_ContentView2["default"],{flow:t,message:t.response}))}},{key:"edit",value:function(e){switch(e){case"c":this.refs.responseLine.refs.status_code.focus();break;case"m":this.refs.responseLine.refs.msg.focus();break;case"v":this.refs.responseLine.refs.httpVersion.focus();break;case"h":this.refs.headers.edit();break;default:throw new Error("'Unimplemented: "+e)}}}]),t}(_react.Component);
+"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function ErrorView(e){var t=e.flow;return _react2["default"].createElement("section",null,_react2["default"].createElement("div",{className:"alert alert-warning"},t.error.msg,_react2["default"].createElement("div",null,_react2["default"].createElement("small",null,(0,_utils2.formatTimeStamp)(t.error.timestamp)))))}Object.defineProperty(exports,"__esModule",{value:!0}),exports.Response=exports.Request=void 0;var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();exports.ErrorView=ErrorView;var _react=require("react"),_react2=_interopRequireDefault(_react),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_utils=require("../../flow/utils.js"),_utils2=require("../../utils.js"),_ContentView=require("../ContentView"),_ContentView2=_interopRequireDefault(_ContentView),_ValueEditor=require("../ValueEditor"),_ValueEditor2=_interopRequireDefault(_ValueEditor),_Headers=require("./Headers"),_Headers2=_interopRequireDefault(_Headers),RequestLine=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){var e=this.props,t=e.flow,r=e.onUpdate;return _react2["default"].createElement("div",{className:"first-line request-line"},_react2["default"].createElement(_ValueEditor2["default"],{ref:"method",content:t.request.method,onDone:function(e){return r({request:{method:e}})},inline:!0})," ",_react2["default"].createElement(_ValueEditor2["default"],{ref:"url",content:_utils.RequestUtils.pretty_url(t.request),onDone:function(e){return r({request:Object.assign({path:""},(0,_utils.parseUrl)(e))})},isValid:function(e){return!!(0,_utils.parseUrl)(e).host},inline:!0})," ",_react2["default"].createElement(_ValueEditor2["default"],{ref:"httpVersion",content:t.request.http_version,onDone:function(e){return r({request:{http_version:(0,_utils.parseHttpVersion)(e)}})},isValid:_utils.isValidHttpVersion,inline:!0}))}}]),t}(_react.Component),ResponseLine=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){var e=this.props,t=e.flow,r=e.onUpdate;return _react2["default"].createElement("div",{className:"first-line response-line"},_react2["default"].createElement(_ValueEditor2["default"],{ref:"httpVersion",content:t.response.http_version,onDone:function(e){return r({response:{http_version:(0,_utils.parseHttpVersion)(e)}})},isValid:_utils.isValidHttpVersion,inline:!0})," ",_react2["default"].createElement(_ValueEditor2["default"],{ref:"code",content:t.response.status_code+"",onDone:function(e){return r({response:{code:parseInt(e)}})},isValid:function(e){return/^\d+$/.test(e)},inline:!0})," ",_react2["default"].createElement(_ValueEditor2["default"],{ref:"msg",content:t.response.reason,onDone:function(e){return r({response:{msg:e}})},inline:!0}))}}]),t}(_react.Component),Request=exports.Request=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){var e=this.props,t=e.flow,r=e.onUpdate;return _react2["default"].createElement("section",{className:"request"},_react2["default"].createElement(RequestLine,{ref:"requestLine",flow:t,onUpdate:r}),_react2["default"].createElement(_Headers2["default"],{ref:"headers",message:t.request,onChange:function(e){return r({request:{headers:e}})}}),_react2["default"].createElement("hr",null),_react2["default"].createElement(_ContentView2["default"],{flow:t,message:t.request}))}},{key:"edit",value:function(e){switch(e){case"m":this.refs.requestLine.refs.method.focus();break;case"u":this.refs.requestLine.refs.url.focus();break;case"v":this.refs.requestLine.refs.httpVersion.focus();break;case"h":this.refs.headers.edit();break;default:throw new Error("Unimplemented: "+e)}}}]),t}(_react.Component),Response=exports.Response=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){var e=this.props,t=e.flow,r=e.onUpdate;return _react2["default"].createElement("section",{className:"response"},_react2["default"].createElement(ResponseLine,{ref:"responseLine",flow:t,onUpdate:r}),_react2["default"].createElement(_Headers2["default"],{ref:"headers",message:t.response,onChange:function(e){return r({response:{headers:e}})}}),_react2["default"].createElement("hr",null),_react2["default"].createElement(_ContentView2["default"],{flow:t,message:t.response}))}},{key:"edit",value:function(e){switch(e){case"c":this.refs.responseLine.refs.status_code.focus();break;case"m":this.refs.responseLine.refs.msg.focus();break;case"v":this.refs.responseLine.refs.httpVersion.focus();break;case"h":this.refs.headers.edit();break;default:throw new Error("'Unimplemented: "+e)}}}]),t}(_react.Component);ErrorView.propTypes={flow:_react.PropTypes.object.isRequired};
 
 },{"../../flow/utils.js":54,"../../utils.js":55,"../ContentView":3,"../ValueEditor":31,"./Headers":16,"lodash":"lodash","react":"react"}],18:[function(require,module,exports){
 "use strict";function _interopRequireWildcard(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t["default"]=e,t}function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function NavAction(e){var t=e.icon,r=e.title,a=e.onClick;return _react2["default"].createElement("a",{title:r,href:"#",className:"nav-action",onClick:function(e){e.preventDefault(),a(e)}},_react2["default"].createElement("i",{className:"fa fa-fw "+t}))}function Nav(e){var t=e.flow,r=e.active,a=e.tabs,c=e.onSelectTab,n=e.onRemove,i=e.onDuplicate,o=e.onReplay,l=e.onAccept,s=e.onRevert;return _react2["default"].createElement("nav",{className:"nav-tabs nav-tabs-sm"},a.map(function(e){return _react2["default"].createElement("a",{key:e,href:"#",className:(0,_classnames2["default"])({active:r===e}),onClick:function(t){t.preventDefault(),c(e)}},_.capitalize(e))}),_react2["default"].createElement(NavAction,{title:"[d]elete flow",icon:"fa-trash",onClick:function(){return n(t)}}),_react2["default"].createElement(NavAction,{title:"[D]uplicate flow",icon:"fa-copy",onClick:function(){return i(t)}}),_react2["default"].createElement(NavAction,{disabled:!0,title:"[r]eplay flow",icon:"fa-repeat",onClick:function(){return o(t)}}),t.intercepted&&_react2["default"].createElement(NavAction,{title:"[a]ccept intercepted flow",icon:"fa-play",onClick:function(){return l(t)}}),t.modified&&_react2["default"].createElement(NavAction,{title:"revert changes to flow [V]",icon:"fa-history",onClick:function(){return s(t)}}))}Object.defineProperty(exports,"__esModule",{value:!0});var _react=require("react"),_react2=_interopRequireDefault(_react),_reactRedux=require("react-redux"),_classnames=require("classnames"),_classnames2=_interopRequireDefault(_classnames),_flows=require("../../ducks/flows"),flowsActions=_interopRequireWildcard(_flows);NavAction.propTypes={icon:_react.PropTypes.string.isRequired,title:_react.PropTypes.string.isRequired,onClick:_react.PropTypes.func.isRequired},Nav.propTypes={flow:_react.PropTypes.object.isRequired,active:_react.PropTypes.string.isRequired,tabs:_react.PropTypes.array.isRequired,onSelectTab:_react.PropTypes.func.isRequired,onRemove:_react.PropTypes.func.isRequired,onDuplicate:_react.PropTypes.func.isRequired,onReplay:_react.PropTypes.func.isRequired,onAccept:_react.PropTypes.func.isRequired,onRevert:_react.PropTypes.func.isRequired},exports["default"]=(0,_reactRedux.connect)(null,{onRemove:flowsActions.remove,onDuplicate:flowsActions.duplicate,onReplay:flowsActions.replay,onAccept:flowsActions.accept,onRevert:flowsActions.revert})(Nav);
diff --git a/web/src/js/components/FlowView.jsx b/web/src/js/components/FlowView.jsx
index a94458a1..83cc57e8 100644
--- a/web/src/js/components/FlowView.jsx
+++ b/web/src/js/components/FlowView.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import _ from 'lodash'
 
 import Nav from './FlowView/Nav'
-import { Request, Response, Error } from './FlowView/Messages'
+import { Request, Response, ErrorView as Error } from './FlowView/Messages'
 import Details from './FlowView/Details'
 import Prompt from './Prompt'
 
diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx
index 5321edd6..f866776f 100644
--- a/web/src/js/components/FlowView/Messages.jsx
+++ b/web/src/js/components/FlowView/Messages.jsx
@@ -152,3 +152,20 @@ export class Response extends Component {
         }
     }
 }
+
+ErrorView.propTypes = {
+    flow: PropTypes.object.isRequired,
+}
+
+export function ErrorView({ flow }) {
+    return (
+        <section>
+            <div className="alert alert-warning">
+                {flow.error.msg}
+                <div>
+                    <small>{formatTimeStamp(flow.error.timestamp)}</small>
+                </div>
+            </div>
+        </section>
+    )
+}
-- 
cgit v1.2.3