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

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
This commit is contained in:
Matt Gilman 2024-05-09 14:41:06 -04:00 committed by GitHub
parent 7cd1a30948
commit 326df914bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
52 changed files with 637 additions and 752 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,14 +17,9 @@
.action-details { .action-details {
.action-details-content { .action-details-content {
.mdc-dialog__content { .panel-content {
padding: 0 16px; position: relative;
font-size: 14px; overflow-y: auto;
.panel-content {
position: relative;
overflow-y: auto;
}
} }
} }
} }

22
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
View File

@ -19,10 +19,10 @@
@if (breadcrumbs$ | async; as breadcrumbs) { @if (breadcrumbs$ | async; as breadcrumbs) {
<form class="create-connection-form" [formGroup]="createConnectionForm"> <form class="create-connection-form" [formGroup]="createConnectionForm">
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Details">
<mat-tab label="Details"> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
@switch (source.componentType) { @switch (source.componentType) {
@case (ComponentType.Processor) { @case (ComponentType.Processor) {
@ -82,9 +82,11 @@
} }
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Settings"> </mat-tab>
<div class="tab-content py-4 flex gap-x-4"> <mat-tab label="Settings">
<mat-dialog-content>
<div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
<div> <div>
<mat-form-field> <mat-form-field>
@ -171,9 +173,9 @@
formControlName="prioritizers"></prioritizers> formControlName="prioritizers"></prioritizers>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
</mat-dialog-content> </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>

10
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
View File

@ -20,16 +20,6 @@
.create-connection-form { .create-connection-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

22
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
View File

@ -20,11 +20,11 @@
</h2> </h2>
<form class="edit-connection-form" [formGroup]="editConnectionForm"> <form class="edit-connection-form" [formGroup]="editConnectionForm">
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Details">
<mat-tab label="Details"> <mat-dialog-content>
@if (breadcrumbs$ | async; as breadcrumbs) { @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"> <div class="w-full">
@switch (sourceType) { @switch (sourceType) {
@case (ComponentType.Processor) { @case (ComponentType.Processor) {
@ -89,9 +89,11 @@
</div> </div>
</div> </div>
} }
</mat-tab> </mat-dialog-content>
<mat-tab label="Settings"> </mat-tab>
<div class="tab-content py-4 flex gap-x-4"> <mat-tab label="Settings">
<mat-dialog-content>
<div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
<div> <div>
<mat-form-field> <mat-form-field>
@ -242,9 +244,9 @@
formControlName="prioritizers"></prioritizers> formControlName="prioritizers"></prioritizers>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
</mat-dialog-content> </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (connectionReadonly || sourceReadonly || destinationReadonly) { @if (connectionReadonly || sourceReadonly || destinationReadonly) {

10
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
View File

@ -20,16 +20,6 @@
.edit-connection-form { .edit-connection-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

6
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
View File

@ -18,7 +18,7 @@
<h2 mat-dialog-title>Change Version</h2> <h2 mat-dialog-title>Change Version</h2>
<div class="change-version"> <div class="change-version">
<mat-dialog-content> <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-row w-full">
<div class="flex flex-1 flex-col gap-y-4"> <div class="flex flex-1 flex-col gap-y-4">
<div> <div>
@ -48,8 +48,8 @@
</div> </div>
</div> </div>
<div class="listing-table"> <div class="listing-table flex-1 relative">
<div class="h-48 overflow-y-auto overflow-x-hidden"> <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

2
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
View File

@ -23,7 +23,7 @@
</h2> </h2>
<div class="local-changes"> <div class="local-changes">
<mat-dialog-content> <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> <div>
The following changes have been made to The following changes have been made to
{{ versionControlInformation.versionControlInformation?.flowName }} (Version {{ versionControlInformation.versionControlInformation?.flowName }} (Version

4
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
View File

@ -29,8 +29,8 @@
</div> </div>
</form> </form>
</div> </div>
<div class="listing-table"> <div class="listing-table flex-1 relative">
<div class="h-96 overflow-y-auto overflow-x-hidden"> <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

2
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
View File

@ -22,7 +22,7 @@
<div> <div>
<mat-form-field> <mat-form-field>
<mat-label>Label Value</mat-label> <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> </mat-form-field>
</div> </div>
<div> <div>

22
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
View File

@ -18,10 +18,10 @@
<h2 mat-dialog-title>{{ readonly ? 'Process Group Details' : 'Edit Process Group' }}</h2> <h2 mat-dialog-title>{{ readonly ? 'Process Group Details' : 'Edit Process Group' }}</h2>
<form class="process-group-edit-form" [formGroup]="editProcessGroupForm"> <form class="process-group-edit-form" [formGroup]="editProcessGroupForm">
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Settings">
<mat-tab label="Settings"> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
<div> <div>
<mat-form-field> <mat-form-field>
@ -188,9 +188,11 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Comments"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Comments">
<mat-dialog-content>
<div class="dialog-tab-content">
<mat-form-field> <mat-form-field>
<mat-label>Comments</mat-label> <mat-label>Comments</mat-label>
<textarea <textarea
@ -201,9 +203,9 @@
[readonly]="readonly"></textarea> [readonly]="readonly"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
</mat-dialog-content> </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (readonly) { @if (readonly) {

10
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
View File

@ -20,16 +20,6 @@
.process-group-edit-form { .process-group-edit-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

48
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
View File

@ -28,10 +28,10 @@
<form class="processor-edit-form" [formGroup]="editProcessorForm"> <form class="processor-edit-form" [formGroup]="editProcessorForm">
<error-banner></error-banner> <error-banner></error-banner>
<!-- TODO - Stop & Configure --> <!-- TODO - Stop & Configure -->
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Settings">
<mat-tab label="Settings"> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
<div> <div>
<mat-form-field> <mat-form-field>
@ -109,9 +109,11 @@
</div> </div>
<div class="w-full"></div> <div class="w-full"></div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Scheduling"> </mat-tab>
<div class="tab-content py-4 flex gap-x-4"> <mat-tab label="Scheduling">
<mat-dialog-content>
<div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
<div> <div>
<mat-form-field> <mat-form-field>
@ -230,9 +232,11 @@
} }
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Properties"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Properties">
<mat-dialog-content>
<div class="dialog-tab-content">
<property-table <property-table
formControlName="properties" formControlName="properties"
[createNewProperty]="createNewProperty" [createNewProperty]="createNewProperty"
@ -246,31 +250,35 @@
request.entity.component.supportsSensitiveDynamicProperties request.entity.component.supportsSensitiveDynamicProperties
"></property-table> "></property-table>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Relationships"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Relationships">
<mat-dialog-content>
<div class="dialog-tab-content">
@if (request.entity.component.relationships.length > 0) { @if (request.entity.component.relationships.length > 0) {
<relationship-settings formControlName="relationshipConfiguration"></relationship-settings> <relationship-settings formControlName="relationshipConfiguration"></relationship-settings>
} @else { } @else {
<div class="unset surface-color">This processor has no relationships.</div> <div class="unset surface-color">This processor has no relationships.</div>
} }
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Comments"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Comments">
<mat-dialog-content>
<div class="dialog-tab-content">
<mat-form-field> <mat-form-field>
<mat-label>Comments</mat-label> <mat-label>Comments</mat-label>
<textarea <textarea
matInput matInput
formControlName="comments" formControlName="comments"
type="text" type="text"
rows="5" rows="10"
[readonly]="readonly"></textarea> [readonly]="readonly"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
</mat-dialog-content> </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (readonly) { @if (readonly) {

10
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
View File

@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.processor-edit-form { .processor-edit-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

2
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
View File

@ -19,7 +19,7 @@
<form class="create-remote-process-group-form" [formGroup]="createRemoteProcessGroupForm"> <form class="create-remote-process-group-form" [formGroup]="createRemoteProcessGroupForm">
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="flex gap-x-4">
<div class="w-full"> <div class="w-full">
<mat-form-field> <mat-form-field>
<mat-label> <mat-label>

6
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
View File

@ -19,15 +19,15 @@
<form class="edit-remote-process-group-form" [formGroup]="editRemoteProcessGroupForm"> <form class="edit-remote-process-group-form" [formGroup]="editRemoteProcessGroupForm">
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <mat-dialog-content>
<div class="flex flex-col mb-6"> <div class="flex flex-col mb-4">
<div>Name</div> <div>Name</div>
<div class="accent-color font-medium">{{ request.entity.component.name }}</div> <div class="accent-color font-medium">{{ request.entity.component.name }}</div>
</div> </div>
<div class="flex flex-col mb-6"> <div class="flex flex-col mb-4">
<div>Id</div> <div>Id</div>
<div class="accent-color font-medium">{{ request.entity.component.id }}</div> <div class="accent-color font-medium">{{ request.entity.component.id }}</div>
</div> </div>
<div class="tab-content py-4 flex gap-x-4"> <div class="flex gap-x-4">
<div class="w-full"> <div class="w-full">
<mat-form-field> <mat-form-field>
<mat-label> <mat-label>

32
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
View File

@ -22,7 +22,7 @@
<error-banner></error-banner> <error-banner></error-banner>
@if ((updateRequest | async)!; as requestEntity) { @if ((updateRequest | async)!; as requestEntity) {
<mat-dialog-content> <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 class="w-full flex flex-col">
<div>Steps To Update Parameters</div> <div>Steps To Update Parameters</div>
<div class="flex flex-col gap-y-1.5"> <div class="flex flex-col gap-y-1.5">
@ -82,10 +82,10 @@
</div> </div>
</mat-dialog-content> </mat-dialog-content>
} @else { } @else {
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Settings">
<mat-tab label="Settings"> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
@if (!isNew) { @if (!isNew) {
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
@ -144,27 +144,31 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Parameters"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Parameters">
<mat-dialog-content>
<div class="dialog-tab-content">
<parameter-table <parameter-table
formControlName="parameters" formControlName="parameters"
[canAddParameters]="!request.parameterContext?.component?.parameterProviderConfiguration" [canAddParameters]="!request.parameterContext?.component?.parameterProviderConfiguration"
[createNewParameter]="createNewParameter" [createNewParameter]="createNewParameter"
[editParameter]="editParameter"></parameter-table> [editParameter]="editParameter"></parameter-table>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Inheritance"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Inheritance">
<mat-dialog-content>
<div class="dialog-tab-content">
<parameter-context-inheritance <parameter-context-inheritance
formControlName="inheritedParameterContexts" formControlName="inheritedParameterContexts"
[allParameterContexts]=" [allParameterContexts]="
(availableParameterContexts$ | async)! (availableParameterContexts$ | async)!
"></parameter-context-inheritance> "></parameter-context-inheritance>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
</mat-dialog-content> </mat-tab-group>
} }
@if ((updateRequest | async)!; as requestEntity) { @if ((updateRequest | async)!; as requestEntity) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">

15
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
View File

@ -20,21 +20,6 @@
.parameter-context-edit-form { .parameter-context-edit-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

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

@ -15,7 +15,7 @@
~ limitations under the License. ~ 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"> <div class="flex basis-2/3 flex-col gap-y-3">
@if (canAddParameters && !isDisabled) { @if (canAddParameters && !isDisabled) {
<div class="flex justify-end items-center"> <div class="flex justify-end items-center">
@ -24,8 +24,8 @@
</button> </button>
</div> </div>
} }
<div class="listing-table"> <div class="listing-table flex-1 relative">
<div class="h-96 overflow-y-auto overflow-x-hidden"> <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

70
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
View File

@ -17,11 +17,11 @@
<h2 mat-dialog-title>FlowFile</h2> <h2 mat-dialog-title>FlowFile</h2>
<div class="flowfile"> <div class="flowfile">
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Details">
<mat-tab label="Details"> <mat-dialog-content>
<div class="tab-content py-4"> <div class="dialog-tab-content">
<div class="absolute inset-0 flex gap-x-4"> <div class="flex gap-x-4">
<div class="w-full flex flex-col gap-y-3"> <div class="w-full flex flex-col gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flowfile-header font-bold primary-color">FlowFile Details</div> <div class="flowfile-header font-bold primary-color">FlowFile Details</div>
@ -176,10 +176,12 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Attributes"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Attributes">
<div class="absolute inset-0 flex flex-col gap-y-4"> <mat-dialog-content>
<div class="dialog-tab-content">
<div class="flex flex-col gap-y-4">
<div class="flex"> <div class="flex">
<div class="flowfile-header font-bold primary-color">Attribute Values</div> <div class="flowfile-header font-bold primary-color">Attribute Values</div>
</div> </div>
@ -197,40 +199,40 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
<ng-template #formatValue let-value let-title="title"> </mat-tab-group>
<ng-container *ngIf="value != null; else nullValue"> <ng-template #formatValue let-value let-title="title">
<ng-container *ngIf="value === ''; else nonEmptyValue"> <ng-container *ngIf="value != null; else nullValue">
<div class="unset surface-color">Empty string set</div> <ng-container *ngIf="value === ''; else nonEmptyValue">
</ng-container> <div class="unset surface-color">Empty string set</div>
<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>
</ng-container> </ng-container>
<ng-template #nullValue> <ng-template #nonEmptyValue>
<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"> <div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
{{ value }} {{ value }}
</div> </div>
<ng-template #valueWithTitle> <ng-template #valueWithTitle>
<div class="accent-color font-medium" [title]="title">{{ value }}</div> <div class="accent-color font-medium" [title]="title">{{ value }}</div>
</ng-template> </ng-template>
</ng-container>
<ng-template #nullValue>
<div class="unset surface-color">No value previously set</div>
</ng-template> </ng-template>
</ng-container>
<ng-template #nullValue>
<div class="unset surface-color">No value set</div>
</ng-template> </ng-template>
</mat-dialog-content> </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>
</ng-template>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button color="primary" mat-button mat-dialog-close>Ok</button> <button color="primary" mat-button mat-dialog-close>Ok</button>
</mat-dialog-actions> </mat-dialog-actions>

17
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
View File

@ -20,19 +20,8 @@
.flowfile { .flowfile {
@include mat.button-density(-1); @include mat.button-density(-1);
.mdc-dialog__content { .flowfile-header {
padding: 0 16px; font-size: 15px;
font-size: 14px; font-style: normal;
.tab-content {
position: relative;
height: 475px;
overflow-y: auto;
.flowfile-header {
font-size: 15px;
font-style: normal;
}
}
} }
} }

32
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
View File

@ -27,10 +27,10 @@
</h2> </h2>
<form class="flow-analysis-rule-edit-form" [formGroup]="editFlowAnalysisRuleForm"> <form class="flow-analysis-rule-edit-form" [formGroup]="editFlowAnalysisRuleForm">
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Settings">
<mat-tab label="Settings"> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
<mat-form-field> <mat-form-field>
<mat-label>Name</mat-label> <mat-label>Name</mat-label>
@ -83,9 +83,11 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Properties"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Properties">
<mat-dialog-content>
<div class="dialog-tab-content">
<property-table <property-table
formControlName="properties" formControlName="properties"
[createNewProperty]="createNewProperty" [createNewProperty]="createNewProperty"
@ -94,22 +96,24 @@
[goToService]="goToService"> [goToService]="goToService">
</property-table> </property-table>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Comments"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Comments">
<mat-dialog-content>
<div class="dialog-tab-content">
<mat-form-field> <mat-form-field>
<mat-label>Comments</mat-label> <mat-label>Comments</mat-label>
<textarea <textarea
matInput matInput
formControlName="comments" formControlName="comments"
type="text" type="text"
rows="5" rows="10"
[readonly]="readonly"></textarea> [readonly]="readonly"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
</mat-dialog-content> </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (readonly) { @if (readonly) {

10
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
View File

@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.flow-analysis-rule-edit-form { .flow-analysis-rule-edit-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

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

@ -25,10 +25,10 @@
</h2> </h2>
<form class="parameter-provider-edit-form" [formGroup]="editParameterProviderForm"> <form class="parameter-provider-edit-form" [formGroup]="editParameterProviderForm">
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Settings">
<mat-tab label="Settings"> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
<div> <div>
<mat-form-field> <mat-form-field>
@ -77,10 +77,11 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab>
<mat-tab label="Properties"> <mat-tab label="Properties">
<div class="tab-content py-4"> <mat-dialog-content>
<div class="dialog-tab-content">
<property-table <property-table
formControlName="properties" formControlName="properties"
[createNewProperty]="createNewProperty" [createNewProperty]="createNewProperty"
@ -88,24 +89,24 @@
[propertyHistory]="request.history" [propertyHistory]="request.history"
[goToService]="goToService"></property-table> [goToService]="goToService"></property-table>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab>
<mat-tab label="Comments"> <mat-tab label="Comments">
<div class="tab-content py-4"> <mat-dialog-content>
<div class="dialog-tab-content">
<mat-form-field> <mat-form-field>
<mat-label>Comments</mat-label> <mat-label>Comments</mat-label>
<textarea <textarea
matInput matInput
formControlName="comments" formControlName="comments"
type="text" type="text"
rows="5" rows="10"
[readonly]="readonly"></textarea> [readonly]="readonly"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
</mat-dialog-content> </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (readonly) { @if (readonly) {

10
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
View File

@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.parameter-provider-edit-form { .parameter-provider-edit-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

2
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
View File

@ -21,7 +21,7 @@
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content *ngIf="(updateRequest | async)! as requestEntity; else fetchFormContent"> <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 flex-1">
<div class="flex flex-col mb-4"> <div class="flex flex-col mb-4">
<div>Name</div> <div>Name</div>

10
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
View File

@ -20,16 +20,6 @@
.parameter-provider-fetch-form { .parameter-provider-fetch-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

24
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
View File

@ -25,10 +25,10 @@
</h2> </h2>
<form class="edit-registry-client-form" [formGroup]="editRegistryClientForm"> <form class="edit-registry-client-form" [formGroup]="editRegistryClientForm">
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Settings">
<mat-tab label="Settings"> <mat-dialog-content>
<div class="tab-content py-4 flex flex-col"> <div class="dialog-tab-content flex flex-col">
<div class="flex flex-col mb-5"> <div class="flex flex-col mb-5">
<div>Id</div> <div>Id</div>
<div class="accent-color font-medium"> <div class="accent-color font-medium">
@ -50,13 +50,15 @@
<div> <div>
<mat-form-field> <mat-form-field>
<mat-label>Description</mat-label> <mat-label>Description</mat-label>
<textarea matInput formControlName="description" type="text"></textarea> <textarea matInput formControlName="description" type="text" rows="5"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Properties"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Properties">
<mat-dialog-content>
<div class="dialog-tab-content">
<property-table <property-table
formControlName="properties" formControlName="properties"
[createNewProperty]="createNewProperty" [createNewProperty]="createNewProperty"
@ -66,9 +68,9 @@
request.registryClient.component.supportsSensitiveDynamicProperties request.registryClient.component.supportsSensitiveDynamicProperties
"></property-table> "></property-table>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
</mat-dialog-content> </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>

10
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
View File

@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.edit-registry-client-form { .edit-registry-client-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

32
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
View File

@ -27,10 +27,10 @@
</h2> </h2>
<form class="reporting-task-edit-form" [formGroup]="editReportingTaskForm"> <form class="reporting-task-edit-form" [formGroup]="editReportingTaskForm">
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Settings">
<mat-tab label="Settings"> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
<div class="flex"> <div class="flex">
<mat-form-field> <mat-form-field>
@ -108,9 +108,11 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Properties"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Properties">
<mat-dialog-content>
<div class="dialog-tab-content">
<property-table <property-table
formControlName="properties" formControlName="properties"
[createNewProperty]="createNewProperty" [createNewProperty]="createNewProperty"
@ -122,22 +124,24 @@
"> ">
</property-table> </property-table>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Comments"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Comments">
<mat-dialog-content>
<div class="dialog-tab-content">
<mat-form-field> <mat-form-field>
<mat-label>Comments</mat-label> <mat-label>Comments</mat-label>
<textarea <textarea
matInput matInput
formControlName="comments" formControlName="comments"
type="text" type="text"
rows="5" rows="10"
[readonly]="readonly"></textarea> [readonly]="readonly"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
</mat-dialog-content> </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (readonly) { @if (readonly) {

10
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
View File

@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.reporting-task-edit-form { .reporting-task-edit-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

6
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
View File

@ -18,13 +18,13 @@
<div class="cluster-summary flex flex-col"> <div class="cluster-summary flex flex-col">
<h2 mat-dialog-title>Cluster {{ componentType }} Summary</h2> <h2 mat-dialog-title>Cluster {{ componentType }} Summary</h2>
<mat-dialog-content class="cluster-summary-content flex flex-1 h-full grow"> <mat-dialog-content>
<div class="dialog-content flex flex-1 flex-col grow"> <div class="cluster-summary-dialog-content flex flex-col">
<component-context <component-context
[type]="componentType" [type]="componentType"
[name]="componentHelper.getName()" [name]="componentHelper.getName()"
[id]="componentId"></component-context> [id]="componentId"></component-context>
<div class="flex flex-1 flex-col cluster-summary-table-container"> <div class="flex-1">
@switch (componentType) { @switch (componentType) {
@case (ComponentType.Processor) { @case (ComponentType.Processor) {
<processor-cluster-table <processor-cluster-table

17
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
View File

@ -19,21 +19,8 @@
.cluster-summary { .cluster-summary {
@include mat.button-density(-1); @include mat.button-density(-1);
overflow-y: auto;
.cluster-summary-content { .cluster-summary-dialog-content {
.mdc-dialog__content { height: 40vh;
padding: 0 16px;
font-size: 14px;
.dialog-content {
min-height: 523px;
overflow-y: auto;
}
}
.cluster-summary-table-container {
min-height: 440px;
}
} }
} }

4
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
View File

@ -15,8 +15,8 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="connection-cluster-table flex flex-1 h-full"> <div class="connection-cluster-table relative h-full">
<div class="listing-table overflow-y-auto flex-1"> <div class="listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

4
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
View File

@ -15,8 +15,8 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="port-cluster-table flex flex-1 h-full"> <div class="port-cluster-table relative h-full">
<div class="listing-table overflow-y-auto flex-1"> <div class="listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

4
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
View File

@ -15,8 +15,8 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="process-group-cluster-table flex flex-1 h-full"> <div class="process-group-cluster-table relative h-full">
<div class="listing-table overflow-y-auto flex-1"> <div class="listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

4
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
View File

@ -15,8 +15,8 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="processor-cluster-table flex flex-1 h-full"> <div class="processor-cluster-table relative h-full">
<div class="listing-table overflow-y-auto flex-1"> <div class="listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

4
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
View File

@ -15,8 +15,8 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="remote-process-group-cluster-table flex flex-1 h-full"> <div class="remote-process-group-cluster-table relative h-full">
<div class="listing-table overflow-y-auto flex-1"> <div class="listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

6
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
View File

@ -18,13 +18,13 @@
<div class="user-access-policies"> <div class="user-access-policies">
<h2 mat-dialog-title>User Policies</h2> <h2 mat-dialog-title>User Policies</h2>
<mat-dialog-content> <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 class="flex flex-col">
<div>User</div> <div>User</div>
<div class="accent-color font-medium">{{ request.identity }}</div> <div class="accent-color font-medium">{{ request.identity }}</div>
</div> </div>
<div class="listing-table"> <div class="listing-table flex-1 relative">
<div class="h-96 overflow-y-auto overflow-x-hidden"> <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

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

@ -19,7 +19,7 @@
<h2 mat-dialog-title>Component State</h2> <h2 mat-dialog-title>Component State</h2>
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <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) { @if (componentName$ | async; as componentName) {
<div class="flex flex-col"> <div class="flex flex-col">
<div>Name</div> <div>Name</div>
@ -32,7 +32,7 @@
{{ stateDescription }} {{ stateDescription }}
</div> </div>
</div> </div>
<div> <div class="flex flex-1 flex-col">
<form [formGroup]="filterForm" class="flex flex-col gap-y-2"> <form [formGroup]="filterForm" class="flex flex-col gap-y-2">
<div class="accent-color font-medium">Displaying {{ filteredEntries }} of {{ totalEntries }}</div> <div class="accent-color font-medium">Displaying {{ filteredEntries }} of {{ totalEntries }}</div>
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
@ -49,47 +49,49 @@
} }
</div> </div>
</form> </form>
<div class="listing-table h-72 overflow-y-auto overflow-x-hidden"> <div class="listing-table flex-1 relative">
<table <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
mat-table <table
[dataSource]="dataSource" mat-table
matSort [dataSource]="dataSource"
matSortDisableClear matSort
(matSortChange)="sortData($event)" matSortDisableClear
[matSortActive]="initialSortColumn" (matSortChange)="sortData($event)"
[matSortDirection]="initialSortDirection"> [matSortActive]="initialSortColumn"
<!-- Key Column --> [matSortDirection]="initialSortDirection">
<ng-container matColumnDef="key"> <!-- Key Column -->
<th mat-header-cell *matHeaderCellDef mat-sort-header>Key</th> <ng-container matColumnDef="key">
<td mat-cell *matCellDef="let item"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Key</th>
{{ item.key }} <td mat-cell *matCellDef="let item">
</td> {{ item.key }}
</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>
<!-- 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> </td>
</ng-container> </ng-container>
}
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> <!-- Value Column -->
<tr <ng-container matColumnDef="value">
mat-row <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
*matRowDef="let row; let even = even; columns: displayedColumns" <td mat-cell *matCellDef="let item" [title]="item.value">
[class.even]="even"></tr> {{ item.value }}
</table> </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 }}
</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>
</div> </div>
@if (partialResults) { @if (partialResults) {

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

@ -19,9 +19,4 @@
.controller-service-disable-form { .controller-service-disable-form {
@include mat.button-density(-1); @include mat.button-density(-1);
.mdc-dialog__content {
padding: 0 16px;
font-size: 14px;
}
} }

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

@ -27,10 +27,10 @@
</h2> </h2>
<form class="controller-service-edit-form" [formGroup]="editControllerServiceForm"> <form class="controller-service-edit-form" [formGroup]="editControllerServiceForm">
<error-banner></error-banner> <error-banner></error-banner>
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Settings">
<mat-tab label="Settings"> <mat-dialog-content>
<div class="tab-content py-4 flex gap-x-4"> <div class="dialog-tab-content flex gap-x-4">
<div class="w-full"> <div class="w-full">
<div> <div>
<mat-form-field> <mat-form-field>
@ -113,9 +113,11 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Properties"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Properties">
<mat-dialog-content>
<div class="dialog-tab-content">
<property-table <property-table
formControlName="properties" formControlName="properties"
[createNewProperty]="createNewProperty" [createNewProperty]="createNewProperty"
@ -129,22 +131,24 @@
request.controllerService.component.supportsSensitiveDynamicProperties request.controllerService.component.supportsSensitiveDynamicProperties
"></property-table> "></property-table>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Comments"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Comments">
<mat-dialog-content>
<div class="dialog-tab-content">
<mat-form-field> <mat-form-field>
<mat-label>Comments</mat-label> <mat-label>Comments</mat-label>
<textarea <textarea
matInput matInput
formControlName="comments" formControlName="comments"
type="text" type="text"
rows="5" rows="10"
[readonly]="readonly"></textarea> [readonly]="readonly"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
</mat-dialog-content> </mat-tab-group>
@if ({ value: (saving$ | async)! }; as saving) { @if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
@if (readonly) { @if (readonly) {

10
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
View File

@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
.controller-service-edit-form { .controller-service-edit-form {
@include mat.button-density(-1); @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 { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

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

@ -20,11 +20,6 @@
.controller-service-enable-form { .controller-service-enable-form {
@include mat.button-density(-1); @include mat.button-density(-1);
.mdc-dialog__content {
padding: 0 16px;
font-size: 14px;
}
.mat-mdc-form-field { .mat-mdc-form-field {
width: 100%; width: 100%;
} }

144
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
View File

@ -31,22 +31,33 @@
</div> </div>
</div> </div>
<mat-dialog-content> <mat-dialog-content>
<div class="listing-table select-none"> <div class="flex flex-col dialog-content">
<div class="h-96 overflow-y-auto overflow-x-hidden"> <div class="listing-table select-none flex-1 relative">
<table <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
mat-table <table
[dataSource]="dataSource" mat-table
matSort [dataSource]="dataSource"
matSortDisableClear matSort
(matSortChange)="sortData($event)" matSortDisableClear
[matSortActive]="initialSortColumn" (matSortChange)="sortData($event)"
[matSortDirection]="initialSortDirection"> [matSortActive]="initialSortColumn"
<!-- Type Column --> [matSortDirection]="initialSortDirection">
<ng-container matColumnDef="type"> <!-- Type Column -->
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th> <ng-container matColumnDef="type">
<td mat-cell *matCellDef="let item"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
@if (isSelected(item)) { <td mat-cell *matCellDef="let item">
<div #selectedRow> @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 <div
class="fa" class="fa"
[class.fa-shield]="item.restricted" [class.fa-shield]="item.restricted"
@ -55,66 +66,57 @@
[tooltipComponentType]="RestrictionsTip" [tooltipComponentType]="RestrictionsTip"
[tooltipInputData]="getRestrictionTipData(item)"></div> [tooltipInputData]="getRestrictionTipData(item)"></div>
{{ formatType(item) }} {{ formatType(item) }}
</div> }
} @else { </td>
<div </ng-container>
class="fa"
[class.fa-shield]="item.restricted"
[class.warn-color]="item.restricted"
nifiTooltip
[tooltipComponentType]="RestrictionsTip"
[tooltipInputData]="getRestrictionTipData(item)"></div>
{{ formatType(item) }}
}
</td>
</ng-container>
<!-- Version Column --> <!-- Version Column -->
<ng-container matColumnDef="version"> <ng-container matColumnDef="version">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Version</th> <th mat-header-cell *matHeaderCellDef mat-sort-header>Version</th>
<td mat-cell *matCellDef="let item"> <td mat-cell *matCellDef="let item">
{{ formatVersion(item) }} {{ formatVersion(item) }}
@if (implementsControllerService(item)) { @if (implementsControllerService(item)) {
<div <div
class="fa fa-list primary-color" class="fa fa-list primary-color"
nifiTooltip nifiTooltip
[tooltipComponentType]="ControllerServiceApiTip" [tooltipComponentType]="ControllerServiceApiTip"
[tooltipInputData]="getControllerServiceApiTipData(item)"></div> [tooltipInputData]="getControllerServiceApiTipData(item)"></div>
} }
</td> </td>
</ng-container> </ng-container>
<!-- Tags Column --> <!-- Tags Column -->
<ng-container matColumnDef="tags"> <ng-container matColumnDef="tags">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Tags</th> <th mat-header-cell *matHeaderCellDef mat-sort-header>Tags</th>
<td mat-cell *matCellDef="let item">{{ formatTags(item) }}</td> <td mat-cell *matCellDef="let item">{{ formatTags(item) }}</td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr <tr
mat-row mat-row
*matRowDef="let row; let even = even; columns: displayedColumns" *matRowDef="let row; let even = even; columns: displayedColumns"
(click)="selectType(row)" (click)="selectType(row)"
(dblclick)="createExtension(row)" (dblclick)="createExtension(row)"
[class.selected]="isSelected(row)" [class.selected]="isSelected(row)"
[class.even]="even"></tr> [class.even]="even"></tr>
</table> </table>
</div>
</div> </div>
</div> <div class="flex flex-col pt-3">
<div class="flex flex-col pt-3"> @if (selectedType) {
@if (selectedType) { <div class="flex items-center">
<div class="flex items-center"> <div class="selected-type-name font-medium accent-color">
<div class="selected-type-name font-medium accent-color"> {{ formatType(selectedType) }}
{{ formatType(selectedType) }} </div>
<div class="selected-type-bundle surface-color">{{ formatBundle(selectedType) }}</div>
</div> </div>
<div class="selected-type-bundle surface-color">{{ formatBundle(selectedType) }}</div> <div class="selected-type-description" [title]="formatDescription(selectedType)">
</div> {{ formatDescription(selectedType) }}
<div class="selected-type-description" [title]="formatDescription(selectedType)"> </div>
{{ formatDescription(selectedType) }} } @else {
</div> <div class="no-selected-type unset surface-color">No type selected</div>
} @else { }
<div class="no-selected-type unset surface-color">No type selected</div> </div>
}
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">

6
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
View File

@ -15,7 +15,7 @@
~ limitations under the License. ~ 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="flex justify-between items-center">
<div class="font-bold">Required field</div> <div class="font-bold">Required field</div>
@if (!isDisabled) { @if (!isDisabled) {
@ -27,8 +27,8 @@
</div> </div>
} }
</div> </div>
<div class="listing-table"> <div class="listing-table flex-1 relative">
<div class="h-96 overflow-y-auto overflow-x-hidden"> <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
<table mat-table #propertyTable [dataSource]="dataSource"> <table mat-table #propertyTable [dataSource]="dataSource">
<!-- Property Column --> <!-- Property Column -->
<ng-container matColumnDef="property"> <ng-container matColumnDef="property">

81
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
View File

@ -17,11 +17,11 @@
<h2 mat-dialog-title>Provenance Event</h2> <h2 mat-dialog-title>Provenance Event</h2>
<div class="provenance-event"> <div class="provenance-event">
<mat-dialog-content> <mat-tab-group>
<mat-tab-group> <mat-tab label="Details">
<mat-tab label="Details"> <mat-dialog-content>
<div class="tab-content py-4"> <div class="dialog-tab-content">
<div class="absolute inset-0 flex gap-x-4"> <div class="flex gap-x-4">
<div class="w-full flex flex-col gap-y-3"> <div class="w-full flex flex-col gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">
<div>Time</div> <div>Time</div>
@ -219,10 +219,12 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Attributes"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Attributes">
<div class="absolute inset-0 flex flex-col gap-y-4"> <mat-dialog-content>
<div class="dialog-tab-content">
<div class="flex flex-col gap-y-4">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="event-header font-bold primary-color">Attribute Values</div> <div class="event-header font-bold primary-color">Attribute Values</div>
<div class="flex items-center gap-x-1"> <div class="flex items-center gap-x-1">
@ -251,10 +253,12 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
<mat-tab label="Content"> </mat-tab>
<div class="tab-content py-4"> <mat-tab label="Content">
<div class="absolute inset-0 flex flex-col gap-y-4"> <mat-dialog-content>
<div class="dialog-tab-content">
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-4"> <div class="flex gap-x-4">
<div class="w-full"> <div class="w-full">
<div class="event-header font-bold primary-color">Input Claim</div> <div class="event-header font-bold primary-color">Input Claim</div>
@ -415,40 +419,41 @@
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-dialog-content>
</mat-tab-group> </mat-tab>
<ng-template #formatValue let-value let-title="title"> </mat-tab-group>
<ng-container *ngIf="value != null; else nullValue"> <ng-template #formatValue let-value let-title="title">
<ng-container *ngIf="value === ''; else nonEmptyValue"> <ng-container *ngIf="value != null; else nullValue">
<div class="unset surface-color">Empty string set</div> <ng-container *ngIf="value === ''; else nonEmptyValue">
</ng-container> <div class="unset surface-color">Empty string set</div>
<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>
</ng-container> </ng-container>
<ng-template #nullValue> <ng-template #nonEmptyValue>
<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"> <div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
{{ value }} {{ value }}
</div> </div>
<ng-template #valueWithTitle> <ng-template #valueWithTitle>
<div class="accent-color font-medium" [title]="title">{{ value }}</div> <div class="accent-color font-medium" [title]="title">{{ value }}</div>
</ng-template> </ng-template>
</ng-container>
<ng-template #nullValue>
<div class="unset surface-color">No value previously set</div>
</ng-template> </ng-template>
</ng-container>
<ng-template #nullValue>
<div class="unset surface-color">No value set</div>
</ng-template> </ng-template>
</mat-dialog-content> </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>
</ng-template>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Ok</button> <button mat-button mat-dialog-close>Ok</button>
</mat-dialog-actions> </mat-dialog-actions>

15
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
View File

@ -20,19 +20,8 @@
.provenance-event { .provenance-event {
@include mat.button-density(-1); @include mat.button-density(-1);
.mdc-dialog__content { .event-header {
padding: 0 16px; font-size: 15px;
font-size: 14px;
.tab-content {
position: relative;
height: 475px;
overflow-y: auto;
.event-header {
font-size: 15px;
}
}
} }
.mat-mdc-form-field { .mat-mdc-form-field {

4
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
View File

@ -633,7 +633,7 @@ export class StatusHistoryChart {
const marginTop: any = controlContainer.computedStyleMap().get('margin-top'); const marginTop: any = controlContainer.computedStyleMap().get('margin-top');
const statusHistory = document.getElementsByClassName('status-history')![0]; 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 descriptorContainer = document.getElementsByClassName('selected-descriptor-container')![0];
const dialogStyles: any = dialogContent.computedStyleMap(); const dialogStyles: any = dialogContent.computedStyleMap();
const bodyHeight = document.body.getBoundingClientRect().height; const bodyHeight = document.body.getBoundingClientRect().height;
@ -650,7 +650,7 @@ export class StatusHistoryChart {
private getChartMaxWidth() { private getChartMaxWidth() {
const statusHistory = document.getElementsByClassName('status-history')![0]; 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 dialogContentStyles: any = dialogContent.computedStyleMap();
const fullDialogStyles: any = statusHistory.computedStyleMap(); const fullDialogStyles: any = statusHistory.computedStyleMap();
const bodyWidth = document.body.getBoundingClientRect().width; const bodyWidth = document.body.getBoundingClientRect().width;

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

@ -27,7 +27,7 @@
<div class="status-history flex flex-col grow"> <div class="status-history flex flex-col grow">
<mat-dialog-content class="grow flex flex-1"> <mat-dialog-content class="grow flex flex-1">
<form [formGroup]="statusHistoryForm" class="flex flex-1 h-full"> <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)) { @if (isInitialLoading(statusHistoryState)) {
<div class="flex-1"> <div class="flex-1">
<ngx-skeleton-loader count="3"></ngx-skeleton-loader> <ngx-skeleton-loader count="3"></ngx-skeleton-loader>

434
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
View File

@ -19,236 +19,238 @@
<h2 mat-dialog-title>System Diagnostics</h2> <h2 mat-dialog-title>System Diagnostics</h2>
<error-banner></error-banner> <error-banner></error-banner>
<div class="system-diagnostics"> <div class="system-diagnostics">
<mat-dialog-content> <mat-tab-group>
<div class="dialog-content"> <mat-tab label="JVM">
<mat-tab-group> <mat-dialog-content>
<mat-tab label="JVM"> <div class="dialog-tab-content w-full">
<div class="tab-content py-4 h-full w-full"> <div class="flex gap-y-4">
<div class="inset-0 flex gap-y-4"> <div class="flex flex-col flex-1 gap-y-4">
<div class="flex flex-col flex-1 gap-y-4"> <section>
<section> <div class="section-header font-bold">
<div class="section-header font-bold"> Heap ({{ systemDiagnostics.heapUtilization }})
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>
<div class="flex flex-col">
<div>Total</div>
<div class="accent-color font-medium">
{{ systemDiagnostics.totalHeap }}
</div>
</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>Free</div>
<div class="accent-color font-medium">
{{ systemDiagnostics.freeHeap }}
</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 gap-y-3">
<div class="flex flex-col"> @for (gc of sortedGarbageCollections; track gc) {
<div>Max</div> <div class="flex flex-col">
<div class="accent-color font-medium"> <div>{{ gc.name }}</div>
{{ systemDiagnostics.maxHeap }} <div class="accent-color font-medium">
</div> {{ gc.collectionCount }} times ({{ gc.collectionTime }})
</div>
<div class="flex flex-col">
<div>Total</div>
<div class="accent-color font-medium">
{{ systemDiagnostics.totalHeap }}
</div>
</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>Free</div>
<div class="accent-color font-medium">
{{ systemDiagnostics.freeHeap }}
</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">
@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>
}
</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>
</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 }}
</div>
</div>
<div class="flex flex-col">
<div>Free</div>
<div class="accent-color font-medium">
{{ systemDiagnostics.freeNonHeap }}
</div>
</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>
</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 class="accent-color font-medium">
{{ systemDiagnostics.availableProcessors }}
</div>
</div>
</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 class="accent-color font-medium">
{{ formatFloat(systemDiagnostics.processorLoadAverage) }}
</div>
</div>
</div>
</div>
</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>
</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>
} }
</div> </section>
</section> </div>
<section class="flex flex-col pr-4"> <div class="flex flex-col flex-1 gap-y-4">
<div class="section-header font-bold">Provenance Repository Usage</div> <section>
<div class="repository-storage-container flex flex-col gap-y-2"> <div class="section-header font-bold">Non Heap</div>
@for (repo of systemDiagnostics.provenanceRepositoryStorageUsage; track repo) { <div class="flex flex-col gap-y-3">
<div> <div class="flex flex-col">
<div class="capitalize">Usage for {{ repo.identifier }}:</div> <div>Max</div>
<mat-progress-bar
mode="determinate"
[value]="getRepositoryStorageUsagePercent(repo)">
</mat-progress-bar>
<div class="accent-color font-medium"> <div class="accent-color font-medium">
{{ repo.utilization }} ({{ repo.usedSpace }} of {{ repo.totalSpace }}) {{ systemDiagnostics.maxNonHeap }}
</div> </div>
</div> </div>
} <div class="flex flex-col">
</div> <div>Total</div>
</section> <div class="accent-color font-medium">
</div> {{ systemDiagnostics.totalNonHeap }}
</mat-tab> </div>
<mat-tab label="Version"> </div>
<div class="tab-content py-4 h-full w-full"> <div class="flex flex-col">
<div class="inset-0 flex flex-col gap-y-4"> <div>Used</div>
<section> <div class="accent-color font-medium">
<div class="section-header font-bold">NiFi</div> {{ systemDiagnostics.usedNonHeap }}
<dl class="setting-attributes-list"> </div>
<dt class="font-bold">NiFi Version</dt> </div>
<dd>{{ systemDiagnostics.versionInfo.niFiVersion }}</dd> <div class="flex flex-col">
<dt class="font-bold">Tag</dt> <div>Free</div>
<dd>{{ systemDiagnostics.versionInfo.buildTag }}</dd> <div class="accent-color font-medium">
<dt class="font-bold">Build Date/Time</dt> {{ systemDiagnostics.freeNonHeap }}
<dd>{{ systemDiagnostics.versionInfo.buildTimestamp }}</dd> </div>
<dt class="font-bold">Branch</dt> </div>
<dd>{{ systemDiagnostics.versionInfo.buildBranch }}</dd> </div>
<dt class="font-bold">Revision</dt>
<dd>{{ systemDiagnostics.versionInfo.buildRevision }}</dd>
</dl>
</section> </section>
<section> <section>
<div class="section-header font-bold">Java</div> <div class="section-header font-bold">Runtime</div>
<dl class="setting-attributes-list"> <div class="flex flex-col gap-y-3">
<dt class="font-bold">Version</dt> <div class="flex flex-col">
<dd>{{ systemDiagnostics.versionInfo.javaVersion }}</dd> <div>Uptime</div>
<dt class="font-bold">Vendor</dt> <div class="accent-color font-medium">
<dd>{{ systemDiagnostics.versionInfo.javaVendor }}</dd> {{ systemDiagnostics.uptime }}
</dl> </div>
</section> </div>
<section> </div>
<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>
</div> </div>
</div> </div>
</mat-tab> </div>
</mat-tab-group> </mat-dialog-content>
</div> </mat-tab>
</mat-dialog-content> <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>
</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 class="accent-color font-medium">
{{ formatFloat(systemDiagnostics.processorLoadAverage) }}
</div>
</div>
</div>
</div>
</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>
</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>
</div>
</mat-dialog-content>
</mat-tab>
</mat-tab-group>
<mat-dialog-actions> <mat-dialog-actions>
<div class="flex flex-1 justify-between"> <div class="flex flex-1 justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">

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

@ -20,13 +20,8 @@
.system-diagnostics { .system-diagnostics {
@include mat.button-density(-1); @include mat.button-density(-1);
.tab-content { .section-header {
position: relative; font-size: 15px;
height: 480px;
.section-header {
font-size: 15px;
}
} }
.setting-attributes-list { .setting-attributes-list {

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

@ -73,6 +73,11 @@
cursor: pointer; cursor: pointer;
} }
.dialog-tab-content,
.dialog-content {
height: 50vh;
}
.flex-2 { .flex-2 {
display: flex; display: flex;
flex: 2; flex: 2;
@ -165,6 +170,10 @@
.mat-mdc-paginator { .mat-mdc-paginator {
background-color: unset !important; background-color: unset !important;
} }
.mdc-dialog__content {
font-size: 14px !important;
}
} }
@mixin generate-material-theme($material-theme) { @mixin generate-material-theme($material-theme) {