Migrate UI pages to Lit web components in antrea-ui-components#1273
Draft
heanlan wants to merge 1 commit into
Draft
Migrate UI pages to Lit web components in antrea-ui-components#1273heanlan wants to merge 1 commit into
heanlan wants to merge 1 commit into
Conversation
f33b642 to
fc37465
Compare
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
fc37465 to
a438543
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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):
lightweight replacements for the Clarity Core primitives
gate management pages
loop with retry-after support, live/dropped-only capture modes
multi-select namespace/pod/service filtering, D3 force-simulation
service map with namespace hulls, drag/zoom, and verdict-colored edges
LRU with sliding-window bit rate), typed API helpers, design tokens
React app (client/web/antrea-ui):
forward the auth token and bridge antrea-session-expired events to
the Redux-backed logout flow
that moved into the components library
(npm install --omit=dev) still installs the type declarations needed
when antrea-ui compiles the components source directly