mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-21 15:33:11 +01:00
feat: response status code
This commit is contained in:
parent
305fa14c7f
commit
8c93d00dac
@ -86,8 +86,11 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
|
||||
if(data && !errors) {
|
||||
dispatch({
|
||||
type: actions.RESPONSE_RECEIVED,
|
||||
response: data,
|
||||
responseHeaders: Object.entries(headers.map),
|
||||
response: {
|
||||
data: data,
|
||||
headers: Object.entries(headers.map),
|
||||
status: status
|
||||
},
|
||||
requestTab: focusedTab,
|
||||
collectionId: collection.id
|
||||
});
|
||||
@ -128,8 +131,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
|
||||
<section className="response-pane px-4 flex-grow">
|
||||
<ResponsePane
|
||||
rightPaneWidth={rightPaneWidth}
|
||||
data={item.response}
|
||||
headers={item.responseHeaders}
|
||||
response={item.response}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</section>
|
||||
|
@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const ResponseHeaders = ({headers}) => {
|
||||
return (
|
||||
<StyledWrapper className="mt-4">
|
||||
<StyledWrapper className="mt-3">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const ResponseSize = () => {
|
||||
return (
|
||||
<StyledWrapper className="mt-4 ml-4">
|
||||
<StyledWrapper className="mt-3 ml-4">
|
||||
8.31KB
|
||||
</StyledWrapper>
|
||||
)
|
||||
|
@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const ResponseTime = () => {
|
||||
return (
|
||||
<StyledWrapper className="mt-4 ml-4">
|
||||
<StyledWrapper className="mt-3 ml-4">
|
||||
2.8s
|
||||
</StyledWrapper>
|
||||
)
|
||||
|
@ -0,0 +1,68 @@
|
||||
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
|
||||
const statusCodePhraseMap = {
|
||||
100: 'Continue',
|
||||
101: 'Switching Protocols',
|
||||
102: 'Processing',
|
||||
103: 'Early Hints',
|
||||
200: 'OK',
|
||||
201: 'Created',
|
||||
202: 'Accepted',
|
||||
203: 'Non-Authoritative Information',
|
||||
204: 'No Content',
|
||||
205: 'Reset Content',
|
||||
206: 'Partial Content',
|
||||
207: 'Multi-Status',
|
||||
208: 'Already Reported',
|
||||
226: 'IM Used',
|
||||
300: 'Multiple Choice',
|
||||
301: 'Moved Permanently',
|
||||
302: 'Found',
|
||||
303: 'See Other',
|
||||
304: 'Not Modified',
|
||||
305: 'Use Proxy',
|
||||
306: 'unused',
|
||||
307: 'Temporary Redirect',
|
||||
308: 'Permanent Redirect',
|
||||
400: 'Bad Request',
|
||||
401: 'Unauthorized',
|
||||
402: 'Payment Required',
|
||||
403: 'Forbidden',
|
||||
404: 'Not Found',
|
||||
405: 'Method Not Allowed',
|
||||
406: 'Not Acceptable',
|
||||
407: 'Proxy Authentication Required',
|
||||
408: 'Request Timeout',
|
||||
409: 'Conflict',
|
||||
410: 'Gone',
|
||||
411: 'Length Required',
|
||||
412: 'Precondition Failed',
|
||||
413: 'Payload Too Large',
|
||||
414: 'URI Too Long',
|
||||
415: 'Unsupported Media Type',
|
||||
416: 'Range Not Satisfiable',
|
||||
417: 'Expectation Failed',
|
||||
418: 'I\'m a teapot',
|
||||
421: 'Misdirected Request',
|
||||
422: 'Unprocessable Entity',
|
||||
423: 'Locked',
|
||||
424: 'Failed Dependency',
|
||||
425: 'Too Early',
|
||||
426: 'Upgrade Required',
|
||||
428: 'Precondition Required',
|
||||
429: 'Too Many Requests',
|
||||
431: 'Request Header Fields Too Large',
|
||||
451: 'Unavailable For Legal Reasons',
|
||||
500: 'Internal Server Error',
|
||||
501: 'Not Implemented',
|
||||
502: 'Bad Gateway',
|
||||
503: 'Service Unavailable',
|
||||
504: 'Gateway Timeout',
|
||||
505: 'HTTP Version Not Supported',
|
||||
506: 'Variant Also Negotiates',
|
||||
507: 'Insufficient Storage',
|
||||
508: 'Loop Detected',
|
||||
510: 'Not Extended',
|
||||
511: 'Network Authentication Required'
|
||||
};
|
||||
|
||||
export default statusCodePhraseMap;
|
@ -1,10 +1,22 @@
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import statusCodePhraseMap from './get-status-code-phrase';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const StatusCode = () => {
|
||||
const StatusCode = ({status}) => {
|
||||
const getTabClassname = () => {
|
||||
return classnames('mt-3', {
|
||||
'text-blue-700': status >= 100 && status < 200,
|
||||
'text-green-700': status >= 200 && status < 300,
|
||||
'text-purple-700': status >= 300 && status < 400,
|
||||
'text-yellow-700': status >= 400 && status < 500,
|
||||
'text-red-700': status >= 500 && status < 600
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledWrapper className="text-green-700 mt-4">
|
||||
200 OK
|
||||
<StyledWrapper className={getTabClassname()}>
|
||||
{status} {statusCodePhraseMap[status]}
|
||||
</StyledWrapper>
|
||||
)
|
||||
};
|
||||
|
@ -7,9 +7,11 @@ import ResponseTime from './ResponseTime';
|
||||
import ResponseSize from './ResponseSize';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
|
||||
const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
|
||||
const [selectedTab, setSelectedTab] = useState('response');
|
||||
|
||||
response = response || {};
|
||||
|
||||
const getTabClassname = (tabName) => {
|
||||
return classnames(`tab select-none ${tabName}`, {
|
||||
'active': tabName === selectedTab
|
||||
@ -22,14 +24,14 @@ const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
|
||||
return (
|
||||
<QueryResult
|
||||
width={rightPaneWidth}
|
||||
data={data}
|
||||
data={response.data}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case 'headers': {
|
||||
return (
|
||||
<ResponseHeaders headers={headers}/>
|
||||
<ResponseHeaders headers={response.headers}/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -44,11 +46,13 @@ const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
|
||||
<div className="flex items-center tabs mt-1" role="tablist">
|
||||
<div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
|
||||
<div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>
|
||||
<div className="flex flex-grow justify-end items-center">
|
||||
<StatusCode />
|
||||
<ResponseTime />
|
||||
<ResponseSize />
|
||||
</div>
|
||||
{!isLoading ? (
|
||||
<div className="flex flex-grow justify-end items-center">
|
||||
<StatusCode status={response.status}/>
|
||||
<ResponseTime />
|
||||
<ResponseSize />
|
||||
</div>
|
||||
) : null }
|
||||
</div>
|
||||
<section>
|
||||
{getTabPanel(selectedTab)}
|
||||
|
@ -67,7 +67,6 @@ const reducer = (state, action) => {
|
||||
|
||||
if(item) {
|
||||
item.response = action.response;
|
||||
item.responseHeaders = action.responseHeaders;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user