NIFI-14319: Create initial project structure for new NiFi Registry UI #9855

sardell · 2025-04-07T22:04:11Z

Summary

Description

This PR establishes the initial project setup for the new NiFi Registry UI and includes the new explorer view.

Testing

Build and start the old registry project with maven using the existing instructions. Next, run npm ci at nifi-frontend/src/main/frontend and start the app by running npx nx run nifi-registry:serve. Visit http://localhost:4204/nifi-registry/ to see the new explorer page. Compare the old explorer view with the new one, ensuring feature parity between the two views. Run unit tests with npx nx run nifi-registry:test.

NOTE: buckets cannot be created through the new UI yet, so in order to test the functionality of the new explorer view you must first create a bucket through the old UI.

Considerations

Styling - The old logo was created with a much darker background color in mind. It may be time for a refreshed logo, but for now I simply added the old one to the header along with a heading containing the application's name.

Tracking

Please complete the following tracking steps prior to pull request creation.

Issue Tracking

Apache NiFi Jira issue created

Pull Request Tracking

Pull Request title starts with Apache NiFi Jira issue number, such as NIFI-00000
Pull Request commit message starts with Apache NiFi Jira issue number, as such NIFI-00000

Pull Request Formatting

Pull Request based on current revision of the main branch
Pull Request refers to a feature branch with one commit containing changes

Verification

Please indicate the verification steps performed prior to pull request creation.

Build

Build completed using mvn clean install -P contrib-check
- JDK 21

Licensing

New dependencies are compatible with the Apache License 2.0 according to the License Policy
New dependencies are documented in applicable LICENSE and NOTICE files

Documentation

Documentation formatting appears as expected in rendered files

exceptionfactory

Thanks for this work on NiFi Registry @sardell!

The standard ci-workflow builds are failing, does this build locally for you, or is this still a work in progress that should be marked as draft?

sardell · 2025-04-08T21:39:32Z

@exceptionfactory Thanks for raising the failing CI to my attention. It looks like the failure was due to the favicon missing from the old registry ui directory. I accidentally deleted it when copying over images to the new project. I noticed the missing file while working on this PR and added the file back, but it seems that file was accidentally added to the .gitignore (I think intention of that .gitignore line was to ignore the generated favicon, not all instances of that file). I believe this is why I could successfully build locally and also see the CI failures you pointed out.

Fingers crossed the CI passes this time. I'll keep an eye on it.

UPDATE: Looks like the CI build is now failing on a build step that runs fine locally. Will need to investigate a little further.

exceptionfactory

Thanks for the update @sardell, although the build completes on macOS, it is failing on Linux and Windows.

On Linux, there appears to be something platform-dependent:

[INFO] ::group::❌ > nx run shared:build:production
[INFO] 
[INFO] Building Angular Package
[INFO] 
[INFO] ------------------------------------------------------------------------------
[INFO] Building entry point '@nifi/shared'
[INFO] ------------------------------------------------------------------------------
[INFO] - Compiling with Angular sources in Ivy full compilation mode.
[INFO] ✖ Compiling with Angular sources in Ivy full compilation mode.
[INFO] 
[INFO]  NX   The package "@esbuild/linux-x64" could not be found, and is needed by esbuild.

* check if window.matchMedia has value before calling method * add empty states to explorer table * destroy direct store subscriptions * add filtered count to droplet table filter

* Linux solution: https://github.com/evanw/esbuild/issues/1819\#issuecomment-2426254293 * Windows solution: nrwl/nx#29551

elcsiga

looks good for the 1st glance, I post my first comments, will continue the review soon

nifi-frontend/src/main/frontend/apps/nifi-registry/src/styles.scss

elcsiga · 2025-04-29T17:03:05Z

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.ts

+    styleUrl: './header.component.scss'
+})
+export class HeaderComponent implements OnInit {
+    currentUser: Signal<CurrentUser>;


is it used or planned to use next time?

I plan on using it much more in the next part I'm working on. I originally intended for it to be included in this PR but once I saw how big this PR became, I decided to make it auth/login/logout its own task. If it helps to review or you'd just prefer, I can remove the user-related code from this PR.

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/state/droplets/droplets.effects.ts

elcsiga · 2025-04-29T17:40:24Z

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/state/droplets/droplets.effects.ts

+                from(this.dropletsService.uploadFlow(href, request.file)).pipe(
+                    map((res) => DropletsActions.importNewFlowSuccess({ response: res })),
+                    catchError((errorResponse: HttpErrorResponse) => {
+                        this.dialog.closeAll();


importNewFlowSuccess reducer has draftState.saving = false, in case of an error draftState.saving remains true. Same question for any ...Success reducer. If there is no ...Error reducer defined, how to recover from the loading state?

...olorer/feature/ui/import-new-flow-version-dialog/import-new-flow-version-dialog.component.ts

...ry/src/app/pages/expolorer/feature/ui/droplet-table-filter/droplet-table-filter.component.ts

* fix error service

scottyaslan

@sardell thanks for the PR! I have left several comments on things that need to be addressed. Apologies that there are so many comments as I know this is a big undertaking and your effort here is appreciated. I am sure I will have more comments after you make the requested changes.

Also, I didn't have a great place to leave the following comments so placing them here:

Please run prettier and lint:fix. There are several strange formatting issues.

Please delete nifi-registry/public directory and the favicon.ico.

nifi-frontend/src/main/frontend/apps/nifi-registry/project.json

scottyaslan · 2025-05-05T14:02:06Z

nifi-frontend/src/main/frontend/apps/nifi-registry/project.json

+                            "maximumError": "4kb"
+                        }
+                    ],
+                    "outputHashing": "all"


Suggested change

"outputHashing": "all"

"outputHashing": "all",

"optimization": true

nifi-frontend/src/main/frontend/apps/nifi-registry/.eslintrc.json

scottyaslan · 2025-05-05T17:29:35Z

...rc/app/pages/expolorer/feature/ui/delete-droplet-dialog/delete-droplet-dialog.component.html

+-->
+
+<h2 mat-dialog-title>
+    <div class="flex justify-between items-baseline">


The spacing of this dialog header is incorrect.

...rc/app/pages/expolorer/feature/ui/delete-droplet-dialog/delete-droplet-dialog.component.html

* fix multiple namings * template cleanup * configuration changes to align better with NiFi * style fixes

exceptionfactory reviewed Apr 8, 2025

View reviewed changes

exceptionfactory requested changes Apr 9, 2025

View reviewed changes

sardell force-pushed the NIFI-14319 branch from 13a332d to 17f4c38 Compare April 9, 2025 17:45

sardell requested a review from exceptionfactory April 9, 2025 19:51

mcgilman added the new ui Pull requests for work relating to the new user interface being developed. label Apr 24, 2025

sardell and others added 10 commits April 28, 2025 16:38

NIFI-14319: init new registry app

96bb176

NIFI-14319: add unit test coverage

c9f9879

NIFI-14319: update redirect value

df16191

Remove commented code in droplet filter

cb1e628

NIFI-14319: remove commented code from current user effects

cd163ae

NIFI-14319: remove commented code from bucket reducer

c888d1c

NIFI-14319: remove commented code from index.ts

9ded513

NIFI-14319: address initial feedback

f96a040

* check if window.matchMedia has value before calling method * add empty states to explorer table * destroy direct store subscriptions * add filtered count to droplet table filter

NIFI-14319: add wrongly removed favicon back to old project

063e999

NIFI-14319: fix CI build failures

2ad3b38

* Linux solution: https://github.com/evanw/esbuild/issues/1819\#issuecomment-2426254293 * Windows solution: nrwl/nx#29551

sardell force-pushed the NIFI-14319 branch from cb9605d to 2ad3b38 Compare April 28, 2025 21:40

NIFI-14319: fix alt value used for registry logo

74df539

sardell force-pushed the NIFI-14319 branch from bd6fd83 to 74df539 Compare April 28, 2025 23:42

elcsiga reviewed Apr 29, 2025

View reviewed changes

sardell added 2 commits April 29, 2025 15:06

NIFI-14319: review feedback

a821539

* fix error service

NIFI-14319: address naming and formatting feedback

cecaa80

scottyaslan requested changes May 5, 2025

View reviewed changes

sardell added 2 commits May 8, 2025 15:23

NIFI-14319: address review feedback

c163d72

* fix multiple namings * template cleanup * configuration changes to align better with NiFi * style fixes

NIFI-14319: refactor droplet table into standalone component

992ea4c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NIFI-14319: Create initial project structure for new NiFi Registry UI #9855

NIFI-14319: Create initial project structure for new NiFi Registry UI #9855

sardell commented Apr 7, 2025 •

edited

Loading

exceptionfactory left a comment

sardell commented Apr 8, 2025 •

edited

Loading

exceptionfactory left a comment

elcsiga left a comment

elcsiga Apr 29, 2025

sardell Apr 29, 2025 •

edited

Loading

elcsiga Apr 29, 2025

scottyaslan left a comment

scottyaslan May 5, 2025

scottyaslan May 5, 2025

	"outputHashing": "all"
	"outputHashing": "all",
	"optimization": true

NIFI-14319: Create initial project structure for new NiFi Registry UI #9855

Are you sure you want to change the base?

NIFI-14319: Create initial project structure for new NiFi Registry UI #9855

Conversation

sardell commented Apr 7, 2025 • edited Loading

Summary

Description

Testing

Considerations

Tracking

Issue Tracking

Pull Request Tracking

Pull Request Formatting

Verification

Build

Licensing

Documentation

exceptionfactory left a comment

Choose a reason for hiding this comment

sardell commented Apr 8, 2025 • edited Loading

exceptionfactory left a comment

Choose a reason for hiding this comment

elcsiga left a comment

Choose a reason for hiding this comment

elcsiga Apr 29, 2025

Choose a reason for hiding this comment

sardell Apr 29, 2025 • edited Loading

Choose a reason for hiding this comment

elcsiga Apr 29, 2025

Choose a reason for hiding this comment

scottyaslan left a comment

Choose a reason for hiding this comment

scottyaslan May 5, 2025

Choose a reason for hiding this comment

scottyaslan May 5, 2025

Choose a reason for hiding this comment

sardell commented Apr 7, 2025 •

edited

Loading

sardell commented Apr 8, 2025 •

edited

Loading

sardell Apr 29, 2025 •

edited

Loading