dididy opened a new pull request, #5111: URL: https://github.com/apache/zeppelin/pull/5111
### What is this PR for? This PR requires Angular 12 or higher to use Webpack 5's Module Federation, so it is based on #5109, which updates Angular to 13. I will rebase after #5109 is merged. Since the master branch is still on Angular 9, this PR is not directly applicable to it. --- [Micro Frontend Migration(Angular to React) Proposal](https://cwiki.apache.org/confluence/display/ZEPPELIN/Micro+Frontend+Migration%28Angular+to+React%29+Proposal) --- #### Summary * Implement React-based micro-frontend architecture using Module Federation. * Convert published paragraph component to support React rendering. * Add environment-based configuration for development and production builds. #### Changes **1. React Micro-Frontend Project Setup** * Created new React project at `projects/zeppelin-react/`. * Configured Webpack Module Federation for micro-frontend architecture. * Set up React 18 with TypeScript support. **2. Component Implementation** *New React Components:* * `PublishedParagraph`: Main entry point for published paragraph rendering. * `SingleResultRenderer`: Template for rendering single paragraph results. *Renderers:* * `HTMLRenderer`: Renders HTML content with sanitization. * `TextRenderer`: Renders plain text with ANSI support. * `ImageRenderer`: Renders image outputs. *Visualizations:* * `TableVisualization`: Table rendering with sorting, filtering, and export. * `VisualizationControls`: Control panel for table operations. *Common Components:* * `Loading`: Loading state indicator. * `Empty`: Empty state display. **3. Angular Integration** * `paragraph.component.ts`: Added React widget loading logic via Module Federation. * `paragraph.component.html`: Added React container element. * `environment.ts` / `environment.prod.ts`: Added `reactRemoteEntryUrl` configuration. * Development: `http://localhost:3001/remoteEntry.js` * Production: `/assets/react/remoteEntry.js` **4. Build Configuration** * `angular.json`: Copy React build output to `/assets/react/`. * `webpack.config.js`: Configured Module Federation plugin: * Dev server: port 3001 * CORS headers for cross-origin requests * Environment-specific `publicPath` * `proxy.conf.js`: Updated proxy configuration. **5. Package** * Added React and React-DOM dependencies. * Added Webpack and Module Federation plugins. * Added Ant Design for React UI components. * Added @antv/g2plot for data visualization (also used in Angular version with G2). #### License This PR uses several open-source libraries. The `xlsx` (v0.18.5) and `typescript` (v4.6.4) packages are licensed under **Apache-2.0**, while all other dependencies and devDependencies (such as `react`, `react-dom`, `antd`, `@ant-design/icons`, etc.) are licensed under **MIT**. The MIT license is more permissive than Apache-2.0, so including MIT-licensed packages does not violate Apache-2.0 terms. All packages may be used commercially, and license notices should be included when distributing the project. #### Technical Details **Module Federation Configuration** ```ts // Development: http://localhost:3001/remoteEntry.js // Production: /assets/react/remoteEntry.js new ModuleFederationPlugin({ name: 'reactApp', filename: 'remoteEntry.js', exposes: { './PublishedParagraph': './src/pages/PublishedParagraph' } }) ``` #### Usage * Render published paragraph with React: `/notebook/{noteId}/paragraph/{paragraphId}?react=true` #### Lisence ### What type of PR is it? Improvement ### Todos ### What is the Jira issue? ZEPPELIN-6371 ### How should this be tested? ```sh // Start Zeppelin Server ./mvnw clean install -DskipTests ./mvnw clean package -DskipTests ./bin/zeppelin-daemon.sh start // Start Zeppelin New UI Client cd zeppelin-web-angular nvm use npm i npm run start ``` #### TextRenderer http://localhost:4200/#/notebook/2EYDJKFFY/paragraph/20180118-122136_1299905608?react=true #### TableVisualization http://localhost:4200/#/notebook/2EYDJKFFY/paragraph/20180118-122136_1299905608?react=true #### ImageRenderer http://localhost:4200/#/notebook/2F1S9ZY8Z/paragraph/20180117-220535_590781730?react=true #### HTMLRenderer - Table http://localhost:4200/#/notebook/2F1S9ZY8Z/paragraph/paragraph_1580885453474_1167659991?react=true #### HTMLRenderer - Script(Bokeh JS) http://localhost:4200/#/notebook/2F1S9ZY8Z/paragraph/paragraph_1580885707198_-1652524072?react=true ### Screenshots (if appropriate) ### Questions: * Does the license files need to update? No * Is there breaking changes for older versions? No * Does this needs documentation? No -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
