feat: response duration

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

@@ -78,7 +78,9 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
     const query = gql`${item.request.body.graphql.query}`;
 
     setIsLoading(true);
+    const timeStart = Date.now();
     const { data, errors, extensions, headers, status } = await rawRequest(item.request.url, query);
+    const timeEnd = Date.now();
     setData(data);
     setIsLoading(false);
     console.log(headers);
@@ -89,7 +91,8 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
         response: {
           data: data,
           headers: Object.entries(headers.map),
-          status: status
+          status: status,
+          duration: timeEnd - timeStart
         },
         requestTab: focusedTab,
         collectionId: collection.id

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

@@ -1,10 +1,20 @@
 import React from 'react';
 import StyledWrapper from './StyledWrapper';
 
-const ResponseTime = () => {
+const ResponseTime = ({duration}) => {
+  let durationToDisplay = ''
+
+  if(duration > 1000 ) { // duration greater than a second
+    let seconds =  Math.floor(duration / 1000);
+    let decimal =  ((duration % 1000) / 1000).toFixed(2) * 100;
+    durationToDisplay = seconds + '.' +  decimal + 's';
+  } else {
+    durationToDisplay = duration + 'ms'
+  }
+
   return (
     <StyledWrapper className="mt-3 ml-4">
-      2.8s
+      {durationToDisplay}
     </StyledWrapper>
   )
 };

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

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