aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--libmproxy/web/static/js/app.js56
-rw-r--r--web/src/js/components/flowdetail.jsx.js32
-rw-r--r--web/src/js/components/flowtable-columns.jsx.js22
-rw-r--r--web/src/js/flow/utils.js2
4 files changed, 102 insertions, 10 deletions
diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js
index 4c47e201..a0a8250a 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 744901be..e5fe37a0 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 = <code>{ RequestUtils.pretty_url(flow.request) }</code>;
+ 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 (
<section>
- {url}
+ <code>{ first_line }</code>
<Headers message={flow.request}/>
<hr/>
{content}
@@ -69,7 +73,29 @@ var FlowDetailRequest = React.createClass({
var FlowDetailResponse = React.createClass({
render: function(){
- return <section>response</section>;
+ 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 = <div className="alert alert-info">No Content</div>;
+ }
+
+ //TODO: Styling
+
+ return (
+ <section>
+ <code>{ first_line }</code>
+ <Headers message={flow.response}/>
+ <hr/>
+ {content}
+ </section>
+ );
}
});
diff --git a/web/src/js/components/flowtable-columns.jsx.js b/web/src/js/components/flowtable-columns.jsx.js
index 01130bc1..676b005b 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 <td className="col-icon"><div className="resource-icon resource-icon-plain"></div></td>;
+ 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 <td className="col-icon"><div className={icon}></div></td>;
}
});
diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js
index b621f06d..e54f7c59 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.
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-06 06:11:28 +0000