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