From 028dd78291fb7f630d42b22759b86a1b018380c5 Mon Sep 17 00:00:00 2001
From: Arun Swaminathan <arunswaminathan94@gmail.com>
Date: Mon, 15 Oct 2018 22:43:22 -0400
Subject: [PATCH 1/3] #3312 Change colors according to HTTP status code

---
 .../js/components/FlowTable/FlowColumns.jsx   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/src/js/components/FlowTable/FlowColumns.jsx b/web/src/js/components/FlowTable/FlowColumns.jsx
index e60ed4874..d16bdad2a 100644
--- a/web/src/js/components/FlowTable/FlowColumns.jsx
+++ b/web/src/js/components/FlowTable/FlowColumns.jsx
@@ -90,8 +90,26 @@ MethodColumn.headerClass = 'col-method'
 MethodColumn.headerName = 'Method'
 
 export function StatusColumn({ flow }) {
+    let color = 'darkred';
+
+    if (100 <= flow.response.status_code && flow.response.status_code < 200) {
+        color = 'green'
+    }
+    else if (200 <= flow.response.status_code && flow.response.status_code < 300) {
+        color = 'darkgreen'
+    }
+    else if (300 <= flow.response.status_code && flow.response.status_code < 400) {
+        color = 'lightblue'
+    }
+    else if (400 <= flow.response.status_code && flow.response.status_code < 500) {
+        color = 'lightred'
+    }
+    else if (500 <= flow.response.status_code && flow.response.status_code < 600) {
+        color = 'lightred'
+    }
+
     return (
-        <td className="col-status">{flow.response && flow.response.status_code}</td>
+        <td className="col-status" style={{color: color}}>{flow.response && flow.response.status_code}</td>
     )
 }
 

From c1184176e763461267b16643445a815b047e902f Mon Sep 17 00:00:00 2001
From: Arun Swaminathan <arunswaminathan94@gmail.com>
Date: Sat, 20 Oct 2018 04:04:55 -0400
Subject: [PATCH 2/3] Check for null flow response when changing color

---
 web/src/js/components/FlowTable/FlowColumns.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/js/components/FlowTable/FlowColumns.jsx b/web/src/js/components/FlowTable/FlowColumns.jsx
index d16bdad2a..07b54a324 100644
--- a/web/src/js/components/FlowTable/FlowColumns.jsx
+++ b/web/src/js/components/FlowTable/FlowColumns.jsx
@@ -92,19 +92,19 @@ MethodColumn.headerName = 'Method'
 export function StatusColumn({ flow }) {
     let color = 'darkred';
 
-    if (100 <= flow.response.status_code && flow.response.status_code < 200) {
+    if (flow.response !== null && 100 <= flow.response.status_code && flow.response.status_code < 200) {
         color = 'green'
     }
-    else if (200 <= flow.response.status_code && flow.response.status_code < 300) {
+    else if (flow.response !== null && 200 <= flow.response.status_code && flow.response.status_code < 300) {
         color = 'darkgreen'
     }
-    else if (300 <= flow.response.status_code && flow.response.status_code < 400) {
+    else if (flow.response !== null && 300 <= flow.response.status_code && flow.response.status_code < 400) {
         color = 'lightblue'
     }
-    else if (400 <= flow.response.status_code && flow.response.status_code < 500) {
+    else if (flow.response !== null && 400 <= flow.response.status_code && flow.response.status_code < 500) {
         color = 'lightred'
     }
-    else if (500 <= flow.response.status_code && flow.response.status_code < 600) {
+    else if (flow.response !== null && 500 <= flow.response.status_code && flow.response.status_code < 600) {
         color = 'lightred'
     }
 

From a6ba88ae64f1547ddc8f20bb244030f7ee39bff9 Mon Sep 17 00:00:00 2001
From: Arun Swaminathan <arunswaminathan94@gmail.com>
Date: Sat, 20 Oct 2018 04:05:07 -0400
Subject: [PATCH 3/3] Update snapshot tests

---
 .../FlowTable/__snapshots__/FlowColumnsSpec.js.snap          | 5 +++++
 .../components/FlowTable/__snapshots__/FlowRowSpec.js.snap   | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowColumnsSpec.js.snap b/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowColumnsSpec.js.snap
index d69465074..98ba8a109 100644
--- a/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowColumnsSpec.js.snap
+++ b/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowColumnsSpec.js.snap
@@ -109,6 +109,11 @@ exports[`FlowColumns Components should render SizeColumn 1`] = `
 exports[`FlowColumns Components should render StatusColumn 1`] = `
 <td
   className="col-status"
+  style={
+    Object {
+      "color": "darkred",
+    }
+  }
 />
 `;
 
diff --git a/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowRowSpec.js.snap b/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowRowSpec.js.snap
index b065b7462..786488a00 100644
--- a/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowRowSpec.js.snap
+++ b/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowRowSpec.js.snap
@@ -30,6 +30,11 @@ exports[`FlowRow Component should render correctly 1`] = `
   </td>
   <td
     className="col-status"
+    style={
+      Object {
+        "color": "darkgreen",
+      }
+    }
   >
     200
   </td>