Merge pull request #3351 from arun-94/master

#3312 Change colors according to the HTTP status code

3 files changed, 29 insertions, 1 deletions

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 d6946507..98ba8a10 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 b065b746..786488a0 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>
diff --git a/web/src/js/components/FlowTable/FlowColumns.jsx b/web/src/js/components/FlowTable/FlowColumns.jsx
index e60ed487..07b54a32 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 (flow.response !== null && 100 <= flow.response.status_code && flow.response.status_code < 200) {
+        color = 'green'
+    }
+    else if (flow.response !== null && 200 <= flow.response.status_code && flow.response.status_code < 300) {
+        color = 'darkgreen'
+    }
+    else if (flow.response !== null && 300 <= flow.response.status_code && flow.response.status_code < 400) {
+        color = 'lightblue'
+    }
+    else if (flow.response !== null && 400 <= flow.response.status_code && flow.response.status_code < 500) {
+        color = 'lightred'
+    }
+    else if (flow.response !== null && 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>
     )
 }