This is an automated email from the ASF dual-hosted git repository.
rfellows pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new cde820673c NIFI-13089: Updating PR Template and README for new UI
(#8693)
cde820673c is described below
commit cde820673cbd448880e75ff1ff2eef2a2e01f5f9
Author: Matt Gilman <[email protected]>
AuthorDate: Tue Apr 23 15:42:29 2024 -0400
NIFI-13089: Updating PR Template and README for new UI (#8693)
* NIFI-13089:
- Updating PR Template and README for new UI.
* Update
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/README.md
Reformatting the code structure layout.
Co-authored-by: Rob Fellows <[email protected]>
---------
Co-authored-by: Rob Fellows <[email protected]>
This closes #8693
---
.github/PULL_REQUEST_TEMPLATE.md | 4 ++
.../nifi-web-frontend/src/main/nifi/README.md | 73 +++++++++++++++-------
.../nifi-web-frontend/src/main/nifi/project.json | 6 ++
3 files changed, 62 insertions(+), 21 deletions(-)
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 49aa9895be..4d507003bf 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -42,6 +42,10 @@ Please indicate the verification steps performed prior to
pull request creation.
- [ ] Build completed using `mvn clean install -P contrib-check`
- [ ] JDK 21
+### UI Contributions
+
+- [ ] NiFi is modernizing its UI. Any contributions that update the [current
UI](https://github.com/apache/nifi/tree/main/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui)
also need to be implemented in the [new
UI](https://github.com/apache/nifi/tree/main/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi).
+
### Licensing
- [ ] New dependencies are compatible with the [Apache License
2.0](https://apache.org/licenses/LICENSE-2.0) according to the [License
Policy](https://www.apache.org/legal/resolved.html)
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/README.md
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/README.md
index 4926a56843..a846a526db 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/README.md
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/README.md
@@ -1,28 +1,58 @@
# NiFi
-<a alt="Nx logo" href="https://nx.dev"; target="_blank" rel="noreferrer"><img
src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png";
width="45"></a>
-
## General Info
-### Nx
-
-If you are unfamiliar Nx, you can learn more at
https://nx.dev/getting-started/intro. They provide many solid resources to get
you up to speed.
-
-_From Nx:_
-
-> We created Nx because developers struggle to configure, maintain and
especially integrate various tools and frameworks.
-> Setting up a system that works well for a handful of developers and at the
same time, easily scales up to an entire organization is hard.
-> This includes setting up low-level build tooling, configuring fast CI, and
keeping your codebase healthy, up-to-date, and maintainable.
+This module is the primary UI for NiFi. It contains the canvas and all UI's
for managing the NiFi instance. There are other modules within the codebase
+that support other UIs that intergate with this. These include documentation,
data viewers, advanced configuration UIs, error handling, and Registry UIs.
+Overtime, these will all be modernized and possibly brought into this Nx repo
to co-locate all the front end code.
+
+In its current state it is not quite ready to replace the existing UI as there
are a few features that are not implemented yet. The new UI will not
+be available with the default build. However, if the build activates the
`include-new-ui` profile the new UI will be built and included. On startup,
+NiFi has been updated to locate the new UI and if present deploy it to a new
context path (`/nf`). If the new UI is not found, nothing is deployed to
+the new context path and the application functions as it does today.
+
+One thing to note, when using the new UI running in NiFi at `/nf`, the user
can log in and use the application. When logging out however, there is
+a hardcoded redirect that happens from the back end which sends the user to
the old UI (`/nifi`).
+
+Once the remaining features have been implemented, the look and feel has be
polished, and it is ready for release the old UI will be removed, update
+the context path for the new UI to use `/nifi`, and remove the
`include-new-ui` Maven profile. At that point, the logout redirection issue
called out above won’t
+be a problem anymore.
+
+## Source Structure
+
+The structure of the application is laid out in the following manner.
+
+app
+├── pages
+│ ├── flow-designer
+│ │ ├── feature
+│ │ ├── service
+│ │ ├── state
+│ │ └── ui
+│ ├── settings
+│ │ ├── feature
+│ │ ├── service
+│ │ ├── state
+│ │ └── ui
+├── service
+├── state
+└── ui
+
+Each page has its own directory inside `pages`. Within each page, the primary
content is in `feature`, any services for that page are in `service`,
+state management for the feature is in `state`, and any ui components
referenced by the feature are in `ui`. The app root also contains `state`,
+`service`, and `ui` which are available for use by anything in any page.
Pages, however, should not access anything from any other pages.
+
+The application leverages `ngrx` state management throughout. This includes
actions and selectors for all data flow. One approach that may be
+considered unique is that all dialogs and routing happen as side effects to
actions dispatched by components. This leaves components less
+cluttered and can focus on its purpose and not needing to deal with activated
routes, dialog references, etc.
## Development server
-Run `npx nx serve` for a dev server. Navigate to `http://localhost:4200/`. The
application will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `npx nx generate <generator> <<generator args>>`.
+Run `npx nx serve` for a dev server. Navigate to `http://localhost:4200/nf`.
The application will automatically reload if you change any of the source files.
-Or better yet, have a look at the [Nx documentation on integrating with
IDEs](https://nx.dev/features/integrate-with-editors)
+When accessing the UI in this manner, the login form does not work. There is
some server side login request handling that does not work through
+the development server. Fortunately, an authenticated user does not need to
log in. So to work around this, simply log in to NiFi using the UI running in
+the application first. The authentication token will be available in a cookie
that is also available in the UI hosted by the development server.
## Build
@@ -30,12 +60,13 @@ Run `npx nx build` to build the project. The build
artifacts will be stored in t
## Running unit tests
-Run `npx nx test` to execute the unit tests via Jest
+Run `npx nx test` to execute the unit tests via Jest.
## Linting the codebase
-Run `npx nx lint` to execute lint
+Run `npx nx lint` to execute lint. Additionally, run `npx nx lint:fix` to fix
lint errors. Please run verify this prior to opening and PRs.
-## Further help
+## Prettier
-To get more help on the Nx CLI use `npx nx --help`.
+Run `npx nx prettier` to execute prettier to identify any formatting issues.
Additionally, run `npx nx prettier:format` to fix any formatting issues.
+Please run verify this prior to opening and PRs.
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/project.json
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/project.json
index 1b300952e4..1532f780fc 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/project.json
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/project.json
@@ -82,6 +82,12 @@
},
"outputs": ["{options.outputFile}"]
},
+ "lint:fix": {
+ "executor": "nx:run-commands",
+ "options": {
+ "command": "npm run lint:fix"
+ }
+ },
"prettier": {
"executor": "nx:run-commands",
"options": {
![https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"](https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"){kind=link}