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
+ )
+