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

[NIFI-13022] rename semantic color classes to avoid conflict with angular material class names (#8628) 

* [NIFI-13022] rename semantic color classes to avoid conflict with angular material class names

* remove need for !important

* rename default material sementic color classes

This closes #8628
This commit is contained in:
Scott Aslan 2024-04-11 11:39:37 -04:00 committed by GitHub
parent bc589e273d
commit 44852fb5d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
136 changed files with 674 additions and 721 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/feature/access-policies.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation>
</header>
<div class="px-5">
<h3 class="text-xl bold mat-primary">Access Policies</h3>
<h3 class="text-xl bold primary-color">Access Policies</h3>
</div>
<div class="px-5 flex-1">
<router-outlet></router-outlet>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html
View File

@ -36,14 +36,14 @@
<mat-selection-list formControlName="userGroups" class="border">
@for (userGroup of filteredUserGroups; track userGroup) {
<mat-list-option togglePosition="before" [value]="userGroup.id">
<i class="fa fa-users mat-primary mr-3"></i>{{ userGroup.component.identity }}
<i class="fa fa-users primary-color mr-3"></i>{{ userGroup.component.identity }}
</mat-list-option>
}
</mat-selection-list>
</div>
}
@if (filteredUsers.length === 0 && filteredUserGroups.length === 0) {
<div class="mat-accent font-medium">All users and groups are assigned to this policy.</div>
<div class="accent-color font-medium">All users and groups are assigned to this policy.</div>
}
</mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) {

7
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

@ -29,7 +29,7 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header>User</th>
<td mat-cell *matCellDef="let item" class="items-center">
@if (item.tenantType === 'userGroup') {
<i class="fa fa-users mr-3"></i>
<i class="fa fa-users primary-color mr-3"></i>
}
{{ item.user }}
</td>
@ -40,7 +40,10 @@
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
@if (canRemove()) {
<div class="pointer fa fa-trash" title="Remove" (click)="removeClicked(item)"></div>
<div
class="pointer fa fa-trash primary-color"
title="Remove"
(click)="removeClicked(item)"></div>
}
</div>
</td>

33
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-theme.scss
View File

@ -1,33 +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:map';
@use '@angular/material' as mat;
@use '../../../../../assets/utils.scss' as utils;
@mixin generate-theme($nifi-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$on-surface: utils.get-on-surface($nifi-theme-color-config);
.component-access-policies {
.operation-context-name {
color: $on-surface;
}
}
}

16
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

@ -24,7 +24,7 @@
@if (policyComponentState$ | async; as policyComponentState) {
@if (flowConfiguration$ | async; as flowConfiguration) {
<div class="component-access-policies flex flex-col h-full gap-y-2">
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
<div class="mb-2">
@switch (accessPolicyState.policyStatus) {
@case (PolicyStatus.NotFound) {
@ -57,11 +57,13 @@
<div class="flex gap-x-2">
<div class="flex gap-x-1 -mt-2">
<div class="operation-context-logo flex flex-col">
<i class="mat-accent icon" [class]="getContextIcon()"></i>
<i class="accent-color icon" [class]="getContextIcon()"></i>
</div>
<div class="flex flex-col">
<div class="operation-context-name">{{ policyComponentState.label }}</div>
<div class="operation-context-type mat-primary">
<div class="operation-context-name on-surface-default">
{{ policyComponentState.label }}
</div>
<div class="operation-context-type primary-color">
{{ getContextType() }}
</div>
</div>
@ -93,6 +95,7 @@
<div class="flex gap-x-2">
<button
mat-icon-button
color="primary"
title="Add users/groups to this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="addTenantToPolicy()">
@ -100,6 +103,7 @@
</button>
<button
mat-icon-button
color="primary"
title="Delete this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="deletePolicy()">
@ -121,11 +125,11 @@
}
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshGlobalAccessPolicy()">
<button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
<i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ accessPolicyState.loadedTimestamp }}
</div>
</div>

8
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

@ -23,7 +23,7 @@
} @else {
@if (flowConfiguration$ | async; as flowConfiguration) {
<div class="global-access-policies flex flex-col h-full gap-y-2">
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
<div class="mb-2">
@switch (accessPolicyState.policyStatus) {
@case (PolicyStatus.NotFound) {
@ -109,6 +109,7 @@
<div class="flex gap-x-2 items-center">
<button
mat-icon-button
color="primary"
title="Add users/groups to this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="addTenantToPolicy()">
@ -116,6 +117,7 @@
</button>
<button
mat-icon-button
color="primary"
title="Delete this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="deletePolicy()">
@ -137,11 +139,11 @@
}
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshGlobalAccessPolicy()">
<button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
<i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ accessPolicyState.loadedTimestamp }}
</div>
</div>

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

@ -20,7 +20,7 @@
<navigation></navigation>
</header>
<div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold mat-primary">NiFi Bulletin Board</h3>
<h3 class="text-xl bold primary-color">NiFi Bulletin Board</h3>
<bulletin-board class="flex-1"></bulletin-board>
</div>
</div>

7
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,11 +34,14 @@
>Auto-refresh</mat-slide-toggle
>
</div>
<button mat-icon-button (click)="refreshBulletinBoard(bulletinBoardState.lastBulletinId)">
<button
mat-icon-button
color="primary"
(click)="refreshBulletinBoard(bulletinBoardState.lastBulletinId)">
<i class="fa fa-refresh" [class.fa-spin]="bulletinBoardState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ bulletinBoardState.loadedTimestamp }}
</div>
</div>

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

@ -20,7 +20,7 @@
<navigation></navigation>
</header>
<div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold mat-primary">NiFi Counters</h3>
<h3 class="text-xl bold primary-color">NiFi Counters</h3>
<counter-listing class="flex-1"></counter-listing>
</div>
</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.component.html
View File

@ -32,11 +32,11 @@
}
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshCounterListing()">
<button mat-icon-button color="primary" (click)="refreshCounterListing()">
<i class="fa fa-refresh" [class.fa-spin]="counterListingState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ counterListingState.loadedTimestamp }}
</div>
</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-table/counter-table.component.html
View File

@ -16,7 +16,7 @@
-->
<div class="counter-table h-full flex flex-col">
<div class="counter-table-filter-container">
<div class="mat-accent font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
<div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
<form [formGroup]="filterForm">
<div class="flex pt-2">
<div class="mr-2">
@ -77,7 +77,7 @@
<div class="flex items-center gap-x-3">
@if (canModifyCounters) {
<div
class="pointer fa fa-undo"
class="pointer fa fa-undo primary-color"
title="Reset Counter"
(click)="resetClicked(item, $event)"></div>
}

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

@ -20,7 +20,7 @@
<navigation></navigation>
</header>
<div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold mat-primary">Flow Configuration History</h3>
<h3 class="text-xl bold primary-color">Flow Configuration History</h3>
<flow-configuration-history-listing class="flex-1"></flow-configuration-history-listing>
</div>
</div>

6
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/action-details/action-details.component.html
View File

@ -22,7 +22,7 @@
<div class="panel-content flex flex-col h-full w-full gap-y-4">
<div>
<div>Id</div>
<div class="mat-accent font-medium">{{ actionEntity.sourceId }}</div>
<div class="accent-color font-medium">{{ actionEntity.sourceId }}</div>
</div>
@if (actionEntity.action; as action) {
@ -197,9 +197,9 @@
<div class="unset nifi-surface-default">Empty string set</div>
} @else {
@if (title == null) {
<div class="mat-accent font-medium">{{ value }}</div>
<div class="accent-color font-medium">{{ value }}</div>
} @else {
<div class="mat-accent font-medium" [title]="title">
<div class="accent-color font-medium" [title]="title">
{{ value }}
</div>
}

6
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 mat-icon-button (click)="purgeHistoryClicked()">
<button mat-icon-button color="primary" (click)="purgeHistoryClicked()">
<i class="fa fa-eraser"></i>
</button>
</div>
@ -111,11 +111,11 @@
<div class="flex justify-between align-middle">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refresh()">
<button mat-icon-button color="primary" (click)="refresh()">
<i class="fa fa-refresh" [class.fa-spin]="state.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">{{ state.loadedTimestamp }}</div>
<div class="accent-color font-medium">{{ state.loadedTimestamp }}</div>
</div>
<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

@ -32,7 +32,7 @@
<div class="flex items-center gap-x-3">
@if (canRead(item)) {
<div
class="pointer fa fa-info-circle"
class="pointer fa fa-info-circle primary-color"
title="View Details"
(click)="moreDetails(item)"></div>
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
View File

@ -1265,7 +1265,7 @@ export class CanvasUtils {
if (terminatedThreads > 0) {
return `active-thread-count-icon mat-warn`;
} else {
return `active-thread-count-icon mat-primary`;
return `active-thread-count-icon primary-color`;
}
})
.style('display', 'block')

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
View File

@ -386,7 +386,7 @@ export class PortManager {
updated
.select('text.run-status-icon')
.attr('class', function (d: any) {
let clazz = 'mat-primary';
let clazz = 'primary-color';
if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'invalid';
@ -452,7 +452,7 @@ export class PortManager {
.classed('transmitting nifi-success-default', function (d: any) {
return d.status.transmitting === true;
})
.classed('not-transmitting', function (d: any) {
.classed('not-transmitting primary-color', function (d: any) {
return d.status.transmitting !== true;
});

24
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
View File

@ -738,7 +738,7 @@ export class ProcessGroupManager {
.classed('nifi-success-default', function (d: any) {
return d.permissions.canRead && d.activeRemotePortCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.activeRemotePortCount === 0;
});
const transmittingCount = details
@ -759,10 +759,10 @@ export class ProcessGroupManager {
// update not transmitting
const notTransmitting = details
.select('text.process-group-not-transmitting')
.classed('not-transmitting', function (d: any) {
.classed('not-transmitting primary-color', function (d: any) {
return d.permissions.canRead && d.inactiveRemotePortCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.inactiveRemotePortCount === 0;
})
.attr('x', function () {
@ -794,7 +794,7 @@ export class ProcessGroupManager {
.classed('nifi-success-lighter', function (d: any) {
return d.permissions.canRead && d.component.runningCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.runningCount === 0;
})
.attr('x', function () {
@ -826,7 +826,7 @@ export class ProcessGroupManager {
.classed('nifi-warn-lighter', function (d: any) {
return d.permissions.canRead && d.component.stoppedCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.stoppedCount === 0;
})
.attr('x', function () {
@ -858,7 +858,7 @@ export class ProcessGroupManager {
.classed('invalid', function (d: any) {
return d.permissions.canRead && d.component.invalidCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.invalidCount === 0;
})
.attr('x', function () {
@ -890,7 +890,7 @@ export class ProcessGroupManager {
.classed('disabled', function (d: any) {
return d.permissions.canRead && d.component.disabledCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.disabledCount === 0;
})
.attr('x', function () {
@ -922,7 +922,7 @@ export class ProcessGroupManager {
.classed('nifi-success-default', function (d: any) {
return d.permissions.canRead && d.component.upToDateCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.upToDateCount === 0;
});
const upToDateCount = details
@ -946,7 +946,7 @@ export class ProcessGroupManager {
.classed('nifi-surface-default', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedCount === 0;
})
.attr('x', function () {
@ -978,7 +978,7 @@ export class ProcessGroupManager {
.classed('nifi-warn-lighter', function (d: any) {
return d.permissions.canRead && d.component.staleCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.staleCount === 0;
})
.attr('x', function () {
@ -1010,7 +1010,7 @@ export class ProcessGroupManager {
.classed('nifi-warn-lighter', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedAndStaleCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedAndStaleCount === 0;
})
.attr('x', function () {
@ -1044,7 +1044,7 @@ export class ProcessGroupManager {
.classed('nifi-surface-default', function (d: any) {
return d.permissions.canRead && d.component.syncFailureCount > 0;
})
.classed('zero', function (d: any) {
.classed('zero primary-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.syncFailureCount === 0;
})
.attr('x', function () {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
View File

@ -670,7 +670,7 @@ export class ProcessorManager {
updated
.select('text.run-status-icon')
.attr('class', function (d: any) {
let clazz = 'mat-primary';
let clazz = 'primary-color';
if (d.status.aggregateSnapshot.runStatus === 'Validating') {
clazz = 'validating nifi-surface-default';

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
View File

@ -616,7 +616,7 @@ export class RemoteProcessGroupManager {
.classed('transmitting nifi-success-default', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus === 'Transmitting';
})
.classed('not-transmitting', function (d: any) {
.classed('not-transmitting primary-color', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus !== 'Transmitting';
})
.each(function (this: any, d: any) {

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

@ -441,10 +441,6 @@
stroke: $nifi-theme-success-palette-A700;
}
text.process-group-contents-icon {
fill: $material-theme-primary-palette-default;
}
/* remote process group */
rect.remote-process-group-stats-border {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
View File

@ -29,13 +29,11 @@
// Get hues from palette
$nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
$surface: utils.get-surface($nifi-theme-color-config);
$on-surface: utils.get-on-surface($nifi-theme-color-config);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
.breadcrumb-container {
box-shadow: 0 1px 6px $nifi-theme-surface-palette-A200;
background-color: $surface;
border-top: 1px solid $on-surface-lighter;
color: $on-surface;
}
}

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

@ -16,7 +16,7 @@
-->
<footer>
<div class="breadcrumb-container">
<div class="breadcrumb-container on-surface-default">
<breadcrumbs
[entity]="(breadcrumbs$ | async)!"
[currentProcessGroupId]="(currentProcessGroupId$ | async)!"></breadcrumbs>

9
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-theme.scss
View File

@ -19,9 +19,8 @@
@use '@angular/material' as mat;
@use '../../../../../../../assets/utils.scss' as utils;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($nifi-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
// Get the color palette from the color-config.
@ -29,7 +28,6 @@
// Get hues from palette
$surface: utils.get-surface($nifi-theme-color-config);
$surface-darker: utils.get-surface($nifi-theme-color-config, darker);
$surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
$nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
@ -39,11 +37,6 @@
background-color: $surface;
border: 1px solid $on-surface-lighter;
.fa,
.icon {
color: utils.get-color-on-surface($material-theme-color-config, $surface-darker);
}
.navigation-control-header {
&:hover {
background: linear-gradient(-90deg, $surface-highlight 34px, transparent 35px);

14
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

@ -18,14 +18,14 @@
<div class="navigation-control flex flex-col gap-y-2">
<div class="navigation-control-header pointer flex justify-between" (click)="toggleCollapsed()">
<div class="flex items-center">
<div class="fa fa-compass"></div>
<div class="fa fa-compass primary-color"></div>
@if (!navigationCollapsed || !shouldDockWhenCollapsed) {
<div class="navigation-control-title">Navigation</div>
}
</div>
@if (!navigationCollapsed || !shouldDockWhenCollapsed) {
<div
class="fa navigation-control-expansion"
class="fa navigation-control-expansion primary-color"
[class.fa-minus-square-o]="!navigationCollapsed"
[class.fa-plus-square-o]="navigationCollapsed"></div>
}
@ -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 mat-icon-button type="button" (click)="zoomIn()">
<button mat-icon-button color="primary" type="button" (click)="zoomIn()">
<i class="fa fa-search-plus"></i>
</button>
<button mat-icon-button class="mr-2" type="button" (click)="zoomOut()">
<button mat-icon-button color="primary" class="mr-2" type="button" (click)="zoomOut()">
<i class="fa fa-search-minus"></i>
</button>
<button mat-icon-button type="button" (click)="zoomFit()">
<button mat-icon-button color="primary" type="button" (click)="zoomFit()">
<i class="ml-1 icon icon-zoom-fit"></i>
</button>
<button mat-icon-button type="button" (click)="zoomActual()">
<button mat-icon-button color="primary" type="button" (click)="zoomActual()">
<i class="ml-1 icon icon-zoom-actual"></i>
</button>
</div>
@if (isNotRootGroup()) {
<button mat-icon-button type="button" (click)="leaveProcessGroup()">
<button mat-icon-button color="primary" type="button" (click)="leaveProcessGroup()">
<i class="fa fa-level-up"></i>
</button>
}

21
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-theme.scss
View File

@ -19,9 +19,8 @@
@use '@angular/material' as mat;
@use '../../../../../../../assets/utils.scss' as utils;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($nifi-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
// Get the color palette from the color-config.
@ -32,7 +31,6 @@
$surface: utils.get-surface($nifi-theme-color-config);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
$on-surface-medium: utils.get-on-surface($nifi-theme-color-config, medium);
$on-surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
div.operation-control {
@ -40,27 +38,10 @@
background-color: $surface;
border: 1px solid $on-surface-lighter;
.fa,
.icon {
color: utils.get-color-on-surface($material-theme-color-config, $surface);
}
.operation-control-header {
&:hover {
background: linear-gradient(-90deg, $on-surface-highlight 34px, transparent 35px);
}
}
.operation-control-title {
color: $on-surface-medium;
}
.operation-context-name {
color: $on-surface-medium;
}
.operation-context-type {
color: utils.get-color-on-surface($material-theme-color-config, $surface);
}
}
}

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

@ -18,14 +18,14 @@
<div class="operation-control flex flex-col gap-y-2">
<div class="operation-control-header pointer flex justify-between" (click)="toggleCollapsed()">
<div class="flex items-center">
<div class="fa fa-hand-o-up"></div>
<div class="fa fa-hand-o-up primary-color"></div>
@if (!operationCollapsed || !shouldDockWhenCollapsed) {
<div class="operation-control-title">Operation</div>
<div class="operation-control-title on-surface-medium">Operation</div>
}
</div>
@if (!operationCollapsed || !shouldDockWhenCollapsed) {
<div
class="fa operation-control-expansion"
class="fa operation-control-expansion primary-color"
[class.fa-minus-square-o]="!operationCollapsed"
[class.fa-plus-square-o]="operationCollapsed"></div>
}
@ -36,19 +36,22 @@
<div class="operation-context flex flex-col gap-y-1">
<div class="flex gap-x-1">
<div class="operation-context-logo flex flex-col">
<i class="icon mat-accent" [class]="getContextIcon(selection)"></i>
<i class="icon accent-color" [class]="getContextIcon(selection)"></i>
</div>
<div class="flex flex-col">
<div class="operation-context-name">{{ getContextName(selection) }}</div>
<div class="operation-context-type">{{ getContextType(selection) }}</div>
<div class="operation-context-name on-surface-medium">{{ getContextName(selection) }}</div>
<div class="operation-context-type primary-color">
{{ getContextType(selection) }}
</div>
</div>
</div>
<div class="operation-context-id">{{ getContextId(selection) }}</div>
<div class="operation-context-id accent-color">{{ getContextId(selection) }}</div>
</div>
<div class="flex flex-col gap-y-1">
<div class="flex gap-x-1">
<button
mat-icon-button
color="primary"
type="button"
[disabled]="!canConfigure(selection)"
(click)="configure(selection)">
@ -57,6 +60,7 @@
@if (supportsManagedAuthorizer()) {
<button
mat-icon-button
color="primary"
class="mr-2"
type="button"
[disabled]="!canManageAccess(selection)"
@ -66,6 +70,7 @@
}
<button
mat-icon-button
color="primary"
type="button"
[disabled]="!canEnable(selection)"
(click)="enable(selection)">
@ -73,6 +78,7 @@
</button>
<button
mat-icon-button
color="primary"
class="mr-2"
type="button"
[disabled]="!canDisable(selection)"
@ -81,6 +87,7 @@
</button>
<button
mat-icon-button
color="primary"
type="button"
[disabled]="!canStart(selection)"
(click)="start(selection)">
@ -88,6 +95,7 @@
</button>
<button
mat-icon-button
color="primary"
type="button"
[disabled]="!canStop(selection)"
(click)="stop(selection)">
@ -97,6 +105,7 @@
<div class="flex gap-x-1">
<button
mat-icon-button
color="primary"
type="button"
[disabled]="!canCopy(selection)"
(click)="copy(selection)">
@ -104,6 +113,7 @@
</button>
<button
mat-icon-button
color="primary"
class="mr-2"
type="button"
[disabled]="!canPaste(selection)"
@ -112,6 +122,7 @@
</button>
<button
mat-icon-button
color="primary"
class="mr-2"
type="button"
[disabled]="!canGroup(selection)"
@ -120,6 +131,7 @@
</button>
<button
mat-icon-button
color="primary"
class="mr-2"
type="button"
[disabled]="!canColor(selection)"
@ -128,6 +140,7 @@
</button>
<button
mat-icon-button
color="primary"
type="button"
[disabled]="!canDelete(selection)"
(click)="delete(selection)">

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/flow-status/_flow-status.component-theme.scss
View File

@ -44,11 +44,6 @@
border-bottom: 1px solid $on-surface-lighter;
background: $surface-darker;
.fa,
.icon {
color: utils.get-color-on-surface($material-theme-color-config, $surface);
}
.controller-bulletins {
border-left: 1px solid $on-surface-lighter;
background-color: $material-theme-primary-palette-darker;

34
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
View File

@ -26,25 +26,25 @@
}
<div class="flex items-center gap-x-2" [title]="getActiveThreadsTitle()">
<div class="icon icon-threads" [class]="getActiveThreadsStyle()"></div>
<div class="mat-accent font-medium">{{ formatActiveThreads() }}</div>
<div class="accent-color font-medium">{{ formatActiveThreads() }}</div>
</div>
<div class="flex items-center gap-x-2" title="Total queued data">
<div class="fa fa-list" [class]="getQueuedStyle()"></div>
<div class="mat-accent font-medium">{{ controllerStatus.queued }}</div>
<div class="accent-color font-medium">{{ controllerStatus.queued }}</div>
</div>
<div class="flex items-center gap-x-2" title="Transmitting Remote Process Groups">
<div
class="fa fa-bullseye"
[class]="getActiveStyle(controllerStatus.activeRemotePortCount, 'nifi-success-default')"></div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.activeRemotePortCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Not Transmitting Remote Process Groups">
<div
class="icon icon-transmit-false"
[class]="getActiveStyle(controllerStatus.inactiveRemotePortCount, 'not-transmitting')"></div>
<div class="mat-accent font-medium">
[class]="getActiveStyle(controllerStatus.inactiveRemotePortCount, 'primary-color')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.inactiveRemotePortCount) }}
</div>
</div>
@ -52,7 +52,7 @@
<div
class="fa fa-play"
[class]="getActiveStyle(controllerStatus.runningCount, 'nifi-success-lighter')"></div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.runningCount) }}
</div>
</div>
@ -60,21 +60,21 @@
<div
class="fa fa-stop"
[class]="getActiveStyle(controllerStatus.stoppedCount, 'nifi-warn-lighter')"></div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.stoppedCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Invalid Components">
<div class="fa fa-warning" [class]="getActiveStyle(controllerStatus.invalidCount, 'invalid')"></div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.invalidCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Disabled Components">
<div
class="icon icon-enable-false"
[class]="getActiveStyle(controllerStatus.disabledCount, 'mat-primary')"></div>
<div class="mat-accent font-medium">
[class]="getActiveStyle(controllerStatus.disabledCount, 'primary-color')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.disabledCount) }}
</div>
</div>
@ -82,7 +82,7 @@
<div
class="fa fa-check"
[class]="getActiveStyle(controllerStatus.upToDateCount, 'nifi-success-default')"></div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.upToDateCount) }}
</div>
</div>
@ -90,7 +90,7 @@
<div
class="fa fa-asterisk"
[class]="getActiveStyle(controllerStatus.locallyModifiedCount, 'nifi-surface-default')"></div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.locallyModifiedCount) }}
</div>
</div>
@ -98,7 +98,7 @@
<div
class="fa fa-arrow-circle-up"
[class]="getActiveStyle(controllerStatus.staleCount, 'nifi-warn-lighter')"></div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.staleCount) }}
</div>
</div>
@ -106,7 +106,7 @@
<div
class="fa fa-exclamation-circle"
[class]="getActiveStyle(controllerStatus.locallyModifiedAndStaleCount, 'nifi-warn-lighter')"></div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.locallyModifiedAndStaleCount) }}
</div>
</div>
@ -114,13 +114,13 @@
<div
class="fa fa-question"
[class]="getActiveStyle(controllerStatus.syncFailureCount, 'nifi-surface-default')"></div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.syncFailureCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Last refresh">
<div class="fa fa-refresh" [class.fa-spin]="loadingStatus"></div>
<div class="mat-accent font-medium">{{ lastRefreshed }}</div>
<div class="fa fa-refresh primary-color" [class.fa-spin]="loadingStatus"></div>
<div class="accent-color font-medium">{{ lastRefreshed }}</div>
</div>
</div>
<div class="flex">

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
View File

@ -62,7 +62,7 @@ export class FlowStatus {
return 'warning';
}
return '';
return 'primary-color';
}
formatActiveThreads(): string {
@ -85,16 +85,16 @@ export class FlowStatus {
if (this.hasTerminatedThreads()) {
return 'warning';
} else if (this.controllerStatus.activeThreadCount === 0) {
return 'zero';
return 'zero primary-color-lighter';
}
return '';
return 'primary-color';
}
getQueuedStyle(): string {
if (this.controllerStatus.queued.indexOf('0 / 0') == 0) {
return 'zero';
return 'zero primary-color-lighter';
}
return '';
return 'primary-color';
}
formatValue(value: number | undefined) {
@ -106,7 +106,7 @@ export class FlowStatus {
getActiveStyle(value: number | undefined, activeStyle: string): string {
if (value === undefined || value <= 0) {
return 'zero';
return 'zero primary-color-lighter';
}
return activeStyle;
}

3
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

@ -26,8 +26,6 @@
// Get hues from palette
$surface: utils.get-surface($nifi-theme-color-config);
$surface-darker: utils.get-surface($nifi-theme-color-config, 'darker');
$on-surface: utils.get-on-surface($nifi-theme-color-config);
$on-surface-medium: utils.get-on-surface($nifi-theme-color-config, medium);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
.search-container {
@ -40,7 +38,6 @@
}
.search-input {
color: $on-surface;
background-color: $surface;
}
}

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.html
View File

@ -16,13 +16,13 @@
-->
<div class="h-8 flex justify-around search-container" [class.open]="searchInputVisible">
<button class="w-8" (click)="toggleSearchVisibility()"><i class="fa fa-search mat-primary"></i></button>
<button class="w-8" (click)="toggleSearchVisibility()"><i class="fa fa-search primary-color"></i></button>
<form [formGroup]="searchForm">
<input
type="text"
matInput
placeholder="Search"
class="search-input"
class="search-input on-surface-default"
[class.open]="searchInputVisible"
cdkOverlayOrigin
#searchInput="cdkOverlayOrigin"

4
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/destination/destination-funnel/destination-funnel.component.html
View File

@ -18,10 +18,10 @@
<div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5">
<div>To Funnel</div>
<div class="mat-accent font-medium">funnel</div>
<div class="accent-color font-medium">funnel</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div class="mat-accent font-medium">{{ groupName }}</div>
<div class="accent-color font-medium">{{ groupName }}</div>
</div>
</div>

4
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/destination/destination-output-port/destination-output-port.component.html
View File

@ -18,10 +18,10 @@
<div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5">
<div>To Output</div>
<div class="mat-accent font-medium">{{ name }}</div>
<div class="accent-color font-medium">{{ name }}</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div class="mat-accent font-medium">{{ groupName }}</div>
<div class="accent-color font-medium">{{ groupName }}</div>
</div>
</div>

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/connection/destination/destination-process-group/destination-process-group.component.html
View File

@ -49,6 +49,6 @@
}
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div class="mat-accent font-medium">{{ groupName }}</div>
<div class="accent-color font-medium">{{ groupName }}</div>
</div>
</div>

4
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/destination/destination-processor/destination-processor.component.html
View File

@ -18,10 +18,10 @@
<div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5">
<div>To Processor</div>
<div class="mat-accent font-medium">{{ processorName }}</div>
<div class="accent-color font-medium">{{ processorName }}</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div class="mat-accent font-medium">{{ groupName }}</div>
<div class="accent-color font-medium">{{ groupName }}</div>
</div>
</div>

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/connection/destination/destination-remote-process-group/destination-remote-process-group.component.html
View File

@ -47,6 +47,6 @@
}
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div class="mat-accent font-medium">{{ groupName }}</div>
<div class="accent-color font-medium">{{ groupName }}</div>
</div>
</div>

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/connection/prioritizers/_prioritizers.component-theme.scss
View File

@ -30,7 +30,6 @@
// Get hues from palette
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$surface: utils.get-surface($nifi-theme-color-config);
$on-surface: utils.get-on-surface($nifi-theme-color-config);
.prioritizers {
.prioritizers-list {
@ -38,7 +37,6 @@
}
.prioritizer-draggable-item {
color: $on-surface;
background: $surface;
}
}

9
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

@ -26,7 +26,10 @@
[cdkDropListData]="availablePrioritizers"
(cdkDropListDropped)="dropAvailable($event)">
@for (item of availablePrioritizers; track item; let i = $index) {
<div class="prioritizer-draggable-item border-b m-1" cdkDrag cdkDragPreviewContainer="parent">
<div
class="prioritizer-draggable-item border-b on-surface-default m-1"
cdkDrag
cdkDragPreviewContainer="parent">
<ng-container
*ngTemplateOutlet="
prioritizerItem;
@ -60,7 +63,7 @@
<div>{{ getPrioritizerLabel(item) }}</div>
@if (hasDescription(item)) {
<div
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getDescriptionTipData(item)"></div>
@ -68,7 +71,7 @@
</div>
@if (canClose) {
<button type="button" (click)="removeSelected(item, i)" [disabled]="isDisabled">
<i class="fa fa-times"></i>
<i class="fa fa-times primary-color"></i>
</button>
}
</ng-template>

4
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/source/source-funnel/source-funnel.component.html
View File

@ -18,10 +18,10 @@
<div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5">
<div>From Funnel</div>
<div class="mat-accent font-medium">funnel</div>
<div class="accent-color font-medium">funnel</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div class="mat-accent font-medium">{{ groupName }}</div>
<div class="accent-color font-medium">{{ groupName }}</div>
</div>
</div>

4
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/source/source-input-port/source-input-port.component.html
View File

@ -18,10 +18,10 @@
<div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5">
<div>From Input</div>
<div class="mat-accent font-medium">{{ name }}</div>
<div class="accent-color font-medium">{{ name }}</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div class="mat-accent font-medium">{{ groupName }}</div>
<div class="accent-color font-medium">{{ groupName }}</div>
</div>
</div>

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/connection/source/source-process-group/source-process-group.component.html
View File

@ -49,6 +49,6 @@
}
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div class="mat-accent font-medium">{{ groupName }}</div>
<div class="accent-color font-medium">{{ groupName }}</div>
</div>
</div>

4
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/source/source-processor/source-processor.component.html
View File

@ -18,11 +18,11 @@
<div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5">
<div>From Processor</div>
<div class="mat-accent font-medium">{{ name }}</div>
<div class="accent-color font-medium">{{ name }}</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div class="mat-accent font-medium">{{ groupName }}</div>
<div class="accent-color font-medium">{{ groupName }}</div>
</div>
<div class="flex flex-col">
<div>Relationships</div>

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/connection/source/source-remote-process-group/source-remote-process-group.component.html
View File

@ -47,6 +47,6 @@
}
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div class="mat-accent font-medium">{{ groupName }}</div>
<div class="accent-color font-medium">{{ groupName }}</div>
</div>
</div>

10
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/change-version-dialog/change-version-dialog.html
View File

@ -23,27 +23,27 @@
<div class="flex flex-1 flex-col gap-y-4">
<div>
<div>Registry</div>
<div class="mat-accent font-medium">{{ versionControlInformation.registryName }}</div>
<div class="accent-color font-medium">{{ versionControlInformation.registryName }}</div>
</div>
<div>
<div>Flow Name</div>
<div class="mat-accent font-medium">{{ versionControlInformation.flowName }}</div>
<div class="accent-color font-medium">{{ versionControlInformation.flowName }}</div>
</div>
</div>
<div class="flex flex-1 flex-col gap-y-4">
<div>
<div>Bucket</div>
<div class="mat-accent font-medium">{{ versionControlInformation.bucketName }}</div>
<div class="accent-color font-medium">{{ versionControlInformation.bucketName }}</div>
</div>
<div>
<div>Current Version</div>
<div class="mat-accent font-medium">{{ versionControlInformation.version }}</div>
<div class="accent-color font-medium">{{ versionControlInformation.version }}</div>
</div>
</div>
</div>
<div>
<div>Flow Description</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ versionControlInformation.flowDescription || 'No description provided' }}
</div>
</div>

6
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/change-version-progress-dialog/change-version-progress-dialog.html
View File

@ -20,7 +20,7 @@
<mat-dialog-content>
<div class="flex flex-col gap-y-4">
@if (flowUpdateRequest$ | async; as versionChangeRequest) {
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
@if (versionChangeRequest.request.complete) {
This Process Group version has changed.
} @else {
@ -31,7 +31,9 @@
<mat-progress-bar
mode="determinate"
[value]="versionChangeRequest.request.percentCompleted"></mat-progress-bar>
<div class="mat-accent font-medium">{{ versionChangeRequest.request.percentCompleted }}%</div>
<div class="accent-color font-medium">
{{ versionChangeRequest.request.percentCompleted }}%
</div>
</div>
}
</div>

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

@ -92,7 +92,7 @@
</div>
<div class="flex flex-col mb-5">
<div>Flow Description</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ selectedFlowDescription || 'No description provided' }}
</div>
</div>

7
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/local-changes-dialog/local-changes-table/local-changes-table.html
View File

@ -17,7 +17,7 @@
<div class="local-changes-table h-full flex flex-col">
<div>
<div class="mat-accent font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
<div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
<form [formGroup]="filterForm">
<div class="flex pt-2">
<div class="mr-2">
@ -67,7 +67,10 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3 pointer">
<div class="fa fa-long-arrow-right" title="Go To" (click)="goToClicked(item)"></div>
<div
class="fa fa-long-arrow-right primary-color"
title="Go To"
(click)="goToClicked(item)"></div>
</div>
</td>
</ng-container>

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/flow/save-version-dialog/save-version-dialog.component.html
View File

@ -23,16 +23,16 @@
<div class="flex flex-col gap-y-4 mb-6">
<div>
<div>Registry</div>
<div class="mat-accent font-medium">{{ versionControlInformation.registryName }}</div>
<div class="accent-color font-medium">{{ versionControlInformation.registryName }}</div>
</div>
<div>
<div>Bucket</div>
<div class="mat-accent font-medium">{{ versionControlInformation.bucketName }}</div>
<div class="accent-color font-medium">{{ versionControlInformation.bucketName }}</div>
</div>
<div class="flex">
<div class="flex-1">
<div>Flow Name</div>
<div class="mat-accent font-medium">{{ versionControlInformation.flowName }}</div>
<div class="accent-color font-medium">{{ versionControlInformation.flowName }}</div>
</div>
@if (!forceCommit) {
<div class="save-flow-version-label ml-3">{{ versionControlInformation.version + 1 }}</div>
@ -43,7 +43,7 @@
@if (versionControlInformation.flowDescription === '') {
<div class="unset nifi-surface-default">Empty string set</div>
} @else {
<div class="mat-accent">{{ versionControlInformation.flowDescription }}</div>
<div class="accent-color">{{ versionControlInformation.flowDescription }}</div>
}
</div>
</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html
View File

@ -25,7 +25,7 @@
<button
matSuffix
type="button"
class="upload-flow-definition mat-accent icon icon-template-import mr-2.5 pointer"
class="upload-flow-definition accent-color icon icon-template-import mr-2.5 pointer"
title="Browse"
(click)="flowUploadControl.click()">
<input type="file" #flowUploadControl class="hidden" (change)="attachFlow($event)" />
@ -64,7 +64,7 @@
<div class="flex flex-col">
<div>File to upload</div>
<div class="flex justify-between items-center">
<div class="mat-accent font-medium">{{ flowNameAttached }}</div>
<div class="accent-color font-medium">{{ flowNameAttached }}</div>
<div (click)="removeAttachedFlow()">X</div>
</div>
</div>

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
View File

@ -32,17 +32,17 @@
</div>
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="mat-accent font-medium">{{ request.entity.id }}</div>
<div class="accent-color font-medium">{{ request.entity.id }}</div>
</div>
<div class="flex flex-col mb-5">
<div>Type</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatType(request.entity) }}
</div>
</div>
<div class="flex flex-col mb-6">
<div>Bundle</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatBundle(request.entity) }}
</div>
</div>

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/processor/edit-processor/relationship-settings/relationship-settings.component.html
View File

@ -30,7 +30,7 @@
@for (relationship of relationships; track relationship; let i = $index) {
<div class="flex flex-col gap-y-1.5">
<div
class="mat-accent font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="relationship.name">
{{ relationship.name }}
</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/run-duration-slider/run-duration-slider.component.html
View File

@ -29,7 +29,7 @@
</mat-slider>
</div>
<div class="flex justify-between items-center">
<div class="mat-accent font-medium">Lower latency</div>
<div class="mat-accent font-medium">Higher throughput</div>
<div class="accent-color font-medium">Lower latency</div>
<div class="accent-color font-medium">Higher throughput</div>
</div>
</div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
View File

@ -21,11 +21,11 @@
<mat-dialog-content>
<div class="flex flex-col mb-6">
<div>Name</div>
<div class="mat-accent font-medium">{{ request.entity.component.name }}</div>
<div class="accent-color font-medium">{{ request.entity.component.name }}</div>
</div>
<div class="flex flex-col mb-6">
<div>Id</div>
<div class="mat-accent font-medium">{{ request.entity.component.id }}</div>
<div class="accent-color font-medium">{{ request.entity.component.id }}</div>
</div>
<div class="tab-content py-4 flex gap-x-4">
<div class="w-full">

8
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

@ -20,7 +20,7 @@
<navigation></navigation>
</header>
<div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold mat-primary">Controller Services</h3>
<h3 class="text-xl bold primary-color">Controller Services</h3>
@if (serviceState$ | async; as serviceState) {
@if (isInitialLoading(serviceState)) {
<div>
@ -32,7 +32,7 @@
<breadcrumbs
[entity]="serviceState.breadcrumb"
[currentProcessGroupId]="serviceState.processGroupId"></breadcrumbs>
<button mat-icon-button (click)="openNewControllerServiceDialog()">
<button mat-icon-button color="primary" (click)="openNewControllerServiceDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -58,11 +58,11 @@
}
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshControllerServiceListing()">
<button mat-icon-button color="primary" (click)="refreshControllerServiceListing()">
<i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ serviceState.loadedTimestamp }}
</div>
</div>

2
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/edit-remote-port/edit-remote-port.component.html
View File

@ -23,7 +23,7 @@
<div class="flex flex-col mb-5">
<div>Name</div>
<div
class="overflow-ellipsis overflow-hidden whitespace-nowrap mat-accent font-medium"
class="overflow-ellipsis overflow-hidden whitespace-nowrap accent-color font-medium"
[title]="request.entity.name">
{{ request.entity.name }}
</div>

16
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

@ -20,14 +20,14 @@
<navigation></navigation>
</header>
<div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold mat-primary pb-5">Manage Remote Ports</h3>
<h3 class="text-xl bold primary-color pb-5">Manage Remote Ports</h3>
@if (portsState$ | async; as portsState) {
<div class="grid-container grid grid-cols-2">
<div class="col-span-1 pr-5">
<div class="flex flex-col mb-5">
<div>Name</div>
<div
class="overflow-ellipsis overflow-hidden whitespace-nowrap mat-accent font-medium"
class="overflow-ellipsis overflow-hidden whitespace-nowrap accent-color font-medium"
[title]="portsState.rpg?.id">
{{ portsState.rpg?.id }}
</div>
@ -37,7 +37,7 @@
<div class="flex flex-col mb-5">
<div>Urls</div>
<div
class="overflow-ellipsis overflow-hidden whitespace-nowrap mat-accent font-medium"
class="overflow-ellipsis overflow-hidden whitespace-nowrap accent-color font-medium"
[title]="portsState.rpg?.component?.targetUri">
{{ portsState.rpg?.component?.targetUri }}
</div>
@ -69,7 +69,7 @@
@if (hasComments(item)) {
<div>
<div
class="pointer fa fa-comment"
class="pointer fa fa-comment primary-color"
nifiTooltip
[delayClose]="false"
[tooltipComponentType]="TextTip"
@ -197,7 +197,7 @@
port.transmitting === false
) {
<div
class="pointer fa fa-pencil"
class="pointer fa fa-pencil primary-color"
(click)="configureClicked(port, $event)"
title="Edit Port"></div>
}
@ -211,7 +211,7 @@
} @else {
@if (port.connected && port.exists) {
<div
class="pointer not-transmitting icon icon-transmit-false"
class="pointer not-transmitting icon icon-transmit-false primary-color"
(click)="toggleTransmission(port)"
title="Not Transmitting: click to toggle port transmission"></div>
}
@ -234,11 +234,11 @@
</div>
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshManageRemotePortsListing()">
<button mat-icon-button color="primary" (click)="refreshManageRemotePortsListing()">
<i class="fa fa-refresh" [class.fa-spin]="portsState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ portsState.loadedTimestamp }}
</div>
</div>

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html
View File

@ -17,7 +17,7 @@
<div class="login-form w-96 flex flex-col gap-y-5">
<div class="flex justify-between items-center">
<div class="login-title mat-primary">Log In</div>
<div class="login-title primary-color">Log In</div>
<div class="flex gap-x-2">
@if (hasToken()) {
<a (click)="logout()">log out</a>
@ -40,11 +40,7 @@
</mat-form-field>
</div>
<div class="flex justify-end">
<button
[disabled]="!loginForm.dirty || loginForm.invalid"
type="submit"
color="primary"
mat-button>
<button [disabled]="!loginForm.dirty || loginForm.invalid" type="submit" color="primary" mat-button>
Log in
</button>
</div>

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

@ -20,7 +20,7 @@
<navigation></navigation>
</header>
<div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold mat-primary">Parameter Contexts</h3>
<h3 class="text-xl bold primary-color">Parameter Contexts</h3>
<parameter-context-listing class="flex-1"></parameter-context-listing>
</div>
</div>

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/edit-parameter-context/edit-parameter-context.component.html
View File

@ -26,7 +26,7 @@
<div class="flex flex-col gap-y-1.5">
@for (updateStep of requestEntity.request.updateSteps; track updateStep) {
<div class="flex justify-between items-center">
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ updateStep.description }}
</div>
@if (updateStep.failureReason) {
@ -35,7 +35,7 @@
@if (updateStep.complete) {
<div class="fa fa-check nifi-success-default"></div>
} @else {
<div class="fa fa-spin fa-circle-o-notch"></div>
<div class="fa fa-spin fa-circle-o-notch primary-color"></div>
}
}
</div>
@ -51,7 +51,7 @@
<div class="flex flex-col">
<div>Parameter</div>
@if (parameters && parameters.length > 0) {
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ getUpdatedParameters() }}
</div>
} @else {
@ -81,7 +81,7 @@
@if (!isNew) {
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ request.parameterContext?.id }}
</div>
</div>

1
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

@ -39,7 +39,6 @@
}
.parameter-context-draggable-item {
color: $on-surface;
background: $surface;
}
}

6
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

@ -27,7 +27,7 @@
(cdkDropListDropped)="dropAvailable($event)">
@for (item of availableParameterContexts; track item; let i = $index) {
<div
class="parameter-context-draggable-item border-b m-1"
class="parameter-context-draggable-item border-b on-surface-default m-1"
cdkDrag
cdkDragPreviewContainer="parent"
[cdkDragDisabled]="!item.permissions.canRead">
@ -72,7 +72,7 @@
<div>{{ item.component.name }}</div>
@if (hasDescription(item)) {
<div
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getDescriptionTipData(item)"></div>
@ -80,7 +80,7 @@
</div>
@if (canClose) {
<button type="button" (click)="removeSelected(item, i)" [disabled]="isDisabled">
<i class="fa fa-times"></i>
<i class="fa fa-times primary-color"></i>
</button>
}
</ng-template>

6
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 mat-icon-button (click)="openNewParameterContextDialog()">
<button mat-icon-button color="primary" (click)="openNewParameterContextDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -39,13 +39,13 @@
</div>
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshParameterContextListing()">
<button mat-icon-button color="primary" (click)="refreshParameterContextListing()">
<i
class="fa fa-refresh"
[class.fa-spin]="parameterContextListingState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ parameterContextListingState.loadedTimestamp }}
</div>
</div>

16
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

@ -33,7 +33,7 @@
<div class="flex items-center gap-x-3">
<!-- TODO - handle read only in configure component? -->
@if (canRead(item)) {
<div class="pointer fa fa-info-circle"></div>
<div class="pointer fa fa-info-circle primary-color"></div>
}
</div>
}
@ -72,21 +72,27 @@
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
@if (canRead(item) && canWrite(item)) {
<div class="pointer fa fa-pencil" (click)="editClicked(item, $event)" title="Edit"></div>
<div
class="pointer fa fa-pencil primary-color"
(click)="editClicked(item, $event)"
title="Edit"></div>
}
@if (canDelete(item)) {
<div class="pointer fa fa-trash" (click)="deleteClicked(item, $event)" title="Delete"></div>
<div
class="pointer fa fa-trash primary-color"
(click)="deleteClicked(item, $event)"
title="Delete"></div>
}
@if (canManageAccessPolicies()) {
<div
class="pointer fa fa-key"
class="pointer fa fa-key primary-color"
(click)="$event.stopPropagation()"
[routerLink]="getPolicyLink(item)"
title="Access Policies"></div>
}
@if (canGoToParameterProvider(item)) {
<div
class="pointer fa fa-long-arrow-right"
class="pointer fa fa-long-arrow-right primary-color"
(click)="$event.stopPropagation()"
[routerLink]="getParameterProviderLink(item)"
title="Go to Parameter Provider"></div>

20
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

@ -19,7 +19,7 @@
<div class="flex basis-2/3 flex-col gap-y-3">
@if (canAddParameters) {
<div class="flex justify-end items-center">
<button mat-icon-button type="button" (click)="newParameterClicked()">
<button mat-icon-button color="primary" type="button" (click)="newParameterClicked()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -38,7 +38,7 @@
<div>
@if (hasDescription(item)) {
<div
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getDescriptionTipData(item)"></div>
@ -80,7 +80,7 @@
</div>
@if (hasExtraWhitespace(value)) {
<div
class="fa fa-info"
class="fa fa-info primary-color"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getExtraWhitespaceTipData()"></div>
@ -98,16 +98,22 @@
<div class="flex items-center gap-x-3">
@if (canGoToParameter(item)) {
<div
class="pointer fa fa-long-arrow-right"
class="pointer fa fa-long-arrow-right primary-color"
[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>
<div
class="pointer fa fa-pencil primary-color"
(click)="editClicked(item)"
title="Edit"></div>
}
@if (canDelete(item)) {
<div class="pointer fa fa-trash" (click)="deleteClicked(item)" title="Delete"></div>
<div
class="pointer fa fa-trash primary-color"
(click)="deleteClicked(item)"
title="Delete"></div>
}
</div>
</td>
@ -127,7 +133,7 @@
<div class="flex basis-1/3 flex-col justify-between gap-y-3 w-full">
<div class="flex flex-col">
<div>Parameter</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
@if (selectedItem) {
<span>{{ selectedItem.entity.parameter.name }}</span>
} @else {

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/process-group-references/process-group-references.component.html
View File

@ -17,7 +17,7 @@
<div class="process-group-references">
@if (!hasBoundProcessGroups()) {
<div class="mat-accent font-medium">No referencing Process Groups</div>
<div class="accent-color font-medium">No referencing Process Groups</div>
} @else {
<ul>
@if (authorizedProcessGroupReferences.length > 0) {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html
View File

@ -19,7 +19,7 @@
<header class="nifi-header">
<navigation></navigation>
</header>
<h3 class="px-5 text-xl bold mat-primary">Provenance</h3>
<h3 class="px-5 text-xl bold primary-color">Provenance</h3>
<div class="px-5 flex-1">
<router-outlet></router-outlet>
</div>

2
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/lineage/lineage.component.ts
View File

@ -750,7 +750,7 @@ export class LineageComponent implements OnInit {
flowfiles
.append('g')
.attr('class', 'mat-accent')
.attr('class', 'accent-color')
.attr('transform', function () {
return 'translate(-9,-9)';
})

20
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

@ -19,13 +19,13 @@
<error-banner></error-banner>
<div [class.hidden]="showLineage" class="h-full flex flex-col gap-y-2">
<div class="flex flex-col">
<div [class.invisible]="!filterApplied" class="mat-accent font-medium font-bold">
<div [class.invisible]="!filterApplied" class="accent-color font-medium font-bold">
Filter matched {{ filteredCount }} of {{ totalCount }}
</div>
<div class="flex justify-between">
<div>
Oldest event available:
<span class="mat-accent font-medium">{{ oldestEventAvailable }}</span>
<span class="accent-color font-medium">{{ oldestEventAvailable }}</span>
</div>
<div>
{{ resultsMessage }}
@ -56,7 +56,7 @@
</div>
</form>
<div class="flex flex-col justify-center">
<button mat-icon-button (click)="searchClicked()">
<button mat-icon-button color="primary" (click)="searchClicked()">
<i class="fa fa-search"></i>
</button>
</div>
@ -77,7 +77,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div
class="pointer fa fa-info-circle"
class="pointer fa fa-info-circle primary-color"
title="View Details"
(click)="viewDetailsClicked(item)"></div>
</td>
@ -147,12 +147,12 @@
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div
class="pointer icon icon-lineage"
class="pointer icon icon-lineage primary-color"
(click)="showLineageGraph(item)"
title="Show Lineage"></div>
@if (supportsGoTo(item)) {
<div
class="pointer fa fa-long-arrow-right"
class="pointer fa fa-long-arrow-right primary-color"
title="Go To"
(click)="goToClicked(item)"></div>
}
@ -172,11 +172,11 @@
</div>
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshClicked()">
<button mat-icon-button color="primary" (click)="refreshClicked()">
<i class="fa fa-refresh" [class.fa-spin]="loading"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">{{ loadedTimestamp }}</div>
<div class="accent-color font-medium">{{ loadedTimestamp }}</div>
</div>
<div>
<mat-paginator [pageSize]="100" [hidePageSize]="true" [showFirstLastButtons]="true"></mat-paginator>
@ -186,7 +186,7 @@
<div [class.hidden]="!showLineage" class="lineage h-full relative">
<div class="lineage-controls flex">
<div
class="pointer fa fa-long-arrow-left mat-primary"
class="pointer fa fa-long-arrow-left primary-color"
(click)="hideLineageGraph()"
title="Go back to event list"></div>
</div>
@ -201,7 +201,7 @@
<input matSliderThumb [value]="initialEventTimestampThreshold" (input)="handleInput($event)" />
</mat-slider>
</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatLabel(currentEventTimestampThreshold) }}
</div>
</div>

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

@ -24,7 +24,7 @@
<div class="absolute inset-0 flex gap-x-4">
<div class="w-full flex flex-col gap-y-3">
<div class="flex flex-col">
<div class="flowfile-header mat-primary">FlowFile Details</div>
<div class="flowfile-header primary-color">FlowFile Details</div>
</div>
<div class="flex flex-col">
<div>UUID</div>
@ -79,7 +79,7 @@
</div>
<div class="flex flex-col">
<div>Penalized</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ request.flowfile.penalized ? 'Yes' : 'No' }}
</div>
</div>
@ -95,7 +95,7 @@
</ng-container>
<ng-template #formatDuration let-duration>
<ng-container *ngIf="duration != null; else noDuration">
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatDurationValue(duration) }}
</div>
</ng-container>
@ -106,7 +106,7 @@
</div>
<div class="w-full flex flex-col gap-y-3">
<div class="flex flex-col">
<div class="flowfile-header">Content Claim</div>
<div class="flowfile-header primary-color">Content Claim</div>
</div>
<div
class="flex flex-col gap-y-3"
@ -181,7 +181,7 @@
<div class="tab-content py-4">
<div class="absolute inset-0 flex flex-col gap-y-4">
<div class="flex">
<div class="flowfile-header">Attribute Values</div>
<div class="flowfile-header primary-color">Attribute Values</div>
</div>
<div class="flex flex-col">
<div *ngFor="let attribute of request.flowfile.attributes | keyvalue">
@ -205,11 +205,11 @@
<div class="unset nifi-surface-default">Empty string set</div>
</ng-container>
<ng-template #nonEmptyValue>
<div class="mat-accent font-medium" *ngIf="title == null; else valueWithTitle">
<div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
{{ value }}
</div>
<ng-template #valueWithTitle>
<div class="mat-accent font-medium" [title]="title">{{ value }}</div>
<div class="accent-color font-medium" [title]="title">{{ value }}</div>
</ng-template>
</ng-template>
</ng-container>
@ -219,11 +219,11 @@
</ng-template>
<ng-template #formatContentValue let-value let-title="title">
<ng-container *ngIf="value != null; else nullValue">
<div class="mat-accent font-medium" *ngIf="title == null; else valueWithTitle">
<div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
{{ value }}
</div>
<ng-template #valueWithTitle>
<div class="mat-accent font-medium" [title]="title">{{ value }}</div>
<div class="accent-color font-medium" [title]="title">{{ value }}</div>
</ng-template>
</ng-container>
<ng-template #nullValue>

12
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

@ -16,10 +16,10 @@
-->
<div class="flowfile-table h-full flex flex-col gap-y-2">
<h3 class="text-xl bold queue-listing-header mat-primary">{{ connectionLabel }}</h3>
<h3 class="text-xl bold queue-listing-header primary-color">{{ connectionLabel }}</h3>
<error-banner></error-banner>
<div class="flex justify-between">
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
Display {{ displayObjectCount }} of {{ formatCount(queueSizeObjectCount) }} ({{
formatBytes(queueSizeByteCount)
}}) bytes
@ -46,7 +46,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div
class="pointer fa fa-info-circle"
class="pointer fa fa-info-circle primary-color"
title="View Details"
(click)="viewFlowFileClicked(item)"></div>
</td>
@ -125,19 +125,19 @@
<div class="flex items-center gap-x-3">
@if (item.size > 0) {
<div
class="pointer fa fa-download"
class="pointer fa fa-download primary-color"
title="Download content"
(click)="downloadContentClicked(item)"></div>
}
@if (contentViewerAvailable && item.size > 0) {
<div
class="pointer fa fa-eye"
class="pointer fa fa-eye primary-color"
title="View content"
(click)="viewContentClicked(item)"></div>
}
@if (currentUser.provenancePermissions.canRead) {
<div
class="pointer icon icon-provenance"
class="pointer icon icon-provenance primary-color"
title="Provenance"
[routerLink]="['/provenance']"
[queryParams]="{ flowFileUuid: item.uuid }"></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.component.html
View File

@ -36,11 +36,11 @@
</div>
<div class="flex justify-between">
<div class="flex items-center gap-x-2">
<button mat-icon-button (click)="refreshClicked()">
<button mat-icon-button color="primary" (click)="refreshClicked()">
<i class="fa fa-refresh" [class.fa-spin]="status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">{{ loadedTimestamp$ | async }}</div>
<div class="accent-color font-medium">{{ loadedTimestamp$ | async }}</div>
</div>
</div>
</div>

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

@ -20,7 +20,7 @@
<navigation></navigation>
</header>
<div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold mat-primary">NiFi Settings</h3>
<h3 class="text-xl bold primary-color">NiFi Settings</h3>
<div class="settings-tabs">
<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
@for (tab of tabLinks; track tab) {

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

@ -29,19 +29,19 @@
</mat-form-field>
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ request.flowAnalysisRule.id }}
</div>
</div>
<div class="flex flex-col mb-5">
<div>Type</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatType(request.flowAnalysisRule) }}
</div>
</div>
<div class="flex flex-col mb-5">
<div>Bundle</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatBundle(request.flowAnalysisRule) }}
</div>
</div>

30
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

@ -32,14 +32,14 @@
@if (canRead(item)) {
<div class="flex items-center gap-x-3">
<div
class="pointer fa fa-book"
class="pointer fa fa-book primary-color"
(click)="viewDocumentationClicked(item, $event)"
title="View Documentation"></div>
<!-- TODO - handle read only in configure component? -->
@if (hasComments(item)) {
<div>
<div
class="pointer fa fa-comment"
class="pointer fa fa-comment primary-color"
[delayClose]="false"
nifiTooltip
[tooltipComponentType]="TextTip"
@ -59,7 +59,7 @@
@if (hasBulletins(item)) {
<div>
<div
class="pointer fa fa-sticky-note-o"
class="pointer fa fa-sticky-note-o primary-color"
[delayClose]="false"
nifiTooltip
[tooltipComponentType]="BulletinsTip"
@ -123,26 +123,38 @@
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
@if (canConfigure(item)) {
<div class="pointer fa fa-cog" (click)="configureClicked(item, $event)" title="Edit"></div>
<div
class="pointer fa fa-cog primary-color"
(click)="configureClicked(item, $event)"
title="Edit"></div>
}
<!-- TODO - handle read only in configure component? -->
@if (canDisable(item)) {
<div
class="pointer fa icon icon-enable-false"
class="pointer fa icon icon-enable-false primary-color"
(click)="disableClicked(item)"
title="Disable"></div>
}
@if (canEnable(item)) {
<div class="pointer fa fa-flash" (click)="enabledClicked(item)" title="Enable"></div>
<div
class="pointer fa fa-flash primary-color"
(click)="enabledClicked(item)"
title="Enable"></div>
}
@if (canChangeVersion(item)) {
<div class="pointer fa fa-exchange" title="Change Version"></div>
<div class="pointer fa fa-exchange primary-color" title="Change Version"></div>
}
@if (canDelete(item)) {
<div class="pointer fa fa-trash" (click)="deleteClicked(item)" title="Delete"></div>
<div
class="pointer fa fa-trash primary-color"
(click)="deleteClicked(item)"
title="Delete"></div>
}
@if (canViewState(item)) {
<div class="pointer fa fa-tasks" (click)="viewStateClicked(item)" title="View State"></div>
<div
class="pointer fa fa-tasks primary-color"
(click)="viewStateClicked(item)"
title="View State"></div>
}
</div>
</td>

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

@ -169,7 +169,7 @@ export class FlowAnalysisRuleTable {
return 'invalid fa fa-warning';
} else {
if (entity.status.runStatus === 'DISABLED') {
return 'disabled mat-primary icon icon-enable-false';
return 'disabled primary-color icon icon-enable-false';
} else if (entity.status.runStatus === 'ENABLED') {
return 'enabled nifi-success-default fa fa-flash';
}

6
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 mat-icon-button (click)="openNewFlowAnalysisRuleDialog()">
<button mat-icon-button color="primary" (click)="openNewFlowAnalysisRuleDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -45,11 +45,11 @@
</div>
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshFlowAnalysisRuleListing()">
<button mat-icon-button color="primary" (click)="refreshFlowAnalysisRuleListing()">
<i class="fa fa-refresh" [class.fa-spin]="flowAnalysisRuleState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ flowAnalysisRuleState.loadedTimestamp }}
</div>
</div>

6
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 mat-icon-button (click)="openNewControllerServiceDialog()">
<button mat-icon-button color="primary" (click)="openNewControllerServiceDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -50,11 +50,11 @@
</div>
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshControllerServiceListing()">
<button mat-icon-button color="primary" (click)="refreshControllerServiceListing()">
<i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ serviceState.loadedTimestamp }}
</div>
</div>

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

@ -31,19 +31,19 @@
</div>
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ request.parameterProvider.id }}
</div>
</div>
<div class="flex flex-col mb-5">
<div>Type</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatType(request.parameterProvider) }}
</div>
</div>
<div class="flex flex-col mb-5">
<div>Bundle</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatBundle(request.parameterProvider) }}
</div>
</div>

46
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

@ -25,14 +25,14 @@
<div class="flex flex-col flex-1">
<div class="flex flex-col mb-4">
<div>Name</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ parameterProvider.component.name }}
</div>
</div>
<div class="flex flex-col mb-4">
<div>Parameter Groups</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ parameterGroupNames | sort | join }}
</div>
</div>
@ -45,14 +45,14 @@
<div
*ngFor="let updateStep of requestEntity.updateSteps"
class="flex justify-between items-center">
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ updateStep.description }}
</div>
<div
*ngIf="updateStep.complete; else stepInProgress"
class="fa fa-check complete nifi-success-default"></div>
<ng-template #stepInProgress>
<div class="fa fa-spin fa-circle-o-notch"></div>
<div class="fa fa-spin fa-circle-o-notch primary-color"></div>
</ng-template>
</div>
</div>
@ -65,12 +65,12 @@
<div class="flex flex-row items-center gap-x-2">
Parameter Contexts To Create
<i
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
title="Parameter groups set to be created as parameter contexts, pending apply."></i>
</div>
<div
*ngIf="Object.keys(parameterContextsToCreate).length > 0; else none"
class="mat-accent font-medium">
class="accent-color font-medium">
{{ Object.values(parameterContextsToCreate) | sort | join }}
</div>
</div>
@ -78,10 +78,12 @@
<div class="flex flex-row items-center gap-x-2">
Parameter Contexts To Update
<i
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
title="Synced parameter contexts to be updated, pending apply."></i>
</div>
<div *ngIf="parameterContextsToUpdate.length > 0; else none" class="mat-accent font-medium">
<div
*ngIf="parameterContextsToUpdate.length > 0; else none"
class="accent-color font-medium">
{{ parameterContextsToUpdate | sort | join }}
</div>
</div>
@ -89,7 +91,7 @@
<div class="flex flex-row items-center gap-x-2">
Affected Referencing Components
<i
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
title="Affected components referencing this parameter provider."></i>
</div>
<div class="relative h-full border">
@ -116,7 +118,7 @@
<div class="flex flex-col flex-1">
<div class="flex flex-col mb-4">
<div>Name</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ parameterProvider.component.name }}
</div>
</div>
@ -125,7 +127,7 @@
<div class="flex flex-row items-center gap-x-2">
Select To Configure a Parameter Group
<i
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
title="Discovered parameter groups from this parameter provider. Select a group to create a parameter context, then configure its parameter sensitivities."></i>
</div>
<div class="flex-1">
@ -173,7 +175,7 @@
<ng-template #paramContextSynced>
<div class="flex flex-col">
<div>Parameter Context Name</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ parameterGroupConfig.parameterContextName }}
</div>
</div>
@ -185,7 +187,7 @@
<div class="flex items-center gap-x-2">
Fetched Parameters
<i
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
title="Discovered parameters from the selected parameter group."></i>
</div>
<ul class="flex-1 overflow-y-auto border px-2">
@ -195,7 +197,7 @@
parameterGroupConfig.parameterSensitivities
)
"
class="mat-accent font-medium">
class="accent-color font-medium">
{{ param[0] }}
</li>
</ul>
@ -207,7 +209,7 @@
<div class="flex flex-row items-center gap-x-2">
Select Parameters To Be Set As Sensitive
<i
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
title="Only parameters that are not referenced can be modified."></i>
</div>
@ -253,11 +255,11 @@
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3 justify-end">
<div
class="fa fa-hashtag"
class="fa fa-hashtag primary-color"
title="Parameter is currently referenced by a property. The sensitivity cannot be changed."
*ngIf="isReferenced(item)"></div>
<div
class="fa fa-asterisk"
class="fa fa-asterisk primary-color"
[title]="getAffectedTooltip(item)"
*ngIf="isAffected(item)"></div>
</div>
@ -287,12 +289,12 @@
<div class="flex flex-row items-center gap-x-2">
Parameter Contexts To Create
<i
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
title="Parameter groups set to be created as parameter contexts, pending apply."></i>
</div>
<div
*ngIf="Object.keys(parameterContextsToCreate).length > 0; else none"
class="mat-accent font-medium">
class="accent-color font-medium">
{{ Object.values(parameterContextsToCreate) | sort | join }}
</div>
</div>
@ -300,12 +302,12 @@
<div class="flex flex-row items-center gap-x-2">
Parameter Contexts To Update
<i
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
title="Synced parameter contexts to be updated, pending apply."></i>
</div>
<div
*ngIf="parameterContextsToUpdate.length > 0; else none"
class="mat-accent font-medium">
class="accent-color font-medium">
{{ parameterContextsToUpdate | sort | join }}
</div>
</div>
@ -313,7 +315,7 @@
<div class="flex flex-row items-center gap-x-2">
Referencing Components
<i
class="fa fa-question-circle"
class="fa fa-question-circle primary-color"
title="Components referencing this selected parameter."></i>
</div>
<div class="relative h-full border">

4
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

@ -38,7 +38,9 @@
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
@if (isSyncedToParameterContext(item)) {
<div class="fa fa-star" title="Synced to a parameter context."></div>
<div
class="fa fa-star primary-color"
title="Synced to a parameter context."></div>
}
</div>
</td>

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

@ -17,7 +17,7 @@
<div class="parameter-provider-references">
@if (!parameterProviderReferences || parameterProviderReferences.length === 0) {
<div class="mat-accent font-medium">No referencing components</div>
<div class="accent-color font-medium">No referencing components</div>
} @else {
<ul>
<ng-container
@ -43,7 +43,7 @@
@if (references.length > 0) {
<li>
<h4>
<span class="mat-accent font-medium">{{ label }}</span> ({{ references.length }})
<span class="accent-color font-medium">{{ label }}</span> ({{ references.length }})
</h4>
<div class="references">
@for (reference of references; track reference) {
@ -62,7 +62,7 @@
@if (references.length > 0) {
<li>
<h4>
<span class="mat-accent font-medium">{{ label }}</span> ({{ references.length }})
<span class="accent-color font-medium">{{ label }}</span> ({{ references.length }})
</h4>
<div class="references">
@for (reference of references; track reference) {

16
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

@ -34,10 +34,12 @@
@if (canRead(item)) {
<div class="flex items-center gap-x-3">
<!-- TODO: open details -->
<div class="pointer fa fa-info-circle" title="View details"></div>
<div
class="pointer fa fa-info-circle primary-color"
title="View details"></div>
<div
class="pointer fa fa-book"
class="pointer fa fa-book primary-color"
(click)="viewDocumentationClicked(item, $event)"
title="View Documentation"></div>
@ -99,31 +101,31 @@
<div class="flex items-center gap-x-3">
@if (canConfigure(item)) {
<div
class="pointer fa fa-cog"
class="pointer fa fa-cog primary-color"
(click)="configureClicked(item, $event)"
title="Edit"></div>
}
@if (hasAdvancedUi(item)) {
<div
class="pointer fa fa-cogs"
class="pointer fa fa-cogs primary-color"
(click)="advancedClicked(item, $event)"
title="Advanced"></div>
}
@if (canFetch(item)) {
<div
class="pointer fa fa-arrow-circle-down"
class="pointer fa fa-arrow-circle-down primary-color"
(click)="fetchClicked(item, $event)"
title="Fetch Parameters"></div>
}
@if (canDelete(item)) {
<div
class="pointer fa fa-trash"
class="pointer fa fa-trash primary-color"
(click)="deleteClicked(item, $event)"
title="Remove"></div>
}
@if (canManageAccessPolicies()) {
<div
class="pointer fa fa-key"
class="pointer fa fa-key primary-color"
(click)="$event.stopPropagation()"
[routerLink]="getPolicyLink(item)"
title="Access Policies"></div>

5
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

@ -27,6 +27,7 @@
<div class="flex justify-end">
<button
mat-icon-button
color="primary"
(click)="openNewParameterProviderDialog()"
title="Add a new parameter provider">
<i class="fa fa-plus"></i>
@ -48,11 +49,11 @@
</div>
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshParameterProvidersListing()">
<button mat-icon-button color="primary" (click)="refreshParameterProvidersListing()">
<i class="fa fa-refresh" [class.fa-spin]="parameterProvidersState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ parameterProvidersState.loadedTimestamp }}
</div>
</div>

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

@ -24,7 +24,7 @@
<div class="tab-content py-4 flex flex-col">
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ request.registryClient.id }}
</div>
</div>
@ -36,7 +36,7 @@
</div>
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ request.registryClient.component.type }}
</div>
</div>

12
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

@ -41,7 +41,7 @@
}
@if (hasBulletins(item)) {
<div
class="mr-3 pointer fa fa-sticky-note-o"
class="mr-3 pointer fa fa-sticky-note-o primary-color"
nifiTooltip
[tooltipComponentType]="BulletinsTip"
[tooltipInputData]="getBulletinsTipData(item)"></div>
@ -101,10 +101,16 @@
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
@if (canConfigure(item)) {
<div class="pointer fa fa-cog" (click)="configureClicked(item, $event)" title="Edit"></div>
<div
class="pointer fa fa-cog primary-color"
(click)="configureClicked(item, $event)"
title="Edit"></div>
}
@if (canDelete(item)) {
<div class="pointer fa fa-trash" (click)="deleteClicked(item, $event)" title="Delete"></div>
<div
class="pointer fa fa-trash primary-color"
(click)="deleteClicked(item, $event)"
title="Delete"></div>
}
</div>
</td>

6
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 mat-icon-button (click)="openNewRegistryClientDialog()">
<button mat-icon-button color="primary" (click)="openNewRegistryClientDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -40,11 +40,11 @@
</div>
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshRegistryClientListing()">
<button mat-icon-button color="primary" (click)="refreshRegistryClientListing()">
<i class="fa fa-refresh" [class.fa-spin]="registryClientState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ registryClientState.loadedTimestamp }}
</div>
</div>

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

@ -32,19 +32,19 @@
</div>
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ request.reportingTask.id }}
</div>
</div>
<div class="flex flex-col mb-5">
<div>Type</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatType(request.reportingTask) }}
</div>
</div>
<div class="flex flex-col mb-5">
<div>Bundle</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ formatBundle(request.reportingTask) }}
</div>
</div>

37
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

@ -32,14 +32,14 @@
@if (canRead(item)) {
<div class="flex items-center gap-x-3">
<div
class="pointer fa fa-book"
class="pointer fa fa-book primary-color"
(click)="viewDocumentationClicked(item, $event)"
title="View Documentation"></div>
<!-- TODO - handle read only in configure component? -->
@if (hasComments(item)) {
<div>
<div
class="pointer fa fa-comment"
class="pointer fa fa-comment primary-color"
[delayClose]="false"
nifiTooltip
[tooltipComponentType]="TextTip"
@ -59,7 +59,7 @@
@if (hasBulletins(item)) {
<div>
<div
class="pointer fa fa-sticky-note-o"
class="pointer fa fa-sticky-note-o primary-color"
[delayClose]="false"
nifiTooltip
[tooltipComponentType]="BulletinsTip"
@ -117,32 +117,47 @@
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
@if (canStop(item)) {
<div class="pointer fa fa-stop" (click)="stopClicked(item)" title="Stop"></div>
<div
class="pointer fa fa-stop primary-color"
(click)="stopClicked(item)"
title="Stop"></div>
}
@if (canEdit(item)) {
<div class="pointer fa fa-cog" (click)="configureClicked(item, $event)" title="Edit"></div>
<div
class="pointer fa fa-cog primary-color"
(click)="configureClicked(item, $event)"
title="Edit"></div>
}
@if (hasAdvancedUi(item)) {
<div
class="pointer fa fa-cogs"
class="pointer fa fa-cogs primary-color"
(click)="advancedClicked(item, $event)"
title="Advanced"></div>
}
@if (canStart(item)) {
<div class="pointer fa fa-play" (click)="startClicked(item)" title="Start"></div>
<div
class="pointer fa fa-play primary-color"
(click)="startClicked(item)"
title="Start"></div>
}
@if (canChangeVersion(item)) {
<div class="pointer fa fa-exchange" title="Change Version"></div>
<div class="pointer fa fa-exchange primary-color" title="Change Version"></div>
}
@if (canDelete(item)) {
<div class="pointer fa fa-trash" (click)="deleteClicked(item)" title="Delete"></div>
<div
class="pointer fa fa-trash primary-color"
(click)="deleteClicked(item)"
title="Delete"></div>
}
@if (canViewState(item)) {
<div class="pointer fa fa-tasks" (click)="viewStateClicked(item)" title="View State"></div>
<div
class="pointer fa fa-tasks primary-color"
(click)="viewStateClicked(item)"
title="View State"></div>
}
@if (canManageAccessPolicies()) {
<div
class="pointer fa fa-key"
class="pointer fa fa-key primary-color"
(click)="$event.stopPropagation()"
[routerLink]="getPolicyLink(item)"
title="Access Policies"></div>

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.ts
View File

@ -129,7 +129,7 @@ export class ReportingTaskTable {
} else if (entity.status.runStatus === 'RUNNING') {
return 'fa fa-play nifi-success-lighter running';
} else {
return 'icon icon-enable-false mat-primary disabled';
return 'icon icon-enable-false primary-color disabled';
}
}
}

6
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 mat-icon-button (click)="openNewReportingTaskDialog()">
<button mat-icon-button color="primary" (click)="openNewReportingTaskDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -47,11 +47,11 @@
</div>
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refreshReportingTaskListing()">
<button mat-icon-button color="primary" (click)="refreshReportingTaskListing()">
<i class="fa fa-refresh" [class.fa-spin]="reportingTaskState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">
<div class="accent-color font-medium">
{{ reportingTaskState.loadedTimestamp }}
</div>
</div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
View File

@ -20,7 +20,7 @@
<navigation></navigation>
</header>
<div class="px-5 flex-1 flex flex-col gap-y-2">
<h3 class="text-xl bold mat-primary">
<h3 class="text-xl bold primary-color">
@if (selectedClusterNode$ | async; as selectedNode) {
@if (selectedNode.id !== 'All') {
{{ selectedNode.address }} Summary

4
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,11 +72,11 @@
<mat-dialog-actions>
<div class="flex justify-between align-middle w-full">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refresh()">
<button mat-icon-button color="primary" (click)="refresh()">
<i class="fa fa-refresh" [class.fa-spin]="loading$ | async"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">{{ loadedTimestamp$ | async }}</div>
<div class="accent-color font-medium">{{ loadedTimestamp$ | async }}</div>
</div>
<button mat-button mat-dialog-close tabindex="0">Close</button>

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.ts
View File

@ -115,7 +115,7 @@ export class PortClusterTable extends ComponentClusterTable<NodePortStatusSnapsh
case 'enabled':
return 'enabled fa fa-flash nifi-success-default';
case 'disabled':
return 'disabled icon icon-enable-false mat-primary';
return 'disabled icon icon-enable-false primary-color';
case 'validating':
return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
case 'invalid':

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.ts
View File

@ -126,7 +126,7 @@ export class ProcessorClusterTable extends ComponentClusterTable<NodeProcessorSt
case 'enabled':
return 'enabled fa fa-flash nifi-success-default';
case 'disabled':
return 'disabled icon icon-enable-false mat-primary';
return 'disabled icon icon-enable-false primary-color';
case 'validating':
return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
case 'invalid':

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.ts
View File

@ -114,7 +114,7 @@ export class RemoteProcessGroupClusterTable extends ComponentClusterTable<NodeRe
if (rpg.statusSnapshot.transmissionStatus === 'Transmitting') {
return 'transmitting nifi-success-default fa fa-bullseye';
} else {
return 'not-transmitting icon icon-transmit-false';
return 'not-transmitting icon icon-transmit-false primary-color';
}
}
}

8
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

@ -142,13 +142,13 @@
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div
class="pointer fa fa-long-arrow-right"
class="pointer fa fa-long-arrow-right primary-color"
[routerLink]="getPortLink(item)"
(click)="$event.stopPropagation()"
title="Go to {{ portType }} port"></div>
@if (connectedToCluster) {
<div
class="pointer fa fa-cubes"
class="pointer fa fa-cubes primary-color"
title="View Clustered {{ portType | titlecase }} Port Details"
(click)="viewClusteredDetailsClicked($event, item)"></div>
}
@ -171,11 +171,11 @@
</div>
<div class="flex justify-between align-middle">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refresh.next()">
<button mat-icon-button color="primary" (click)="refresh.next()">
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">{{ loadedTimestamp }}</div>
<div class="accent-color font-medium">{{ loadedTimestamp }}</div>
</div>
<div>
<mat-paginator

2
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

@ -112,7 +112,7 @@ export class PortStatusTable extends ComponentStatusTable<PortStatusSnapshotEnti
case 'enabled':
return 'enabled fa fa-flash nifi-success-default';
case 'disabled':
return 'disabled icon icon-enable-false mat-primary';
return 'disabled icon icon-enable-false primary-color';
case 'validating':
return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
case 'invalid':

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

@ -16,7 +16,7 @@
-->
<div class="summary-table-filter-container">
<div class="mat-accent font-medium {{ showFilterMatchedLabel ? 'visible' : 'invisible' }}">
<div class="accent-color font-medium {{ showFilterMatchedLabel ? 'visible' : 'invisible' }}">
Filter matched {{ filteredCount }} of {{ totalCount }}
</div>
<form [formGroup]="filterForm">

10
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

@ -206,19 +206,19 @@
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div
class="pointer fa fa-long-arrow-right"
class="pointer fa fa-long-arrow-right primary-color"
[routerLink]="getConnectionLink(item)"
(click)="$event.stopPropagation()"
title="Go to connection"></div>
<div
class="pointer fa fa-area-chart"
class="pointer fa fa-area-chart primary-color"
title="View Status History"
(click)="viewStatusHistoryClicked($event, item)"></div>
@if (connectedToCluster) {
<div
class="pointer fa fa-cubes"
class="pointer fa fa-cubes primary-color"
title="View Clustered Connection Details"
(click)="viewClusteredDetailsClicked($event, item)"></div>
}
@ -241,11 +241,11 @@
</div>
<div class="flex justify-between align-middle">
<div class="refresh-container flex items-center gap-x-2">
<button mat-icon-button (click)="refresh.next()">
<button mat-icon-button color="primary" (click)="refresh.next()">
<i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="mat-accent font-medium">{{ loadedTimestamp }}</div>
<div class="accent-color font-medium">{{ loadedTimestamp }}</div>
</div>
<div>
<mat-paginator

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