From fc32f5b4131363287bbb81933105b2b4cc8a3912 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Sun, 2 Jan 2022 01:09:54 +0530
Subject: [PATCH] feat: response size

---
 .../src/components/RequestTabPanel/index.js        |  4 ++++
 .../components/ResponsePane/ResponseSize/index.js  | 14 ++++++++++++--
 .../src/components/ResponsePane/index.js           |  2 +-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/grafnode-components/src/components/RequestTabPanel/index.js b/packages/grafnode-components/src/components/RequestTabPanel/index.js
index 79cc6513d..4819f6f8a 100644
--- a/packages/grafnode-components/src/components/RequestTabPanel/index.js
+++ b/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
         },
diff --git a/packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js b/packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js
index 5e1b7e6b7..7f29e55fa 100644
--- a/packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js
+++ b/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>
   )
 };
diff --git a/packages/grafnode-components/src/components/ResponsePane/index.js b/packages/grafnode-components/src/components/ResponsePane/index.js
index b74a6e698..a7dec1319 100644
--- a/packages/grafnode-components/src/components/ResponsePane/index.js
+++ b/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>