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

[NIFI-13739] initial M3 theme (#9270) 

* [NIFI-13739] initial M3 theme

* rename m3- themes

* sync package-lock

* update theme imports

* remove unused caution darker

* update some class names, restore background colors for datepicker, table, expansion panel, and dialog surfaces, use secondary color variants

* configurable border color

* swap primary and secondary colors

* a few more updates

* zero styles

* bump deps

* review feedback

* adjust status history sizes

* update new canvas item hover and grip to be configurable via theme

* rebase

This closes #9270
This commit is contained in:
Scott Aslan 2024-09-23 07:55:25 -05:00 committed by GitHub
parent 07611ded2b
commit adab03bc3e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
205 changed files with 6109 additions and 6531 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/_jolt-transform-json-ui.component-theme.scss
View File

@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $supplemental-theme) {
@mixin generate-theme($material-theme, $config) {
.jolt-transform-json-ui {
@include mat.button-density(-1);

18
nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html
View File

@ -68,7 +68,7 @@
<div class="jolt-spec-editor grow mb-2">
<div class="h-full flex flex-col">
<div>
<div class="mat-body-strong">
<div class="font-bold">
Jolt Specification
<i
class="fa fa-info-circle primary-color ml-2"
@ -80,7 +80,7 @@
<div class="flex justify-end mb-2">
<button
mat-icon-button
color="primary"
class="primary-icon-button"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getFormatTooltip()"
@ -192,16 +192,11 @@
<div class="flex flex-1 justify-between">
<button
mat-stroked-button
color="primary"
(click)="validateJoltSpec()"
[disabled]="isValidateDisabled()">
Validate
</button>
<button
color="primary"
mat-flat-button
(click)="saveProperties()"
[disabled]="isSaveDisabled()">
<button mat-flat-button (click)="saveProperties()" [disabled]="isSaveDisabled()">
Save
</button>
</div>
@ -246,7 +241,7 @@
<div class="flex justify-end mb-4">
<button
mat-icon-button
color="primary"
class="primary-icon-button"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="getFormatTooltip()"
@ -288,8 +283,8 @@
<button
title="Clear All"
mat-icon-button
class="primary-icon-button"
[disabled]="isEmpty()"
color="primary"
type="button"
(click)="clearAttributesClicked()">
<i class="fa fa-eraser"></i>
@ -348,7 +343,6 @@
<div class="flex flex-1 justify-start">
<button
mat-stroked-button
color="primary"
(click)="transformJoltSpec()"
[disabled]="isTransformDisabled()">
Transform
@ -396,7 +390,7 @@
} @else {
@if (processorDetailsLoading$ | async) {
<div class="h-full flex items-center justify-center">
<mat-spinner color="primary"></mat-spinner>
<mat-spinner></mat-spinner>
</div>
} @else if (processorDetailsError()) {
<div class="flex flex-1 justify-center items-center">

2
nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/index.html
View File

@ -23,7 +23,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="assets/icons/nifi-drop.svg" />
</head>
<body class="mat-app-background mat-typography">
<body class="mat-app-background mat-typography text-base">
<nifi-jolt-transform-json-ui></nifi-jolt-transform-json-ui>
</body>
</html>

38
nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss
View File

@ -15,8 +15,6 @@
* limitations under the License.
*/
// Custom Theming for Angular Material
// For more information: https://v16.material.angular.io/guide/theming-your-components
@use '@angular/material' as mat;
@use 'sass:map';
@use 'libs/shared/src/assets/styles/app' as app;
@ -30,8 +28,6 @@
@use 'codemirror/addon/lint/lint.css';
@import 'font-awesome';
@import 'libs/shared/src/assets/themes/supplemental';
// To override the NiFi theme, you need to set the variables $material-theme-light and $material-theme-dark
@import 'libs/shared/src/assets/themes/material';
// Include the common styles for Angular Material. We include this here so that you only
@ -47,24 +43,20 @@
@include app.styles();
@include listing-table.styles();
// Include the light theme color styles.
@include mat.all-component-themes($material-theme-light);
html {
@include mat.typography-hierarchy($m3-light-theme);
@include mat.all-component-themes($m3-light-theme);
@include app.generate-material-theme($m3-light-theme, $m3-light-theme-config);
@include codemirror-theme.generate-codemirror-theme($m3-light-theme, $m3-light-theme-config);
@include listing-table.generate-theme($m3-light-theme, $m3-light-theme-config);
@include jolt-transform-json-ui.generate-theme($m3-light-theme, $m3-light-theme-config);
// generate light mode stylesheets
@include app.generate-material-theme($material-theme-light);
@include app.generate-supplemental-theme($supplemental-theme-light);
@include codemirror-theme.generate-codemirror-theme($material-theme-light, $supplemental-theme-light);
@include listing-table.generate-theme($material-theme-light, $supplemental-theme-light);
@include jolt-transform-json-ui.generate-theme($material-theme-light, $supplemental-theme-light);
.dark-theme {
// Include the dark theme color styles.
@include mat.all-component-colors($material-theme-dark);
// generate dark mode stylesheets
@include app.generate-material-theme($material-theme-dark);
@include app.generate-supplemental-theme($supplemental-theme-dark);
@include codemirror-theme.generate-codemirror-theme($material-theme-dark, $supplemental-theme-dark);
@include listing-table.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include jolt-transform-json-ui.generate-theme($material-theme-dark, $supplemental-theme-dark);
.dark-theme {
//@include mat.typography-hierarchy($m3-dark-theme);
@include mat.all-component-colors($m3-dark-theme);
@include app.generate-material-theme($m3-dark-theme, $m3-dark-theme-config);
@include codemirror-theme.generate-codemirror-theme($m3-dark-theme, $m3-dark-theme-config);
@include listing-table.generate-theme($m3-dark-theme, $m3-dark-theme-config);
@include jolt-transform-json-ui.generate-theme($m3-dark-theme, $m3-dark-theme-config);
}
}

29
nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss
View File

@ -18,19 +18,24 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.m2-get-color-config($material-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($material-theme-color-config, is-dark);
$material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
$material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
$material-theme-secondary-palette-lighter: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), lighter)
);
.splash {
background-color: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-darker);
background-color: if(
$is-material-dark,
$material-theme-secondary-palette-default,
$material-theme-secondary-palette-lighter
);
}
}

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.html
View File

@ -18,7 +18,7 @@
@if (guardLoading) {
<div class="splash h-screen p-20">
<div class="splash-img h-full flex items-center justify-center">
<mat-spinner color="warn"></mat-spinner>
<mat-spinner class="error-spinner"></mat-spinner>
</div>
</div>
} @else {

10
nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts
View File

@ -54,6 +54,7 @@ import { PropertyVerificationEffects } from './state/property-verification/prope
import { loadingInterceptor } from './service/interceptors/loading.interceptor';
import { LoginConfigurationEffects } from './state/login-configuration/login-configuration.effects';
import { BannerTextEffects } from './state/banner-text/banner-text.effects';
import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions } from '@angular/material/tooltip';
const entry = localStorage.getItem('disable-animations');
let disableAnimations: string = entry !== null ? JSON.parse(entry).item : '';
@ -63,6 +64,12 @@ if (disableAnimations !== 'true' && disableAnimations !== 'false') {
disableAnimations = window.matchMedia('(prefers-reduced-motion: reduce)').matches.toString();
}
export const customTooltipDefaults: MatTooltipDefaultOptions = {
showDelay: 2000,
hideDelay: 0,
touchendHideDelay: 1000
};
@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
@ -111,7 +118,8 @@ if (disableAnimations !== 'true' && disableAnimations !== 'false') {
cookieName: '__Secure-Request-Token',
headerName: 'Request-Token'
})
)
),
{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: customTooltipDefaults }
]
})
export class AppModule {}

8
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html
View File

@ -43,17 +43,13 @@
</div>
}
@if (filteredUsers.length === 0 && filteredUserGroups.length === 0) {
<div class="accent-color font-medium">All users and groups are assigned to this policy.</div>
<div class="tertiary-color font-medium">All users and groups are assigned to this policy.</div>
}
</mat-dialog-content>
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
<button
mat-button
[disabled]="addTenantsForm.invalid || saving.value"
(click)="addClicked()"
color="primary">
<button mat-flat-button [disabled]="addTenantsForm.invalid || saving.value" (click)="addClicked()">
<span *nifiSpinner="saving.value">Add</span>
</button>
</mat-dialog-actions>

8
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/access-policies/ui/common/override-policy-dialog/override-policy-dialog.component.html
View File

@ -20,14 +20,12 @@
<mat-dialog-content>
<div class="mb-5">Do you want to override with a copy of the inherited policy or an empty policy?</div>
<mat-radio-group formControlName="override">
<mat-radio-button color="primary" value="copy">Copy</mat-radio-button>
<mat-radio-button color="primary" value="empty">Empty</mat-radio-button>
<mat-radio-button value="copy">Copy</mat-radio-button>
<mat-radio-button value="empty">Empty</mat-radio-button>
</mat-radio-group>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [disabled]="overridePolicyForm.invalid" (click)="overrideClicked()" color="primary">
Override
</button>
<button mat-flat-button [disabled]="overridePolicyForm.invalid" (click)="overrideClicked()">Override</button>
</mat-dialog-actions>
</form>

10
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html
View File

@ -57,7 +57,7 @@
</div>
</div>
</form>
<div class="accent-color font-medium my-2">
<div class="tertiary-color font-medium my-2">
<div>
@switch (accessPolicyState.policyStatus) {
@case (PolicyStatus.NotFound) {
@ -90,7 +90,7 @@
<div class="flex gap-x-2">
<button
mat-icon-button
color="primary"
class="primary-icon-button"
title="Add users/groups to this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="addTenantToPolicy()">
@ -98,7 +98,7 @@
</button>
<button
mat-icon-button
color="primary"
class="primary-icon-button"
title="Delete this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="deletePolicy()">
@ -120,11 +120,11 @@
}
<div class="flex justify-between mt-2">
<div class="text-sm flex items-center gap-x-2">
<button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
<button mat-icon-button class="primary-icon-button" (click)="refreshGlobalAccessPolicy()">
<i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ accessPolicyState.loadedTimestamp }}
</div>
</div>

10
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html
View File

@ -79,7 +79,7 @@
</div>
</div>
</form>
<div class="accent-color font-medium my-2">
<div class="tertiary-color font-medium my-2">
<div>
@switch (accessPolicyState.policyStatus) {
@case (PolicyStatus.NotFound) {
@ -112,7 +112,7 @@
<div class="flex gap-x-2 items-center">
<button
mat-icon-button
color="primary"
class="primary-icon-button"
title="Add users/groups to this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="addTenantToPolicy()">
@ -120,7 +120,7 @@
</button>
<button
mat-icon-button
color="primary"
class="primary-icon-button"
title="Delete this policy"
[disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
(click)="deletePolicy()">
@ -142,11 +142,11 @@
}
<div class="flex justify-between mt-2">
<div class="text-sm flex items-center gap-x-2">
<button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
<button mat-icon-button class="primary-icon-button" (click)="refreshGlobalAccessPolicy()">
<i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ accessPolicyState.loadedTimestamp }}
</div>
</div>

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts
View File

@ -144,7 +144,7 @@ export class BulletinBoardList implements AfterViewInit {
getSeverity(severity: string) {
switch (severity.toLowerCase()) {
case 'error':
return 'bulletin-error warn-color';
return 'bulletin-error error-color-darker';
case 'warn':
case 'warning':
return 'bulletin-warn caution-color';

6
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html
View File

@ -30,18 +30,18 @@
<div class="flex justify-between">
<div class="text-sm flex items-center gap-x-2">
<div class="mr-6">
<mat-slide-toggle color="primary" [checked]="autoRefresh" (change)="autoRefreshToggle($event)"
<mat-slide-toggle [checked]="autoRefresh" (change)="autoRefreshToggle($event)"
>Auto-refresh</mat-slide-toggle
>
</div>
<button
mat-icon-button
color="primary"
class="primary-icon-button"
(click)="refreshBulletinBoard(bulletinBoardState.lastBulletinId)">
<i class="fa fa-refresh" [class.fa-spin]="bulletinBoardState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ bulletinBoardState.loadedTimestamp }}
</div>
</div>

6
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/cluster/feature/cluster.component.html
View File

@ -27,7 +27,7 @@
@if (getTabLinks(); as tabs) {
<!-- Don't show the tab bar if there is only 1 tab to show -->
<div class="cluster-tabs" [class.hidden]="tabs.length === 1">
<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
@for (tab of tabs; track tab) {
<a
mat-tab-link
@ -49,11 +49,11 @@
<div class="flex justify-between align-middle">
<div class="text-sm flex items-center gap-x-2">
<button mat-icon-button color="primary" (click)="refresh()">
<button mat-icon-button class="primary-icon-button" (click)="refresh()">
<i class="fa fa-refresh" [class.fa-spin]="listingStatus() === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="accent-color font-medium">{{ loadedTimestamp() }}</div>
<div class="tertiary-color font-medium">{{ loadedTimestamp() }}</div>
</div>
</div>
</div>

10
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-detail-dialog/cluster-node-detail-dialog.component.html
View File

@ -20,18 +20,18 @@
<div class="node-details flex flex-col gap-y-4">
<div class="flex flex-col">
<div>Address</div>
<div class="accent-color font-medium">{{ node.address }}:{{ node.apiPort }}</div>
<div class="tertiary-color font-medium">{{ node.address }}:{{ node.apiPort }}</div>
</div>
<div class="flex flex-col">
<div>Node Id</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ node.nodeId }}
</div>
</div>
<div class="flex flex-col">
<div>Node Events</div>
@if (node.events && node.events.length > 0) {
<div class="accent-color font-medium text-base">
<div class="tertiary-color font-medium text-base">
<ul>
@for (event of node.events; track event) {
<li>{{ event.timestamp }} - {{ event.message }}</li>
@ -39,11 +39,11 @@
</ul>
</div>
} @else {
<div class="unset surface-color">No Events</div>
<div class="unset neutral-color">No Events</div>
}
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" color="primary" mat-button mat-dialog-close>Close</button>
<button type="button" mat-flat-button mat-dialog-close>Close</button>
</mat-dialog-actions>

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.html
View File

@ -106,7 +106,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatStartTime(item)">
@if (!item.nodeStartTime) {
<div class="unset surface-color">No value set</div>
<div class="unset neutral-color">No value set</div>
} @else {
{{ formatStartTime(item) }}
}
@ -122,7 +122,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatHeartbeat(item)">
@if (!item.heartbeat) {
<div class="unset surface-color">No value set</div>
<div class="unset neutral-color">No value set</div>
} @else {
{{ formatHeartbeat(item) }}
}

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/cluster/ui/common/cluster-table-filter/cluster-table-filter.component.html
View File

@ -37,6 +37,6 @@
</div>
</div>
</form>
<div class="my-2 accent-color font-medium">Filter matched {{ filteredCount }} of {{ totalCount }}</div>
<div class="my-2 tertiary-color font-medium">Filter matched {{ filteredCount }} of {{ totalCount }}</div>
</div>
</div>

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/feature/content-viewer.component.html
View File

@ -43,7 +43,7 @@
<div class="flex justify-end gap-x-2 items-center">
<div>mime.type</div>
@if (mimeType) {
<div class="font-medium accent-color">{{ mimeType }}</div>
<div class="font-medium tertiary-color">{{ mimeType }}</div>
} @else {
<div class="unset">unknown</div>
<div

4
nifi-frontend/src/main/frontend/apps/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="text-sm flex items-center gap-x-2">
<button mat-icon-button color="primary" (click)="refreshCounterListing()">
<button mat-icon-button class="primary-icon-button" (click)="refreshCounterListing()">
<i class="fa fa-refresh" [class.fa-spin]="counterListingState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ counterListingState.loadedTimestamp }}
</div>
</div>

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.html
View File

@ -35,7 +35,7 @@
</div>
</div>
</form>
<div class="my-2 accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
<div class="my-2 tertiary-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
</div>
<div class="flex-1 relative">
<div class="listing-table overflow-y-auto absolute inset-0">

12
nifi-frontend/src/main/frontend/apps/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="accent-color font-medium">{{ actionEntity.sourceId }}</div>
<div class="tertiary-color font-medium">{{ actionEntity.sourceId }}</div>
</div>
@if (actionEntity.action; as action) {
@ -194,23 +194,23 @@
<ng-template #formatValue let-value let-title="title">
@if (value != null) {
@if (value === '') {
<div class="unset surface-color">Empty string set</div>
<div class="unset neutral-color">Empty string set</div>
} @else {
@if (title == null) {
<div class="accent-color font-medium">{{ value }}</div>
<div class="tertiary-color font-medium">{{ value }}</div>
} @else {
<div class="accent-color font-medium" [title]="title">
<div class="tertiary-color font-medium" [title]="title">
{{ value }}
</div>
}
}
} @else {
<div class="unset surface-color">No value set</div>
<div class="unset neutral-color">No value set</div>
}
</ng-template>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button color="primary" mat-button mat-dialog-close>Ok</button>
<button mat-flat-button mat-dialog-close>Ok</button>
</mat-dialog-actions>
</div>
</div>

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

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
View File

@ -51,7 +51,7 @@
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Name</div>
</th>
<td mat-cell *matCellDef="let item" [title]="formatName(item)">
<span [class.surface-color]="!item.action?.sourceName" [class.blank]="!item.action?.sourceName">{{
<span [class.neutral-color]="!item.action?.sourceName" [class.blank]="!item.action?.sourceName">{{
formatName(item)
}}</span>
</td>
@ -118,7 +118,7 @@
[class.even]="even"
(click)="select(row)"
[class.unset]="!canRead(row)"
[class.surface-color]="!canRead(row)"
[class.neutral-color]="!canRead(row)"
[class.selected]="isSelected(row)"></tr>
</table>
</div>

8
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
View File

@ -1458,9 +1458,9 @@ export class CanvasUtils {
case ComponentType.Processor:
case ComponentType.InputPort:
case ComponentType.OutputPort:
return `active-thread-count accent-color`;
return `active-thread-count tertiary-color`;
default:
return `active-thread-count primary-contrast`;
return `active-thread-count neutral-contrast`;
}
})
.style('display', 'block')
@ -1492,12 +1492,12 @@ export class CanvasUtils {
case ComponentType.InputPort:
case ComponentType.OutputPort:
if (terminatedThreads > 0) {
return `active-thread-count-icon warn-color-darker`;
return `active-thread-count-icon error-color-darker`;
} else {
return `active-thread-count-icon primary-color`;
}
default:
return `active-thread-count-icon primary-contrast`;
return `active-thread-count-icon neutral-contrast`;
}
})
.style('display', 'block')

8
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
View File

@ -998,7 +998,7 @@ export class ConnectionManager {
return d.component.source.running;
}
})
.classed('stopped warn-color-lighter', function () {
.classed('stopped error-color-lighter', function () {
if (d.component.source.exists === false) {
return false;
} else {
@ -1113,7 +1113,7 @@ export class ConnectionManager {
return d.component.destination.running;
}
})
.classed('stopped warn-color-lighter', function () {
.classed('stopped error-color-lighter', function () {
if (d.component.destination.exists === false) {
return false;
} else {
@ -1723,7 +1723,7 @@ export class ConnectionManager {
.attr('display', function (d: any) {
const predicted: number = d.status.aggregateSnapshot.predictions?.predictedPercentBytes ?? -1;
if (predicted >= 0) {
return 'unset surface-color';
return 'unset neutral-color';
} else {
// don't show it if there is not a valid prediction
return 'none';
@ -1791,7 +1791,7 @@ export class ConnectionManager {
.attr('display', function (d: any) {
const predicted = d.status.aggregateSnapshot.predictions?.predictedPercentCount ?? -1;
if (predicted >= 0) {
return 'unset surface-color';
return 'unset neutral-color';
} else {
// don't show it if there not a valid prediction
return 'none';

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
View File

@ -382,7 +382,7 @@ export class PortManager {
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
clazz = 'running success-color-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
clazz = 'stopped warn-color-lighter';
clazz = 'stopped error-color-lighter';
}
return `run-status-icon ${clazz}`;
@ -439,7 +439,7 @@ export class PortManager {
.classed('transmitting success-color', function (d: any) {
return d.status.transmitting === true;
})
.classed('not-transmitting surface-color', function (d: any) {
.classed('not-transmitting neutral-color', function (d: any) {
return d.status.transmitting !== true;
});

54
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
View File

@ -131,7 +131,7 @@ export class ProcessGroupManager {
.attr('y', 20)
.attr('width', 300)
.attr('height', 16)
.attr('class', 'process-group-name primary-contrast');
.attr('class', 'process-group-name secondary-contrast');
// process group name
processGroup.append('text').attr('x', 10).attr('y', 21).attr('class', 'version-control');
@ -253,7 +253,7 @@ export class ProcessGroupManager {
.append('text')
.attr('x', 10)
.attr('y', 49)
.attr('class', 'process-group-transmitting process-group-contents-icon primary-color-lighter')
.attr('class', 'process-group-transmitting process-group-contents-icon secondary-color')
.attr('font-family', 'FontAwesome')
.text('\uf140')
.append('title')
@ -269,10 +269,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
.attr(
'class',
'process-group-not-transmitting process-group-contents-icon primary-color-lighter'
)
.attr('class', 'process-group-not-transmitting process-group-contents-icon secondary-color')
.attr('font-family', 'flowfont')
.text('\ue80a')
.append('title')
@ -288,7 +285,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
.attr('class', 'process-group-running process-group-contents-icon primary-color-lighter')
.attr('class', 'process-group-running process-group-contents-icon secondary-color')
.attr('font-family', 'FontAwesome')
.text('\uf04b')
.append('title')
@ -304,7 +301,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
.attr('class', 'process-group-stopped process-group-contents-icon primary-color-lighter')
.attr('class', 'process-group-stopped process-group-contents-icon secondary-color')
.attr('font-family', 'FontAwesome')
.text('\uf04d')
.append('title')
@ -320,7 +317,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
.attr('class', 'process-group-invalid process-group-contents-icon primary-color-lighter')
.attr('class', 'process-group-invalid process-group-contents-icon secondary-color')
.attr('font-family', 'FontAwesome')
.text('\uf071')
.append('title')
@ -336,7 +333,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
.attr('class', 'process-group-disabled process-group-contents-icon primary-color-lighter')
.attr('class', 'process-group-disabled process-group-contents-icon secondary-color')
.attr('font-family', 'flowfont')
.text('\ue802')
.append('title')
@ -355,7 +352,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
.attr('class', 'process-group-up-to-date process-group-contents-icon primary-color-lighter')
.attr('class', 'process-group-up-to-date process-group-contents-icon secondary-color')
.attr('font-family', 'FontAwesome')
.text('\uf00c')
.append('title')
@ -375,10 +372,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
.attr(
'class',
'process-group-locally-modified process-group-contents-icon primary-color-lighter'
)
.attr('class', 'process-group-locally-modified process-group-contents-icon secondary-color')
.attr('font-family', 'FontAwesome')
.text('\uf069')
.append('title')
@ -398,7 +392,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
.attr('class', 'process-group-stale process-group-contents-icon primary-color-lighter')
.attr('class', 'process-group-stale process-group-contents-icon secondary-color')
.attr('font-family', 'FontAwesome')
.text('\uf0aa')
.append('title')
@ -420,7 +414,7 @@ export class ProcessGroupManager {
})
.attr(
'class',
'process-group-locally-modified-and-stale process-group-contents-icon primary-color-lighter'
'process-group-locally-modified-and-stale process-group-contents-icon secondary-color'
)
.attr('font-family', 'FontAwesome')
.text('\uf06a')
@ -441,7 +435,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
.attr('class', 'process-group-sync-failure process-group-contents-icon primary-color-lighter')
.attr('class', 'process-group-sync-failure process-group-contents-icon secondary-color')
.attr('font-family', 'FontAwesome')
.text('\uf128')
.append('title')
@ -765,7 +759,7 @@ export class ProcessGroupManager {
// update not transmitting
const notTransmitting = details
.select('text.process-group-not-transmitting')
.classed('not-transmitting surface-color', function (d: any) {
.classed('not-transmitting neutral-color', function (d: any) {
return d.permissions.canRead && d.inactiveRemotePortCount > 0;
})
.classed('zero', function (d: any) {
@ -829,7 +823,7 @@ export class ProcessGroupManager {
// update stopped
const stopped = details
.select('text.process-group-stopped')
.classed('warn-color-lighter', function (d: any) {
.classed('error-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.stoppedCount > 0;
})
.classed('zero', function (d: any) {
@ -893,7 +887,7 @@ export class ProcessGroupManager {
// update disabled
const disabled = details
.select('text.process-group-disabled')
.classed('disabled surface-color', function (d: any) {
.classed('disabled neutral-color', function (d: any) {
return d.permissions.canRead && d.component.disabledCount > 0;
})
.classed('zero', function (d: any) {
@ -949,7 +943,7 @@ export class ProcessGroupManager {
// update locally modified
const locallyModified = details
.select('text.process-group-locally-modified')
.classed('surface-color', function (d: any) {
.classed('neutral-color', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedCount > 0;
})
.classed('zero', function (d: any) {
@ -981,7 +975,7 @@ export class ProcessGroupManager {
// update stale
const stale = details
.select('text.process-group-stale')
.classed('warn-color-lighter', function (d: any) {
.classed('error-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.staleCount > 0;
})
.classed('zero', function (d: any) {
@ -1013,7 +1007,7 @@ export class ProcessGroupManager {
// update locally modified and stale
const locallyModifiedAndStale = details
.select('text.process-group-locally-modified-and-stale')
.classed('warn-color-lighter', function (d: any) {
.classed('error-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedAndStaleCount > 0;
})
.classed('zero', function (d: any) {
@ -1047,7 +1041,7 @@ export class ProcessGroupManager {
// update sync failure
const syncFailure = details
.select('text.process-group-sync-failure')
.classed('surface-color', function (d: any) {
.classed('neutral-color', function (d: any) {
return d.permissions.canRead && d.component.syncFailureCount > 0;
})
.classed('zero', function (d: any) {
@ -1085,19 +1079,19 @@ export class ProcessGroupManager {
if (self.isUnderVersionControl(processGroupData)) {
const vciState = processGroupData.versionedFlowState;
if (vciState === 'SYNC_FAILURE') {
return `version-control surface-color`;
return `version-control neutral-color`;
} else if (vciState === 'LOCALLY_MODIFIED_AND_STALE') {
return `version-control warn-color-lighter`;
return `version-control error-color-lighter`;
} else if (vciState === 'STALE') {
return `version-control warn-color-lighter`;
return `version-control error-color-lighter`;
} else if (vciState === 'LOCALLY_MODIFIED') {
return `version-control surface-color`;
return `version-control neutral-color`;
} else {
// up to date
return `version-control success-color`;
}
} else {
return 'version-control surface-contrast';
return 'version-control neutral-contrast';
}
})
.text(function () {

8
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
View File

@ -603,7 +603,7 @@ export class ProcessorManager {
//update the processor icon
processor
.select('text.processor-icon')
.classed('unauthorized accent-color', !processorData.permissions.canRead);
.classed('unauthorized tertiary-color', !processorData.permissions.canRead);
//update the processor border
processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead);
@ -651,7 +651,7 @@ export class ProcessorManager {
} else {
// undo changes made above
processor.select('text.processor-icon').attr('class', () => {
return 'processor-icon accent-color';
return 'processor-icon tertiary-color';
});
processor.select('rect.processor-icon-container').style('fill', null);
processor.select('rect.border').style('stroke', null);
@ -688,13 +688,13 @@ export class ProcessorManager {
let clazz = 'primary-color';
if (d.status.aggregateSnapshot.runStatus === 'Validating') {
clazz = 'validating surface-color';
clazz = 'validating neutral-color';
} else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'invalid caution-color';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
clazz = 'running success-color-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
clazz = 'stopped warn-color-lighter';
clazz = 'stopped error-color-lighter';
}
return `run-status-icon ${clazz}`;

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
View File

@ -130,7 +130,7 @@ export class RemoteProcessGroupManager {
.attr('y', 20)
.attr('width', 305)
.attr('height', 16)
.attr('class', 'remote-process-group-name primary-contrast');
.attr('class', 'remote-process-group-name secondary-contrast');
this.selectableBehavior.activate(remoteProcessGroup);
this.quickSelectBehavior.activate(remoteProcessGroup);
@ -612,7 +612,7 @@ export class RemoteProcessGroupManager {
.classed('transmitting success-color', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus === 'Transmitting';
})
.classed('not-transmitting surface-color', function (d: any) {
.classed('not-transmitting neutral-color', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus !== 'Transmitting';
})
.each(function (this: any, d: any) {

433
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
View File

@ -18,98 +18,69 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.m2-get-color-config($material-theme);
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the palettes from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
$material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
$supplemental-theme-success-palette: map.get($supplemental-theme-color-config, 'accent');
$supplemental-theme-caution-palette: map.get($supplemental-theme-color-config, 'warn');
// Get hues from palette
$material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
$material-theme-accent-palette-default: mat.m2-get-color-from-palette($material-theme-accent-palette, default);
// Canvas colors
$supplemental-theme-surface-palette-default: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
default
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
$material-theme-secondary-palette-darker: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), darker)
);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
$material-theme-secondary-palette-lighter: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), lighter)
);
$supplemental-theme-success-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-success-palette,
lighter
$material-theme-tertiary-palette-default: mat.get-theme-color(
$material-theme,
tertiary,
map.get(map.get($config, tertiary), default)
);
$supplemental-theme-success-palette-50: mat.m2-get-color-from-palette($supplemental-theme-success-palette, 50);
$supplemental-theme-success-palette-900: mat.m2-get-color-from-palette($supplemental-theme-success-palette, 900);
$material-theme-warn-palette-darker: mat.m2-get-color-from-palette($material-theme-warn-palette, darker);
$supplemental-theme-caution-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-caution-palette,
darker
$material-theme-error-palette-default: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), default)
);
$material-theme-error-palette-darker: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), darker)
);
$material-theme-neutral-palette-default: mat.get-theme-color(
$material-theme,
neutral,
if($is-material-dark, 40, 35)
);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
$border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$success-lighter: map.get($config, success-lighter);
// Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$drop-shadow-color: black;
$connection-drop-shadow-color: if($is-dark, black, white);
$supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
);
$supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
);
$surface-contrast: if(
$is-dark,
$supplemental-theme-surface-palette-darker-contrast,
$supplemental-theme-surface-palette-lighter-contrast
);
$alternate-surface: if(
$is-dark,
rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
$connection-drop-shadow-color: if($is-material-dark, black, white);
.canvas-background {
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
background-image: linear-gradient(
to right,
if($is-dark, $supplemental-theme-success-palette-900, $supplemental-theme-success-palette-50) 1px,
transparent 1px
),
linear-gradient(
to bottom,
if($is-dark, $supplemental-theme-success-palette-900, $supplemental-theme-success-palette-50) 1px,
transparent 1px
);
}
mat-sidenav {
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
background-image: linear-gradient(to right, if($is-material-dark, #0d1411, #e5ebed) 1px, transparent 1px),
linear-gradient(to bottom, if($is-material-dark, #0d1411, #e5ebed) 1px, transparent 1px);
}
/* svg styles */
@ -120,7 +91,7 @@
*/
g.component {
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
}
.transparent {
@ -128,89 +99,117 @@
}
g.component rect.body {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
rect.banner {
fill: rgba(
if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker),
if($is-material-dark, $material-theme-neutral-palette-lighter, $material-theme-neutral-palette-darker),
0.08
);
}
rect.odd {
fill: rgba(
if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker),
if($is-material-dark, $material-theme-neutral-palette-lighter, $material-theme-neutral-palette-darker),
0.025
);
}
rect.even {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
rect.row-border {
fill: $alternate-surface;
fill: $border-color;
}
g.component rect.body.unauthorized {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
g.component rect.border,
g.connections rect.border {
stroke: $alternate-surface;
stroke: $border-color;
stroke-width: if(
$is-dark,
$is-material-dark,
2,
1
); // Dark mode gets a wider stroke to provide contrast between the canvas and components
}
g.component rect.border.unauthorized {
stroke: $material-theme-warn-palette-darker !important;
stroke: if(
$is-material-dark,
$material-theme-error-palette-default,
$material-theme-error-palette-darker
) !important;
}
g.component rect.border.ghost {
stroke: $supplemental-theme-surface-palette-default !important;
stroke: $material-theme-neutral-palette-default !important;
}
g.component rect.processor-icon-container.unauthorized {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
g.component.selected rect.border {
stroke: $material-theme-primary-palette-default !important;
}
text.stats-label {
@extend .surface-contrast;
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
}
text.stats-value {
fill: $material-theme-accent-palette-default;
}
text.stats-info {
fill: $material-theme-primary-palette-default;
}
text.bulletin-icon {
fill: if(
$is-dark,
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
g.component.selected rect.border {
stroke: if(
$is-material-dark,
$material-theme-secondary-palette-default,
$material-theme-secondary-palette-darker
) !important;
}
text.stats-label {
@extend .neutral-contrast;
font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
}
text.stats-value {
fill: $material-theme-tertiary-palette-default;
}
text.stats-info {
fill: if(
$is-material-dark,
$material-theme-secondary-palette-default,
$material-theme-secondary-palette-darker
);
}
text.bulletin-icon {
fill: mat.get-theme-color($material-theme, surface);
}
rect.bulletin-background {
fill: $material-theme-warn-palette-darker;
fill: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
text.component-comments {
fill: $material-theme-primary-palette-default;
stroke: $alternate-surface;
fill: if(
$is-material-dark,
$material-theme-secondary-palette-default,
$material-theme-secondary-palette-darker
);
stroke: $border-color;
}
/*
@ -224,12 +223,20 @@
rect.component-selection,
rect.drag-selection,
rect.label-drag {
stroke: if($is-dark, $material-theme-primary-palette-lighter, $material-theme-primary-palette-default);
stroke: if(
$is-material-dark,
$material-theme-secondary-palette-lighter,
$material-theme-secondary-palette-darker
);
fill: transparent;
}
text.add-connect {
fill: $material-theme-primary-palette-default;
fill: if(
$is-material-dark,
$material-theme-secondary-palette-default,
$material-theme-secondary-palette-darker
);
}
/*
@ -240,83 +247,115 @@
}
rect.processor-read-write-stats {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
rect.processor-stats-border {
fill: $alternate-surface;
}
text.processor-name {
fill: if(
$is-dark,
$supplemental-theme-surface-palette-darker-contrast,
$supplemental-theme-surface-palette-lighter-contrast
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
rect.processor-stats-border {
fill: $border-color;
}
text.processor-name {
fill: $neutral-contrast;
}
text.processor-type {
fill: $material-theme-primary-palette-default;
fill: if(
$is-material-dark,
$material-theme-secondary-palette-default,
$material-theme-secondary-palette-darker
);
}
circle.is-primary-background {
stroke: if(
$is-dark,
$supplemental-theme-surface-palette-lighter,
$supplemental-theme-surface-palette-darker
$is-material-dark,
$material-theme-neutral-palette-lighter,
$material-theme-neutral-palette-darker
);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
text.is-primary {
fill: if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-lighter,
$material-theme-neutral-palette-darker
);
}
text.processor-bundle {
fill: $supplemental-theme-surface-palette-default;
fill: $material-theme-neutral-palette-default;
}
rect.processor-icon-container {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
circle.restricted-background {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
text.restricted {
fill: $material-theme-warn-palette-darker;
fill: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
/*
Connection
*/
#connection-full-drop-shadow feFlood {
flood-color: $material-theme-warn-palette-darker;
flood-color: if(
$is-material-dark,
$material-theme-error-palette-default,
$material-theme-error-palette-darker
);
}
g.connection {
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
}
g.connection rect.body {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
g.connection rect.body.unauthorized {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
g.connection rect.border.unauthorized {
stroke: $material-theme-warn-palette-darker;
stroke: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
g.connection rect.border.full {
stroke: $material-theme-accent-palette-default;
stroke: $material-theme-tertiary-palette-default;
}
g.connection.selected rect.border {
stroke: $supplemental-theme-caution-palette-darker;
stroke: #ffcc00;
}
path.connector {
@ -329,23 +368,23 @@
g.connection path.connection-path {
fill: none;
stroke: $surface-contrast;
stroke: $neutral-contrast;
filter: drop-shadow(
0 3px 6px
if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
)
);
}
g.connection path.connection-path.full {
stroke: $material-theme-warn-palette-darker;
stroke: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
g.connection path.connection-path.unauthorized {
stroke: $material-theme-warn-palette-darker;
stroke: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
g.connection rect.backpressure-tick {
@ -354,12 +393,16 @@
g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
g.connection rect.backpressure-tick.object-prediction.prediction-down {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
g.connection rect.backpressure-tick.data-size-prediction,
g.connection rect.backpressure-tick.object-prediction {
fill: $alternate-surface;
fill: $border-color;
}
g.connection rect.backpressure-tick.data-size-prediction.not-configured,
@ -370,12 +413,12 @@
}
g.connection rect.backpressure-tick.not-configured {
fill: $supplemental-theme-surface-palette-default;
fill: $material-theme-neutral-palette-default;
}
g.connection rect.backpressure-object,
g.connection rect.backpressure-data-size {
fill: $alternate-surface;
fill: $border-color;
}
g.connection rect.backpressure-object.not-configured,
@ -384,26 +427,26 @@
}
g.connection rect.backpressure-percent {
fill: $supplemental-theme-success-palette-lighter;
fill: $success-lighter;
}
g.connection rect.backpressure-percent.warning {
fill: $supplemental-theme-caution-palette-darker;
fill: #ffcc00;
}
g.connection rect.backpressure-percent.error {
fill: $material-theme-warn-palette-darker;
fill: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
/* ghost connection */
g.connection.ghost path.connection-path,
g.connection.ghost rect.connection-label {
stroke: $supplemental-theme-surface-palette-default;
stroke: $material-theme-neutral-palette-default;
}
g.connection path.connection-selection-path {
stroke: $supplemental-theme-caution-palette-darker;
stroke: #ffcc00;
fill: none;
}
@ -417,8 +460,8 @@
}
g.connection rect.midpoint {
stroke: $supplemental-theme-caution-palette-darker;
fill: $supplemental-theme-caution-palette-darker;
stroke: #ffcc00;
fill: #ffcc00;
}
g.connection rect.endpoint {
@ -429,39 +472,51 @@
/* labels */
g.label path.resizable-triangle {
fill: rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2);
stroke: rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2);
fill: rgba($material-theme-neutral-palette-darker, 0.2);
stroke: rgba($material-theme-neutral-palette-darker, 0.2);
}
/* funnels */
text.funnel-icon {
fill: $material-theme-accent-palette-default;
fill: $material-theme-tertiary-palette-default;
}
/* ports */
text.port-name {
@extend .surface-contrast;
@extend .neutral-contrast;
}
text.port-icon {
fill: $material-theme-accent-palette-default;
fill: $material-theme-tertiary-palette-default;
}
/* process groups */
rect.process-group-stats-in-out {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
rect.process-group-stats-border {
fill: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-darker);
fill: if(
$is-material-dark,
$material-theme-secondary-palette-default,
$material-theme-secondary-palette-lighter
);
}
rect.process-group-banner,
rect.remote-process-group-banner {
fill: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-darker);
fill: if(
$is-material-dark,
$material-theme-secondary-palette-default,
$material-theme-secondary-palette-lighter
);
}
text.version-control,
@ -473,12 +528,12 @@
text.stopped,
text.process-group-running,
text.process-group-stopped {
text-shadow: if($is-dark, 0 0 4px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 255, 255, 1));
text-shadow: if($is-material-dark, 0 0 4px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 255, 255, 1));
}
text.process-group-contents-count {
fill: $material-theme-accent-palette-default;
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
fill: $material-theme-tertiary-palette-default;
font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
}
g.process-group.drop rect.border {
@ -488,23 +543,39 @@
/* remote process group */
rect.remote-process-group-stats-border {
fill: $alternate-surface;
fill: $border-color;
}
rect.remote-process-group-received-stats {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
text.remote-process-group-uri {
fill: if($is-dark, $material-theme-primary-palette-lighter, $material-theme-primary-palette-default);
fill: if(
$is-material-dark,
$material-theme-secondary-palette-lighter,
$material-theme-secondary-palette-darker
);
}
text.remote-process-group-transmission-secure {
fill: if($is-dark, $material-theme-primary-palette-lighter, $material-theme-primary-palette-default);
fill: if(
$is-material-dark,
$material-theme-secondary-palette-lighter,
$material-theme-secondary-palette-darker
);
}
text.remote-process-group-last-refresh {
fill: if($is-dark, $material-theme-primary-palette-lighter, $material-theme-primary-palette-default);
fill: if(
$is-material-dark,
$material-theme-secondary-palette-lighter,
$material-theme-secondary-palette-darker
);
}
}
}

8
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
View File

@ -355,13 +355,13 @@ export class Canvas implements OnInit, OnDestroy {
.attr('orient', 'auto')
.attr('class', (d: string) => {
if (d === 'ghost') {
return 'ghost surface-color';
return 'ghost neutral-color';
} else if (d === 'unauthorized') {
return 'unauthorized warn-color-darker';
return 'unauthorized error-color-darker';
} else if (d === 'full') {
return 'full warn-color-darker';
return 'full error-color-darker';
} else {
return 'surface-contrast';
return 'neutral-contrast';
}
})
.append('path')

56
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
View File

@ -18,63 +18,47 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
);
$supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
);
$supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
);
$alternate-surface: if(
$is-dark,
rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
$border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
.preview {
.processor {
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
.odd {
background-color: rgba(
if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker),
if($is-material-dark, $material-theme-neutral-palette-lighter, $material-theme-neutral-palette-darker),
0.025
);
}
.even {
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
.row-border {
border-top: 1px solid $alternate-surface;
border-top: 1px solid $border-color;
}
}
}

6
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.html
View File

@ -23,7 +23,7 @@
<mat-label>Color</mat-label>
<input matInput type="color" formControlName="color" (change)="colorChanged()" />
</mat-form-field>
<mat-checkbox color="primary" [checked]="noColor" formControlName="noColor" (change)="noColorChanged()"
<mat-checkbox [checked]="noColor" formControlName="noColor" (change)="noColorChanged()"
>Use default color</mat-checkbox
>
</div>
@ -34,7 +34,7 @@
<div class="flex flex-col">
<div class="flex gap-x-2 items-center">
<div class="logo flex flex-col items-center" [style.background-color]="color">
<i class="text-3xl accent-color icon-processor p-2" [style.color]="contrastColor"></i>
<i class="text-3xl tertiary-color icon-processor p-2" [style.color]="contrastColor"></i>
</div>
<div class="flex flex-col flex-1">
<div class="context-name w-full">Processor Name</div>
@ -58,6 +58,6 @@
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [disabled]="changeColorForm.invalid" (click)="applyClicked()" color="primary">Apply</button>
<button mat-flat-button [disabled]="changeColorForm.invalid" (click)="applyClicked()">Apply</button>
</mat-dialog-actions>
</form>

10
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
View File

@ -18,15 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
@mixin generate-theme() {
.breadcrumb-container {
background-color: var(--mat-app-background-color);
}

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/footer.component.html
View File

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

31
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
View File

@ -18,30 +18,25 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
div.navigation-control {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
.navigation-control-header {

42
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
View File

@ -18,37 +18,33 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.m2-get-color-config($material-theme);
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
$material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
$material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
#birdseye {
background: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
rect.birdseye-brush {
stroke: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-lighter);
stroke: $material-theme-secondary-palette-default;
fill: transparent;
}
}

10
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.html
View File

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

31
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
View File

@ -18,30 +18,25 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
div.operation-control {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
.operation-control-header {

27
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html
View File

@ -41,7 +41,7 @@
<div class="flex gap-x-1">
<button
mat-icon-button
color="primary"
class="primary-icon-button"
type="button"
[disabled]="!canConfigure(selection)"
(click)="configure(selection)">
@ -50,8 +50,7 @@
@if (supportsManagedAuthorizer()) {
<button
mat-icon-button
color="primary"
class="mr-2"
class="primary-icon-button mr-2"
type="button"
[disabled]="!canManageAccess(selection)"
(click)="manageAccess(selection)">
@ -60,7 +59,7 @@
}
<button
mat-icon-button
color="primary"
class="primary-icon-button"
type="button"
[disabled]="!canEnable(selection)"
(click)="enable(selection)">
@ -68,8 +67,7 @@
</button>
<button
mat-icon-button
color="primary"
class="mr-2"
class="primary-icon-button mr-2"
type="button"
[disabled]="!canDisable(selection)"
(click)="disable(selection)">
@ -77,7 +75,7 @@
</button>
<button
mat-icon-button
color="primary"
class="primary-icon-button"
type="button"
[disabled]="!canStart(selection)"
(click)="start(selection)">
@ -85,7 +83,7 @@
</button>
<button
mat-icon-button
color="primary"
class="primary-icon-button"
type="button"
[disabled]="!canStop(selection)"
(click)="stop(selection)">
@ -95,7 +93,7 @@
<div class="flex gap-x-1">
<button
mat-icon-button
color="primary"
class="primary-icon-button"
type="button"
[disabled]="!canCopy(selection)"
(click)="copy(selection)">
@ -103,8 +101,7 @@
</button>
<button
mat-icon-button
color="primary"
class="mr-2"
class="primary-icon-button mr-2"
type="button"
[disabled]="!canPaste()"
(click)="paste()">
@ -112,8 +109,7 @@
</button>
<button
mat-icon-button
color="primary"
class="mr-2"
class="primary-icon-button"
type="button"
[disabled]="!canGroup(selection)"
(click)="group(selection)">
@ -121,8 +117,7 @@
</button>
<button
mat-icon-button
color="primary"
class="mr-2"
class="primary-icon-button mr-2"
type="button"
[disabled]="!canColor(selection)"
(click)="color(selection)">
@ -130,7 +125,7 @@
</button>
<button
mat-icon-button
color="primary"
class="primary-icon-button"
type="button"
[disabled]="!canDelete(selection)"
(click)="delete(selection)">

12
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html
View File

@ -26,14 +26,12 @@
<div class="flex items-center justify-between">
<div>
<div>
<mat-checkbox class="text-sm" color="primary" [(ngModel)]="showEnforcedViolations">
<mat-checkbox class="text-sm" [(ngModel)]="showEnforcedViolations">
Show enforced violations
</mat-checkbox>
</div>
<div>
<mat-checkbox color="primary" [(ngModel)]="showWarningViolations">
Show warning violations
</mat-checkbox>
<mat-checkbox [(ngModel)]="showWarningViolations"> Show warning violations </mat-checkbox>
</div>
</div>
</div>
@ -73,7 +71,7 @@
</mat-menu>
</div>
@if (violationsMap.size > 0 && violationsMap.get(rule.id)) {
<div class="warn-color-darker text-sm">
<div class="error-color-darker text-sm">
<ng-container [ngPlural]="violationsMap.get(rule.id).length">
<ng-template ngPluralCase="=1"
>{{ violationsMap.get(rule.id).length }} violation</ng-template
@ -185,7 +183,7 @@
<ul>
@for (violation of enforcedViolations; track violation.scope) {
<li class="mt-2 pb-2 border-b last-of-type:border-0">
<div class="warn-color-darker">{{ getRuleName(violation.ruleId) }}</div>
<div class="error-color-darker">{{ getRuleName(violation.ruleId) }}</div>
<div class="flex align-center justify-between ml-2">
<div class="flex flex-col items-start">
<div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
@ -214,7 +212,7 @@
<ul>
@for (violation of warningViolations; track violation.scope) {
<li class="mt-2 pb-2 border-b last-of-type:border-0">
<div class="warn-color-darker">{{ getRuleName(violation.ruleId) }}</div>
<div class="error-color-darker">{{ getRuleName(violation.ruleId) }}</div>
<div class="flex align-center justify-between ml-2">
<div class="flex flex-col items-start">
<div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">

70
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/_violation-details-dialog.component-theme.scss
View File

@ -18,49 +18,51 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.m2-get-color-config($material-theme);
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($material-theme-color-config, is-dark);
$material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
$material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-warn-palette-darker: mat.m2-get-color-from-palette($material-theme-warn-palette, darker);
$supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
$supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
$material-theme-secondary-palette-darker: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), darker)
);
$material-theme-secondary-palette-lighter: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), lighter)
);
$material-theme-error-palette-default: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), default)
);
$material-theme-error-palette-darker: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), darker)
);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
.pill.enforce {
background-color: $material-theme-warn-palette-darker;
color: if(
$is-dark,
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
background-color: if(
$is-material-dark,
$material-theme-error-palette-default,
$material-theme-error-palette-darker
);
color: $neutral-contrast;
}
.pill.warn {
background-color: if(
$is-dark,
$material-theme-primary-palette-lighter,
$material-theme-primary-palette-default
);
color: if(
$is-dark,
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
$is-material-dark,
$material-theme-secondary-palette-lighter,
$material-theme-secondary-palette-darker
);
color: $neutral-contrast;
}
}

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/violation-details-dialog.component.html
View File

@ -37,6 +37,6 @@
</button>
</div>
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close color="primary">Close</button>
<button mat-flat-button mat-dialog-close>Close</button>
</mat-dialog-actions>
</mat-dialog-content>

3
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/violation-details-dialog.component.ts
View File

@ -22,6 +22,7 @@ import { FlowAnalysisRule, FlowAnalysisRuleViolation } from '../../../../../stat
import { Store } from '@ngrx/store';
import { navigateToComponentDocumentation } from 'apps/nifi/src/app/state/documentation/documentation.actions';
import { selectCurrentProcessGroupId } from '../../../../../state/flow/flow.selectors';
import { MatButton } from '@angular/material/button';
interface Data {
violation: FlowAnalysisRuleViolation;
@ -31,7 +32,7 @@ interface Data {
@Component({
selector: 'app-violation-details-dialog',
standalone: true,
imports: [CommonModule, MatDialogModule],
imports: [CommonModule, MatDialogModule, MatButton],
templateUrl: './violation-details-dialog.component.html',
styleUrl: './violation-details-dialog.component.scss'
})

117
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
View File

@ -18,103 +18,92 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.m2-get-color-config($material-theme);
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
$material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-warn-palette-darker: mat.m2-get-color-from-palette($material-theme-warn-palette, darker);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-secondary-palette-darker: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), darker)
);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
$material-theme-secondary-palette-lighter: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), lighter)
);
$supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
$material-theme-error-palette-default: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), default)
);
$supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
$material-theme-error-palette-darker: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), darker)
);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
.flow-status {
background: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
.controller-bulletins {
background-color: if(
$is-dark,
$material-theme-primary-palette-lighter,
$material-theme-primary-palette-default
$is-material-dark,
$material-theme-secondary-palette-lighter,
$material-theme-secondary-palette-darker
);
.fa {
// invert the contrast colors since the surface is dark in light mode and light in dark mode
color: if(
$is-dark,
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
);
color: mat.get-theme-color($material-theme, surface);
}
}
.controller-bulletins.has-bulletins {
background-color: $material-theme-warn-palette-darker;
background-color: if(
$is-material-dark,
$material-theme-error-palette-default,
$material-theme-error-palette-darker
);
.fa {
color: mat.get-theme-color($material-theme, surface);
}
}
.flow-analysis-notifications.warn {
background-color: if(
$is-dark,
$material-theme-primary-palette-lighter,
$material-theme-primary-palette-default
);
border-right-color: if(
$is-dark,
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
$is-material-dark,
$material-theme-secondary-palette-lighter,
$material-theme-secondary-palette-darker
);
.fa {
// invert the contrast colors since the surface is dark in light mode and light in dark mode
color: if(
$is-dark,
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
);
color: mat.get-theme-color($material-theme, surface);
}
}
.flow-analysis-notifications.enforce {
background-color: $material-theme-warn-palette-darker;
border-right-color: if(
$is-dark,
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
background-color: if(
$is-material-dark,
$material-theme-error-palette-default,
$material-theme-error-palette-darker
);
.fa {
// invert the contrast colors since the surface is dark in light mode and light in dark mode
color: if(
$is-dark,
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
);
color: mat.get-theme-color($material-theme, surface);
}
}
}

44
nifi-frontend/src/main/frontend/apps/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="accent-color font-medium">{{ formatActiveThreads() }}</div>
<div class="tertiary-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="accent-color font-medium">{{ controllerStatus.queued }}</div>
<div class="tertiary-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, 'success-color')"></div>
<div class="accent-color font-medium">
<div class="tertiary-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, 'surface-color')"></div>
<div class="accent-color font-medium">
[class]="getActiveStyle(controllerStatus.inactiveRemotePortCount, 'neutral-color')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.inactiveRemotePortCount) }}
</div>
</div>
@ -52,15 +52,15 @@
<div
class="fa fa-play"
[class]="getActiveStyle(controllerStatus.runningCount, 'success-color-lighter')"></div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.runningCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Stopped Components">
<div
class="fa fa-stop"
[class]="getActiveStyle(controllerStatus.stoppedCount, 'warn-color-lighter')"></div>
<div class="accent-color font-medium">
[class]="getActiveStyle(controllerStatus.stoppedCount, 'error-color-lighter')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.stoppedCount) }}
</div>
</div>
@ -68,15 +68,15 @@
<div
class="fa fa-warning invalid"
[class]="getActiveStyle(controllerStatus.invalidCount, 'caution-color')"></div>
<div class="accent-color font-medium">
<div class="tertiary-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, 'surface-color')"></div>
<div class="accent-color font-medium">
[class]="getActiveStyle(controllerStatus.disabledCount, 'neutral-color')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.disabledCount) }}
</div>
</div>
@ -84,45 +84,47 @@
<div
class="fa fa-check"
[class]="getActiveStyle(controllerStatus.upToDateCount, 'success-color')"></div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.upToDateCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Locally modified Versioned Process Groups">
<div
class="fa fa-asterisk"
[class]="getActiveStyle(controllerStatus.locallyModifiedCount, 'surface-color')"></div>
<div class="accent-color font-medium">
[class]="getActiveStyle(controllerStatus.locallyModifiedCount, 'neutral-color')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.locallyModifiedCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Stale Versioned Process Groups">
<div
class="fa fa-arrow-circle-up"
[class]="getActiveStyle(controllerStatus.staleCount, 'warn-color-lighter')"></div>
<div class="accent-color font-medium">
[class]="getActiveStyle(controllerStatus.staleCount, 'error-color-lighter')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.staleCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Locally modified and stale Versioned Process Groups">
<div
class="fa fa-exclamation-circle"
[class]="getActiveStyle(controllerStatus.locallyModifiedAndStaleCount, 'warn-color-lighter')"></div>
<div class="accent-color font-medium">
[class]="
getActiveStyle(controllerStatus.locallyModifiedAndStaleCount, 'error-color-lighter')
"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.locallyModifiedAndStaleCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Sync failure Versioned Process Groups">
<div
class="fa fa-question"
[class]="getActiveStyle(controllerStatus.syncFailureCount, 'surface-color')"></div>
<div class="accent-color font-medium">
[class]="getActiveStyle(controllerStatus.syncFailureCount, 'neutral-color')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.syncFailureCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Last refresh">
<div class="fa fa-refresh primary-color" [class.fa-spin]="loadingStatus"></div>
<div class="accent-color font-medium">{{ lastRefreshed }}</div>
<div class="tertiary-color font-medium">{{ lastRefreshed }}</div>
</div>
</div>
<div class="flex">

14
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
View File

@ -107,10 +107,10 @@ export class FlowStatus {
this.clusterSummary?.connectedToCluster === false ||
this.clusterSummary?.connectedNodeCount != this.clusterSummary?.totalNodeCount
) {
return 'warn-color-darker';
return 'error-color-darker';
}
return 'primary-color';
return 'secondary-color';
}
formatActiveThreads(): string {
@ -133,16 +133,16 @@ export class FlowStatus {
if (this.hasTerminatedThreads()) {
return 'warning';
} else if (this.controllerStatus.activeThreadCount === 0) {
return 'zero primary-color-lighter';
return 'zero secondary-color';
}
return 'primary-color';
return 'secondary-color';
}
getQueuedStyle(): string {
if (this.controllerStatus.queued.indexOf('0 / 0') == 0) {
return 'zero primary-color-lighter';
return 'zero secondary-color';
}
return 'primary-color';
return 'secondary-color';
}
formatValue(value: number | undefined) {
@ -154,7 +154,7 @@ export class FlowStatus {
getActiveStyle(value: number | undefined, activeStyle: string): string {
if (value === undefined || value <= 0) {
return 'zero primary-color-lighter';
return 'zero secondary-color';
}
return activeStyle;
}

78
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
View File

@ -18,54 +18,59 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.m2-get-color-config($material-theme);
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($material-theme-color-config, is-dark);
$material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
$material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
$material-theme-secondary-palette-darker: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), darker)
);
$hover: var(--mat-menu-item-hover-state-layer-color);
$material-theme-secondary-palette-lighter: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), lighter)
);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
$grip: map.get(map.get(map.get($config, secondary), new-canvas-item), grip);
$hover: map.get(map.get(map.get($config, secondary), new-canvas-item), hover);
.new-canvas-item {
.icon {
color: if(
$is-material-dark,
$material-theme-secondary-palette-darker,
$material-theme-secondary-palette-darker
);
&.hovering {
@extend .mat-elevation-z2;
// This solution re-uses the highlight value used throughout the UI, but because we need to hide the non-hover
// version of the icons, we create a double layered gradient with the matching background color of the
// navigation bar, then put the highlight on top of it.
background: linear-gradient($hover, $hover),
linear-gradient(
$supplemental-theme-surface-palette-lighter,
$supplemental-theme-surface-palette-lighter
) !important;
background: linear-gradient($hover, $hover) !important;
.component-button-grip {
background: repeating-linear-gradient(
90deg,
$grip,
if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
),
$material-theme-primary-palette-default 4px,
$is-material-dark,
$material-theme-secondary-palette-default,
$material-theme-secondary-palette-darker
)
4px,
transparent 4px,
transparent 6px
);
@ -73,12 +78,13 @@
}
&.cdk-drag-dragging {
color: if($is-dark, $material-theme-primary-palette-lighter, $material-theme-primary-palette-darker);
color: $material-theme-secondary-palette-lighter;
mix-blend-mode: difference; // Make sure the dragged icon is always visible
}
}
.icon:disabled {
@extend .neutral-color;
cursor: not-allowed;
}
}

37
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
View File

@ -18,39 +18,34 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
.search-container {
&:hover,
&.open {
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
.search-input {
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
}

10
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
View File

@ -29,7 +29,7 @@
(overlayOutsideClick)="backdropClicked($event)">
<div class="search-results mat-elevation-z8 w-96 border p-2 text-base max-h-96 overflow-y-auto">
@if (searching) {
<div class="unset surface-color italic">Searching</div>
<div class="unset neutral-color italic">Searching</div>
} @else {
@if (hasResults()) {
<ul>
@ -171,7 +171,7 @@
}
</ul>
} @else {
<div class="unset surface-color italic">No results matched the search terms</div>
<div class="unset neutral-color italic">No results matched the search terms</div>
}
}
</div>
@ -180,7 +180,7 @@
type="text"
matInput
placeholder="Search"
class="search-input surface-contrast"
class="search-input neutral-contrast"
(keydown)="onKeydown($event)"
[class.open]="searchInputVisible"
cdkOverlayOrigin
@ -189,13 +189,13 @@
<ng-template #renderResults let-results let-header="header" let-icon="icon" let-path="path">
@if (results.length > 0) {
<li class="flex items-center">
<span class="icon mr-1 accent-color" [class]="icon"></span>
<span class="icon mr-1 tertiary-color" [class]="icon"></span>
<span class="font-medium">{{ header }}</span>
</li>
@for (result of results; track result) {
<li class="ml-4 py-1 flex gap-x-2 items-center">
<i
class="fa fa-info-circle on-surface-medium"
class="fa fa-info-circle"
nifiTooltip
[tooltipComponentType]="SearchMatchTip"
[tooltipInputData]="getSearchMatchTipInput(result)"

5
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
View File

@ -96,7 +96,7 @@
</div>
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="unset surface-color">No value set</div>
<div class="unset neutral-color">No value set</div>
</div>
<div>
<mat-form-field>
@ -228,9 +228,8 @@
<button
[disabled]="createConnectionForm.invalid || saving.value"
type="button"
color="primary"
(click)="createConnection(breadcrumbs.id)"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Add</span>
</button>
</mat-dialog-actions>

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-funnel/destination-funnel.component.html
View File

@ -18,11 +18,11 @@
<div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5">
<div>To Funnel</div>
<div class="accent-color font-medium">funnel</div>
<div class="tertiary-color font-medium">funnel</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="groupName" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div>

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-output-port/destination-output-port.component.html
View File

@ -18,13 +18,13 @@
<div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5">
<div>To Output</div>
<div [title]="name" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="name" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ name }}
</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="groupName" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div>

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-process-group/destination-process-group.component.html
View File

@ -50,7 +50,7 @@
}
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="groupName" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div>

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-processor/destination-processor.component.html
View File

@ -20,13 +20,13 @@
<div>To Processor</div>
<div
[title]="processorName"
class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ processorName }}
</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="groupName" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div>

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-remote-process-group/destination-remote-process-group.component.html
View File

@ -49,7 +49,7 @@
}
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="groupName" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div>

7
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
View File

@ -107,7 +107,7 @@
</div>
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="accent-color font-medium">{{ dialogRequest.entity.id }}</div>
<div class="tertiary-color font-medium">{{ dialogRequest.entity.id }}</div>
</div>
<div>
<mat-form-field>
@ -251,15 +251,14 @@
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (connectionReadonly || sourceReadonly || destinationReadonly) {
<button mat-button mat-dialog-close color="primary">Close</button>
<button mat-flat-button mat-dialog-close>Close</button>
} @else {
<button mat-button mat-dialog-close="CANCELLED">Cancel</button>
<button
[disabled]="!editConnectionForm.dirty || editConnectionForm.invalid || saving.value"
type="button"
color="primary"
(click)="editConnection()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Apply</span>
</button>
}

8
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
View File

@ -93,7 +93,7 @@
<div class="prioritizer-name" [title]="getPrioritizerLabel(item)">{{ getPrioritizerLabel(item) }}</div>
@if (hasDescription(item)) {
<i
class="pl-1 fa fa-info-circle surface-color"
class="pl-1 fa fa-info-circle neutral-color"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="item.description"></i>
@ -101,15 +101,15 @@
</div>
@if (canClose) {
<button class="pr-1" type="button" (click)="removeSelected(item, i)">
<i class="fa fa-times surface-contrast"></i>
<i class="fa fa-times neutral-contrast"></i>
</button>
}
} @else {
<div class="flex items-center accent-color font-medium">
<div class="flex items-center tertiary-color font-medium">
<div>{{ getPrioritizerLabel(item) }}</div>
@if (hasDescription(item)) {
<i
class="pl-1 fa fa-info-circle surface-color"
class="pl-1 fa fa-info-circle neutral-color"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="item.description"></i>

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-funnel/source-funnel.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 Funnel</div>
<div class="accent-color font-medium">funnel</div>
<div class="tertiary-color font-medium">funnel</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="groupName" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div>

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-input-port/source-input-port.component.html
View File

@ -18,13 +18,13 @@
<div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5">
<div>From Input</div>
<div [title]="name" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="name" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ name }}
</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="groupName" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div>

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-process-group/source-process-group.component.html
View File

@ -50,7 +50,7 @@
}
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="groupName" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div>

7
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-processor/source-processor.component.html
View File

@ -18,13 +18,13 @@
<div class="flex flex-col gap-y-4">
<div class="flex flex-col mb-5">
<div>From Processor</div>
<div [title]="name" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="name" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ name }}
</div>
</div>
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="groupName" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div>
@ -36,12 +36,11 @@
<div class="flex flex-col gap-y-1.5">
<div class="flex items-center gap-x-2">
<mat-checkbox
color="primary"
[(ngModel)]="item.selected"
name="selected-{{ i }}"
(change)="handleChanged()"
[disabled]="isDisabled">
<span [class.surface-color]="!item.available" [class.unset]="!item.available">{{
<span [class.neutral-color]="!item.available" [class.unset]="!item.available">{{
item.relationshipName
}}</span>
</mat-checkbox>

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-remote-process-group/source-remote-process-group.component.html
View File

@ -49,7 +49,7 @@
}
<div class="flex flex-col mb-5">
<div>Within Group</div>
<div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
<div [title]="groupName" class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
{{ groupName }}
</div>
</div>

12
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
View File

@ -26,7 +26,7 @@
<div>
<div>Registry</div>
<div
class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="versionControlInformation.registryName">
{{ versionControlInformation.registryName }}
</div>
@ -34,7 +34,7 @@
<div>
<div>Bucket</div>
<div
class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="versionControlInformation.bucketName">
{{ versionControlInformation.bucketName }}
</div>
@ -45,7 +45,7 @@
@if (versionControlInformation.branch) {
<div>Branch</div>
<div
class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="versionControlInformation.branch">
{{ versionControlInformation.branch }}
</div>
@ -54,7 +54,7 @@
<div>
<div>Flow Name</div>
<div
class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="versionControlInformation.flowName">
{{ versionControlInformation.flowName }}
</div>
@ -63,7 +63,7 @@
</div>
<div>
<div>Flow Description</div>
<div class="accent-color font-medium break-words">
<div class="tertiary-color font-medium break-words">
{{ versionControlInformation.flowDescription || 'No description provided' }}
</div>
</div>
@ -121,7 +121,7 @@
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
<button [disabled]="!isSelectionValid()" type="button" color="primary" (click)="changeFlowVersion()" mat-button>
<button [disabled]="!isSelectionValid()" type="button" (click)="changeFlowVersion()" mat-flat-button>
Change
</button>
</mat-dialog-actions>

9
nifi-frontend/src/main/frontend/apps/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="accent-color font-medium">
<div class="tertiary-color font-medium">
@if (versionChangeRequest.request.complete) {
This Process Group version has changed.
} @else {
@ -31,7 +31,7 @@
<mat-progress-bar
mode="determinate"
[value]="versionChangeRequest.request.percentCompleted"></mat-progress-bar>
<div class="accent-color font-medium">{{ versionChangeRequest.request.percentCompleted }}%</div>
<div class="tertiary-color font-medium">{{ versionChangeRequest.request.percentCompleted }}%</div>
</div>
}
</div>
@ -40,10 +40,9 @@
@if (flowUpdateRequest$ | async; as versionChangeRequest) {
<button
[disabled]="!versionChangeRequest?.request?.complete"
mat-button
mat-flat-button
mat-dialog-close
(click)="close(versionChangeRequest)"
color="primary">
(click)="close(versionChangeRequest)">
Close
</button>
}

7
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
View File

@ -103,7 +103,7 @@
>
</mat-form-field>
<div class="mb-5">
<mat-checkbox color="primary" formControlName="keepParameterContexts">
<mat-checkbox formControlName="keepParameterContexts">
Keep existing Parameter Contexts
<i
class="fa fa-info-circle primary-color"
@ -114,7 +114,7 @@
</div>
<div class="flex flex-col mb-5">
<div>Flow Description</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ selectedFlowDescription || 'No description provided' }}
</div>
</div>
@ -177,9 +177,8 @@
<button
[disabled]="importFromRegistryForm.invalid || saving.value || !selectedFlowVersion"
type="button"
color="primary"
(click)="importFromRegistry()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Import</span>
</button>
</mat-dialog-actions>

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-dialog.html
View File

@ -42,9 +42,9 @@
<mat-dialog-actions align="end">
@if (mode === 'REVERT') {
<button mat-button mat-dialog-close>Cancel</button>
<button type="button" color="primary" (click)="revertChanges()" mat-button>Revert</button>
<button type="button" (click)="revertChanges()" mat-flat-button>Revert</button>
} @else {
<button mat-button mat-dialog-close color="primary">Close</button>
<button mat-flat-button mat-dialog-close>Close</button>
}
</mat-dialog-actions>
</div>

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
View File

@ -28,7 +28,7 @@
</div>
</div>
</form>
<div class="my-2 accent-color leading-none font-medium">
<div class="my-2 tertiary-color leading-none font-medium">
Displaying {{ filteredCount }} of {{ totalCount }}
</div>
</div>

19
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html
View File

@ -23,30 +23,30 @@
<div class="flex flex-col gap-y-4 mb-6">
<div>
<div>Registry</div>
<div class="accent-color font-medium">{{ versionControlInformation.registryName }}</div>
<div class="tertiary-color font-medium">{{ versionControlInformation.registryName }}</div>
</div>
@if (versionControlInformation.branch) {
<div>
<div>Branch</div>
<div class="accent-color font-medium">{{ versionControlInformation.branch }}</div>
<div class="tertiary-color font-medium">{{ versionControlInformation.branch }}</div>
</div>
}
<div>
<div>Bucket</div>
<div class="accent-color font-medium">{{ versionControlInformation.bucketName }}</div>
<div class="tertiary-color font-medium">{{ versionControlInformation.bucketName }}</div>
</div>
<div>
<div>
<div>Flow Name</div>
<div class="accent-color font-medium">{{ versionControlInformation.flowName }}</div>
<div class="tertiary-color font-medium">{{ versionControlInformation.flowName }}</div>
</div>
</div>
<div>
<div>Flow Description</div>
@if (!versionControlInformation.flowDescription) {
<div class="unset surface-color">No value set</div>
<div class="unset neutral-color">No value set</div>
} @else {
<div class="accent-color font-medium">{{ versionControlInformation.flowDescription }}</div>
<div class="tertiary-color font-medium">{{ versionControlInformation.flowDescription }}</div>
}
</div>
</div>
@ -130,12 +130,7 @@
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
<button
[disabled]="saveVersionForm.invalid || saving()"
type="button"
color="primary"
(click)="submitForm()"
mat-button>
<button [disabled]="saveVersionForm.invalid || saving()" type="button" (click)="submitForm()" mat-flat-button>
<span *nifiSpinner="saving()">Save</span>
</button>
</mat-dialog-actions>

5
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.html
View File

@ -41,15 +41,14 @@
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
<button mat-button mat-dialog-close color="primary">Close</button>
<button mat-flat-button mat-dialog-close>Close</button>
} @else {
<button mat-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editLabelForm.dirty || editLabelForm.invalid || saving.value"
type="button"
color="primary"
(click)="editLabel()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Apply</span>
</button>
}

3
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.html
View File

@ -62,9 +62,8 @@
<button
[disabled]="!createPortForm.dirty || createPortForm.invalid || saving.value"
type="submit"
color="primary"
(click)="createPort()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Add</span>
</button>
</mat-dialog-actions>

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.ts
View File

@ -27,7 +27,6 @@ import { CreateComponentRequest } from '../../../../../state/flow';
import { ComponentType, SelectOption } from 'libs/shared/src';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ErrorBanner } from '../../../../../../../ui/common/error-banner/error-banner.component';
import { AsyncPipe } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
@ -42,7 +41,6 @@ import { NifiTooltipDirective, TextTip, CloseOnEscapeDialog } from '@nifi/shared
MatDialogModule,
MatInputModule,
MatSelectModule,
MatTooltipModule,
ErrorBanner,
MatButtonModule,
AsyncPipe,

7
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.html
View File

@ -50,7 +50,7 @@
[tooltipComponentType]="TextTip"
tooltipInputData="When using the Stateless Engine, if any FlowFile is routed to a port marked as a Failure Port, all data in the transaction is rolled back, and the input FlowFile, if any, is routed to the Failure Port."></i>
</mat-label>
<mat-checkbox color="primary" formControlName="portFunction"></mat-checkbox>
<mat-checkbox formControlName="portFunction"></mat-checkbox>
</div>
}
<div>
@ -63,15 +63,14 @@
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
<button mat-button mat-dialog-close color="primary">Close</button>
<button mat-flat-button mat-dialog-close>Close</button>
} @else {
<button mat-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editPortForm.dirty || editPortForm.invalid || saving.value"
type="button"
color="primary"
(click)="editPort()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Apply</span>
</button>
}

9
nifi-frontend/src/main/frontend/apps/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 accent-color icon icon-template-import mr-2.5 pointer"
class="upload-flow-definition tertiary-color icon icon-template-import mr-2.5 pointer"
title="Browse"
(click)="flowUploadControl.click()">
<input type="file" #flowUploadControl class="hidden" (change)="attachFlow($event)" />
@ -57,14 +57,14 @@
<div class="flex flex-col gap-y-3 mb-3">
<div class="flex flex-col">
<div>Parameter Context</div>
<div class="unset surface-color">
<div class="unset neutral-color">
Parameters will be imported from the uploaded Flow Definition.
</div>
</div>
<div class="flex flex-col">
<div>File to upload</div>
<div class="flex justify-between items-center">
<div class="accent-color font-medium">{{ flowNameAttached }}</div>
<div class="tertiary-color font-medium">{{ flowNameAttached }}</div>
<div (click)="removeAttachedFlow()">X</div>
</div>
</div>
@ -78,9 +78,8 @@
<button
[disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value"
type="submit"
color="primary"
(click)="createProcessGroup()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Add</span>
</button>
</mat-dialog-actions>

6
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html
View File

@ -55,7 +55,6 @@
</div>
<div class="-mt-4 mb-4">
<mat-checkbox
color="primary"
formControlName="applyParameterContextRecursively"
name="applyParameterContextRecursively">
Apply Recursively
@ -209,16 +208,15 @@
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
<button mat-button mat-dialog-close color="primary">Close</button>
<button mat-flat-button mat-dialog-close>Close</button>
} @else {
<button mat-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editProcessGroupForm.dirty || editProcessGroupForm.invalid || saving.value"
class="h-8"
type="button"
color="primary"
(click)="submitForm()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Apply</span>
</button>
}

3
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/group-components/group-components.component.html
View File

@ -48,9 +48,8 @@
<button
[disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value"
type="button"
color="primary"
(click)="createProcessGroup()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Add</span>
</button>
</mat-dialog-actions>

13
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
View File

@ -41,17 +41,17 @@
</div>
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="accent-color font-medium">{{ request.entity.id }}</div>
<div class="tertiary-color font-medium">{{ request.entity.id }}</div>
</div>
<div class="flex flex-col mb-5">
<div>Type</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ formatType(request.entity) }}
</div>
</div>
<div class="flex flex-col mb-6">
<div>Bundle</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ formatBundle(request.entity) }}
</div>
</div>
@ -266,7 +266,7 @@
@if (request.entity.component.relationships.length > 0) {
<relationship-settings formControlName="relationshipConfiguration"></relationship-settings>
} @else {
<div class="unset surface-color">This processor has no relationships.</div>
<div class="unset neutral-color">This processor has no relationships.</div>
}
</div>
</mat-dialog-content>
@ -290,15 +290,14 @@
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
<button mat-button mat-dialog-close color="primary">Close</button>
<button mat-flat-button mat-dialog-close>Close</button>
} @else {
<button mat-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editProcessorForm.dirty || editProcessorForm.invalid || saving.value"
type="button"
color="primary"
(click)="submitForm()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Apply</span>
</button>
}

8
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/relationship-settings/relationship-settings.component.html
View File

@ -30,13 +30,12 @@
@for (relationship of relationships; track relationship; let i = $index) {
<div class="flex flex-col gap-y-1.5">
<div
class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="relationship.name">
{{ relationship.name }}
</div>
<div class="flex items-center gap-x-2">
<mat-checkbox
color="primary"
[(ngModel)]="relationship.autoTerminate"
name="autoTerminate-{{ i }}"
(change)="handleChanged()"
@ -44,7 +43,6 @@
>terminate
</mat-checkbox>
<mat-checkbox
color="primary"
[(ngModel)]="relationship.retry"
name="retry-{{ i }}"
(change)="handleChanged()"
@ -98,8 +96,8 @@
(change)="handleChanged()"
[disabled]="isDisabled"
class="flex gap-x-2">
<mat-radio-button color="primary" value="PENALIZE_FLOWFILE">Penalize</mat-radio-button>
<mat-radio-button color="primary" value="YIELD_PROCESSOR">Yield</mat-radio-button>
<mat-radio-button value="PENALIZE_FLOWFILE">Penalize</mat-radio-button>
<mat-radio-button value="YIELD_PROCESSOR">Yield</mat-radio-button>
</mat-radio-group>
</div>
<div>

6
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/run-duration-slider/run-duration-slider.component.html
View File

@ -17,7 +17,7 @@
<div class="run-duration-slider flex flex-col">
@if (isDisabled) {
<div class="accent-color font-medium">{{ formatLabel(runDurationIndex) }}</div>
<div class="tertiary-color font-medium">{{ formatLabel(runDurationIndex) }}</div>
} @else {
<div class="pl-4 pr-7">
<mat-slider [min]="0" [max]="7" [step]="1" showTickMarks discrete [displayWith]="formatLabel">
@ -25,8 +25,8 @@
</mat-slider>
</div>
<div class="flex justify-between items-center">
<div class="accent-color font-medium">Lower latency</div>
<div class="accent-color font-medium">Higher throughput</div>
<div class="tertiary-color font-medium">Lower latency</div>
<div class="tertiary-color font-medium">Higher throughput</div>
</div>
}
</div>

3
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
View File

@ -156,9 +156,8 @@
<button
[disabled]="!createRemoteProcessGroupForm.dirty || createRemoteProcessGroupForm.invalid || saving.value"
type="button"
color="primary"
(click)="createRemoteProcessGroup()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Add</span>
</button>
</mat-dialog-actions>

9
nifi-frontend/src/main/frontend/apps/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-4">
<div>Name</div>
<div class="accent-color font-medium">{{ request.entity.component.name }}</div>
<div class="tertiary-color font-medium">{{ request.entity.component.name }}</div>
</div>
<div class="flex flex-col mb-4">
<div>Id</div>
<div class="accent-color font-medium">{{ request.entity.component.id }}</div>
<div class="tertiary-color font-medium">{{ request.entity.component.id }}</div>
</div>
<div class="flex gap-x-4">
<div class="w-full">
@ -166,15 +166,14 @@
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
<button mat-button mat-dialog-close color="primary">Close</button>
<button mat-flat-button mat-dialog-close>Close</button>
} @else {
<button mat-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editRemoteProcessGroupForm.dirty || editRemoteProcessGroupForm.invalid || saving.value"
type="button"
color="primary"
(click)="submitForm()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Apply</span>
</button>
}

8
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.ts
View File

@ -77,13 +77,13 @@ export class Breadcrumbs {
const vciState: string = breadcrumbEntity.versionedFlowState;
if (vciState) {
if (vciState === 'SYNC_FAILURE') {
return 'sync-failure surface-color fa fa-question';
return 'sync-failure neutral-color fa fa-question';
} else if (vciState === 'LOCALLY_MODIFIED_AND_STALE') {
return 'locally-modified-and-stale warn-color-lighter fa fa-exclamation-circle';
return 'locally-modified-and-stale error-color-lighter fa fa-exclamation-circle';
} else if (vciState === 'STALE') {
return 'stale warn-color-lighter fa fa-arrow-circle-up';
return 'stale error-color-lighter fa fa-arrow-circle-up';
} else if (vciState === 'LOCALLY_MODIFIED') {
return 'locally-modified surface-color fa fa-asterisk';
return 'locally-modified neutral-color fa fa-asterisk';
} else {
// up to date
return 'up-to-date success-color fa fa-check';

6
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/common/no-registry-clients-dialog/no-registry-clients-dialog.component.html
View File

@ -28,10 +28,8 @@
<mat-dialog-actions align="end">
@if (request.controllerPermissions.canRead) {
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button mat-dialog-close color="primary" [routerLink]="['/settings', 'registry-clients']">
Configure
</button>
<button mat-flat-button mat-dialog-close [routerLink]="['/settings', 'registry-clients']">Configure</button>
} @else {
<button mat-button mat-dialog-close color="primary">Ok</button>
<button mat-flat-button mat-dialog-close>Ok</button>
}
</mat-dialog-actions>

12
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html
View File

@ -33,7 +33,10 @@
[entity]="serviceState.breadcrumb"
[currentProcessGroupId]="serviceState.processGroupId"></breadcrumbs>
@if (serviceState.breadcrumb.permissions.canWrite) {
<button mat-icon-button color="primary" (click)="openNewControllerServiceDialog()">
<button
mat-icon-button
class="primary-icon-button"
(click)="openNewControllerServiceDialog()">
<i class="fa fa-plus"></i>
</button>
}
@ -63,11 +66,14 @@
}
<div class="flex justify-between">
<div class="text-sm flex items-center gap-x-2">
<button mat-icon-button color="primary" (click)="refreshControllerServiceListing()">
<button
mat-icon-button
class="primary-icon-button"
(click)="refreshControllerServiceListing()">
<i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ serviceState.loadedTimestamp }}
</div>
</div>

7
nifi-frontend/src/main/frontend/apps/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 accent-color font-medium"
class="overflow-ellipsis overflow-hidden whitespace-nowrap tertiary-color font-medium"
[title]="request.entity.name">
{{ request.entity.name }}
</div>
@ -44,7 +44,7 @@
</div>
<div class="mb-3.5">
<mat-label>Compressed</mat-label>
<mat-checkbox color="primary" formControlName="compressed"></mat-checkbox>
<mat-checkbox formControlName="compressed"></mat-checkbox>
</div>
<div>
<mat-form-field>
@ -92,9 +92,8 @@
<button
[disabled]="!editPortForm.dirty || editPortForm.invalid || saving.value"
type="button"
color="primary"
(click)="editRemotePort()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Apply</span>
</button>
</mat-dialog-actions>

19
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
View File

@ -27,7 +27,7 @@
<div class="flex flex-col mb-5">
<div>Name</div>
<div
class="overflow-ellipsis overflow-hidden whitespace-nowrap accent-color font-medium"
class="overflow-ellipsis overflow-hidden whitespace-nowrap tertiary-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 accent-color font-medium"
class="overflow-ellipsis overflow-hidden whitespace-nowrap tertiary-color font-medium"
[title]="portsState.rpg?.component?.targetUri">
{{ portsState.rpg?.component?.targetUri }}
</div>
@ -115,7 +115,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatTasks(item)">
<span
[class.surface-color]="!item.concurrentlySchedulableTaskCount"
[class.neutral-color]="!item.concurrentlySchedulableTaskCount"
[class.blank]="!item.concurrentlySchedulableTaskCount">
{{ formatTasks(item) }}
</span>
@ -143,7 +143,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatCount(item)">
<span
[class.surface-color]="isCountBlank(item)"
[class.neutral-color]="isCountBlank(item)"
[class.blank]="isCountBlank(item)">
{{ formatCount(item) }}
</span>
@ -159,7 +159,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatSize(item)">
<span
[class.surface-color]="isSizeBlank(item)"
[class.neutral-color]="isSizeBlank(item)"
[class.blank]="isSizeBlank(item)">
{{ formatSize(item) }}
</span>
@ -175,7 +175,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatDuration(item)">
<span
[class.surface-color]="isDurationBlank(item)"
[class.neutral-color]="isDurationBlank(item)"
[class.blank]="isDurationBlank(item)">
{{ formatDuration(item) }}
</span>
@ -251,11 +251,14 @@
</div>
<div class="flex justify-between">
<div class="text-sm flex items-center gap-x-2">
<button mat-icon-button color="primary" (click)="refreshManageRemotePortsListing()">
<button
mat-icon-button
class="primary-icon-button"
(click)="refreshManageRemotePortsListing()">
<i class="fa fa-refresh" [class.fa-spin]="portsState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ portsState.loadedTimestamp }}
</div>
</div>

31
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/feature/_login.component-theme.scss
View File

@ -18,29 +18,24 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
.login-background {
background: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
)
url(../../../../../../../libs/shared/src/assets/icons/bg-error.png) left top no-repeat;
}

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/feature/login.component.html
View File

@ -18,7 +18,7 @@
@if (loading) {
<div class="splash h-full p-20">
<div class="splash-img h-full flex items-center justify-center">
<mat-spinner color="warn"></mat-spinner>
<mat-spinner class="error-spinner"></mat-spinner>
</div>
</div>
} @else {

4
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/ui/login-form/login-form.component.html
View File

@ -40,9 +40,7 @@
</mat-form-field>
</div>
<div class="flex justify-end">
<button [disabled]="!loginForm.dirty || loginForm.invalid" type="submit" color="primary" mat-button>
Log in
</button>
<button [disabled]="!loginForm.dirty || loginForm.invalid" type="submit" mat-flat-button>Log in</button>
</div>
</form>
</div>

29
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/logout/feature/_logout.component-theme.scss
View File

@ -18,20 +18,25 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.m2-get-color-config($nifi-theme);
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-darker: mat.m2-get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.m2-get-color-from-palette($nifi-theme-surface-palette, lighter);
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
.logout-background {
background: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter)
background: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
)
url(../../../../../../../libs/shared/src/assets/icons/bg-error.png) left top no-repeat;
}
}

17
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
View File

@ -28,11 +28,11 @@
<div class="flex flex-col gap-y-1.5">
@for (updateStep of requestEntity.request.updateSteps; track updateStep.description) {
<div class="flex justify-between items-center">
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ updateStep.description }}
</div>
@if (updateStep.failureReason) {
<div class="fa fa-times warn-color"></div>
<div class="fa fa-times error-color"></div>
} @else {
@if (updateStep.complete) {
<div class="fa fa-check success-color"></div>
@ -53,11 +53,11 @@
<div class="flex flex-col">
<div>Parameter</div>
@if (parameters && parameters.length > 0) {
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ getUpdatedParameters() }}
</div>
} @else {
<div class="unset surface-color">No parameters updated</div>
<div class="unset neutral-color">No parameters updated</div>
}
</div>
<div class="flex-1 flex flex-col">
@ -90,7 +90,7 @@
@if (!isNew) {
<div class="flex flex-col mb-5">
<div>Id</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ request.parameterContext?.id }}
</div>
</div>
@ -171,7 +171,7 @@
@if ((updateRequest | async)!; as requestEntity) {
<mat-dialog-actions align="end">
@if (requestEntity.request.complete) {
<button color="primary" mat-button mat-dialog-close>Close</button>
<button mat-flat-button mat-dialog-close>Close</button>
} @else {
<button mat-button mat-dialog-close>Cancel</button>
}
@ -180,15 +180,14 @@
@if ({ value: (saving$ | async)! }; as saving) {
<mat-dialog-actions align="end">
@if (readonly) {
<button mat-button mat-dialog-close color="primary">Close</button>
<button mat-flat-button mat-dialog-close>Close</button>
} @else {
<button mat-button mat-dialog-close>Cancel</button>
<button
[disabled]="!editParameterContextForm.dirty || editParameterContextForm.invalid || saving.value"
type="button"
color="primary"
(click)="submitForm()"
mat-button>
mat-flat-button>
<span *nifiSpinner="saving.value">Apply</span>
</button>
}

10
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
View File

@ -101,7 +101,7 @@
</div>
@if (hasDescription(item)) {
<i
class="pl-1 fa fa-info-circle surface-color"
class="pl-1 fa fa-info-circle neutral-color"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="item.component.description"></i>
@ -109,15 +109,15 @@
</div>
@if (canClose) {
<button class="pr-1" type="button" (click)="removeSelected(item, i)">
<i class="fa fa-times surface-contrast"></i>
<i class="fa fa-times neutral-contrast"></i>
</button>
}
} @else {
<div class="flex items-center accent-color font-medium">
<div class="flex items-center tertiary-color font-medium">
<div>{{ item.component.name }}</div>
@if (hasDescription(item)) {
<i
class="pl-1 fa fa-info-circle surface-color"
class="pl-1 fa fa-info-circle neutral-color"
nifiTooltip
[tooltipComponentType]="TextTip"
[tooltipInputData]="item.description"></i>
@ -126,7 +126,7 @@
}
</ng-template>
<ng-template #unauthorizedInheritedParameterContext let-item>
<div class="flex items-center accent-color font-medium">
<div class="flex items-center tertiary-color font-medium">
<div>{{ item.id }}</div>
</div>
</ng-template>

6
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.component.html
View File

@ -25,7 +25,7 @@
@if (currentUser$ | async; as currentUser) {
@if (currentUser.parameterContextPermissions.canWrite) {
<div class="flex justify-end">
<button mat-icon-button color="primary" (click)="openNewParameterContextDialog()">
<button mat-icon-button class="primary-icon-button" (click)="openNewParameterContextDialog()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -43,13 +43,13 @@
</div>
<div class="flex justify-between">
<div class="text-sm flex items-center gap-x-2">
<button mat-icon-button color="primary" (click)="refreshParameterContextListing()">
<button mat-icon-button class="primary-icon-button" (click)="refreshParameterContextListing()">
<i
class="fa fa-refresh"
[class.fa-spin]="parameterContextListingState.status === 'loading'"></i>
</button>
<div>Last updated:</div>
<div class="accent-color font-medium">
<div class="tertiary-color font-medium">
{{ parameterContextListingState.loadedTimestamp }}
</div>
</div>

2
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
View File

@ -30,7 +30,7 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let item">
<div
[ngClass]="{ unset: !canRead(item), 'surface-color': !canRead(item) }"
[ngClass]="{ unset: !canRead(item), 'neutral-color': !canRead(item) }"
class="overflow-hidden overflow-ellipsis whitespace-nowrap">
{{ formatName(item) }}
</div>

12
nifi-frontend/src/main/frontend/apps/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 && !isDisabled) {
<div class="flex justify-end items-center">
<button mat-icon-button color="primary" type="button" (click)="newParameterClicked()">
<button mat-icon-button class="primary-icon-button" type="button" (click)="newParameterClicked()">
<i class="fa fa-plus"></i>
</button>
</div>
@ -72,7 +72,7 @@
*ngTemplateOutlet="renderValue; context: { $implicit: getValue(item) }"></ng-container>
<ng-template #renderValue let-parameterValue>
@if (isNull(parameterValue)) {
<div class="unset surface-color">No value set</div>
<div class="unset neutral-color">No value set</div>
} @else {
<ng-container
*ngTemplateOutlet="
@ -80,7 +80,7 @@
context: { $implicit: parameterValue }
"></ng-container>
<ng-template #sensitive>
<div class="sensitive surface-color">Sensitive value set</div>
<div class="sensitive neutral-color">Sensitive value set</div>
</ng-template>
<ng-template #nonSensitive let-value>
<ng-container
@ -90,7 +90,7 @@
"></ng-container>
</ng-template>
<ng-template #blank>
<div class="empty surface-color">Empty string set</div>
<div class="empty neutral-color">Empty string set</div>
</ng-template>
<ng-template #nonBlank let-value>
<div class="flex justify-between items-center">
@ -173,11 +173,11 @@
<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="accent-color font-medium">
<div class="tertiary-color font-medium">
@if (selectedItem) {
<span>{{ selectedItem.originalEntity.parameter.name }}</span>
} @else {
<span class="unset surface-color">None</span>
<span class="unset neutral-color">None</span>
}
</div>
</div>

4
nifi-frontend/src/main/frontend/apps/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="accent-color font-medium">No referencing Process Groups</div>
<div class="tertiary-color font-medium">No referencing Process Groups</div>
} @else {
<ul>
@if (authorizedProcessGroupReferences.length > 0) {
@ -62,7 +62,7 @@
@if (references.length > 0) {
@for (reference of references; track reference) {
<li>
<div class="unset surface-color">{{ reference.id }}</div>
<div class="unset neutral-color">{{ reference.id }}</div>
</li>
}
}

74
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
View File

@ -18,66 +18,62 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.m2-get-color-config($material-theme);
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($material-theme-color-config, is-dark);
$material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
$material-theme-accent-palette-default: mat.m2-get-color-from-palette($material-theme-accent-palette, default);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
$material-theme-secondary-palette-lighter: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), lighter)
);
$supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
$material-theme-tertiary-palette-default: mat.get-theme-color(
$material-theme,
tertiary,
map.get(map.get($config, tertiary), default)
);
$supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$surface-contrast: if(
$is-dark,
$supplemental-theme-surface-palette-darker-contrast,
$supplemental-theme-surface-palette-lighter-contrast
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
rect.lineage {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
fill: if($is-material-dark, $material-theme-neutral-palette-darker, $material-theme-neutral-palette-lighter);
}
g.flowfile-icon text {
fill: $material-theme-accent-palette-default;
fill: $material-theme-tertiary-palette-default;
}
circle.event-circle {
fill: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-darker);
stroke: $surface-contrast;
fill: if(
$is-material-dark,
$material-theme-secondary-palette-default,
$material-theme-secondary-palette-lighter
);
stroke: $neutral-contrast;
}
path.link {
stroke: $surface-contrast;
stroke: $neutral-contrast;
}
marker {
@extend .surface-contrast;
@extend .neutral-contrast;
}
circle.flowfile-link {
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
stroke: $surface-contrast;
fill: if($is-material-dark, $material-theme-neutral-palette-darker, $material-theme-neutral-palette-lighter);
stroke: $neutral-contrast;
}
}

31
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
View File

@ -18,30 +18,25 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), darker)
);
$supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
$supplemental-theme-surface-palette,
darker
$material-theme-neutral-palette-lighter: mat.get-theme-color(
$material-theme,
neutral,
map.get(map.get($config, neutral), lighter)
);
.provenance-event-table {
.lineage {
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
}
}

74
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
View File

@ -18,52 +18,78 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.m2-get-color-config($material-theme);
$supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
$material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-accent-palette-default: mat.m2-get-color-from-palette($material-theme-accent-palette, default);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-warn-palette-darker: mat.m2-get-color-from-palette($material-theme-warn-palette, darker);
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$material-theme-secondary-palette-darker: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), darker)
);
$material-theme-secondary-palette-lighter: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), lighter)
);
$material-theme-tertiary-palette-default: mat.get-theme-color(
$material-theme,
tertiary,
map.get(map.get($config, tertiary), default)
);
$material-theme-error-palette-default: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), default)
);
$material-theme-error-palette-darker: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), darker)
);
#lineage {
canvas,
svg {
text.event-type {
@extend .surface-contrast;
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
@extend .neutral-contrast;
font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
}
text.event-type.expand-parents,
text.event-type.expand-children {
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
}
path.link.selected {
stroke: $material-theme-warn-palette-darker;
stroke: if(
$is-material-dark,
$material-theme-error-palette-default,
$material-theme-error-palette-darker
);
}
g.event circle.selected {
fill: $material-theme-warn-palette-darker;
fill: if(
$is-material-dark,
$material-theme-error-palette-default,
$material-theme-error-palette-darker
);
}
g.event circle.context {
stroke: $material-theme-primary-palette-darker;
stroke: if(
$is-material-dark,
$material-theme-secondary-palette-darker,
$material-theme-secondary-palette-lighter
);
}
g.flowfile circle.context,
g.event circle.context {
stroke: if($is-dark, $material-theme-accent-palette-default, $material-theme-primary-palette-darker);
stroke: if(
$is-material-dark,
$material-theme-tertiary-palette-default,
$material-theme-tertiary-palette-default
);
}
}
}

6
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.ts
View File

@ -325,9 +325,9 @@ export class LineageComponent implements OnInit {
.attr('orient', 'auto')
.attr('class', function (d) {
if (d.indexOf('SELECTED') >= 0) {
return 'warn-color-darker';
return 'error-color-darker';
} else {
return 'surface-contrast';
return 'neutral-contrast';
}
})
.append('path')
@ -761,7 +761,7 @@ export class LineageComponent implements OnInit {
flowfiles
.append('g')
.attr('class', 'accent-color')
.attr('class', 'tertiary-color')
.attr('transform', function () {
return 'translate(-9,-9)';
})

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