Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Matt Gilman 2024-08-20 11:30:45 -04:00 committed by GitHub
parent c2dd939e3c
commit 7f41bc1c6a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 47 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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