NIFI-15546 correct active load balance glyph location in UI

[markobean]

Summary

Fixed the issue in the UI where the active load balancing glyph appears in the wrong location. The glyph is the same as the inactive load balancing glyph (two-tone circle split horizontally), but it is rotated and color changed. The rotation - but same location - makes it appear like the icon has changed while load balancing is active. The problem was that the center of rotation was not at the center of the icon; it rotated the icon to an undesirable location no longer within the connection label.

This PR adjusts the center of rotation to be the center of the glyph keeping its location consistent whether it is the active or inactive load balance icon.

NIFI-15546

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 contains commits signed with a registered key indicating Verified status

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

Testing requires a Cluster; it's the only way to activate load balancing. Queue up a relatively large number of FlowFiles (or few FlowFiles of large size.) Doing so will allow a refresh to display the active load balancing icon. Observe the active versus inactive state. The circle icon will appear to rotate (and change color) but will remain in the exact same location.

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

[exceptionfactory]

Thanks for looking at this issue @markobean.

On a quick review, the referenced component has a load-balance-icon-active class applied, which is not defined. Defining that class to apply the transform might be the better way forward, as opposed to changing the nested definition of fa-rotate-90. There also be a better transform class that should be applied. I did not see analogous approaches, so tagging @mcgilman and @rfellows for review on the optimal approach.

[markobean]

Thanks for looking at this issue @markobean.

On a quick review, the referenced component has a load-balance-icon-active class applied, which is not defined. Defining that class to apply the transform might be the better way forward, as opposed to changing the nested definition of fa-rotate-90. There also be a better transform class that should be applied. I did not see analogous approaches, so tagging @mcgilman and @rfellows for review on the optimal approach.

Thanks for the feedback @exceptionfactory. However, the style needs to be in fa-rotate-90 to get the CSS inheritance to work as intended. I tried adding the center of rotation to just load-balance-icon-active and the behavior reverted to the incorrect rotation.

One thing I could do is rename text.load-balance-icon.fa-rotatate-90 to text.load-balance-icon-active.fa-rotate-90 so that it is a little more clear this style belongs to the active glyph.

[rfellows]

I agree with @exceptionfactory, I just tried it out and was able to make his suggestion work.

Basically this becomes

Suggested change

	text.load-balance-icon-active.fa-rotate-90 {
	transform-box: fill-box;
	transform-origin: center;
	}
	text.load-balance-icon.load-balance-icon-active {
	transform: rotate(90deg);
	transform-box: fill-box;
	transform-origin: center;
	}

and in connection-manager.service.ts this line:

.classed('load-balance-icon-active fa-rotate-90 success-color-variant', (d: any) => {

can just drop the fa-rotate-90

[markobean]

I agree with @exceptionfactory, I just tried it out and was able to make his suggestion work.

Basically this becomes

and in connection-manager.service.ts this line:

.classed('load-balance-icon-active fa-rotate-90 success-color-variant', (d: any) => {

can just drop the fa-rotate-90

Ah, ok, so you added the actual rotation (transform: rotate(90deg)) to the style. Got it. Will give this a go.

[markobean]

@rfellows Tested proposed changes. Worked well. Pushed a new commit which eliminates fa-rotate-90 in favor of the localized load-balance-icon-active style.

Thanks for the recommendation.

[rfellows]

Since we are getting the rotation from the css class load-balance-icon-active, can you remove the fa-rotate-90 class from being added to the element in the first place? I suggested it above, but maybe you missed it.

[markobean]

Sorry, @rfellows. My latest commit didn't take correctly.. missed the "-m" on the command and didn't notice. It's there now.

[rfellows]

@markobean unfortunately this is failing CI since the commits are not signed. the original one was however. can you squash your commits and sign the new one, then force push it up? it looks good and i'd like to merge it.

[markobean]

@rfellows I squashed, signed and pushed. Thanks.

[rfellows]

Thanks for the contribution, @markobean 👍

[markobean]

Thanks @rfellows for the review and feedback.
I have one other UI-related PR that has been open for about 3 weeks. I'd like to see this in 2.11.0. I'd appreciate if you could take a look at PR #11417 . Thanks!