You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by sc...@apache.org on 2024/09/24 02:15:05 UTC
(nifi) branch main updated: [NIFI-13772] - Color bulleting icons based on severity (#9301)
This is an automated email from the ASF dual-hosted git repository.
scottyaslan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 99c31b8da0 [NIFI-13772] - Color bulleting icons based on severity (#9301)
99c31b8da0 is described below
commit 99c31b8da026bac3d248303f53ede2ee98dda701
Author: Rob Fellows <ro...@gmail.com>
AuthorDate: Mon Sep 23 22:15:00 2024 -0400
[NIFI-13772] - Color bulleting icons based on severity (#9301)
---
.../flow-designer/service/canvas-utils.service.ts | 52 ++++++++++++++++++++-
.../ui/canvas/_canvas.component-theme.scss | 27 ++++++++++-
.../flow-status/_flow-status.component-theme.scss | 53 ++++++++++++++++------
.../header/flow-status/flow-status.component.html | 3 +-
.../header/flow-status/flow-status.component.ts | 10 +++-
.../bulletins-tip/bulletins-tip.component.scss | 4 ++
6 files changed, 129 insertions(+), 20 deletions(-)
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
index d371ec9f77..6696f2ea6f 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
@@ -34,7 +34,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { BulletinsTip } from '../../../ui/common/tooltips/bulletins-tip/bulletins-tip.component';
import { BreadcrumbEntity, Position } from '../state/shared';
import { ComponentType } from 'libs/shared/src';
-import { ParameterContextReferenceEntity, Permissions } from '../../../state/shared';
+import { BulletinEntity, ParameterContextReferenceEntity, Permissions } from '../../../state/shared';
import { NiFiCommon } from '@nifi/shared';
import { CurrentUser } from '../../../state/current-user';
import { initialState as initialUserState } from '../../../state/current-user/current-user.reducer';
@@ -1258,13 +1258,38 @@ export class CanvasUtils {
selection.on('mouseenter', null).on('mouseleave', null);
}
+ private getHigherSeverityBulletinLevel(left: BulletinEntity, right: BulletinEntity): BulletinEntity {
+ const bulletinSeverityMap: { [key: string]: number } = {
+ TRACE: 0,
+ DEBUG: 1,
+ INFO: 2,
+ WARNING: 3,
+ ERROR: 4
+ };
+ let mappedLeft = 0;
+ let mappedRight = 0;
+ if (left) {
+ mappedLeft = bulletinSeverityMap[left.bulletin.level.toUpperCase()] || 0;
+ }
+ if (right) {
+ mappedRight = bulletinSeverityMap[right.bulletin.level.toUpperCase()] || 0;
+ }
+ return mappedLeft >= mappedRight ? left : right;
+ }
+
+ public getMostSevereBulletin(bulletins: BulletinEntity[]): BulletinEntity {
+ return bulletins.reduce((previous, current) => {
+ return this.getHigherSeverityBulletinLevel(previous, current);
+ });
+ }
+
/**
* Sets the bulletin visibility and applies a tooltip if necessary.
*
* @param selection
* @param bulletins
*/
- public bulletins(selection: any, bulletins: string[]): void {
+ public bulletins(selection: any, bulletins: BulletinEntity[]): void {
if (this.nifiCommon.isEmpty(bulletins)) {
// reset the bulletin icon/background
selection.select('text.bulletin-icon').style('visibility', 'hidden');
@@ -1277,6 +1302,29 @@ export class CanvasUtils {
const bulletinIcon: any = selection.select('text.bulletin-icon').style('visibility', 'visible');
selection.select('rect.bulletin-background').style('visibility', 'visible');
+ const bulletinBackground: any = selection.select('rect.bulletin-background').style('visibility', 'visible');
+
+ // determine the most severe of the bulletins
+ const mostSevere = this.getMostSevereBulletin(bulletins);
+
+ // reset any level-specifying classes that might have been there before
+ bulletinIcon
+ .classed('trace', false)
+ .classed('debug', false)
+ .classed('info', false)
+ .classed('warning', false)
+ .classed('error', false);
+ bulletinBackground
+ .classed('trace', false)
+ .classed('debug', false)
+ .classed('info', false)
+ .classed('warning', false)
+ .classed('error', false);
+
+ // add the proper class to indicate the most severe bulletin
+ bulletinIcon.classed(mostSevere.bulletin.level.toLowerCase(), true);
+ bulletinBackground.classed(mostSevere.bulletin.level.toLowerCase(), true);
+
// add the tooltip
this.canvasTooltip(BulletinsTip, bulletinIcon, {
bulletins: bulletins
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
index ccf38e904e..8427e2d935 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -68,6 +68,9 @@
$neutral-contrast: map.get(map.get($config, neutral), contrast);
$border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$success-lighter: map.get($config, success-lighter);
+ $success-default: map.get(map.get($config, success), default);
+ $caution-default: map.get($config, caution);
+ $on-primary: mat.get-theme-color($material-theme, on-primary);
// Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
$drop-shadow-color: black;
@@ -196,11 +199,31 @@
}
text.bulletin-icon {
- fill: mat.get-theme-color($material-theme, surface);
+ &.error,
+ &.warning,
+ &.info,
+ &.debug,
+ &.trace {
+ fill: mat.get-theme-color($material-theme, surface);
+ }
}
rect.bulletin-background {
- fill: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
+ &.error {
+ fill: if(
+ $is-material-dark,
+ $material-theme-error-palette-default,
+ $material-theme-error-palette-darker
+ );
+ }
+ &.warning {
+ fill: $caution-default;
+ }
+ &.info,
+ &.debug,
+ &.trace {
+ fill: $success-default;
+ }
}
text.component-comments {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
index b064d36b7f..ca0dc16566 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
@@ -35,6 +35,11 @@
error,
map.get(map.get($config, error), default)
);
+ $material-theme-error-palette-lighter: mat.get-theme-color(
+ $material-theme,
+ error,
+ map.get(map.get($config, error), lighter)
+ );
$material-theme-error-palette-darker: mat.get-theme-color(
$material-theme,
error,
@@ -50,37 +55,57 @@
neutral,
map.get(map.get($config, neutral), lighter)
);
+ $material-theme-neutral-palette-default: mat.get-theme-color(
+ $material-theme,
+ neutral,
+ map.get(map.get($config, neutral), default)
+ );
+
+ $material-theme-secondary-palette-default: mat.get-theme-color(
+ $material-theme,
+ secondary,
+ map.get(map.get($config, secondary), default)
+ );
+
+ $on-primary: mat.get-theme-color($material-theme, on-primary);
+ $success-default: map.get(map.get($config, success), default);
+ $caution-default: map.get($config, caution);
.flow-status {
- background: if(
+ background-color: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
.controller-bulletins {
- background-color: if(
- $is-material-dark,
- $material-theme-secondary-palette-lighter,
- $material-theme-secondary-palette-darker
- );
+ background-color: unset;
.fa {
- // invert the contrast colors since the surface is dark in light mode and light in dark mode
- color: mat.get-theme-color($material-theme, surface);
+ color: $material-theme-secondary-palette-default;
}
}
.controller-bulletins.has-bulletins {
- background-color: if(
- $is-material-dark,
- $material-theme-error-palette-default,
- $material-theme-error-palette-darker
- );
-
.fa {
color: mat.get-theme-color($material-theme, surface);
}
+
+ &.error {
+ background-color: if(
+ $is-material-dark,
+ $material-theme-error-palette-default,
+ $material-theme-error-palette-darker
+ );
+ }
+ &.warning {
+ background-color: $caution-default;
+ }
+ &.info,
+ &.debug,
+ &.trace {
+ background-color: $success-default;
+ }
}
.flow-analysis-notifications.warn {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
index 574bc980a2..aba0d51b7f 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
@@ -141,11 +141,12 @@
[tooltipComponentType]="BulletinsTip"
[tooltipInputData]="getBulletins()"
[position]="getBulletinTooltipPosition()"
+ [ngClass]="getMostSevereBulletinLevel()"
class="h-8 w-8 controller-bulletins border-l has-bulletins">
<i class="fa fa-sticky-note-o"></i>
</button>
} @else {
- <button class="h-8 w-8 controller-bulletins">
+ <button class="h-8 w-8 controller-bulletins border-l">
<i class="fa fa-sticky-note-o"></i>
</button>
}
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
index efa6dee7b2..2ce93ec5fe 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
@@ -30,6 +30,7 @@ import { CommonModule } from '@angular/common';
import { Store } from '@ngrx/store';
import { NiFiState } from '../../../../../../state';
import { setFlowAnalysisOpen } from '../../../../state/flow/flow.actions';
+import { CanvasUtils } from '../../../../service/canvas-utils.service';
@Component({
selector: 'flow-status',
@@ -75,7 +76,8 @@ export class FlowStatus {
constructor(
private store: Store<NiFiState>,
- private storage: Storage
+ private storage: Storage,
+ private canvasUtils: CanvasUtils
) {
try {
const item: { [key: string]: boolean } | null = this.storage.getItem(
@@ -169,6 +171,12 @@ export class FlowStatus {
};
}
+ getMostSevereBulletinLevel(): string {
+ // determine the most severe of the bulletins
+ const mostSevere = this.canvasUtils.getMostSevereBulletin(this.filteredBulletins);
+ return mostSevere.bulletin.level.toLowerCase();
+ }
+
getBulletinTooltipPosition(): ConnectedPosition {
return {
originX: 'end',
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/tooltips/bulletins-tip/bulletins-tip.component.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/tooltips/bulletins-tip/bulletins-tip.component.scss
index 2944f98194..013bdbf3ca 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/tooltips/bulletins-tip/bulletins-tip.component.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/tooltips/bulletins-tip/bulletins-tip.component.scss
@@ -14,3 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+.tooltip {
+ max-height: 70vh;
+}