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

[NIFI-12822] table, border, theming updates (#8499) 

* [NIFI-12822] table, border, theming updates

* remove nifi-button and replace with mat-icon-button

* Update nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss

Co-authored-by: James Mingardi-Elliott <james-elliott@users.noreply.github.com>

* Update nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss

Co-authored-by: James Mingardi-Elliott <james-elliott@users.noreply.github.com>

* Update nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss

Co-authored-by: James Mingardi-Elliott <james-elliott@users.noreply.github.com>

* review feedback

* final touches

---------

Co-authored-by: James Mingardi-Elliott <james-elliott@users.noreply.github.com>

This closes #8499
This commit is contained in:
Scott Aslan 2024-03-14 18:13:10 -04:00 committed by GitHub
parent c093ea54b7
commit 69e7a884a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
101 changed files with 907 additions and 926 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html
View File

@ -90,14 +90,14 @@
@if (flowConfiguration.supportsConfigurableAuthorizer) { @if (flowConfiguration.supportsConfigurableAuthorizer) {
<div class="flex gap-x-2"> <div class="flex gap-x-2">
<button <button
class="nifi-button" mat-icon-button
title="Add users/groups to this policy" title="Add users/groups to this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found" [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="addTenantToPolicy()"> (click)="addTenantToPolicy()">
<i class="fa fa-user-plus"></i> <i class="fa fa-user-plus"></i>
</button> </button>
<button <button
class="nifi-button" mat-icon-button
title="Delete this policy" title="Delete this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found" [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="deletePolicy()"> (click)="deletePolicy()">
@ -119,7 +119,7 @@
} }
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshGlobalAccessPolicy()"> <button mat-icon-button (click)="refreshGlobalAccessPolicy()">
<i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.module.ts
View File

@ -27,6 +27,7 @@ import { MatSelectModule } from '@angular/material/select';
import { ComponentAccessPoliciesRoutingModule } from './component-access-policies-routing.module'; import { ComponentAccessPoliciesRoutingModule } from './component-access-policies-routing.module';
import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive'; import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
import { PolicyTable } from '../common/policy-table/policy-table.component'; import { PolicyTable } from '../common/policy-table/policy-table.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [ComponentAccessPolicies], declarations: [ComponentAccessPolicies],
@ -41,7 +42,8 @@ import { PolicyTable } from '../common/policy-table/policy-table.component';
ReactiveFormsModule, ReactiveFormsModule,
MatSelectModule, MatSelectModule,
NifiTooltipDirective, NifiTooltipDirective,
PolicyTable PolicyTable,
MatButtonModule
] ]
}) })
export class ComponentAccessPoliciesModule {} export class ComponentAccessPoliciesModule {}

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html
View File

@ -108,14 +108,14 @@
@if (flowConfiguration.supportsConfigurableAuthorizer) { @if (flowConfiguration.supportsConfigurableAuthorizer) {
<div class="flex gap-x-2 items-center"> <div class="flex gap-x-2 items-center">
<button <button
class="nifi-button" mat-icon-button
title="Add users/groups to this policy" title="Add users/groups to this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found" [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="addTenantToPolicy()"> (click)="addTenantToPolicy()">
<i class="fa fa-user-plus"></i> <i class="fa fa-user-plus"></i>
</button> </button>
<button <button
class="nifi-button" mat-icon-button
title="Delete this policy" title="Delete this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found" [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="deletePolicy()"> (click)="deletePolicy()">
@ -137,7 +137,7 @@
} }
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshGlobalAccessPolicy()"> <button mat-icon-button (click)="refreshGlobalAccessPolicy()">
<i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.module.ts
View File

@ -27,6 +27,7 @@ import { MatSelectModule } from '@angular/material/select';
import { GlobalAccessPoliciesRoutingModule } from './global-access-policies-routing.module'; import { GlobalAccessPoliciesRoutingModule } from './global-access-policies-routing.module';
import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive'; import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
import { PolicyTable } from '../common/policy-table/policy-table.component'; import { PolicyTable } from '../common/policy-table/policy-table.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [GlobalAccessPolicies], declarations: [GlobalAccessPolicies],
@ -41,7 +42,8 @@ import { PolicyTable } from '../common/policy-table/policy-table.component';
ReactiveFormsModule, ReactiveFormsModule,
MatSelectModule, MatSelectModule,
NifiTooltipDirective, NifiTooltipDirective,
PolicyTable PolicyTable,
MatButtonModule
] ]
}) })
export class GlobalAccessPoliciesModule {} export class GlobalAccessPoliciesModule {}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="bulletin-board-list overflow-y-auto absolute inset-0 border-2 p-4" #scrollContainer> <div class="overflow-y-auto absolute inset-0 border-2 p-4" #scrollContainer>
<ul class="flex flex-wrap gap-y-2"> <ul class="flex flex-wrap gap-y-2">
@for (item of bulletinBoardItems; track item) { @for (item of bulletinBoardItems; track item) {
<!-- each item can either be a BulletinEntity or BulletinBoardEvent --> <!-- each item can either be a BulletinEntity or BulletinBoardEvent -->
@ -72,7 +72,7 @@
} @else { } @else {
@if (asBulletinEvent(item); as event) { @if (asBulletinEvent(item); as event) {
<li class="w-full mt-4"> <li class="w-full mt-4">
<div class="border-b-2 flex-1 p-2"> <div class="bulletin-board-event border-b-2 flex-1 p-2">
{{ event.message }} {{ event.message }}
</div> </div>
</li> </li>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html
View File

@ -34,7 +34,7 @@
>Auto-refresh</mat-slide-toggle >Auto-refresh</mat-slide-toggle
> >
</div> </div>
<button class="nifi-button" (click)="refreshBulletinBoard(bulletinBoardState.lastBulletinId)"> <button mat-icon-button (click)="refreshBulletinBoard(bulletinBoardState.lastBulletinId)">
<i class="fa fa-refresh" [class.fa-spin]="bulletinBoardState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="bulletinBoardState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.ts
View File

@ -42,6 +42,7 @@ import { ReactiveFormsModule } from '@angular/forms';
import { BulletinBoardList } from './bulletin-board-list/bulletin-board-list.component'; import { BulletinBoardList } from './bulletin-board-list/bulletin-board-list.component';
import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
@Component({ @Component({
selector: 'bulletin-board', selector: 'bulletin-board',
@ -55,7 +56,8 @@ import { CommonModule } from '@angular/common';
ReactiveFormsModule, ReactiveFormsModule,
BulletinBoardList, BulletinBoardList,
MatSlideToggleModule, MatSlideToggleModule,
CommonModule CommonModule,
MatButtonModule
], ],
templateUrl: './bulletin-board.component.html', templateUrl: './bulletin-board.component.html',
styleUrls: ['./bulletin-board.component.scss'] styleUrls: ['./bulletin-board.component.scss']

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.html
View File

@ -32,7 +32,7 @@
} }
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshCounterListing()"> <button mat-icon-button (click)="refreshCounterListing()">
<i class="fa fa-refresh" [class.fa-spin]="counterListingState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="counterListingState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.module.ts
View File

@ -25,6 +25,7 @@ import { MatSortModule } from '@angular/material/sort';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [CounterListing, CounterTable], declarations: [CounterListing, CounterTable],
@ -36,7 +37,8 @@ import { MatSelectModule } from '@angular/material/select';
MatSortModule, MatSortModule,
MatInputModule, MatInputModule,
ReactiveFormsModule, ReactiveFormsModule,
MatSelectModule MatSelectModule,
MatButtonModule
] ]
}) })
export class CounterListingModule {} export class CounterListingModule {}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.html
View File

@ -38,7 +38,7 @@
</form> </form>
</div> </div>
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

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

@ -93,7 +93,7 @@
</div> </div>
@if ((currentUser$ | async)?.controllerPermissions?.canWrite) { @if ((currentUser$ | async)?.controllerPermissions?.canWrite) {
<div class="mt-4"> <div class="mt-4">
<button class="nifi-button" (click)="purgeHistoryClicked()"> <button mat-icon-button (click)="purgeHistoryClicked()">
<i class="fa fa-eraser"></i> <i class="fa fa-eraser"></i>
</button> </button>
</div> </div>
@ -111,7 +111,7 @@
<div class="flex justify-between align-middle"> <div class="flex justify-between align-middle">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refresh()"> <button mat-icon-button (click)="refresh()">
<i class="fa fa-refresh" [class.fa-spin]="state.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="state.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

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

@ -16,7 +16,7 @@
--> -->
<div class="flow-configuration-history-table flex-1 relative h-full w-full"> <div class="flow-configuration-history-table flex-1 relative h-full w-full">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.html
View File

@ -34,21 +34,21 @@
<div class="w-72 px-2.5 pb-2.5 flex flex-col gap-y-2"> <div class="w-72 px-2.5 pb-2.5 flex flex-col gap-y-2">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex gap-x-1"> <div class="flex gap-x-1">
<button class="nifi-button" type="button" (click)="zoomIn()"> <button mat-icon-button type="button" (click)="zoomIn()">
<i class="fa fa-search-plus"></i> <i class="fa fa-search-plus"></i>
</button> </button>
<button class="nifi-button mr-2" type="button" (click)="zoomOut()"> <button mat-icon-button class="mr-2" type="button" (click)="zoomOut()">
<i class="fa fa-search-minus"></i> <i class="fa fa-search-minus"></i>
</button> </button>
<button class="nifi-button" type="button" (click)="zoomFit()"> <button mat-icon-button type="button" (click)="zoomFit()">
<i class="ml-1 icon icon-zoom-fit"></i> <i class="ml-1 icon icon-zoom-fit"></i>
</button> </button>
<button class="nifi-button" type="button" (click)="zoomActual()"> <button mat-icon-button type="button" (click)="zoomActual()">
<i class="ml-1 icon icon-zoom-actual"></i> <i class="ml-1 icon icon-zoom-actual"></i>
</button> </button>
</div> </div>
@if (isNotRootGroup()) { @if (isNotRootGroup()) {
<button class="nifi-button" type="button" (click)="leaveProcessGroup()"> <button mat-icon-button type="button" (click)="leaveProcessGroup()">
<i class="fa fa-level-up"></i> <i class="fa fa-level-up"></i>
</button> </button>
} }

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss
View File

@ -18,9 +18,9 @@
div.navigation-control { div.navigation-control {
margin-bottom: 2px; margin-bottom: 2px;
.fa, .mat-mdc-icon-button {
.icon { --mdc-icon-button-state-layer-size: 34px;
font-size: 18px; --mdc-icon-button-icon-size: 17px;
} }
.navigation-control-header { .navigation-control-header {

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.ts
View File

@ -25,12 +25,13 @@ import { initialState } from '../../../../state/flow/flow.reducer';
import { Storage } from '../../../../../../service/storage.service'; import { Storage } from '../../../../../../service/storage.service';
import { Birdseye } from './birdseye/birdseye.component'; import { Birdseye } from './birdseye/birdseye.component';
import { MatButtonModule } from '@angular/material/button';
@Component({ @Component({
selector: 'navigation-control', selector: 'navigation-control',
standalone: true, standalone: true,
templateUrl: './navigation-control.component.html', templateUrl: './navigation-control.component.html',
imports: [Birdseye], imports: [Birdseye, MatButtonModule],
styleUrls: ['./navigation-control.component.scss'] styleUrls: ['./navigation-control.component.scss']
}) })
export class NavigationControl { export class NavigationControl {

27
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html
View File

@ -48,7 +48,7 @@
<div class="flex flex-col gap-y-1"> <div class="flex flex-col gap-y-1">
<div class="flex gap-x-1"> <div class="flex gap-x-1">
<button <button
class="nifi-button" mat-icon-button
type="button" type="button"
[disabled]="!canConfigure(selection)" [disabled]="!canConfigure(selection)"
(click)="configure(selection)"> (click)="configure(selection)">
@ -56,7 +56,8 @@
</button> </button>
@if (supportsManagedAuthorizer()) { @if (supportsManagedAuthorizer()) {
<button <button
class="nifi-button mr-2" mat-icon-button
class="mr-2"
type="button" type="button"
[disabled]="!canManageAccess(selection)" [disabled]="!canManageAccess(selection)"
(click)="manageAccess(selection)"> (click)="manageAccess(selection)">
@ -64,28 +65,29 @@
</button> </button>
} }
<button <button
class="nifi-button" mat-icon-button
type="button" type="button"
[disabled]="!canEnable(selection)" [disabled]="!canEnable(selection)"
(click)="enable(selection)"> (click)="enable(selection)">
<i class="fa fa-flash"></i> <i class="fa fa-flash"></i>
</button> </button>
<button <button
class="nifi-button mr-2" mat-icon-button
class="mr-2"
type="button" type="button"
[disabled]="!canDisable(selection)" [disabled]="!canDisable(selection)"
(click)="disable(selection)"> (click)="disable(selection)">
<i class="ml-1 icon icon-enable-false"></i> <i class="ml-1 icon icon-enable-false"></i>
</button> </button>
<button <button
class="nifi-button" mat-icon-button
type="button" type="button"
[disabled]="!canStart(selection)" [disabled]="!canStart(selection)"
(click)="start(selection)"> (click)="start(selection)">
<i class="fa fa-play"></i> <i class="fa fa-play"></i>
</button> </button>
<button <button
class="nifi-button" mat-icon-button
type="button" type="button"
[disabled]="!canStop(selection)" [disabled]="!canStop(selection)"
(click)="stop(selection)"> (click)="stop(selection)">
@ -94,35 +96,38 @@
</div> </div>
<div class="flex gap-x-1"> <div class="flex gap-x-1">
<button <button
class="nifi-button" mat-icon-button
type="button" type="button"
[disabled]="!canCopy(selection)" [disabled]="!canCopy(selection)"
(click)="copy(selection)"> (click)="copy(selection)">
<i class="fa fa-copy"></i> <i class="fa fa-copy"></i>
</button> </button>
<button <button
class="nifi-button mr-2" mat-icon-button
class="mr-2"
type="button" type="button"
[disabled]="!canPaste(selection)" [disabled]="!canPaste(selection)"
(click)="paste(selection)"> (click)="paste(selection)">
<i class="fa fa-paste"></i> <i class="fa fa-paste"></i>
</button> </button>
<button <button
class="nifi-button mr-2" mat-icon-button
class="mr-2"
type="button" type="button"
[disabled]="!canGroup(selection)" [disabled]="!canGroup(selection)"
(click)="group(selection)"> (click)="group(selection)">
<i class="ml-1 icon icon-group"></i> <i class="ml-1 icon icon-group"></i>
</button> </button>
<button <button
class="nifi-button mr-2" mat-icon-button
class="mr-2"
type="button" type="button"
[disabled]="!canColor(selection)" [disabled]="!canColor(selection)"
(click)="color(selection)"> (click)="color(selection)">
<i class="fa fa-paint-brush"></i> <i class="fa fa-paint-brush"></i>
</button> </button>
<button <button
class="nifi-button" mat-icon-button
type="button" type="button"
[disabled]="!canDelete(selection)" [disabled]="!canDelete(selection)"
(click)="delete(selection)"> (click)="delete(selection)">

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss
View File

@ -18,9 +18,9 @@
div.operation-control { div.operation-control {
margin-bottom: 2px; margin-bottom: 2px;
.fa, .mat-mdc-icon-button {
.icon { --mdc-icon-button-state-layer-size: 34px;
font-size: 18px; --mdc-icon-button-icon-size: 17px;
} }
.operation-control-header { .operation-control-header {

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.ts
View File

@ -42,12 +42,13 @@ import {
import { BreadcrumbEntity } from '../../../../state/shared'; import { BreadcrumbEntity } from '../../../../state/shared';
import { ComponentType } from '../../../../../../state/shared'; import { ComponentType } from '../../../../../../state/shared';
import { MatButtonModule } from '@angular/material/button';
@Component({ @Component({
selector: 'operation-control', selector: 'operation-control',
standalone: true, standalone: true,
templateUrl: './operation-control.component.html', templateUrl: './operation-control.component.html',
imports: [], imports: [MatButtonModule],
styleUrls: ['./operation-control.component.scss'] styleUrls: ['./operation-control.component.scss']
}) })
export class OperationControl { export class OperationControl {

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
View File

@ -36,12 +36,12 @@
$on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
// Use the same logic as _navigation.component-theme.scss to determine the bg color for hover // Use the same logic as _navigation.component-theme.scss to determine the bg color for hover
$hover-bg: mat.get-color-from-palette($primary-palette, "navbar"); $hover-bg: mat.get-color-from-palette($primary-palette, 'navbar');
@if ($hover-bg) { @if ($hover-bg) {
// Nothing to do here, we have special color from the palette. // Nothing to do here, we have special color from the palette.
} @else { } @else {
// There was not a special value set for the navbar, so we use Angular Material behavior. // There was not a special value set for the navbar, so we use Angular Material behavior.
$hover-bg: mat.get-color-from-palette($primary-palette, "default"); $hover-bg: mat.get-color-from-palette($primary-palette, 'default');
} }
.new-canvas-item { .new-canvas-item {
@ -63,6 +63,7 @@
); );
} }
} }
&.cdk-drag-dragging { &.cdk-drag-dragging {
color: utils.get-color-on-surface($color-config, $surface-darker); color: utils.get-color-on-surface($color-config, $surface-darker);
mix-blend-mode: difference; // Make sure the dragged icon is always visible mix-blend-mode: difference; // Make sure the dragged icon is always visible

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
View File

@ -19,7 +19,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../../assets/utils.scss' as utils; @use '../../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
$canvas-color-config: mat.get-color-config($canvas-theme); $canvas-color-config: mat.get-color-config($canvas-theme);
@ -30,8 +30,6 @@
$on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
.search-container { .search-container {
border-left: 1px solid $on-surface-lighter;
&:hover, &:hover,
&.open { &.open {
background-color: $surface; background-color: $surface;

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
View File

@ -30,7 +30,6 @@
// Get hues from palette // Get hues from palette
$primary-palette-default: mat.get-color-from-palette($primary-palette, default); $primary-palette-default: mat.get-color-from-palette($primary-palette, default);
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200);
$canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
$surface: utils.get-surface($canvas-color-config); $surface: utils.get-surface($canvas-color-config);
$on-surface: utils.get-on-surface($canvas-color-config); $on-surface: utils.get-on-surface($canvas-color-config);
@ -39,22 +38,11 @@
.prioritizers { .prioritizers {
.prioritizers-list { .prioritizers-list {
background: $primary-palette-default; background: $primary-palette-default;
border: solid 1px $canvas-primary-palette-500;
.cdk-drag-disabled {
background: $on-surface-lighter;
}
} }
.prioritizer-draggable-item { .prioritizer-draggable-item {
border-bottom: solid 1px $canvas-primary-palette-500;
color: $on-surface; color: $on-surface;
background: $surface; background: $surface;
} }
.cdk-drag-preview {
box-shadow: 0 3px 6px $canvas-primary-palette-A200;
}
} }
} }

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
View File

@ -19,14 +19,14 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div>Available Prioritizers</div> <div>Available Prioritizers</div>
<div <div
class="prioritizers-list" class="prioritizers-list border"
cdkDropList cdkDropList
cdkDropListSortingDisabled cdkDropListSortingDisabled
[cdkDropListDisabled]="isDisabled" [cdkDropListDisabled]="isDisabled"
[cdkDropListData]="availablePrioritizers" [cdkDropListData]="availablePrioritizers"
(cdkDropListDropped)="dropAvailable($event)"> (cdkDropListDropped)="dropAvailable($event)">
@for (item of availablePrioritizers; track item; let i = $index) { @for (item of availablePrioritizers; track item; let i = $index) {
<div class="prioritizer-draggable-item" cdkDrag cdkDragPreviewContainer="parent"> <div class="prioritizer-draggable-item border-b m-1" cdkDrag cdkDragPreviewContainer="parent">
<ng-container <ng-container
*ngTemplateOutlet=" *ngTemplateOutlet="
prioritizerItem; prioritizerItem;
@ -39,13 +39,13 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div>Selected Prioritizers</div> <div>Selected Prioritizers</div>
<div <div
class="prioritizers-list" class="prioritizers-list border"
cdkDropList cdkDropList
[cdkDropListDisabled]="isDisabled" [cdkDropListDisabled]="isDisabled"
[cdkDropListData]="selectedPrioritizers" [cdkDropListData]="selectedPrioritizers"
(cdkDropListDropped)="dropSelected($event)"> (cdkDropListDropped)="dropSelected($event)">
@for (item of selectedPrioritizers; track item; let i = $index) { @for (item of selectedPrioritizers; track item; let i = $index) {
<div class="prioritizer-draggable-item" cdkDrag cdkDragPreviewContainer="parent"> <div class="prioritizer-draggable-item border-b m-1" cdkDrag cdkDragPreviewContainer="parent">
<ng-container <ng-container
*ngTemplateOutlet=" *ngTemplateOutlet="
prioritizerItem; prioritizerItem;

19
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
View File

@ -17,14 +17,10 @@
.prioritizers { .prioritizers {
.prioritizers-list { .prioritizers-list {
min-height: 66px; min-height: 74px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
display: block; display: block;
.cdk-drag-disabled {
cursor: not-allowed;
}
} }
.prioritizer-draggable-item { .prioritizer-draggable-item {
@ -41,17 +37,4 @@
border: none; border: none;
} }
} }
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drop-list-dragging {
cursor: grabbing;
}
} }

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

@ -95,7 +95,7 @@
<div class="value">{{ selectedFlowDescription || 'No description provided' }}</div> <div class="value">{{ selectedFlowDescription || 'No description provided' }}</div>
</div> </div>
<div class="listing-table"> <div class="listing-table">
<div class="h-48 overflow-y-auto overflow-x-hidden border"> <div class="h-48 overflow-y-auto overflow-x-hidden">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html
View File

@ -32,7 +32,7 @@
<breadcrumbs <breadcrumbs
[entity]="serviceState.breadcrumb" [entity]="serviceState.breadcrumb"
[currentProcessGroupId]="serviceState.processGroupId"></breadcrumbs> [currentProcessGroupId]="serviceState.processGroupId"></breadcrumbs>
<button class="nifi-button" (click)="openNewControllerServiceDialog()"> <button mat-icon-button (click)="openNewControllerServiceDialog()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
</div> </div>
@ -57,7 +57,7 @@
} }
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshControllerServiceListing()"> <button mat-icon-button (click)="refreshControllerServiceListing()">
<i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.module.ts
View File

@ -23,6 +23,7 @@ import { ControllerServiceTable } from '../../../../ui/common/controller-service
import { ControllerServicesRoutingModule } from './controller-services-routing.module'; import { ControllerServicesRoutingModule } from './controller-services-routing.module';
import { Breadcrumbs } from '../common/breadcrumbs/breadcrumbs.component'; import { Breadcrumbs } from '../common/breadcrumbs/breadcrumbs.component';
import { Navigation } from '../../../../ui/common/navigation/navigation.component'; import { Navigation } from '../../../../ui/common/navigation/navigation.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [ControllerServices], declarations: [ControllerServices],
@ -33,7 +34,8 @@ import { Navigation } from '../../../../ui/common/navigation/navigation.componen
ControllerServicesRoutingModule, ControllerServicesRoutingModule,
ControllerServiceTable, ControllerServiceTable,
Breadcrumbs, Breadcrumbs,
Navigation Navigation,
MatButtonModule
] ]
}) })
export class ControllerServicesModule {} export class ControllerServicesModule {}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
View File

@ -51,7 +51,7 @@
} @else { } @else {
<div class="flex flex-col h-full gap-y-2"> <div class="flex flex-col h-full gap-y-2">
<div class="flex-1"> <div class="flex-1">
<div class="manage-remote-ports-table relative h-full border"> <div class="manage-remote-ports-table relative h-full">
<div class="listing-table absolute inset-0 overflow-y-auto"> <div class="listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table
@ -226,7 +226,7 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshManageRemotePortsListing()"> <button mat-icon-button (click)="refreshManageRemotePortsListing()">
<i class="fa fa-refresh" [class.fa-spin]="portsState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="portsState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.module.ts
View File

@ -31,6 +31,7 @@ import { EffectsModule } from '@ngrx/effects';
import { ManageRemotePortsEffects } from '../../state/manage-remote-ports/manage-remote-ports.effects'; import { ManageRemotePortsEffects } from '../../state/manage-remote-ports/manage-remote-ports.effects';
import { remotePortsFeatureKey } from '../../state/manage-remote-ports'; import { remotePortsFeatureKey } from '../../state/manage-remote-ports';
import { manageRemotePortsReducer } from '../../state/manage-remote-ports/manage-remote-ports.reducer'; import { manageRemotePortsReducer } from '../../state/manage-remote-ports/manage-remote-ports.reducer';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [ManageRemotePorts], declarations: [ManageRemotePorts],
@ -46,7 +47,8 @@ import { manageRemotePortsReducer } from '../../state/manage-remote-ports/manage
Navigation, Navigation,
MatTableModule, MatTableModule,
MatSortModule, MatSortModule,
NifiTooltipDirective NifiTooltipDirective,
MatButtonModule
] ]
}) })
export class ManageRemotePortsModule {} export class ManageRemotePortsModule {}

14
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
View File

@ -30,32 +30,18 @@
// Get hues from palette // Get hues from palette
$primary-palette-default: mat.get-color-from-palette($primary-palette, default); $primary-palette-default: mat.get-color-from-palette($primary-palette, default);
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200);
$canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
$surface: utils.get-surface($canvas-color-config); $surface: utils.get-surface($canvas-color-config);
$on-surface: utils.get-on-surface($canvas-color-config); $on-surface: utils.get-on-surface($canvas-color-config);
$on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
.parameter-context-inheritance { .parameter-context-inheritance {
.parameter-context-inheritance-list { .parameter-context-inheritance-list {
background: $primary-palette-default; background: $primary-palette-default;
border: solid 1px $canvas-primary-palette-500;
.cdk-drag-disabled {
background: $on-surface-lighter;
}
} }
.parameter-context-draggable-item { .parameter-context-draggable-item {
border-bottom: solid 1px $canvas-primary-palette-500;
color: $on-surface; color: $on-surface;
background: $surface; background: $surface;
} }
.cdk-drag-preview {
box-shadow: 0 3px 6px $canvas-primary-palette-A200;
}
} }
} }

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

@ -19,7 +19,7 @@
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div>Available Parameter Contexts</div> <div>Available Parameter Contexts</div>
<div <div
class="parameter-context-inheritance-list" class="parameter-context-inheritance-list border"
cdkDropList cdkDropList
cdkDropListSortingDisabled cdkDropListSortingDisabled
[cdkDropListDisabled]="isDisabled" [cdkDropListDisabled]="isDisabled"
@ -27,7 +27,7 @@
(cdkDropListDropped)="dropAvailable($event)"> (cdkDropListDropped)="dropAvailable($event)">
@for (item of availableParameterContexts; track item; let i = $index) { @for (item of availableParameterContexts; track item; let i = $index) {
<div <div
class="parameter-context-draggable-item" class="parameter-context-draggable-item border-b m-1"
cdkDrag cdkDrag
cdkDragPreviewContainer="parent" cdkDragPreviewContainer="parent"
[cdkDragDisabled]="!item.permissions.canRead"> [cdkDragDisabled]="!item.permissions.canRead">
@ -45,14 +45,14 @@
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div>Selected Parameter Contexts</div> <div>Selected Parameter Contexts</div>
<div <div
class="parameter-context-inheritance-list" class="parameter-context-inheritance-list border"
cdkDropList cdkDropList
[cdkDropListDisabled]="isDisabled" [cdkDropListDisabled]="isDisabled"
[cdkDropListData]="selectedParameterContexts" [cdkDropListData]="selectedParameterContexts"
(cdkDropListDropped)="dropSelected($event)"> (cdkDropListDropped)="dropSelected($event)">
@for (item of selectedParameterContexts; track item; let i = $index) { @for (item of selectedParameterContexts; track item; let i = $index) {
<div <div
class="parameter-context-draggable-item" class="parameter-context-draggable-item border-b m-1"
cdkDrag cdkDrag
cdkDragPreviewContainer="parent" cdkDragPreviewContainer="parent"
[cdkDragDisabled]="!item.permissions.canRead"> [cdkDragDisabled]="!item.permissions.canRead">

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

@ -17,14 +17,10 @@
.parameter-context-inheritance { .parameter-context-inheritance {
.parameter-context-inheritance-list { .parameter-context-inheritance-list {
min-height: 66px; min-height: 74px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
display: block; display: block;
.cdk-drag-disabled {
cursor: not-allowed;
}
} }
.parameter-context-draggable-item { .parameter-context-draggable-item {
@ -41,17 +37,4 @@
border: none; border: none;
} }
} }
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drop-list-dragging {
cursor: grabbing;
}
} }

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

@ -23,7 +23,7 @@
} @else { } @else {
<div class="flex flex-col h-full gap-y-2"> <div class="flex flex-col h-full gap-y-2">
<div class="flex justify-end"> <div class="flex justify-end">
<button class="nifi-button" (click)="openNewParameterContextDialog()"> <button mat-icon-button (click)="openNewParameterContextDialog()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
</div> </div>
@ -39,7 +39,7 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshParameterContextListing()"> <button mat-icon-button (click)="refreshParameterContextListing()">
<i <i
class="fa fa-refresh" class="fa fa-refresh"
[class.fa-spin]="parameterContextListingState.status === 'loading'"></i> [class.fa-spin]="parameterContextListingState.status === 'loading'"></i>

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

@ -25,6 +25,7 @@ import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-toolti
import { ParameterContextTable } from './parameter-context-table/parameter-context-table.component'; import { ParameterContextTable } from './parameter-context-table/parameter-context-table.component';
import { MatDialogModule } from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
import { RouterLink } from '@angular/router'; import { RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [ParameterContextListing, ParameterContextTable], declarations: [ParameterContextListing, ParameterContextTable],
@ -36,7 +37,8 @@ import { RouterLink } from '@angular/router';
MatTableModule, MatTableModule,
MatDialogModule, MatDialogModule,
NifiTooltipDirective, NifiTooltipDirective,
RouterLink RouterLink,
MatButtonModule
] ]
}) })
export class ParameterContextListingModule {} export class ParameterContextListingModule {}

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

@ -15,7 +15,7 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="relative h-full border"> <div class="relative h-full">
<div class="listing-table absolute inset-0 overflow-y-auto"> <div class="listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table

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

@ -15,114 +15,116 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="parameter-table listing-table flex gap-x-3"> <div class="parameter-table flex gap-x-3">
<div class="flex flex-col gap-y-3" style="flex-grow: 3"> <div class="flex flex-col gap-y-3">
@if (canAddParameters) { @if (canAddParameters) {
<div class="flex justify-end items-center"> <div class="flex justify-end items-center">
<button class="nifi-button" type="button" (click)="newParameterClicked()"> <button mat-icon-button type="button" (click)="newParameterClicked()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
</div> </div>
} }
<div class="h-96 overflow-y-auto overflow-x-hidden border"> <div class="listing-table">
<table mat-table [dataSource]="dataSource"> <div class="h-96 overflow-y-auto overflow-x-hidden">
<!-- Name Column --> <table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name"> <!-- Name Column -->
<th mat-header-cell *matHeaderCellDef>Name</th> <ng-container matColumnDef="name">
<td mat-cell *matCellDef="let item"> <th mat-header-cell *matHeaderCellDef>Name</th>
<div class="flex justify-between items-center"> <td mat-cell *matCellDef="let item">
<div> <div class="flex justify-between items-center">
{{ item.entity.parameter.name }} <div>
</div> {{ item.entity.parameter.name }}
<div> </div>
@if (hasDescription(item)) { <div>
<div @if (hasDescription(item)) {
class="fa fa-question-circle"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getDescriptionTipData(item)"></div>
}
</div>
</div>
</td>
</ng-container>
<!-- Value Column -->
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let item">
@if (isNull(item.entity.parameter.value)) {
<div class="unset">No value set</div>
} @else {
<ng-container
*ngTemplateOutlet="
isSensitiveParameter(item) ? sensitive : nonSensitive;
context: { $implicit: item.entity.parameter.value }
"></ng-container>
<ng-template #sensitive>
<div class="sensitive">Sensitive value set</div>
</ng-template>
<ng-template #nonSensitive let-value>
<ng-container
*ngTemplateOutlet="
isEmptyString(value) ? blank : nonBlank;
context: { $implicit: value }
"></ng-container>
</ng-template>
<ng-template #blank>
<div class="empty">Empty string set</div>
</ng-template>
<ng-template #nonBlank let-value>
<div class="flex justify-between items-center">
<div class="whitespace-nowrap overflow-hidden text-ellipsis">
{{ value }}
</div>
@if (hasExtraWhitespace(value)) {
<div <div
class="fa fa-info" class="fa fa-question-circle"
nifiTooltip nifiTooltip
[tooltipComponentType]="TextTip" [tooltipComponentType]="TextTip"
[tooltipInputData]="getExtraWhitespaceTipData()"></div> [tooltipInputData]="getDescriptionTipData(item)"></div>
} }
</div> </div>
</ng-template> </div>
} </td>
</td> </ng-container>
</ng-container>
<!-- Actions Column --> <!-- Value Column -->
<ng-container matColumnDef="actions"> <ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let item"> <td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3"> @if (isNull(item.entity.parameter.value)) {
@if (canGoToParameter(item)) { <div class="unset">No value set</div>
<div } @else {
class="pointer fa fa-long-arrow-right" <ng-container
[routerLink]="getParameterLink(item)" *ngTemplateOutlet="
mat-dialog-close="ROUTED" isSensitiveParameter(item) ? sensitive : nonSensitive;
title="Go to"></div> context: { $implicit: item.entity.parameter.value }
"></ng-container>
<ng-template #sensitive>
<div class="sensitive">Sensitive value set</div>
</ng-template>
<ng-template #nonSensitive let-value>
<ng-container
*ngTemplateOutlet="
isEmptyString(value) ? blank : nonBlank;
context: { $implicit: value }
"></ng-container>
</ng-template>
<ng-template #blank>
<div class="empty">Empty string set</div>
</ng-template>
<ng-template #nonBlank let-value>
<div class="flex justify-between items-center">
<div class="whitespace-nowrap overflow-hidden text-ellipsis">
{{ value }}
</div>
@if (hasExtraWhitespace(value)) {
<div
class="fa fa-info"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getExtraWhitespaceTipData()"></div>
}
</div>
</ng-template>
} }
@if (canEdit(item)) { </td>
<div class="pointer fa fa-pencil" (click)="editClicked(item)" title="Edit"></div> </ng-container>
}
@if (canDelete(item)) {
<div class="pointer fa fa-trash" (click)="deleteClicked(item)" title="Delete"></div>
}
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> <!-- Actions Column -->
<tr <ng-container matColumnDef="actions">
mat-row <th mat-header-cell *matHeaderCellDef></th>
*matRowDef="let row; let even = even; columns: displayedColumns" <td mat-cell *matCellDef="let item">
(click)="selectParameter(row)" <div class="flex items-center gap-x-3">
[class.selected]="isSelected(row)" @if (canGoToParameter(item)) {
[class.even]="even"></tr> <div
</table> class="pointer fa fa-long-arrow-right"
[routerLink]="getParameterLink(item)"
mat-dialog-close="ROUTED"
title="Go to"></div>
}
@if (canEdit(item)) {
<div class="pointer fa fa-pencil" (click)="editClicked(item)" title="Edit"></div>
}
@if (canDelete(item)) {
<div class="pointer fa fa-trash" (click)="deleteClicked(item)" title="Delete"></div>
}
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr
mat-row
*matRowDef="let row; let even = even; columns: displayedColumns"
(click)="selectParameter(row)"
[class.selected]="isSelected(row)"
[class.even]="even"></tr>
</table>
</div>
</div> </div>
</div> </div>
<div class="flex flex-col justify-between gap-y-3" style="flex-grow: 1"> <div class="flex flex-col justify-between gap-y-3 w-full">
<div class="flex flex-col"> <div class="flex flex-col">
<div>Parameter</div> <div>Parameter</div>
<div class="value"> <div class="value">

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

@ -17,20 +17,15 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
.parameter-table.listing-table { .parameter-table {
@include mat.table-density(-4); .listing-table {
min-width: 740px; @include mat.table-density(-4);
width: 506px;
table { table {
width: auto; .mat-column-actions {
width: 75px;
td, }
th {
cursor: default;
}
.mat-column-actions {
width: 75px;
} }
} }
} }

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.html
View File

@ -55,14 +55,14 @@
</div> </div>
</form> </form>
<div class="flex flex-col justify-center"> <div class="flex flex-col justify-center">
<button class="nifi-button" (click)="searchClicked()"> <button mat-icon-button (click)="searchClicked()">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 relative -mt-4"> <div class="flex-1 relative -mt-4">
<div class="listing-table border absolute inset-0 overflow-y-auto"> <div class="listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"
@ -171,7 +171,7 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshClicked()"> <button mat-icon-button (click)="refreshClicked()">
<i class="fa fa-refresh" [class.fa-spin]="loading"></i> <i class="fa fa-refresh" [class.fa-spin]="loading"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.ts
View File

@ -40,6 +40,7 @@ import { MatSliderModule } from '@angular/material/slider';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ErrorBanner } from '../../../../../ui/common/error-banner/error-banner.component'; import { ErrorBanner } from '../../../../../ui/common/error-banner/error-banner.component';
import { ClusterSummary } from '../../../../../state/cluster-summary'; import { ClusterSummary } from '../../../../../state/cluster-summary';
import { MatButtonModule } from '@angular/material/button';
@Component({ @Component({
selector: 'provenance-event-table', selector: 'provenance-event-table',
@ -59,7 +60,8 @@ import { ClusterSummary } from '../../../../../state/cluster-summary';
MatPaginatorModule, MatPaginatorModule,
LineageComponent, LineageComponent,
MatSliderModule, MatSliderModule,
ErrorBanner ErrorBanner,
MatButtonModule
], ],
styleUrls: ['./provenance-event-table.component.scss'] styleUrls: ['./provenance-event-table.component.scss']
}) })

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.html
View File

@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table border absolute inset-0 overflow-y-auto"> <div class="listing-table absolute inset-0 overflow-y-auto">
<table mat-table [dataSource]="dataSource"> <table mat-table [dataSource]="dataSource">
<!-- More Details Column --> <!-- More Details Column -->
<ng-container matColumnDef="moreDetails"> <ng-container matColumnDef="moreDetails">

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

@ -36,7 +36,7 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshClicked()"> <button mat-icon-button (click)="refreshClicked()">
<i class="fa fa-refresh" [class.fa-spin]="status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.module.ts
View File

@ -27,6 +27,7 @@ import { EffectsModule } from '@ngrx/effects';
import { queueFeatureKey, reducers } from '../../state'; import { queueFeatureKey, reducers } from '../../state';
import { QueueListingEffects } from '../../state/queue-listing/queue-listing.effects'; import { QueueListingEffects } from '../../state/queue-listing/queue-listing.effects';
import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component'; import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [QueueListing], declarations: [QueueListing],
@ -39,7 +40,8 @@ import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.com
FlowFileTable, FlowFileTable,
StoreModule.forFeature(queueFeatureKey, reducers), StoreModule.forFeature(queueFeatureKey, reducers),
EffectsModule.forFeature(QueueListingEffects), EffectsModule.forFeature(QueueListingEffects),
ErrorBanner ErrorBanner,
MatButtonModule
] ]
}) })
export class QueueListingModule {} export class QueueListingModule {}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.html
View File

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

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.scss
View File

@ -15,10 +15,12 @@
* limitations under the License. * limitations under the License.
*/ */
.flow-analysis-rule-table.listing-table { .flow-analysis-rule-table {
table { .listing-table {
.mat-column-moreDetails { table {
min-width: 100px; .mat-column-moreDetails {
min-width: 100px;
}
} }
} }
} }

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.component.html
View File

@ -25,7 +25,7 @@
<div class="flex flex-col h-full gap-y-2"> <div class="flex flex-col h-full gap-y-2">
@if (currentUser.controllerPermissions.canWrite) { @if (currentUser.controllerPermissions.canWrite) {
<div class="flex justify-end"> <div class="flex justify-end">
<button class="nifi-button" (click)="openNewFlowAnalysisRuleDialog()"> <button mat-icon-button (click)="openNewFlowAnalysisRuleDialog()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
</div> </div>
@ -45,7 +45,7 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshFlowAnalysisRuleListing()"> <button mat-icon-button (click)="refreshFlowAnalysisRuleListing()">
<i class="fa fa-refresh" [class.fa-spin]="flowAnalysisRuleState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="flowAnalysisRuleState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.module.ts
View File

@ -24,6 +24,7 @@ import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table'; import { MatTableModule } from '@angular/material/table';
import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive'; import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
import { PropertyTable } from '../../../../ui/common/property-table/property-table.component'; import { PropertyTable } from '../../../../ui/common/property-table/property-table.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [FlowAnalysisRules], declarations: [FlowAnalysisRules],
@ -35,7 +36,8 @@ import { PropertyTable } from '../../../../ui/common/property-table/property-tab
MatTableModule, MatTableModule,
NifiTooltipDirective, NifiTooltipDirective,
FlowAnalysisRuleTable, FlowAnalysisRuleTable,
PropertyTable PropertyTable,
MatButtonModule
] ]
}) })
export class FlowAnalysisRulesModule {} export class FlowAnalysisRulesModule {}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.component.html
View File

@ -25,7 +25,7 @@
<div class="flex flex-col h-full gap-y-2"> <div class="flex flex-col h-full gap-y-2">
@if (currentUser.controllerPermissions.canWrite) { @if (currentUser.controllerPermissions.canWrite) {
<div class="flex justify-end"> <div class="flex justify-end">
<button class="nifi-button" (click)="openNewControllerServiceDialog()"> <button mat-icon-button (click)="openNewControllerServiceDialog()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
</div> </div>
@ -49,7 +49,7 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshControllerServiceListing()"> <button mat-icon-button (click)="refreshControllerServiceListing()">
<i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.module.ts
View File

@ -21,10 +21,11 @@ import { ManagementControllerServices } from './management-controller-services.c
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { ControllerServiceTable } from '../../../../ui/common/controller-service/controller-service-table/controller-service-table.component'; import { ControllerServiceTable } from '../../../../ui/common/controller-service/controller-service-table/controller-service-table.component';
import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component'; import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [ManagementControllerServices], declarations: [ManagementControllerServices],
exports: [ManagementControllerServices], exports: [ManagementControllerServices],
imports: [CommonModule, NgxSkeletonLoaderModule, ControllerServiceTable, ErrorBanner] imports: [CommonModule, NgxSkeletonLoaderModule, ControllerServiceTable, ErrorBanner, MatButtonModule]
}) })
export class ManagementControllerServicesModule {} export class ManagementControllerServicesModule {}

2
nifi-nar-bundles/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

@ -202,7 +202,7 @@
</div> </div>
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="getParameterMappingDataSource(parameterGroupConfig)" [dataSource]="getParameterMappingDataSource(parameterGroupConfig)"

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
View File

@ -17,7 +17,7 @@
<div class="parameter-group-table h-full flex flex-col"> <div class="parameter-group-table h-full flex flex-col">
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="parameterGroupsDataSource" [dataSource]="parameterGroupsDataSource"

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

@ -18,7 +18,7 @@
<ng-container> <ng-container>
<div class="parameter-providers-table h-full flex flex-col"> <div class="parameter-providers-table h-full flex flex-col">
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

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

@ -26,7 +26,7 @@
@if (currentUser.controllerPermissions.canWrite) { @if (currentUser.controllerPermissions.canWrite) {
<div class="flex justify-end"> <div class="flex justify-end">
<button <button
class="nifi-button" mat-icon-button
(click)="openNewParameterProviderDialog()" (click)="openNewParameterProviderDialog()"
title="Add a new parameter provider"> title="Add a new parameter provider">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
@ -47,7 +47,7 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshParameterProvidersListing()"> <button mat-icon-button (click)="refreshParameterProvidersListing()">
<i class="fa fa-refresh" [class.fa-spin]="parameterProvidersState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="parameterProvidersState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.module.ts
View File

@ -20,10 +20,11 @@ import { CommonModule } from '@angular/common';
import { ParameterProviders } from './parameter-providers.component'; import { ParameterProviders } from './parameter-providers.component';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { ParameterProvidersTable } from './parameter-providers-table/parameter-providers-table.component'; import { ParameterProvidersTable } from './parameter-providers-table/parameter-providers-table.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [ParameterProviders], declarations: [ParameterProviders],
exports: [ParameterProviders], exports: [ParameterProviders],
imports: [CommonModule, NgxSkeletonLoaderModule, ParameterProvidersTable] imports: [CommonModule, NgxSkeletonLoaderModule, ParameterProvidersTable, MatButtonModule]
}) })
export class ParameterProvidersModule {} export class ParameterProvidersModule {}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
View File

@ -15,7 +15,7 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="relative h-full border"> <div class="relative h-full">
<div class="registry-client-table listing-table absolute inset-0 overflow-y-auto"> <div class="registry-client-table listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.component.html
View File

@ -25,7 +25,7 @@
<div class="flex flex-col h-full gap-y-2"> <div class="flex flex-col h-full gap-y-2">
@if (currentUser.controllerPermissions.canWrite) { @if (currentUser.controllerPermissions.canWrite) {
<div class="flex justify-end"> <div class="flex justify-end">
<button class="nifi-button" (click)="openNewRegistryClientDialog()"> <button mat-icon-button (click)="openNewRegistryClientDialog()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
</div> </div>
@ -40,7 +40,7 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshRegistryClientListing()"> <button mat-icon-button (click)="refreshRegistryClientListing()">
<i class="fa fa-refresh" [class.fa-spin]="registryClientState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="registryClientState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.module.ts
View File

@ -23,10 +23,18 @@ import { RegistryClientTable } from './registry-client-table/registry-client-tab
import { MatTableModule } from '@angular/material/table'; import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort'; import { MatSortModule } from '@angular/material/sort';
import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive'; import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [RegistryClients, RegistryClientTable], declarations: [RegistryClients, RegistryClientTable],
exports: [RegistryClients], exports: [RegistryClients],
imports: [CommonModule, NgxSkeletonLoaderModule, MatTableModule, MatSortModule, NifiTooltipDirective] imports: [
CommonModule,
NgxSkeletonLoaderModule,
MatTableModule,
MatSortModule,
NifiTooltipDirective,
MatButtonModule
]
}) })
export class RegistryClientsModule {} export class RegistryClientsModule {}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
View File

@ -15,7 +15,7 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="relative h-full border"> <div class="relative h-full">
<div class="reporting-task-table listing-table absolute inset-0 overflow-y-auto"> <div class="reporting-task-table listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.component.html
View File

@ -25,7 +25,7 @@
<div class="flex flex-col h-full gap-y-2"> <div class="flex flex-col h-full gap-y-2">
@if (currentUser.controllerPermissions.canWrite) { @if (currentUser.controllerPermissions.canWrite) {
<div class="flex justify-end"> <div class="flex justify-end">
<button class="nifi-button" (click)="openNewReportingTaskDialog()"> <button mat-icon-button (click)="openNewReportingTaskDialog()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
</div> </div>
@ -46,7 +46,7 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshReportingTaskListing()"> <button mat-icon-button (click)="refreshReportingTaskListing()">
<i class="fa fa-refresh" [class.fa-spin]="reportingTaskState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="reportingTaskState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.module.ts
View File

@ -25,6 +25,7 @@ import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-toolti
import { ReportingTaskTable } from './reporting-task-table/reporting-task-table.component'; import { ReportingTaskTable } from './reporting-task-table/reporting-task-table.component';
import { ControllerServiceTable } from '../../../../ui/common/controller-service/controller-service-table/controller-service-table.component'; import { ControllerServiceTable } from '../../../../ui/common/controller-service/controller-service-table/controller-service-table.component';
import { RouterLink } from '@angular/router'; import { RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [ReportingTasks, ReportingTaskTable], declarations: [ReportingTasks, ReportingTaskTable],
@ -36,7 +37,8 @@ import { RouterLink } from '@angular/router';
MatTableModule, MatTableModule,
NifiTooltipDirective, NifiTooltipDirective,
ControllerServiceTable, ControllerServiceTable,
RouterLink RouterLink,
MatButtonModule
] ]
}) })
export class ReportingTasksModule {} export class ReportingTasksModule {}

2
nifi-nar-bundles/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

@ -72,7 +72,7 @@
<mat-dialog-actions> <mat-dialog-actions>
<div class="flex justify-between align-middle w-full"> <div class="flex justify-between align-middle w-full">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refresh()"> <button mat-icon-button (click)="refresh()">
<i class="fa fa-refresh" [class.fa-spin]="loading$ | async"></i> <i class="fa fa-refresh" [class.fa-spin]="loading$ | async"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

5
nifi-nar-bundles/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.ts
View File

@ -23,7 +23,7 @@ import {
MatDialogContent, MatDialogContent,
MatDialogTitle MatDialogTitle
} from '@angular/material/dialog'; } from '@angular/material/dialog';
import { MatButton } from '@angular/material/button'; import { MatButton, MatButtonModule } from '@angular/material/button';
import { ComponentType, isDefinedAndNotNull } from '../../../../../state/shared'; import { ComponentType, isDefinedAndNotNull } from '../../../../../state/shared';
import { ComponentContext } from '../../../../../ui/common/component-context/component-context.component'; import { ComponentContext } from '../../../../../ui/common/component-context/component-context.component';
import { import {
@ -68,7 +68,8 @@ interface Helper {
PortClusterTable, PortClusterTable,
RemoteProcessGroupClusterTable, RemoteProcessGroupClusterTable,
ConnectionClusterTable, ConnectionClusterTable,
ProcessGroupClusterTable ProcessGroupClusterTable,
MatButtonModule
], ],
templateUrl: './cluster-summary-dialog.component.html', templateUrl: './cluster-summary-dialog.component.html',
styleUrl: './cluster-summary-dialog.component.scss' styleUrl: './cluster-summary-dialog.component.scss'

2
nifi-nar-bundles/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

@ -16,7 +16,7 @@
--> -->
<div class="connection-cluster-table flex flex-1 h-full"> <div class="connection-cluster-table flex flex-1 h-full">
<div class="listing-table overflow-y-auto border flex-1"> <div class="listing-table overflow-y-auto flex-1">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
View File

@ -16,7 +16,7 @@
--> -->
<div class="port-cluster-table flex flex-1 h-full"> <div class="port-cluster-table flex flex-1 h-full">
<div class="listing-table overflow-y-auto border flex-1"> <div class="listing-table overflow-y-auto flex-1">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
View File

@ -16,7 +16,7 @@
--> -->
<div class="process-group-cluster-table flex flex-1 h-full"> <div class="process-group-cluster-table flex flex-1 h-full">
<div class="listing-table overflow-y-auto border flex-1"> <div class="listing-table overflow-y-auto flex-1">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
View File

@ -16,7 +16,7 @@
--> -->
<div class="processor-cluster-table flex flex-1 h-full"> <div class="processor-cluster-table flex flex-1 h-full">
<div class="listing-table overflow-y-auto border flex-1"> <div class="listing-table overflow-y-auto flex-1">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
View File

@ -16,7 +16,7 @@
--> -->
<div class="remote-process-group-cluster-table flex flex-1 h-full"> <div class="remote-process-group-cluster-table flex flex-1 h-full">
<div class="listing-table overflow-y-auto border flex-1"> <div class="listing-table overflow-y-auto flex-1">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.html
View File

@ -30,7 +30,7 @@
(filterChanged)="applyFilter($event)"></summary-table-filter> (filterChanged)="applyFilter($event)"></summary-table-filter>
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"
@ -171,7 +171,7 @@
</div> </div>
<div class="flex justify-between align-middle"> <div class="flex justify-between align-middle">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refresh.next()"> <button mat-icon-button (click)="refresh.next()">
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
View File

@ -27,13 +27,22 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
import { MatPaginatorModule } from '@angular/material/paginator'; import { MatPaginatorModule } from '@angular/material/paginator';
import { PortStatusSnapshot, PortStatusSnapshotEntity } from '../../../state'; import { PortStatusSnapshot, PortStatusSnapshotEntity } from '../../../state';
import { ComponentStatusTable } from '../component-status-table/component-status-table.component'; import { ComponentStatusTable } from '../component-status-table/component-status-table.component';
import { MatButtonModule } from '@angular/material/button';
export type SupportedColumns = 'name' | 'runStatus' | 'in' | 'out'; export type SupportedColumns = 'name' | 'runStatus' | 'in' | 'out';
@Component({ @Component({
selector: 'port-status-table', selector: 'port-status-table',
standalone: true, standalone: true,
imports: [CommonModule, SummaryTableFilterModule, MatSortModule, MatTableModule, RouterLink, MatPaginatorModule], imports: [
CommonModule,
SummaryTableFilterModule,
MatSortModule,
MatTableModule,
RouterLink,
MatPaginatorModule,
MatButtonModule
],
templateUrl: './port-status-table.component.html', templateUrl: './port-status-table.component.html',
styleUrls: ['./port-status-table.component.scss'] styleUrls: ['./port-status-table.component.scss']
}) })

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.html
View File

@ -31,7 +31,7 @@
(filterChanged)="applyFilter($event)"></summary-table-filter> (filterChanged)="applyFilter($event)"></summary-table-filter>
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"
@ -241,7 +241,7 @@
</div> </div>
<div class="flex justify-between align-middle"> <div class="flex justify-between align-middle">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refresh.next()"> <button mat-icon-button (click)="refresh.next()">
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.ts
View File

@ -27,13 +27,22 @@ import { RouterLink } from '@angular/router';
import { MatPaginatorModule } from '@angular/material/paginator'; import { MatPaginatorModule } from '@angular/material/paginator';
import { ConnectionStatusSnapshot, ConnectionStatusSnapshotEntity } from '../../../state'; import { ConnectionStatusSnapshot, ConnectionStatusSnapshotEntity } from '../../../state';
import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component'; import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component';
import { MatButtonModule } from '@angular/material/button';
export type SupportedColumns = 'name' | 'queue' | 'in' | 'out' | 'threshold' | 'sourceName' | 'destinationName'; export type SupportedColumns = 'name' | 'queue' | 'in' | 'out' | 'threshold' | 'sourceName' | 'destinationName';
@Component({ @Component({
selector: 'connection-status-table', selector: 'connection-status-table',
standalone: true, standalone: true,
imports: [CommonModule, SummaryTableFilterModule, MatSortModule, RouterLink, MatTableModule, MatPaginatorModule], imports: [
CommonModule,
SummaryTableFilterModule,
MatSortModule,
RouterLink,
MatTableModule,
MatPaginatorModule,
MatButtonModule
],
templateUrl: './connection-status-table.component.html', templateUrl: './connection-status-table.component.html',
styleUrls: ['./connection-status-table.component.scss'] styleUrls: ['./connection-status-table.component.scss']
}) })

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.html
View File

@ -30,7 +30,7 @@
(filterChanged)="applyFilter($event)"></summary-table-filter> (filterChanged)="applyFilter($event)"></summary-table-filter>
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"
@ -369,7 +369,7 @@
</div> </div>
<div class="flex justify-between align-middle"> <div class="flex justify-between align-middle">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refresh.next()"> <button mat-icon-button (click)="refresh.next()">
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
View File

@ -26,6 +26,7 @@ import { RouterLink } from '@angular/router';
import { MatPaginatorModule } from '@angular/material/paginator'; import { MatPaginatorModule } from '@angular/material/paginator';
import { ProcessGroupStatusSnapshot, ProcessGroupStatusSnapshotEntity } from '../../../state'; import { ProcessGroupStatusSnapshot, ProcessGroupStatusSnapshotEntity } from '../../../state';
import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component'; import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component';
import { MatButtonModule } from '@angular/material/button';
export type SupportedColumns = export type SupportedColumns =
| 'name' | 'name'
@ -42,7 +43,15 @@ export type SupportedColumns =
@Component({ @Component({
selector: 'process-group-status-table', selector: 'process-group-status-table',
standalone: true, standalone: true,
imports: [CommonModule, MatSortModule, MatTableModule, SummaryTableFilterModule, RouterLink, MatPaginatorModule], imports: [
CommonModule,
MatSortModule,
MatTableModule,
SummaryTableFilterModule,
RouterLink,
MatPaginatorModule,
MatButtonModule
],
templateUrl: './process-group-status-table.component.html', templateUrl: './process-group-status-table.component.html',
styleUrls: ['./process-group-status-table.component.scss'] styleUrls: ['./process-group-status-table.component.scss']
}) })

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html
View File

@ -30,7 +30,7 @@
(filterChanged)="applyFilter($event)"></summary-table-filter> (filterChanged)="applyFilter($event)"></summary-table-filter>
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"
@ -285,7 +285,7 @@
</div> </div>
<div class="flex justify-between align-middle"> <div class="flex justify-between align-middle">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refresh.next()"> <button mat-icon-button (click)="refresh.next()">
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
View File

@ -27,6 +27,7 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
import { MatPaginatorModule } from '@angular/material/paginator'; import { MatPaginatorModule } from '@angular/material/paginator';
import { ProcessorStatusSnapshot, ProcessorStatusSnapshotEntity } from '../../../state'; import { ProcessorStatusSnapshot, ProcessorStatusSnapshotEntity } from '../../../state';
import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component'; import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component';
import { MatButtonModule } from '@angular/material/button';
export type SupportedColumns = 'name' | 'type' | 'processGroup' | 'runStatus' | 'in' | 'out' | 'readWrite' | 'tasks'; export type SupportedColumns = 'name' | 'type' | 'processGroup' | 'runStatus' | 'in' | 'out' | 'readWrite' | 'tasks';
@ -35,7 +36,15 @@ export type SupportedColumns = 'name' | 'type' | 'processGroup' | 'runStatus' |
templateUrl: './processor-status-table.component.html', templateUrl: './processor-status-table.component.html',
styleUrls: ['./processor-status-table.component.scss'], styleUrls: ['./processor-status-table.component.scss'],
standalone: true, standalone: true,
imports: [RouterLink, SummaryTableFilterModule, MatTableModule, MatSortModule, NgClass, MatPaginatorModule] imports: [
RouterLink,
SummaryTableFilterModule,
MatTableModule,
MatSortModule,
NgClass,
MatPaginatorModule,
MatButtonModule
]
}) })
export class ProcessorStatusTable extends ComponentStatusTable<ProcessorStatusSnapshotEntity> { export class ProcessorStatusTable extends ComponentStatusTable<ProcessorStatusSnapshotEntity> {
filterableColumns: SummaryTableFilterColumn[] = [ filterableColumns: SummaryTableFilterColumn[] = [

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.html
View File

@ -31,7 +31,7 @@
(filterChanged)="applyFilter($event)"></summary-table-filter> (filterChanged)="applyFilter($event)"></summary-table-filter>
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"
@ -183,7 +183,7 @@
</div> </div>
<div class="flex justify-between align-middle"> <div class="flex justify-between align-middle">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refresh.next()"> <button mat-icon-button (click)="refresh.next()">
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
View File

@ -27,13 +27,22 @@ import { RouterLink } from '@angular/router';
import { MatPaginatorModule } from '@angular/material/paginator'; import { MatPaginatorModule } from '@angular/material/paginator';
import { RemoteProcessGroupStatusSnapshot, RemoteProcessGroupStatusSnapshotEntity } from '../../../state'; import { RemoteProcessGroupStatusSnapshot, RemoteProcessGroupStatusSnapshotEntity } from '../../../state';
import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component'; import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component';
import { MatButtonModule } from '@angular/material/button';
export type SupportedColumns = 'name' | 'uri' | 'transmitting' | 'sent' | 'received'; export type SupportedColumns = 'name' | 'uri' | 'transmitting' | 'sent' | 'received';
@Component({ @Component({
selector: 'remote-process-group-status-table', selector: 'remote-process-group-status-table',
standalone: true, standalone: true,
imports: [CommonModule, SummaryTableFilterModule, MatSortModule, MatTableModule, RouterLink, MatPaginatorModule], imports: [
CommonModule,
SummaryTableFilterModule,
MatSortModule,
MatTableModule,
RouterLink,
MatPaginatorModule,
MatButtonModule
],
templateUrl: './remote-process-group-status-table.component.html', templateUrl: './remote-process-group-status-table.component.html',
styleUrls: ['./remote-process-group-status-table.component.scss'] styleUrls: ['./remote-process-group-status-table.component.scss']
}) })

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

@ -24,7 +24,7 @@
<div class="value">{{ request.identity }}</div> <div class="value">{{ request.identity }}</div>
</div> </div>
<div class="listing-table"> <div class="listing-table">
<div class="h-96 overflow-y-auto overflow-x-hidden border"> <div class="h-96 overflow-y-auto overflow-x-hidden">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

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

@ -41,7 +41,7 @@
} }
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshUserListing()"> <button mat-icon-button (click)="refreshUserListing()">
<i class="fa fa-refresh" [class.fa-spin]="userListingState.status === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="userListingState.status === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.module.ts
View File

@ -20,10 +20,11 @@ import { UserListing } from './user-listing.component';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { UserTable } from './user-table/user-table.component'; import { UserTable } from './user-table/user-table.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({ @NgModule({
declarations: [UserListing], declarations: [UserListing],
exports: [UserListing], exports: [UserListing],
imports: [CommonModule, NgxSkeletonLoaderModule, UserTable] imports: [CommonModule, NgxSkeletonLoaderModule, UserTable, MatButtonModule]
}) })
export class UserListingModule {} export class UserListingModule {}

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

@ -40,14 +40,14 @@
</div> </div>
<div class="flex flex-col justify-center"> <div class="flex flex-col justify-center">
@if (canModifyTenants(currentUser)) { @if (canModifyTenants(currentUser)) {
<button class="nifi-button" (click)="createClicked()"> <button mat-icon-button (click)="createClicked()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
} }
</div> </div>
</div> </div>
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table overflow-y-auto border absolute inset-0"> <div class="listing-table overflow-y-auto absolute inset-0">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.ts
View File

@ -28,6 +28,7 @@ import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatButtonModule } from '@angular/material/button';
export interface TenantItem { export interface TenantItem {
id: string; id: string;
@ -46,7 +47,15 @@ export interface Tenants {
selector: 'user-table', selector: 'user-table',
standalone: true, standalone: true,
templateUrl: './user-table.component.html', templateUrl: './user-table.component.html',
imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatTableModule, MatSortModule, MatInputModule], imports: [
ReactiveFormsModule,
MatFormFieldModule,
MatSelectModule,
MatTableModule,
MatSortModule,
MatInputModule,
MatButtonModule
],
styleUrls: ['./user-table.component.scss'] styleUrls: ['./user-table.component.scss']
}) })
export class UserTable implements AfterViewInit { export class UserTable implements AfterViewInit {

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

@ -48,7 +48,7 @@
} }
</div> </div>
</form> </form>
<div class="h-72 overflow-y-auto overflow-x-hidden border"> <div class="h-72 overflow-y-auto overflow-x-hidden">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

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

@ -15,7 +15,7 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="relative h-full border"> <div class="relative h-full">
<div class="controller-service-table listing-table absolute inset-0 overflow-y-auto"> <div class="controller-service-table listing-table absolute inset-0 overflow-y-auto">
<table <table
mat-table mat-table

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

@ -17,12 +17,12 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
.controller-service-table.listing-table { .controller-service-table {
@include mat.table-density(-4); .listing-table {
table {
table { .mat-column-moreDetails {
.mat-column-moreDetails { min-width: 90px;
min-width: 90px; }
} }
} }
} }

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

@ -25,56 +25,21 @@
$canvas-color-config: mat.get-color-config($canvas-theme); $canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$accent-palette: map.get($color-config, 'accent'); $accent-palette: map.get($color-config, 'accent');
$warn-palette: map.get($color-config, 'warn'); $warn-palette: map.get($color-config, 'warn');
// Get hues from palette // Get hues from palette
$primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
$primary-palette-default-contrast: mat.get-color-from-palette($primary-palette, 'default-contrast');
$primary-palette-darker: mat.get-color-from-palette($primary-palette, 'darker');
$primary-palette-darker-contrast: mat.get-color-from-palette($primary-palette, 'darker-contrast');
$accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
$warn-palette-default: mat.get-color-from-palette($warn-palette, default); $warn-palette-default: mat.get-color-from-palette($warn-palette, default);
$surface-darker: utils.get-surface($canvas-color-config, darker);
$surface: utils.get-surface($canvas-color-config);
$accent-surface: utils.get-surface($color-config, default, 'accent');
$header-surface: utils.ensure-contrast($primary-palette-default, $surface, $primary-palette-darker);
$header-on-surface: utils.ensure-contrast(
$primary-palette-default-contrast,
$header-surface,
$primary-palette-darker-contrast
);
$surface-highlight: utils.get-on-surface($canvas-color-config, 'highlight');
$on-surface-medium: utils.get-on-surface($canvas-color-config, medium); $on-surface-medium: utils.get-on-surface($canvas-color-config, medium);
.extension-creation-dialog { .extension-creation-dialog {
@include mat.button-density(-1); @include mat.button-density(-1);
.type-table { .listing-table {
@include mat.table-density(-4);
table { table {
th {
background-color: $header-surface;
color: $header-on-surface;
.mat-sort-header-arrow {
color: $header-on-surface;
}
}
tr:hover {
background-color: $surface-highlight !important;
}
.selected {
background-color: $accent-surface !important;
}
.even {
background-color: $surface-darker;
}
.fa.fa-shield { .fa.fa-shield {
color: $warn-palette-default; color: $warn-palette-default;
} }

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

@ -24,15 +24,15 @@
<mat-label>Filter types</mat-label> <mat-label>Filter types</mat-label>
<input <input
matInput matInput
class="border px-1.5 py-1 w-64" class="px-1.5 py-1 w-64"
type="text" type="text"
(keyup)="filterTypes($event)" (keyup)="filterTypes($event)"
placeholder="Filter types..." /> placeholder="Filter types..." />
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div class="type-table"> <div class="listing-table">
<div class="h-96 overflow-y-auto overflow-x-hidden border"> <div class="h-96 overflow-y-auto overflow-x-hidden">
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"

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

@ -20,24 +20,11 @@
.extension-creation-dialog { .extension-creation-dialog {
@include mat.button-density(-1); @include mat.button-density(-1);
.type-table { .listing-table {
@include mat.table-density(-4); width: 740px;
min-width: 740px;
table { table {
width: 100%; .fa.fa-shield {
td,
th {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
cursor: default;
}
.fa {
width: 10px; width: 10px;
height: 14px; height: 14px;
margin-right: 2px; margin-right: 2px;

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
View File

@ -28,14 +28,14 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // Get hues from palette
$navbar-surface: mat.get-color-from-palette($primary-palette, "navbar"); $navbar-surface: mat.get-color-from-palette($primary-palette, 'navbar');
$navbar-on-surface: mat.get-color-from-palette($primary-palette, "navbar-contrast"); $navbar-on-surface: mat.get-color-from-palette($primary-palette, 'navbar-contrast');
@if ($navbar-surface) { @if ($navbar-surface) {
// Nothing to do here, we have special colors from the palette. // Nothing to do here, we have special colors from the palette.
} @else { } @else {
// There was not a special value set for the navbar, so we use Angular Material behavior. // There was not a special value set for the navbar, so we use Angular Material behavior.
$navbar-surface: mat.get-color-from-palette($primary-palette, "default"); $navbar-surface: mat.get-color-from-palette($primary-palette, 'default');
$navbar-on-surface: mat.get-color-from-palette($primary-palette, "default-contrast"); $navbar-on-surface: mat.get-color-from-palette($primary-palette, 'default-contrast');
} }
// We need this to get the right color value for the global menu items. // We need this to get the right color value for the global menu items.

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
View File

@ -41,13 +41,11 @@
.nf-editor { .nf-editor {
.CodeMirror { .CodeMirror {
border: 1px solid $canvas-primary-palette-500;
background-color: $surface; background-color: $surface;
&.blank { &.blank {
background: $primary-palette-default; background: $primary-palette-default;
color: $primary-palette-lighter; color: $primary-palette-lighter;
border: 1px solid $primary-palette-default;
} }
} }

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

@ -35,9 +35,16 @@
cursor: default; cursor: default;
.CodeMirror { .CodeMirror {
border-width: 1px;
border-style: solid;
font-family: monospace; font-family: monospace;
cursor: default; cursor: default;
line-height: normal; line-height: normal;
&.blank {
border-width: 1px;
border-style: solid;
}
} }
.CodeMirror-scroll { .CodeMirror-scroll {

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

@ -15,158 +15,160 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="property-table listing-table flex flex-col gap-y-3"> <div class="property-table flex flex-col 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>
<div> <div>
<!-- TODO Property Verification --> <!-- TODO Property Verification -->
<button class="nifi-button" type="button" (click)="newPropertyClicked()"> <button mat-icon-button type="button" (click)="newPropertyClicked()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="h-96 overflow-y-auto overflow-x-hidden border"> <div class="listing-table">
<table mat-table #propertyTable [dataSource]="dataSource"> <div class="h-96 overflow-y-auto overflow-x-hidden">
<!-- Property Column --> <table mat-table #propertyTable [dataSource]="dataSource">
<ng-container matColumnDef="property"> <!-- Property Column -->
<th mat-header-cell *matHeaderCellDef>Property</th> <ng-container matColumnDef="property">
<td mat-cell *matCellDef="let item" [class.font-bold]="item.descriptor.required"> <th mat-header-cell *matHeaderCellDef>Property</th>
<div class="flex justify-between items-center"> <td mat-cell *matCellDef="let item" [class.font-bold]="item.descriptor.required">
<div> <div class="flex justify-between items-center">
{{ item.descriptor.displayName }} <div>
{{ item.descriptor.displayName }}
</div>
<div>
@if (hasInfo(item.descriptor)) {
<div
class="fa fa-question-circle"
nifiTooltip
[tooltipComponentType]="PropertyTip"
[tooltipInputData]="getPropertyTipData(item)"
[delayClose]="false"></div>
}
</div>
</div> </div>
<div> </td>
@if (hasInfo(item.descriptor)) { </ng-container>
<div
class="fa fa-question-circle"
nifiTooltip
[tooltipComponentType]="PropertyTip"
[tooltipInputData]="getPropertyTipData(item)"
[delayClose]="false"></div>
}
</div>
</div>
</td>
</ng-container>
<!-- Value Column --> <!-- Value Column -->
<ng-container matColumnDef="value"> <ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef>Value</th> <th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let item"> <td mat-cell *matCellDef="let item">
<div <div
[id]="formatId(item)" [id]="formatId(item)"
class="pointer" class="pointer"
cdkOverlayOrigin cdkOverlayOrigin
#trigger="cdkOverlayOrigin" #trigger="cdkOverlayOrigin"
(click)="openEditor(trigger, item, $event)"> (click)="openEditor(trigger, item, $event)">
@if (isNull(item.value)) { @if (isNull(item.value)) {
<div class="unset">No value set</div> <div class="unset">No value set</div>
} @else { } @else {
<ng-container
*ngTemplateOutlet="
isSensitiveProperty(item.descriptor) ? sensitive : nonSensitive;
context: { $implicit: resolvePropertyValue(item) }
"></ng-container>
<ng-template #sensitive>
<div class="sensitive">Sensitive value set</div>
</ng-template>
<ng-template #nonSensitive let-resolvedValue>
<ng-container <ng-container
*ngTemplateOutlet=" *ngTemplateOutlet="
isEmptyString(resolvedValue) ? blank : nonBlank; isSensitiveProperty(item.descriptor) ? sensitive : nonSensitive;
context: { $implicit: resolvedValue } context: { $implicit: resolvePropertyValue(item) }
"></ng-container> "></ng-container>
</ng-template> <ng-template #sensitive>
<ng-template #blank> <div class="sensitive">Sensitive value set</div>
<div class="empty">Empty string set</div> </ng-template>
</ng-template> <ng-template #nonSensitive let-resolvedValue>
<ng-template #nonBlank let-resolvedValue> <ng-container
<div class="flex justify-between items-center"> *ngTemplateOutlet="
<div class="whitespace-nowrap overflow-hidden text-ellipsis"> isEmptyString(resolvedValue) ? blank : nonBlank;
{{ resolvedValue }} context: { $implicit: resolvedValue }
"></ng-container>
</ng-template>
<ng-template #blank>
<div class="empty">Empty string set</div>
</ng-template>
<ng-template #nonBlank let-resolvedValue>
<div class="flex justify-between items-center">
<div class="whitespace-nowrap overflow-hidden text-ellipsis">
{{ resolvedValue }}
</div>
@if (hasExtraWhitespace(resolvedValue)) {
<div
class="fa fa-info"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getExtraWhitespaceTipData()"></div>
}
</div> </div>
@if (hasExtraWhitespace(resolvedValue)) { </ng-template>
<div }
class="fa fa-info" </div>
nifiTooltip </td>
[tooltipComponentType]="TextTip" </ng-container>
[tooltipInputData]="getExtraWhitespaceTipData()"></div>
}
</div>
</ng-template>
}
</div>
</td>
</ng-container>
<!-- Actions Column --> <!-- Actions Column -->
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item"> <td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3"> <div class="flex items-center gap-x-3">
@if (item.descriptor.identifiesControllerService) { @if (item.descriptor.identifiesControllerService) {
<div <div
class="pointer fa fa-plus" class="pointer fa fa-plus"
(click)="createNewControllerService(item)" (click)="createNewControllerService(item)"
title="Create new service"></div> title="Create new service"></div>
} }
@if (canConvertToParameter(item)) { @if (canConvertToParameter(item)) {
<div <div
class="pointer fa fa-level-up" class="pointer fa fa-level-up"
(click)="convertToParameterClicked(item)" (click)="convertToParameterClicked(item)"
title="Convert to Parameter"></div> title="Convert to Parameter"></div>
} }
@if (canGoToParameter(item)) { @if (canGoToParameter(item)) {
<div <div
class="pointer fa fa-long-arrow-right" class="pointer fa fa-long-arrow-right"
(click)="goToParameterClicked(item)" (click)="goToParameterClicked(item)"
title="Go to Parameter"></div> title="Go to Parameter"></div>
} }
@if (canGoToService(item)) { @if (canGoToService(item)) {
<div <div
class="pointer fa fa-long-arrow-right" class="pointer fa fa-long-arrow-right"
(click)="goToServiceClicked(item)" (click)="goToServiceClicked(item)"
title="Go to Service"></div> title="Go to Service"></div>
} }
@if (item.type == 'userDefined') { @if (item.type == 'userDefined') {
<div class="pointer fa fa-trash" (click)="deleteProperty(item)" title="Delete"></div> <div class="pointer fa fa-trash" (click)="deleteProperty(item)" title="Delete"></div>
} }
</div> </div>
</td> </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)="selectProperty(row)" (click)="selectProperty(row)"
[class.selected]="isSelected(row)" [class.selected]="isSelected(row)"
[class.even]="even"></tr> [class.even]="even"></tr>
</table> </table>
<ng-template <ng-template
cdkConnectedOverlay cdkConnectedOverlay
[cdkConnectedOverlayOrigin]="editorTrigger" [cdkConnectedOverlayOrigin]="editorTrigger"
[cdkConnectedOverlayPositions]="editorPositions" [cdkConnectedOverlayPositions]="editorPositions"
[cdkConnectedOverlayHasBackdrop]="true" [cdkConnectedOverlayHasBackdrop]="true"
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'" [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
[cdkConnectedOverlayOpen]="editorOpen" [cdkConnectedOverlayOpen]="editorOpen"
(detach)="closeEditor()" (detach)="closeEditor()"
(backdropClick)="closeEditor()"> (backdropClick)="closeEditor()">
@if (hasAllowableValues(editorItem)) { @if (hasAllowableValues(editorItem)) {
<combo-editor <combo-editor
[item]="editorItem" [item]="editorItem"
[getParameters]="getParameters" [getParameters]="getParameters"
[width]="editorWidth" [width]="editorWidth"
(ok)="savePropertyValue(editorItem, $event)" (ok)="savePropertyValue(editorItem, $event)"
(cancel)="closeEditor()"></combo-editor> (cancel)="closeEditor()"></combo-editor>
} @else { } @else {
<nf-editor <nf-editor
[item]="editorItem" [item]="editorItem"
[getParameters]="getParameters" [getParameters]="getParameters"
[width]="editorWidth" [width]="editorWidth"
(ok)="savePropertyValue(editorItem, $event)" (ok)="savePropertyValue(editorItem, $event)"
(cancel)="closeEditor()"></nf-editor> (cancel)="closeEditor()"></nf-editor>
} }
</ng-template> </ng-template>
</div>
</div> </div>
</div> </div>

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

@ -17,28 +17,9 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
.property-table.listing-table { .property-table {
@include mat.table-density(-4); .listing-table {
min-width: 740px; @include mat.table-density(-4);
width: 740px;
table {
width: auto;
td,
th {
cursor: default;
}
.mat-column-property {
min-width: 230px;
}
.mat-column-value {
min-width: 230px;
}
.mat-column-actions {
min-width: 50px;
}
} }
} }

41
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss
View File

@ -1,41 +0,0 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:math' as math;
@use 'sass:map';
@use '@angular/material' as mat;
@use '../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
// Get hues from palette
$on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
$handle-size: 15px;
$handle-color: $on-surface-lighter;
.resizable-triangle {
border-right: math.div($handle-size, 2) solid $handle-color;
border-bottom: math.div($handle-size, 2) solid $handle-color;
}
}

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

@ -41,6 +41,10 @@ $handle-size: 15px;
height: 0; height: 0;
border-left: math.div($handle-size, 2) solid transparent; border-left: math.div($handle-size, 2) solid transparent;
border-top: math.div($handle-size, 2) solid transparent; border-top: math.div($handle-size, 2) solid transparent;
border-right-width: math.div($handle-size, 2);
border-right-style: solid;
border-bottom-width: math.div($handle-size, 2);
border-bottom-style: solid;
bottom: 0; bottom: 0;
right: 0; right: 0;
} }

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

@ -161,7 +161,7 @@
<div class="flex-1"> <div class="flex-1">
@if (instances.length > 0) { @if (instances.length > 0) {
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refresh()"> <button mat-icon-button (click)="refresh()">
<i <i
class="fa fa-refresh" class="fa fa-refresh"
[class.fa-spin]="statusHistoryState.status === 'loading'"></i> [class.fa-spin]="statusHistoryState.status === 'loading'"></i>

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

@ -229,7 +229,7 @@
<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">
<button class="nifi-button" (click)="refreshSystemDiagnostics()"> <button mat-icon-button (click)="refreshSystemDiagnostics()">
<i class="fa fa-refresh" [class.fa-spin]="(status$ | async) === 'loading'"></i> <i class="fa fa-refresh" [class.fa-spin]="(status$ | async) === 'loading'"></i>
</button> </button>
<div>Last updated:</div> <div>Last updated:</div>

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

@ -0,0 +1,330 @@
/*!
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@use '../utils.scss' as utils;
@mixin styles() {
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif;
}
a {
font-size: 13px;
cursor: pointer;
font-weight: normal;
display: inline-block;
font-family: Roboto;
text-decoration: underline;
text-underline-offset: 3px;
}
//Icon for styling mat-icon in forms throughout the application.
.info-icon {
font-size: 14px;
height: 14px !important;
width: 14px !important;
}
//This style is needed due to an incompatibility between material and tailwind.
.mdc-notched-outline__notch {
border-right: none;
}
.small-dialog {
min-width: 320px;
}
.medium-dialog {
min-width: 470px;
}
.medium-short-dialog {
max-height: 32%;
max-width: 34%;
min-height: 250px;
min-width: 440px;
font-size: 13px;
}
.large-dialog {
max-height: 72%;
max-width: 55%;
min-height: 520px;
min-width: 760px;
}
.xl-dialog {
max-height: 72%;
max-width: 85%;
min-height: 560px;
min-width: 1024px;
}
.edit-parameter-context-dialog {
max-height: 72%;
max-width: 55%;
min-width: 850px;
min-height: 575px;
}
.tooltip {
position: fixed;
max-width: 500px;
padding: 10px;
border-radius: 2px;
border-width: 1px;
font-size: 13px;
font-family: Roboto;
font-weight: 400;
word-wrap: break-word;
white-space: normal;
z-index: 1;
ul {
list-style: disc outside;
margin-left: 1em;
}
}
.property-editor {
font-size: 13px;
font-family: Roboto;
font-weight: 400;
}
.CodeMirror-hints {
font-size: 13px !important;
z-index: 1000 !important;
overflow-y: scroll !important;
}
.blank,
.unset,
.sensitive {
font-weight: normal !important;
}
.mat-mdc-icon-button {
--mdc-icon-button-state-layer-size: 28px;
--mdc-icon-button-icon-size: 14px;
line-height: var(--mdc-icon-button-state-layer-size);
padding: 0;
&.mat-mdc-button-base.mdc-icon-button {
padding: 0;
}
}
.pointer {
cursor: pointer;
}
.disabled {
cursor: not-allowed;
}
.value,
.refresh-timestamp {
font-weight: 500;
}
}
@mixin colors($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$accent-palette: map.get($color-config, 'accent');
$warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette
// Start with the canvas theme.
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200);
$canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
$canvas-accent-palette-lighter: mat.get-color-from-palette($canvas-accent-palette, lighter);
$canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default);
$primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
$primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
$accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
$accent-palette-lighter: mat.get-color-from-palette($accent-palette, 'lighter');
$warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter);
$warn-palette-default: mat.get-color-from-palette($warn-palette, 'default');
// Alternative hue for warn colors.
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
$surface: utils.get-surface($canvas-color-config);
$surface-darker: utils.get-surface($canvas-color-config, darker);
$surface-highlight: utils.get-on-surface($canvas-color-config, highlight);
$on-surface: utils.get-on-surface($canvas-color-config);
$on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
* {
// Tailwind sets a default that doesn't shift with light and dark themes
border-color: $on-surface-lighter;
}
.cdk-drag-disabled {
cursor: not-allowed !important;
background: $on-surface-lighter !important;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 3px 6px $canvas-primary-palette-A200;
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drop-list-dragging {
cursor: grabbing;
}
a {
color: utils.get-color-on-surface($color-config, $surface);
text-decoration-color: $primary-palette-lighter;
}
a:hover {
text-decoration-color: utils.get-color-on-surface($color-config, $surface);
}
.tooltip {
background-color: $surface;
border-color: $on-surface;
box-shadow: 0 2px 5px $canvas-primary-palette-A200;
color: $on-surface;
}
.property-editor {
background-color: $surface;
box-shadow: 0 2px 5px $canvas-primary-palette-A200;
}
.disabled {
color: $primary-palette-default !important;
fill: $primary-palette-default !important;
}
.enabled {
color: $primary-palette-A400 !important;
fill: $primary-palette-A400 !important;
}
.stopped {
color: $warn-palette-lighter !important;
fill: $warn-palette-lighter !important;
}
.running {
color: $canvas-accent-palette-lighter !important;
fill: $canvas-accent-palette-lighter !important;
}
.has-errors,
.invalid {
color: $warn-palette-A200 !important;
fill: $warn-palette-A200 !important;
}
.validating {
color: $canvas-primary-palette-500 !important;
fill: $canvas-primary-palette-500 !important;
}
.transmitting {
color: $canvas-accent-palette-default !important;
fill: $canvas-accent-palette-default !important;
}
.up-to-date {
color: $canvas-accent-palette-default !important;
fill: $canvas-accent-palette-default !important;
}
.locally-modified,
.sync-failure {
color: $accent-palette-lighter !important;
fill: $accent-palette-lighter !important;
}
.stale,
.locally-modified-and-stale {
color: $warn-palette-default !important;
fill: $warn-palette-default !important;
}
.zero {
opacity: 0.5;
}
.blank,
.unset,
.sensitive {
color: $canvas-primary-palette-500 !important;
}
.mat-mdc-icon-button {
color: utils.get-color-on-surface($color-config, $surface-darker) !important;
}
.mat-mdc-icon-button:hover {
background-color: $surface-highlight !important;
}
.mat-mdc-icon-button:disabled {
color: $on-surface-lighter !important;
background-color: transparent !important;
i {
color: $on-surface-lighter !important;
}
}
.value,
.refresh-timestamp {
color: utils.get-color-on-surface($color-config, $surface, 'accent');
}
h3.page-header {
color: $primary-palette-default;
}
ngx-skeleton-loader .skeleton-loader {
background: $on-surface-lighter;
}
}

94
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss → nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
View File

@ -17,9 +17,53 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../assets/utils.scss' as utils; @use '../utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin styles() {
.listing-table {
border-width: 1px;
border-style: solid;
table {
width: 100%;
table-layout: fixed;
td,
th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
cursor: default;
}
.fa {
width: 10px;
height: 14px;
text-align: center;
}
.icon {
width: 10px;
text-align: center;
}
.mat-column-moreDetails {
min-width: 30px;
}
.mat-column-actions {
min-width: 115px;
}
}
}
.mat-sort-header-content {
overflow: hidden;
}
}
@mixin colors($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
$color-config: mat.get-color-config($material-theme); $color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme); $canvas-color-config: mat.get-color-config($canvas-theme);
@ -42,21 +86,12 @@
$primary-palette-darker-contrast $primary-palette-darker-contrast
); );
$surface-highlight: utils.get-on-surface($canvas-color-config, 'highlight'); $surface-highlight: utils.get-on-surface($canvas-color-config, 'highlight');
$on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
.listing-table { .listing-table {
border-color: $on-surface-lighter;
table { table {
width: 100%;
table-layout: fixed;
td,
th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
cursor: default;
}
th { th {
background-color: $header-surface !important; background-color: $header-surface !important;
color: $header-on-surface; color: $header-on-surface;
@ -67,6 +102,12 @@
} }
} }
th,
td {
border-bottom-width: 1px;
border-bottom-style: solid;
}
tr:hover { tr:hover {
background-color: $surface-highlight !important; background-color: $surface-highlight !important;
} }
@ -81,36 +122,11 @@
.fa { .fa {
color: utils.get-color-on-surface($color-config, $surface); color: utils.get-color-on-surface($color-config, $surface);
width: 10px;
height: 14px;
text-align: center;
} }
.icon { .icon {
color: utils.get-color-on-surface($color-config, $surface); color: utils.get-color-on-surface($color-config, $surface);
width: 10px;
text-align: center;
}
.mat-column-moreDetails {
min-width: 30px;
}
.mat-column-actions {
min-width: 115px;
} }
} }
.mat-mdc-table .mdc-data-table__header-row {
height: 35px;
}
.mat-mdc-table .mdc-data-table__row {
height: 35px;
}
}
.mat-sort-header-content {
overflow: hidden;
} }
} }

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
View File

@ -29,7 +29,7 @@ $material-primary-light-palette: (
// 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-light-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b // 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-light-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
50: rgba(#F9FAFB, 0.97), 50: rgba(#F9FAFB, 0.97),
100: #e5ebed, // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect, 100: #e5ebed, // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect,
200: #cbd8dd, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled 200: #cbd8dd, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a
300: #abbdc5, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank 300: #abbdc5, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
400: #8aa2ad, // Default hue for this palette (color="primary"). 400: #8aa2ad, // Default hue for this palette (color="primary").
500: #728e9b, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header, 500: #728e9b, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header,
@ -43,7 +43,7 @@ $material-primary-light-palette: (
A100: rgba(#1491C1, 0.12), // .hint-pattern A100: rgba(#1491C1, 0.12), // .hint-pattern
A200: #aabec7, // .zero A200: #aabec7, // .zero
A400: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active A400: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
A700: #004849, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu A700: #004849, // a, a:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu
// These are the $material-primary-light-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. // These are the $material-primary-light-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
// Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important
// for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc.

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss
View File

@ -29,7 +29,7 @@ $material-primary-light-palette: (
// 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-light-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b // 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-light-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
50: #f0e7f2, // .context-menu 50: #f0e7f2, // .context-menu
100: #dac3e0, // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect, 100: #dac3e0, // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect,
200: #c29dcc, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled 200: #c29dcc, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a
300: #aa79b7, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank 300: #aa79b7, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
400: #985fa7, // Default hue for this palette (color="primary"). 400: #985fa7, // Default hue for this palette (color="primary").
500: #874b98, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header, 500: #874b98, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header,
@ -43,7 +43,7 @@ $material-primary-light-palette: (
A100: rgba(20, 145, 193, 0.12), // .hint-pattern A100: rgba(20, 145, 193, 0.12), // .hint-pattern
A200: #aabec7, // .zero A200: #aabec7, // .zero
A400: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active A400: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
A700: #004849, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu A700: #004849, // a, a:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu
// These are the $material-primary-light-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. // These are the $material-primary-light-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
// Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important

Some files were not shown because too many files have changed in this diff Show More