Skip to content

Commit

Permalink
[NIFI-13093] use warn palette for all errors and introduce caution pa…
Browse files Browse the repository at this point in the history 
…lette (#8721)

* [NIFI-13093] use warn palette for all errors and introduce caution palette

* update semantic color names

* update warn palette darker hue

* import ErrorBanner component into cluster.component.spec.ts

* .primary-contrast

* some code clean up and reuse of .surface-contrast

* caution color cleanup

* update bulletin to use inverted contrast color and semantic caution-color class

This closes #8721
  • Loading branch information
@scottyaslan
scottyaslan authored May 2, 2024
1 parent b6a8699 commit 9ac1783
Show file tree
Hide file tree
Showing 78 changed files with 384 additions and 496 deletions.
34 changes: 0 additions & 34 deletions ...bulletins/ui/bulletin-board/bulletin-board-list/_bulletin-board-list.component-theme.scss
View file

This file was deleted.

4 changes: 2 additions & 2 deletions ...pp/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,9 +146,9 @@ export class BulletinBoardList implements AfterViewInit {
return 'bulletin-error warn-color';
case 'warn':
case 'warning':
return 'bulletin-warn';
return 'bulletin-warn caution-color';
default:
return 'bulletin-normal nifi-success-darker';
return 'bulletin-normal success-color-darker';
}
}

Expand Down
3 changes: 2 additions & 1 deletion ...b/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/feature/cluster.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { MatTabsModule } from '@angular/material/tabs';
import { selectClusterListing } from '../state/cluster-listing/cluster-listing.selectors';
import { clusterListingFeatureKey } from '../state/cluster-listing';
import { ClusterState } from '../state';
import { ErrorBanner } from '../../../ui/common/error-banner/error-banner.component';

describe('Cluster', () => {
let component: Cluster;
Expand All @@ -44,7 +45,7 @@ describe('Cluster', () => {
};
TestBed.configureTestingModule({
declarations: [Cluster],
imports: [ClusterNodeListing, MatTabsModule, RouterTestingModule, MockNavigation],
imports: [ClusterNodeListing, MatTabsModule, RouterTestingModule, MockNavigation, ErrorBanner],
providers: [
provideMockStore({
initialState,
Expand Down
2 changes: 1 addition & 1 deletion ...cluster-node-listing/cluster-node-detail-dialog/cluster-node-detail-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ <h2 mat-dialog-title>Node Details</h2>
</ul>
</div>
} @else {
<div class="unset nifi-surface-default">No Events</div>
<div class="unset surface-color">No Events</div>
}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...ages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatStartTime(item)">
@if (!item.nodeStartTime) {
<div class="unset nifi-surface-default">No value set</div>
<div class="unset surface-color">No value set</div>
} @else {
{{ formatStartTime(item) }}
}
Expand All @@ -135,7 +135,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatHeartbeat(item)">
@if (!item.heartbeat) {
<div class="unset nifi-surface-default">No value set</div>
<div class="unset surface-color">No value set</div>
} @else {
{{ formatHeartbeat(item) }}
}
Expand Down
4 changes: 2 additions & 2 deletions ...istory/ui/flow-configuration-history-listing/action-details/action-details.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ <h2 mat-dialog-title>Action Details</h2>
<ng-template #formatValue let-value let-title="title">
@if (value != null) {
@if (value === '') {
<div class="unset nifi-surface-default">Empty string set</div>
<div class="unset surface-color">Empty string set</div>
} @else {
@if (title == null) {
<div class="accent-color font-medium">{{ value }}</div>
Expand All @@ -205,7 +205,7 @@ <h2 mat-dialog-title>Action Details</h2>
}
}
} @else {
<div class="unset nifi-surface-default">No value set</div>
<div class="unset surface-color">No value set</div>
}
</ng-template>
</mat-dialog-content>
Expand Down
10 changes: 4 additions & 6 deletions ...-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,9 @@
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Name</div>
</th>
<td mat-cell *matCellDef="let item" [title]="formatName(item)">
<span
[class.nifi-surface-default]="!item.action?.sourceName"
[class.blank]="!item.action?.sourceName"
>{{ formatName(item) }}</span
>
<span [class.surface-color]="!item.action?.sourceName" [class.blank]="!item.action?.sourceName">{{
formatName(item)
}}</span>
</td>
</ng-container>

Expand Down Expand Up @@ -99,7 +97,7 @@
[class.even]="even"
(click)="select(row)"
[class.unset]="!canRead(row)"
[class.nifi-surface-default]="!canRead(row)"
[class.surface-color]="!canRead(row)"
[class.selected]="isSelected(row)"></tr>
</table>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...fi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1403,7 +1403,7 @@ export class CanvasUtils {
})
.attr('class', function () {
if (terminatedThreads > 0) {
return `active-thread-count-icon nifi-warn-darker`;
return `active-thread-count-icon warn-color-darker`;
} else {
return `active-thread-count-icon primary-color`;
}
Expand Down
18 changes: 9 additions & 9 deletions ...d/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -990,21 +990,21 @@ export class ConnectionManager {
return '\uf04d';
}
})
.classed('running nifi-success-lighter', function () {
.classed('running success-color-lighter', function () {
if (d.component.source.exists === false) {
return false;
} else {
return d.component.source.running;
}
})
.classed('stopped nifi-warn-lighter', function () {
.classed('stopped warn-color-lighter', function () {
if (d.component.source.exists === false) {
return false;
} else {
return !d.component.source.running;
}
})
.classed('is-missing-port invalid', function () {
.classed('is-missing-port invalid caution-color', function () {
return d.component.source.exists === false;
});
} else {
Expand Down Expand Up @@ -1105,21 +1105,21 @@ export class ConnectionManager {
return '\uf04d';
}
})
.classed('running nifi-success-lighter', function () {
.classed('running success-color-lighter', function () {
if (d.component.destination.exists === false) {
return false;
} else {
return d.component.destination.running;
}
})
.classed('stopped nifi-warn-lighter', function () {
.classed('stopped warn-color-lighter', function () {
if (d.component.destination.exists === false) {
return false;
} else {
return !d.component.destination.running;
}
})
.classed('is-missing-port invalid', function () {
.classed('is-missing-port invalid caution-color', function () {
return d.component.destination.exists === false;
});
} else {
Expand Down Expand Up @@ -1454,7 +1454,7 @@ export class ConnectionManager {
return true;
}
})
.classed('load-balance-icon-active fa-rotate-90 nifi-success-default', function (d: any) {
.classed('load-balance-icon-active fa-rotate-90 success-color', function (d: any) {
return d.permissions.canRead && d.component.loadBalanceStatus === 'LOAD_BALANCE_ACTIVE';
})
.classed('primary-color', function (d: any) {
Expand Down Expand Up @@ -1722,7 +1722,7 @@ export class ConnectionManager {
.attr('display', function (d: any) {
const predicted: number = d.status.aggregateSnapshot.predictions?.predictedPercentBytes ?? -1;
if (predicted >= 0) {
return 'unset nifi-surface-default';
return 'unset surface-color';
} else {
// don't show it if there is not a valid prediction
return 'none';
Expand Down Expand Up @@ -1790,7 +1790,7 @@ export class ConnectionManager {
.attr('display', function (d: any) {
const predicted = d.status.aggregateSnapshot.predictions?.predictedPercentCount ?? -1;
if (predicted >= 0) {
return 'unset nifi-surface-default';
return 'unset surface-color';
} else {
// don't show it if there not a valid prediction
return 'none';
Expand Down
8 changes: 4 additions & 4 deletions ...rontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -389,9 +389,9 @@ export class PortManager {
if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'invalid';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
clazz = 'running nifi-success-lighter';
clazz = 'running success-color-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
clazz = 'stopped nifi-warn-lighter';
clazz = 'stopped warn-color-lighter';
}

return `run-status-icon ${clazz}`;
Expand Down Expand Up @@ -443,10 +443,10 @@ export class PortManager {
return '\ue80a';
}
})
.classed('transmitting nifi-success-default', function (d: any) {
.classed('transmitting success-color', function (d: any) {
return d.status.transmitting === true;
})
.classed('not-transmitting nifi-surface-default', function (d: any) {
.classed('not-transmitting surface-color', function (d: any) {
return d.status.transmitting !== true;
});

Expand Down
34 changes: 17 additions & 17 deletions ...rc/main/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 @@ -132,7 +132,7 @@ export class ProcessGroupManager {
.attr('y', 20)
.attr('width', 300)
.attr('height', 16)
.attr('class', 'process-group-name');
.attr('class', 'process-group-name primary-contrast');

// process group name
processGroup.append('text').attr('x', 10).attr('y', 21).attr('class', 'version-control');
Expand Down Expand Up @@ -733,7 +733,7 @@ export class ProcessGroupManager {
// update transmitting
const transmitting = details
.select('text.process-group-transmitting')
.classed('nifi-success-default', function (d: any) {
.classed('success-color', function (d: any) {
return d.permissions.canRead && d.activeRemotePortCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand All @@ -757,7 +757,7 @@ export class ProcessGroupManager {
// update not transmitting
const notTransmitting = details
.select('text.process-group-not-transmitting')
.classed('not-transmitting nifi-surface-default', function (d: any) {
.classed('not-transmitting surface-color', function (d: any) {
return d.permissions.canRead && d.inactiveRemotePortCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand Down Expand Up @@ -789,7 +789,7 @@ export class ProcessGroupManager {
// update running
const running = details
.select('text.process-group-running')
.classed('nifi-success-lighter', function (d: any) {
.classed('success-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.runningCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand Down Expand Up @@ -821,7 +821,7 @@ export class ProcessGroupManager {
// update stopped
const stopped = details
.select('text.process-group-stopped')
.classed('nifi-warn-lighter', function (d: any) {
.classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.stoppedCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand Down Expand Up @@ -853,7 +853,7 @@ export class ProcessGroupManager {
// update invalid
const invalid = details
.select('text.process-group-invalid')
.classed('invalid', function (d: any) {
.classed('invalid caution-color', function (d: any) {
return d.permissions.canRead && d.component.invalidCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand Down Expand Up @@ -885,7 +885,7 @@ export class ProcessGroupManager {
// update disabled
const disabled = details
.select('text.process-group-disabled')
.classed('disabled nifi-surface-default', function (d: any) {
.classed('disabled surface-color', function (d: any) {
return d.permissions.canRead && d.component.disabledCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand Down Expand Up @@ -917,7 +917,7 @@ export class ProcessGroupManager {
// up to date current
const upToDate = details
.select('text.process-group-up-to-date')
.classed('nifi-success-default', function (d: any) {
.classed('success-color', function (d: any) {
return d.permissions.canRead && d.component.upToDateCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand All @@ -941,7 +941,7 @@ export class ProcessGroupManager {
// update locally modified
const locallyModified = details
.select('text.process-group-locally-modified')
.classed('nifi-surface-default', function (d: any) {
.classed('surface-color', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand Down Expand Up @@ -973,7 +973,7 @@ export class ProcessGroupManager {
// update stale
const stale = details
.select('text.process-group-stale')
.classed('nifi-warn-lighter', function (d: any) {
.classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.staleCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand Down Expand Up @@ -1005,7 +1005,7 @@ export class ProcessGroupManager {
// update locally modified and stale
const locallyModifiedAndStale = details
.select('text.process-group-locally-modified-and-stale')
.classed('nifi-warn-lighter', function (d: any) {
.classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedAndStaleCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand Down Expand Up @@ -1039,7 +1039,7 @@ export class ProcessGroupManager {
// update sync failure
const syncFailure = details
.select('text.process-group-sync-failure')
.classed('nifi-surface-default', function (d: any) {
.classed('surface-color', function (d: any) {
return d.permissions.canRead && d.component.syncFailureCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
Expand Down Expand Up @@ -1077,16 +1077,16 @@ export class ProcessGroupManager {
if (self.isUnderVersionControl(processGroupData)) {
const vciState = processGroupData.versionedFlowState;
if (vciState === 'SYNC_FAILURE') {
return `version-control nifi-surface-default`;
return `version-control surface-color`;
} else if (vciState === 'LOCALLY_MODIFIED_AND_STALE') {
return `version-control nifi-warn-lighter`;
return `version-control warn-color-lighter`;
} else if (vciState === 'STALE') {
return `version-control nifi-warn-lighter`;
return `version-control warn-color-lighter`;
} else if (vciState === 'LOCALLY_MODIFIED') {
return `version-control nifi-surface-default`;
return `version-control surface-color`;
} else {
// up to date
return `version-control nifi-success-default`;
return `version-control success-color`;
}
} else {
return 'version-control surface-contrast';
Expand Down
Loading

0 comments on commit 9ac1783

Please sign in to comment.