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-content {
.mdc-dialog__content {
padding: 0 16px;
font-size: 14px;
.panel-content {
position: relative;
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) {
<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>

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 {
@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%;
}

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>
<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) {

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 {
@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%;
}

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>
<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"

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

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>
</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"

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

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>
<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) {

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 {
@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%;
}

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">
<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) {

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 {
@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%;
}

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">
<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>

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">
<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>

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>
@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">

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 {
@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%;
}

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.
-->
<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"

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>
<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>
</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">
<button color="primary" mat-button mat-dialog-close>Ok</button>
</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 {
@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;
}
}

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>
<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) {

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 {
@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%;
}

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>
<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) {

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 {
@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%;
}

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

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 {
@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%;
}

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

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 {
@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%;
}

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>
<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) {

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 {
@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%;
}

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">
<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

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

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.
-->
<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"

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.
-->
<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"

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.
-->
<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"

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.
-->
<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"

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.
-->
<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"

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">
<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"

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>
<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>
<!-- 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 }}
<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>
}
<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>
<!-- 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>
</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) {

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 {
@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>
<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) {

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 {
@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%;
}

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 {
@include mat.button-density(-1);
.mdc-dialog__content {
padding: 0 16px;
font-size: 14px;
}
.mat-mdc-form-field {
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>
<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">

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.
-->
<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">

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>
<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>
</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">
<button mat-button mat-dialog-close>Ok</button>
</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 {
@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 {

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

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">
<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>

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>
<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 }})
<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>
<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">
<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>
</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>
@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>
}
</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 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>
</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>
</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">
{{ repo.utilization }} ({{ repo.usedSpace }} of {{ repo.totalSpace }})
{{ systemDiagnostics.maxNonHeap }}
</div>
</div>
}
</div>
</section>
</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>
<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">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>
<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>
</mat-tab>
</mat-tab-group>
</div>
</mat-dialog-content>
</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>
</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>
<div class="flex flex-1 justify-between">
<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 {
@include mat.button-density(-1);
.tab-content {
position: relative;
height: 480px;
.section-header {
font-size: 15px;
}
.section-header {
font-size: 15px;
}
.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;
}
.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) {