[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

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
};

View File

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

View File

@ -17,7 +17,7 @@
<h2 mat-dialog-title>Override Policy</h2>
<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>
<mat-radio-group formControlName="override">
<mat-radio-button color="primary" value="copy">Copy</mat-radio-button>

View File

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

View File

@ -34,6 +34,7 @@ import { YesNoDialog } from '../../../../ui/common/yes-no-dialog/yes-no-dialog.c
import { isDefinedAndNotNull } from '../../../../state/shared';
import * as ErrorActions from '../../../../state/error/error.actions';
import { selectAbout } from '../../../../state/about/about.selectors';
import { MEDIUM_DIALOG, SMALL_DIALOG } from '../../../../index';
@Injectable()
export class FlowConfigurationHistoryListingEffects {
@ -81,8 +82,8 @@ export class FlowConfigurationHistoryListingEffects {
map((action) => action.request),
tap((actionEntity) => {
this.dialog.open(ActionDetails, {
data: actionEntity,
panelClass: 'medium-dialog'
...MEDIUM_DIALOG,
data: actionEntity
});
})
),
@ -94,9 +95,7 @@ export class FlowConfigurationHistoryListingEffects {
this.actions$.pipe(
ofType(HistoryActions.openPurgeHistoryDialog),
tap(() => {
const dialogReference = this.dialog.open(PurgeHistory, {
panelClass: 'medium-short-dialog'
});
const dialogReference = this.dialog.open(PurgeHistory);
dialogReference.componentInstance.submitPurgeRequest
.pipe(
@ -106,11 +105,11 @@ export class FlowConfigurationHistoryListingEffects {
)
.subscribe(([result, about]) => {
const yesNoRef = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: {
title: 'Confirm History Purge',
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(() => {

View File

@ -21,7 +21,7 @@
<div class="purge-history-content 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>
<div class="w-full">
<mat-form-field>
<mat-label>Before Date</mat-label>
<input
@ -34,7 +34,7 @@
<mat-datepicker #endDatePicker></mat-datepicker>
</mat-form-field>
</div>
<div>
<div class="w-full">
<mat-form-field>
<mat-label>Before Time ({{ (about$ | async)?.timezone }})</mat-label>
<input

View File

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

View File

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

View File

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

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

View File

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

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 { loadConnection, loadProcessGroup } from '../flow/flow.actions';
import { resetQueueState } from './queue.actions';
import { SMALL_DIALOG } from '../../../../index';
@Injectable()
export class QueueEffects {
@ -49,12 +50,12 @@ export class QueueEffects {
map((action) => action.request),
tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: {
title: 'Empty Queue',
message:
'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(() => {
@ -79,8 +80,7 @@ export class QueueEffects {
title: 'Empty Queue',
message: 'Waiting for queue to empty...'
},
disableClose: true,
panelClass: 'small-dialog'
disableClose: true
});
dialogReference.componentInstance.cancel.pipe(take(1)).subscribe(() => {
@ -114,12 +114,12 @@ export class QueueEffects {
map((action) => action.request),
tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: {
title: 'Empty All Queues',
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.'
},
panelClass: 'small-dialog'
}
});
dialogReference.componentInstance.yes.pipe(take(1)).subscribe(() => {
@ -144,8 +144,7 @@ export class QueueEffects {
title: 'Empty All Queues',
message: 'Waiting for all queues to empty...'
},
disableClose: true,
panelClass: 'small-dialog'
disableClose: true
});
dialogReference.componentInstance.cancel.pipe(take(1)).subscribe(() => {
@ -315,11 +314,11 @@ export class QueueEffects {
}
const dialogReference = this.dialog.open(OkDialog, {
...SMALL_DIALOG,
data: {
title: 'Empty Queue',
message
},
panelClass: 'small-dialog'
}
});
dialogReference.afterClosed().subscribe(() => {

View File

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

View File

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

View File

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

View File

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

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

View File

@ -16,7 +16,7 @@
-->
<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) {
<div class="flex justify-end items-center">
<button mat-icon-button type="button" (click)="newParameterClicked()">
@ -124,7 +124,7 @@
</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>Parameter</div>
<div class="value">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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 { ErrorHelper } from '../../../../service/error-helper.service';
import { HttpErrorResponse } from '@angular/common/http';
import { LARGE_DIALOG, MEDIUM_DIALOG, SMALL_DIALOG } from '../../../../index';
@Injectable()
export class UserListingEffects {
@ -97,8 +98,8 @@ export class UserListingEffects {
existingUserGroups
};
const dialogReference = this.dialog.open(EditTenantDialog, {
data: editTenantRequest,
panelClass: 'medium-dialog'
...MEDIUM_DIALOG,
data: editTenantRequest
});
dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -329,8 +330,8 @@ export class UserListingEffects {
existingUserGroups
};
const dialogReference = this.dialog.open(EditTenantDialog, {
data: editTenantRequest,
panelClass: 'medium-dialog'
...MEDIUM_DIALOG,
data: editTenantRequest
});
dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -555,8 +556,8 @@ export class UserListingEffects {
existingUserGroups
};
const dialogReference = this.dialog.open(EditTenantDialog, {
data: editTenantRequest,
panelClass: 'medium-dialog'
...MEDIUM_DIALOG,
data: editTenantRequest
});
dialogReference.componentInstance.saving$ = this.store.select(selectSaving);
@ -654,8 +655,8 @@ export class UserListingEffects {
tap((request) => {
this.dialog
.open(UserAccessPolicies, {
data: request,
panelClass: 'large-dialog'
...LARGE_DIALOG,
data: request
})
.afterClosed()
.subscribe((response) => {
@ -679,11 +680,11 @@ export class UserListingEffects {
map((action) => action.request),
tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: {
title: 'Delete User Account',
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(() => {
@ -720,11 +721,11 @@ export class UserListingEffects {
map((action) => action.request),
tap((request) => {
const dialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
data: {
title: 'Delete User Account',
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(() => {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -17,7 +17,7 @@
<h2 mat-dialog-title>{{ request.title }}</h2>
<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-actions align="end">
<button mat-button mat-dialog-close cdkFocusInitial>Ok</button>

View File

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

View File

@ -14,7 +14,7 @@
~ See the License for the specific language governing permissions and
~ 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) {
<h2 mat-dialog-title>Status History</h2>
<div class="status-history flex flex-col grow">

View File

@ -25,46 +25,22 @@
.status-history {
@include mat.button-density(-1);
overflow-y: auto;
.mdc-dialog__content {
padding: 0 16px;
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-dialog-content {
max-height: unset;
}
.mat-mdc-form-field {
width: 100%;
}
mat-dialog-actions {
margin-top: auto;
}
.status-history-svg {
pointer-events: none;
}
.component-details {
min-width: 285px;
}
.chart-panel {
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 {
height: 125px;
margin-top: 5px;

View File

@ -19,17 +19,6 @@
.system-diagnostics {
@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 {
position: relative;
@ -55,12 +44,4 @@
padding-bottom: 0.2em;
}
}
.mat-mdc-form-field {
width: 100%;
}
mat-dialog-actions {
margin-top: auto;
}
}

View File

@ -17,7 +17,7 @@
<h2 mat-dialog-title data-qa="yes-no-title">{{ request.title }}</h2>
<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-actions align="end">
<button mat-button mat-dialog-close (click)="noClicked()">No</button>

View File

@ -52,43 +52,6 @@
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 {
position: fixed;
max-width: 500px;
@ -149,6 +112,19 @@
.refresh-timestamp {
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) {