diff --git a/src/components/Response/Redirect.js b/src/components/Response/Redirect.js index e9e4908..dd9d6a6 100644 --- a/src/components/Response/Redirect.js +++ b/src/components/Response/Redirect.js @@ -4,13 +4,16 @@ import responsePropTypes, { redirectShape } from 'propTypes/redirect'; import { StyledResponse, StyledHeader } from './StyledComponents'; import Headers from './Headers'; import StatusChip from './StatusChip'; +import SizeBytes from './SizeBytes'; -function Titlebar({ url, time, statusCode, onClick }) { +function Titlebar({ url, time, size, statusCode, onClick }) { return (

- Redirect ({(time / 1000).toFixed(3)}s) + Redirect + + ({(time / 1000).toFixed(3)}s) {url}

@@ -35,11 +38,14 @@ function Redirect(props) { const { method, url, time, statusCode } = response; + const contentLength = headers.find((header) => header.name.toLowerCase() === 'content-length') + const contentSize = contentLength ? Number(contentLength.value) : 0 + return ( } + header={} > diff --git a/src/components/Response/Response.js b/src/components/Response/Response.js index 1662f7d..05ae941 100644 --- a/src/components/Response/Response.js +++ b/src/components/Response/Response.js @@ -1,6 +1,6 @@ import React, { PropTypes } from 'react'; import { connect } from 'react-redux'; -import { Alert, Label } from 'react-bootstrap'; +import { Alert } from 'react-bootstrap'; import Highlight from 'react-highlight'; import formatXml from 'xml-formatter'; @@ -14,8 +14,9 @@ import { StyledResponse, StyledHeader } from './StyledComponents'; import Headers from './Headers'; import RenderedResponse from './RenderedResponse'; import StatusChip from './StatusChip'; +import SizeBytes from './SizeBytes'; -function Titlebar({ url, time, statusCode }) { +function Titlebar({ url, time, size, statusCode }) { let labelStyle = 'default' if (statusCode >= 200 && statusCode < 300) labelStyle = 'success' else if (statusCode >= 400 && statusCode < 600) labelStyle = 'danger' @@ -24,7 +25,9 @@ function Titlebar({ url, time, statusCode }) {

- Response ({time}) + Response + + ({time}) {url}

@@ -86,7 +89,7 @@ export function Response(props) { return ( } + header={} > {type.html && } diff --git a/src/components/Response/SizeBytes.js b/src/components/Response/SizeBytes.js new file mode 100644 index 0000000..b04b09e --- /dev/null +++ b/src/components/Response/SizeBytes.js @@ -0,0 +1,17 @@ +import React, { PropTypes } from 'react'; + +import byteFormatter from 'utils/byteFormatter'; + +function SizeBytes({ size }) { + return ( + + {byteFormatter(size)} + + ); +} + +SizeBytes.propTypes = { + size: PropTypes.number.isRequired +}; + +export default SizeBytes; diff --git a/src/utils/byteFormatter.js b/src/utils/byteFormatter.js new file mode 100644 index 0000000..75649cf --- /dev/null +++ b/src/utils/byteFormatter.js @@ -0,0 +1,14 @@ +const KB = 1024 +const MB = 1024 * KB +const GB = 1024 * MB + +/* + * Formats the provided number in bytes as a string of bytes, + * KB, MB, or GB, with one decimal point and the unit suffix. + */ +export default function byteFormatter(bytes) { + if (bytes < 100) return `${bytes} bytes` + if (bytes > GB) return (bytes / GB).toFixed(1) + ' GB' + if (bytes > MB) return (bytes / MB).toFixed(1) + ' MB' + return (bytes / KB).toFixed(1) + ' KB' +}