Address comments

- Remove Follow field from FlowStreamFilter: the SSE endpoint always
  streams in follow mode; exposing a non-functional field on the API
  was misleading.

- Move FlowStreamFilter and FlowFilterDirection out of apis/v1 and into
  the flowstream handler package, as the filter is parsed from URL query
  parameters (not a JSON body) and does not belong in the public JSON
  API types.

- Copy FlowStreamService proto stubs locally under pkg/flowpb instead
  of depending on antrea.io/antrea/v2, which pulls in the entire Antrea
  module and its transitive dependencies.

- Merge DroppedCount and Flows into a single FlowStreamEvent per gRPC
  response, matching how the gRPC layer itself works.

- Expose flowAggregator.serverName as a Helm chart value and config
  field instead of hardcoding the TLS ServerName override.

- Use {{ .Release.Name }} in the flow-aggregator RoleBinding name to
  avoid collisions when multiple antrea-ui releases share the same
  flow-aggregator namespace.

- Move flow-store and use-flow-stream out of src/api/ into src/store/
  and src/hooks/ respectively, as they are not network client modules.

- Restore .env.development to VITE_API_SERVER=http://localhost:8080 and
  remove the Vite dev proxy; the backend already configures CORS for
  localhost:3000 in dev mode so the proxy is unnecessary.

Signed-off-by: Anlan He <anlan.he@broadcom.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: heanlan

apis/v1/flow.go

@@ -161,30 +161,3 @@ type FlowStreamDroppedEvent struct {
 type FlowStreamErrorEvent struct {
 	Message string `json:"message"`
 }
-
-// FlowFilterDirection matches antrea FlowFilter.direction (service.proto, FlowStreamService).
-// It is distinct from per-flow FlowDirection in flow.proto (ingress/egress), which is not
-// exposed on this JSON API yet.
-type FlowFilterDirection int
-
-const (
-	FlowFilterDirectionBoth FlowFilterDirection = 0
-	FlowFilterDirectionFrom FlowFilterDirection = 1
-	FlowFilterDirectionTo   FlowFilterDirection = 2
-)
-
-// FlowStreamFilter represents the query parameters for the flow stream endpoint.
-// All specified filters are AND-ed. Within each filter, values are OR-ed.
-type FlowStreamFilter struct {
-	Namespaces       []string            `json:"namespaces,omitempty"`
-	PodNames         []string            `json:"podNames,omitempty"`
-	PodLabelSelector string              `json:"podLabelSelector,omitempty"`
-	ServiceNames     []string            `json:"serviceNames,omitempty"`
-	FlowTypes        []FlowType          `json:"flowTypes,omitempty"`
-	IPs              []string            `json:"ips,omitempty"`
-	Direction        FlowFilterDirection `json:"direction,omitempty"`
-	// Follow is accepted from the client for completeness but is always overridden to true
-	// in the backend SSE handler. The FlowStreamService gRPC stream requires follow mode to
-	// keep the connection open; non-follow (one-shot) mode is not supported over SSE.
-	Follow bool `json:"follow"`
-}

build/charts/antrea-ui/README.md

@@ -45,6 +45,7 @@ Kubernetes: `>= 1.16.0-0`
 | flowAggregator.caConfigMap | string | `"flow-aggregator-ca"` | Name of the ConfigMap (in namespace below) containing the CA certificate (key: ca.crt) used to verify the FlowStreamService server certificate. The FlowStreamService uses server-side TLS only (no client authentication). Leave empty to skip server certificate verification (dev/test only). |
 | flowAggregator.enabled | bool | `false` | When true, the backend connects to Flow Aggregator's FlowStreamService over gRPC. |
 | flowAggregator.namespace | string | `"flow-aggregator"` | Namespace where the Flow Aggregator is installed. |
+| flowAggregator.serverName | string | `""` | Override the TLS server name used for certificate verification. Useful when dialing via kubectl port-forward (loopback address) while the server cert is issued for the in-cluster Service DNS name (e.g. flow-aggregator.flow-aggregator.svc). Leave empty to use the hostname from the address field. |
 | frontend.extraVolumeMounts | list | `[]` | Additional volumeMounts. |
 | frontend.image | object | `{"pullPolicy":"IfNotPresent","repository":"antrea/antrea-ui-frontend","tag":""}` | Container image to use for the Antrea UI frontend. |
 | frontend.port | int | `3000` | Container port on which the frontend will listen. |

build/charts/antrea-ui/templates/_backend_conf.tpl

@@ -20,5 +20,6 @@ flowAggregator:
 {{- if .Values.flowAggregator.enabled }}
   caConfigMap: {{ .Values.flowAggregator.caConfigMap | quote }}
   namespace: {{ .Values.flowAggregator.namespace | default "flow-aggregator" | quote }}
+  serverName: {{ .Values.flowAggregator.serverName | quote }}
 {{- end }}
 {{- end }}

build/charts/antrea-ui/templates/flow-aggregator-rolebinding.yaml

@@ -4,7 +4,7 @@ apiVersion: rbac.authorization.k8s.io/v1
 metadata:
   labels:
     app: antrea-ui
-  name: antrea-ui-flow-aggregator-ca-reader
+  name: {{ .Release.Name }}-flow-aggregator-ca-reader
   # This RoleBinding is in the flow-aggregator namespace so the antrea-ui
   # ServiceAccount can read the flow-aggregator-ca ConfigMap across namespaces.
   # It references flow-aggregator-exporter-role which is created by the

build/charts/antrea-ui/values.yaml

@@ -47,6 +47,11 @@ flowAggregator:
   caConfigMap: flow-aggregator-ca
   # -- Namespace where the Flow Aggregator is installed.
   namespace: flow-aggregator
+  # -- Override the TLS server name used for certificate verification. Useful when dialing
+  # via kubectl port-forward (loopback address) while the server cert is issued for the
+  # in-cluster Service DNS name (e.g. flow-aggregator.flow-aggregator.svc).
+  # Leave empty to use the hostname from the address field.
+  serverName: ""
 
 security:
   # -- (bool) Set the Secure attribute for Antrea UI cookies. The attribute is set by default when HTTPS is

client/web/antrea-ui/.env.development

@@ -1,4 +1 @@
-# VITE_API_SERVER is intentionally empty in development. API requests (/api, /auth)
-# are proxied to http://localhost:8080 by the Vite dev server (see vite.config.ts),
-# matching the production nginx proxy setup.
-VITE_API_SERVER=
+VITE_API_SERVER=http://localhost:8080

client/web/antrea-ui/src/api/flow-stream.test.ts

@@ -15,24 +15,24 @@
  */
 
 import { describe, expect, it } from 'vitest';
-import { streamFilterKey } from './flow-stream';
+import { streamFilterKey, FlowStreamFilter } from './flow-stream';
 
 describe('streamFilterKey', () => {
     it('matches for different object instances with the same filter', () => {
-        const a = { follow: true as const };
-        const b = { follow: true as const };
+        const a: FlowStreamFilter = {};
+        const b: FlowStreamFilter = {};
         expect(streamFilterKey(a)).toBe(streamFilterKey(b));
     });
 
     it('normalizes array field order', () => {
-        const a = { follow: true as const, namespaces: ['z', 'a'] };
-        const b = { follow: true as const, namespaces: ['a', 'z'] };
+        const a: FlowStreamFilter = { namespaces: ['z', 'a'] };
+        const b: FlowStreamFilter = { namespaces: ['a', 'z'] };
         expect(streamFilterKey(a)).toBe(streamFilterKey(b));
     });
 
     it('changes when a filter field changes', () => {
-        const empty = { follow: true as const };
-        const withNs = { follow: true as const, namespaces: ['default'] };
+        const empty: FlowStreamFilter = {};
+        const withNs: FlowStreamFilter = { namespaces: ['default'] };
         expect(streamFilterKey(empty)).not.toBe(streamFilterKey(withNs));
     });
 });

client/web/antrea-ui/src/api/flow-stream.ts

@@ -32,7 +32,6 @@ export interface FlowStreamFilter {
     flowTypes?: number[];
     ips?: string[];
     direction?: FlowFilterDirection;
-    follow?: boolean;
 }
 
 /**
@@ -48,7 +47,6 @@ export function streamFilterKey(f: FlowStreamFilter): string {
     const direction =
         f.direction && f.direction !== 'both' ? f.direction : 'both';
     return JSON.stringify({
-        follow: f.follow !== false,
         namespaces,
         pods,
         podLabelSelector: f.podLabelSelector ?? '',
@@ -102,7 +100,6 @@ function buildStreamURL(filter: FlowStreamFilter): string {
     if (filter.direction && filter.direction !== 'both') {
         params.set('direction', filter.direction);
     }
-    params.set('follow', filter.follow !== false ? 'true' : 'false');
     return `${apiUri}/flows/stream?${params.toString()}`;
 }
 

client/web/antrea-ui/src/components/flow-filters.tsx

@@ -19,7 +19,7 @@ import { CdsButton } from '@cds/react/button';
 import { CdsSelect } from '@cds/react/select';
 import { FlowType, flowTypeLabel, destinationK8sServiceFilterKey } from '../api/flow-types';
 import { FlowStreamFilter, FlowFilterDirection } from '../api/flow-stream';
-import { FlowEntry } from '../api/flow-store';
+import { FlowEntry } from '../store/flow-store';
 
 interface FlowFiltersProps {
     onFilterChange: (filter: FlowStreamFilter) => void;
@@ -235,12 +235,12 @@ export default function FlowFilters({
         setIpsText('');
         setPodLabelSelector('');
         setMenusCloseNonce(n => n + 1);
-        onFilterChange({ follow: true });
+        onFilterChange({});
     }, [onFilterChange]);
 
     const applyFilters = useCallback(() => {
         setMenusCloseNonce(n => n + 1);
-        const filter: FlowStreamFilter = { follow: true };
+        const filter: FlowStreamFilter = {};
         if (selectedNamespaces.length > 0) {
             filter.namespaces = selectedNamespaces;
         }

…web/antrea-ui/src/api/use-flow-stream.ts …b/antrea-ui/src/hooks/use-flow-stream.tsclient/web/antrea-ui/src/api/use-flow-stream.ts renamed to client/web/antrea-ui/src/hooks/use-flow-stream.ts client/web/antrea-ui/src/api/use-flow-stream.ts renamed to client/web/antrea-ui/src/hooks/use-flow-stream.ts

@@ -15,9 +15,9 @@
  */
 
 import { useEffect, useRef, useState, useCallback, useMemo, useContext } from 'react';
-import { Flow } from './flow-types';
-import { FlowStore, FlowEntry } from './flow-store';
-import { FlowStreamClient, FlowStreamFilter, streamFilterKey } from './flow-stream';
+import { Flow } from '../api/flow-types';
+import { FlowStore, FlowEntry } from '../store/flow-store';
+import { FlowStreamClient, FlowStreamFilter, streamFilterKey } from '../api/flow-stream';
 import SettingsContext from '../components/settings';
 
 export interface UseFlowStreamResult {