Add Protocol struct and make it effect the UI

ui/src/components/HarEntry.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styles from './style/HarEntry.module.sass';
 import StatusCode, {getClassification, StatusCodeClassification} from "./StatusCode";
+import Protocol, {ProtocolInterface} from "./Protocol"
 import {EndpointPath} from "./EndpointPath";
 import ingoingIconSuccess from "./assets/ingoing-traffic-success.svg"
 import ingoingIconFailure from "./assets/ingoing-traffic-failure.svg"
@@ -10,6 +11,7 @@ import outgoingIconFailure from "./assets/outgoing-traffic-failure.svg"
 import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg"
 
 interface HAREntry {
+    protocol: ProtocolInterface,
     method?: string,
     path: string,
     service: string,
@@ -64,7 +66,14 @@ export const HarEntry: React.FC<HAREntryProps> = ({entry, setFocusedEntryId, isS
         }
     }
     return <>
-        <div id={entry.id} className={`${styles.row} ${isSelected ? styles.rowSelected : backgroundColor}`} onClick={() => setFocusedEntryId(entry.id)}>
+        <div
+            id={entry.id}
+            className={`${styles.row}
+            ${isSelected ? styles.rowSelected : backgroundColor}`}
+            onClick={() => setFocusedEntryId(entry.id)}
+            style={{border: isSelected ? `1px ${entry.protocol.background_color} solid` : "1px transparent solid"}}
+        >
+            <Protocol protocol={entry.protocol}/>
             {entry.statusCode && <div>
                 <StatusCode statusCode={entry.statusCode}/>
             </div>}

ui/src/components/Protocol.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import internal from "stream";
+import styles from './style/Protocol.module.sass';
+
+export interface ProtocolInterface {
+    name: string,
+    long_name: string,
+    abbreviation: string,
+    background_color: string,
+    foreground_color: string,
+    font_size: number,
+    reference_link: string,
+    outbound_ports: string[],
+    inbound_ports: string,
+}
+
+interface ProtocolProps {
+    protocol: ProtocolInterface
+}
+
+const Protocol: React.FC<ProtocolProps> = ({protocol}) => {
+    return <a target="_blank" rel="noopener noreferrer" href={protocol.reference_link}>
+        <span
+            className={`${styles.base}`}
+            style={{
+                backgroundColor: protocol.background_color,
+                color: protocol.foreground_color,
+                fontSize: protocol.font_size,
+            }}
+            title={protocol.long_name}
+        >
+            {protocol.abbreviation}
+        </span>
+    </a>
+};
+
+export default Protocol;

ui/src/components/style/HarEntry.module.sass

@@ -19,17 +19,17 @@
 
 .rowSelected
   border: 1px $blue-color solid
-  border-left: 5px $blue-color solid
+//   border-left: 5px $blue-color solid
   margin-left: 10px
   margin-right: 3px
 
 .ruleSuccessRow
   border: 1px $success-color solid
-  border-left: 5px $success-color solid
+//   border-left: 5px $success-color solid
 
 .ruleFailureRow
   border: 1px $failure-color solid
-  border-left: 5px $failure-color solid
+//   border-left: 5px $failure-color solid
 
 .service
   text-overflow: ellipsis

ui/src/components/style/Protocol.module.sass

@@ -0,0 +1,20 @@
+@import 'variables.module'
+
+.base
+    // border-radius: 4px
+    border-radius: 4px 0 0 4px
+    width: 22px
+    height: 48px
+    font-size: 10px
+    display: inline-block
+    text-align: center
+    line-height: 22px
+    font-weight: 600
+    writing-mode: vertical-lr;
+    // transform: rotate(-180deg);
+    text-orientation: upright;
+    // letter-spacing: 2px;
+    background-color: #000
+    color: #fff
+    margin-left: -8px;
+    margin-bottom: -4px;

ui/src/components/style/StatusCode.module.sass

@@ -9,6 +9,7 @@
     text-align: center
     line-height: 22px
     font-weight: 600
+    margin-left: 8px
 
 .neutral
     background: gray
@@ -20,4 +21,4 @@
 
 .failure
     background: $failure-color
-    color: white
+    color: white