Skip to content

Commit

Permalink
[NIFI-13234] update unauthorized canvas component colors (apache#8902)
Browse files Browse the repository at this point in the history 
* [NIFI-13234] update unautorized canvas component colors

* restore web font loader to ensure positions of canvas text is calculate correctly

This closes apache#8902
  • Loading branch information
@scottyaslan @shubhluck
scottyaslan authored and shubhluck committed Jun 1, 2024
1 parent 1278511 commit 7ccca81
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 25 deletions.
18 changes: 18 additions & 0 deletions ...ontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@

import { Injectable } from '@angular/core';
import * as d3 from 'd3';
import * as WebFont from 'webfontloader';
import { Store } from '@ngrx/store';
import { CanvasState } from '../state';
import { refreshBirdseyeView, transformComplete } from '../state/transform/transform.actions';
Expand Down Expand Up @@ -66,6 +67,23 @@ export class CanvasView {
) {}

public init(svg: any, canvas: any): void {
WebFont.load({
custom: {
families: ['Roboto', 'flowfont', 'FontAwesome']
},
active: function () {
// re-render once the fonts have loaded, without the fonts
// positions of elements on the canvas may be incorrect
self.processorManager.render();
self.processGroupManager.render();
self.remoteProcessGroupManager.render();
self.portManager.render();
self.labelManager.render();
self.funnelManager.render();
self.connectionManager.render();
}
});

this.svg = svg;
this.canvas = canvas;

Expand Down
44 changes: 22 additions & 22 deletions ...fi/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ export class ProcessGroupManager {
.append('text')
.attr('x', 10)
.attr('y', 49)
.attr('class', 'process-group-transmitting process-group-contents-icon')
.attr('class', 'process-group-transmitting process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf140')
.append('title')
Expand All @@ -270,7 +270,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
.attr('class', 'process-group-not-transmitting process-group-contents-icon')
.attr('class', 'process-group-not-transmitting process-group-contents-icon primary-color-lighter')
.attr('font-family', 'flowfont')
.text('\ue80a')
.append('title')
Expand All @@ -286,7 +286,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
.attr('class', 'process-group-running process-group-contents-icon')
.attr('class', 'process-group-running process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf04b')
.append('title')
Expand All @@ -302,7 +302,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
.attr('class', 'process-group-stopped process-group-contents-icon')
.attr('class', 'process-group-stopped process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf04d')
.append('title')
Expand All @@ -318,7 +318,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
.attr('class', 'process-group-invalid process-group-contents-icon')
.attr('class', 'process-group-invalid process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf071')
.append('title')
Expand All @@ -334,7 +334,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
.attr('class', 'process-group-disabled process-group-contents-icon')
.attr('class', 'process-group-disabled process-group-contents-icon primary-color-lighter')
.attr('font-family', 'flowfont')
.text('\ue802')
.append('title')
Expand All @@ -353,7 +353,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
.attr('class', 'process-group-up-to-date process-group-contents-icon')
.attr('class', 'process-group-up-to-date process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf00c')
.append('title')
Expand All @@ -373,7 +373,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
.attr('class', 'process-group-locally-modified process-group-contents-icon')
.attr('class', 'process-group-locally-modified process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf069')
.append('title')
Expand All @@ -393,7 +393,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
.attr('class', 'process-group-stale process-group-contents-icon')
.attr('class', 'process-group-stale process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf0aa')
.append('title')
Expand All @@ -413,7 +413,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
.attr('class', 'process-group-locally-modified-and-stale process-group-contents-icon')
.attr('class', 'process-group-locally-modified-and-stale process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf06a')
.append('title')
Expand All @@ -433,7 +433,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
.attr('class', 'process-group-sync-failure process-group-contents-icon')
.attr('class', 'process-group-sync-failure process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf128')
.append('title')
Expand Down Expand Up @@ -736,7 +736,7 @@ export class ProcessGroupManager {
.classed('success-color', function (d: any) {
return d.permissions.canRead && d.activeRemotePortCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.activeRemotePortCount === 0;
});
const transmittingCount = details
Expand All @@ -760,7 +760,7 @@ export class ProcessGroupManager {
.classed('not-transmitting surface-color', function (d: any) {
return d.permissions.canRead && d.inactiveRemotePortCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.inactiveRemotePortCount === 0;
})
.attr('x', function () {
Expand Down Expand Up @@ -792,7 +792,7 @@ export class ProcessGroupManager {
.classed('success-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.runningCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.component.runningCount === 0;
})
.attr('x', function () {
Expand Down Expand Up @@ -824,7 +824,7 @@ export class ProcessGroupManager {
.classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.stoppedCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.component.stoppedCount === 0;
})
.attr('x', function () {
Expand Down Expand Up @@ -856,7 +856,7 @@ export class ProcessGroupManager {
.classed('invalid caution-color', function (d: any) {
return d.permissions.canRead && d.component.invalidCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.component.invalidCount === 0;
})
.attr('x', function () {
Expand Down Expand Up @@ -888,7 +888,7 @@ export class ProcessGroupManager {
.classed('disabled surface-color', function (d: any) {
return d.permissions.canRead && d.component.disabledCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.component.disabledCount === 0;
})
.attr('x', function () {
Expand Down Expand Up @@ -920,7 +920,7 @@ export class ProcessGroupManager {
.classed('success-color', function (d: any) {
return d.permissions.canRead && d.component.upToDateCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.component.upToDateCount === 0;
});
const upToDateCount = details
Expand All @@ -944,7 +944,7 @@ export class ProcessGroupManager {
.classed('surface-color', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedCount === 0;
})
.attr('x', function () {
Expand Down Expand Up @@ -976,7 +976,7 @@ export class ProcessGroupManager {
.classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.staleCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.component.staleCount === 0;
})
.attr('x', function () {
Expand Down Expand Up @@ -1008,7 +1008,7 @@ export class ProcessGroupManager {
.classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedAndStaleCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedAndStaleCount === 0;
})
.attr('x', function () {
Expand Down Expand Up @@ -1042,7 +1042,7 @@ export class ProcessGroupManager {
.classed('surface-color', function (d: any) {
return d.permissions.canRead && d.component.syncFailureCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
.classed('zero', function (d: any) {
return d.permissions.canRead && d.component.syncFailureCount === 0;
})
.attr('x', function () {
Expand Down
6 changes: 3 additions & 3 deletions ...rc/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
}

g.component rect.body.unauthorized {
fill: rgba($nifi-theme-surface-palette-default, if($is-dark, 0.97, 0.08));
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
}

g.component rect.border,
Expand All @@ -143,7 +143,7 @@
}

g.component rect.processor-icon-container.unauthorized {
fill: rgba($nifi-theme-surface-palette-default, if($is-dark, 0.97, 0.08));
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
}

g.component.selected rect.border {
Expand Down Expand Up @@ -271,7 +271,7 @@
}

g.connection rect.body.unauthorized {
fill: rgba($nifi-theme-surface-palette-default, if($is-dark, 0.97, 0.08));
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
}

g.connection rect.border.unauthorized {
Expand Down
13 changes: 13 additions & 0 deletions ...ramework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"ngx-skeleton-loader": "^8.1.0",
"rxjs": "~7.8.1",
"tslib": "^2.6.2",
"webfontloader": "^1.6.28",
"zone.js": "0.14.4"
},
"devDependencies": {
Expand All @@ -63,6 +64,7 @@
"@types/d3": "^7.4.3",
"@types/humanize-duration": "^3.27.3",
"@types/jest": "^29.5.12",
"@types/webfontloader": "^1.6.38",
"@typescript-eslint/eslint-plugin": "6.21.0",
"@typescript-eslint/parser": "6.21.0",
"autoprefixer": "^10.4.16",
Expand Down

0 comments on commit 7ccca81

Please sign in to comment.