NIFI-13663: Only centering when viewing stats history when component is offscreen. (#9184)

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts

@@ -1115,13 +1115,12 @@ export class FlowEffects {
                 map((action) => action.request),
                 concatLatestFrom(() => this.store.select(selectCurrentProcessGroupId)),
                 tap(([request, currentProcessGroupId]) => {
-                    this.router.navigate([
-                        '/process-groups',
-                        currentProcessGroupId,
-                        request.type,
-                        request.id,
-                        'history'
-                    ]);
+                    const url = ['/process-groups', currentProcessGroupId, request.type, request.id, 'history'];
+                    if (this.canvasView.isSelectedComponentOnScreen()) {
+                        this.store.dispatch(FlowActions.navigateWithoutTransform({ url }));
+                    } else {
+                        this.router.navigate(url);
+                    }
                 })
             ),
         { dispatch: false }

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss

@@ -106,9 +106,9 @@
 
     mat-sidenav {
         background-color: if(
-                $is-dark,
-                $supplemental-theme-surface-palette-darker,
-                $supplemental-theme-surface-palette-lighter
+            $is-dark,
+            $supplemental-theme-surface-palette-darker,
+            $supplemental-theme-surface-palette-lighter
         );
     }
 

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html

@@ -151,7 +151,8 @@
                                     @for (violation of violationsMap.get(rule.id); track violation.scope) {
                                         <li class="flex align-center justify-between mt-2">
                                             <div class="flex flex-col items-start ml-2">
-                                                <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+                                                <div
+                                                    *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
                                                     {{ violation.subjectDisplayName }}
                                                 </div>
                                                 <span class="text-sm">
@@ -193,8 +194,9 @@
                             <span class="text-sm">{{ violation.subjectId }}</span>
                         </div>
 
-                        <ng-template [ngTemplateOutlet]="violationMenuTemplate"
-                                     [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+                        <ng-template
+                            [ngTemplateOutlet]="violationMenuTemplate"
+                            [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
                     </div>
                 </li>
             }

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.ts

@@ -32,10 +32,7 @@ import {
     openRuleDetailsDialog
 } from '../../../../state/flow-analysis/flow-analysis.actions';
 import { FlowAnalysisRule, FlowAnalysisRuleViolation } from '../../../../state/flow-analysis';
-import {
-    selectBreadcrumbs,
-    selectCurrentProcessGroupId
-} from '../../../../state/flow/flow.selectors';
+import { selectBreadcrumbs, selectCurrentProcessGroupId } from '../../../../state/flow/flow.selectors';
 import { RouterLink } from '@angular/router';
 import { NifiSpinnerDirective } from '../../../../../../ui/common/spinner/nifi-spinner.directive';
 import { MatIconButton } from '@angular/material/button';

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss

@@ -34,42 +34,42 @@
     $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
     $material-theme-warn-palette-darker: mat.m2-get-color-from-palette($material-theme-warn-palette, darker);
     $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
-            $supplemental-theme-surface-palette,
-            lighter
+        $supplemental-theme-surface-palette,
+        lighter
     );
     $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
-            $supplemental-theme-surface-palette,
-            darker
+        $supplemental-theme-surface-palette,
+        darker
     );
     $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
-            $supplemental-theme-surface-palette,
-            darker-contrast
+        $supplemental-theme-surface-palette,
+        darker-contrast
     );
     $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
-            $supplemental-theme-surface-palette,
-            lighter-contrast
+        $supplemental-theme-surface-palette,
+        lighter-contrast
     );
 
     .flow-status {
         background: if(
-                $is-dark,
-                $supplemental-theme-surface-palette-darker,
-                $supplemental-theme-surface-palette-lighter
+            $is-dark,
+            $supplemental-theme-surface-palette-darker,
+            $supplemental-theme-surface-palette-lighter
         );
 
         .controller-bulletins {
             background-color: if(
-                    $is-dark,
-                    $material-theme-primary-palette-lighter,
-                    $material-theme-primary-palette-default
+                $is-dark,
+                $material-theme-primary-palette-lighter,
+                $material-theme-primary-palette-default
             );
 
             .fa {
                 // invert the contrast colors since the surface is dark in light mode and light in dark mode
                 color: if(
-                        $is-dark,
-                        $supplemental-theme-surface-palette-lighter-contrast,
-                        $supplemental-theme-surface-palette-darker-contrast
+                    $is-dark,
+                    $supplemental-theme-surface-palette-lighter-contrast,
+                    $supplemental-theme-surface-palette-darker-contrast
                 );
             }
         }
@@ -80,23 +80,22 @@
 
         .flow-analysis-notifications.warn {
             background-color: if(
-                    $is-dark,
-                    $material-theme-primary-palette-lighter,
-                    $material-theme-primary-palette-default
+                $is-dark,
+                $material-theme-primary-palette-lighter,
+                $material-theme-primary-palette-default
             );
             border-right-color: if(
-                    $is-dark,
-                    $supplemental-theme-surface-palette-lighter-contrast,
-                    $supplemental-theme-surface-palette-darker-contrast
+                $is-dark,
+                $supplemental-theme-surface-palette-lighter-contrast,
+                $supplemental-theme-surface-palette-darker-contrast
             );
 
-
             .fa {
                 // invert the contrast colors since the surface is dark in light mode and light in dark mode
                 color: if(
-                        $is-dark,
-                        $supplemental-theme-surface-palette-lighter-contrast,
-                        $supplemental-theme-surface-palette-darker-contrast
+                    $is-dark,
+                    $supplemental-theme-surface-palette-lighter-contrast,
+                    $supplemental-theme-surface-palette-darker-contrast
                 );
             }
         }
@@ -104,17 +103,17 @@
         .flow-analysis-notifications.enforce {
             background-color: $material-theme-warn-palette-darker;
             border-right-color: if(
-                    $is-dark,
-                    $supplemental-theme-surface-palette-lighter-contrast,
-                    $supplemental-theme-surface-palette-darker-contrast
+                $is-dark,
+                $supplemental-theme-surface-palette-lighter-contrast,
+                $supplemental-theme-surface-palette-darker-contrast
             );
 
             .fa {
                 // invert the contrast colors since the surface is dark in light mode and light in dark mode
                 color: if(
-                        $is-dark,
-                        $supplemental-theme-surface-palette-lighter-contrast,
-                        $supplemental-theme-surface-palette-darker-contrast
+                    $is-dark,
+                    $supplemental-theme-surface-palette-lighter-contrast,
+                    $supplemental-theme-surface-palette-darker-contrast
                 );
             }
         }