feat: response size

packages/grafnode-components/src/components/RequestTabPanel/index.js

@@ -86,11 +86,15 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
     console.log(headers);
 
     if(data && !errors) {
+      // todo: alternate way to calculate length when content length is not present
+      const size = headers.map["content-length"];
+
       dispatch({
         type: actions.RESPONSE_RECEIVED,
         response: {
           data: data,
           headers: Object.entries(headers.map),
+          size: size,
           status: status,
           duration: timeEnd - timeStart
         },

packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js

@@ -1,10 +1,20 @@
 import React from 'react';
 import StyledWrapper from './StyledWrapper';
 
-const ResponseSize = () => {
+const ResponseSize = ({size}) => {
+  let sizeToDisplay = ''
+
+  if(size > 1024 ) { // size is greater than 1kb
+    let kb =  Math.floor(size / 1024);
+    let decimal =  ((size % 1024) / 1024).toFixed(2) * 100;
+    sizeToDisplay = kb + '.' +  decimal + 'KB';
+  } else {
+    sizeToDisplay = size + 'B'
+  }
+
   return (
     <StyledWrapper className="mt-3 ml-4">
-      8.31KB
+      {sizeToDisplay}
     </StyledWrapper>
   )
 };

packages/grafnode-components/src/components/ResponsePane/index.js

@@ -50,7 +50,7 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
           <div className="flex flex-grow justify-end items-center">
             <StatusCode status={response.status}/>
             <ResponseTime duration={response.duration}/>
-            <ResponseSize />
+            <ResponseSize size={response.size}/>
           </div>
         ) : null }
       </div>