This is an automated email from the ASF dual-hosted git repository.
rfellows pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 326df914bc NIFI-13175: Updating dialog layout and sizes to prevent a
double scroll bar on smaller screen sizes (#8779)
326df914bc is described below
commit 326df914bc1169267e88d3286ef27551d56d05aa
Author: Matt Gilman <[email protected]>
AuthorDate: Thu May 9 14:41:06 2024 -0400
NIFI-13175: Updating dialog layout and sizes to prevent a double scroll bar
on smaller screen sizes (#8779)
* NIFI-13175:
- Updating dialog layout and sizes to prevent a double scroll bar on
smaller screen sizes. Now the dialog content is set to 50vh and content scrolls
as needed.
* NIFI-13175:
- Removing some unneeded padding.
* NIFI-13175:
- Fixing double scroll bar issues in non tabbed dialogs.
* NIFI-13175:
- Fixing double scroll bar issues in more non tabbed dialogs.
* NIFI-13175:
- Renaming dialog content style in status history to avoid conflicting with
new general style.
This closes #8779
---
.../action-details/action-details.component.scss | 11 +-
.../create-connection.component.html | 22 +-
.../create-connection.component.scss | 10 -
.../edit-connection/edit-connection.component.html | 22 +-
.../edit-connection/edit-connection.component.scss | 10 -
.../change-version-dialog.html | 6 +-
.../local-changes-dialog/local-changes-dialog.html | 2 +-
.../local-changes-table/local-changes-table.html | 4 +-
.../label/edit-label/edit-label.component.html | 2 +-
.../edit-process-group.component.html | 22 +-
.../edit-process-group.component.scss | 10 -
.../edit-processor/edit-processor.component.html | 48 +--
.../edit-processor/edit-processor.component.scss | 10 -
.../create-remote-process-group.component.html | 2 +-
.../edit-remote-process-group.component.html | 6 +-
.../edit-parameter-context.component.html | 32 +-
.../edit-parameter-context.component.scss | 15 -
.../parameter-table/parameter-table.component.html | 6 +-
.../flowfile-dialog/flowfile-dialog.component.html | 70 ++--
.../flowfile-dialog/flowfile-dialog.component.scss | 17 +-
.../edit-flow-analysis-rule.component.html | 32 +-
.../edit-flow-analysis-rule.component.scss | 10 -
.../edit-parameter-provider.component.html | 35 +-
.../edit-parameter-provider.component.scss | 10 -
...ch-parameter-provider-parameters.component.html | 2 +-
...ch-parameter-provider-parameters.component.scss | 10 -
.../edit-registry-client.component.html | 24 +-
.../edit-registry-client.component.scss | 10 -
.../edit-reporting-task.component.html | 32 +-
.../edit-reporting-task.component.scss | 10 -
.../cluster-summary-dialog.component.html | 6 +-
.../cluster-summary-dialog.component.scss | 17 +-
.../connection-cluster-table.component.html | 4 +-
.../port-cluster-table.component.html | 4 +-
.../process-group-cluster-table.component.html | 4 +-
.../processor-cluster-table.component.html | 4 +-
...mote-process-group-cluster-table.component.html | 4 +-
.../user-access-policies.component.html | 6 +-
.../component-state/component-state.component.html | 80 +++--
.../disable-controller-service.component.scss | 5 -
.../edit-controller-service.component.html | 32 +-
.../edit-controller-service.component.scss | 10 -
.../enable-controller-service.component.scss | 5 -
.../extension-creation.component.html | 144 ++++----
.../property-table/property-table.component.html | 6 +-
.../provenance-event-dialog.component.html | 81 +++--
.../provenance-event-dialog.component.scss | 15 +-
.../status-history-chart.component.ts | 4 +-
.../status-history/status-history.component.html | 2 +-
.../system-diagnostics-dialog.component.html | 398 +++++++++++----------
.../system-diagnostics-dialog.component.scss | 9 +-
.../src/main/nifi/src/assets/styles/_app.scss | 9 +
52 files changed, 618 insertions(+), 733 deletions(-)
diff --git
a/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
b/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
index e54ff14552..41941962bd 100644
---
a/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
+++
b/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
@@ -17,14 +17,9 @@
.action-details {
.action-details-content {
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .panel-content {
- position: relative;
- overflow-y: auto;
- }
+ .panel-content {
+ position: relative;
+ overflow-y: auto;
}
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
index c00bc2622c..9238987b28 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
@@ -19,10 +19,10 @@
@if (breadcrumbs$ | async; as breadcrumbs) {
<form class="create-connection-form" [formGroup]="createConnectionForm">
<error-banner></error-banner>
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Details">
- <div class="tab-content py-4 flex gap-x-4">
+ <mat-tab-group>
+ <mat-tab label="Details">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
@switch (source.componentType) {
@case (ComponentType.Processor) {
@@ -82,9 +82,11 @@
}
</div>
</div>
- </mat-tab>
- <mat-tab label="Settings">
- <div class="tab-content py-4 flex gap-x-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Settings">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
<div>
<mat-form-field>
@@ -171,9 +173,9 @@
formControlName="prioritizers"></prioritizers>
</div>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.scss
index 6c71baa631..b7499a313a 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.scss
@@ -20,16 +20,6 @@
.create-connection-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- height: 475px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
index 18d1c4edc1..054d74a114 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
@@ -20,11 +20,11 @@
</h2>
<form class="edit-connection-form" [formGroup]="editConnectionForm">
<error-banner></error-banner>
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Details">
+ <mat-tab-group>
+ <mat-tab label="Details">
+ <mat-dialog-content>
@if (breadcrumbs$ | async; as breadcrumbs) {
- <div class="tab-content py-4 flex gap-x-4">
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
@switch (sourceType) {
@case (ComponentType.Processor) {
@@ -89,9 +89,11 @@
</div>
</div>
}
- </mat-tab>
- <mat-tab label="Settings">
- <div class="tab-content py-4 flex gap-x-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Settings">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
<div>
<mat-form-field>
@@ -242,9 +244,9 @@
formControlName="prioritizers"></prioritizers>
</div>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (connectionReadonly || sourceReadonly || destinationReadonly) {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.scss
index 98e5f37049..f6accfb00a 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.scss
@@ -20,16 +20,6 @@
.edit-connection-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- height: 475px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
index 0521d20183..2c91bbb379 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
@@ -18,7 +18,7 @@
<h2 mat-dialog-title>Change Version</h2>
<div class="change-version">
<mat-dialog-content>
- <div class="flex flex-col gap-y-4 w-full">
+ <div class="dialog-content flex flex-col gap-y-4 w-full">
<div class="flex flex-row w-full">
<div class="flex flex-1 flex-col gap-y-4">
<div>
@@ -48,8 +48,8 @@
</div>
</div>
- <div class="listing-table">
- <div class="h-48 overflow-y-auto overflow-x-hidden">
+ <div class="listing-table flex-1 relative">
+ <div class="absolute inset-0 overflow-y-auto
overflow-x-hidden">
<table
mat-table
[dataSource]="dataSource"
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-dialog.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-dialog.html
index 8ea1775d0e..c3d59e1052 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-dialog.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-dialog.html
@@ -23,7 +23,7 @@
</h2>
<div class="local-changes">
<mat-dialog-content>
- <div class="flex flex-col h-full gap-y-2">
+ <div class="dialog-content flex flex-col h-full gap-y-2">
<div>
The following changes have been made to
{{
versionControlInformation.versionControlInformation?.flowName }} (Version
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
index dce014e7ae..23b6d035b4 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
@@ -29,8 +29,8 @@
</div>
</form>
</div>
- <div class="listing-table">
- <div class="h-96 overflow-y-auto overflow-x-hidden">
+ <div class="listing-table flex-1 relative">
+ <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
<table
mat-table
[dataSource]="dataSource"
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.html
index 8e66d176cc..e4beeb852b 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.html
@@ -22,7 +22,7 @@
<div>
<mat-form-field>
<mat-label>Label Value</mat-label>
- <textarea matInput formControlName="value" type="text"
rows="5" [readonly]="readonly"></textarea>
+ <textarea matInput formControlName="value" type="text"
rows="10" [readonly]="readonly"></textarea>
</mat-form-field>
</div>
<div>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html
index 281baba1c3..d27fb927cb 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html
@@ -18,10 +18,10 @@
<h2 mat-dialog-title>{{ readonly ? 'Process Group Details' : 'Edit Process
Group' }}</h2>
<form class="process-group-edit-form" [formGroup]="editProcessGroupForm">
<error-banner></error-banner>
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Settings">
- <div class="tab-content py-4 flex gap-x-4">
+ <mat-tab-group>
+ <mat-tab label="Settings">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
<div>
<mat-form-field>
@@ -188,9 +188,11 @@
</div>
</div>
</div>
- </mat-tab>
- <mat-tab label="Comments">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Comments">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<mat-form-field>
<mat-label>Comments</mat-label>
<textarea
@@ -201,9 +203,9 @@
[readonly]="readonly"></textarea>
</mat-form-field>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.scss
index 50f47c8d69..6751fade34 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.scss
@@ -20,16 +20,6 @@
.process-group-edit-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- height: 475px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
index ee4a697ce3..4d8474f35d 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
@@ -28,10 +28,10 @@
<form class="processor-edit-form" [formGroup]="editProcessorForm">
<error-banner></error-banner>
<!-- TODO - Stop & Configure -->
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Settings">
- <div class="tab-content py-4 flex gap-x-4">
+ <mat-tab-group>
+ <mat-tab label="Settings">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
<div>
<mat-form-field>
@@ -109,9 +109,11 @@
</div>
<div class="w-full"></div>
</div>
- </mat-tab>
- <mat-tab label="Scheduling">
- <div class="tab-content py-4 flex gap-x-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Scheduling">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
<div>
<mat-form-field>
@@ -230,9 +232,11 @@
}
</div>
</div>
- </mat-tab>
- <mat-tab label="Properties">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Properties">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<property-table
formControlName="properties"
[createNewProperty]="createNewProperty"
@@ -246,31 +250,35 @@
request.entity.component.supportsSensitiveDynamicProperties
"></property-table>
</div>
- </mat-tab>
- <mat-tab label="Relationships">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Relationships">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
@if (request.entity.component.relationships.length > 0) {
<relationship-settings
formControlName="relationshipConfiguration"></relationship-settings>
} @else {
<div class="unset surface-color">This processor has no
relationships.</div>
}
</div>
- </mat-tab>
- <mat-tab label="Comments">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Comments">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<mat-form-field>
<mat-label>Comments</mat-label>
<textarea
matInput
formControlName="comments"
type="text"
- rows="5"
+ rows="10"
[readonly]="readonly"></textarea>
</mat-form-field>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss
index 70e3437928..4f3a5f0a1a 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.processor-edit-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- height: 475px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
index ac278c1352..4c24e5e742 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
@@ -19,7 +19,7 @@
<form class="create-remote-process-group-form"
[formGroup]="createRemoteProcessGroupForm">
<error-banner></error-banner>
<mat-dialog-content>
- <div class="tab-content py-4 flex gap-x-4">
+ <div class="flex gap-x-4">
<div class="w-full">
<mat-form-field>
<mat-label>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
index 5cb1be5260..601cc252eb 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
@@ -19,15 +19,15 @@
<form class="edit-remote-process-group-form"
[formGroup]="editRemoteProcessGroupForm">
<error-banner></error-banner>
<mat-dialog-content>
- <div class="flex flex-col mb-6">
+ <div class="flex flex-col mb-4">
<div>Name</div>
<div class="accent-color font-medium">{{
request.entity.component.name }}</div>
</div>
- <div class="flex flex-col mb-6">
+ <div class="flex flex-col mb-4">
<div>Id</div>
<div class="accent-color font-medium">{{
request.entity.component.id }}</div>
</div>
- <div class="tab-content py-4 flex gap-x-4">
+ <div class="flex gap-x-4">
<div class="w-full">
<mat-form-field>
<mat-label>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
index 90baf83c0d..1a03bc7611 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
@@ -22,7 +22,7 @@
<error-banner></error-banner>
@if ((updateRequest | async)!; as requestEntity) {
<mat-dialog-content>
- <div class="results-content flex gap-x-8">
+ <div class="dialog-tab-content flex gap-x-8">
<div class="w-full flex flex-col">
<div>Steps To Update Parameters</div>
<div class="flex flex-col gap-y-1.5">
@@ -82,10 +82,10 @@
</div>
</mat-dialog-content>
} @else {
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Settings">
- <div class="tab-content py-4 flex gap-x-4">
+ <mat-tab-group>
+ <mat-tab label="Settings">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
@if (!isNew) {
<div class="flex flex-col mb-5">
@@ -144,27 +144,31 @@
</div>
</div>
</div>
- </mat-tab>
- <mat-tab label="Parameters">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Parameters">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<parameter-table
formControlName="parameters"
[canAddParameters]="!request.parameterContext?.component?.parameterProviderConfiguration"
[createNewParameter]="createNewParameter"
[editParameter]="editParameter"></parameter-table>
</div>
- </mat-tab>
- <mat-tab label="Inheritance">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Inheritance">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<parameter-context-inheritance
formControlName="inheritedParameterContexts"
[allParameterContexts]="
(availableParameterContexts$ | async)!
"></parameter-context-inheritance>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
}
@if ((updateRequest | async)!; as requestEntity) {
<mat-dialog-actions align="end">
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.scss
index 6dc9958f59..364838b29f 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.scss
@@ -20,21 +20,6 @@
.parameter-context-edit-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- height: 475px;
- overflow-y: auto;
- }
-
- .results-content {
- height: 523px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/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
b/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
index 4112077942..7b3536c41d 100644
---
a/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
+++
b/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
@@ -15,7 +15,7 @@
~ limitations under the License.
-->
-<div class="parameter-table flex gap-x-3">
+<div class="parameter-table flex h-full gap-x-3">
<div class="flex basis-2/3 flex-col gap-y-3">
@if (canAddParameters && !isDisabled) {
<div class="flex justify-end items-center">
@@ -24,8 +24,8 @@
</button>
</div>
}
- <div class="listing-table">
- <div class="h-96 overflow-y-auto overflow-x-hidden">
+ <div class="listing-table flex-1 relative">
+ <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
<table
mat-table
[dataSource]="dataSource"
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
index b008724c54..7eed546758 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
@@ -17,11 +17,11 @@
<h2 mat-dialog-title>FlowFile</h2>
<div class="flowfile">
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Details">
- <div class="tab-content py-4">
- <div class="absolute inset-0 flex gap-x-4">
+ <mat-tab-group>
+ <mat-tab label="Details">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
+ <div class="flex gap-x-4">
<div class="w-full flex flex-col gap-y-3">
<div class="flex flex-col">
<div class="flowfile-header font-bold
primary-color">FlowFile Details</div>
@@ -176,10 +176,12 @@
</div>
</div>
</div>
- </mat-tab>
- <mat-tab label="Attributes">
- <div class="tab-content py-4">
- <div class="absolute inset-0 flex flex-col gap-y-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Attributes">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
+ <div class="flex flex-col gap-y-4">
<div class="flex">
<div class="flowfile-header font-bold
primary-color">Attribute Values</div>
</div>
@@ -197,40 +199,40 @@
</div>
</div>
</div>
- </mat-tab>
- </mat-tab-group>
- <ng-template #formatValue let-value let-title="title">
- <ng-container *ngIf="value != null; else nullValue">
- <ng-container *ngIf="value === ''; else nonEmptyValue">
- <div class="unset surface-color">Empty string set</div>
- </ng-container>
- <ng-template #nonEmptyValue>
- <div class="accent-color font-medium" *ngIf="title ==
null; else valueWithTitle">
- {{ value }}
- </div>
- <ng-template #valueWithTitle>
- <div class="accent-color font-medium"
[title]="title">{{ value }}</div>
- </ng-template>
- </ng-template>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
+ <ng-template #formatValue let-value let-title="title">
+ <ng-container *ngIf="value != null; else nullValue">
+ <ng-container *ngIf="value === ''; else nonEmptyValue">
+ <div class="unset surface-color">Empty string set</div>
</ng-container>
- <ng-template #nullValue>
- <div class="unset surface-color">No value set</div>
- </ng-template>
- </ng-template>
- <ng-template #formatContentValue let-value let-title="title">
- <ng-container *ngIf="value != null; else nullValue">
+ <ng-template #nonEmptyValue>
<div class="accent-color font-medium" *ngIf="title == null;
else valueWithTitle">
{{ value }}
</div>
<ng-template #valueWithTitle>
<div class="accent-color font-medium" [title]="title">{{
value }}</div>
</ng-template>
- </ng-container>
- <ng-template #nullValue>
- <div class="unset surface-color">No value previously set</div>
</ng-template>
+ </ng-container>
+ <ng-template #nullValue>
+ <div class="unset surface-color">No value set</div>
+ </ng-template>
+ </ng-template>
+ <ng-template #formatContentValue let-value let-title="title">
+ <ng-container *ngIf="value != null; else nullValue">
+ <div class="accent-color font-medium" *ngIf="title == null; else
valueWithTitle">
+ {{ value }}
+ </div>
+ <ng-template #valueWithTitle>
+ <div class="accent-color font-medium" [title]="title">{{ value
}}</div>
+ </ng-template>
+ </ng-container>
+ <ng-template #nullValue>
+ <div class="unset surface-color">No value previously set</div>
</ng-template>
- </mat-dialog-content>
+ </ng-template>
<mat-dialog-actions align="end">
<button color="primary" mat-button mat-dialog-close>Ok</button>
</mat-dialog-actions>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.scss
index 88fba83108..930165c811 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.scss
@@ -20,19 +20,8 @@
.flowfile {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- position: relative;
- height: 475px;
- overflow-y: auto;
-
- .flowfile-header {
- font-size: 15px;
- font-style: normal;
- }
- }
+ .flowfile-header {
+ font-size: 15px;
+ font-style: normal;
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
index 51d4fe87eb..6a5e2306a2 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
@@ -27,10 +27,10 @@
</h2>
<form class="flow-analysis-rule-edit-form"
[formGroup]="editFlowAnalysisRuleForm">
<error-banner></error-banner>
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Settings">
- <div class="tab-content py-4 flex gap-x-4">
+ <mat-tab-group>
+ <mat-tab label="Settings">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
<mat-form-field>
<mat-label>Name</mat-label>
@@ -83,9 +83,11 @@
</div>
</div>
</div>
- </mat-tab>
- <mat-tab label="Properties">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Properties">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<property-table
formControlName="properties"
[createNewProperty]="createNewProperty"
@@ -94,22 +96,24 @@
[goToService]="goToService">
</property-table>
</div>
- </mat-tab>
- <mat-tab label="Comments">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Comments">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<mat-form-field>
<mat-label>Comments</mat-label>
<textarea
matInput
formControlName="comments"
type="text"
- rows="5"
+ rows="10"
[readonly]="readonly"></textarea>
</mat-form-field>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.scss
index 0e3d28a171..4481542ff4 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.flow-analysis-rule-edit-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- height: 475px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/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
b/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
index 4679bf1df5..a9876a97ec 100644
---
a/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
+++
b/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
@@ -25,10 +25,10 @@
</h2>
<form class="parameter-provider-edit-form"
[formGroup]="editParameterProviderForm">
<error-banner></error-banner>
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Settings">
- <div class="tab-content py-4 flex gap-x-4">
+ <mat-tab-group>
+ <mat-tab label="Settings">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
<div>
<mat-form-field>
@@ -77,10 +77,11 @@
</div>
</div>
</div>
- </mat-tab>
-
- <mat-tab label="Properties">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Properties">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<property-table
formControlName="properties"
[createNewProperty]="createNewProperty"
@@ -88,24 +89,24 @@
[propertyHistory]="request.history"
[goToService]="goToService"></property-table>
</div>
- </mat-tab>
-
- <mat-tab label="Comments">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Comments">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<mat-form-field>
<mat-label>Comments</mat-label>
<textarea
matInput
formControlName="comments"
type="text"
- rows="5"
+ rows="10"
[readonly]="readonly"></textarea>
</mat-form-field>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
-
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
diff --git
a/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.scss
b/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.scss
index af4509a55b..35c414399f 100644
---
a/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.scss
+++
b/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.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.parameter-provider-edit-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- height: 475px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
index 989a9c67ff..af38f93230 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
@@ -21,7 +21,7 @@
<error-banner></error-banner>
<mat-dialog-content *ngIf="(updateRequest | async)! as requestEntity;
else fetchFormContent">
- <div class="dialog-content flex gap-x-4 h-full w-full pt-2">
+ <div class="dialog-content flex gap-x-4 w-full pt-2">
<div class="flex flex-col flex-1">
<div class="flex flex-col mb-4">
<div>Name</div>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.scss
index bfa0c5ca06..3a65b19df7 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.scss
@@ -20,16 +20,6 @@
.parameter-provider-fetch-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .dialog-content {
- height: 475px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
index 3a8f856d8a..0ac905fdb4 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
@@ -25,10 +25,10 @@
</h2>
<form class="edit-registry-client-form" [formGroup]="editRegistryClientForm">
<error-banner></error-banner>
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Settings">
- <div class="tab-content py-4 flex flex-col">
+ <mat-tab-group>
+ <mat-tab label="Settings">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex flex-col">
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="accent-color font-medium">
@@ -50,13 +50,15 @@
<div>
<mat-form-field>
<mat-label>Description</mat-label>
- <textarea matInput formControlName="description"
type="text"></textarea>
+ <textarea matInput formControlName="description"
type="text" rows="5"></textarea>
</mat-form-field>
</div>
</div>
- </mat-tab>
- <mat-tab label="Properties">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Properties">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<property-table
formControlName="properties"
[createNewProperty]="createNewProperty"
@@ -66,9 +68,9 @@
request.registryClient.component.supportsSensitiveDynamicProperties
"></property-table>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.scss
index 5874955c32..432a88c785 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.edit-registry-client-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- height: 475px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
index 4fee4dc04e..7bbe0f07b4 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
@@ -27,10 +27,10 @@
</h2>
<form class="reporting-task-edit-form" [formGroup]="editReportingTaskForm">
<error-banner></error-banner>
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Settings">
- <div class="tab-content py-4 flex gap-x-4">
+ <mat-tab-group>
+ <mat-tab label="Settings">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
<div class="flex">
<mat-form-field>
@@ -108,9 +108,11 @@
</div>
</div>
</div>
- </mat-tab>
- <mat-tab label="Properties">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Properties">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<property-table
formControlName="properties"
[createNewProperty]="createNewProperty"
@@ -122,22 +124,24 @@
">
</property-table>
</div>
- </mat-tab>
- <mat-tab label="Comments">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Comments">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<mat-form-field>
<mat-label>Comments</mat-label>
<textarea
matInput
formControlName="comments"
type="text"
- rows="5"
+ rows="10"
[readonly]="readonly"></textarea>
</mat-form-field>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.scss
index cd1e577596..17a342760b 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.reporting-task-edit-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- height: 475px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
index 38b6593e5e..2fa80f40a5 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
@@ -18,13 +18,13 @@
<div class="cluster-summary flex flex-col">
<h2 mat-dialog-title>Cluster {{ componentType }} Summary</h2>
- <mat-dialog-content class="cluster-summary-content flex flex-1 h-full
grow">
- <div class="dialog-content flex flex-1 flex-col grow">
+ <mat-dialog-content>
+ <div class="cluster-summary-dialog-content flex flex-col">
<component-context
[type]="componentType"
[name]="componentHelper.getName()"
[id]="componentId"></component-context>
- <div class="flex flex-1 flex-col cluster-summary-table-container">
+ <div class="flex-1">
@switch (componentType) {
@case (ComponentType.Processor) {
<processor-cluster-table
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.scss
index 26ea817d08..05bf12cadf 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.scss
@@ -19,21 +19,8 @@
.cluster-summary {
@include mat.button-density(-1);
- overflow-y: auto;
- .cluster-summary-content {
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .dialog-content {
- min-height: 523px;
- overflow-y: auto;
- }
- }
-
- .cluster-summary-table-container {
- min-height: 440px;
- }
+ .cluster-summary-dialog-content {
+ height: 40vh;
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html
index 427f878f0b..5a6b5c0b0b 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html
@@ -15,8 +15,8 @@
~ limitations under the License.
-->
-<div class="connection-cluster-table flex flex-1 h-full">
- <div class="listing-table overflow-y-auto flex-1">
+<div class="connection-cluster-table relative h-full">
+ <div class="listing-table absolute inset-0 overflow-y-auto">
<table
mat-table
[dataSource]="dataSource"
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
index 6eb3666b66..9c92ea465b 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
@@ -15,8 +15,8 @@
~ limitations under the License.
-->
-<div class="port-cluster-table flex flex-1 h-full">
- <div class="listing-table overflow-y-auto flex-1">
+<div class="port-cluster-table relative h-full">
+ <div class="listing-table absolute inset-0 overflow-y-auto">
<table
mat-table
[dataSource]="dataSource"
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
index 5e0143dc59..d4231b4031 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
@@ -15,8 +15,8 @@
~ limitations under the License.
-->
-<div class="process-group-cluster-table flex flex-1 h-full">
- <div class="listing-table overflow-y-auto flex-1">
+<div class="process-group-cluster-table relative h-full">
+ <div class="listing-table absolute inset-0 overflow-y-auto">
<table
mat-table
[dataSource]="dataSource"
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
index 2f131fc020..022aa41d4c 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
@@ -15,8 +15,8 @@
~ limitations under the License.
-->
-<div class="processor-cluster-table flex flex-1 h-full">
- <div class="listing-table overflow-y-auto flex-1">
+<div class="processor-cluster-table relative h-full">
+ <div class="listing-table absolute inset-0 overflow-y-auto">
<table
mat-table
[dataSource]="dataSource"
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
index 66ece8a3ed..1f113049bb 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
@@ -15,8 +15,8 @@
~ limitations under the License.
-->
-<div class="remote-process-group-cluster-table flex flex-1 h-full">
- <div class="listing-table overflow-y-auto flex-1">
+<div class="remote-process-group-cluster-table relative h-full">
+ <div class="listing-table absolute inset-0 overflow-y-auto">
<table
mat-table
[dataSource]="dataSource"
diff --git
a/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.html
b/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.html
index 207370f71b..155eeb4648 100644
---
a/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.html
+++
b/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.html
@@ -18,13 +18,13 @@
<div class="user-access-policies">
<h2 mat-dialog-title>User Policies</h2>
<mat-dialog-content>
- <div class="flex flex-col justify-between gap-y-3">
+ <div class="dialog-content flex flex-col justify-between gap-y-3">
<div class="flex flex-col">
<div>User</div>
<div class="accent-color font-medium">{{ request.identity
}}</div>
</div>
- <div class="listing-table">
- <div class="h-96 overflow-y-auto overflow-x-hidden">
+ <div class="listing-table flex-1 relative">
+ <div class="absolute inset-0 overflow-y-auto
overflow-x-hidden">
<table
mat-table
[dataSource]="dataSource"
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
index e4cdf239ab..5e047d9ce5 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
@@ -19,7 +19,7 @@
<h2 mat-dialog-title>Component State</h2>
<error-banner></error-banner>
<mat-dialog-content>
- <div class="flex flex-col justify-between gap-y-5">
+ <div class="dialog-content flex flex-col justify-between gap-y-5">
@if (componentName$ | async; as componentName) {
<div class="flex flex-col">
<div>Name</div>
@@ -32,7 +32,7 @@
{{ stateDescription }}
</div>
</div>
- <div>
+ <div class="flex flex-1 flex-col">
<form [formGroup]="filterForm" class="flex flex-col gap-y-2">
<div class="accent-color font-medium">Displaying {{
filteredEntries }} of {{ totalEntries }}</div>
<div class="flex justify-between items-center">
@@ -49,47 +49,49 @@
}
</div>
</form>
- <div class="listing-table h-72 overflow-y-auto
overflow-x-hidden">
- <table
- mat-table
- [dataSource]="dataSource"
- matSort
- matSortDisableClear
- (matSortChange)="sortData($event)"
- [matSortActive]="initialSortColumn"
- [matSortDirection]="initialSortDirection">
- <!-- Key Column -->
- <ng-container matColumnDef="key">
- <th mat-header-cell *matHeaderCellDef
mat-sort-header>Key</th>
- <td mat-cell *matCellDef="let item">
- {{ item.key }}
- </td>
- </ng-container>
-
- <!-- Value Column -->
- <ng-container matColumnDef="value">
- <th mat-header-cell *matHeaderCellDef
mat-sort-header>Value</th>
- <td mat-cell *matCellDef="let item"
[title]="item.value">
- {{ item.value }}
- </td>
- </ng-container>
+ <div class="listing-table flex-1 relative">
+ <div class="absolute inset-0 overflow-y-auto
overflow-x-hidden">
+ <table
+ mat-table
+ [dataSource]="dataSource"
+ matSort
+ matSortDisableClear
+ (matSortChange)="sortData($event)"
+ [matSortActive]="initialSortColumn"
+ [matSortDirection]="initialSortDirection">
+ <!-- Key Column -->
+ <ng-container matColumnDef="key">
+ <th mat-header-cell *matHeaderCellDef
mat-sort-header>Key</th>
+ <td mat-cell *matCellDef="let item">
+ {{ item.key }}
+ </td>
+ </ng-container>
- <!-- Scope Column -->
- @if (displayedColumns.includes('scope')) {
- <ng-container matColumnDef="scope">
- <th mat-header-cell *matHeaderCellDef
mat-sort-header>Scope</th>
- <td mat-cell *matCellDef="let item"
[title]="item.scope">
- {{ item.scope }}
+ <!-- Value Column -->
+ <ng-container matColumnDef="value">
+ <th mat-header-cell *matHeaderCellDef
mat-sort-header>Value</th>
+ <td mat-cell *matCellDef="let item"
[title]="item.value">
+ {{ item.value }}
</td>
</ng-container>
- }
- <tr mat-header-row *matHeaderRowDef="displayedColumns;
sticky: true"></tr>
- <tr
- mat-row
- *matRowDef="let row; let even = even; columns:
displayedColumns"
- [class.even]="even"></tr>
- </table>
+ <!-- Scope Column -->
+ @if (displayedColumns.includes('scope')) {
+ <ng-container matColumnDef="scope">
+ <th mat-header-cell *matHeaderCellDef
mat-sort-header>Scope</th>
+ <td mat-cell *matCellDef="let item"
[title]="item.scope">
+ {{ item.scope }}
+ </td>
+ </ng-container>
+ }
+
+ <tr mat-header-row
*matHeaderRowDef="displayedColumns; sticky: true"></tr>
+ <tr
+ mat-row
+ *matRowDef="let row; let even = even; columns:
displayedColumns"
+ [class.even]="even"></tr>
+ </table>
+ </div>
</div>
</div>
@if (partialResults) {
diff --git
a/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
b/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
index 01e2fa4418..01f6c434c0 100644
---
a/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
+++
b/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
@@ -19,9 +19,4 @@
.controller-service-disable-form {
@include mat.button-density(-1);
-
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
- }
}
diff --git
a/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
b/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
index 147d1f1d5e..3b37d939d1 100644
---
a/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
+++
b/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
@@ -27,10 +27,10 @@
</h2>
<form class="controller-service-edit-form"
[formGroup]="editControllerServiceForm">
<error-banner></error-banner>
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Settings">
- <div class="tab-content py-4 flex gap-x-4">
+ <mat-tab-group>
+ <mat-tab label="Settings">
+ <mat-dialog-content>
+ <div class="dialog-tab-content flex gap-x-4">
<div class="w-full">
<div>
<mat-form-field>
@@ -113,9 +113,11 @@
</div>
</div>
</div>
- </mat-tab>
- <mat-tab label="Properties">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Properties">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<property-table
formControlName="properties"
[createNewProperty]="createNewProperty"
@@ -129,22 +131,24 @@
request.controllerService.component.supportsSensitiveDynamicProperties
"></property-table>
</div>
- </mat-tab>
- <mat-tab label="Comments">
- <div class="tab-content py-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Comments">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
<mat-form-field>
<mat-label>Comments</mat-label>
<textarea
matInput
formControlName="comments"
type="text"
- rows="5"
+ rows="10"
[readonly]="readonly"></textarea>
</mat-form-field>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
diff --git
a/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.scss
b/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.scss
index 2ede7b4eff..916d4aa29d 100644
---
a/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.scss
+++
b/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.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.controller-service-edit-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- height: 475px;
- overflow-y: auto;
- }
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/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
b/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
index cb133b8b2b..85a73c166b 100644
---
a/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
+++
b/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
@@ -20,11 +20,6 @@
.controller-service-enable-form {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
- }
-
.mat-mdc-form-field {
width: 100%;
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
index 99b3a2cc17..beafa7566a 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
@@ -31,22 +31,33 @@
</div>
</div>
<mat-dialog-content>
- <div class="listing-table select-none">
- <div class="h-96 overflow-y-auto overflow-x-hidden">
- <table
- mat-table
- [dataSource]="dataSource"
- matSort
- matSortDisableClear
- (matSortChange)="sortData($event)"
- [matSortActive]="initialSortColumn"
- [matSortDirection]="initialSortDirection">
- <!-- Type Column -->
- <ng-container matColumnDef="type">
- <th mat-header-cell *matHeaderCellDef
mat-sort-header>Type</th>
- <td mat-cell *matCellDef="let item">
- @if (isSelected(item)) {
- <div #selectedRow>
+ <div class="flex flex-col dialog-content">
+ <div class="listing-table select-none flex-1 relative">
+ <div class="absolute inset-0 overflow-y-auto
overflow-x-hidden">
+ <table
+ mat-table
+ [dataSource]="dataSource"
+ matSort
+ matSortDisableClear
+ (matSortChange)="sortData($event)"
+ [matSortActive]="initialSortColumn"
+ [matSortDirection]="initialSortDirection">
+ <!-- Type Column -->
+ <ng-container matColumnDef="type">
+ <th mat-header-cell *matHeaderCellDef
mat-sort-header>Type</th>
+ <td mat-cell *matCellDef="let item">
+ @if (isSelected(item)) {
+ <div #selectedRow>
+ <div
+ class="fa"
+ [class.fa-shield]="item.restricted"
+
[class.warn-color]="item.restricted"
+ nifiTooltip
+
[tooltipComponentType]="RestrictionsTip"
+
[tooltipInputData]="getRestrictionTipData(item)"></div>
+ {{ formatType(item) }}
+ </div>
+ } @else {
<div
class="fa"
[class.fa-shield]="item.restricted"
@@ -55,66 +66,57 @@
[tooltipComponentType]="RestrictionsTip"
[tooltipInputData]="getRestrictionTipData(item)"></div>
{{ formatType(item) }}
- </div>
- } @else {
- <div
- class="fa"
- [class.fa-shield]="item.restricted"
- [class.warn-color]="item.restricted"
- nifiTooltip
- [tooltipComponentType]="RestrictionsTip"
-
[tooltipInputData]="getRestrictionTipData(item)"></div>
- {{ formatType(item) }}
- }
- </td>
- </ng-container>
+ }
+ </td>
+ </ng-container>
- <!-- Version Column -->
- <ng-container matColumnDef="version">
- <th mat-header-cell *matHeaderCellDef
mat-sort-header>Version</th>
- <td mat-cell *matCellDef="let item">
- {{ formatVersion(item) }}
- @if (implementsControllerService(item)) {
- <div
- class="fa fa-list primary-color"
- nifiTooltip
-
[tooltipComponentType]="ControllerServiceApiTip"
-
[tooltipInputData]="getControllerServiceApiTipData(item)"></div>
- }
- </td>
- </ng-container>
+ <!-- Version Column -->
+ <ng-container matColumnDef="version">
+ <th mat-header-cell *matHeaderCellDef
mat-sort-header>Version</th>
+ <td mat-cell *matCellDef="let item">
+ {{ formatVersion(item) }}
+ @if (implementsControllerService(item)) {
+ <div
+ class="fa fa-list primary-color"
+ nifiTooltip
+
[tooltipComponentType]="ControllerServiceApiTip"
+
[tooltipInputData]="getControllerServiceApiTipData(item)"></div>
+ }
+ </td>
+ </ng-container>
- <!-- Tags Column -->
- <ng-container matColumnDef="tags">
- <th mat-header-cell *matHeaderCellDef
mat-sort-header>Tags</th>
- <td mat-cell *matCellDef="let item">{{
formatTags(item) }}</td>
- </ng-container>
+ <!-- Tags Column -->
+ <ng-container matColumnDef="tags">
+ <th mat-header-cell *matHeaderCellDef
mat-sort-header>Tags</th>
+ <td mat-cell *matCellDef="let item">{{
formatTags(item) }}</td>
+ </ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns;
sticky: true"></tr>
- <tr
- mat-row
- *matRowDef="let row; let even = even; columns:
displayedColumns"
- (click)="selectType(row)"
- (dblclick)="createExtension(row)"
- [class.selected]="isSelected(row)"
- [class.even]="even"></tr>
- </table>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns;
sticky: true"></tr>
+ <tr
+ mat-row
+ *matRowDef="let row; let even = even; columns:
displayedColumns"
+ (click)="selectType(row)"
+ (dblclick)="createExtension(row)"
+ [class.selected]="isSelected(row)"
+ [class.even]="even"></tr>
+ </table>
+ </div>
</div>
- </div>
- <div class="flex flex-col pt-3">
- @if (selectedType) {
- <div class="flex items-center">
- <div class="selected-type-name font-medium accent-color">
- {{ formatType(selectedType) }}
+ <div class="flex flex-col pt-3">
+ @if (selectedType) {
+ <div class="flex items-center">
+ <div class="selected-type-name font-medium
accent-color">
+ {{ formatType(selectedType) }}
+ </div>
+ <div class="selected-type-bundle surface-color">{{
formatBundle(selectedType) }}</div>
</div>
- <div class="selected-type-bundle surface-color">{{
formatBundle(selectedType) }}</div>
- </div>
- <div class="selected-type-description"
[title]="formatDescription(selectedType)">
- {{ formatDescription(selectedType) }}
- </div>
- } @else {
- <div class="no-selected-type unset surface-color">No type
selected</div>
- }
+ <div class="selected-type-description"
[title]="formatDescription(selectedType)">
+ {{ formatDescription(selectedType) }}
+ </div>
+ } @else {
+ <div class="no-selected-type unset surface-color">No type
selected</div>
+ }
+ </div>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
index 38c56316e1..8db785eefb 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
@@ -15,7 +15,7 @@
~ limitations under the License.
-->
-<div class="property-table flex flex-col gap-y-3">
+<div class="property-table flex flex-col h-full gap-y-3">
<div class="flex justify-between items-center">
<div class="font-bold">Required field</div>
@if (!isDisabled) {
@@ -27,8 +27,8 @@
</div>
}
</div>
- <div class="listing-table">
- <div class="h-96 overflow-y-auto overflow-x-hidden">
+ <div class="listing-table flex-1 relative">
+ <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
<table mat-table #propertyTable [dataSource]="dataSource">
<!-- Property Column -->
<ng-container matColumnDef="property">
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
index eeb593a7b5..73e06ac588 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
@@ -17,11 +17,11 @@
<h2 mat-dialog-title>Provenance Event</h2>
<div class="provenance-event">
- <mat-dialog-content>
- <mat-tab-group>
- <mat-tab label="Details">
- <div class="tab-content py-4">
- <div class="absolute inset-0 flex gap-x-4">
+ <mat-tab-group>
+ <mat-tab label="Details">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
+ <div class="flex gap-x-4">
<div class="w-full flex flex-col gap-y-3">
<div class="flex flex-col">
<div>Time</div>
@@ -219,10 +219,12 @@
</div>
</div>
</div>
- </mat-tab>
- <mat-tab label="Attributes">
- <div class="tab-content py-4">
- <div class="absolute inset-0 flex flex-col gap-y-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Attributes">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
+ <div class="flex flex-col gap-y-4">
<div class="flex justify-between">
<div class="event-header font-bold
primary-color">Attribute Values</div>
<div class="flex items-center gap-x-1">
@@ -251,10 +253,12 @@
</div>
</div>
</div>
- </mat-tab>
- <mat-tab label="Content">
- <div class="tab-content py-4">
- <div class="absolute inset-0 flex flex-col gap-y-4">
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Content">
+ <mat-dialog-content>
+ <div class="dialog-tab-content">
+ <div class="flex flex-col gap-y-4">
<div class="flex gap-x-4">
<div class="w-full">
<div class="event-header font-bold
primary-color">Input Claim</div>
@@ -415,40 +419,41 @@
</div>
</div>
</div>
- </mat-tab>
- </mat-tab-group>
- <ng-template #formatValue let-value let-title="title">
- <ng-container *ngIf="value != null; else nullValue">
- <ng-container *ngIf="value === ''; else nonEmptyValue">
- <div class="unset surface-color">Empty string set</div>
- </ng-container>
- <ng-template #nonEmptyValue>
- <div class="accent-color font-medium" *ngIf="title ==
null; else valueWithTitle">
- {{ value }}
- </div>
- <ng-template #valueWithTitle>
- <div class="accent-color font-medium"
[title]="title">{{ value }}</div>
- </ng-template>
- </ng-template>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
+ <ng-template #formatValue let-value let-title="title">
+ <ng-container *ngIf="value != null; else nullValue">
+ <ng-container *ngIf="value === ''; else nonEmptyValue">
+ <div class="unset surface-color">Empty string set</div>
</ng-container>
- <ng-template #nullValue>
- <div class="unset surface-color">No value set</div>
- </ng-template>
- </ng-template>
- <ng-template #formatContentValue let-value let-title="title">
- <ng-container *ngIf="value != null; else nullValue">
+ <ng-template #nonEmptyValue>
<div class="accent-color font-medium" *ngIf="title == null;
else valueWithTitle">
{{ value }}
</div>
<ng-template #valueWithTitle>
<div class="accent-color font-medium" [title]="title">{{
value }}</div>
</ng-template>
- </ng-container>
- <ng-template #nullValue>
- <div class="unset surface-color">No value previously set</div>
</ng-template>
+ </ng-container>
+ <ng-template #nullValue>
+ <div class="unset surface-color">No value set</div>
+ </ng-template>
+ </ng-template>
+ <ng-template #formatContentValue let-value let-title="title">
+ <ng-container *ngIf="value != null; else nullValue">
+ <div class="accent-color font-medium" *ngIf="title == null; else
valueWithTitle">
+ {{ value }}
+ </div>
+ <ng-template #valueWithTitle>
+ <div class="accent-color font-medium" [title]="title">{{ value
}}</div>
+ </ng-template>
+ </ng-container>
+ <ng-template #nullValue>
+ <div class="unset surface-color">No value previously set</div>
</ng-template>
- </mat-dialog-content>
+ </ng-template>
+
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Ok</button>
</mat-dialog-actions>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.scss
index f511042b11..92050df0b9 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.scss
@@ -20,19 +20,8 @@
.provenance-event {
@include mat.button-density(-1);
- .mdc-dialog__content {
- padding: 0 16px;
- font-size: 14px;
-
- .tab-content {
- position: relative;
- height: 475px;
- overflow-y: auto;
-
- .event-header {
- font-size: 15px;
- }
- }
+ .event-header {
+ font-size: 15px;
}
.mat-mdc-form-field {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
index a46444eeb7..4dcd7fee52 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
@@ -633,7 +633,7 @@ export class StatusHistoryChart {
const marginTop: any =
controlContainer.computedStyleMap().get('margin-top');
const statusHistory =
document.getElementsByClassName('status-history')![0];
- const dialogContent =
statusHistory.getElementsByClassName('dialog-content')![0];
+ const dialogContent =
statusHistory.getElementsByClassName('status-history-dialog-content')![0];
const descriptorContainer =
document.getElementsByClassName('selected-descriptor-container')![0];
const dialogStyles: any = dialogContent.computedStyleMap();
const bodyHeight = document.body.getBoundingClientRect().height;
@@ -650,7 +650,7 @@ export class StatusHistoryChart {
private getChartMaxWidth() {
const statusHistory =
document.getElementsByClassName('status-history')![0];
- const dialogContent =
statusHistory.getElementsByClassName('dialog-content')![0];
+ const dialogContent =
statusHistory.getElementsByClassName('status-history-dialog-content')![0];
const dialogContentStyles: any = dialogContent.computedStyleMap();
const fullDialogStyles: any = statusHistory.computedStyleMap();
const bodyWidth = document.body.getBoundingClientRect().width;
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
index 82c9a6e982..3e50d199e9 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
@@ -27,7 +27,7 @@
<div class="status-history flex flex-col grow">
<mat-dialog-content class="grow flex flex-1">
<form [formGroup]="statusHistoryForm" class="flex flex-1
h-full">
- <div class="dialog-content flex w-full flex-1">
+ <div class="status-history-dialog-content flex w-full
flex-1">
@if (isInitialLoading(statusHistoryState)) {
<div class="flex-1">
<ngx-skeleton-loader
count="3"></ngx-skeleton-loader>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
index 012b0402df..d02d181734 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
@@ -19,236 +19,238 @@
<h2 mat-dialog-title>System Diagnostics</h2>
<error-banner></error-banner>
<div class="system-diagnostics">
- <mat-dialog-content>
- <div class="dialog-content">
- <mat-tab-group>
- <mat-tab label="JVM">
- <div class="tab-content py-4 h-full w-full">
- <div class="inset-0 flex gap-y-4">
- <div class="flex flex-col flex-1 gap-y-4">
- <section>
- <div class="section-header font-bold">
- Heap ({{
systemDiagnostics.heapUtilization }})
- </div>
- <div class="flex flex-col gap-y-3">
- <div class="flex flex-col">
- <div>Max</div>
- <div class="accent-color
font-medium">
- {{
systemDiagnostics.maxHeap }}
- </div>
- </div>
- <div class="flex flex-col">
- <div>Total</div>
- <div class="accent-color
font-medium">
- {{
systemDiagnostics.totalHeap }}
- </div>
+ <mat-tab-group>
+ <mat-tab label="JVM">
+ <mat-dialog-content>
+ <div class="dialog-tab-content w-full">
+ <div class="flex gap-y-4">
+ <div class="flex flex-col flex-1 gap-y-4">
+ <section>
+ <div class="section-header font-bold">
+ Heap ({{
systemDiagnostics.heapUtilization }})
+ </div>
+ <div class="flex flex-col gap-y-3">
+ <div class="flex flex-col">
+ <div>Max</div>
+ <div class="accent-color
font-medium">
+ {{ systemDiagnostics.maxHeap }}
</div>
- <div class="flex flex-col">
- <div>Used</div>
- <div class="accent-color
font-medium">
- {{
systemDiagnostics.usedHeap }}
- </div>
+ </div>
+ <div class="flex flex-col">
+ <div>Total</div>
+ <div class="accent-color
font-medium">
+ {{ systemDiagnostics.totalHeap
}}
</div>
- <div class="flex flex-col">
- <div>Free</div>
- <div class="accent-color
font-medium">
- {{
systemDiagnostics.freeHeap }}
- </div>
+ </div>
+ <div class="flex flex-col">
+ <div>Used</div>
+ <div class="accent-color
font-medium">
+ {{ systemDiagnostics.usedHeap
}}
</div>
</div>
- </section>
- <section>
- <div class="section-header font-bold
primary-color">Garbage Collection</div>
- @if (sortedGarbageCollections) {
- <div class="flex flex-col gap-y-3">
- @for (gc of
sortedGarbageCollections; track gc) {
- <div class="flex flex-col">
- <div>{{ gc.name
}}</div>
- <div
class="accent-color font-medium">
- {{
gc.collectionCount }} times ({{ gc.collectionTime }})
- </div>
- </div>
- }
+ <div class="flex flex-col">
+ <div>Free</div>
+ <div class="accent-color
font-medium">
+ {{ systemDiagnostics.freeHeap
}}
</div>
- }
- </section>
- </div>
- <div class="flex flex-col flex-1 gap-y-4">
- <section>
- <div class="section-header
font-bold">Non Heap</div>
+ </div>
+ </div>
+ </section>
+ <section>
+ <div class="section-header font-bold
primary-color">Garbage Collection</div>
+ @if (sortedGarbageCollections) {
<div class="flex flex-col gap-y-3">
- <div class="flex flex-col">
- <div>Max</div>
- <div class="accent-color
font-medium">
- {{
systemDiagnostics.maxNonHeap }}
- </div>
- </div>
- <div class="flex flex-col">
- <div>Total</div>
- <div class="accent-color
font-medium">
- {{
systemDiagnostics.totalNonHeap }}
- </div>
- </div>
- <div class="flex flex-col">
- <div>Used</div>
- <div class="accent-color
font-medium">
- {{
systemDiagnostics.usedNonHeap }}
+ @for (gc of
sortedGarbageCollections; track gc) {
+ <div class="flex flex-col">
+ <div>{{ gc.name }}</div>
+ <div class="accent-color
font-medium">
+ {{ gc.collectionCount
}} times ({{ gc.collectionTime }})
+ </div>
</div>
+ }
+ </div>
+ }
+ </section>
+ </div>
+ <div class="flex flex-col flex-1 gap-y-4">
+ <section>
+ <div class="section-header font-bold">Non
Heap</div>
+ <div class="flex flex-col gap-y-3">
+ <div class="flex flex-col">
+ <div>Max</div>
+ <div class="accent-color
font-medium">
+ {{
systemDiagnostics.maxNonHeap }}
</div>
- <div class="flex flex-col">
- <div>Free</div>
- <div class="accent-color
font-medium">
- {{
systemDiagnostics.freeNonHeap }}
- </div>
+ </div>
+ <div class="flex flex-col">
+ <div>Total</div>
+ <div class="accent-color
font-medium">
+ {{
systemDiagnostics.totalNonHeap }}
</div>
</div>
- </section>
- <section>
- <div class="section-header
font-bold">Runtime</div>
- <div class="flex flex-col gap-y-3">
- <div class="flex flex-col">
- <div>Uptime</div>
- <div class="accent-color
font-medium">
- {{
systemDiagnostics.uptime }}
- </div>
+ <div class="flex flex-col">
+ <div>Used</div>
+ <div class="accent-color
font-medium">
+ {{
systemDiagnostics.usedNonHeap }}
</div>
</div>
- </section>
- </div>
- </div>
- </div>
- </mat-tab>
- <mat-tab label="System">
- <div class="tab-content py-4 gap-y-6 h-full w-full
flex flex-col">
- <div class="flex">
- <div class="flex flex-col flex-1 gap-y-4">
- <div class="flex flex-col gap-y-3">
<div class="flex flex-col">
- <div>Available Cores</div>
+ <div>Free</div>
<div class="accent-color
font-medium">
- {{
systemDiagnostics.availableProcessors }}
+ {{
systemDiagnostics.freeNonHeap }}
</div>
</div>
</div>
- </div>
- <div class="flex flex-col flex-1 gap-y-4">
+ </section>
+ <section>
+ <div class="section-header
font-bold">Runtime</div>
<div class="flex flex-col gap-y-3">
<div class="flex flex-col">
- <div class="flex gap-x-3
items-center">
- <div>Core Load Average</div>
- <i
- class="fa fa-info-circle"
- nifiTooltip
-
[tooltipComponentType]="TextTip"
- tooltipInputData="Core
load average for the last minute. Not available on all platforms."></i>
- </div>
+ <div>Uptime</div>
<div class="accent-color
font-medium">
- {{
formatFloat(systemDiagnostics.processorLoadAverage) }}
+ {{ systemDiagnostics.uptime }}
</div>
</div>
</div>
- </div>
+ </section>
</div>
- <section class="flex flex-col pr-4">
- <div class="section-header font-bold">FlowFile
Repository Usage</div>
- <div>
- <div class="capitalize">Usage:</div>
- <mat-progress-bar
- mode="determinate"
- [value]="
- getRepositoryStorageUsagePercent(
-
systemDiagnostics.flowFileRepositoryStorageUsage
- )
- ">
- </mat-progress-bar>
- <div class="accent-color font-medium">
- {{
systemDiagnostics.flowFileRepositoryStorageUsage.utilization }}
- ({{
systemDiagnostics.flowFileRepositoryStorageUsage.usedSpace }}
- of
- {{
systemDiagnostics.flowFileRepositoryStorageUsage.totalSpace }})
+ </div>
+ </div>
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="System">
+ <mat-dialog-content>
+ <div class="dialog-tab-content gap-y-6 w-full flex
flex-col">
+ <div class="flex">
+ <div class="flex flex-col flex-1 gap-y-4">
+ <div class="flex flex-col gap-y-3">
+ <div class="flex flex-col">
+ <div>Available Cores</div>
+ <div class="accent-color font-medium">
+ {{
systemDiagnostics.availableProcessors }}
+ </div>
</div>
</div>
- </section>
- <section class="flex flex-col pr-4">
- <div class="section-header font-bold">Content
Repository Usage</div>
- <div class="repository-storage-container flex
flex-col gap-y-2">
- @for (repo of
systemDiagnostics.contentRepositoryStorageUsage; track repo) {
- <div>
- <div class="capitalize">Usage for
{{ repo.identifier }}:</div>
- <mat-progress-bar
- mode="determinate"
-
[value]="getRepositoryStorageUsagePercent(repo)">
- </mat-progress-bar>
- <div class="accent-color
font-medium">
- {{ repo.utilization }} ({{
repo.usedSpace }} of {{ repo.totalSpace }})
- </div>
+ </div>
+ <div class="flex flex-col flex-1 gap-y-4">
+ <div class="flex flex-col gap-y-3">
+ <div class="flex flex-col">
+ <div class="flex gap-x-3 items-center">
+ <div>Core Load Average</div>
+ <i
+ class="fa fa-info-circle"
+ nifiTooltip
+
[tooltipComponentType]="TextTip"
+ tooltipInputData="Core load
average for the last minute. Not available on all platforms."></i>
</div>
- }
- </div>
- </section>
- <section class="flex flex-col pr-4">
- <div class="section-header
font-bold">Provenance Repository Usage</div>
- <div class="repository-storage-container flex
flex-col gap-y-2">
- @for (repo of
systemDiagnostics.provenanceRepositoryStorageUsage; track repo) {
- <div>
- <div class="capitalize">Usage for
{{ repo.identifier }}:</div>
- <mat-progress-bar
- mode="determinate"
-
[value]="getRepositoryStorageUsagePercent(repo)">
- </mat-progress-bar>
- <div class="accent-color
font-medium">
- {{ repo.utilization }} ({{
repo.usedSpace }} of {{ repo.totalSpace }})
- </div>
+ <div class="accent-color font-medium">
+ {{
formatFloat(systemDiagnostics.processorLoadAverage) }}
</div>
- }
+ </div>
</div>
- </section>
+ </div>
</div>
- </mat-tab>
- <mat-tab label="Version">
- <div class="tab-content py-4 h-full w-full">
- <div class="inset-0 flex flex-col gap-y-4">
- <section>
- <div class="section-header
font-bold">NiFi</div>
- <dl class="setting-attributes-list">
- <dt class="font-bold">NiFi Version</dt>
- <dd>{{
systemDiagnostics.versionInfo.niFiVersion }}</dd>
- <dt class="font-bold">Tag</dt>
- <dd>{{
systemDiagnostics.versionInfo.buildTag }}</dd>
- <dt class="font-bold">Build
Date/Time</dt>
- <dd>{{
systemDiagnostics.versionInfo.buildTimestamp }}</dd>
- <dt class="font-bold">Branch</dt>
- <dd>{{
systemDiagnostics.versionInfo.buildBranch }}</dd>
- <dt class="font-bold">Revision</dt>
- <dd>{{
systemDiagnostics.versionInfo.buildRevision }}</dd>
- </dl>
- </section>
- <section>
- <div class="section-header
font-bold">Java</div>
- <dl class="setting-attributes-list">
- <dt class="font-bold">Version</dt>
- <dd>{{
systemDiagnostics.versionInfo.javaVersion }}</dd>
- <dt class="font-bold">Vendor</dt>
- <dd>{{
systemDiagnostics.versionInfo.javaVendor }}</dd>
- </dl>
- </section>
- <section>
- <div class="section-header
font-bold">Operating System</div>
- <dl class="setting-attributes-list">
- <dt class="font-bold">Name</dt>
- <dd>{{
systemDiagnostics.versionInfo.osName }}</dd>
- <dt class="font-bold">Version</dt>
- <dd>{{
systemDiagnostics.versionInfo.osVersion }}</dd>
- <dt class="font-bold">Architecture</dt>
- <dd>{{
systemDiagnostics.versionInfo.osArchitecture }}</dd>
- </dl>
- </section>
+ <section class="flex flex-col pr-4">
+ <div class="section-header font-bold">FlowFile
Repository Usage</div>
+ <div>
+ <div class="capitalize">Usage:</div>
+ <mat-progress-bar
+ mode="determinate"
+ [value]="
+ getRepositoryStorageUsagePercent(
+
systemDiagnostics.flowFileRepositoryStorageUsage
+ )
+ ">
+ </mat-progress-bar>
+ <div class="accent-color font-medium">
+ {{
systemDiagnostics.flowFileRepositoryStorageUsage.utilization }}
+ ({{
systemDiagnostics.flowFileRepositoryStorageUsage.usedSpace }}
+ of
+ {{
systemDiagnostics.flowFileRepositoryStorageUsage.totalSpace }})
+ </div>
+ </div>
+ </section>
+ <section class="flex flex-col pr-4">
+ <div class="section-header font-bold">Content
Repository Usage</div>
+ <div class="repository-storage-container flex
flex-col gap-y-2">
+ @for (repo of
systemDiagnostics.contentRepositoryStorageUsage; track repo) {
+ <div>
+ <div class="capitalize">Usage for {{
repo.identifier }}:</div>
+ <mat-progress-bar
+ mode="determinate"
+
[value]="getRepositoryStorageUsagePercent(repo)">
+ </mat-progress-bar>
+ <div class="accent-color font-medium">
+ {{ repo.utilization }} ({{
repo.usedSpace }} of {{ repo.totalSpace }})
+ </div>
+ </div>
+ }
</div>
+ </section>
+ <section class="flex flex-col pr-4">
+ <div class="section-header font-bold">Provenance
Repository Usage</div>
+ <div class="repository-storage-container flex
flex-col gap-y-2">
+ @for (repo of
systemDiagnostics.provenanceRepositoryStorageUsage; track repo) {
+ <div>
+ <div class="capitalize">Usage for {{
repo.identifier }}:</div>
+ <mat-progress-bar
+ mode="determinate"
+
[value]="getRepositoryStorageUsagePercent(repo)">
+ </mat-progress-bar>
+ <div class="accent-color font-medium">
+ {{ repo.utilization }} ({{
repo.usedSpace }} of {{ repo.totalSpace }})
+ </div>
+ </div>
+ }
+ </div>
+ </section>
+ </div>
+ </mat-dialog-content>
+ </mat-tab>
+ <mat-tab label="Version">
+ <mat-dialog-content>
+ <div class="dialog-tab-content w-full">
+ <div class="flex flex-col gap-y-4">
+ <section>
+ <div class="section-header
font-bold">NiFi</div>
+ <dl class="setting-attributes-list">
+ <dt class="font-bold">NiFi Version</dt>
+ <dd>{{
systemDiagnostics.versionInfo.niFiVersion }}</dd>
+ <dt class="font-bold">Tag</dt>
+ <dd>{{
systemDiagnostics.versionInfo.buildTag }}</dd>
+ <dt class="font-bold">Build Date/Time</dt>
+ <dd>{{
systemDiagnostics.versionInfo.buildTimestamp }}</dd>
+ <dt class="font-bold">Branch</dt>
+ <dd>{{
systemDiagnostics.versionInfo.buildBranch }}</dd>
+ <dt class="font-bold">Revision</dt>
+ <dd>{{
systemDiagnostics.versionInfo.buildRevision }}</dd>
+ </dl>
+ </section>
+ <section>
+ <div class="section-header
font-bold">Java</div>
+ <dl class="setting-attributes-list">
+ <dt class="font-bold">Version</dt>
+ <dd>{{
systemDiagnostics.versionInfo.javaVersion }}</dd>
+ <dt class="font-bold">Vendor</dt>
+ <dd>{{
systemDiagnostics.versionInfo.javaVendor }}</dd>
+ </dl>
+ </section>
+ <section>
+ <div class="section-header
font-bold">Operating System</div>
+ <dl class="setting-attributes-list">
+ <dt class="font-bold">Name</dt>
+ <dd>{{
systemDiagnostics.versionInfo.osName }}</dd>
+ <dt class="font-bold">Version</dt>
+ <dd>{{
systemDiagnostics.versionInfo.osVersion }}</dd>
+ <dt class="font-bold">Architecture</dt>
+ <dd>{{
systemDiagnostics.versionInfo.osArchitecture }}</dd>
+ </dl>
+ </section>
</div>
- </mat-tab>
- </mat-tab-group>
- </div>
- </mat-dialog-content>
+ </div>
+ </mat-dialog-content>
+ </mat-tab>
+ </mat-tab-group>
<mat-dialog-actions>
<div class="flex flex-1 justify-between">
<div class="refresh-container flex items-center gap-x-2">
diff --git
a/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
b/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
index 11afa56e41..33cb3fad0d 100644
---
a/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
+++
b/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
@@ -20,13 +20,8 @@
.system-diagnostics {
@include mat.button-density(-1);
- .tab-content {
- position: relative;
- height: 480px;
-
- .section-header {
- font-size: 15px;
- }
+ .section-header {
+ font-size: 15px;
}
.setting-attributes-list {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
index e7dae5095c..069ce1217f 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
@@ -73,6 +73,11 @@
cursor: pointer;
}
+ .dialog-tab-content,
+ .dialog-content {
+ height: 50vh;
+ }
+
.flex-2 {
display: flex;
flex: 2;
@@ -165,6 +170,10 @@
.mat-mdc-paginator {
background-color: unset !important;
}
+
+ .mdc-dialog__content {
+ font-size: 14px !important;
+ }
}
@mixin generate-material-theme($material-theme) {
