From b5e727da8869baf9d24720debf8ff6c6c22c8500 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Fri, 19 Sep 2014 01:57:50 +0200 Subject: [PATCH] web: flow icons --- libmproxy/web/static/js/app.js | 56 +++++++++++++++++-- web/src/js/components/flowdetail.jsx.js | 32 ++++++++++- .../js/components/flowtable-columns.jsx.js | 22 +++++++- web/src/js/flow/utils.js | 2 +- 4 files changed, 102 insertions(+), 10 deletions(-) diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js index 4c47e201a..a0a8250a3 100644 --- a/libmproxy/web/static/js/app.js +++ b/libmproxy/web/static/js/app.js @@ -115,7 +115,7 @@ var EventLogActions = { }; var _MessageUtils = { getContentType: function (message) { - return MessageUtils.getHeader(message, /Content-Type/i); + return this.get_first_header(message, /^Content-Type$/i); }, get_first_header: function (message, regex) { //FIXME: Cache Invalidation. @@ -661,7 +661,27 @@ var IconColumn = React.createClass({displayName: 'IconColumn', }, render: function(){ var flow = this.props.flow; - return React.DOM.td({className: "col-icon"}, React.DOM.div({className: "resource-icon resource-icon-plain"})); + var contentType = ResponseUtils.getContentType(flow.response); + + //TODO: We should assign a type to the flow somewhere else. + var icon; + if(flow.response.code == 304) { + icon = "resource-icon-not-modified" + } else if(300 <= flow.response.code && flow.response.code < 400) { + icon = "resource-icon-redirect"; + } else if(contentType.indexOf("image") >= 0) { + icon = "resource-icon-image"; + } else if (contentType.indexOf("javascript") >= 0) { + icon = "resource-icon-js"; + } else if (contentType.indexOf("css") >= 0) { + icon = "resource-icon-css"; + } else if (contentType.indexOf("html") >= 0) { + icon = "resource-icon-document"; + } else { + icon = "resource-icon-plain"; + } + icon += " resource-icon"; + return React.DOM.td({className: "col-icon"}, React.DOM.div({className: icon})); } }); @@ -931,7 +951,11 @@ var Headers = React.createClass({displayName: 'Headers', var FlowDetailRequest = React.createClass({displayName: 'FlowDetailRequest', render: function(){ var flow = this.props.flow; - var url = React.DOM.code(null, RequestUtils.pretty_url(flow.request) ); + var first_line = [ + flow.request.method, + RequestUtils.pretty_url(flow.request), + "HTTP/"+ flow.response.httpversion.join(".") + ].join(" "); var content = null; if(flow.request.contentLength > 0){ content = "Request Content Size: "+ formatSize(flow.request.contentLength); @@ -943,7 +967,7 @@ var FlowDetailRequest = React.createClass({displayName: 'FlowDetailRequest', return ( React.DOM.section(null, - url, + React.DOM.code(null, first_line ), Headers({message: flow.request}), React.DOM.hr(null), content @@ -954,7 +978,29 @@ var FlowDetailRequest = React.createClass({displayName: 'FlowDetailRequest', var FlowDetailResponse = React.createClass({displayName: 'FlowDetailResponse', render: function(){ - return React.DOM.section(null, "response"); + var flow = this.props.flow; + var first_line = [ + "HTTP/"+ flow.response.httpversion.join("."), + flow.response.code, + flow.response.msg + ].join(" "); + var content = null; + if(flow.response.contentLength > 0){ + content = "Response Content Size: "+ formatSize(flow.response.contentLength); + } else { + content = React.DOM.div({className: "alert alert-info"}, "No Content"); + } + + //TODO: Styling + + return ( + React.DOM.section(null, + React.DOM.code(null, first_line ), + Headers({message: flow.response}), + React.DOM.hr(null), + content + ) + ); } }); diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js index 744901be6..e5fe37a03 100644 --- a/web/src/js/components/flowdetail.jsx.js +++ b/web/src/js/components/flowdetail.jsx.js @@ -46,7 +46,11 @@ var Headers = React.createClass({ var FlowDetailRequest = React.createClass({ render: function(){ var flow = this.props.flow; - var url = { RequestUtils.pretty_url(flow.request) }; + var first_line = [ + flow.request.method, + RequestUtils.pretty_url(flow.request), + "HTTP/"+ flow.response.httpversion.join(".") + ].join(" "); var content = null; if(flow.request.contentLength > 0){ content = "Request Content Size: "+ formatSize(flow.request.contentLength); @@ -58,7 +62,7 @@ var FlowDetailRequest = React.createClass({ return (
- {url} + { first_line }
{content} @@ -69,7 +73,29 @@ var FlowDetailRequest = React.createClass({ var FlowDetailResponse = React.createClass({ render: function(){ - return
response
; + var flow = this.props.flow; + var first_line = [ + "HTTP/"+ flow.response.httpversion.join("."), + flow.response.code, + flow.response.msg + ].join(" "); + var content = null; + if(flow.response.contentLength > 0){ + content = "Response Content Size: "+ formatSize(flow.response.contentLength); + } else { + content =
No Content
; + } + + //TODO: Styling + + return ( +
+ { first_line } + +
+ {content} +
+ ); } }); diff --git a/web/src/js/components/flowtable-columns.jsx.js b/web/src/js/components/flowtable-columns.jsx.js index 01130bc14..676b005b8 100644 --- a/web/src/js/components/flowtable-columns.jsx.js +++ b/web/src/js/components/flowtable-columns.jsx.js @@ -28,7 +28,27 @@ var IconColumn = React.createClass({ }, render: function(){ var flow = this.props.flow; - return
; + var contentType = ResponseUtils.getContentType(flow.response); + + //TODO: We should assign a type to the flow somewhere else. + var icon; + if(flow.response.code == 304) { + icon = "resource-icon-not-modified" + } else if(300 <= flow.response.code && flow.response.code < 400) { + icon = "resource-icon-redirect"; + } else if(contentType.indexOf("image") >= 0) { + icon = "resource-icon-image"; + } else if (contentType.indexOf("javascript") >= 0) { + icon = "resource-icon-js"; + } else if (contentType.indexOf("css") >= 0) { + icon = "resource-icon-css"; + } else if (contentType.indexOf("html") >= 0) { + icon = "resource-icon-document"; + } else { + icon = "resource-icon-plain"; + } + icon += " resource-icon"; + return
; } }); diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js index b621f06d6..e54f7c599 100644 --- a/web/src/js/flow/utils.js +++ b/web/src/js/flow/utils.js @@ -1,6 +1,6 @@ var _MessageUtils = { getContentType: function (message) { - return MessageUtils.getHeader(message, /Content-Type/i); + return this.get_first_header(message, /^Content-Type$/i); }, get_first_header: function (message, regex) { //FIXME: Cache Invalidation.