Skip to content

Commit

Permalink
[NIFI-13968] add title tooltip for truncated attribute values (#9492)
Browse files Browse the repository at this point in the history 
* [NIFI-13968] add title tooltp for truncated attribute values

* update width for flow file dialog details tab

This closes #9492
  • Loading branch information
@scottyaslan
scottyaslan authored Jan 27, 2025
1 parent f9af79a commit a377889
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 64 deletions.
51 changes: 36 additions & 15 deletions .../nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h2 mat-dialog-title>FlowFile</h2>
<mat-dialog-content>
<div class="dialog-tab-content">
<div class="flex gap-x-4">
<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="font-bold primary-color">FlowFile Details</div>
</div>
Expand All @@ -31,15 +31,18 @@ <h2 mat-dialog-title>FlowFile</h2>
<ng-container
*ngTemplateOutlet="
formatCopyableValue;
context: { $implicit: request.flowfile.uuid }
context: { $implicit: request.flowfile.uuid, title: request.flowfile.uuid }
"></ng-container>
</div>
<div class="flex flex-col">
<div>Filename</div>
<ng-container
*ngTemplateOutlet="
formatValue;
context: { $implicit: request.flowfile.filename }
context: {
$implicit: request.flowfile.filename,
title: request.flowfile.filename
}
"></ng-container>
</div>
<div class="flex flex-col">
Expand All @@ -58,7 +61,10 @@ <h2 mat-dialog-title>FlowFile</h2>
<ng-container
*ngTemplateOutlet="
formatValue;
context: { $implicit: request.flowfile.position }
context: {
$implicit: request.flowfile.position,
title: request.flowfile.position
}
"></ng-container>
</div>
<div class="flex flex-col">
Expand Down Expand Up @@ -89,7 +95,10 @@ <h2 mat-dialog-title>FlowFile</h2>
<ng-container
*ngTemplateOutlet="
formatValue;
context: { $implicit: request.flowfile.clusterNodeAddress }
context: {
$implicit: request.flowfile.clusterNodeAddress,
title: request.flowfile.clusterNodeAddress
}
"></ng-container>
</div>
</ng-container>
Expand All @@ -104,7 +113,7 @@ <h2 mat-dialog-title>FlowFile</h2>
</ng-template>
</ng-template>
</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="font-bold primary-color">Content Claim</div>
</div>
Expand All @@ -116,31 +125,43 @@ <h2 mat-dialog-title>FlowFile</h2>
<ng-container
*ngTemplateOutlet="
formatContentValue;
context: { $implicit: request.flowfile.contentClaimContainer }
context: {
$implicit: request.flowfile.contentClaimContainer,
title: request.flowfile.contentClaimContainer
}
"></ng-container>
</div>
<div>
<div>Section</div>
<ng-container
*ngTemplateOutlet="
formatContentValue;
context: { $implicit: request.flowfile.contentClaimSection }
context: {
$implicit: request.flowfile.contentClaimSection,
title: request.flowfile.contentClaimSection
}
"></ng-container>
</div>
<div>
<div>Identifier</div>
<ng-container
*ngTemplateOutlet="
formatCopyableContentValue;
context: { $implicit: request.flowfile.contentClaimIdentifier }
context: {
$implicit: request.flowfile.contentClaimIdentifier,
title: request.flowfile.contentClaimIdentifier
}
"></ng-container>
</div>
<div>
<div>Offset</div>
<ng-container
*ngTemplateOutlet="
formatContentValue;
context: { $implicit: request.flowfile.contentClaimOffset }
context: {
$implicit: request.flowfile.contentClaimOffset,
title: request.flowfile.contentClaimOffset
}
"></ng-container>
</div>
<div>
Expand Down Expand Up @@ -191,7 +212,7 @@ <h2 mat-dialog-title>FlowFile</h2>
<ng-container
*ngTemplateOutlet="
formatValue;
context: { $implicit: attribute.value }
context: { $implicit: attribute.value, title: attribute.value }
"></ng-container>
</div>
</div>
Expand All @@ -211,7 +232,7 @@ <h2 mat-dialog-title>FlowFile</h2>
{{ value }}
</div>
<ng-template #valueWithTitle>
<div class="tertiary-color font-medium" [title]="title">{{ value }}</div>
<div class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
</ng-template>
</ng-template>
</ng-container>
Expand All @@ -229,7 +250,7 @@ <h2 mat-dialog-title>FlowFile</h2>
{{ value }}
</div>
<ng-template #valueWithTitle>
<div [copy]="value" class="tertiary-color font-medium" [title]="title">{{ value }}</div>
<div [copy]="value" class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
</ng-template>
</ng-template>
</ng-container>
Expand All @@ -244,7 +265,7 @@ <h2 mat-dialog-title>FlowFile</h2>
{{ value }}
</div>
<ng-template #valueWithTitle>
<div class="tertiary-color font-medium" [title]="title">{{ value }}</div>
<div class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
</ng-template>
</ng-container>
<ng-template #nullValue>
Expand All @@ -257,7 +278,7 @@ <h2 mat-dialog-title>FlowFile</h2>
{{ value }}
</div>
<ng-template #valueWithTitle>
<div [copy]="value" class="tertiary-color font-medium" [title]="title">{{ value }}</div>
<div [copy]="value" class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
</ng-template>
</ng-container>
<ng-template #nullValue>
Expand Down
Loading

0 comments on commit a377889

Please sign in to comment.