NIFI-15051 - Allow users to only show controller services for the current process group (scope) in the listing (#10396)

Author: rfellows

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/service/guard/base-guard.utils.ts

@@ -16,7 +16,15 @@
  */
 
 import { inject } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivateFn, CanMatchFn, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
+import {
+    ActivatedRouteSnapshot,
+    CanActivateFn,
+    CanMatchFn,
+    Router,
+    RouterStateSnapshot,
+    UrlSegment,
+    UrlTree
+} from '@angular/router';
 import { Store } from '@ngrx/store';
 import { NiFiRegistryState } from '../../state';
 import { RegistryAuthService } from '../registry-auth.service';
@@ -47,7 +55,12 @@ export const showAccessDenied = (store: Store, router: Router): UrlTree => {
     return router.parseUrl(fallbackUrl);
 };
 
-const redirectToLogin = (store: Store, router: Router, authService: RegistryAuthService, requestedUrl: string): UrlTree => {
+const redirectToLogin = (
+    store: Store,
+    router: Router,
+    authService: RegistryAuthService,
+    requestedUrl: string
+): UrlTree => {
     authService.setRedirectUrl(requestedUrl || fallbackUrl);
     return router.parseUrl('/login');
 };
@@ -72,10 +85,7 @@ const evaluateAuthorization = (
     return showAccessDenied(store, router);
 };
 
-const authorize = (
-    requestedUrl: string,
-    authorizationCheck: AuthorizationCheck
-): Observable<boolean | UrlTree> => {
+const authorize = (requestedUrl: string, authorizationCheck: AuthorizationCheck): Observable<boolean | UrlTree> => {
     const store = inject(Store<NiFiRegistryState>);
     const router = inject(Router);
     const authService = inject(RegistryAuthService);
@@ -120,4 +130,5 @@ export const buildCanActivateGuard = (authorizationCheck: AuthorizationCheck): C
         authorize(computeRequestedUrlFromState(state), authorizationCheck);
 };
 
-export const buildGuard = (authorizationCheck: AuthorizationCheck): CanMatchFn => buildCanMatchGuard(authorizationCheck);
+export const buildGuard = (authorizationCheck: AuthorizationCheck): CanMatchFn =>
+    buildCanMatchGuard(authorizationCheck);

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/service/guard/index.ts

@@ -19,4 +19,3 @@ export * from './resources.guard';
 export * from './admin-workflow.guard';
 export * from './admin-tenants.guard';
 export * from './login.guard';
-

nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/service/guard/login.guard.ts

@@ -82,4 +82,3 @@ export const loginGuard: CanActivateFn = (_route, state: RouterStateSnapshot): O
         })
     );
 };
-

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html

@@ -21,7 +21,7 @@
     </header>
     <div class="pb-5 px-5 flex-1 flex flex-col">
         <h3 class="primary-color">Controller Services</h3>
-        @if (serviceState$ | async; as serviceState) {
+        @if (serviceState(); as serviceState) {
             @if (isInitialLoading(serviceState)) {
                 <div>
                     <ngx-skeleton-loader count="3"></ngx-skeleton-loader>
@@ -34,20 +34,42 @@ <h3 class="primary-color">Controller Services</h3>
                                 [entity]="serviceState.breadcrumb"
                                 [currentProcessGroupId]="serviceState.processGroupId"></breadcrumbs>
                         </div>
-                        @if (serviceState.breadcrumb.permissions.canWrite) {
-                            <button
-                                mat-icon-button
-                                class="primary-icon-button shrink-0"
-                                (click)="openNewControllerServiceDialog()">
-                                <i class="fa fa-plus"></i>
-                            </button>
-                        }
+                        <div class="flex items-center gap-x-3 shrink-0">
+                            @if (shouldShowFilter()) {
+                                <div class="flex items-center justify-between gap-x-2 current-scope-only">
+                                    <mat-checkbox [(ngModel)]="showCurrentScopeOnly" data-qa="current-scope-filter">
+                                    </mat-checkbox>
+                                    <div class="flex items-center justify-between gap-x-1">
+                                        <label
+                                            class="cursor-pointer select-none whitespace-nowrap nifi-body"
+                                            (click)="toggleFilter()"
+                                            data-qa="current-scope-label">
+                                            Show current scope only
+                                        </label>
+                                        <i
+                                            class="fa fa-info-circle"
+                                            nifiTooltip
+                                            [tooltipComponentType]="TextTip"
+                                            [tooltipInputData]="getFilterTooltip(serviceState.breadcrumb)"
+                                            data-qa="current-scope-help"></i>
+                                    </div>
+                                </div>
+                            }
+                            @if (serviceState.breadcrumb.permissions.canWrite) {
+                                <button
+                                    mat-icon-button
+                                    class="primary-icon-button"
+                                    (click)="openNewControllerServiceDialog()">
+                                    <i class="fa fa-plus"></i>
+                                </button>
+                            }
+                        </div>
                     </div>
                     @if (flowConfiguration$ | async; as flowConfiguration) {
                         <div class="flex-1">
                             <controller-service-table
                                 [selectedServiceId]="selectedServiceId$ | async"
-                                [controllerServices]="serviceState.controllerServices"
+                                [controllerServices]="filteredControllerServices()"
                                 [formatScope]="formatScope(serviceState.breadcrumb)"
                                 [definedByCurrentGroup]="definedByCurrentGroup(serviceState.breadcrumb)"
                                 [currentUser]="(currentUser$ | async)!"

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.scss

@@ -14,3 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+.current-scope-only {
+    .fa-question-circle {
+        font-size: 14px;
+    }
+}