From 8f38c0cedd3205aa46ee34f9688e5814eb0b6f10 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sat, 16 Apr 2016 22:10:59 -0700
Subject: [PATCH] Implemented Response tags status size time

---
 app/components/SizeTag.js   | 37 ++++++++++++++++++++++++++++++
 app/components/StatusTag.js | 45 +++++++++++++++++++++++++++++++++++++
 app/components/TimeTag.js   | 19 ++++++++++++++++
 app/containers/App.js       | 19 +++++++++++-----
 app/lib/request.js          |  5 ++++-
 5 files changed, 119 insertions(+), 6 deletions(-)
 create mode 100644 app/components/SizeTag.js
 create mode 100644 app/components/StatusTag.js
 create mode 100644 app/components/TimeTag.js

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 (
+      <div className="tag">
+        <strong>SIZE</strong>&nbsp;{responseSizeString}
+      </div>
+    );
+  }
+}
+
+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 (
+      <div className={classnames('tag', colorClass)}>
+        <strong>{statusCode}</strong>&nbsp;{statusMessage || backupStatusMessage}
+      </div>
+    );
+  }
+}
+
+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 (
+      <div className="tag">
+        <strong>TIME</strong>&nbsp;{milliseconds} ms
+      </div>
+    );
+  }
+}
+
+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 {
           <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>
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};