You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@nifi.apache.org by "markobean (via GitHub)" <gi...@apache.org> on 2026/07/27 21:11:51 UTC
[PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
markobean opened a new pull request, #11481:
URL: https://github.com/apache/nifi/pull/11481
<!-- Licensed to the Apache Software Foundation (ASF) under one or more -->
<!-- contributor license agreements. See the NOTICE file distributed with -->
<!-- this work for additional information regarding copyright ownership. -->
<!-- The ASF licenses this file to You under the Apache License, Version 2.0 -->
<!-- (the "License"); you may not use this file except in compliance with -->
<!-- the License. You may obtain a copy of the License at -->
<!-- http://www.apache.org/licenses/LICENSE-2.0 -->
<!-- Unless required by applicable law or agreed to in writing, software -->
<!-- distributed under the License is distributed on an "AS IS" BASIS, -->
<!-- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -->
<!-- See the License for the specific language governing permissions and -->
<!-- limitations under the License. -->
# 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](https://issues.apache.org/jira/browse/NIFI-15546)
# Tracking
Please complete the following tracking steps prior to pull request creation.
### Issue Tracking
- [Apache NiFi Jira](https://issues.apache.org/jira/browse/NIFI) 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](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits) 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
- [X] Build completed using `./mvnw clean install -P contrib-check`
- [X] JDK 21
- [ ] JDK 25
### 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)
- [ ] New dependencies are documented in applicable `LICENSE` and `NOTICE` files
### Documentation
- [ ] Documentation formatting appears as expected in rendered files
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "rfellows (via GitHub)" <gi...@apache.org>.
rfellows commented on PR #11481:
URL: https://github.com/apache/nifi/pull/11481#issuecomment-5118292679
@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.
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "rfellows (via GitHub)" <gi...@apache.org>.
rfellows commented on code in PR #11481:
URL: https://github.com/apache/nifi/pull/11481#discussion_r3666385554
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss:
##########
@@ -271,6 +271,12 @@
font-size: 12px;
}
+ /* Rotate about the glyph itself, not the svg view box */
+ text.load-balance-icon-active.fa-rotate-90 {
+ transform-box: fill-box;
+ transform-origin: center;
+ }
Review Comment:
I agree with @exceptionfactory, I just tried it out and was able to make his suggestion work.
Basically this becomes
```suggestion
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`
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "markobean (via GitHub)" <gi...@apache.org>.
markobean commented on code in PR #11481:
URL: https://github.com/apache/nifi/pull/11481#discussion_r3669064413
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss:
##########
@@ -271,6 +271,12 @@
font-size: 12px;
}
+ /* Rotate about the glyph itself, not the svg view box */
+ text.load-balance-icon-active.fa-rotate-90 {
+ transform-box: fill-box;
+ transform-origin: center;
+ }
Review Comment:
Sorry, @rfellows. My latest commit didn't get pushed correctly. It's there now.
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "markobean (via GitHub)" <gi...@apache.org>.
markobean commented on PR #11481:
URL: https://github.com/apache/nifi/pull/11481#issuecomment-5119733456
@rfellows I squashed, signed and pushed. Thanks.
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "markobean (via GitHub)" <gi...@apache.org>.
markobean commented on PR #11481:
URL: https://github.com/apache/nifi/pull/11481#issuecomment-5105236077
> 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.
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "rfellows (via GitHub)" <gi...@apache.org>.
rfellows commented on code in PR #11481:
URL: https://github.com/apache/nifi/pull/11481#discussion_r3667905940
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss:
##########
@@ -271,6 +271,12 @@
font-size: 12px;
}
+ /* Rotate about the glyph itself, not the svg view box */
+ text.load-balance-icon-active.fa-rotate-90 {
+ transform-box: fill-box;
+ transform-origin: center;
+ }
Review Comment:
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.
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "markobean (via GitHub)" <gi...@apache.org>.
markobean commented on code in PR #11481:
URL: https://github.com/apache/nifi/pull/11481#discussion_r3669064413
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss:
##########
@@ -271,6 +271,12 @@
font-size: 12px;
}
+ /* Rotate about the glyph itself, not the svg view box */
+ text.load-balance-icon-active.fa-rotate-90 {
+ transform-box: fill-box;
+ transform-origin: center;
+ }
Review Comment:
Sorry, @rfellows. My latest commit didn't take correctly.. missed the "-m" on the command and didn't notice. It's there now.
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "rfellows (via GitHub)" <gi...@apache.org>.
rfellows merged PR #11481:
URL: https://github.com/apache/nifi/pull/11481
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "markobean (via GitHub)" <gi...@apache.org>.
markobean commented on code in PR #11481:
URL: https://github.com/apache/nifi/pull/11481#discussion_r3666748173
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss:
##########
@@ -271,6 +271,12 @@
font-size: 12px;
}
+ /* Rotate about the glyph itself, not the svg view box */
+ text.load-balance-icon-active.fa-rotate-90 {
+ transform-box: fill-box;
+ transform-origin: center;
+ }
Review Comment:
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.
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "markobean (via GitHub)" <gi...@apache.org>.
markobean commented on code in PR #11481:
URL: https://github.com/apache/nifi/pull/11481#discussion_r3666748173
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss:
##########
@@ -271,6 +271,12 @@
font-size: 12px;
}
+ /* Rotate about the glyph itself, not the svg view box */
+ text.load-balance-icon-active.fa-rotate-90 {
+ transform-box: fill-box;
+ transform-origin: center;
+ }
Review Comment:
@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.
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "markobean (via GitHub)" <gi...@apache.org>.
markobean commented on PR #11481:
URL: https://github.com/apache/nifi/pull/11481#issuecomment-5130238704
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](https://github.com/apache/nifi/pull/11417) . Thanks!
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-15546 correct active load balance glyph location in UI [nifi]
Posted by "markobean (via GitHub)" <gi...@apache.org>.
markobean commented on code in PR #11481:
URL: https://github.com/apache/nifi/pull/11481#discussion_r3666560062
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss:
##########
@@ -271,6 +271,12 @@
font-size: 12px;
}
+ /* Rotate about the glyph itself, not the svg view box */
+ text.load-balance-icon-active.fa-rotate-90 {
+ transform-box: fill-box;
+ transform-origin: center;
+ }
Review Comment:
> 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.
--
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: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org