feat/policy-names: Add network policy names when they are known.

backend/proto/customprotocol/customprotocol_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "customprotocol/customprotocol.proto" (package "customprotocol", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/flow/flow_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "flow/flow.proto" (package "flow", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/google/protobuf/any_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "google/protobuf/any.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/google/protobuf/duration_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "google/protobuf/duration.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/google/protobuf/field_mask_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "google/protobuf/field_mask.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/google/protobuf/timestamp_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "google/protobuf/timestamp.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/google/protobuf/wrappers_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "google/protobuf/wrappers.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/observer/observer_pb.client.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "observer/observer.proto" (package "observer", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/observer/observer_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "observer/observer.proto" (package "observer", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/relay/relay_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "relay/relay.proto" (package "relay", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/ui/notifications_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "ui/notifications.proto" (package "ui", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/ui/status_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "ui/status.proto" (package "ui", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/ui/ui_pb.client.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "ui/ui.proto" (package "ui", syntax proto3)
 // tslint:disable
 // @ts-nocheck

backend/proto/ui/ui_pb.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.3 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
+// @generated by protobuf-ts 2.9.4 with parameter add_pb_suffix,eslint_disable,ts_nocheck,generate_dependencies,long_type_number
 // @generated from protobuf file "ui/ui.proto" (package "ui", syntax proto3)
 // tslint:disable
 // @ts-nocheck

src/api/__mocks__/data.ts

@@ -485,5 +485,7 @@ export const flows: HubbleFlow[] = range(1000).map((): HubbleFlow => {
     verdict: Math.random() <= 0.5 ? Verdict.Forwarded : Verdict.Dropped,
     trafficDirection: Math.random() <= 0.5 ? TrafficDirection.Egress : TrafficDirection.Ingress,
     authType: AuthType.Disbaled,
+    egressAllowedBy: [],
+    ingressAllowedBy: [],
   };
 });

src/components/FlowsTable/Sidebar.tsx

@@ -14,6 +14,7 @@ import {
   DnsBodyItem,
   IdentityEntry,
   PodEntry,
+  PolicyEntry,
 } from './SidebarComponents';
 
 import css from './styles.scss';
@@ -444,6 +445,23 @@ export const FlowsTableSidebar = memo<Props>(function FlowsTableSidebar(props) {
           </div>
         </section>
       )}
+      <hr />
+      {flow.hasEgressAllowedBy && (
+        <section className={css.block}>
+          <span className={css.title}>Egress allowed by policies</span>
+          <div className={css.body}>
+            <PolicyEntry allowedBy={flow.egressAllowedBy} />
+          </div>
+        </section>
+      )}
+      {flow.hasIngressAllowedBy && (
+        <section className={css.block}>
+          <span className={css.title}>Ingress allowed by policies</span>
+          <div className={css.body}>
+            <PolicyEntry allowedBy={flow.ingressAllowedBy} />
+          </div>
+        </section>
+      )}
     </div>
   );
 });

src/components/FlowsTable/SidebarComponents.tsx

@@ -242,3 +242,29 @@ export const PodEntry = memo<PodItemProps>(function FlowsTableSidebarPodEntry(pr
     </span>
   );
 });
+
+export interface PolicyEntryProps {
+  allowedBy: string[];
+}
+
+export const PolicyEntry = memo<PolicyEntryProps>(
+  function FlowsTableSidebarLabelsEntry(props) {
+    return (
+      <div className={css.policies}>
+        {props.allowedBy.map(policyName => {
+          return <PolicyEntryItem key={policyName} name={policyName} />;
+        })}
+      </div>
+    );
+  },
+);
+
+export interface PolicyEntryItemProps {
+  name: string;
+}
+
+export const PolicyEntryItem = memo<PolicyEntryItemProps>(
+  function FlowsTableSidebarPolicyEntry(props) {
+    return <span className={css.policy}>{props.name}</span>;
+  },
+);

src/components/FlowsTable/styles.scss

@@ -237,6 +237,12 @@
         }
       }
 
+      .policies {
+        .policy {
+          display: block;
+        }
+      }
+
       .tcpFlags {
         .tcpFlag {
           margin-right: 5px;

src/domain/flows/index.ts

@@ -614,4 +614,20 @@ export class Flow {
   public get authTypeLabel(): string {
     return authtypeHelpers.toString(this.ref.authType);
   }
+
+  public get hasEgressAllowedBy(): boolean {
+    return this.ref.egressAllowedBy.length > 0;
+  }
+
+  public get hasIngressAllowedBy(): boolean {
+    return this.ref.ingressAllowedBy.length > 0;
+  }
+
+  public get egressAllowedBy(): string[] {
+    return this.ref.egressAllowedBy || [];
+  }
+
+  public get ingressAllowedBy(): string[] {
+    return this.ref.ingressAllowedBy || [];
+  }
 }

src/domain/helpers/flows.ts

@@ -30,6 +30,8 @@ import * as misc from '~/domain/misc';
 import * as verdictHelpers from './verdict';
 import { authTypeFromPb } from './auth-type';
 
+const derivedFrom = 'reserved:io.cilium.policy.derived-from';
+
 export const hubbleFlowFromLogEntry = (entry: string | object): HubbleFlow | null => {
   if (entry == null) return null;
 
@@ -83,6 +85,9 @@ export const hubbleFlowFromObj = (obj: any): HubbleFlow | null => {
   const trafficDirection = trafficDirectionFromStr(obj.trafficDirection);
   const authType = authTypeFromStr(obj.authType);
 
+  const egressAllowedBy = getNameFromPolicy(obj.getEgressAllowedByList);
+  const ingressAllowedBy = getNameFromPolicy(obj.getIngressAllowedByList);
+
   return {
     time,
     verdict,
@@ -104,6 +109,8 @@ export const hubbleFlowFromObj = (obj: any): HubbleFlow | null => {
     summary: obj.summary,
     trafficDirection,
     authType,
+    egressAllowedBy,
+    ingressAllowedBy,
   };
 };
 
@@ -146,6 +153,8 @@ export const hubbleFlowFromPb = (flow: flowpb.Flow): HubbleFlow => {
   const destinationService = flowServiceFromPb(flow.destinationService);
   const trafficDirection = trafficDirectionFromPb(flow.trafficDirection);
   const authType = authTypeFromPb(flow.authType);
+  const egressAllowedBy = getNameFromPolicy(flow.egressAllowedBy);
+  const ingressAllowedBy = getNameFromPolicy(flow.ingressAllowedBy);
 
   return {
     time,
@@ -168,6 +177,8 @@ export const hubbleFlowFromPb = (flow: flowpb.Flow): HubbleFlow => {
     summary: flow.summary,
     trafficDirection,
     authType,
+    egressAllowedBy: egressAllowedBy,
+    ingressAllowedBy: ingressAllowedBy,
   };
 };
 
@@ -504,3 +515,25 @@ export const icmpv4FromPb = (icmp: flowpb.ICMPv4): ICMPv4 => {
 export const icmpv6FromPb = (icmp: flowpb.ICMPv6): ICMPv6 => {
   return icmpv4FromPb(icmp);
 };
+
+export const getNameFromPolicy = (policies: Array<flowpb.Policy>): Array<string> => {
+  return policies.map(policy => {
+    if (policy.name === '') {
+      const labelMap = new Map<string, string>();
+      policy.labels.forEach(keyValueString => {
+        const [key, value] = keyValueString.split('=');
+        labelMap.set(key, value);
+      });
+
+      // Note: We try to automatically derive the policy name if it is set.
+      //       This is set by the policy mapstate for certain known scenarios, like allowing localhost access.
+      //       See: https://github.com/cilium/cilium/blob/614f2ddcc8fe93aeaf463b4535dcc0f1dcc373a3/pkg/policy/mapstate.go#L42-L49
+      if (labelMap.has(derivedFrom)) {
+        return '<cilium-internal>/' + labelMap.get(derivedFrom);
+      }
+      return '<cilium-internal>/unknown';
+    }
+
+    return policy.namespace + '/' + policy.name;
+  });
+};

src/domain/hubble.ts

@@ -26,6 +26,8 @@ export interface HubbleFlow {
   readonly summary: string;
   readonly trafficDirection: TrafficDirection;
   readonly authType: AuthType;
+  readonly egressAllowedBy: Array<string>;
+  readonly ingressAllowedBy: Array<string>;
 }
 
 export interface HubbleService {

src/testing/data/flows.ts

@@ -51,6 +51,8 @@ export const icmpv4Flow: HubbleFlow = {
   },
   trafficDirection: TrafficDirection.Ingress,
   authType: AuthType.Disbaled,
+  egressAllowedBy: [],
+  ingressAllowedBy: [],
 };
 
 export const icmpv6Flow: HubbleFlow = {
@@ -100,6 +102,8 @@ export const hubbleOne: HubbleFlow = {
   },
   trafficDirection: TrafficDirection.Ingress,
   authType: AuthType.Disbaled,
+  egressAllowedBy: [],
+  ingressAllowedBy: [],
 };
 
 export const hubbleNoSourceName: HubbleFlow = {

src/testing/helpers.ts

@@ -63,6 +63,8 @@ export const flowsBetweenPods = (senderPod: string, receiverPod: string): FlowsB
     time: nextFlowTimestamp(),
     trafficDirection: TrafficDirection.Ingress,
     authType: AuthType.Disbaled,
+    egressAllowedBy: [],
+    ingressAllowedBy: [],
   };
 
   const fromBtoA: HubbleFlow = {
@@ -99,6 +101,8 @@ export const flowsBetweenPods = (senderPod: string, receiverPod: string): FlowsB
     time: nextFlowTimestamp(),
     trafficDirection: TrafficDirection.Ingress,
     authType: AuthType.Disbaled,
+    egressAllowedBy: [],
+    ingressAllowedBy: [],
   };
 
   return { fromAtoB, fromBtoA };
@@ -139,6 +143,8 @@ export const flowsBetweenServices = (a: HubbleService, b: HubbleService): FlowsB
     time: nextFlowTimestamp(),
     trafficDirection: TrafficDirection.Ingress,
     authType: AuthType.Disbaled,
+    egressAllowedBy: [],
+    ingressAllowedBy: [],
   };
 
   const fromBtoA: HubbleFlow = {
@@ -175,6 +181,8 @@ export const flowsBetweenServices = (a: HubbleService, b: HubbleService): FlowsB
     time: nextFlowTimestamp(),
     trafficDirection: TrafficDirection.Ingress,
     authType: AuthType.Disbaled,
+    egressAllowedBy: [],
+    ingressAllowedBy: [],
   };
 
   return { fromAtoB, fromBtoA };
@@ -225,6 +233,8 @@ export const flowsFromToService = (from: HubbleService, to: HubbleService) => {
       time: nextFlowTimestamp(),
       trafficDirection: TrafficDirection.Ingress,
       authType: AuthType.Disbaled,
+      egressAllowedBy: [],
+      ingressAllowedBy: [],
     };
 
     const fromBtoA: HubbleFlow = {
@@ -259,6 +269,8 @@ export const flowsFromToService = (from: HubbleService, to: HubbleService) => {
       time: nextFlowTimestamp(),
       trafficDirection: TrafficDirection.Ingress,
       authType: AuthType.Disbaled,
+      egressAllowedBy: [],
+      ingressAllowedBy: [],
     };
 
     return { fromAtoB, fromBtoA };