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

[NIFI-12922] semantic dialog size configurations (#8535) 

* [NIFI-12922] semantic dialog size configurations

* move DIALOG_SIZES to index.ts, fix status history dialog

* fix paramter context dialog size to large

* remove dialog height styles to help keep the dialog action buttons on screen for smaller screen heights

* update import from registry dialog

* update edit remote port dialog size styles

* update user access policies table width

* update component state width

* remove .selected-type width

* udate edit parameter context dialog

* update status history dialog

* update system diagnostics dialog

* update flow analysis rules, parameter providers, and reporting task dialog widths

* update enable and disable CS dialog width

* handle tailwind width styles for dialog contents

* update purge history dialog

* fix system diagnostics vertical height tab differences

* update component state dialog style, retore listing-table width 100%

* remove SMALL dialog from YesNoDialog, CancelDialog, and OkDialog widths

* restore Enable/Disable CS dialog spacing, remove SMALL dialog size from the override policy dialog

* introduce SMALL_DIALOG, MEDIUM_DIALOG, LARGE_DIALOG, and XL_DIALOG MatDialogConfig

* update purge history dialog

* remove grid and use flex basis-2/3 instead

* YesNo dialogs are SMALL_DIALOG with maxWidth: 24rem, Ok Dialogs can be any size but should override the maxWidth: 24rem, Cancel Dialog have no size

* remove unnecessary maxWidth: 24rem from OkDialogs

* use basis-2/3 and basis-1/3 for enable/disable CS and relationship setting edit processor layouts, add border and overflow scrolling for referencing component listings UX everywhere

* final touches

This closes #8535
This commit is contained in:
Scott Aslan 2024-03-29 16:18:11 -04:00 committed by GitHub
parent 6c8af1441e
commit d85f4b39c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
54 changed files with 363 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/index.ts Normal file
View File

@ -0,0 +1,35 @@
/*
* 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.
*/
import { MatDialogConfig } from '@angular/material/dialog';
export const SMALL_DIALOG: MatDialogConfig = {
maxWidth: '24rem',
minWidth: 320
};
export const MEDIUM_DIALOG: MatDialogConfig = {
maxWidth: 470,
minWidth: 470
};
export const LARGE_DIALOG: MatDialogConfig = {
maxWidth: 760,
minWidth: 760
};
export const XL_DIALOG: MatDialogConfig = {
maxWidth: 1024,
minWidth: 1024
};

15
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/state/access-policy/access-policy.effects.ts
View File

@ -32,6 +32,7 @@ import { AddTenantToPolicyDialog } from '../../ui/common/add-tenant-to-policy-di
import { AddTenantsToPolicyRequest } from './index'; import { AddTenantsToPolicyRequest } from './index';
import { selectUserGroups, selectUsers } from '../tenants/tenants.selectors'; import { selectUserGroups, selectUsers } from '../tenants/tenants.selectors';
import { OverridePolicyDialog } from '../../ui/common/override-policy-dialog/override-policy-dialog.component'; import { OverridePolicyDialog } from '../../ui/common/override-policy-dialog/override-policy-dialog.component';
import { MEDIUM_DIALOG, SMALL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class AccessPolicyEffects { export class AccessPolicyEffects {
@ -172,7 +173,7 @@ export class AccessPolicyEffects {
concatLatestFrom(() => this.store.select(selectAccessPolicy).pipe(isDefinedAndNotNull())), concatLatestFrom(() => this.store.select(selectAccessPolicy).pipe(isDefinedAndNotNull())),
tap(([, accessPolicy]) => { tap(([, accessPolicy]) => {
const dialogReference = this.dialog.open(OverridePolicyDialog, { const dialogReference = this.dialog.open(OverridePolicyDialog, {
panelClass: 'small-dialog' ...SMALL_DIALOG
}); });
dialogReference.componentInstance.copyInheritedPolicy dialogReference.componentInstance.copyInheritedPolicy
@ -289,10 +290,10 @@ export class AccessPolicyEffects {
concatLatestFrom(() => this.store.select(selectAccessPolicy)), concatLatestFrom(() => this.store.select(selectAccessPolicy)),
tap(([, accessPolicy]) => { tap(([, accessPolicy]) => {
const dialogReference = this.dialog.open(AddTenantToPolicyDialog, { const dialogReference = this.dialog.open(AddTenantToPolicyDialog, {
...MEDIUM_DIALOG,
data: { data: {
accessPolicy accessPolicy
}, }
panelClass: 'medium-dialog'
}); });
dialogReference.componentInstance.saving$ = this.store.select(selectSaving); dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -350,11 +351,11 @@ export class AccessPolicyEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Update Policy', title: 'Update Policy',
message: `Remove '${request.tenant.component.identity}' from this policy?` message: `Remove '${request.tenant.component.identity}' from this policy?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -419,12 +420,12 @@ export class AccessPolicyEffects {
ofType(AccessPolicyActions.promptDeleteAccessPolicy), ofType(AccessPolicyActions.promptDeleteAccessPolicy),
tap(() => { tap(() => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Delete Policy', title: 'Delete Policy',
message: message:
'Are you sure you want to delete this policy? By doing so, the permissions for this component will revert to the inherited policy if applicable.' 'Are you sure you want to delete this policy? By doing so, the permissions for this component will revert to the inherited policy if applicable.'
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/override-policy-dialog/override-policy-dialog.component.html
View File

@ -17,7 +17,7 @@
<h2 mat-dialog-title>Override Policy</h2> <h2 mat-dialog-title>Override Policy</h2>
<form class="override-policy-form" [formGroup]="overridePolicyForm"> <form class="override-policy-form" [formGroup]="overridePolicyForm">
<mat-dialog-content class="w-96"> <mat-dialog-content>
<div class="mb-5">Do you want to override with a copy of the inherited policy or an empty policy?</div> <div class="mb-5">Do you want to override with a copy of the inherited policy or an empty policy?</div>
<mat-radio-group formControlName="override"> <mat-radio-group formControlName="override">
<mat-radio-button color="primary" value="copy">Copy</mat-radio-button> <mat-radio-button color="primary" value="copy">Copy</mat-radio-button>

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/state/counter-listing/counter-listing.effects.ts
View File

@ -28,6 +28,7 @@ import * as ErrorActions from '../../../../state/error/error.actions';
import { ErrorHelper } from '../../../../service/error-helper.service'; import { ErrorHelper } from '../../../../service/error-helper.service';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { selectStatus } from './counter-listing.selectors'; import { selectStatus } from './counter-listing.selectors';
import { SMALL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class CounterListingEffects { export class CounterListingEffects {
@ -68,11 +69,11 @@ export class CounterListingEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Reset Counter', title: 'Reset Counter',
message: `Reset counter '${request.counter.name}' to default value?` message: `Reset counter '${request.counter.name}' to default value?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {

13
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/state/flow-configuration-history-listing/flow-configuration-history-listing.effects.ts
View File

@ -34,6 +34,7 @@ import { YesNoDialog } from '../../../../ui/common/yes-no-dialog/yes-no-dialog.c
import { isDefinedAndNotNull } from '../../../../state/shared'; import { isDefinedAndNotNull } from '../../../../state/shared';
import * as ErrorActions from '../../../../state/error/error.actions'; import * as ErrorActions from '../../../../state/error/error.actions';
import { selectAbout } from '../../../../state/about/about.selectors'; import { selectAbout } from '../../../../state/about/about.selectors';
import { MEDIUM_DIALOG, SMALL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class FlowConfigurationHistoryListingEffects { export class FlowConfigurationHistoryListingEffects {
@ -81,8 +82,8 @@ export class FlowConfigurationHistoryListingEffects {
map((action) => action.request), map((action) => action.request),
tap((actionEntity) => { tap((actionEntity) => {
this.dialog.open(ActionDetails, { this.dialog.open(ActionDetails, {
data: actionEntity, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: actionEntity
}); });
}) })
), ),
@ -94,9 +95,7 @@ export class FlowConfigurationHistoryListingEffects {
this.actions$.pipe( this.actions$.pipe(
ofType(HistoryActions.openPurgeHistoryDialog), ofType(HistoryActions.openPurgeHistoryDialog),
tap(() => { tap(() => {
const dialogReference = this.dialog.open(PurgeHistory, { const dialogReference = this.dialog.open(PurgeHistory);
panelClass: 'medium-short-dialog'
});
dialogReference.componentInstance.submitPurgeRequest dialogReference.componentInstance.submitPurgeRequest
.pipe( .pipe(
@ -106,11 +105,11 @@ export class FlowConfigurationHistoryListingEffects {
) )
.subscribe(([result, about]) => { .subscribe(([result, about]) => {
const yesNoRef = this.dialog.open(YesNoDialog, { const yesNoRef = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Confirm History Purge', title: 'Confirm History Purge',
message: `Are you sure you want to delete all history before '${result.endDate} ${about.timezone}'?` message: `Are you sure you want to delete all history before '${result.endDate} ${about.timezone}'?`
}, }
panelClass: 'small-dialog'
}); });
yesNoRef.componentInstance.yes.pipe(take(1)).subscribe(() => { yesNoRef.componentInstance.yes.pipe(take(1)).subscribe(() => {

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.scss
View File

@ -23,7 +23,6 @@
.panel-content { .panel-content {
position: relative; position: relative;
height: 350px;
overflow-y: auto; overflow-y: auto;
} }
} }

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/purge-history/purge-history.component.html
View File

@ -21,7 +21,7 @@
<div class="purge-history-content h-full"> <div class="purge-history-content h-full">
<mat-dialog-content class="h-full"> <mat-dialog-content class="h-full">
<div class="panel-content flex h-full w-full gap-y-4 gap-x-4 pt-4"> <div class="panel-content flex h-full w-full gap-y-4 gap-x-4 pt-4">
<div> <div class="w-full">
<mat-form-field> <mat-form-field>
<mat-label>Before Date</mat-label> <mat-label>Before Date</mat-label>
<input <input
@ -34,7 +34,7 @@
<mat-datepicker #endDatePicker></mat-datepicker> <mat-datepicker #endDatePicker></mat-datepicker>
</mat-form-field> </mat-form-field>
</div> </div>
<div> <div class="w-full">
<mat-form-field> <mat-form-field>
<mat-label>Before Time ({{ (about$ | async)?.timezone }})</mat-label> <mat-label>Before Time ({{ (about$ | async)?.timezone }})</mat-label>
<input <input

9
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/purge-history/purge-history.component.scss
View File

@ -17,15 +17,6 @@
.purge-history { .purge-history {
.purge-history-content { .purge-history-content {
.mdc-dialog__content {
padding: 0 16px;
font-size: 14px;
.panel-content {
height: 150px;
}
}
.mdc-text-field__input::-webkit-calendar-picker-indicator { .mdc-text-field__input::-webkit-calendar-picker-indicator {
display: block; display: block;
} }

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/parameter-helper.service.ts
View File

@ -30,6 +30,7 @@ import { ParameterState } from '../state/parameter';
import * as ErrorActions from '../../../state/error/error.actions'; import * as ErrorActions from '../../../state/error/error.actions';
import * as ParameterActions from '../state/parameter/parameter.actions'; import * as ParameterActions from '../state/parameter/parameter.actions';
import { FlowService } from './flow.service'; import { FlowService } from './flow.service';
import { MEDIUM_DIALOG } from '../../../index';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -98,8 +99,8 @@ export class ParameterHelperService {
existingParameters existingParameters
}; };
const convertToParameterDialogReference = this.dialog.open(EditParameterDialog, { const convertToParameterDialogReference = this.dialog.open(EditParameterDialog, {
data: convertToParameterDialogRequest, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: convertToParameterDialogRequest
}); });
convertToParameterDialogReference.componentInstance.saving$ = convertToParameterDialogReference.componentInstance.saving$ =

25
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/controller-services/controller-services.effects.ts
View File

@ -47,6 +47,7 @@ import * as ErrorActions from '../../../../state/error/error.actions';
import { ErrorHelper } from '../../../../service/error-helper.service'; import { ErrorHelper } from '../../../../service/error-helper.service';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { ParameterHelperService } from '../../service/parameter-helper.service'; import { ParameterHelperService } from '../../service/parameter-helper.service';
import { LARGE_DIALOG, SMALL_DIALOG, XL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class ControllerServicesEffects { export class ControllerServicesEffects {
@ -101,10 +102,10 @@ export class ControllerServicesEffects {
]), ]),
tap(([, controllerServiceTypes, processGroupId]) => { tap(([, controllerServiceTypes, processGroupId]) => {
const dialogReference = this.dialog.open(CreateControllerService, { const dialogReference = this.dialog.open(CreateControllerService, {
...LARGE_DIALOG,
data: { data: {
controllerServiceTypes controllerServiceTypes
}, }
panelClass: 'medium-dialog'
}); });
dialogReference.componentInstance.saving$ = this.store.select(selectSaving); dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -190,11 +191,11 @@ export class ControllerServicesEffects {
const serviceId: string = request.id; const serviceId: string = request.id;
const editDialogReference = this.dialog.open(EditControllerService, { const editDialogReference = this.dialog.open(EditControllerService, {
...LARGE_DIALOG,
data: { data: {
controllerService: request.controllerService controllerService: request.controllerService
}, },
id: serviceId, id: serviceId
panelClass: 'large-dialog'
}); });
editDialogReference.componentInstance.saving$ = this.store.select(selectSaving); editDialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -205,11 +206,11 @@ export class ControllerServicesEffects {
const goTo = (commands: string[], destination: string): void => { const goTo = (commands: string[], destination: string): void => {
if (editDialogReference.componentInstance.editControllerServiceForm.dirty) { if (editDialogReference.componentInstance.editControllerServiceForm.dirty) {
const saveChangesDialogReference = this.dialog.open(YesNoDialog, { const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Controller Service Configuration', title: 'Controller Service Configuration',
message: `Save changes before going to this ${destination}?` message: `Save changes before going to this ${destination}?`
}, }
panelClass: 'small-dialog'
}); });
saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -380,9 +381,9 @@ export class ControllerServicesEffects {
const serviceId: string = request.id; const serviceId: string = request.id;
const enableDialogReference = this.dialog.open(EnableControllerService, { const enableDialogReference = this.dialog.open(EnableControllerService, {
...XL_DIALOG,
data: request, data: request,
id: serviceId, id: serviceId
panelClass: 'large-dialog'
}); });
enableDialogReference.componentInstance.goToReferencingComponent = ( enableDialogReference.componentInstance.goToReferencingComponent = (
@ -420,9 +421,9 @@ export class ControllerServicesEffects {
const serviceId: string = request.id; const serviceId: string = request.id;
const enableDialogReference = this.dialog.open(DisableControllerService, { const enableDialogReference = this.dialog.open(DisableControllerService, {
...XL_DIALOG,
data: request, data: request,
id: serviceId, id: serviceId
panelClass: 'large-dialog'
}); });
enableDialogReference.componentInstance.goToReferencingComponent = ( enableDialogReference.componentInstance.goToReferencingComponent = (
@ -457,11 +458,11 @@ export class ControllerServicesEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Delete Controller Service', title: 'Delete Controller Service',
message: `Delete controller service ${request.controllerService.component.name}?` message: `Delete controller service ${request.controllerService.component.name}?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {

61
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts
View File

@ -99,6 +99,7 @@ import { ImportFromRegistry } from '../../ui/canvas/items/flow/import-from-regis
import { selectCurrentUser } from '../../../../state/current-user/current-user.selectors'; import { selectCurrentUser } from '../../../../state/current-user/current-user.selectors';
import { NoRegistryClientsDialog } from '../../ui/common/no-registry-clients-dialog/no-registry-clients-dialog.component'; import { NoRegistryClientsDialog } from '../../ui/common/no-registry-clients-dialog/no-registry-clients-dialog.component';
import { EditRemoteProcessGroup } from '../../ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component'; import { EditRemoteProcessGroup } from '../../ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component';
import { LARGE_DIALOG, MEDIUM_DIALOG, SMALL_DIALOG } from '../../../../index';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
@Injectable() @Injectable()
@ -263,11 +264,11 @@ export class FlowEffects {
tap(([request, processorTypes]) => { tap(([request, processorTypes]) => {
this.dialog this.dialog
.open(CreateProcessor, { .open(CreateProcessor, {
...LARGE_DIALOG,
data: { data: {
request, request,
processorTypes processorTypes
}, }
panelClass: 'medium-dialog'
}) })
.afterClosed() .afterClosed()
.subscribe(() => { .subscribe(() => {
@ -307,8 +308,8 @@ export class FlowEffects {
tap((request) => { tap((request) => {
this.dialog this.dialog
.open(CreateRemoteProcessGroup, { .open(CreateRemoteProcessGroup, {
data: request, ...LARGE_DIALOG,
panelClass: 'large-dialog' data: request
}) })
.afterClosed() .afterClosed()
.subscribe(() => { .subscribe(() => {
@ -433,8 +434,8 @@ export class FlowEffects {
tap((request) => { tap((request) => {
this.dialog this.dialog
.open(CreateProcessGroup, { .open(CreateProcessGroup, {
data: request, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: request
}) })
.afterClosed() .afterClosed()
.subscribe(() => { .subscribe(() => {
@ -523,8 +524,8 @@ export class FlowEffects {
tap((request) => { tap((request) => {
this.dialog this.dialog
.open(GroupComponents, { .open(GroupComponents, {
data: request, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: request
}) })
.afterClosed() .afterClosed()
.subscribe(() => { .subscribe(() => {
@ -611,8 +612,8 @@ export class FlowEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(CreateConnection, { const dialogReference = this.dialog.open(CreateConnection, {
data: request, ...LARGE_DIALOG,
panelClass: 'large-dialog' data: request
}); });
dialogReference.componentInstance.getChildOutputPorts = (groupId: string): Observable<any> => { dialogReference.componentInstance.getChildOutputPorts = (groupId: string): Observable<any> => {
@ -667,8 +668,8 @@ export class FlowEffects {
tap((request) => { tap((request) => {
this.dialog this.dialog
.open(CreatePort, { .open(CreatePort, {
data: request, ...SMALL_DIALOG,
panelClass: 'small-dialog' data: request
}) })
.afterClosed() .afterClosed()
.subscribe(() => { .subscribe(() => {
@ -756,8 +757,8 @@ export class FlowEffects {
if (someRegistries) { if (someRegistries) {
const dialogReference = this.dialog.open(ImportFromRegistry, { const dialogReference = this.dialog.open(ImportFromRegistry, {
data: request, ...LARGE_DIALOG,
panelClass: 'medium-dialog' data: request
}); });
dialogReference.componentInstance.getBuckets = ( dialogReference.componentInstance.getBuckets = (
@ -796,10 +797,10 @@ export class FlowEffects {
} else { } else {
this.dialog this.dialog
.open(NoRegistryClientsDialog, { .open(NoRegistryClientsDialog, {
...MEDIUM_DIALOG,
data: { data: {
controllerPermissions: currentUser.controllerPermissions controllerPermissions: currentUser.controllerPermissions
}, }
panelClass: 'medium-dialog'
}) })
.afterClosed() .afterClosed()
.subscribe(() => { .subscribe(() => {
@ -1042,8 +1043,8 @@ export class FlowEffects {
tap((request) => { tap((request) => {
this.dialog this.dialog
.open(EditPort, { .open(EditPort, {
data: request, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: request
}) })
.afterClosed() .afterClosed()
.subscribe(() => { .subscribe(() => {
@ -1106,9 +1107,9 @@ export class FlowEffects {
const processorId: string = request.entity.id; const processorId: string = request.entity.id;
const editDialogReference = this.dialog.open(EditProcessor, { const editDialogReference = this.dialog.open(EditProcessor, {
...LARGE_DIALOG,
data: request, data: request,
id: processorId, id: processorId
panelClass: 'large-dialog'
}); });
editDialogReference.componentInstance.saving$ = this.store.select(selectSaving); editDialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -1119,11 +1120,11 @@ export class FlowEffects {
const goTo = (commands: string[], destination: string): void => { const goTo = (commands: string[], destination: string): void => {
if (editDialogReference.componentInstance.editProcessorForm.dirty) { if (editDialogReference.componentInstance.editProcessorForm.dirty) {
const saveChangesDialogReference = this.dialog.open(YesNoDialog, { const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Processor Configuration', title: 'Processor Configuration',
message: `Save changes before going to this ${destination}?` message: `Save changes before going to this ${destination}?`
}, }
panelClass: 'small-dialog'
}); });
saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -1226,8 +1227,8 @@ export class FlowEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const editDialogReference = this.dialog.open(EditConnectionComponent, { const editDialogReference = this.dialog.open(EditConnectionComponent, {
data: request, ...LARGE_DIALOG,
panelClass: 'large-dialog' data: request
}); });
editDialogReference.componentInstance.saving$ = this.store.select(selectSaving); editDialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -1296,8 +1297,8 @@ export class FlowEffects {
), ),
tap(([request, parameterContexts, currentProcessGroupId]) => { tap(([request, parameterContexts, currentProcessGroupId]) => {
const editDialogReference = this.dialog.open(EditProcessGroup, { const editDialogReference = this.dialog.open(EditProcessGroup, {
data: request, ...LARGE_DIALOG,
panelClass: 'large-dialog' data: request
}); });
editDialogReference.componentInstance.saving$ = this.store.select(selectSaving); editDialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -1367,8 +1368,8 @@ export class FlowEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const editDialogReference = this.dialog.open(EditRemoteProcessGroup, { const editDialogReference = this.dialog.open(EditRemoteProcessGroup, {
data: request, ...LARGE_DIALOG,
panelClass: 'large-dialog' data: request
}); });
editDialogReference.componentInstance.saving$ = this.store.select(selectSaving); editDialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -2218,11 +2219,11 @@ export class FlowEffects {
ofType(FlowActions.showOkDialog), ofType(FlowActions.showOkDialog),
tap((request) => { tap((request) => {
this.dialog.open(OkDialog, { this.dialog.open(OkDialog, {
...MEDIUM_DIALOG,
data: { data: {
title: request.title, title: request.title,
message: request.message message: request.message
}, }
panelClass: 'medium-dialog'
}); });
}) })
), ),

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/manage-remote-ports/manage-remote-ports.effects.ts
View File

@ -34,6 +34,7 @@ import { EditRemotePortDialogRequest } from '../flow';
import { ComponentType, isDefinedAndNotNull } from '../../../../state/shared'; import { ComponentType, isDefinedAndNotNull } from '../../../../state/shared';
import { selectTimeOffset } from '../../../../state/flow-configuration/flow-configuration.selectors'; import { selectTimeOffset } from '../../../../state/flow-configuration/flow-configuration.selectors';
import { selectAbout } from '../../../../state/about/about.selectors'; import { selectAbout } from '../../../../state/about/about.selectors';
import { MEDIUM_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class ManageRemotePortsEffects { export class ManageRemotePortsEffects {
@ -206,6 +207,7 @@ export class ManageRemotePortsEffects {
const portId: string = request.id; const portId: string = request.id;
const editDialogReference = this.dialog.open(EditRemotePortComponent, { const editDialogReference = this.dialog.open(EditRemotePortComponent, {
...MEDIUM_DIALOG,
data: { data: {
type: request.port.type, type: request.port.type,
entity: request.port, entity: request.port,

19
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/queue/queue.effects.ts
View File

@ -31,6 +31,7 @@ import { YesNoDialog } from '../../../../ui/common/yes-no-dialog/yes-no-dialog.c
import { OkDialog } from '../../../../ui/common/ok-dialog/ok-dialog.component'; import { OkDialog } from '../../../../ui/common/ok-dialog/ok-dialog.component';
import { loadConnection, loadProcessGroup } from '../flow/flow.actions'; import { loadConnection, loadProcessGroup } from '../flow/flow.actions';
import { resetQueueState } from './queue.actions'; import { resetQueueState } from './queue.actions';
import { SMALL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class QueueEffects { export class QueueEffects {
@ -49,12 +50,12 @@ export class QueueEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Empty Queue', title: 'Empty Queue',
message: message:
'Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.' 'Are you sure you want to empty this queue? All FlowFiles waiting at the time of the request will be removed.'
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -79,8 +80,7 @@ export class QueueEffects {
title: 'Empty Queue', title: 'Empty Queue',
message: 'Waiting for queue to empty...' message: 'Waiting for queue to empty...'
}, },
disableClose: true, disableClose: true
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.cancel.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.cancel.pipe(take(1)).subscribe(() => {
@ -114,12 +114,12 @@ export class QueueEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Empty All Queues', title: 'Empty All Queues',
message: message:
'Are you sure you want to empty all queues in this Process Group? All FlowFiles from all connections waiting at the time of the request will be removed.' 'Are you sure you want to empty all queues in this Process Group? All FlowFiles from all connections waiting at the time of the request will be removed.'
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -144,8 +144,7 @@ export class QueueEffects {
title: 'Empty All Queues', title: 'Empty All Queues',
message: 'Waiting for all queues to empty...' message: 'Waiting for all queues to empty...'
}, },
disableClose: true, disableClose: true
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.cancel.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.cancel.pipe(take(1)).subscribe(() => {
@ -315,11 +314,11 @@ export class QueueEffects {
} }
const dialogReference = this.dialog.open(OkDialog, { const dialogReference = this.dialog.open(OkDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Empty Queue', title: 'Empty Queue',
message message
}, }
panelClass: 'small-dialog'
}); });
dialogReference.afterClosed().subscribe(() => { dialogReference.afterClosed().subscribe(() => {

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.scss
View File

@ -30,7 +30,6 @@
.listing-table { .listing-table {
table { table {
width: auto;
table-layout: unset; table-layout: unset;
.mat-column-version { .mat-column-version {

20
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/relationship-settings/relationship-settings.component.html
View File

@ -15,8 +15,8 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="relationship-settings flex gap-x-4"> <div class="relationship-settings flex gap-y-4">
<div class="w-96"> <div class="flex basis-1/2 flex-col gap-y-4 pr-4 overflow-hidden">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex items-center gap-x-1.5"> <div class="flex items-center gap-x-1.5">
<div>Automatically Terminate/Retry Relationships</div> <div>Automatically Terminate/Retry Relationships</div>
@ -29,7 +29,11 @@
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
@for (relationship of relationships; track relationship; let i = $index) { @for (relationship of relationships; track relationship; let i = $index) {
<div class="flex flex-col gap-y-1.5"> <div class="flex flex-col gap-y-1.5">
<div class="value">{{ relationship.name }}</div> <div
class="value overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="relationship.name">
{{ relationship.name }}
</div>
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">
<mat-checkbox <mat-checkbox
color="primary" color="primary"
@ -56,9 +60,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-80"> <div class="flex basis-1/2 flex-col">
@if (isRelationshipRetried()) { <div class="flex flex-col">
<div class="flex flex-col"> @if (isRelationshipRetried()) {
<div> <div>
<mat-form-field> <mat-form-field>
<mat-label>Number of Retry Attempts</mat-label> <mat-label>Number of Retry Attempts</mat-label>
@ -112,7 +116,7 @@
> >
</mat-form-field> </mat-form-field>
</div> </div>
</div> }
} </div>
</div> </div>
</div> </div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/no-registry-clients-dialog/no-registry-clients-dialog.component.html
View File

@ -17,7 +17,7 @@
<h2 mat-dialog-title>No Registry clients available</h2> <h2 mat-dialog-title>No Registry clients available</h2>
<mat-dialog-content> <mat-dialog-content>
<div class="text-sm max-w-sm"> <div class="text-sm">
{{ {{
request.controllerPermissions.canRead request.controllerPermissions.canRead
? 'In order to import a flow a Registry Client must be configured in Controller Settings.' ? 'In order to import a flow a Registry Client must be configured in Controller Settings.'

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/edit-remote-port/edit-remote-port.component.scss
View File

@ -20,7 +20,6 @@
.edit-remote-port-form { .edit-remote-port-form {
@include mat.button-density(-1); @include mat.button-density(-1);
width: 500px;
.mat-mdc-form-field { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/state/access/access.effects.ts
View File

@ -24,6 +24,7 @@ import { AuthStorage } from '../../../../service/auth-storage.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { OkDialog } from '../../../../ui/common/ok-dialog/ok-dialog.component'; import { OkDialog } from '../../../../ui/common/ok-dialog/ok-dialog.component';
import { MEDIUM_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class AccessEffects { export class AccessEffects {
@ -89,11 +90,11 @@ export class AccessEffects {
map((action) => action.failure), map((action) => action.failure),
tap((failure) => { tap((failure) => {
this.dialog.open(OkDialog, { this.dialog.open(OkDialog, {
...MEDIUM_DIALOG,
data: { data: {
title: 'Login', title: 'Login',
message: failure message: failure
}, }
panelClass: 'medium-dialog'
}); });
}) })
), ),

29
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/state/parameter-context-listing/parameter-context-listing.effects.ts
View File

@ -57,6 +57,7 @@ import { EditParameterDialog } from '../../../../ui/common/edit-parameter-dialog
import { OkDialog } from '../../../../ui/common/ok-dialog/ok-dialog.component'; import { OkDialog } from '../../../../ui/common/ok-dialog/ok-dialog.component';
import { ErrorHelper } from '../../../../service/error-helper.service'; import { ErrorHelper } from '../../../../service/error-helper.service';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { MEDIUM_DIALOG, SMALL_DIALOG, XL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class ParameterContextListingEffects { export class ParameterContextListingEffects {
@ -97,8 +98,8 @@ export class ParameterContextListingEffects {
ofType(ParameterContextListingActions.openNewParameterContextDialog), ofType(ParameterContextListingActions.openNewParameterContextDialog),
tap(() => { tap(() => {
const dialogReference = this.dialog.open(EditParameterContext, { const dialogReference = this.dialog.open(EditParameterContext, {
data: {}, ...XL_DIALOG,
panelClass: 'large-dialog' data: {}
}); });
dialogReference.componentInstance.availableParameterContexts$ = dialogReference.componentInstance.availableParameterContexts$ =
@ -110,8 +111,8 @@ export class ParameterContextListingEffects {
): Observable<Parameter> => { ): Observable<Parameter> => {
const dialogRequest: EditParameterRequest = { existingParameters }; const dialogRequest: EditParameterRequest = { existingParameters };
const newParameterDialogReference = this.dialog.open(EditParameterDialog, { const newParameterDialogReference = this.dialog.open(EditParameterDialog, {
data: dialogRequest, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: dialogRequest
}); });
newParameterDialogReference.componentInstance.saving$ = of(false); newParameterDialogReference.componentInstance.saving$ = of(false);
@ -247,10 +248,10 @@ export class ParameterContextListingEffects {
const parameterContextId: string = request.parameterContext.id; const parameterContextId: string = request.parameterContext.id;
const editDialogReference = this.dialog.open(EditParameterContext, { const editDialogReference = this.dialog.open(EditParameterContext, {
...XL_DIALOG,
data: { data: {
parameterContext: request.parameterContext parameterContext: request.parameterContext
}, }
panelClass: 'edit-parameter-context-dialog'
}); });
editDialogReference.componentInstance.updateRequest = this.store.select(selectUpdateRequest); editDialogReference.componentInstance.updateRequest = this.store.select(selectUpdateRequest);
@ -266,8 +267,8 @@ export class ParameterContextListingEffects {
): Observable<Parameter> => { ): Observable<Parameter> => {
const dialogRequest: EditParameterRequest = { existingParameters }; const dialogRequest: EditParameterRequest = { existingParameters };
const newParameterDialogReference = this.dialog.open(EditParameterDialog, { const newParameterDialogReference = this.dialog.open(EditParameterDialog, {
data: dialogRequest, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: dialogRequest
}); });
newParameterDialogReference.componentInstance.saving$ = of(false); newParameterDialogReference.componentInstance.saving$ = of(false);
@ -293,8 +294,8 @@ export class ParameterContextListingEffects {
} }
}; };
const editParameterDialogReference = this.dialog.open(EditParameterDialog, { const editParameterDialogReference = this.dialog.open(EditParameterDialog, {
data: dialogRequest, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: dialogRequest
}); });
editParameterDialogReference.componentInstance.saving$ = of(false); editParameterDialogReference.componentInstance.saving$ = of(false);
@ -480,11 +481,11 @@ export class ParameterContextListingEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Delete Parameter Context', title: 'Delete Parameter Context',
message: `Delete parameter context ${request.parameterContext.component.name}?` message: `Delete parameter context ${request.parameterContext.component.name}?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -542,11 +543,11 @@ export class ParameterContextListingEffects {
ofType(ParameterContextListingActions.showOkDialog), ofType(ParameterContextListingActions.showOkDialog),
tap((request) => { tap((request) => {
this.dialog.open(OkDialog, { this.dialog.open(OkDialog, {
...MEDIUM_DIALOG,
data: { data: {
title: request.title, title: request.title,
message: request.message message: request.message
}, }
panelClass: 'medium-dialog'
}); });
}) })
), ),

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
View File

@ -16,7 +16,7 @@
--> -->
<div class="parameter-table flex gap-x-3"> <div class="parameter-table flex gap-x-3">
<div class="flex flex-col gap-y-3"> <div class="flex basis-2/3 flex-col gap-y-3">
@if (canAddParameters) { @if (canAddParameters) {
<div class="flex justify-end items-center"> <div class="flex justify-end items-center">
<button mat-icon-button type="button" (click)="newParameterClicked()"> <button mat-icon-button type="button" (click)="newParameterClicked()">
@ -124,7 +124,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col justify-between gap-y-3 w-full"> <div class="flex basis-1/3 flex-col justify-between gap-y-3 w-full">
<div class="flex flex-col"> <div class="flex flex-col">
<div>Parameter</div> <div>Parameter</div>
<div class="value"> <div class="value">

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.scss
View File

@ -20,7 +20,6 @@
.parameter-table { .parameter-table {
.listing-table { .listing-table {
@include mat.table-density(-4); @include mat.table-density(-4);
width: 506px;
table { table {
.mat-column-actions { .mat-column-actions {

16
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/state/provenance-event-listing/provenance-event-listing.effects.ts
View File

@ -43,6 +43,7 @@ import { HttpErrorResponse } from '@angular/common/http';
import { isDefinedAndNotNull } from '../../../../state/shared'; import { isDefinedAndNotNull } from '../../../../state/shared';
import { selectClusterSummary } from '../../../../state/cluster-summary/cluster-summary.selectors'; import { selectClusterSummary } from '../../../../state/cluster-summary/cluster-summary.selectors';
import { ClusterService } from '../../../../service/cluster.service'; import { ClusterService } from '../../../../service/cluster.service';
import { LARGE_DIALOG, MEDIUM_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class ProvenanceEventListingEffects { export class ProvenanceEventListingEffects {
@ -92,8 +93,7 @@ export class ProvenanceEventListingEffects {
title: 'Provenance', title: 'Provenance',
message: 'Searching provenance events...' message: 'Searching provenance events...'
}, },
disableClose: true, disableClose: true
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.cancel.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.cancel.pipe(take(1)).subscribe(() => {
@ -276,13 +276,13 @@ export class ProvenanceEventListingEffects {
]), ]),
tap(([request, timeOffset, options, currentRequest, about]) => { tap(([request, timeOffset, options, currentRequest, about]) => {
const dialogReference = this.dialog.open(ProvenanceSearchDialog, { const dialogReference = this.dialog.open(ProvenanceSearchDialog, {
...LARGE_DIALOG,
data: { data: {
timeOffset, timeOffset,
clusterNodes: request.clusterNodes, clusterNodes: request.clusterNodes,
options, options,
currentRequest currentRequest
}, }
panelClass: 'large-dialog'
}); });
dialogReference.componentInstance.timezone = about.timezone; dialogReference.componentInstance.timezone = about.timezone;
@ -322,10 +322,10 @@ export class ProvenanceEventListingEffects {
this.provenanceService.getProvenanceEvent(request.eventId, request.clusterNodeId).subscribe({ this.provenanceService.getProvenanceEvent(request.eventId, request.clusterNodeId).subscribe({
next: (response) => { next: (response) => {
const dialogReference = this.dialog.open(ProvenanceEventDialog, { const dialogReference = this.dialog.open(ProvenanceEventDialog, {
...LARGE_DIALOG,
data: { data: {
event: response.provenanceEvent event: response.provenanceEvent
}, }
panelClass: 'large-dialog'
}); });
dialogReference.componentInstance.contentViewerAvailable = about?.contentViewerUrl != null; dialogReference.componentInstance.contentViewerAvailable = about?.contentViewerUrl != null;
@ -429,11 +429,11 @@ export class ProvenanceEventListingEffects {
ofType(ProvenanceEventListingActions.showOkDialog), ofType(ProvenanceEventListingActions.showOkDialog),
tap((request) => { tap((request) => {
this.dialog.open(OkDialog, { this.dialog.open(OkDialog, {
...MEDIUM_DIALOG,
data: { data: {
title: request.title, title: request.title,
message: request.message message: request.message
}, }
panelClass: 'medium-dialog'
}); });
}) })
), ),

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/state/queue-listing/queue-listing.effects.ts
View File

@ -34,6 +34,7 @@ import { HttpErrorResponse } from '@angular/common/http';
import * as ErrorActions from '../../../../state/error/error.actions'; import * as ErrorActions from '../../../../state/error/error.actions';
import { ErrorHelper } from '../../../../service/error-helper.service'; import { ErrorHelper } from '../../../../service/error-helper.service';
import { stopPollingQueueListingRequest } from './queue-listing.actions'; import { stopPollingQueueListingRequest } from './queue-listing.actions';
import { LARGE_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class QueueListingEffects { export class QueueListingEffects {
@ -92,8 +93,7 @@ export class QueueListingEffects {
title: 'Queue Listing', title: 'Queue Listing',
message: 'Waiting for queue listing to complete...' message: 'Waiting for queue listing to complete...'
}, },
disableClose: true, disableClose: true
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.cancel.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.cancel.pipe(take(1)).subscribe(() => {
@ -264,8 +264,8 @@ export class QueueListingEffects {
filter((about) => about != null), filter((about) => about != null),
tap(([request, about]) => { tap(([request, about]) => {
const dialogReference = this.dialog.open(FlowFileDialog, { const dialogReference = this.dialog.open(FlowFileDialog, {
data: request, ...LARGE_DIALOG,
panelClass: 'large-dialog' data: request
}); });
dialogReference.componentInstance.contentViewerAvailable = about?.contentViewerUrl != null; dialogReference.componentInstance.contentViewerAvailable = about?.contentViewerUrl != null;

17
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/flow-analysis-rules/flow-analysis-rules.effects.ts
View File

@ -37,6 +37,7 @@ import * as ErrorActions from '../../../../state/error/error.actions';
import { ErrorHelper } from '../../../../service/error-helper.service'; import { ErrorHelper } from '../../../../service/error-helper.service';
import { selectStatus } from './flow-analysis-rules.selectors'; import { selectStatus } from './flow-analysis-rules.selectors';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { LARGE_DIALOG, SMALL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class FlowAnalysisRulesEffects { export class FlowAnalysisRulesEffects {
@ -80,10 +81,10 @@ export class FlowAnalysisRulesEffects {
concatLatestFrom(() => this.store.select(selectFlowAnalysisRuleTypes)), concatLatestFrom(() => this.store.select(selectFlowAnalysisRuleTypes)),
tap(([, flowAnalysisRuleTypes]) => { tap(([, flowAnalysisRuleTypes]) => {
this.dialog.open(CreateFlowAnalysisRule, { this.dialog.open(CreateFlowAnalysisRule, {
...LARGE_DIALOG,
data: { data: {
flowAnalysisRuleTypes flowAnalysisRuleTypes
}, }
panelClass: 'medium-dialog'
}); });
}) })
), ),
@ -156,11 +157,11 @@ export class FlowAnalysisRulesEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Delete Flow Analysis Rule', title: 'Delete Flow Analysis Rule',
message: `Delete reporting task ${request.flowAnalysisRule.component.name}?` message: `Delete reporting task ${request.flowAnalysisRule.component.name}?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -221,11 +222,11 @@ export class FlowAnalysisRulesEffects {
const ruleId: string = request.id; const ruleId: string = request.id;
const editDialogReference = this.dialog.open(EditFlowAnalysisRule, { const editDialogReference = this.dialog.open(EditFlowAnalysisRule, {
...LARGE_DIALOG,
data: { data: {
flowAnalysisRule: request.flowAnalysisRule flowAnalysisRule: request.flowAnalysisRule
}, },
id: ruleId, id: ruleId
panelClass: 'large-dialog'
}); });
editDialogReference.componentInstance.saving$ = this.store.select(selectSaving); editDialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -236,11 +237,11 @@ export class FlowAnalysisRulesEffects {
const goTo = (commands: string[], destination: string): void => { const goTo = (commands: string[], destination: string): void => {
if (editDialogReference.componentInstance.editFlowAnalysisRuleForm.dirty) { if (editDialogReference.componentInstance.editFlowAnalysisRuleForm.dirty) {
const saveChangesDialogReference = this.dialog.open(YesNoDialog, { const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Flow Analysis Rule Configuration', title: 'Flow Analysis Rule Configuration',
message: `Save changes before going to this ${destination}?` message: `Save changes before going to this ${destination}?`
}, }
panelClass: 'small-dialog'
}); });
saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/general/general.effects.ts
View File

@ -28,6 +28,7 @@ import { selectStatus } from './general.selectors';
import { NiFiState } from '../../../../state'; import { NiFiState } from '../../../../state';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { SMALL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class GeneralEffects { export class GeneralEffects {
@ -91,11 +92,11 @@ export class GeneralEffects {
ofType(GeneralActions.updateControllerConfigSuccess), ofType(GeneralActions.updateControllerConfigSuccess),
tap(() => { tap(() => {
this.dialog.open(OkDialog, { this.dialog.open(OkDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Settings', title: 'Settings',
message: 'Settings successfully applied' message: 'Settings successfully applied'
}, }
panelClass: 'small-dialog'
}); });
}) })
), ),

25
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/management-controller-services/management-controller-services.effects.ts
View File

@ -41,6 +41,7 @@ import { DisableControllerService } from '../../../../ui/common/controller-servi
import { PropertyTableHelperService } from '../../../../service/property-table-helper.service'; import { PropertyTableHelperService } from '../../../../service/property-table-helper.service';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { ErrorHelper } from '../../../../service/error-helper.service'; import { ErrorHelper } from '../../../../service/error-helper.service';
import { LARGE_DIALOG, SMALL_DIALOG, XL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class ManagementControllerServicesEffects { export class ManagementControllerServicesEffects {
@ -84,10 +85,10 @@ export class ManagementControllerServicesEffects {
concatLatestFrom(() => this.store.select(selectControllerServiceTypes)), concatLatestFrom(() => this.store.select(selectControllerServiceTypes)),
tap(([, controllerServiceTypes]) => { tap(([, controllerServiceTypes]) => {
const dialogReference = this.dialog.open(CreateControllerService, { const dialogReference = this.dialog.open(CreateControllerService, {
...LARGE_DIALOG,
data: { data: {
controllerServiceTypes controllerServiceTypes
}, }
panelClass: 'medium-dialog'
}); });
dialogReference.componentInstance.saving$ = this.store.select(selectSaving); dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -179,11 +180,11 @@ export class ManagementControllerServicesEffects {
const serviceId: string = request.id; const serviceId: string = request.id;
const editDialogReference = this.dialog.open(EditControllerService, { const editDialogReference = this.dialog.open(EditControllerService, {
...LARGE_DIALOG,
data: { data: {
controllerService: request.controllerService controllerService: request.controllerService
}, },
id: serviceId, id: serviceId
panelClass: 'large-dialog'
}); });
editDialogReference.componentInstance.saving$ = this.store.select(selectSaving); editDialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -197,11 +198,11 @@ export class ManagementControllerServicesEffects {
const goTo = (commands: string[], destination: string): void => { const goTo = (commands: string[], destination: string): void => {
if (editDialogReference.componentInstance.editControllerServiceForm.dirty) { if (editDialogReference.componentInstance.editControllerServiceForm.dirty) {
const saveChangesDialogReference = this.dialog.open(YesNoDialog, { const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Controller Service Configuration', title: 'Controller Service Configuration',
message: `Save changes before going to this ${destination}?` message: `Save changes before going to this ${destination}?`
}, }
panelClass: 'small-dialog'
}); });
saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -353,9 +354,9 @@ export class ManagementControllerServicesEffects {
const serviceId: string = request.id; const serviceId: string = request.id;
const enableDialogReference = this.dialog.open(EnableControllerService, { const enableDialogReference = this.dialog.open(EnableControllerService, {
...XL_DIALOG,
data: request, data: request,
id: serviceId, id: serviceId
panelClass: 'large-dialog'
}); });
enableDialogReference.componentInstance.goToReferencingComponent = ( enableDialogReference.componentInstance.goToReferencingComponent = (
@ -384,9 +385,9 @@ export class ManagementControllerServicesEffects {
const serviceId: string = request.id; const serviceId: string = request.id;
const enableDialogReference = this.dialog.open(DisableControllerService, { const enableDialogReference = this.dialog.open(DisableControllerService, {
...XL_DIALOG,
data: request, data: request,
id: serviceId, id: serviceId
panelClass: 'large-dialog'
}); });
enableDialogReference.componentInstance.goToReferencingComponent = ( enableDialogReference.componentInstance.goToReferencingComponent = (
@ -413,11 +414,11 @@ export class ManagementControllerServicesEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Delete Controller Service', title: 'Delete Controller Service',
message: `Delete controller service ${request.controllerService.component.name}?` message: `Delete controller service ${request.controllerService.component.name}?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {

19
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/parameter-providers/parameter-providers.effects.ts
View File

@ -55,6 +55,7 @@ import { FetchParameterProviderParameters } from '../../ui/parameter-providers/f
import * as ErrorActions from '../../../../state/error/error.actions'; import * as ErrorActions from '../../../../state/error/error.actions';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { ErrorHelper } from '../../../../service/error-helper.service'; import { ErrorHelper } from '../../../../service/error-helper.service';
import { LARGE_DIALOG, SMALL_DIALOG, XL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class ParameterProvidersEffects { export class ParameterProvidersEffects {
@ -109,10 +110,10 @@ export class ParameterProvidersEffects {
concatLatestFrom(() => this.store.select(selectParameterProviderTypes)), concatLatestFrom(() => this.store.select(selectParameterProviderTypes)),
tap(([, parameterProviderTypes]) => { tap(([, parameterProviderTypes]) => {
const dialogReference = this.dialog.open(CreateParameterProvider, { const dialogReference = this.dialog.open(CreateParameterProvider, {
...LARGE_DIALOG,
data: { data: {
parameterProviderTypes parameterProviderTypes
}, }
panelClass: 'medium-dialog'
}); });
dialogReference.componentInstance.saving$ = this.store.select(selectSaving); dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -186,11 +187,11 @@ export class ParameterProvidersEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Delete Parameter Provider', title: 'Delete Parameter Provider',
message: `Delete parameter provider ${request.parameterProvider.component.name}?` message: `Delete parameter provider ${request.parameterProvider.component.name}?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() =>
@ -256,11 +257,11 @@ export class ParameterProvidersEffects {
tap((request) => { tap((request) => {
const id = request.id; const id = request.id;
const editDialogReference = this.dialog.open(EditParameterProvider, { const editDialogReference = this.dialog.open(EditParameterProvider, {
...LARGE_DIALOG,
data: { data: {
parameterProvider: request.parameterProvider parameterProvider: request.parameterProvider
}, },
id, id
panelClass: 'large-dialog'
}); });
editDialogReference.componentInstance.saving$ = this.store.select(selectSaving); editDialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -269,11 +270,11 @@ export class ParameterProvidersEffects {
// confirm navigating away while changes are unsaved // confirm navigating away while changes are unsaved
if (editDialogReference.componentInstance.editParameterProviderForm.dirty) { if (editDialogReference.componentInstance.editParameterProviderForm.dirty) {
const promptSaveDialogRef = this.dialog.open(YesNoDialog, { const promptSaveDialogRef = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Parameter Provider Configuration', title: 'Parameter Provider Configuration',
message: `Save changes before going to this ${destination}` message: `Save changes before going to this ${destination}`
}, }
panelClass: 'small-dialog'
}); });
promptSaveDialogRef.componentInstance.yes.pipe(take(1)).subscribe(() => { promptSaveDialogRef.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -439,7 +440,7 @@ export class ParameterProvidersEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogRef = this.dialog.open(FetchParameterProviderParameters, { const dialogRef = this.dialog.open(FetchParameterProviderParameters, {
panelClass: 'xl-dialog', ...XL_DIALOG,
data: request data: request
}); });

17
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/registry-clients/registry-clients.effects.ts
View File

@ -35,6 +35,7 @@ import { PropertyTableHelperService } from '../../../../service/property-table-h
import * as ErrorActions from '../../../../state/error/error.actions'; import * as ErrorActions from '../../../../state/error/error.actions';
import { ErrorHelper } from '../../../../service/error-helper.service'; import { ErrorHelper } from '../../../../service/error-helper.service';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { LARGE_DIALOG, MEDIUM_DIALOG, SMALL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class RegistryClientsEffects { export class RegistryClientsEffects {
@ -78,10 +79,10 @@ export class RegistryClientsEffects {
concatLatestFrom(() => this.store.select(selectRegistryClientTypes)), concatLatestFrom(() => this.store.select(selectRegistryClientTypes)),
tap(([, registryClientTypes]) => { tap(([, registryClientTypes]) => {
const dialogReference = this.dialog.open(CreateRegistryClient, { const dialogReference = this.dialog.open(CreateRegistryClient, {
...MEDIUM_DIALOG,
data: { data: {
registryClientTypes registryClientTypes
}, }
panelClass: 'medium-dialog'
}); });
dialogReference.componentInstance.saving$ = this.store.select(selectSaving); dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -180,9 +181,9 @@ export class RegistryClientsEffects {
const registryClientId: string = request.registryClient.id; const registryClientId: string = request.registryClient.id;
const editDialogReference = this.dialog.open(EditRegistryClient, { const editDialogReference = this.dialog.open(EditRegistryClient, {
...LARGE_DIALOG,
data: request, data: request,
id: registryClientId, id: registryClientId
panelClass: 'large-dialog'
}); });
editDialogReference.componentInstance.saving$ = this.store.select(selectSaving); editDialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -195,11 +196,11 @@ export class RegistryClientsEffects {
if (editDialogReference.componentInstance.editRegistryClientForm.dirty) { if (editDialogReference.componentInstance.editRegistryClientForm.dirty) {
const saveChangesDialogReference = this.dialog.open(YesNoDialog, { const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Registry Client Configuration', title: 'Registry Client Configuration',
message: `Save changes before going to this Controller Service?` message: `Save changes before going to this Controller Service?`
}, }
panelClass: 'small-dialog'
}); });
saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -302,11 +303,11 @@ export class RegistryClientsEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Delete Registry Client', title: 'Delete Registry Client',
message: `Delete registry client ${request.registryClient.component.name}?` message: `Delete registry client ${request.registryClient.component.name}?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {

17
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/reporting-tasks/reporting-tasks.effects.ts
View File

@ -37,6 +37,7 @@ import * as ErrorActions from '../../../../state/error/error.actions';
import { ErrorHelper } from '../../../../service/error-helper.service'; import { ErrorHelper } from '../../../../service/error-helper.service';
import { selectStatus } from './reporting-tasks.selectors'; import { selectStatus } from './reporting-tasks.selectors';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { LARGE_DIALOG, SMALL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class ReportingTasksEffects { export class ReportingTasksEffects {
@ -80,10 +81,10 @@ export class ReportingTasksEffects {
concatLatestFrom(() => this.store.select(selectReportingTaskTypes)), concatLatestFrom(() => this.store.select(selectReportingTaskTypes)),
tap(([, reportingTaskTypes]) => { tap(([, reportingTaskTypes]) => {
this.dialog.open(CreateReportingTask, { this.dialog.open(CreateReportingTask, {
...LARGE_DIALOG,
data: { data: {
reportingTaskTypes reportingTaskTypes
}, }
panelClass: 'medium-dialog'
}); });
}) })
), ),
@ -158,11 +159,11 @@ export class ReportingTasksEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Delete Reporting Task', title: 'Delete Reporting Task',
message: `Delete reporting task ${request.reportingTask.component.name}?` message: `Delete reporting task ${request.reportingTask.component.name}?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -223,11 +224,11 @@ export class ReportingTasksEffects {
const taskId: string = request.id; const taskId: string = request.id;
const editDialogReference = this.dialog.open(EditReportingTask, { const editDialogReference = this.dialog.open(EditReportingTask, {
...LARGE_DIALOG,
data: { data: {
reportingTask: request.reportingTask reportingTask: request.reportingTask
}, },
id: taskId, id: taskId
panelClass: 'large-dialog'
}); });
editDialogReference.componentInstance.saving$ = this.store.select(selectSaving); editDialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -238,11 +239,11 @@ export class ReportingTasksEffects {
const goTo = (commands: string[], destination: string): void => { const goTo = (commands: string[], destination: string): void => {
if (editDialogReference.componentInstance.editReportingTaskForm.dirty) { if (editDialogReference.componentInstance.editReportingTaskForm.dirty) {
const saveChangesDialogReference = this.dialog.open(YesNoDialog, { const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Reporting Task Configuration', title: 'Reporting Task Configuration',
message: `Save changes before going to this ${destination}?` message: `Save changes before going to this ${destination}?`
}, }
panelClass: 'small-dialog'
}); });
saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { saveChangesDialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/general/general-form/general-form.component.html
View File

@ -37,7 +37,7 @@
color="primary" color="primary"
(click)="apply()" (click)="apply()"
mat-raised-button> mat-raised-button>
<span *nifiSpinner="saving.value">Add</span> <span *nifiSpinner="saving.value">Apply</span>
</button> </button>
} }
</div> </div>

18
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
View File

@ -44,14 +44,16 @@
</div> </div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div>Referencing Components</div> <div>Referencing Components</div>
<div> <div class="relative h-full border">
<parameter-provider-references <div class="absolute inset-0 overflow-y-auto p-1">
[parameterProviderReferences]=" <parameter-provider-references
request.parameterProvider.component.referencingParameterContexts [parameterProviderReferences]="
" request.parameterProvider.component.referencingParameterContexts
(goToParameterContext)=" "
navigateToParameterContext($event) (goToParameterContext)="
"></parameter-provider-references> navigateToParameterContext($event)
"></parameter-provider-references>
</div>
</div> </div>
</div> </div>
</div> </div>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/state/component-cluster-status/component-cluster-status.effects.ts
View File

@ -29,6 +29,7 @@ import { selectComponentClusterStatusLatestRequest } from './component-cluster-s
import { isDefinedAndNotNull } from '../../../../state/shared'; import { isDefinedAndNotNull } from '../../../../state/shared';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import * as ErrorActions from '../../../../state/error/error.actions'; import * as ErrorActions from '../../../../state/error/error.actions';
import { XL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class ComponentClusterStatusEffects { export class ComponentClusterStatusEffects {
@ -100,7 +101,7 @@ export class ComponentClusterStatusEffects {
), ),
tap(([response, request]) => { tap(([response, request]) => {
const dialogRef = this.dialog.open(ClusterSummaryDialog, { const dialogRef = this.dialog.open(ClusterSummaryDialog, {
panelClass: 'xl-dialog', ...XL_DIALOG,
data: request data: request
}); });
dialogRef.componentInstance.componentType = response.componentType; dialogRef.componentInstance.componentType = response.componentType;

25
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/state/user-listing/user-listing.effects.ts
View File

@ -35,6 +35,7 @@ import { UserAccessPolicies } from '../../ui/user-listing/user-access-policies/u
import * as ErrorActions from '../../../../state/error/error.actions'; import * as ErrorActions from '../../../../state/error/error.actions';
import { ErrorHelper } from '../../../../service/error-helper.service'; import { ErrorHelper } from '../../../../service/error-helper.service';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { LARGE_DIALOG, MEDIUM_DIALOG, SMALL_DIALOG } from '../../../../index';
@Injectable() @Injectable()
export class UserListingEffects { export class UserListingEffects {
@ -97,8 +98,8 @@ export class UserListingEffects {
existingUserGroups existingUserGroups
}; };
const dialogReference = this.dialog.open(EditTenantDialog, { const dialogReference = this.dialog.open(EditTenantDialog, {
data: editTenantRequest, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: editTenantRequest
}); });
dialogReference.componentInstance.saving$ = this.store.select(selectSaving); dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -329,8 +330,8 @@ export class UserListingEffects {
existingUserGroups existingUserGroups
}; };
const dialogReference = this.dialog.open(EditTenantDialog, { const dialogReference = this.dialog.open(EditTenantDialog, {
data: editTenantRequest, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: editTenantRequest
}); });
dialogReference.componentInstance.saving$ = this.store.select(selectSaving); dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -555,8 +556,8 @@ export class UserListingEffects {
existingUserGroups existingUserGroups
}; };
const dialogReference = this.dialog.open(EditTenantDialog, { const dialogReference = this.dialog.open(EditTenantDialog, {
data: editTenantRequest, ...MEDIUM_DIALOG,
panelClass: 'medium-dialog' data: editTenantRequest
}); });
dialogReference.componentInstance.saving$ = this.store.select(selectSaving); dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -654,8 +655,8 @@ export class UserListingEffects {
tap((request) => { tap((request) => {
this.dialog this.dialog
.open(UserAccessPolicies, { .open(UserAccessPolicies, {
data: request, ...LARGE_DIALOG,
panelClass: 'large-dialog' data: request
}) })
.afterClosed() .afterClosed()
.subscribe((response) => { .subscribe((response) => {
@ -679,11 +680,11 @@ export class UserListingEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Delete User Account', title: 'Delete User Account',
message: `Are you sure you want to delete the user account for '${request.user.component.identity}'?` message: `Are you sure you want to delete the user account for '${request.user.component.identity}'?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -720,11 +721,11 @@ export class UserListingEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, { const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: { data: {
title: 'Delete User Account', title: 'Delete User Account',
message: `Are you sure you want to delete the user group account for '${request.userGroup.component.identity}'?` message: `Are you sure you want to delete the user group account for '${request.userGroup.component.identity}'?`
}, }
panelClass: 'small-dialog'
}); });
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => { dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.scss
View File

@ -24,8 +24,6 @@
.listing-table { .listing-table {
table { table {
width: auto;
td, td,
th { th {
cursor: default; cursor: default;

9
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/service/property-table-helper.service.ts
View File

@ -38,6 +38,7 @@ import { NiFiState } from '../state';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { snackBarError } from '../state/error/error.actions'; import { snackBarError } from '../state/error/error.actions';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { LARGE_DIALOG, SMALL_DIALOG } from '../index';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -62,8 +63,8 @@ export class PropertyTableHelperService {
return (existingProperties: string[], allowsSensitive: boolean) => { return (existingProperties: string[], allowsSensitive: boolean) => {
const dialogRequest: NewPropertyDialogRequest = { existingProperties, allowsSensitive }; const dialogRequest: NewPropertyDialogRequest = { existingProperties, allowsSensitive };
const newPropertyDialogReference = this.dialog.open(NewPropertyDialog, { const newPropertyDialogReference = this.dialog.open(NewPropertyDialog, {
data: dialogRequest, ...SMALL_DIALOG,
panelClass: 'small-dialog' data: dialogRequest
}); });
return newPropertyDialogReference.componentInstance.newProperty.pipe( return newPropertyDialogReference.componentInstance.newProperty.pipe(
@ -131,10 +132,10 @@ export class PropertyTableHelperService {
switchMap((implementingTypesResponse) => { switchMap((implementingTypesResponse) => {
// show the create controller service dialog with the types that implemented the interface // show the create controller service dialog with the types that implemented the interface
const createServiceDialogReference = this.dialog.open(CreateControllerService, { const createServiceDialogReference = this.dialog.open(CreateControllerService, {
...LARGE_DIALOG,
data: { data: {
controllerServiceTypes: implementingTypesResponse.controllerServiceTypes controllerServiceTypes: implementingTypesResponse.controllerServiceTypes
}, }
panelClass: 'medium-dialog'
}); });
return createServiceDialogReference.componentInstance.createControllerService.pipe( return createServiceDialogReference.componentInstance.createControllerService.pipe(

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/component-state/component-state.effects.ts
View File

@ -27,6 +27,7 @@ import { ComponentStateDialog } from '../../ui/common/component-state/component-
import { resetComponentState } from './component-state.actions'; import { resetComponentState } from './component-state.actions';
import { selectComponentUri } from './component-state.selectors'; import { selectComponentUri } from './component-state.selectors';
import { isDefinedAndNotNull } from '../shared'; import { isDefinedAndNotNull } from '../shared';
import { LARGE_DIALOG } from '../../index';
@Injectable() @Injectable()
export class ComponentStateEffects { export class ComponentStateEffects {
@ -78,7 +79,7 @@ export class ComponentStateEffects {
ofType(ComponentStateActions.openComponentStateDialog), ofType(ComponentStateActions.openComponentStateDialog),
tap(() => { tap(() => {
const dialogReference = this.dialog.open(ComponentStateDialog, { const dialogReference = this.dialog.open(ComponentStateDialog, {
panelClass: 'large-dialog' ...LARGE_DIALOG
}); });
dialogReference.afterClosed().subscribe(() => { dialogReference.afterClosed().subscribe(() => {

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/contoller-service-state/controller-service-state.effects.ts
View File

@ -27,6 +27,7 @@ import { MatDialog } from '@angular/material/dialog';
import { ControllerServiceStateService } from '../../service/controller-service-state.service'; import { ControllerServiceStateService } from '../../service/controller-service-state.service';
import { ControllerServiceEntity, ControllerServiceReferencingComponentEntity, isDefinedAndNotNull } from '../shared'; import { ControllerServiceEntity, ControllerServiceReferencingComponentEntity, isDefinedAndNotNull } from '../shared';
import { SetEnableRequest, SetEnableStep } from './index'; import { SetEnableRequest, SetEnableStep } from './index';
import { MEDIUM_DIALOG } from '../../index';
@Injectable() @Injectable()
export class ControllerServiceStateEffects { export class ControllerServiceStateEffects {
@ -318,11 +319,11 @@ export class ControllerServiceStateEffects {
ofType(ControllerServiceActions.showOkDialog), ofType(ControllerServiceActions.showOkDialog),
tap((request) => { tap((request) => {
this.dialog.open(OkDialog, { this.dialog.open(OkDialog, {
...MEDIUM_DIALOG,
data: { data: {
title: request.title, title: request.title,
message: request.message message: request.message
}, }
panelClass: 'medium-dialog'
}); });
}) })
), ),

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/status-history/status-history.effects.ts
View File

@ -146,8 +146,9 @@ export class StatusHistoryEffects {
map((action) => action.request), map((action) => action.request),
tap((request) => { tap((request) => {
const dialogReference = this.dialog.open(StatusHistory, { const dialogReference = this.dialog.open(StatusHistory, {
data: request, maxHeight: 'unset',
panelClass: 'large-dialog' maxWidth: 'unset',
data: request
}); });
dialogReference.afterClosed().subscribe((response) => { dialogReference.afterClosed().subscribe((response) => {

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/system-diagnostics/system-diagnostics.effects.ts
View File

@ -25,6 +25,7 @@ import * as SystemDiagnosticsActions from './system-diagnostics.actions';
import { catchError, from, map, of, switchMap, tap } from 'rxjs'; import { catchError, from, map, of, switchMap, tap } from 'rxjs';
import { SystemDiagnosticsRequest } from './index'; import { SystemDiagnosticsRequest } from './index';
import { SystemDiagnosticsDialog } from '../../ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component'; import { SystemDiagnosticsDialog } from '../../ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component';
import { LARGE_DIALOG } from '../../index';
@Injectable() @Injectable()
export class SystemDiagnosticsEffects { export class SystemDiagnosticsEffects {
@ -98,7 +99,9 @@ export class SystemDiagnosticsEffects {
ofType(SystemDiagnosticsActions.openSystemDiagnosticsDialog), ofType(SystemDiagnosticsActions.openSystemDiagnosticsDialog),
tap(() => { tap(() => {
this.dialog this.dialog
.open(SystemDiagnosticsDialog, { panelClass: 'large-dialog' }) .open(SystemDiagnosticsDialog, {
...LARGE_DIALOG
})
.afterClosed() .afterClosed()
.subscribe(() => { .subscribe(() => {
this.store.dispatch(SystemDiagnosticsActions.viewSystemDiagnosticsComplete()); this.store.dispatch(SystemDiagnosticsActions.viewSystemDiagnosticsComplete());

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
View File

@ -31,7 +31,7 @@
{{ stateDescription }} {{ stateDescription }}
</div> </div>
</div> </div>
<div class="listing-table"> <div>
<form [formGroup]="filterForm" class="flex flex-col gap-y-2"> <form [formGroup]="filterForm" class="flex flex-col gap-y-2">
<div class="value">Displaying {{ filteredEntries }} of {{ totalEntries }}</div> <div class="value">Displaying {{ filteredEntries }} of {{ totalEntries }}</div>
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
@ -48,7 +48,7 @@
} }
</div> </div>
</form> </form>
<div class="h-72 overflow-y-auto overflow-x-hidden"> <div class="listing-table h-72 overflow-y-auto overflow-x-hidden">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.scss
View File

@ -20,8 +20,6 @@
.component-state-dialog { .component-state-dialog {
@include mat.button-density(-1); @include mat.button-density(-1);
width: 760px;
.listing-table { .listing-table {
table { table {
.mat-column-key { .mat-column-key {

58
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
View File

@ -21,25 +21,31 @@
<div class="controller-service-disable-form"> <div class="controller-service-disable-form">
@if (disableRequest.currentStep === SetEnableStep.Pending) { @if (disableRequest.currentStep === SetEnableStep.Pending) {
<mat-dialog-content> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="py-4 flex gap-x-4">
<div class="w-96 max-w-full flex flex-col gap-y-4"> <div class="flex basis-2/3 flex-col gap-y-4 pr-4 overflow-hidden">
<div class="flex flex-col"> <div class="flex flex-col">
<div>Service</div> <div>Service</div>
<div class="value">{{ controllerService.component.name }}</div> <div
class="value overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="controllerService.component.name">
{{ controllerService.component.name }}
</div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div>Scope</div> <div>Scope</div>
<div class="value">Service and referencing components</div> <div class="value">Service and referencing components</div>
</div> </div>
</div> </div>
<div class="w-96 max-w-full flex flex-col"> <div class="flex basis-1/3 flex-col">
<div>Referencing Components</div> <div>Referencing Components</div>
<div> <div class="relative h-full border" style="min-height: 320px">
<controller-service-references <div class="absolute inset-0 overflow-y-auto p-1">
[serviceReferences]="controllerService.component.referencingComponents" <controller-service-references
[goToReferencingComponent]=" [serviceReferences]="controllerService.component.referencingComponents"
goToReferencingComponent [goToReferencingComponent]="
"></controller-service-references> goToReferencingComponent
"></controller-service-references>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -50,14 +56,22 @@
</mat-dialog-actions> </mat-dialog-actions>
} @else { } @else {
<mat-dialog-content> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="py-4 flex gap-x-4">
<div class="w-96 max-w-full flex flex-col gap-y-4"> <div class="flex basis-2/3 flex-col gap-y-4 pr-4 overflow-hidden">
<div class="flex flex-col"> <div class="flex flex-col">
<div>Service</div> <div>Service</div>
<div class="value">{{ controllerService.component.name }}</div> <div
class="value overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="controllerService.component.name">
{{ controllerService.component.name }}
</div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div>Steps To Disable {{ controllerService.component.name }}</div> <div
class="overflow-ellipsis overflow-hidden whitespace-nowrap"
title="Steps To Disable {{ controllerService.component.name }}">
Steps To Disable {{ controllerService.component.name }}
</div>
<div class="flex flex-col gap-y-1.5"> <div class="flex flex-col gap-y-1.5">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="value">Stopping referencing processors and reporting tasks</div> <div class="value">Stopping referencing processors and reporting tasks</div>
@ -113,14 +127,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-96 max-w-full flex flex-col"> <div class="flex basis-1/3 flex-col">
<div>Referencing Components</div> <div>Referencing Components</div>
<div> <div class="relative h-full border" style="min-height: 320px">
<controller-service-references <div class="absolute inset-0 overflow-y-auto p-1">
[serviceReferences]="controllerService.component.referencingComponents" <controller-service-references
[goToReferencingComponent]=" [serviceReferences]="controllerService.component.referencingComponents"
goToReferencingComponent [goToReferencingComponent]="
"></controller-service-references> goToReferencingComponent
"></controller-service-references>
</div>
</div> </div>
</div> </div>
</div> </div>

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.scss
View File

@ -23,10 +23,5 @@
.mdc-dialog__content { .mdc-dialog__content {
padding: 0 16px; padding: 0 16px;
font-size: 14px; font-size: 14px;
.tab-content {
height: 475px;
overflow-y: auto;
}
} }
} }

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
View File

@ -73,10 +73,14 @@
</div> </div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div>Referencing Components</div> <div>Referencing Components</div>
<div> <div class="relative h-full border">
<controller-service-references <div class="absolute inset-0 overflow-y-auto p-1">
[serviceReferences]="request.controllerService.component.referencingComponents" <controller-service-references
[goToReferencingComponent]="goToReferencingComponent"></controller-service-references> [serviceReferences]="request.controllerService.component.referencingComponents"
[goToReferencingComponent]="
goToReferencingComponent
"></controller-service-references>
</div>
</div> </div>
</div> </div>
</div> </div>

60
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
View File

@ -21,11 +21,15 @@
<form class="controller-service-enable-form" [formGroup]="enableControllerServiceForm"> <form class="controller-service-enable-form" [formGroup]="enableControllerServiceForm">
@if (enableRequest.currentStep === SetEnableStep.Pending) { @if (enableRequest.currentStep === SetEnableStep.Pending) {
<mat-dialog-content> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="py-4 flex gap-x-3">
<div class="w-96 flex flex-col gap-y-4"> <div class="flex basis-2/3 flex-col gap-y-4 pr-4 overflow-hidden">
<div class="flex flex-col"> <div class="">
<div>Service</div> <div>Service</div>
<div class="value">{{ controllerService.component.name }}</div> <div
class="value overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="controllerService.component.name">
{{ controllerService.component.name }}
</div>
</div> </div>
<div> <div>
<mat-form-field> <mat-form-field>
@ -45,14 +49,16 @@
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div class="w-96 flex flex-col"> <div class="flex basis-1/3 flex-col">
<div>Referencing Components</div> <div>Referencing Components</div>
<div> <div class="relative h-full border" style="min-height: 320px">
<controller-service-references <div class="absolute inset-0 overflow-y-auto p-1">
[serviceReferences]="controllerService.component.referencingComponents" <controller-service-references
[goToReferencingComponent]=" [serviceReferences]="controllerService.component.referencingComponents"
goToReferencingComponent [goToReferencingComponent]="
"></controller-service-references> goToReferencingComponent
"></controller-service-references>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -70,14 +76,22 @@
</mat-dialog-actions> </mat-dialog-actions>
} @else { } @else {
<mat-dialog-content> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="py-4 flex gap-x-3">
<div class="w-96 flex flex-col gap-y-4"> <div class="flex basis-2/3 flex-col gap-y-4 pr-4 overflow-hidden">
<div class="flex flex-col"> <div class="flex flex-col">
<div>Service</div> <div>Service</div>
<div class="value">{{ controllerService.component.name }}</div> <div
class="value overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="controllerService.component.name">
{{ controllerService.component.name }}
</div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div>Steps To Disable {{ controllerService.component.name }}</div> <div
class="overflow-ellipsis overflow-hidden whitespace-nowrap"
title="Steps To Enable {{ controllerService.component.name }}">
Steps To Enable {{ controllerService.component.name }}
</div>
<div class="flex flex-col gap-y-1.5"> <div class="flex flex-col gap-y-1.5">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="value">Enabling this controller service</div> <div class="value">Enabling this controller service</div>
@ -134,14 +148,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-96 flex flex-col"> <div class="flex basis-1/3 flex-col">
<div>Referencing Components</div> <div>Referencing Components</div>
<div> <div class="relative h-full border" style="min-height: 320px">
<controller-service-references <div class="absolute inset-0 overflow-y-auto p-1">
[serviceReferences]="controllerService.component.referencingComponents" <controller-service-references
[goToReferencingComponent]=" [serviceReferences]="controllerService.component.referencingComponents"
goToReferencingComponent [goToReferencingComponent]="
"></controller-service-references> goToReferencingComponent
"></controller-service-references>
</div>
</div> </div>
</div> </div>
</div> </div>

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.scss
View File

@ -23,11 +23,6 @@
.mdc-dialog__content { .mdc-dialog__content {
padding: 0 16px; padding: 0 16px;
font-size: 14px; font-size: 14px;
.tab-content {
height: 475px;
overflow-y: auto;
}
} }
.mat-mdc-form-field { .mat-mdc-form-field {

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.scss
View File

@ -21,8 +21,6 @@
@include mat.button-density(-1); @include mat.button-density(-1);
.listing-table { .listing-table {
width: 740px;
table { table {
.fa.fa-shield { .fa.fa-shield {
width: 10px; width: 10px;
@ -58,7 +56,6 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-size: 14px; font-size: 14px;
line-height: 17px; line-height: 17px;
width: 740px;
height: 50px; height: 50px;
} }

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/ok-dialog/ok-dialog.component.html
View File

@ -17,7 +17,7 @@
<h2 mat-dialog-title>{{ request.title }}</h2> <h2 mat-dialog-title>{{ request.title }}</h2>
<mat-dialog-content> <mat-dialog-content>
<div class="text-sm max-w-sm">{{ request.message }}</div> <div class="text-sm">{{ request.message }}</div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button mat-dialog-close cdkFocusInitial>Ok</button> <button mat-button mat-dialog-close cdkFocusInitial>Ok</button>

9
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.scss
View File

@ -14,12 +14,3 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
@use '@angular/material' as mat;
.property-table {
.listing-table {
@include mat.table-density(-4);
width: 740px;
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
View File

@ -14,7 +14,7 @@
~ See the License for the specific language governing permissions and ~ See the License for the specific language governing permissions and
~ limitations under the License. ~ limitations under the License.
--> -->
<div resizable (resized)="resized()" [minHeight]="630" [minWidth]="830" class="flex flex-col status-history-container"> <div resizable (resized)="resized()" [minHeight]="720" [minWidth]="887" class="flex flex-col status-history-container">
@if (statusHistoryState$ | async; as statusHistoryState) { @if (statusHistoryState$ | async; as statusHistoryState) {
<h2 mat-dialog-title>Status History</h2> <h2 mat-dialog-title>Status History</h2>
<div class="status-history flex flex-col grow"> <div class="status-history flex flex-col grow">

34
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.scss
View File

@ -25,46 +25,22 @@
.status-history { .status-history {
@include mat.button-density(-1); @include mat.button-density(-1);
overflow-y: auto;
.mdc-dialog__content { .mat-mdc-dialog-content {
padding: 0 16px; max-height: unset;
font-size: 14px;
.dialog-content {
min-height: 523px;
overflow-y: auto;
}
}
.mdc-dialog__actions {
// give a little room for the grab/resize handle away from the button.
padding: 10px;
} }
.mat-mdc-form-field { .mat-mdc-form-field {
width: 100%; width: 100%;
} }
mat-dialog-actions {
margin-top: auto;
}
.status-history-svg { .status-history-svg {
pointer-events: none; pointer-events: none;
} }
.component-details {
min-width: 285px;
}
.chart-panel { .chart-panel {
min-width: 495px; min-width: 495px;
} }
.mat-mdc-dialog-content {
max-height: unset;
}
} }
} }
@ -98,6 +74,12 @@
} }
} }
:host ::ng-deep #status-history-chart-container {
height: 372px;
cursor: default;
overflow: hidden;
}
:host ::ng-deep #status-history-chart-control-container { :host ::ng-deep #status-history-chart-control-container {
height: 125px; height: 125px;
margin-top: 5px; margin-top: 5px;

19
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.scss
View File

@ -19,17 +19,6 @@
.system-diagnostics { .system-diagnostics {
@include mat.button-density(-1); @include mat.button-density(-1);
overflow-y: auto;
.mdc-dialog__content {
padding: 0 16px;
font-size: 14px;
.dialog-content {
min-height: 500px;
overflow-y: auto;
}
}
.tab-content { .tab-content {
position: relative; position: relative;
@ -55,12 +44,4 @@
padding-bottom: 0.2em; padding-bottom: 0.2em;
} }
} }
.mat-mdc-form-field {
width: 100%;
}
mat-dialog-actions {
margin-top: auto;
}
} }

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/yes-no-dialog/yes-no-dialog.component.html
View File

@ -17,7 +17,7 @@
<h2 mat-dialog-title data-qa="yes-no-title">{{ request.title }}</h2> <h2 mat-dialog-title data-qa="yes-no-title">{{ request.title }}</h2>
<mat-dialog-content> <mat-dialog-content>
<div class="text-sm max-w-sm" data-qa="yes-no-message">{{ request.message }}</div> <div class="text-sm" data-qa="yes-no-message">{{ request.message }}</div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button mat-dialog-close (click)="noClicked()">No</button> <button mat-button mat-dialog-close (click)="noClicked()">No</button>

50
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
View File

@ -52,43 +52,6 @@
border-right: none; border-right: none;
} }
.small-dialog {
min-width: 320px;
}
.medium-dialog {
min-width: 470px;
}
.medium-short-dialog {
max-height: 32%;
max-width: 34%;
min-height: 250px;
min-width: 440px;
font-size: 13px;
}
.large-dialog {
max-height: 72%;
max-width: 55%;
min-height: 520px;
min-width: 760px;
}
.xl-dialog {
max-height: 72%;
max-width: 85%;
min-height: 560px;
min-width: 1024px;
}
.edit-parameter-context-dialog {
max-height: 72%;
max-width: 55%;
min-width: 850px;
min-height: 575px;
}
.tooltip { .tooltip {
position: fixed; position: fixed;
max-width: 500px; max-width: 500px;
@ -149,6 +112,19 @@
.refresh-timestamp { .refresh-timestamp {
font-weight: 500; font-weight: 500;
} }
.flex-2 {
display: flex;
flex: 2;
flex-basis: 100%;
}
.flex-1a {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
} }
@mixin colors($material-theme, $canvas-theme) { @mixin colors($material-theme, $canvas-theme) {