Skip to content

Commit

Permalink
display processor bulletins
Browse files Browse the repository at this point in the history
  • Loading branch information
scottyaslan committed Nov 25, 2024
1 parent 4f20363 commit 7b5c6c1
Show file tree
Hide file tree
Showing 6 changed files with 189 additions and 56 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
~ limitations under the License.
-->

<h2 mat-dialog-title>
<div class="flex justify-between items-baseline">
<h2 id="edit-processor-header" mat-dialog-title>
<div class="flex justify-between">
<div class="flex items-baseline">
<div class="mr-2">
{{ readonly ? 'Processor Details' : 'Edit Processor' }}
Expand All @@ -26,57 +26,73 @@ <h2 mat-dialog-title>
{{ formatType() }}
</div>
</div>
<div>
@if (isStoppable()) {
<button type="button" mat-stroked-button [matMenuTriggerFor]="operateMenu">
<div class="flex items-center">
<i class="mr-2 success-color-default fa fa-play"></i>Running<i
class="ml-2 -mt-1 fa fa-sort-desc"></i>
</div>
</button>
} @else if (isRunnable()) {
<button type="button" mat-stroked-button [matMenuTriggerFor]="operateMenu">
<div class="flex items-center">
<i class="mr-2 error-color-variant fa fa-stop"></i>Stopped<i
class="ml-2 -mt-1 fa fa-sort-desc"></i>
</div>
</button>
} @else {
<button type="button" mat-stroked-button [matMenuTriggerFor]="operateMenu">
<div class="flex items-center">
@if (isInvalid()) {
<i class="mr-2 fa fa-warning caution-color"></i>
} @else if (isDisabled()) {
<i class="mr-2 icon icon-enable-false"></i>
} @else {
<i class="mr-2 fa fa-circle-o-notch fa-spin primary-color"></i>
}
{{ formatRunStatus() }}
</div>
</button>
}
<mat-menu #operateMenu="matMenu" xPosition="before">
<div class="flex">
<div>
@if (isStoppable()) {
<button mat-menu-item (click)="stop(request.entity)">
<i class="mr-2 fa fa-stop primary-color"></i>Stop
<button type="button" mat-stroked-button [matMenuTriggerFor]="operateMenu">
<div class="flex items-center">
<i class="mr-2 success-color-default fa fa-play"></i>Running<i
class="ml-2 -mt-1 fa fa-sort-desc"></i>
</div>
</button>
}
@if (isRunnable()) {
<button mat-menu-item [disabled]="editProcessorForm.dirty" (click)="start(request.entity)">
<i class="mr-2 fa fa-play primary-color"></i>Start
} @else if (isRunnable()) {
<button type="button" mat-stroked-button [matMenuTriggerFor]="operateMenu">
<div class="flex items-center">
<i class="mr-2 error-color-variant fa fa-stop"></i>Stopped<i
class="ml-2 -mt-1 fa fa-sort-desc"></i>
</div>
</button>
}
@if (isDisableable()) {
<button mat-menu-item [disabled]="editProcessorForm.dirty" (click)="disable(request.entity)">
<i class="mr-2 icon icon-enable-false primary-color"></i>Disable
} @else {
<button type="button" mat-stroked-button [matMenuTriggerFor]="operateMenu">
<div class="flex items-center">
@if (isInvalid()) {
<i class="mr-2 fa fa-warning caution-color"></i>
} @else if (isDisabled()) {
<i class="mr-2 icon icon-enable-false"></i>
} @else {
<i class="mr-2 fa fa-circle-o-notch fa-spin primary-color"></i>
}
{{ formatRunStatus() }}
</div>
</button>
}
@if (isEnableable()) {
<button mat-menu-item [disabled]="editProcessorForm.dirty" (click)="enable(request.entity)">
<i class="mr-2 fa fa-flash primary-color"></i>Enable
<mat-menu #operateMenu="matMenu" xPosition="before">
@if (isStoppable()) {
<button mat-menu-item (click)="stop(request.entity)">
<i class="mr-2 fa fa-stop primary-color"></i>Stop
</button>
}
@if (isRunnable()) {
<button mat-menu-item [disabled]="editProcessorForm.dirty" (click)="start(request.entity)">
<i class="mr-2 fa fa-play primary-color"></i>Start
</button>
}
@if (isDisableable()) {
<button mat-menu-item [disabled]="editProcessorForm.dirty" (click)="disable(request.entity)">
<i class="mr-2 icon icon-enable-false primary-color"></i>Disable
</button>
}
@if (isEnableable()) {
<button mat-menu-item [disabled]="editProcessorForm.dirty" (click)="enable(request.entity)">
<i class="mr-2 fa fa-flash primary-color"></i>Enable
</button>
}
</mat-menu>
</div>
@if (hasBulletins()) {
<div class="w-[48px]">
<button
nifiTooltip
[delayClose]="true"
[tooltipComponentType]="BulletinsTip"
[tooltipInputData]="getBulletinsTipData()"
[position]="getBulletinTooltipPosition()"
[ngClass]="getMostSevereBulletinLevel()"
class="absolute top-0 right-0 text-3xl h-14 w-14 controller-bulletins has-bulletins">
<i class="fa fa-sticky-note-o"></i>
</button>
}
</mat-menu>
</div>
}
</div>
</div>
</h2>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,7 @@ h2.mdc-dialog__title::before {
width: 100%;
}
}

#edit-processor-header {
line-height: 18px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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',
Expand All @@ -97,7 +100,8 @@ import { ContextErrorBanner } from '../../../../../../../ui/common/context-error
ErrorBanner,
PropertyVerification,
ContextErrorBanner,
CopyDirective
CopyDirective,
NgClass
],
styleUrls: ['./edit-processor.component.scss']
})
Expand Down Expand Up @@ -129,11 +133,13 @@ export class EditProcessor extends TabbedDialog {
@Output() enableComponentRequest: EventEmitter<EnableComponentRequest> = new EventEmitter<EnableComponentRequest>();

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 = [
{
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit 7b5c6c1

Please sign in to comment.