diff options
author | Aldo Cortesi <aldo@nullcube.com> | 2015-01-01 15:37:42 +1300 |
---|---|---|
committer | Aldo Cortesi <aldo@nullcube.com> | 2015-01-01 15:37:42 +1300 |
commit | c9ce5094c810b551de3cddebf14f277a61657e16 (patch) | |
tree | 6eb4a6c5c1c43c99b6e66eab3b7d4f31c92ac8c0 /web/src/js/components/flowtable-columns.js | |
parent | 67f6f67c48928ca56abfc5395be42b6643a16295 (diff) | |
download | mitmproxy-c9ce5094c810b551de3cddebf14f277a61657e16.tar.gz mitmproxy-c9ce5094c810b551de3cddebf14f277a61657e16.tar.bz2 mitmproxy-c9ce5094c810b551de3cddebf14f277a61657e16.zip |
All files and only files in in js/components are jsx
So remove the redundant naming
Diffstat (limited to 'web/src/js/components/flowtable-columns.js')
-rw-r--r-- | web/src/js/components/flowtable-columns.js | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/web/src/js/components/flowtable-columns.js b/web/src/js/components/flowtable-columns.js new file mode 100644 index 00000000..39c4bd8d --- /dev/null +++ b/web/src/js/components/flowtable-columns.js @@ -0,0 +1,164 @@ +var React = require("react"); +var flowutils = require("../flow/utils.js"); +var utils = require("../utils.js"); + +var TLSColumn = React.createClass({ + statics: { + renderTitle: function () { + return <th key="tls" className="col-tls"></th>; + } + }, + 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: { + renderTitle: function () { + return <th key="icon" className="col-icon"></th>; + } + }, + render: function () { + var flow = this.props.flow; + + var icon; + if (flow.response) { + var contentType = flowutils.ResponseUtils.getContentType(flow.response); + + //TODO: We should assign a type to the flow somewhere else. + 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 && 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: { + renderTitle: function () { + return <th key="path" className="col-path">Path</th>; + } + }, + 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} + {flow.request.scheme + "://" + flow.request.host + flow.request.path} + </td>; + } +}); + + +var MethodColumn = React.createClass({ + statics: { + renderTitle: function () { + return <th key="method" className="col-method">Method</th>; + } + }, + render: function () { + var flow = this.props.flow; + return <td className="col-method">{flow.request.method}</td>; + } +}); + + +var StatusColumn = React.createClass({ + statics: { + renderTitle: function () { + return <th key="status" className="col-status">Status</th>; + } + }, + render: function () { + var flow = this.props.flow; + var status; + if (flow.response) { + status = flow.response.code; + } else { + status = null; + } + return <td className="col-status">{status}</td>; + } +}); + + +var SizeColumn = React.createClass({ + statics: { + renderTitle: function () { + return <th key="size" className="col-size">Size</th>; + } + }, + 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: { + renderTitle: function () { + return <th key="time" className="col-time">Time</th>; + } + }, + 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; + + |