diff options
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> ) } |