diff options
Diffstat (limited to 'mitmproxy/web/src/js/components/flowtable-columns.js')
| -rw-r--r-- | mitmproxy/web/src/js/components/flowtable-columns.js | 201 |
1 files changed, 201 insertions, 0 deletions
diff --git a/mitmproxy/web/src/js/components/flowtable-columns.js b/mitmproxy/web/src/js/components/flowtable-columns.js new file mode 100644 index 00000000..74d96216 --- /dev/null +++ b/mitmproxy/web/src/js/components/flowtable-columns.js @@ -0,0 +1,201 @@ +var React = require("react"); +var RequestUtils = require("../flow/utils.js").RequestUtils; +var ResponseUtils = require("../flow/utils.js").ResponseUtils; +var utils = require("../utils.js"); + +var TLSColumn = React.createClass({ + statics: { + Title: React.createClass({ + render: function(){ + return <th {...this.props} className={"col-tls " + (this.props.className || "") }></th>; + } + }), + sortKeyFun: function(flow){ + return flow.request.scheme; + } + }, + render: function () { + var flow = this.props.flow; + var ssl = (flow.request.scheme === "https"); + var classes; + if (ssl) { + classes = "col-tls col-tls-https"; + } else { + classes = "col-tls col-tls-http"; + } + return <td className={classes}></td>; + } +}); + + +var IconColumn = React.createClass({ + statics: { + Title: React.createClass({ + render: function(){ + return <th {...this.props} className={"col-icon " + (this.props.className || "") }></th>; + } + }) + }, + render: function () { + var flow = this.props.flow; + + var icon; + if (flow.response) { + var contentType = ResponseUtils.getContentType(flow.response); + + //TODO: We should assign a type to the flow somewhere else. + if (flow.response.status_code === 304) { + icon = "resource-icon-not-modified"; + } else if (300 <= flow.response.status_code && flow.response.status_code < 400) { + icon = "resource-icon-redirect"; + } else if (contentType && contentType.indexOf("image") >= 0) { + icon = "resource-icon-image"; + } else if (contentType && contentType.indexOf("javascript") >= 0) { + icon = "resource-icon-js"; + } else if (contentType && contentType.indexOf("css") >= 0) { + icon = "resource-icon-css"; + } else if (contentType && contentType.indexOf("html") >= 0) { + icon = "resource-icon-document"; + } + } + if (!icon) { + icon = "resource-icon-plain"; + } + + + icon += " resource-icon"; + return <td className="col-icon"> + <div className={icon}></div> + </td>; + } +}); + +var PathColumn = React.createClass({ + statics: { + Title: React.createClass({ + render: function(){ + return <th {...this.props} className={"col-path " + (this.props.className || "") }>Path</th>; + } + }), + sortKeyFun: function(flow){ + return RequestUtils.pretty_url(flow.request); + } + }, + render: function () { + var flow = this.props.flow; + return <td className="col-path"> + {flow.request.is_replay ? <i className="fa fa-fw fa-repeat pull-right"></i> : null} + {flow.intercepted ? <i className="fa fa-fw fa-pause pull-right"></i> : null} + { RequestUtils.pretty_url(flow.request) } + </td>; + } +}); + + +var MethodColumn = React.createClass({ + statics: { + Title: React.createClass({ + render: function(){ + return <th {...this.props} className={"col-method " + (this.props.className || "") }>Method</th>; + } + }), + sortKeyFun: function(flow){ + return flow.request.method; + } + }, + render: function () { + var flow = this.props.flow; + return <td className="col-method">{flow.request.method}</td>; + } +}); + + +var StatusColumn = React.createClass({ + statics: { + Title: React.createClass({ + render: function(){ + return <th {...this.props} className={"col-status " + (this.props.className || "") }>Status</th>; + } + }), + sortKeyFun: function(flow){ + return flow.response ? flow.response.status_code : undefined; + } + }, + render: function () { + var flow = this.props.flow; + var status; + if (flow.response) { + status = flow.response.status_code; + } else { + status = null; + } + return <td className="col-status">{status}</td>; + } +}); + + +var SizeColumn = React.createClass({ + statics: { + Title: React.createClass({ + render: function(){ + return <th {...this.props} className={"col-size " + (this.props.className || "") }>Size</th>; + } + }), + sortKeyFun: function(flow){ + var total = flow.request.contentLength; + if (flow.response) { + total += flow.response.contentLength || 0; + } + return total; + } + }, + render: function () { + var flow = this.props.flow; + + var total = flow.request.contentLength; + if (flow.response) { + total += flow.response.contentLength || 0; + } + var size = utils.formatSize(total); + return <td className="col-size">{size}</td>; + } +}); + + +var TimeColumn = React.createClass({ + statics: { + Title: React.createClass({ + render: function(){ + return <th {...this.props} className={"col-time " + (this.props.className || "") }>Time</th>; + } + }), + sortKeyFun: function(flow){ + if(flow.response) { + return flow.response.timestamp_end - flow.request.timestamp_start; + } + } + }, + render: function () { + var flow = this.props.flow; + var time; + if (flow.response) { + time = utils.formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start)); + } else { + time = "..."; + } + return <td className="col-time">{time}</td>; + } +}); + + +var all_columns = [ + TLSColumn, + IconColumn, + PathColumn, + MethodColumn, + StatusColumn, + SizeColumn, + TimeColumn +]; + +module.exports = all_columns; |