feat: response duration

This commit is contained in:
Anoop M D 2022-01-02 00:48:12 +05:30
parent 8c93d00dac
commit 7a61f29acc
3 changed files with 17 additions and 4 deletions

View File

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

View File

@ -1,10 +1,20 @@
import React from 'react'; import React from 'react';
import StyledWrapper from './StyledWrapper'; 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 ( return (
<StyledWrapper className="mt-3 ml-4"> <StyledWrapper className="mt-3 ml-4">
2.8s {durationToDisplay}
</StyledWrapper> </StyledWrapper>
) )
}; };

View File

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