Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[NIFI-13177] ensure consistent typography rendering #8786

Merged
merged 5 commits into from
May 10, 2024
Merged

[NIFI-13177] ensure consistent typography rendering #8786

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
850929a
[NIFI-13177] ensure consistent rendering of component type, name, and…
scottyaslan May 9, 2024
a32d7d0
ensure font-size consistency with .refresh-container and .mat-mdc-pag…
scottyaslan May 9, 2024
5716de4
attempt at unifying how component context is displayed (#6)
rfellows May 9, 2024
b8d6872
use drop icon by default
scottyaslan May 10, 2024
dfc6128
final touches
scottyaslan May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 3 additions & 17 deletions ...ges/access-policies/ui/component-access-policies/component-access-policies.component.html
View file
Open in desktop
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="operation-context-logo flex flex-col">
<i class="accent-color icon" [class]="getContextIcon()"></i>
</div>
<div class="flex flex-col">
<div class="operation-context-name">
{{
policyComponentState.label
? policyComponentState.label
: resourceIdentifier
}}
</div>
<div class="operation-context-type 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
14 changes: 0 additions & 14 deletions ...ges/access-policies/ui/component-access-policies/component-access-policies.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,4 @@
width: 300px;
}
}

.operation-context-logo {
.icon {
font-size: 36px;
}
}

.operation-context-name {
font-size: 18px;
width: 370px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
20 changes: 10 additions & 10 deletions ...pages/access-policies/ui/component-access-policies/component-access-policies.component.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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="operation-context-logo flex flex-col">
<i class="icon accent-color" [class]="getContextIcon(selection)"></i>
</div>
<div class="flex flex-col">
<div class="operation-context-name">{{ getContextName(selection) }}</div>
<div class="operation-context-type primary-color">
{{ getContextType(selection) }}
</div>
</div>
</div>
<div class="operation-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
28 changes: 0 additions & 28 deletions ...flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,32 +36,4 @@ div.operation-control {
font-size: 12px;
letter-spacing: 0.05rem;
}

.operation-context-logo {
text-align: start;
height: 40px;
line-height: 40px;

.icon {
font-size: 32px;
}
}

.operation-context-name {
font-size: 15px;
height: 20px;
width: 225px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.operation-context-type {
font-size: 12px;
}

.operation-context-id {
height: 18px;
font-size: 12px;
}
}
26 changes: 14 additions & 12 deletions ...s/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.ts
View file
Open in desktop
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
4 changes: 0 additions & 4 deletions ...nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/

.refresh-container {
line-height: normal;
}
4 changes: 0 additions & 4 deletions ...ifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@

@use '@angular/material' as mat;

.refresh-container {
line-height: normal;
}

.manage-remote-ports-table {
.listing-table {
@include mat.table-density(-4);
Expand Down
4 changes: 0 additions & 4 deletions .../settings/ui/management-controller-services/management-controller-services.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/

.refresh-container {
line-height: normal;
}
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
Open in desktop
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;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is an issue too, sorry for the bad suggestions. we need to remove this check and just return type in the default case of the switch...

switch (type) {
case ComponentType.Connection:
return 'Connection';
Expand Down
12 changes: 7 additions & 5 deletions ...ontend/src/main/nifi/src/app/ui/common/component-context/component-context.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,19 @@

<div class="component-context flex flex-col">
<div class="flex gap-x-1 items-center">
<div class="component-context-logo flex flex-col">
<div class="context-logo flex flex-col">
<i class="icon accent-color" [class]="componentIconClass"></i>
</div>
<div class="flex flex-col flex-1">
<div class="component-context-name w-full">{{ name }}</div>
<div class="component-context-type primary-color w-full">
{{ type | componentTypeName }}
<div class="context-name w-full">{{ name }}</div>
<div class="context-type pt-1 primary-color w-full">
@if (type) {
{{ type | componentTypeName }}
}
</div>
</div>
</div>
@if (id) {
<div class="component-context-id accent-color">{{ id }}</div>
<div class="context-id accent-color">{{ id }}</div>
}
</div>
25 changes: 0 additions & 25 deletions ...ontend/src/main/nifi/src/app/ui/common/component-context/component-context.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.component-context {
.component-context-logo {
text-align: start;

.icon {
font-size: 32px;
}
}

.component-context-name {
font-size: 15px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.component-context-type {
font-size: 12px;
line-height: 16px;
}

.component-context-id {
font-size: 12px;
}
}
13 changes: 8 additions & 5 deletions ...frontend/src/main/nifi/src/app/ui/common/component-context/component-context.component.ts
View file
Open in desktop
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) {
return 'icon-drop';
}
switch (type) {
case ComponentType.Connection:
return 'icon-connect';
Expand All @@ -61,7 +64,7 @@ export class ComponentContext {
case ComponentType.RemoteProcessGroup:
return 'icon-group-remote';
default:
return 'icon-connect';
return 'icon-drop';
}
}
}
35 changes: 35 additions & 0 deletions ...undle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,41 @@
opacity: 0.8;
}

.context-logo {
text-align: start;
height: 40px;
line-height: 40px;

.icon {
font-size: 32px;
}
}

.context-name {
font-size: 15px;
line-height: 15px;
height: 15px;
width: 225px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.context-type {
font-size: 12px;
line-height: 12px;
}

.context-id {
font-size: 12px;
line-height: 12px;
}

.refresh-container {
line-height: normal;
font-size: 12px;
}

.hidden {
display: none;
}
Expand Down