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 d753fa35ad49..08e581d217e8 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 @@ -40,11 +40,6 @@ 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-primary-palette-default: mat.get-theme-color( $material-theme, diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/_edit-processor.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/_edit-processor.component-theme.scss new file mode 100644 index 000000000000..a73ca642ddcd --- /dev/null +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/_edit-processor.component-theme.scss @@ -0,0 +1,81 @@ +/* + * 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. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin generate-theme($material-theme, $config) { + $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false); + $material-theme-secondary-palette-default: mat.get-theme-color( + $material-theme, + secondary, + map.get(map.get($config, secondary), default) + ); + $material-theme-error-palette-default: mat.get-theme-color( + $material-theme, + error, + map.get(map.get($config, error), default) + ); + + $material-theme-primary-palette-default: mat.get-theme-color( + $material-theme, + primary, + map.get(map.get($config, primary), default) + ); + + $primary-contrast: map.get(map.get($config, primary), contrast); + $caution-contrast: map.get(map.get($config, caution), contrast); + $error-contrast: map.get(map.get($config, error), contrast); + $success: map.get(map.get($config, success), default); + $caution: map.get(map.get($config, caution), default); + + #edit-processor-header { + .controller-bulletins { + background-color: unset; + + .fa { + color: $material-theme-primary-palette-default; + } + } + + .controller-bulletins.has-bulletins { + .fa { + color: $primary-contrast; + } + + &.error { + .fa { + color: $error-contrast; + } + + background-color: $material-theme-error-palette-default; + } + &.warning { + .fa { + color: $caution-contrast; + } + + background-color: $caution; + } + &.info, + &.debug, + &.trace { + background-color: $success; + } + } + } +} diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html index 203c7fb7685c..3b5de979b7f9 100644 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html @@ -15,8 +15,8 @@ ~ limitations under the License. --> -

-
+

+
{{ readonly ? 'Processor Details' : 'Edit Processor' }} @@ -26,57 +26,73 @@

{{ formatType() }}

-
- @if (isStoppable()) { - - } @else if (isRunnable()) { - - } @else { - - } - +
+
@if (isStoppable()) { - - } - @if (isRunnable()) { - - } - @if (isDisableable()) { - } - @if (isEnableable()) { - + } + @if (isRunnable()) { + + } + @if (isDisableable()) { + + } + @if (isEnableable()) { + + } + +
+ @if (hasBulletins()) { +
+ - } - +
+ }

diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss index 4f3a5f0a1a53..6e394c05d5af 100644 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss @@ -28,3 +28,7 @@ h2.mdc-dialog__title::before { width: 100%; } } + +#edit-processor-header { + line-height: 18px; +} diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.ts index 3a100dad0984..e496b4ed6562 100644 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.ts +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.ts @@ -31,12 +31,13 @@ import { import { MatInputModule } from '@angular/material/input'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatButtonModule } from '@angular/material/button'; -import { AsyncPipe } from '@angular/common'; +import { AsyncPipe, NgClass } from '@angular/common'; import { MatTabsModule } from '@angular/material/tabs'; import { MatOptionModule } from '@angular/material/core'; import { MatSelectModule } from '@angular/material/select'; import { Observable, of } from 'rxjs'; import { + BulletinsTipInput, InlineServiceCreationRequest, InlineServiceCreationResponse, ParameterContextEntity, @@ -73,6 +74,8 @@ import { TabbedDialog } from '../../../../../../../ui/common/tabbed-dialog/tabbe import { ComponentType, SelectOption } from 'libs/shared/src'; import { ErrorContextKey } from '../../../../../../../state/error'; import { ContextErrorBanner } from '../../../../../../../ui/common/context-error-banner/context-error-banner.component'; +import { BulletinsTip } from '../../../../../../../ui/common/tooltips/bulletins-tip/bulletins-tip.component'; +import { ConnectedPosition } from '@angular/cdk/overlay'; @Component({ selector: 'edit-processor', @@ -97,7 +100,8 @@ import { ContextErrorBanner } from '../../../../../../../ui/common/context-error ErrorBanner, PropertyVerification, ContextErrorBanner, - CopyDirective + CopyDirective, + NgClass ], styleUrls: ['./edit-processor.component.scss'] }) @@ -129,11 +133,13 @@ export class EditProcessor extends TabbedDialog { @Output() enableComponentRequest: EventEmitter = new EventEmitter(); protected readonly TextTip = TextTip; + protected readonly BulletinsTip = BulletinsTip; editProcessorForm: FormGroup; readonly: boolean = true; - status: any = true; - revision: any = true; + status: any; + revision: any; + bulletins: any; bulletinLevels = [ { @@ -276,6 +282,7 @@ export class EditProcessor extends TabbedDialog { initialize(entity: any) { this.status = entity.status; this.revision = entity.revision; + this.bulletins = entity.bulletins; this.readonly = !entity.permissions.canWrite || !this.canvasUtils.runnableSupportsModification(entity); @@ -453,6 +460,33 @@ export class EditProcessor extends TabbedDialog { }); } + hasBulletins(): boolean { + return this.request.entity.permissions.canRead && !this.nifiCommon.isEmpty(this.bulletins); + } + + getBulletinsTipData(): BulletinsTipInput { + return { + bulletins: this.bulletins + }; + } + + getBulletinTooltipPosition(): ConnectedPosition { + return { + originX: 'end', + originY: 'bottom', + overlayX: 'end', + overlayY: 'top', + offsetX: -8, + offsetY: 8 + }; + } + + getMostSevereBulletinLevel(): string | null { + // determine the most severe of the bulletins + const mostSevere = this.canvasUtils.getMostSevereBulletin(this.bulletins); + return mostSevere ? mostSevere.bulletin.level.toLowerCase() : null; + } + isStoppable(): boolean { if (!this.canOperate()) { return false; diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss index 8ce41675cf8f..3ae320876ca0 100644 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss @@ -33,6 +33,7 @@ birdseye-control; @use 'app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component-theme' as operation-control; +@use 'app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component-theme' as edit-processor; @use 'app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component-theme' as flow-status; @use 'app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component-theme' as new-canvas-item; @use 'app/pages/flow-designer/ui/canvas/header/search/search.component-theme' as search; @@ -94,6 +95,7 @@ html { @include navigation-control.generate-theme($m3-light-theme, $m3-light-theme-config); @include operation-control.generate-theme($m3-light-theme, $m3-light-theme-config); @include flow-status.generate-theme($m3-light-theme, $m3-light-theme-config); + @include edit-processor.generate-theme($m3-light-theme, $m3-light-theme-config); @include violation-details-dialog.generate-theme($m3-light-theme, $m3-light-theme-config); @include new-canvas-item.generate-theme($m3-light-theme, $m3-light-theme-config); @include search.generate-theme($m3-light-theme, $m3-light-theme-config); @@ -127,6 +129,7 @@ html { @include navigation-control.generate-theme($m3-dark-theme, $m3-dark-theme-config); @include operation-control.generate-theme($m3-dark-theme, $m3-dark-theme-config); @include flow-status.generate-theme($m3-dark-theme, $m3-dark-theme-config); + @include edit-processor.generate-theme($m3-dark-theme, $m3-dark-theme-config); @include violation-details-dialog.generate-theme($m3-dark-theme, $m3-dark-theme-config); @include new-canvas-item.generate-theme($m3-dark-theme, $m3-dark-theme-config); @include search.generate-theme($m3-dark-theme, $m3-dark-theme-config);