Skip to content

Migrate UI pages to Lit web components in antrea-ui-components#1273

Draft
heanlan wants to merge 1 commit into
antrea-io:mainfrom
heanlan:lit-web-component
Draft

Migrate UI pages to Lit web components in antrea-ui-components#1273
heanlan wants to merge 1 commit into
antrea-io:mainfrom
heanlan:lit-web-component

Conversation

@heanlan

@heanlan heanlan commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Replace the Clarity Core UI library with a new antrea-ui-components
package of Lit-based custom elements, and migrate all page-level React
components into it so a downstream Angular shell can consume them
without the React dependency.

New components library (client/web/antrea-ui-components):

  • antrea-button, antrea-alert, antrea-card, antrea-input, antrea-nav:
    lightweight replacements for the Clarity Core primitives
  • antrea-summary-page, antrea-settings-page: cluster info and feature
    gate management pages
  • antrea-traceflow-page: DOT graph rendering via d3-graphviz, polling
    loop with retry-after support, live/dropped-only capture modes
  • antrea-flow-visibility-page: SSE-backed live flow list with
    multi-select namespace/pod/service filtering, D3 force-simulation
    service map with namespace hulls, drag/zoom, and verdict-colored edges
  • Shared lib: FlowStreamClient (SSE with reconnect), FlowStore (bounded
    LRU with sliding-window bit rate), typed API helpers, design tokens

React app (client/web/antrea-ui):

  • Replace all page route files with thin Lit wrapper components that
    forward the auth token and bridge antrea-session-expired events to
    the Redux-backed logout flow
  • Delete all React route files, page-level API modules, and store files
    that moved into the components library
  • Move @types/d3 to regular dependencies so the Docker build
    (npm install --omit=dev) still installs the type declarations needed
    when antrea-ui compiles the components source directly

@heanlan heanlan force-pushed the lit-web-component branch from f33b642 to fc37465 Compare June 24, 2026 18:20
Replace the Clarity Core UI library with a new antrea-ui-components
package of Lit-based custom elements, and migrate all page-level React
components into it so a downstream Angular shell can consume them
without the React dependency.

New components library (client/web/antrea-ui-components):
- antrea-button, antrea-alert, antrea-card, antrea-input, antrea-nav:
  lightweight replacements for the Clarity Core primitives
- antrea-summary-page, antrea-settings-page: cluster info and feature
  gate management pages
- antrea-traceflow-page: DOT graph rendering via d3-graphviz, polling
  loop with retry-after support, live/dropped-only capture modes
- antrea-flow-visibility-page: SSE-backed live flow list with
  multi-select namespace/pod/service filtering, D3 force-simulation
  service map with namespace hulls, drag/zoom, and verdict-colored edges
- Shared lib: FlowStreamClient (SSE with reconnect), FlowStore (bounded
  LRU with sliding-window bit rate), typed API helpers, design tokens

React app (client/web/antrea-ui):
- Replace all page route files with thin Lit wrapper components that
  forward the auth token and bridge antrea-session-expired events to
  the Redux-backed logout flow
- Delete all React route files, page-level API modules, and store files
  that moved into the components library
- Move @types/d3 to regular dependencies so the Docker build
  (npm install --omit=dev) still installs the type declarations needed
  when antrea-ui compiles the components source directly
@heanlan heanlan force-pushed the lit-web-component branch from fc37465 to a438543 Compare June 24, 2026 20:57
@heanlan heanlan changed the title Replace Clarity Core UI library with Lit-based web components Migrate UI pages to Lit web components in antrea-ui-components Jun 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant