From b762e3c19499a788c0db95a6fdeb3b16c8ccdabb Mon Sep 17 00:00:00 2001 From: nimrod-up9 <59927337+nimrod-up9@users.noreply.github.com> Date: Wed, 30 Jun 2021 12:18:29 +0300 Subject: [PATCH] New icons for direction (#88) * Replaced direction icons with designed icons. Match color to status code. * Took care of padding. Added seperator line. * Removed 1 div level and unnecessary properties in sass. * Removed ; * Changed to fixed svgs. --- ui/src/components/HarEntry.tsx | 38 ++++++++++++++----- ui/src/components/StatusCode.tsx | 14 +++++-- .../assets/ingoing-traffic-failure.svg | 5 +++ .../assets/ingoing-traffic-neutral.svg | 5 +++ .../assets/ingoing-traffic-success.svg | 5 +++ ui/src/components/assets/ingoing-traffic.svg | 1 - .../assets/outgoing-traffic-failure.svg | 5 +++ .../assets/outgoing-traffic-neutral.svg | 5 +++ .../assets/outgoing-traffic-success.svg | 5 +++ ui/src/components/assets/outgoing-traffic.svg | 1 - ui/src/components/style/HarEntry.module.sass | 18 +++------ 11 files changed, 75 insertions(+), 27 deletions(-) create mode 100644 ui/src/components/assets/ingoing-traffic-failure.svg create mode 100644 ui/src/components/assets/ingoing-traffic-neutral.svg create mode 100644 ui/src/components/assets/ingoing-traffic-success.svg delete mode 100644 ui/src/components/assets/ingoing-traffic.svg create mode 100644 ui/src/components/assets/outgoing-traffic-failure.svg create mode 100644 ui/src/components/assets/outgoing-traffic-neutral.svg create mode 100644 ui/src/components/assets/outgoing-traffic-success.svg delete mode 100644 ui/src/components/assets/outgoing-traffic.svg diff --git a/ui/src/components/HarEntry.tsx b/ui/src/components/HarEntry.tsx index 95f3c6ffd..368ac92cb 100644 --- a/ui/src/components/HarEntry.tsx +++ b/ui/src/components/HarEntry.tsx @@ -1,9 +1,13 @@ import React from "react"; import styles from './style/HarEntry.module.sass'; -import StatusCode from "./StatusCode"; +import StatusCode, {getClassification, StatusCodeClassification} from "./StatusCode"; import {EndpointPath} from "./EndpointPath"; -import ingoingIcon from "./assets/ingoing-traffic.svg" -import outgoingIcon from "./assets/outgoing-traffic.svg" +import ingoingIconSuccess from "./assets/ingoing-traffic-success.svg" +import ingoingIconFailure from "./assets/ingoing-traffic-failure.svg" +import ingoingIconNeutral from "./assets/ingoing-traffic-neutral.svg" +import outgoingIconSuccess from "./assets/outgoing-traffic-success.svg" +import outgoingIconFailure from "./assets/outgoing-traffic-failure.svg" +import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg" interface HAREntry { method?: string, @@ -24,6 +28,26 @@ interface HAREntryProps { } export const HarEntry: React.FC = ({entry, setFocusedEntryId, isSelected}) => { + const classification = getClassification(entry.statusCode) + let ingoingIcon; + let outgoingIcon; + switch(classification) { + case StatusCodeClassification.SUCCESS: { + ingoingIcon = ingoingIconSuccess; + outgoingIcon = outgoingIconSuccess; + break; + } + case StatusCodeClassification.FAILURE: { + ingoingIcon = ingoingIconFailure; + outgoingIcon = outgoingIconFailure; + break; + } + case StatusCodeClassification.NEUTRAL: { + ingoingIcon = ingoingIconNeutral; + outgoingIcon = outgoingIconNeutral; + break; + } + } return <>
setFocusedEntryId(entry.id)}> @@ -38,13 +62,9 @@ export const HarEntry: React.FC = ({entry, setFocusedEntryId, isS
{entry.isOutgoing ? -
- outgoing traffic -
+ outgoing traffic : -
- ingoing traffic -
+ ingoing traffic }
{new Date(+entry.timestamp)?.toLocaleString()}
diff --git a/ui/src/components/StatusCode.tsx b/ui/src/components/StatusCode.tsx index 376a277ed..2230a9b8a 100644 --- a/ui/src/components/StatusCode.tsx +++ b/ui/src/components/StatusCode.tsx @@ -1,7 +1,7 @@ import React from "react"; import styles from './style/StatusCode.module.sass'; -enum StatusCodeClassification { +export enum StatusCodeClassification { SUCCESS = "success", FAILURE = "failure", NEUTRAL = "neutral" @@ -14,6 +14,12 @@ interface HAREntryProps { const StatusCode: React.FC = ({statusCode}) => { + const classification = getClassification(statusCode) + + return {statusCode} +}; + +export function getClassification(statusCode: number): string { let classification = StatusCodeClassification.NEUTRAL; if (statusCode >= 200 && statusCode <= 399) { @@ -22,7 +28,7 @@ const StatusCode: React.FC = ({statusCode}) => { classification = StatusCodeClassification.FAILURE; } - return {statusCode} -}; + return classification +} -export default StatusCode; \ No newline at end of file +export default StatusCode; diff --git a/ui/src/components/assets/ingoing-traffic-failure.svg b/ui/src/components/assets/ingoing-traffic-failure.svg new file mode 100644 index 000000000..3bb4e26f2 --- /dev/null +++ b/ui/src/components/assets/ingoing-traffic-failure.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/src/components/assets/ingoing-traffic-neutral.svg b/ui/src/components/assets/ingoing-traffic-neutral.svg new file mode 100644 index 000000000..9720d65f2 --- /dev/null +++ b/ui/src/components/assets/ingoing-traffic-neutral.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/src/components/assets/ingoing-traffic-success.svg b/ui/src/components/assets/ingoing-traffic-success.svg new file mode 100644 index 000000000..f1c745e64 --- /dev/null +++ b/ui/src/components/assets/ingoing-traffic-success.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/src/components/assets/ingoing-traffic.svg b/ui/src/components/assets/ingoing-traffic.svg deleted file mode 100644 index 7aaded9a8..000000000 --- a/ui/src/components/assets/ingoing-traffic.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/ui/src/components/assets/outgoing-traffic-failure.svg b/ui/src/components/assets/outgoing-traffic-failure.svg new file mode 100644 index 000000000..0a4f7cfb3 --- /dev/null +++ b/ui/src/components/assets/outgoing-traffic-failure.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/src/components/assets/outgoing-traffic-neutral.svg b/ui/src/components/assets/outgoing-traffic-neutral.svg new file mode 100644 index 000000000..8f952e353 --- /dev/null +++ b/ui/src/components/assets/outgoing-traffic-neutral.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/src/components/assets/outgoing-traffic-success.svg b/ui/src/components/assets/outgoing-traffic-success.svg new file mode 100644 index 000000000..477fb7350 --- /dev/null +++ b/ui/src/components/assets/outgoing-traffic-success.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/src/components/assets/outgoing-traffic.svg b/ui/src/components/assets/outgoing-traffic.svg deleted file mode 100644 index 1c8ec87d7..000000000 --- a/ui/src/components/assets/outgoing-traffic.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/ui/src/components/style/HarEntry.module.sass b/ui/src/components/style/HarEntry.module.sass index 3e28bfee9..fc5442f48 100644 --- a/ui/src/components/style/HarEntry.module.sass +++ b/ui/src/components/style/HarEntry.module.sass @@ -37,9 +37,10 @@ .timestamp font-size: 12px color: $secondary-font-color - padding-left: 8px - padding-right: 8px + padding-left: 12px flex-shrink: 0 + width: 145px + text-align: left .endpointServiceContainer display: flex @@ -51,13 +52,6 @@ .directionContainer display: flex - width: 28px - flex-direction: column - -.outgoingIcon - display: flex - align-self: flex-end - -.ingoingIcon - display: flex - align-self: flex-start + border-right: 1px solid $data-background-color + padding: 4px + padding-right: 12px