From b5e727da8869baf9d24720debf8ff6c6c22c8500 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Fri, 19 Sep 2014 01:57:50 +0200 Subject: web: flow icons --- web/src/js/components/flowdetail.jsx.js | 32 +++++++++++++++++++++++--- web/src/js/components/flowtable-columns.jsx.js | 22 +++++++++++++++++- 2 files changed, 50 insertions(+), 4 deletions(-) (limited to 'web/src/js/components') 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 = { 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 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
; + 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
; } }); -- cgit v1.2.3