Add traffic direction cell

Signed-off-by: Yannik Messerli <[email protected]>

Author: yannikmesserli

src/components/FlowsTable/Cell.tsx

@@ -109,6 +109,13 @@ export const Cell = observer(function FlowsTableCell(props: CellProps) {
         </div>
       );
     }
+    case Column.TrafficDirection: {
+      return (
+        <div className={classnames(css.cell, css.trafficDirection)}>
+          {props.flow.trafficDirectionLabel}
+        </div>
+      );
+    }
     case Column.Verdict: {
       const className = classnames(css.cell, css.verdict, {
         [css.forwardedVerdict]: props.flow.verdict === Verdict.Forwarded,

src/components/FlowsTable/Header.tsx

@@ -32,6 +32,11 @@ export const Header = memo<CommonProps>(function FlowsTableHeader(props) {
       {props.visibleColumns.has(Column.L7Info) && (
         <div className={classnames(css.cell, css.l7info)}>{getColumnLabel(Column.L7Info)}</div>
       )}
+      {props.visibleColumns.has(Column.TrafficDirection) && (
+        <div className={classnames(css.cell, css.trafficDirection)}>
+          {getColumnLabel(Column.TrafficDirection)}
+        </div>
+      )}
       {props.visibleColumns.has(Column.Verdict) && (
         <div className={classnames(css.cell, css.verdict)}>{getColumnLabel(Column.Verdict)}</div>
       )}

src/components/FlowsTable/Row.tsx

@@ -61,6 +61,9 @@ export const Row = memo<RowProps>(function FlowsTableRow(props) {
       )}
       {props.visibleColumns.has(Column.DstPort) && <Cell flow={props.flow} kind={Column.DstPort} />}
       {props.visibleColumns.has(Column.L7Info) && <Cell flow={props.flow} kind={Column.L7Info} />}
+      {props.visibleColumns.has(Column.TrafficDirection) && (
+        <Cell flow={props.flow} kind={Column.TrafficDirection} />
+      )}
       {props.visibleColumns.has(Column.Verdict) && <Cell flow={props.flow} kind={Column.Verdict} />}
       {props.visibleColumns.has(Column.Auth) && <Cell flow={props.flow} kind={Column.Auth} />}
       {props.visibleColumns.has(Column.TcpFlags) && (

src/components/FlowsTable/__tests__/Row.test.tsx

@@ -86,7 +86,9 @@ const runTest = (ntest: number, hf: HubbleFlow, exps: Expectations) => {
         row = renderRow(
           <Row
             flow={flow}
-            visibleColumns={new Set(Object.values(Column))}
+            visibleColumns={
+              new Set(Object.values(Column).filter(f => f !== Column.TrafficDirection))
+            }
             isSelected={selected}
             onSelect={onSelect}
           ></Row>,

src/components/FlowsTable/styles.scss

@@ -78,6 +78,11 @@
         text-align: right;
       }
 
+      &.trafficDirection {
+        max-width: 130px;
+        text-align: right;
+      }
+
       &.verdict {
         max-width: 130px;
       }