mirror of https://github.com/apache/nifi.git
NIFI-12683: Considering current PG permissions in the new canvas item toolbox (#8311)
* NIFI-12683: - Considering current PG permissions in the new canvas item toolbox. * NIFI-12683: - Prettier. * NIFI-12683: - Ignoring theme files from prettier check. * NIFI-12683: - Aligning button style. This closes #8311
This commit is contained in:
Matt Gilman
GitHub
parent
d901253974
commit
304241f3c9
|
|
@ -31,6 +31,9 @@ npm-debug.log
|
|||
/connect.lock
|
||||
/coverage
|
||||
|
||||
# Theme
|
||||
src/assets/themes/*
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</mat-radio-group>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-raised-button mat-dialog-close color="accent">Cancel</button>
|
||||
<button mat-stroked-button mat-dialog-close color="primary">Cancel</button>
|
||||
<button mat-raised-button [disabled]="overridePolicyForm.invalid" (click)="overrideClicked()" color="primary">
|
||||
Override
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
.canvas-background {
|
||||
background-color: $canvas-primary-palette-600;
|
||||
background-image: linear-gradient(to right, $canvas-primary-palette-700 1px, transparent 1px),
|
||||
linear-gradient(to bottom, $canvas-primary-palette-700 1px, transparent 1px);
|
||||
linear-gradient(to bottom, $canvas-primary-palette-700 1px, transparent 1px);
|
||||
}
|
||||
|
||||
/* svg styles */
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
All components
|
||||
*/
|
||||
.transparent {
|
||||
fill: transparent
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
.warn-200 {
|
||||
|
|
@ -360,7 +360,7 @@
|
|||
|
||||
g.connection rect.backpressure-object,
|
||||
g.connection rect.backpressure-data-size {
|
||||
fill: $canvas-primary-palette-500
|
||||
fill: $canvas-primary-palette-500;
|
||||
}
|
||||
|
||||
g.connection rect.backpressure-object.not-configured,
|
||||
|
|
|
|||
|
|
@ -17,34 +17,43 @@
|
|||
|
||||
<header class="nifi-header">
|
||||
<navigation>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.Processor"
|
||||
iconClass="icon-processor"
|
||||
iconHoverClass="icon-processor-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.InputPort"
|
||||
iconClass="icon-port-in"
|
||||
iconHoverClass="icon-port-in-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.OutputPort"
|
||||
iconClass="icon-port-out"
|
||||
iconHoverClass="icon-port-out-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.ProcessGroup"
|
||||
iconClass="icon-group"
|
||||
iconHoverClass="icon-group-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.RemoteProcessGroup"
|
||||
iconClass="icon-group-remote"
|
||||
iconHoverClass="icon-group-remote-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.Funnel"
|
||||
iconClass="icon-funnel"
|
||||
iconHoverClass="icon-funnel-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.Label"
|
||||
iconClass="icon-label"
|
||||
iconHoverClass="icon-label-add"></new-canvas-item>
|
||||
<ng-container *ngIf="canvasPermissions$ | async; let canvasPermissions">
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.Processor"
|
||||
[disabled]="!canvasPermissions.canWrite"
|
||||
iconClass="icon-processor"
|
||||
iconHoverClass="icon-processor-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.InputPort"
|
||||
[disabled]="!canvasPermissions.canWrite"
|
||||
iconClass="icon-port-in"
|
||||
iconHoverClass="icon-port-in-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.OutputPort"
|
||||
[disabled]="!canvasPermissions.canWrite"
|
||||
iconClass="icon-port-out"
|
||||
iconHoverClass="icon-port-out-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.ProcessGroup"
|
||||
[disabled]="!canvasPermissions.canWrite"
|
||||
iconClass="icon-group"
|
||||
iconHoverClass="icon-group-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.RemoteProcessGroup"
|
||||
[disabled]="!canvasPermissions.canWrite"
|
||||
iconClass="icon-group-remote"
|
||||
iconHoverClass="icon-group-remote-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.Funnel"
|
||||
[disabled]="!canvasPermissions.canWrite"
|
||||
iconClass="icon-funnel"
|
||||
iconHoverClass="icon-funnel-add"></new-canvas-item>
|
||||
<new-canvas-item
|
||||
[type]="ComponentType.Label"
|
||||
[disabled]="!canvasPermissions.canWrite"
|
||||
iconClass="icon-label"
|
||||
iconHoverClass="icon-label-add"></new-canvas-item>
|
||||
</ng-container>
|
||||
</navigation>
|
||||
<flow-status
|
||||
[controllerStatus]="(controllerStatus$ | async)!"
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { ComponentType } from '../../../../../state/shared';
|
|||
import { Store } from '@ngrx/store';
|
||||
import { CanvasState } from '../../../state';
|
||||
import {
|
||||
selectCanvasPermissions,
|
||||
selectClusterSummary,
|
||||
selectControllerBulletins,
|
||||
selectControllerStatus,
|
||||
|
|
@ -62,6 +63,7 @@ export class HeaderComponent {
|
|||
clusterSummary$ = this.store.select(selectClusterSummary);
|
||||
controllerBulletins$ = this.store.select(selectControllerBulletins);
|
||||
currentProcessGroupId$ = this.store.select(selectCurrentProcessGroupId);
|
||||
canvasPermissions$ = this.store.select(selectCanvasPermissions);
|
||||
|
||||
constructor(
|
||||
private store: Store<CanvasState>,
|
||||
|
|
|
|||
|
|
@ -43,11 +43,11 @@
|
|||
|
||||
.component-button-grip {
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
$primary-palette-300,
|
||||
$primary-palette-300 4px,
|
||||
$primary-palette-300 4px,
|
||||
$primary-palette-300 6px
|
||||
90deg,
|
||||
$primary-palette-300,
|
||||
$primary-palette-300 4px,
|
||||
$primary-palette-300 4px,
|
||||
$primary-palette-300 6px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
class="h-16 w-16 pl-1.5 -mt-16 flex items-center justify-center relative icon"
|
||||
[class]="isHovering() ? iconHoverClass + ' hovering' : iconClass"
|
||||
[class.dragging]="dragging"
|
||||
[disabled]="disabled"
|
||||
(mouseenter)="mouseEnter()"
|
||||
(mouseleave)="mouseLeave()"
|
||||
cdkDrag
|
||||
|
|
|
|||
|
|
@ -30,4 +30,8 @@
|
|||
cursor: -moz-grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ export class NewCanvasItem {
|
|||
@Input() type!: ComponentType;
|
||||
@Input() iconClass = '';
|
||||
@Input() iconHoverClass = '';
|
||||
@Input() disabled = false;
|
||||
|
||||
dragging = false;
|
||||
|
||||
|
|
@ -68,11 +69,15 @@ export class NewCanvasItem {
|
|||
}
|
||||
|
||||
mouseEnter() {
|
||||
this.hovering = true;
|
||||
if (!this.disabled) {
|
||||
this.hovering = true;
|
||||
}
|
||||
}
|
||||
|
||||
mouseLeave() {
|
||||
this.hovering = false;
|
||||
if (!this.disabled) {
|
||||
this.hovering = false;
|
||||
}
|
||||
}
|
||||
|
||||
isHovering(): boolean {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
.provenance-header {
|
||||
color: $primary-palette-500;
|
||||
};
|
||||
}
|
||||
|
||||
rect.lineage {
|
||||
fill: $canvas-primary-palette-600;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@
|
|||
$canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200');
|
||||
|
||||
#lineage {
|
||||
|
||||
canvas,
|
||||
svg {
|
||||
path.link.selected {
|
||||
|
|
|
|||
|
|
@ -25,10 +25,7 @@
|
|||
<input matInput formControlName="value" type="text" />
|
||||
</mat-form-field>
|
||||
<div class="-mt-6 mb-4">
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="inverse"
|
||||
name="inverse"> Exclude </mat-checkbox>
|
||||
<mat-checkbox color="primary" formControlName="inverse" name="inverse"> Exclude </mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
|
|
|
|||
|
|
@ -124,7 +124,9 @@
|
|||
<button color="primary" mat-raised-button mat-dialog-close>Close</button>
|
||||
</ng-container>
|
||||
<ng-template #updateInProgressActions>
|
||||
<button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close>Cancel</button>
|
||||
<button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close>
|
||||
Cancel
|
||||
</button>
|
||||
</ng-template>
|
||||
</mat-dialog-actions>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -153,7 +153,9 @@
|
|||
<button color="primary" mat-raised-button mat-dialog-close>Close</button>
|
||||
</ng-container>
|
||||
<ng-template #updateInProgressActions>
|
||||
<button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close>Cancel</button>
|
||||
<button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close>
|
||||
Cancel
|
||||
</button>
|
||||
</ng-template>
|
||||
</mat-dialog-actions>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,9 @@
|
|||
</mat-form-field>
|
||||
</div>
|
||||
<div class="-mt-4 mb-4">
|
||||
<mat-checkbox color="primary" formControlName="empty" (change)="setEmptyStringChanged()">Set empty string</mat-checkbox>
|
||||
<mat-checkbox color="primary" formControlName="empty" (change)="setEmptyStringChanged()"
|
||||
>Set empty string</mat-checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col mb-4">
|
||||
<label>Sensitive Value</label>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,7 @@
|
|||
@include mat.button-density(-1);
|
||||
|
||||
.type-table {
|
||||
|
||||
table {
|
||||
|
||||
th {
|
||||
background-color: $primary-palette-500;
|
||||
color: $canvas-primary-palette-900;
|
||||
|
|
|
|||
|
|
@ -399,7 +399,11 @@
|
|||
"></ng-container>
|
||||
</div>
|
||||
<div>
|
||||
<button color="primary" mat-stroked-button mat-dialog-close (click)="replayClicked()">
|
||||
<button
|
||||
color="primary"
|
||||
mat-stroked-button
|
||||
mat-dialog-close
|
||||
(click)="replayClicked()">
|
||||
<i class="fa fa-repeat"></i>
|
||||
Replay
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -22,31 +22,41 @@
|
|||
@use 'assets/styles/listing-table-theme' as listing-table;
|
||||
@use 'app/app.component-theme' as app-component;
|
||||
@use 'app/pages/access-policies/feature/access-policies.component-theme' as access-policies;
|
||||
@use 'app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component-theme' as add-tenant-to-policy;
|
||||
@use 'app/pages/access-policies/ui/component-access-policies/component-access-policies.component-theme' as component-access-policies;
|
||||
@use 'app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component-theme' as
|
||||
add-tenant-to-policy;
|
||||
@use 'app/pages/access-policies/ui/component-access-policies/component-access-policies.component-theme' as
|
||||
component-access-policies;
|
||||
@use 'app/pages/bulletins/feature/bulletins.component-theme' as bulletins;
|
||||
@use 'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme' as bulletin-board-list;
|
||||
@use 'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme' as
|
||||
bulletin-board-list;
|
||||
@use 'app/pages/counters/feature/counters.component-theme' as counters;
|
||||
@use 'app/pages/flow-designer/ui/canvas/canvas.component-theme' as canvas;
|
||||
@use 'app/pages/flow-designer/ui/canvas/footer/footer.component-theme' as footer;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component-theme' as navigation-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component-theme' as birdseye-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component-theme' as operation-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component-theme' as
|
||||
navigation-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component-theme' as
|
||||
birdseye-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component-theme' as
|
||||
operation-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component-theme' as flow-status;
|
||||
@use 'app/pages/flow-designer/ui/canvas/header/header.component-theme' as header;
|
||||
@use 'app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component-theme' as new-canvas-item;
|
||||
@use 'app/pages/flow-designer/ui/canvas/header/search/search.component-theme' as search;
|
||||
@use 'app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component-theme' as prioritizers;
|
||||
@use 'app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component-theme' as create-process-group;
|
||||
@use 'app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component-theme'
|
||||
as create-process-group;
|
||||
@use 'app/pages/flow-designer/ui/common/banner/banner.component-theme' as banner;
|
||||
@use 'app/pages/flow-designer/ui/controller-service/controller-services.component-theme' as controller-service;
|
||||
@use 'app/pages/login/feature/login.component-theme' as login;
|
||||
@use 'app/pages/login/ui/login-form/login-form.component-theme' as login-form;
|
||||
@use 'app/pages/provenance/feature/provenance.component-theme' as provenance;
|
||||
@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component-theme' as provenance-event-table;
|
||||
@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme' as lineage;
|
||||
@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component-theme' as
|
||||
provenance-event-table;
|
||||
@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme' as
|
||||
lineage;
|
||||
@use 'app/pages/parameter-contexts/feature/parameter-contexts.component-theme' as parameter-contexts;
|
||||
@use 'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme' as parameter-context-inheritance;
|
||||
@use 'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme'
|
||||
as parameter-context-inheritance;
|
||||
@use 'app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component-theme' as flowfile-dialog;
|
||||
@use 'app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component-theme' as flowfile-table;
|
||||
@use 'app/pages/settings/feature/settings.component-theme' as settings;
|
||||
|
|
@ -226,7 +236,6 @@ $appFontPath: '~roboto-fontface/fonts';
|
|||
text-decoration-color: $primary-palette-A400;
|
||||
}
|
||||
|
||||
|
||||
//Icon for styling mat-icon in forms throughout the application.
|
||||
.info-icon {
|
||||
font-size: 14px;
|
||||
|
|
@ -402,8 +411,12 @@ $appFontPath: '~roboto-fontface/fonts';
|
|||
border-color: $primary-palette-A400;
|
||||
}
|
||||
|
||||
button.nifi-button:disabled {
|
||||
button:disabled {
|
||||
color: $primary-palette-200 !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button.nifi-button:disabled {
|
||||
border: 1px solid $primary-palette-200;
|
||||
|
||||
i {
|
||||
|
|
@ -431,27 +444,27 @@ $warn-light: mat.define-palette($warn-light-palette, 400, 100, 700);
|
|||
|
||||
// Create the theme objects. We can extract the values we need from the theme passed into the mixins.
|
||||
$material-theme-light: mat.define-light-theme(
|
||||
(
|
||||
color: (
|
||||
primary: $material-primary-light,
|
||||
accent: $material-accent-light,
|
||||
warn: $warn-light,
|
||||
),
|
||||
//typography: mat.define-typography-config(), // TODO: typography
|
||||
density: -3
|
||||
)
|
||||
(
|
||||
color: (
|
||||
primary: $material-primary-light,
|
||||
accent: $material-accent-light,
|
||||
warn: $warn-light
|
||||
),
|
||||
//typography: mat.define-typography-config(), // TODO: typography
|
||||
density: -3
|
||||
)
|
||||
);
|
||||
|
||||
$nifi-canvas-theme-light: mat.define-light-theme(
|
||||
(
|
||||
color: (
|
||||
primary: $nifi-canvas-primary-light,
|
||||
accent: $nifi-canvas-accent-light,
|
||||
warn: $warn-light,
|
||||
),
|
||||
//typography: mat.define-typography-config(), // TODO: typography
|
||||
density: -3
|
||||
)
|
||||
(
|
||||
color: (
|
||||
primary: $nifi-canvas-primary-light,
|
||||
accent: $nifi-canvas-accent-light,
|
||||
warn: $warn-light
|
||||
),
|
||||
//typography: mat.define-typography-config(), // TODO: typography
|
||||
density: -3
|
||||
)
|
||||
);
|
||||
|
||||
@include mat.all-component-themes($material-theme-light);
|
||||
|
|
|
|||
Loading…
Reference in New Issue