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}`;
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

View File

@ -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>
)
};

View File

@ -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 }