NIFI-13125 - Flow Version Diff View #10473

pvillard31 · 2025-10-28T22:21:26Z

Summary

NIFI-13125 - Flow Version Diff View

I used #9109 as a starting point and coded something similar for NiFi 2.x. Definitely not a UI expert so my approach may not be the best one. Happy to collaborate with someone more experienced on the UI side.

This feature is particularly useful when a user sees that a versioned process group can be updated to a new version and the user would like to see what are the differences with the current version before upgrading the process group.

Access to the view is made available when listing versions for a versioned process group:

Clicking on the diff icon for the desired version will show the diff between the current version and the selected version

Versions can be selected via the dropdown lists:

Filtering is also possible to filter the content of the table, and the columns can also be sorted alphabetically.

The current feature does not allow comparison across branches but that could be considered as a follow-up improvement if the community sees value into it (I'm not sure I picture a use case where it would be very useful).

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 ./mvnw clean install -P contrib-check
- JDK 21
- JDK 25

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

scottyaslan

Thanks for this contribution. I have left some comments. I am happy to review and help iterate here and continue to improve the UX for this feature.

scottyaslan · 2025-10-30T14:33:01Z

.../app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.ts

    private store = inject<Store<CanvasState>>(Store);

-    displayedColumns: string[] = ['current', 'version', 'created', 'comments'];
+    displayedColumns: string[] = ['actions', 'current', 'version', 'created', 'comments'];


The actions column should be displayed as the last column in the table listing.

scottyaslan · 2025-10-30T14:33:08Z

...pp/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html

                        (matSortChange)="sortData($event)"
                        [matSortActive]="sort.active"
                        [matSortDirection]="sort.direction">
+                        <!-- Actions Column -->


The actions column should be displayed as the last column in the table listing.

scottyaslan · 2025-10-30T14:33:52Z

...pp/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.scss

+            .mat-column-actions {
+                width: 54px;
+            }
+


actions column is already set for all listings so we don't need this here

Suggested change

.mat-column-actions {

width: 54px;

}

scottyaslan · 2025-10-30T14:38:51Z

...nifi/src/app/pages/flow-designer/ui/canvas/items/flow/flow-diff-dialog/flow-diff-dialog.html

+                <div class="flow-diff-loading" *ngIf="isLoading">
+                    <mat-progress-spinner diameter="36" mode="indeterminate"></mat-progress-spinner>
+                </div>


The listings in nifi do not show mat-progress-spinner or any other loading UX.

Suggested change

<div class="flow-diff-loading" *ngIf="isLoading">

<mat-progress-spinner diameter="36" mode="indeterminate"></mat-progress-spinner>

</div>

scottyaslan · 2025-10-30T14:40:22Z

...nifi/src/app/pages/flow-designer/ui/canvas/items/flow/flow-diff-dialog/flow-diff-dialog.html

+                    <div *ngIf="errorMessage" class="flow-diff-error" data-qa="flow-diff-error">
+                        {{ errorMessage }}
+                    </div>


The listings in nifi do not show errors like this. If there is an error when requesting the diff it should be displayed in a context error banner at the top of the dialog like we do in other cases.

Suggested change

<div *ngIf="errorMessage" class="flow-diff-error" data-qa="flow-diff-error">

{{ errorMessage }}

</div>

scottyaslan · 2025-10-30T14:56:18Z

...s/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/flow-diff-dialog/flow-diff-dialog.ts

+    }
+
+    ngAfterViewInit(): void {
+        // Sorting handled automatically when MatSort is available via the ViewChild setter


I haven't really dug in here yet but it seems sorting is handled differently for this listing then other listings throughout nifi. I am not saying this is incorrect but it is a different pattern so at the very least it would need some testing and verification. It would be nice it we could just update this to follow the pattern used in other listings. We should not need to use a ViewChild to sort an angular material table.

scottyaslan · 2025-10-30T14:57:05Z

...nifi/src/app/pages/flow-designer/ui/canvas/items/flow/flow-diff-dialog/flow-diff-dialog.html

+
+                        <table
+                            mat-table
+                            *ngIf="dataSource.data.length > 0"


Suggested change

*ngIf="dataSource.data.length > 0"

scottyaslan · 2025-10-30T15:04:22Z

...nifi/src/app/pages/flow-designer/ui/canvas/items/flow/flow-diff-dialog/flow-diff-dialog.html

+                data-qa="flow-diff-message"
+                *ngIf="comparisonSummary.length > 0">
+                <div class="flow-diff-message-title">Comparing versions:</div>
+                <ul class="flow-diff-message-list">


An unordered list is not the correct way to display this information. Please follow the label/value UX used throughout the application to display values. I believe we have an example in the change version dialog as well.

scottyaslan · 2025-10-30T19:38:21Z

...s/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/flow-diff-dialog/flow-diff-dialog.ts

+    private store = inject<Store<CanvasState>>(Store);
+    private timeOffset = this.store.selectSignal(selectTimeOffset);
+
+    @ViewChild(MatSort)


You can follow how the change version dialog implemented sorting instead of using a ViewChild here.

scottyaslan · 2025-10-30T19:48:18Z

...s/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/flow-diff-dialog/flow-diff-dialog.ts

+    private formatTimestamp(metadata: VersionedFlowSnapshotMetadata): string | undefined {
+        if (!metadata.timestamp) {
+            return undefined;
+        }
+
+        const now = new Date();
+        const userOffset = now.getTimezoneOffset() * 60 * 1000;
+        const date = new Date(metadata.timestamp + userOffset + this.getTimezoneOffset());
+        return this.nifiCommon.formatDateTime(date);
+    }
+
+    private getTimezoneOffset(): number {
+        return this.timeOffset() || 0;
+    }


I don't think we typically format timestamps like this. Is there a reason to here? I now see that we do have two implementations of:

formatTimestamp(flowVersion: VersionedFlowSnapshotMetadata) { // get the current user time to properly convert the server time const now: Date = new Date(); // convert the user offset to millis const userTimeOffset: number = now.getTimezoneOffset() * 60 * 1000; // create the proper date by adjusting by the offsets const date: Date = new Date(flowVersion.timestamp + userTimeOffset + this.timeOffset); return this.nifiCommon.formatDateTime(date); }

One in the select-flow-version.componet.ts and one in the import-from-registry.component.ts. If we really have a need for this formatting we should have a single implementation in a shared area. A new formatTimestamp Angular pipe in https://github.com/apache/nifi/tree/main/nifi-frontend/src/main/frontend/libs/shared/src/pipes would work well for this use case but I think you will find that formatting timestamps has lots or nuanced considerations. we used to have a library for this but it wasn't well maintained and was deprecated if that is any clue as to LOE.

IMO we can just leave the timestamp unformatted.

pvillard31 · 2025-10-30T21:59:16Z

Thanks for all the feedback @scottyaslan - highly appreciated! I have (hopefully) made the changes you had in mind. The only thing that is not ok is the timestamp in the dropdown lists when selecting versions. Will figure it out tomorrow. It looks so much better now, thanks for all of the review comments!

pvillard31 · 2025-10-31T11:22:19Z

Addressed the timestamp issue.

pvillard31 added the ui Pull requests for work relating to the user interface label Oct 28, 2025

NIFI-13125 - Flow Version Diff View

d1ff571

pvillard31 force-pushed the NIFI-13125 branch from 010fc08 to d1ff571 Compare October 28, 2025 22:22

scottyaslan requested changes Oct 30, 2025

View reviewed changes

review

c641dd6

review

c79f92c

	<div class="flow-diff-loading" *ngIf="isLoading">
	<mat-progress-spinner diameter="36" mode="indeterminate"></mat-progress-spinner>
	</div>

	<div *ngIf="errorMessage" class="flow-diff-error" data-qa="flow-diff-error">
	{{ errorMessage }}
	</div>

NIFI-13125 - Flow Version Diff View #10473

Are you sure you want to change the base?

NIFI-13125 - Flow Version Diff View #10473

Uh oh!

Conversation

pvillard31 commented Oct 28, 2025

Summary

Tracking

Issue Tracking

Pull Request Tracking

Pull Request Formatting

Verification

Build

Licensing

Documentation

Uh oh!

scottyaslan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

scottyaslan Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

scottyaslan Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

scottyaslan Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pvillard31 commented Oct 30, 2025

Uh oh!

pvillard31 commented Oct 31, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

scottyaslan Oct 30, 2025 •

edited

Loading

scottyaslan Oct 30, 2025 •

edited

Loading

scottyaslan Oct 30, 2025 •

edited

Loading