Implemented Response tags status size time

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 (
+      <div className="tag">
+        <strong>SIZE</strong>&nbsp;{responseSizeString}
+      </div>
+    );
+  }
+}
+
+SizeTag.propTypes = {
+  bytes: PropTypes.number.isRequired
+};
+
+export default SizeTag;

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 (
+      <div className={classnames('tag', colorClass)}>
+        <strong>{statusCode}</strong>&nbsp;{statusMessage || backupStatusMessage}
+      </div>
+    );
+  }
+}
+
+StatusTag.propTypes = {
+  statusCode: PropTypes.number.isRequired,
+  statusMessage: PropTypes.string
+};
+
+export default StatusTag;

app/components/TimeTag.js

@@ -0,0 +1,19 @@
+import React, {Component, PropTypes} from 'react'
+
+class TimeTag extends Component {
+  render () {
+    const {milliseconds} = this.props;
+
+    return (
+      <div className="tag">
+        <strong>TIME</strong>&nbsp;{milliseconds} ms
+      </div>
+    );
+  }
+}
+
+TimeTag.propTypes = {
+  milliseconds: PropTypes.number.isRequired
+};
+
+export default TimeTag;

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 {
           <div className="grid--v wide">
             <header
               className="grid grid--center header text-center bg-light txt-sm section__header">
-              <div className="tag success">
-                <strong>{activeResponse && activeResponse.statusCode}</strong>&nbsp;SUCCESS
-              </div>
-              <div className="tag">TIME&nbsp;<strong>143ms</strong></div>
+              {!activeResponse ? null : (
+                <div>
+                  <StatusTag
+                    statusCode={activeResponse.statusCode}
+                    statusMessage={activeResponse.statusMessage}
+                  />
+                  <TimeTag milliseconds={activeResponse.time}/>
+                  <SizeTag bytes={activeResponse.size}/>
+                </div>
+              )}
             </header>
             <Tabs className="grid__cell grid--v section__body"
-                  onSelect={i => actions.selectTab('response', i)}
+                  onSelect={i => actions.global.selectTab('response', i)}
                   selectedIndex={tabs.response || 0}>
               <TabList className="grid grid--start">
                 <Tab><button className="btn btn--compact">Preview</button></Tab>

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