From 244dc0b48ca3c05d8bbd13d671d7aa453e28b9b1 Mon Sep 17 00:00:00 2001 From: ChiefOfGxBxL Date: Sat, 2 Nov 2024 20:04:40 -0400 Subject: [PATCH 1/4] Add approximate size to titlebar of responses and redirects --- src/components/Response/Redirect.js | 11 +++++++++-- src/components/Response/Response.js | 9 ++++++--- src/components/Response/SizeBytes.js | 17 +++++++++++++++++ src/utils/byteFormatter.js | 14 ++++++++++++++ 4 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 src/components/Response/SizeBytes.js create mode 100644 src/utils/byteFormatter.js diff --git a/src/components/Response/Redirect.js b/src/components/Response/Redirect.js index f97abdf2..b2280797 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}

@@ -36,6 +39,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 c088e7ee..fda57ccd 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}

@@ -82,7 +85,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 00000000..b04b09e1 --- /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 00000000..75649cfb --- /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' +} From 748e3e5106d19668bb11bbd3205f19db0421604f Mon Sep 17 00:00:00 2001 From: ChiefOfGxBxL Date: Sat, 2 Nov 2024 21:01:08 -0400 Subject: [PATCH 2/4] Update response component snapshot --- .../response/__snapshots__/response.test.js.snap | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/test/components/response/__snapshots__/response.test.js.snap b/test/components/response/__snapshots__/response.test.js.snap index 0a493d6c..bd57393f 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 + ) + Date: Sat, 2 Nov 2024 21:06:41 -0400 Subject: [PATCH 3/4] Fix lint --- src/components/Response/Redirect.js | 5 +++-- src/components/Response/Response.js | 11 ++++++++++- src/components/Response/SizeBytes.js | 2 +- src/utils/byteFormatter.js | 16 ++++++++-------- 4 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/components/Response/Redirect.js b/src/components/Response/Redirect.js index b2280797..0176c6fb 100644 --- a/src/components/Response/Redirect.js +++ b/src/components/Response/Redirect.js @@ -23,6 +23,7 @@ function Titlebar({ url, time, size, statusCode, onClick }) { Titlebar.propTypes = { url: redirectShape.url, time: redirectShape.time, + size: PropTypes.number.isRequired, statusCode: PropTypes.number.isRequired, onClick: PropTypes.func.isRequired, }; @@ -39,8 +40,8 @@ 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 + const contentLength = headers.find(header => (header.name.toLowerCase() === 'content-length')); + const contentSize = contentLength ? Number(contentLength.value) : 0; return ( } + header={( + + )} > {type.html && } diff --git a/src/components/Response/SizeBytes.js b/src/components/Response/SizeBytes.js index b04b09e1..cbe9ae6b 100644 --- a/src/components/Response/SizeBytes.js +++ b/src/components/Response/SizeBytes.js @@ -11,7 +11,7 @@ function SizeBytes({ size }) { } SizeBytes.propTypes = { - size: PropTypes.number.isRequired + size: PropTypes.number.isRequired, }; export default SizeBytes; diff --git a/src/utils/byteFormatter.js b/src/utils/byteFormatter.js index 75649cfb..1878f6c2 100644 --- a/src/utils/byteFormatter.js +++ b/src/utils/byteFormatter.js @@ -1,14 +1,14 @@ -const KB = 1024 -const MB = 1024 * KB -const GB = 1024 * MB +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' -} + 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`; +}; From 208cdb6a9bc559e5c9cd65309a2de60a596b2828 Mon Sep 17 00:00:00 2001 From: ChiefOfGxBxL Date: Sat, 2 Nov 2024 21:07:51 -0400 Subject: [PATCH 4/4] Fix lint --- src/utils/byteFormatter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/byteFormatter.js b/src/utils/byteFormatter.js index 1878f6c2..5a2a2ff2 100644 --- a/src/utils/byteFormatter.js +++ b/src/utils/byteFormatter.js @@ -11,4 +11,4 @@ export default function byteFormatter(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`; -}; +}