Skip to content

Commit

Permalink
attempt at unifying how component context is displayed (#6)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rfellows
rfellows committed May 9, 2024
1 parent f4e05ca commit d6aeb80
Show file tree
Hide file tree
Showing 8 changed files with 48 additions and 60 deletions.
20 changes: 3 additions & 17 deletions ...ges/access-policies/ui/component-access-policies/component-access-policies.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,23 +56,9 @@
<div class="flex justify-between items-center">
<form [formGroup]="policyForm">
<div class="flex gap-x-2">
<div class="flex gap-x-1 -mt-2">
<div class="context-logo flex flex-col">
<i class="accent-color icon" [class]="getContextIcon()"></i>
</div>
<div class="flex flex-col">
<div class="context-name">
{{
policyComponentState.label
? policyComponentState.label
: resourceIdentifier
}}
</div>
<div class="context-type pt-1 primary-color">
{{ getContextType() }}
</div>
</div>
</div>
<component-context
[type]="getContextType()"
[name]="policyComponentState.label ? policyComponentState.label : resourceIdentifier"></component-context>
<div class="policy-select">
<mat-form-field>
<mat-label>Policy</mat-label>
Expand Down
20 changes: 10 additions & 10 deletions ...pages/access-policies/ui/component-access-policies/component-access-policies.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,27 +337,27 @@ export class ComponentAccessPolicies implements OnInit, OnDestroy {
return 'icon-group';
}

getContextType(): string {
getContextType(): ComponentType | string | null {
switch (this.resource) {
case 'processors':
return 'Processor';
return ComponentType.Processor;
case 'input-ports':
return 'Input Ports';
return ComponentType.InputPort;
case 'output-ports':
return 'Output Ports';
return ComponentType.OutputPort;
case 'funnels':
return 'Funnel';
return ComponentType.Funnel;
case 'labels':
return 'Label';
return ComponentType.Label;
case 'remote-process-groups':
return 'Remote Process Group';
return ComponentType.RemoteProcessGroup;
case 'parameter-contexts':
return 'Parameter Contexts';
return 'Parameter Context';
case 'parameter-providers':
return 'Parameter Provider';
return ComponentType.ParameterProvider;
}

return 'Process Group';
return ComponentType.ProcessGroup;
}

policyActionChanged(value: string): void {
Expand Down
4 changes: 3 additions & 1 deletion ...pp/pages/access-policies/ui/component-access-policies/component-access-policies.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-toolti
import { PolicyTable } from '../common/policy-table/policy-table.component';
import { MatButtonModule } from '@angular/material/button';
import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component';
import { ComponentContext } from '../../../../ui/common/component-context/component-context.component';

@NgModule({
declarations: [ComponentAccessPolicies],
Expand All @@ -45,7 +46,8 @@ import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.com
NifiTooltipDirective,
PolicyTable,
MatButtonModule,
ErrorBanner
ErrorBanner,
ComponentContext
]
})
export class ComponentAccessPoliciesModule {}
18 changes: 4 additions & 14 deletions ...flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,10 @@
@if (!operationCollapsed) {
@if (canvasUtils.getSelection(); as selection) {
<div class="w-72 px-2.5 pb-2.5 flex flex-col gap-y-2">
<div class="operation-context flex flex-col gap-y-1">
<div class="flex gap-x-1">
<div class="context-logo flex flex-col">
<i class="icon accent-color" [class]="getContextIcon(selection)"></i>
</div>
<div class="flex flex-col">
<div class="context-name">{{ getContextName(selection) }}</div>
<div class="context-type pt-1 primary-color">
{{ getContextType(selection) }}
</div>
</div>
</div>
<div class="context-id accent-color">{{ getContextId(selection) }}</div>
</div>
<component-context
[type]="getContextType(selection)"
[name]="getContextName(selection)"
[id]="getContextId(selection)"></component-context>
<div class="flex flex-col gap-y-1">
<div class="flex gap-x-1">
<button
Expand Down
26 changes: 14 additions & 12 deletions ...s/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@ import * as d3 from 'd3';
import { CanvasView } from '../../../../service/canvas-view.service';
import { Client } from '../../../../../../service/client.service';
import { CanvasActionsService } from '../../../../service/canvas-actions.service';
import { ComponentContext } from '../../../../../../ui/common/component-context/component-context.component';
import { ComponentType } from '../../../../../../state/shared';

@Component({
selector: 'operation-control',
standalone: true,
templateUrl: './operation-control.component.html',
imports: [MatButtonModule],
imports: [MatButtonModule, ComponentContext],
styleUrls: ['./operation-control.component.scss']
})
export class OperationControl {
Expand Down Expand Up @@ -136,29 +138,29 @@ export class OperationControl {
}
}

getContextType(selection: d3.Selection<any, any, any, any>): string {
getContextType(selection: d3.Selection<any, any, any, any>): ComponentType | null {
if (selection.size() === 0) {
return 'Process Group';
return ComponentType.ProcessGroup;
} else if (selection.size() > 1) {
return '';
return null;
}

if (this.canvasUtils.isProcessor(selection)) {
return 'Processor';
return ComponentType.Processor;
} else if (this.canvasUtils.isInputPort(selection)) {
return 'Input Port';
return ComponentType.InputPort;
} else if (this.canvasUtils.isOutputPort(selection)) {
return 'Output Port';
return ComponentType.OutputPort;
} else if (this.canvasUtils.isFunnel(selection)) {
return 'Funnel';
return ComponentType.Funnel;
} else if (this.canvasUtils.isLabel(selection)) {
return 'Label';
return ComponentType.Label;
} else if (this.canvasUtils.isProcessGroup(selection)) {
return 'Process Group';
return ComponentType.ProcessGroup;
} else if (this.canvasUtils.isRemoteProcessGroup(selection)) {
return 'Remote Process Group';
return ComponentType.RemoteProcessGroup;
} else {
return 'Connection';
return ComponentType.Connection;
}
}

Expand Down
5 changes: 4 additions & 1 deletion ...mework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pipes/component-type-name.pipe.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ import { ComponentType } from '../state/shared';
standalone: true
})
export class ComponentTypeNamePipe implements PipeTransform {
transform(type: ComponentType): string {
transform(type: ComponentType | string): string {
if (typeof type === 'string') {
return type;
}
switch (type) {
case ComponentType.Connection:
return 'Connection';
Expand Down
4 changes: 3 additions & 1 deletion ...ontend/src/main/nifi/src/app/ui/common/component-context/component-context.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@
<div class="flex flex-col flex-1">
<div class="context-name w-full">{{ name }}</div>
<div class="context-type pt-1 primary-color w-full">
{{ type | componentTypeName }}
@if (type) {
{{ type | componentTypeName }}
}
</div>
</div>
</div>
Expand Down
11 changes: 7 additions & 4 deletions ...frontend/src/main/nifi/src/app/ui/common/component-context/component-context.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,25 @@ import { ComponentTypeNamePipe } from '../../../pipes/component-type-name.pipe';
styleUrl: './component-context.component.scss'
})
export class ComponentContext {
private _componentType: ComponentType = ComponentType.Processor;
private _componentType: ComponentType | string | null = ComponentType.Processor;
componentIconClass: string = '';

@Input() set type(type: ComponentType) {
@Input() set type(type: ComponentType | string | null) {
this._componentType = type;
this.componentIconClass = this.getIconClassName(type);
}

get type(): ComponentType {
get type(): ComponentType | string | null {
return this._componentType;
}

@Input() id: string | null = null;
@Input() name: string = '';

private getIconClassName(type: ComponentType) {
private getIconClassName(type: ComponentType | string | null) {
if (type !== null && typeof type !== 'string') {
return 'icon-drop';
}
switch (type) {
case ComponentType.Connection:
return 'icon-connect';
Expand Down

0 comments on commit d6aeb80

Please sign in to comment.