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`] = `
|
`;
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`] = `
200
|
diff --git a/web/src/js/components/FlowTable/FlowColumns.jsx b/web/src/js/components/FlowTable/FlowColumns.jsx
index e60ed4874..07b54a324 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 (
- {flow.response && flow.response.status_code} |
+ {flow.response && flow.response.status_code} |
)
}