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.
-->
<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
mat-table
[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) {
<div class="flex gap-x-2">
<button
class="nifi-button"
mat-icon-button
title="Add users/groups to this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="addTenantToPolicy()">
<i class="fa fa-user-plus"></i>
</button>
<button
class="nifi-button"
mat-icon-button
title="Delete this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="deletePolicy()">
@ -119,7 +119,7 @@
}
<div class="flex justify-between">
<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>
</button>
<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 { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
import { PolicyTable } from '../common/policy-table/policy-table.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [ComponentAccessPolicies],
@ -41,7 +42,8 @@ import { PolicyTable } from '../common/policy-table/policy-table.component';
ReactiveFormsModule,
MatSelectModule,
NifiTooltipDirective,
PolicyTable
PolicyTable,
MatButtonModule
]
})
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) {
<div class="flex gap-x-2 items-center">
<button
class="nifi-button"
mat-icon-button
title="Add users/groups to this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="addTenantToPolicy()">
<i class="fa fa-user-plus"></i>
</button>
<button
class="nifi-button"
mat-icon-button
title="Delete this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="deletePolicy()">
@ -137,7 +137,7 @@
}
<div class="flex justify-between">
<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>
</button>
<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 { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
import { PolicyTable } from '../common/policy-table/policy-table.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [GlobalAccessPolicies],
@ -41,7 +42,8 @@ import { PolicyTable } from '../common/policy-table/policy-table.component';
ReactiveFormsModule,
MatSelectModule,
NifiTooltipDirective,
PolicyTable
PolicyTable,
MatButtonModule
]
})
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 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">
@for (item of bulletinBoardItems; track item) {
<!-- each item can either be a BulletinEntity or BulletinBoardEvent -->
@ -72,7 +72,7 @@
} @else {
@if (asBulletinEvent(item); as event) {
<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 }}
</div>
</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
>
</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>
</button>
<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 { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'bulletin-board',
@ -55,7 +56,8 @@ import { CommonModule } from '@angular/common';
ReactiveFormsModule,
BulletinBoardList,
MatSlideToggleModule,
CommonModule
CommonModule,
MatButtonModule
],
templateUrl: './bulletin-board.component.html',
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="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>
</button>
<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 { ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [CounterListing, CounterTable],
@ -36,7 +37,8 @@ import { MatSelectModule } from '@angular/material/select';
MatSortModule,
MatInputModule,
ReactiveFormsModule,
MatSelectModule
MatSelectModule,
MatButtonModule
]
})
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>
</div>
<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
mat-table
[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>
@if ((currentUser$ | async)?.controllerPermissions?.canWrite) {
<div class="mt-4">
<button class="nifi-button" (click)="purgeHistoryClicked()">
<button mat-icon-button (click)="purgeHistoryClicked()">
<i class="fa fa-eraser"></i>
</button>
</div>
@ -111,7 +111,7 @@
<div class="flex justify-between align-middle">
<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>
</button>
<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="listing-table overflow-y-auto border absolute inset-0">
<div class="listing-table overflow-y-auto absolute inset-0">
<table
mat-table
[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="flex justify-between">
<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>
</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>
</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>
</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>
</button>
</div>
@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>
</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 {
margin-bottom: 2px;
.fa,
.icon {
font-size: 18px;
.mat-mdc-icon-button {
--mdc-icon-button-state-layer-size: 34px;
--mdc-icon-button-icon-size: 17px;
}
.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 { Birdseye } from './birdseye/birdseye.component';
import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'navigation-control',
standalone: true,
templateUrl: './navigation-control.component.html',
imports: [Birdseye],
imports: [Birdseye, MatButtonModule],
styleUrls: ['./navigation-control.component.scss']
})
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 gap-x-1">
<button
class="nifi-button"
mat-icon-button
type="button"
[disabled]="!canConfigure(selection)"
(click)="configure(selection)">
@ -56,7 +56,8 @@
</button>
@if (supportsManagedAuthorizer()) {
<button
class="nifi-button mr-2"
mat-icon-button
class="mr-2"
type="button"
[disabled]="!canManageAccess(selection)"
(click)="manageAccess(selection)">
@ -64,28 +65,29 @@
</button>
}
<button
class="nifi-button"
mat-icon-button
type="button"
[disabled]="!canEnable(selection)"
(click)="enable(selection)">
<i class="fa fa-flash"></i>
</button>
<button
class="nifi-button mr-2"
mat-icon-button
class="mr-2"
type="button"
[disabled]="!canDisable(selection)"
(click)="disable(selection)">
<i class="ml-1 icon icon-enable-false"></i>
</button>
<button
class="nifi-button"
mat-icon-button
type="button"
[disabled]="!canStart(selection)"
(click)="start(selection)">
<i class="fa fa-play"></i>
</button>
<button
class="nifi-button"
mat-icon-button
type="button"
[disabled]="!canStop(selection)"
(click)="stop(selection)">
@ -94,35 +96,38 @@
</div>
<div class="flex gap-x-1">
<button
class="nifi-button"
mat-icon-button
type="button"
[disabled]="!canCopy(selection)"
(click)="copy(selection)">
<i class="fa fa-copy"></i>
</button>
<button
class="nifi-button mr-2"
mat-icon-button
class="mr-2"
type="button"
[disabled]="!canPaste(selection)"
(click)="paste(selection)">
<i class="fa fa-paste"></i>
</button>
<button
class="nifi-button mr-2"
mat-icon-button
class="mr-2"
type="button"
[disabled]="!canGroup(selection)"
(click)="group(selection)">
<i class="ml-1 icon icon-group"></i>
</button>
<button
class="nifi-button mr-2"
mat-icon-button
class="mr-2"
type="button"
[disabled]="!canColor(selection)"
(click)="color(selection)">
<i class="fa fa-paint-brush"></i>
</button>
<button
class="nifi-button"
mat-icon-button
type="button"
[disabled]="!canDelete(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 {
margin-bottom: 2px;
.fa,
.icon {
font-size: 18px;
.mat-mdc-icon-button {
--mdc-icon-button-state-layer-size: 34px;
--mdc-icon-button-icon-size: 17px;
}
.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 { ComponentType } from '../../../../../../state/shared';
import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'operation-control',
standalone: true,
templateUrl: './operation-control.component.html',
imports: [],
imports: [MatButtonModule],
styleUrls: ['./operation-control.component.scss']
})
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);
// 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) {
// Nothing to do here, we have special color from the palette.
} @else {
// 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 {
@ -63,6 +63,7 @@
);
}
}
&.cdk-drag-dragging {
color: utils.get-color-on-surface($color-config, $surface-darker);
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 '../../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) {
@mixin nifi-theme($canvas-theme) {
// Get the color config from the 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);
.search-container {
border-left: 1px solid $on-surface-lighter;
&:hover,
&.open {
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
$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);
$on-surface: utils.get-on-surface($canvas-color-config);
@ -39,22 +38,11 @@
.prioritizers {
.prioritizers-list {
background: $primary-palette-default;
border: solid 1px $canvas-primary-palette-500;
.cdk-drag-disabled {
background: $on-surface-lighter;
}
}
.prioritizer-draggable-item {
border-bottom: solid 1px $canvas-primary-palette-500;
color: $on-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>Available Prioritizers</div>
<div
class="prioritizers-list"
class="prioritizers-list border"
cdkDropList
cdkDropListSortingDisabled
[cdkDropListDisabled]="isDisabled"
[cdkDropListData]="availablePrioritizers"
(cdkDropListDropped)="dropAvailable($event)">
@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
*ngTemplateOutlet="
prioritizerItem;
@ -39,13 +39,13 @@
<div class="flex flex-col">
<div>Selected Prioritizers</div>
<div
class="prioritizers-list"
class="prioritizers-list border"
cdkDropList
[cdkDropListDisabled]="isDisabled"
[cdkDropListData]="selectedPrioritizers"
(cdkDropListDropped)="dropSelected($event)">
@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
*ngTemplateOutlet="
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-list {
min-height: 66px;
min-height: 74px;
border-radius: 4px;
overflow: hidden;
display: block;
.cdk-drag-disabled {
cursor: not-allowed;
}
}
.prioritizer-draggable-item {
@ -41,17 +37,4 @@
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>
<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
mat-table
[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
[entity]="serviceState.breadcrumb"
[currentProcessGroupId]="serviceState.processGroupId"></breadcrumbs>
<button class="nifi-button" (click)="openNewControllerServiceDialog()">
<button mat-icon-button (click)="openNewControllerServiceDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -57,7 +57,7 @@
}
<div class="flex justify-between">
<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>
</button>
<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 { Breadcrumbs } from '../common/breadcrumbs/breadcrumbs.component';
import { Navigation } from '../../../../ui/common/navigation/navigation.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [ControllerServices],
@ -33,7 +34,8 @@ import { Navigation } from '../../../../ui/common/navigation/navigation.componen
ControllerServicesRoutingModule,
ControllerServiceTable,
Breadcrumbs,
Navigation
Navigation,
MatButtonModule
]
})
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 {
<div class="flex flex-col h-full gap-y-2">
<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">
<table
mat-table
@ -226,7 +226,7 @@
</div>
<div class="flex justify-between">
<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>
</button>
<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 { remotePortsFeatureKey } from '../../state/manage-remote-ports';
import { manageRemotePortsReducer } from '../../state/manage-remote-ports/manage-remote-ports.reducer';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [ManageRemotePorts],
@ -46,7 +47,8 @@ import { manageRemotePortsReducer } from '../../state/manage-remote-ports/manage
Navigation,
MatTableModule,
MatSortModule,
NifiTooltipDirective
NifiTooltipDirective,
MatButtonModule
]
})
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
$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);
$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-list {
background: $primary-palette-default;
border: solid 1px $canvas-primary-palette-500;
.cdk-drag-disabled {
background: $on-surface-lighter;
}
}
.parameter-context-draggable-item {
border-bottom: solid 1px $canvas-primary-palette-500;
color: $on-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>Available Parameter Contexts</div>
<div
class="parameter-context-inheritance-list"
class="parameter-context-inheritance-list border"
cdkDropList
cdkDropListSortingDisabled
[cdkDropListDisabled]="isDisabled"
@ -27,7 +27,7 @@
(cdkDropListDropped)="dropAvailable($event)">
@for (item of availableParameterContexts; track item; let i = $index) {
<div
class="parameter-context-draggable-item"
class="parameter-context-draggable-item border-b m-1"
cdkDrag
cdkDragPreviewContainer="parent"
[cdkDragDisabled]="!item.permissions.canRead">
@ -45,14 +45,14 @@
<div class="flex flex-col w-full">
<div>Selected Parameter Contexts</div>
<div
class="parameter-context-inheritance-list"
class="parameter-context-inheritance-list border"
cdkDropList
[cdkDropListDisabled]="isDisabled"
[cdkDropListData]="selectedParameterContexts"
(cdkDropListDropped)="dropSelected($event)">
@for (item of selectedParameterContexts; track item; let i = $index) {
<div
class="parameter-context-draggable-item"
class="parameter-context-draggable-item border-b m-1"
cdkDrag
cdkDragPreviewContainer="parent"
[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-list {
min-height: 66px;
min-height: 74px;
border-radius: 4px;
overflow: hidden;
display: block;
.cdk-drag-disabled {
cursor: not-allowed;
}
}
.parameter-context-draggable-item {
@ -41,17 +37,4 @@
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 {
<div class="flex flex-col h-full gap-y-2">
<div class="flex justify-end">
<button class="nifi-button" (click)="openNewParameterContextDialog()">
<button mat-icon-button (click)="openNewParameterContextDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -39,7 +39,7 @@
</div>
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button class="nifi-button" (click)="refreshParameterContextListing()">
<button mat-icon-button (click)="refreshParameterContextListing()">
<i
class="fa fa-refresh"
[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 { MatDialogModule } from '@angular/material/dialog';
import { RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [ParameterContextListing, ParameterContextTable],
@ -36,7 +37,8 @@ import { RouterLink } from '@angular/router';
MatTableModule,
MatDialogModule,
NifiTooltipDirective,
RouterLink
RouterLink,
MatButtonModule
]
})
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.
-->
<div class="relative h-full border">
<div class="relative h-full">
<div class="listing-table absolute inset-0 overflow-y-auto">
<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.
-->
<div class="parameter-table listing-table flex gap-x-3">
<div class="flex flex-col gap-y-3" style="flex-grow: 3">
<div class="parameter-table flex gap-x-3">
<div class="flex flex-col gap-y-3">
@if (canAddParameters) {
<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>
</button>
</div>
}
<div class="h-96 overflow-y-auto overflow-x-hidden border">
<table mat-table [dataSource]="dataSource">
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let item">
<div class="flex justify-between items-center">
<div>
{{ item.entity.parameter.name }}
</div>
<div>
@if (hasDescription(item)) {
<div
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 class="listing-table">
<div class="h-96 overflow-y-auto overflow-x-hidden">
<table mat-table [dataSource]="dataSource">
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let item">
<div class="flex justify-between items-center">
<div>
{{ item.entity.parameter.name }}
</div>
<div>
@if (hasDescription(item)) {
<div
class="fa fa-info"
class="fa fa-question-circle"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getExtraWhitespaceTipData()"></div>
[tooltipInputData]="getDescriptionTipData(item)"></div>
}
</div>
</ng-template>
}
</td>
</ng-container>
</div>
</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
@if (canGoToParameter(item)) {
<div
class="pointer fa fa-long-arrow-right"
[routerLink]="getParameterLink(item)"
mat-dialog-close="ROUTED"
title="Go to"></div>
<!-- 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
class="fa fa-info"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getExtraWhitespaceTipData()"></div>
}
</div>
</ng-template>
}
@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>
</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>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
@if (canGoToParameter(item)) {
<div
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 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>Parameter</div>
<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;
.parameter-table.listing-table {
@include mat.table-density(-4);
min-width: 740px;
.parameter-table {
.listing-table {
@include mat.table-density(-4);
width: 506px;
table {
width: auto;
td,
th {
cursor: default;
}
.mat-column-actions {
width: 75px;
table {
.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>
</form>
<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>
</button>
</div>
</div>
</div>
<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
mat-table
[dataSource]="dataSource"
@ -171,7 +171,7 @@
</div>
<div class="flex justify-between">
<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>
</button>
<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 { ErrorBanner } from '../../../../../ui/common/error-banner/error-banner.component';
import { ClusterSummary } from '../../../../../state/cluster-summary';
import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'provenance-event-table',
@ -59,7 +60,8 @@ import { ClusterSummary } from '../../../../../state/cluster-summary';
MatPaginatorModule,
LineageComponent,
MatSliderModule,
ErrorBanner
ErrorBanner,
MatButtonModule
],
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 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">
<!-- More Details Column -->
<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 class="flex justify-between">
<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>
</button>
<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 { QueueListingEffects } from '../../state/queue-listing/queue-listing.effects';
import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [QueueListing],
@ -39,7 +40,8 @@ import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.com
FlowFileTable,
StoreModule.forFeature(queueFeatureKey, reducers),
EffectsModule.forFeature(QueueListingEffects),
ErrorBanner
ErrorBanner,
MatButtonModule
]
})
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.
-->
<div class="relative h-full border">
<div class="flow-analysis-rule-table listing-table absolute inset-0 overflow-y-auto">
<div class="flow-analysis-rule-table relative h-full">
<div class="listing-table absolute inset-0 overflow-y-auto">
<table
mat-table
[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.
*/
.flow-analysis-rule-table.listing-table {
table {
.mat-column-moreDetails {
min-width: 100px;
.flow-analysis-rule-table {
.listing-table {
table {
.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">
@if (currentUser.controllerPermissions.canWrite) {
<div class="flex justify-end">
<button class="nifi-button" (click)="openNewFlowAnalysisRuleDialog()">
<button mat-icon-button (click)="openNewFlowAnalysisRuleDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -45,7 +45,7 @@
</div>
<div class="flex justify-between">
<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>
</button>
<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 { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
import { PropertyTable } from '../../../../ui/common/property-table/property-table.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [FlowAnalysisRules],
@ -35,7 +36,8 @@ import { PropertyTable } from '../../../../ui/common/property-table/property-tab
MatTableModule,
NifiTooltipDirective,
FlowAnalysisRuleTable,
PropertyTable
PropertyTable,
MatButtonModule
]
})
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">
@if (currentUser.controllerPermissions.canWrite) {
<div class="flex justify-end">
<button class="nifi-button" (click)="openNewControllerServiceDialog()">
<button mat-icon-button (click)="openNewControllerServiceDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -49,7 +49,7 @@
</div>
<div class="flex justify-between">
<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>
</button>
<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 { ControllerServiceTable } from '../../../../ui/common/controller-service/controller-service-table/controller-service-table.component';
import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [ManagementControllerServices],
exports: [ManagementControllerServices],
imports: [CommonModule, NgxSkeletonLoaderModule, ControllerServiceTable, ErrorBanner]
imports: [CommonModule, NgxSkeletonLoaderModule, ControllerServiceTable, ErrorBanner, MatButtonModule]
})
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 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
mat-table
[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="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
mat-table
[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>
<div class="parameter-providers-table h-full flex flex-col">
<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
mat-table
[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) {
<div class="flex justify-end">
<button
class="nifi-button"
mat-icon-button
(click)="openNewParameterProviderDialog()"
title="Add a new parameter provider">
<i class="fa fa-plus"></i>
@ -47,7 +47,7 @@
</div>
<div class="flex justify-between">
<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>
</button>
<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 { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { ParameterProvidersTable } from './parameter-providers-table/parameter-providers-table.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [ParameterProviders],
exports: [ParameterProviders],
imports: [CommonModule, NgxSkeletonLoaderModule, ParameterProvidersTable]
imports: [CommonModule, NgxSkeletonLoaderModule, ParameterProvidersTable, MatButtonModule]
})
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.
-->
<div class="relative h-full border">
<div class="relative h-full">
<div class="registry-client-table listing-table absolute inset-0 overflow-y-auto">
<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">
@if (currentUser.controllerPermissions.canWrite) {
<div class="flex justify-end">
<button class="nifi-button" (click)="openNewRegistryClientDialog()">
<button mat-icon-button (click)="openNewRegistryClientDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -40,7 +40,7 @@
</div>
<div class="flex justify-between">
<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>
</button>
<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 { MatSortModule } from '@angular/material/sort';
import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [RegistryClients, RegistryClientTable],
exports: [RegistryClients],
imports: [CommonModule, NgxSkeletonLoaderModule, MatTableModule, MatSortModule, NifiTooltipDirective]
imports: [
CommonModule,
NgxSkeletonLoaderModule,
MatTableModule,
MatSortModule,
NifiTooltipDirective,
MatButtonModule
]
})
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.
-->
<div class="relative h-full border">
<div class="relative h-full">
<div class="reporting-task-table listing-table absolute inset-0 overflow-y-auto">
<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">
@if (currentUser.controllerPermissions.canWrite) {
<div class="flex justify-end">
<button class="nifi-button" (click)="openNewReportingTaskDialog()">
<button mat-icon-button (click)="openNewReportingTaskDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -46,7 +46,7 @@
</div>
<div class="flex justify-between">
<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>
</button>
<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 { ControllerServiceTable } from '../../../../ui/common/controller-service/controller-service-table/controller-service-table.component';
import { RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [ReportingTasks, ReportingTaskTable],
@ -36,7 +37,8 @@ import { RouterLink } from '@angular/router';
MatTableModule,
NifiTooltipDirective,
ControllerServiceTable,
RouterLink
RouterLink,
MatButtonModule
]
})
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>
<div class="flex justify-between align-middle w-full">
<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>
</button>
<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,
MatDialogTitle
} from '@angular/material/dialog';
import { MatButton } from '@angular/material/button';
import { MatButton, MatButtonModule } from '@angular/material/button';
import { ComponentType, isDefinedAndNotNull } from '../../../../../state/shared';
import { ComponentContext } from '../../../../../ui/common/component-context/component-context.component';
import {
@ -68,7 +68,8 @@ interface Helper {
PortClusterTable,
RemoteProcessGroupClusterTable,
ConnectionClusterTable,
ProcessGroupClusterTable
ProcessGroupClusterTable,
MatButtonModule
],
templateUrl: './cluster-summary-dialog.component.html',
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="listing-table overflow-y-auto border flex-1">
<div class="listing-table overflow-y-auto flex-1">
<table
mat-table
[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="listing-table overflow-y-auto border flex-1">
<div class="listing-table overflow-y-auto flex-1">
<table
mat-table
[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="listing-table overflow-y-auto border flex-1">
<div class="listing-table overflow-y-auto flex-1">
<table
mat-table
[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="listing-table overflow-y-auto border flex-1">
<div class="listing-table overflow-y-auto flex-1">
<table
mat-table
[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="listing-table overflow-y-auto border flex-1">
<div class="listing-table overflow-y-auto flex-1">
<table
mat-table
[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>
<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
mat-table
[dataSource]="dataSource"
@ -171,7 +171,7 @@
</div>
<div class="flex justify-between align-middle">
<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>
</button>
<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 { PortStatusSnapshot, PortStatusSnapshotEntity } from '../../../state';
import { ComponentStatusTable } from '../component-status-table/component-status-table.component';
import { MatButtonModule } from '@angular/material/button';
export type SupportedColumns = 'name' | 'runStatus' | 'in' | 'out';
@Component({
selector: 'port-status-table',
standalone: true,
imports: [CommonModule, SummaryTableFilterModule, MatSortModule, MatTableModule, RouterLink, MatPaginatorModule],
imports: [
CommonModule,
SummaryTableFilterModule,
MatSortModule,
MatTableModule,
RouterLink,
MatPaginatorModule,
MatButtonModule
],
templateUrl: './port-status-table.component.html',
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>
<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
mat-table
[dataSource]="dataSource"
@ -241,7 +241,7 @@
</div>
<div class="flex justify-between align-middle">
<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>
</button>
<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 { ConnectionStatusSnapshot, ConnectionStatusSnapshotEntity } from '../../../state';
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';
@Component({
selector: 'connection-status-table',
standalone: true,
imports: [CommonModule, SummaryTableFilterModule, MatSortModule, RouterLink, MatTableModule, MatPaginatorModule],
imports: [
CommonModule,
SummaryTableFilterModule,
MatSortModule,
RouterLink,
MatTableModule,
MatPaginatorModule,
MatButtonModule
],
templateUrl: './connection-status-table.component.html',
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>
<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
mat-table
[dataSource]="dataSource"
@ -369,7 +369,7 @@
</div>
<div class="flex justify-between align-middle">
<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>
</button>
<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 { ProcessGroupStatusSnapshot, ProcessGroupStatusSnapshotEntity } from '../../../state';
import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component';
import { MatButtonModule } from '@angular/material/button';
export type SupportedColumns =
| 'name'
@ -42,7 +43,15 @@ export type SupportedColumns =
@Component({
selector: 'process-group-status-table',
standalone: true,
imports: [CommonModule, MatSortModule, MatTableModule, SummaryTableFilterModule, RouterLink, MatPaginatorModule],
imports: [
CommonModule,
MatSortModule,
MatTableModule,
SummaryTableFilterModule,
RouterLink,
MatPaginatorModule,
MatButtonModule
],
templateUrl: './process-group-status-table.component.html',
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>
<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
mat-table
[dataSource]="dataSource"
@ -285,7 +285,7 @@
</div>
<div class="flex justify-between align-middle">
<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>
</button>
<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 { ProcessorStatusSnapshot, ProcessorStatusSnapshotEntity } from '../../../state';
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';
@ -35,7 +36,15 @@ export type SupportedColumns = 'name' | 'type' | 'processGroup' | 'runStatus' |
templateUrl: './processor-status-table.component.html',
styleUrls: ['./processor-status-table.component.scss'],
standalone: true,
imports: [RouterLink, SummaryTableFilterModule, MatTableModule, MatSortModule, NgClass, MatPaginatorModule]
imports: [
RouterLink,
SummaryTableFilterModule,
MatTableModule,
MatSortModule,
NgClass,
MatPaginatorModule,
MatButtonModule
]
})
export class ProcessorStatusTable extends ComponentStatusTable<ProcessorStatusSnapshotEntity> {
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>
<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
mat-table
[dataSource]="dataSource"
@ -183,7 +183,7 @@
</div>
<div class="flex justify-between align-middle">
<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>
</button>
<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 { RemoteProcessGroupStatusSnapshot, RemoteProcessGroupStatusSnapshotEntity } from '../../../state';
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';
@Component({
selector: 'remote-process-group-status-table',
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',
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>
<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
mat-table
[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="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>
</button>
<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 { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { UserTable } from './user-table/user-table.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [UserListing],
exports: [UserListing],
imports: [CommonModule, NgxSkeletonLoaderModule, UserTable]
imports: [CommonModule, NgxSkeletonLoaderModule, UserTable, MatButtonModule]
})
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 class="flex flex-col justify-center">
@if (canModifyTenants(currentUser)) {
<button class="nifi-button" (click)="createClicked()">
<button mat-icon-button (click)="createClicked()">
<i class="fa fa-plus"></i>
</button>
}
</div>
</div>
<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
mat-table
[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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatButtonModule } from '@angular/material/button';
export interface TenantItem {
id: string;
@ -46,7 +47,15 @@ export interface Tenants {
selector: 'user-table',
standalone: true,
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']
})
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>
</form>
<div class="h-72 overflow-y-auto overflow-x-hidden border">
<div class="h-72 overflow-y-auto overflow-x-hidden">
<table
mat-table
[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.
-->
<div class="relative h-full border">
<div class="relative h-full">
<div class="controller-service-table listing-table absolute inset-0 overflow-y-auto">
<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;
.controller-service-table.listing-table {
@include mat.table-density(-4);
table {
.mat-column-moreDetails {
min-width: 90px;
.controller-service-table {
.listing-table {
table {
.mat-column-moreDetails {
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);
// 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');
// 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');
$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);
.extension-creation-dialog {
@include mat.button-density(-1);
.type-table {
.listing-table {
@include mat.table-density(-4);
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 {
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>
<input
matInput
class="border px-1.5 py-1 w-64"
class="px-1.5 py-1 w-64"
type="text"
(keyup)="filterTypes($event)"
placeholder="Filter types..." />
</mat-form-field>
</div>
</div>
<div class="type-table">
<div class="h-96 overflow-y-auto overflow-x-hidden border">
<div class="listing-table">
<div class="h-96 overflow-y-auto overflow-x-hidden">
<table
mat-table
[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 {
@include mat.button-density(-1);
.type-table {
@include mat.table-density(-4);
min-width: 740px;
.listing-table {
width: 740px;
table {
width: 100%;
td,
th {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
cursor: default;
}
.fa {
.fa.fa-shield {
width: 10px;
height: 14px;
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');
// Get hues from palette
$navbar-surface: mat.get-color-from-palette($primary-palette, "navbar");
$navbar-on-surface: mat.get-color-from-palette($primary-palette, "navbar-contrast");
$navbar-surface: mat.get-color-from-palette($primary-palette, 'navbar');
$navbar-on-surface: mat.get-color-from-palette($primary-palette, 'navbar-contrast');
@if ($navbar-surface) {
// Nothing to do here, we have special colors from the palette.
} @else {
// 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-on-surface: mat.get-color-from-palette($primary-palette, "default-contrast");
$navbar-surface: mat.get-color-from-palette($primary-palette, 'default');
$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.

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 {
.CodeMirror {
border: 1px solid $canvas-primary-palette-500;
background-color: $surface;
&.blank {
background: $primary-palette-default;
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;
.CodeMirror {
border-width: 1px;
border-style: solid;
font-family: monospace;
cursor: default;
line-height: normal;
&.blank {
border-width: 1px;
border-style: solid;
}
}
.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.
-->
<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="font-bold">Required field</div>
<div>
<!-- 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>
</button>
</div>
</div>
<div class="h-96 overflow-y-auto overflow-x-hidden border">
<table mat-table #propertyTable [dataSource]="dataSource">
<!-- Property Column -->
<ng-container matColumnDef="property">
<th mat-header-cell *matHeaderCellDef>Property</th>
<td mat-cell *matCellDef="let item" [class.font-bold]="item.descriptor.required">
<div class="flex justify-between items-center">
<div>
{{ item.descriptor.displayName }}
<div class="listing-table">
<div class="h-96 overflow-y-auto overflow-x-hidden">
<table mat-table #propertyTable [dataSource]="dataSource">
<!-- Property Column -->
<ng-container matColumnDef="property">
<th mat-header-cell *matHeaderCellDef>Property</th>
<td mat-cell *matCellDef="let item" [class.font-bold]="item.descriptor.required">
<div class="flex justify-between items-center">
<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>
@if (hasInfo(item.descriptor)) {
<div
class="fa fa-question-circle"
nifiTooltip
[tooltipComponentType]="PropertyTip"
[tooltipInputData]="getPropertyTipData(item)"
[delayClose]="false"></div>
}
</div>
</div>
</td>
</ng-container>
</td>
</ng-container>
<!-- Value Column -->
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let item">
<div
[id]="formatId(item)"
class="pointer"
cdkOverlayOrigin
#trigger="cdkOverlayOrigin"
(click)="openEditor(trigger, item, $event)">
@if (isNull(item.value)) {
<div class="unset">No value set</div>
} @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>
<!-- Value Column -->
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let item">
<div
[id]="formatId(item)"
class="pointer"
cdkOverlayOrigin
#trigger="cdkOverlayOrigin"
(click)="openEditor(trigger, item, $event)">
@if (isNull(item.value)) {
<div class="unset">No value set</div>
} @else {
<ng-container
*ngTemplateOutlet="
isEmptyString(resolvedValue) ? blank : nonBlank;
context: { $implicit: resolvedValue }
isSensitiveProperty(item.descriptor) ? sensitive : nonSensitive;
context: { $implicit: resolvePropertyValue(item) }
"></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 }}
<ng-template #sensitive>
<div class="sensitive">Sensitive value set</div>
</ng-template>
<ng-template #nonSensitive let-resolvedValue>
<ng-container
*ngTemplateOutlet="
isEmptyString(resolvedValue) ? blank : nonBlank;
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>
@if (hasExtraWhitespace(resolvedValue)) {
<div
class="fa fa-info"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getExtraWhitespaceTipData()"></div>
}
</div>
</ng-template>
}
</div>
</td>
</ng-container>
</ng-template>
}
</div>
</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
@if (item.descriptor.identifiesControllerService) {
<div
class="pointer fa fa-plus"
(click)="createNewControllerService(item)"
title="Create new service"></div>
}
@if (canConvertToParameter(item)) {
<div
class="pointer fa fa-level-up"
(click)="convertToParameterClicked(item)"
title="Convert to Parameter"></div>
}
@if (canGoToParameter(item)) {
<div
class="pointer fa fa-long-arrow-right"
(click)="goToParameterClicked(item)"
title="Go to Parameter"></div>
}
@if (canGoToService(item)) {
<div
class="pointer fa fa-long-arrow-right"
(click)="goToServiceClicked(item)"
title="Go to Service"></div>
}
@if (item.type == 'userDefined') {
<div class="pointer fa fa-trash" (click)="deleteProperty(item)" title="Delete"></div>
}
</div>
</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
@if (item.descriptor.identifiesControllerService) {
<div
class="pointer fa fa-plus"
(click)="createNewControllerService(item)"
title="Create new service"></div>
}
@if (canConvertToParameter(item)) {
<div
class="pointer fa fa-level-up"
(click)="convertToParameterClicked(item)"
title="Convert to Parameter"></div>
}
@if (canGoToParameter(item)) {
<div
class="pointer fa fa-long-arrow-right"
(click)="goToParameterClicked(item)"
title="Go to Parameter"></div>
}
@if (canGoToService(item)) {
<div
class="pointer fa fa-long-arrow-right"
(click)="goToServiceClicked(item)"
title="Go to Service"></div>
}
@if (item.type == 'userDefined') {
<div class="pointer fa fa-trash" (click)="deleteProperty(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)="selectProperty(row)"
[class.selected]="isSelected(row)"
[class.even]="even"></tr>
</table>
<ng-template
cdkConnectedOverlay
[cdkConnectedOverlayOrigin]="editorTrigger"
[cdkConnectedOverlayPositions]="editorPositions"
[cdkConnectedOverlayHasBackdrop]="true"
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
[cdkConnectedOverlayOpen]="editorOpen"
(detach)="closeEditor()"
(backdropClick)="closeEditor()">
@if (hasAllowableValues(editorItem)) {
<combo-editor
[item]="editorItem"
[getParameters]="getParameters"
[width]="editorWidth"
(ok)="savePropertyValue(editorItem, $event)"
(cancel)="closeEditor()"></combo-editor>
} @else {
<nf-editor
[item]="editorItem"
[getParameters]="getParameters"
[width]="editorWidth"
(ok)="savePropertyValue(editorItem, $event)"
(cancel)="closeEditor()"></nf-editor>
}
</ng-template>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr
mat-row
*matRowDef="let row; let even = even; columns: displayedColumns"
(click)="selectProperty(row)"
[class.selected]="isSelected(row)"
[class.even]="even"></tr>
</table>
<ng-template
cdkConnectedOverlay
[cdkConnectedOverlayOrigin]="editorTrigger"
[cdkConnectedOverlayPositions]="editorPositions"
[cdkConnectedOverlayHasBackdrop]="true"
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
[cdkConnectedOverlayOpen]="editorOpen"
(detach)="closeEditor()"
(backdropClick)="closeEditor()">
@if (hasAllowableValues(editorItem)) {
<combo-editor
[item]="editorItem"
[getParameters]="getParameters"
[width]="editorWidth"
(ok)="savePropertyValue(editorItem, $event)"
(cancel)="closeEditor()"></combo-editor>
} @else {
<nf-editor
[item]="editorItem"
[getParameters]="getParameters"
[width]="editorWidth"
(ok)="savePropertyValue(editorItem, $event)"
(cancel)="closeEditor()"></nf-editor>
}
</ng-template>
</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;
.property-table.listing-table {
@include mat.table-density(-4);
min-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;
}
.property-table {
.listing-table {
@include mat.table-density(-4);
width: 740px;
}
}

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;
border-left: 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;
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">
@if (instances.length > 0) {
<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]="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>
<div class="flex flex-1 justify-between">
<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>
</button>
<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 '@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.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
@ -42,21 +86,12 @@
$primary-palette-darker-contrast
);
$surface-highlight: utils.get-on-surface($canvas-color-config, 'highlight');
$on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
.listing-table {
border-color: $on-surface-lighter;
table {
width: 100%;
table-layout: fixed;
td,
th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
cursor: default;
}
th {
background-color: $header-surface !important;
color: $header-on-surface;
@ -67,6 +102,12 @@
}
}
th,
td {
border-bottom-width: 1px;
border-bottom-style: solid;
}
tr:hover {
background-color: $surface-highlight !important;
}
@ -81,36 +122,11 @@
.fa {
color: utils.get-color-on-surface($color-config, $surface);
width: 10px;
height: 14px;
text-align: center;
}
.icon {
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: 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,
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
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,
@ -43,7 +43,7 @@ $material-primary-light-palette: (
A100: rgba(#1491C1, 0.12), // .hint-pattern
A200: #aabec7, // .zero
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.
// 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.

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: #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,
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
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,
@ -43,7 +43,7 @@ $material-primary-light-palette: (
A100: rgba(20, 145, 193, 0.12), // .hint-pattern
A200: #aabec7, // .zero
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.
// 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