From 8c93d00dacd53b6439faf2b02b816298c55f7260 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Sun, 2 Jan 2022 00:12:38 +0530 Subject: [PATCH] feat: response status code --- .../src/components/RequestTabPanel/index.js | 10 +-- .../ResponsePane/ResponseHeaders/index.js | 2 +- .../ResponsePane/ResponseSize/index.js | 2 +- .../ResponsePane/ResponseTime/index.js | 2 +- .../StatusCode/get-status-code-phrase.js | 68 +++++++++++++++++++ .../ResponsePane/StatusCode/index.js | 18 ++++- .../src/components/ResponsePane/index.js | 20 +++--- .../src/providers/Store/reducer.js | 1 - 8 files changed, 104 insertions(+), 19 deletions(-) create mode 100644 packages/grafnode-components/src/components/ResponsePane/StatusCode/get-status-code-phrase.js diff --git a/packages/grafnode-components/src/components/RequestTabPanel/index.js b/packages/grafnode-components/src/components/RequestTabPanel/index.js index 6fdc9bbcc..e19aa5acd 100644 --- a/packages/grafnode-components/src/components/RequestTabPanel/index.js +++ b/packages/grafnode-components/src/components/RequestTabPanel/index.js @@ -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
diff --git a/packages/grafnode-components/src/components/ResponsePane/ResponseHeaders/index.js b/packages/grafnode-components/src/components/ResponsePane/ResponseHeaders/index.js index 201219ca4..dee3a20d8 100644 --- a/packages/grafnode-components/src/components/ResponsePane/ResponseHeaders/index.js +++ b/packages/grafnode-components/src/components/ResponsePane/ResponseHeaders/index.js @@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper'; const ResponseHeaders = ({headers}) => { return ( - + diff --git a/packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js b/packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js index 83d6bfc1b..5e1b7e6b7 100644 --- a/packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js +++ b/packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js @@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper'; const ResponseSize = () => { return ( - + 8.31KB ) diff --git a/packages/grafnode-components/src/components/ResponsePane/ResponseTime/index.js b/packages/grafnode-components/src/components/ResponsePane/ResponseTime/index.js index 21dc40823..2876b9b71 100644 --- a/packages/grafnode-components/src/components/ResponsePane/ResponseTime/index.js +++ b/packages/grafnode-components/src/components/ResponsePane/ResponseTime/index.js @@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper'; const ResponseTime = () => { return ( - + 2.8s ) diff --git a/packages/grafnode-components/src/components/ResponsePane/StatusCode/get-status-code-phrase.js b/packages/grafnode-components/src/components/ResponsePane/StatusCode/get-status-code-phrase.js new file mode 100644 index 000000000..e5c7659fb --- /dev/null +++ b/packages/grafnode-components/src/components/ResponsePane/StatusCode/get-status-code-phrase.js @@ -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; diff --git a/packages/grafnode-components/src/components/ResponsePane/StatusCode/index.js b/packages/grafnode-components/src/components/ResponsePane/StatusCode/index.js index 806bbd6b1..802637f1a 100644 --- a/packages/grafnode-components/src/components/ResponsePane/StatusCode/index.js +++ b/packages/grafnode-components/src/components/ResponsePane/StatusCode/index.js @@ -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 ( - - 200 OK + + {status} {statusCodePhraseMap[status]} ) }; diff --git a/packages/grafnode-components/src/components/ResponsePane/index.js b/packages/grafnode-components/src/components/ResponsePane/index.js index 6a0cad090..80edb17f6 100644 --- a/packages/grafnode-components/src/components/ResponsePane/index.js +++ b/packages/grafnode-components/src/components/ResponsePane/index.js @@ -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 ( ); } case 'headers': { return ( - + ); } @@ -44,11 +46,13 @@ const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
setSelectedTab('response')}>Response
setSelectedTab('headers')}>Headers
-
- - - -
+ {!isLoading ? ( +
+ + + +
+ ) : null }
{getTabPanel(selectedTab)} diff --git a/packages/grafnode-run/src/providers/Store/reducer.js b/packages/grafnode-run/src/providers/Store/reducer.js index a9a00557a..33ab693cc 100644 --- a/packages/grafnode-run/src/providers/Store/reducer.js +++ b/packages/grafnode-run/src/providers/Store/reducer.js @@ -67,7 +67,6 @@ const reducer = (state, action) => { if(item) { item.response = action.response; - item.responseHeaders = action.responseHeaders; } } });