Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[NIFI-13245] address component name overflow in provenance details di… (#8845) 

* [NIFI-13245] address component name overflow in provenance details dialog

* address content tab column spacing

* use padding appropriately to ensure no overflow text

* restore vertical spacing

This closes #8845
This commit is contained in:
Scott Aslan 2024-05-23 13:34:30 -04:00 committed by GitHub
parent 62d5502bba
commit 969b332fb0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
View File

@ -22,7 +22,7 @@
<mat-tab-group> <mat-tab-group>
<mat-tab label="Details"> <mat-tab label="Details">
<mat-dialog-content> <mat-dialog-content>
<div class="dialog-tab-content flex gap-x-4"> <div class="dialog-tab-content flex">
<div class="w-1/2 pr-2"> <div class="w-1/2 pr-2">
@switch (source.componentType) { @switch (source.componentType) {
@case (ComponentType.Processor) { @case (ComponentType.Processor) {

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
View File

@ -24,7 +24,7 @@
<mat-tab label="Details"> <mat-tab label="Details">
<mat-dialog-content> <mat-dialog-content>
@if (breadcrumbs$ | async; as breadcrumbs) { @if (breadcrumbs$ | async; as breadcrumbs) {
<div class="dialog-tab-content flex gap-x-4"> <div class="dialog-tab-content flex">
<div class="w-1/2 pr-2"> <div class="w-1/2 pr-2">
@switch (sourceType) { @switch (sourceType) {
@case (ComponentType.Processor) { @case (ComponentType.Processor) {

4
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
View File

@ -22,7 +22,7 @@
<mat-dialog-content> <mat-dialog-content>
<div class="dialog-content flex flex-col gap-y-4 w-full"> <div class="dialog-content flex flex-col gap-y-4 w-full">
<div class="flex flex-row w-full"> <div class="flex flex-row w-full">
<div class="flex w-1/2 flex-col gap-y-4"> <div class="w-1/2 pr-2 flex flex-col gap-y-4">
<div> <div>
<div>Registry</div> <div>Registry</div>
<div <div
@ -40,7 +40,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex w-1/2 pl-2 flex-col gap-y-4"> <div class="w-1/2 pl-2 flex flex-col gap-y-4">
<div> <div>
@if (versionControlInformation.branch) { @if (versionControlInformation.branch) {
<div>Branch</div> <div>Branch</div>

37
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
View File

@ -21,8 +21,8 @@
<mat-tab label="Details"> <mat-tab label="Details">
<mat-dialog-content> <mat-dialog-content>
<div class="dialog-tab-content"> <div class="dialog-tab-content">
<div class="flex gap-x-4"> <div class="flex">
<div class="w-full flex flex-col gap-y-3"> <div class="w-1/2 pr-2 flex flex-col gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">
<div>Time</div> <div>Time</div>
<ng-container <ng-container
@ -87,7 +87,10 @@
<ng-container <ng-container
*ngTemplateOutlet=" *ngTemplateOutlet="
formatValue; formatValue;
context: { $implicit: request.event.componentName } context: {
$implicit: request.event.componentName,
title: request.event.componentName
}
"></ng-container> "></ng-container>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
@ -185,7 +188,7 @@
</ng-template> </ng-template>
</ng-template> </ng-template>
</div> </div>
<div class="w-full flex flex-col gap-y-3"> <div class="w-1/2 pl-2 flex flex-col gap-y-3">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="event-header font-bold primary-color"> <div class="event-header font-bold primary-color">
Parent FlowFiles ({{ request.event.parentUuids.length }}) Parent FlowFiles ({{ request.event.parentUuids.length }})
@ -259,8 +262,8 @@
<mat-dialog-content> <mat-dialog-content>
<div class="dialog-tab-content"> <div class="dialog-tab-content">
<div class="flex flex-col gap-y-4"> <div class="flex flex-col gap-y-4">
<div class="flex gap-x-4"> <div class="flex">
<div class="w-full"> <div class="w-1/2 pr-2">
<div class="event-header font-bold primary-color">Input Claim</div> <div class="event-header font-bold primary-color">Input Claim</div>
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
<div> <div>
@ -326,7 +329,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-full"> <div class="w-1/2 pl-2">
<div class="event-header font-bold primary-color">Output Claim</div> <div class="event-header font-bold primary-color">Output Claim</div>
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
<div> <div>
@ -428,11 +431,17 @@
<div class="unset surface-color">Empty string set</div> <div class="unset surface-color">Empty string set</div>
</ng-container> </ng-container>
<ng-template #nonEmptyValue> <ng-template #nonEmptyValue>
<div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle"> <div
class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
*ngIf="title == null; else valueWithTitle">
{{ value }} {{ value }}
</div> </div>
<ng-template #valueWithTitle> <ng-template #valueWithTitle>
<div class="accent-color font-medium" [title]="title">{{ value }}</div> <div
class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="title">
{{ value }}
</div>
</ng-template> </ng-template>
</ng-template> </ng-template>
</ng-container> </ng-container>
@ -442,11 +451,17 @@
</ng-template> </ng-template>
<ng-template #formatContentValue let-value let-title="title"> <ng-template #formatContentValue let-value let-title="title">
<ng-container *ngIf="value != null; else nullValue"> <ng-container *ngIf="value != null; else nullValue">
<div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle"> <div
class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
*ngIf="title == null; else valueWithTitle">
{{ value }} {{ value }}
</div> </div>
<ng-template #valueWithTitle> <ng-template #valueWithTitle>
<div class="accent-color font-medium" [title]="title">{{ value }}</div> <div
class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
[title]="title">
{{ value }}
</div>
</ng-template> </ng-template>
</ng-container> </ng-container>
<ng-template #nullValue> <ng-template #nullValue>