feat/policy-names: Add network policy names in hubble UI when they are known and correlated to flows.

Fixes: cilium/hubble#1100
Signed-off-by: Kris Gambirazzi <[email protected]>

Author: kgtw

src/api/__mocks__/data.ts

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

src/api/grpc/common.ts

@@ -181,8 +181,8 @@ export const filterEntryWhitelistFilters = (
   const pod = filter.podNamespace
     ? `${filter.podNamespace}/${filter.query}`
     : filters.namespace
-    ? `${filters.namespace}/${filter.query}`
-    : null;
+      ? `${filters.namespace}/${filter.query}`
+      : null;
 
   if (filter.fromRequired) {
     // NOTE: this makes possible to catch flows [outside of ns] -> [ns]

src/components/FlowsTable/Sidebar.tsx

@@ -19,6 +19,7 @@ import {
   DnsBodyItem,
   IdentityEntry,
   PodEntry,
+  PolicyEntry,
 } from './SidebarComponents';
 
 import css from './styles.scss';
@@ -460,6 +461,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

@@ -252,3 +252,29 @@ export const PodEntry = memo<PodItemProps>(
     );
   },
 );
+
+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/components/TopBar/NamespaceSelectorDropdown.tsx

@@ -58,8 +58,8 @@ export const NamespaceSelectorDropdown = memo<Props>(
       currentNamespace && namespaces.includes(currentNamespace)
         ? currentNamespace
         : currentNamespace
-        ? `Waiting ${currentNamespace} namespace…`
-        : 'Choose namespace';
+          ? `Waiting ${currentNamespace} namespace…`
+          : 'Choose namespace';
 
     return (
       <NamespaceSelect

src/domain/flows/index.ts

@@ -333,8 +333,8 @@ export class Flow {
       this.l7?.type === L7FlowType.Request
         ? '->'
         : this.l7?.type === L7FlowType.Response
-        ? '<-'
-        : '??';
+          ? '<-'
+          : '??';
 
     // TODO: check if this is a correct fingerprints for all but http
     return `${direction} ${l7helpers.getEndpointId(l7)}`;
@@ -517,4 +517,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

@@ -16,6 +16,7 @@ import {
   TrafficDirection as PBTrafficDirection,
   CiliumEventType as PBCiliumEventType,
   Service as PBService,
+  Policy as Policy,
 } from '~backend/proto/flow/flow_pb';
 
 import {
@@ -47,6 +48,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 hubbleFlowFromObj = (obj: any): HubbleFlow | null => {
   obj = obj.flow != null ? obj.flow : obj;
 
@@ -84,6 +87,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,
@@ -105,6 +111,8 @@ export const hubbleFlowFromObj = (obj: any): HubbleFlow | null => {
     summary: obj.summary,
     trafficDirection,
     authType,
+    egressAllowedBy,
+    ingressAllowedBy,
   };
 };
 
@@ -148,6 +156,9 @@ export const hubbleFlowFromPb = (flow: PBFlow): HubbleFlow => {
   const trafficDirection = trafficDirectionFromPb(flow.getTrafficDirection());
   const authType = authTypeFromPb(flow.getAuthType());
 
+  const egressAllowedBy = getNameFromPolicy(flow.getEgressAllowedByList());
+  const ingressAllowedBy = getNameFromPolicy(flow.getIngressAllowedByList());
+
   return {
     time,
     verdict,
@@ -169,6 +180,8 @@ export const hubbleFlowFromPb = (flow: PBFlow): HubbleFlow => {
     summary: flow.getSummary(),
     trafficDirection,
     authType,
+    egressAllowedBy: egressAllowedBy,
+    ingressAllowedBy: ingressAllowedBy,
   };
 };
 
@@ -512,3 +525,25 @@ export const icmpv4FromPb = (icmp: PBICMPv4): ICMPv4 => {
 export const icmpv6FromPb = (icmp: PBICMPv6): ICMPv6 => {
   return icmpv4FromPb(icmp);
 };
+
+export const getNameFromPolicy = (policies: Array<Policy>): Array<string> => {
+  return policies.map(policy => {
+    if (policy.getName() === '') {
+      const labelMap = new Map<string, string>();
+      policy.getLabelsList().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.getNamespace() + '/' + policy.getName();
+  });
+};

src/domain/hubble.ts

@@ -21,6 +21,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

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