Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2024-11-22 15:37:45 +00:00
Code Issues Projects Releases Wiki Activity

web: flow icons

Browse Source
This commit is contained in:
Maximilian Hils 2014-09-19 01:57:50 +02:00
parent b0374710e4
commit b5e727da88
4 changed files with 102 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
libmproxy/web/static/js/app.js
View File

@ -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
)
);
}
});

32
web/src/js/components/flowdetail.jsx.js
View File

@ -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>
);
}
});

22
web/src/js/components/flowtable-columns.jsx.js
View File

@ -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>;
}
});

2
web/src/js/flow/utils.js
View File

@ -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.