diff --git a/src/components/Response/Redirect.js b/src/components/Response/Redirect.js index f97abdf..0176c6f 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}

@@ -20,6 +23,7 @@ function Titlebar({ url, time, statusCode, onClick }) { Titlebar.propTypes = { url: redirectShape.url, time: redirectShape.time, + size: PropTypes.number.isRequired, statusCode: PropTypes.number.isRequired, onClick: PropTypes.func.isRequired, }; @@ -36,6 +40,9 @@ 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 ( diff --git a/src/components/Response/Response.js b/src/components/Response/Response.js index c088e7e..1161524 100644 --- a/src/components/Response/Response.js +++ b/src/components/Response/Response.js @@ -14,13 +14,16 @@ 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 }) { return (

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

@@ -30,6 +33,7 @@ function Titlebar({ url, time, statusCode }) { Titlebar.propTypes = { url: responseShape.url, time: PropTypes.node.isRequired, + size: PropTypes.number.isRequired, statusCode: PropTypes.number.isRequired, }; @@ -82,7 +86,15 @@ 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..cbe9ae6 --- /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..5a2a2ff --- /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`; +} diff --git a/test/components/response/__snapshots__/response.test.js.snap b/test/components/response/__snapshots__/response.test.js.snap index 0a493d6..bd57393 100644 --- a/test/components/response/__snapshots__/response.test.js.snap +++ b/test/components/response/__snapshots__/response.test.js.snap @@ -17,9 +17,19 @@ exports[`response component renders a result when given one 1`] = ` > 200 - Response ( - 0.123s - ) + + Response + + + 14 bytes + + + ( + 0.123s + ) +