diff --git a/app/components/SizeTag.js b/app/components/SizeTag.js new file mode 100644 index 000000000..0a96cc390 --- /dev/null +++ b/app/components/SizeTag.js @@ -0,0 +1,37 @@ +import React, {Component, PropTypes} from 'react' + +class SizeTag extends Component { + render () { + const bytes = Math.round(this.props.bytes * 10) / 10; + let size; + + let unit = 'B'; + if (bytes < 1024) { + size = bytes; + unit = 'B'; + } else if (bytes < 1024 * 1024) { + size = bytes / 1024; + unit = 'KB'; + } else if (bytes < 1024 * 1024) { + size = bytes / 1024 / 1024; + unit = 'MB'; + } else { + size = bytes / 1024 / 1024 / 1024; + unit = 'GB'; + } + + const responseSizeString = Math.round(size * 10) / 10 + ' ' + unit; + + return ( +
+ SIZE {responseSizeString} +
+ ); + } +} + +SizeTag.propTypes = { + bytes: PropTypes.number.isRequired +}; + +export default SizeTag; diff --git a/app/components/StatusTag.js b/app/components/StatusTag.js new file mode 100644 index 000000000..9c4041fad --- /dev/null +++ b/app/components/StatusTag.js @@ -0,0 +1,45 @@ +import classnames from 'classnames'; +import React, {Component, PropTypes} from 'react' + +class StatusTag extends Component { + render () { + let {statusMessage} = this.props; + const statusCode = String(this.props.statusCode); + + let colorClass; + let backupStatusMessage; + + if (statusCode.startsWith('1')) { + colorClass = 'info'; + backupStatusMessage = 'INFO'; + } else if (statusCode.startsWith('2')) { + colorClass = 'success'; + backupStatusMessage = 'SUCCESS'; + } else if (statusCode.startsWith('3')) { + colorClass = 'surprise'; + backupStatusMessage = 'REDIRECT'; + } else if (statusCode.startsWith('4')) { + colorClass = 'warning'; + backupStatusMessage = 'INVALID'; + } else if (statusCode.startsWith('5')) { + colorClass = 'danger'; + backupStatusMessage = 'ERROR'; + } else { + colorClass = 'info'; + backupStatusMessage = 'UNKNOWN'; + } + + return ( +
+ {statusCode} {statusMessage || backupStatusMessage} +
+ ); + } +} + +StatusTag.propTypes = { + statusCode: PropTypes.number.isRequired, + statusMessage: PropTypes.string +}; + +export default StatusTag; diff --git a/app/components/TimeTag.js b/app/components/TimeTag.js new file mode 100644 index 000000000..3248ec2cd --- /dev/null +++ b/app/components/TimeTag.js @@ -0,0 +1,19 @@ +import React, {Component, PropTypes} from 'react' + +class TimeTag extends Component { + render () { + const {milliseconds} = this.props; + + return ( +
+ TIME {milliseconds} ms +
+ ); + } +} + +TimeTag.propTypes = { + milliseconds: PropTypes.number.isRequired +}; + +export default TimeTag; diff --git a/app/containers/App.js b/app/containers/App.js index b9d747c29..8984a0288 100644 --- a/app/containers/App.js +++ b/app/containers/App.js @@ -9,6 +9,9 @@ import KeyValueEditor from '../components/base/KeyValueEditor' import RequestBodyEditor from '../components/RequestBodyEditor' import RequestAuthEditor from '../components/RequestAuthEditor' import RequestUrlBar from '../components/RequestUrlBar' +import StatusTag from '../components/StatusTag' +import SizeTag from '../components/SizeTag' +import TimeTag from '../components/TimeTag' import Sidebar from '../components/Sidebar' import EnvironmentEditModal from '../components/modals/EnvironmentEditModal' @@ -94,13 +97,19 @@ class App extends Component {
-
- {activeResponse && activeResponse.statusCode} SUCCESS -
-
TIME 143ms
+ {!activeResponse ? null : ( +
+ + + +
+ )}
actions.selectTab('response', i)} + onSelect={i => actions.global.selectTab('response', i)} selectedIndex={tabs.response || 0}> diff --git a/app/lib/request.js b/app/lib/request.js index 8ef45152b..65d9de5be 100644 --- a/app/lib/request.js +++ b/app/lib/request.js @@ -41,7 +41,7 @@ function makeRequest (unrenderedRequest, callback, context = {}) { return `${i === 0 ? '?' : '&'}${name}=${value}`; }).join(''); - + const startTime = Date.now(); networkRequest(config, function (err, response) { if (err) { return callback(err); @@ -50,6 +50,9 @@ function makeRequest (unrenderedRequest, callback, context = {}) { body: response.body, contentType: response.headers['content-type'], statusCode: response.statusCode, + statusMessage: response.statusMessage, + time: Date.now() - startTime, + size: response.connection.bytesRead, headers: Object.keys(response.headers).map(name => { const value = response.headers[name]; return {name, value};