[NIFI-13246] move actions from details columns into menu (#8900)

* [NIFI-13246] move actions from details columns into menu

* move View Documentation menu option lower

This closes #8900
This commit is contained in:
Scott Aslan 2024-05-30 16:54:22 -04:00 committed by GitHub
parent 732b587561
commit e66c1643d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
33 changed files with 43 additions and 155 deletions

View File

@ -74,19 +74,6 @@
(matSortChange)="updateSort($event)" (matSortChange)="updateSort($event)"
[matSortActive]="sort.active" [matSortActive]="sort.active"
[matSortDirection]="sort.direction"> [matSortDirection]="sort.direction">
<!-- More Details Column -->
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-2">
<div
class="pointer fa fa-info-circle primary-color"
title="View Details"
(click)="viewDetailsClicked(item)"></div>
</div>
</td>
</ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="eventTime"> <ng-container matColumnDef="eventTime">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Event Time</th> <th mat-header-cell *matHeaderCellDef mat-sort-header>Event Time</th>
@ -158,6 +145,10 @@
<i class="fa fa-ellipsis-v"></i> <i class="fa fa-ellipsis-v"></i>
</button> </button>
<mat-menu #actionMenu="matMenu" xPosition="before"> <mat-menu #actionMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="viewDetailsClicked(item)">
<i class="fa fa-info-circle primary-color mr-2"></i>
View Details
</button>
<button mat-menu-item (click)="showLineageGraph(item)"> <button mat-menu-item (click)="showLineageGraph(item)">
<i class="icon icon-lineage primary-color mr-2"></i> <i class="icon icon-lineage primary-color mr-2"></i>
Show Lineage Show Lineage

View File

@ -16,14 +16,6 @@
*/ */
.provenance-event-table { .provenance-event-table {
.listing-table {
table {
.mat-column-moreDetails {
width: 32px;
}
}
}
.lineage { .lineage {
.lineage-controls { .lineage-controls {
position: absolute; position: absolute;

View File

@ -190,7 +190,6 @@ export class ProvenanceEventTable implements AfterViewInit {
private destroyRef: DestroyRef = inject(DestroyRef); private destroyRef: DestroyRef = inject(DestroyRef);
displayedColumns: string[] = [ displayedColumns: string[] = [
'moreDetails',
'eventTime', 'eventTime',
'eventType', 'eventType',
'flowFileUuid', 'flowFileUuid',

View File

@ -41,19 +41,6 @@
<div class="flex-1 relative"> <div class="flex-1 relative">
<div class="listing-table absolute inset-0 overflow-y-auto"> <div class="listing-table absolute inset-0 overflow-y-auto">
<table mat-table [dataSource]="dataSource"> <table mat-table [dataSource]="dataSource">
<!-- More Details Column -->
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-2">
<div
class="pointer fa fa-info-circle primary-color"
title="View Details"
(click)="viewFlowFileClicked(item)"></div>
</div>
</td>
</ng-container>
<!-- Position Column --> <!-- Position Column -->
<ng-container matColumnDef="position"> <ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>Position</th> <th mat-header-cell *matHeaderCellDef>Position</th>
@ -139,6 +126,10 @@
</button> </button>
} }
<mat-menu #actionMenu="matMenu" xPosition="before"> <mat-menu #actionMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="viewFlowFileClicked(item)">
<i class="fa fa-info-circle primary-color mr-2"></i>
View Details
</button>
@if (item.size > 0) { @if (item.size > 0) {
<button mat-menu-item (click)="downloadContentClicked(item)"> <button mat-menu-item (click)="downloadContentClicked(item)">
<i class="fa fa-download primary-color mr-2"></i> <i class="fa fa-download primary-color mr-2"></i>

View File

@ -18,10 +18,6 @@
.flowfile-table { .flowfile-table {
.listing-table { .listing-table {
table { table {
.mat-column-moreDetails {
width: 32px;
}
.mat-column-flowFileUuid { .mat-column-flowFileUuid {
width: 25%; width: 25%;
} }

View File

@ -79,7 +79,6 @@ export class FlowFileTable {
protected readonly ValidationErrorsTip = ValidationErrorsTip; protected readonly ValidationErrorsTip = ValidationErrorsTip;
displayedColumns: string[] = [ displayedColumns: string[] = [
'moreDetails',
'position', 'position',
'flowFileUuid', 'flowFileUuid',
'fileName', 'fileName',

View File

@ -31,10 +31,6 @@
<td mat-cell *matCellDef="let item"> <td mat-cell *matCellDef="let item">
@if (canRead(item)) { @if (canRead(item)) {
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">
<div
class="pointer fa fa-book primary-color"
(click)="viewDocumentationClicked(item, $event)"
title="View Documentation"></div>
@if (hasComments(item)) { @if (hasComments(item)) {
<div <div
class="pointer fa fa-comment primary-color" class="pointer fa fa-comment primary-color"
@ -157,6 +153,12 @@
View State View State
</button> </button>
} }
@if (canRead(item)) {
<button mat-menu-item (click)="viewDocumentationClicked(item)">
<i class="fa fa-book primary-color mr-2"></i>
View Documentation
</button>
}
</mat-menu> </mat-menu>
</div> </div>
</td> </td>

View File

@ -19,7 +19,7 @@
.listing-table { .listing-table {
table { table {
.mat-column-moreDetails { .mat-column-moreDetails {
width: 96px; width: 74px;
} }
.mat-column-name { .mat-column-name {

View File

@ -132,8 +132,7 @@ export class FlowAnalysisRuleTable {
return !!entity.operatePermissions?.canWrite; return !!entity.operatePermissions?.canWrite;
} }
viewDocumentationClicked(entity: FlowAnalysisRuleEntity, event: MouseEvent): void { viewDocumentationClicked(entity: FlowAnalysisRuleEntity): void {
event.stopPropagation();
this.viewFlowAnalysisRuleDocumentation.next(entity); this.viewFlowAnalysisRuleDocumentation.next(entity);
} }

View File

@ -33,11 +33,6 @@
<td mat-cell *matCellDef="let item"> <td mat-cell *matCellDef="let item">
@if (canRead(item)) { @if (canRead(item)) {
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">
<div
class="pointer fa fa-book primary-color"
(click)="viewDocumentationClicked(item, $event)"
title="View Documentation"></div>
<!-- Validation Errors --> <!-- Validation Errors -->
@if (hasErrors(item)) { @if (hasErrors(item)) {
<div <div
@ -133,6 +128,12 @@
Remove Remove
</button> </button>
} }
@if (canRead(item)) {
<button mat-menu-item (click)="viewDocumentationClicked(item)">
<i class="fa fa-book primary-color mr-2"></i>
View Documentation
</button>
}
@if (canManageAccessPolicies()) { @if (canManageAccessPolicies()) {
<button mat-menu-item (click)="manageAccessPoliciesClicked(item)"> <button mat-menu-item (click)="manageAccessPoliciesClicked(item)">
<i class="fa fa-key primary-color mr-2"></i> <i class="fa fa-key primary-color mr-2"></i>

View File

@ -19,7 +19,7 @@
.listing-table { .listing-table {
table { table {
.mat-column-moreDetails { .mat-column-moreDetails {
width: 52px; width: 30px;
} }
.mat-column-name { .mat-column-name {

View File

@ -138,8 +138,7 @@ export class ParameterProvidersTable {
return false; return false;
} }
viewDocumentationClicked(entity: ParameterProviderEntity, event: MouseEvent): void { viewDocumentationClicked(entity: ParameterProviderEntity): void {
event.stopPropagation();
this.viewParameterProviderDocumentation.next(entity); this.viewParameterProviderDocumentation.next(entity);
} }

View File

@ -31,10 +31,6 @@
<td mat-cell *matCellDef="let item"> <td mat-cell *matCellDef="let item">
@if (canRead(item)) { @if (canRead(item)) {
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">
<div
class="pointer fa fa-book primary-color"
(click)="viewDocumentationClicked(item, $event)"
title="View Documentation"></div>
@if (hasComments(item)) { @if (hasComments(item)) {
<div <div
class="pointer fa fa-comment primary-color" class="pointer fa fa-comment primary-color"
@ -159,6 +155,12 @@
View State View State
</button> </button>
} }
@if (canRead(item)) {
<button mat-menu-item (click)="viewDocumentationClicked(item)">
<i class="fa fa-book primary-color mr-2"></i>
View Documentation
</button>
}
@if (canManageAccessPolicies()) { @if (canManageAccessPolicies()) {
<button mat-menu-item (click)="managedAccessPoliciesClicked(item)"> <button mat-menu-item (click)="managedAccessPoliciesClicked(item)">
<i class="fa fa-key primary-color mr-2"></i> <i class="fa fa-key primary-color mr-2"></i>

View File

@ -18,7 +18,7 @@
.reporting-task-table.listing-table { .reporting-task-table.listing-table {
table { table {
.mat-column-moreDetails { .mat-column-moreDetails {
width: 96px; width: 74px;
} }
} }
} }

View File

@ -84,8 +84,7 @@ export class ReportingTaskTable {
return !!entity.operatePermissions?.canWrite; return !!entity.operatePermissions?.canWrite;
} }
viewDocumentationClicked(entity: ReportingTaskEntity, event: MouseEvent): void { viewDocumentationClicked(entity: ReportingTaskEntity): void {
event.stopPropagation();
this.viewReportingTaskDocumentation.next(entity); this.viewReportingTaskDocumentation.next(entity);
} }

View File

@ -39,14 +39,6 @@
(matSortChange)="sortData($event)" (matSortChange)="sortData($event)"
[matSortActive]="initialSortColumn" [matSortActive]="initialSortColumn"
[matSortDirection]="initialSortDirection"> [matSortDirection]="initialSortDirection">
<!-- More Details Column -->
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-2"></div>
</td>
</ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> <th mat-header-cell *matHeaderCellDef mat-sort-header>

View File

@ -17,11 +17,6 @@
.port-status-table { .port-status-table {
.listing-table { .listing-table {
.mat-column-moreDetails {
width: 32px;
min-width: 32px;
}
.mat-column-runStatus { .mat-column-runStatus {
width: 20%; width: 20%;
} }

View File

@ -63,9 +63,9 @@ export class PortStatusTable extends ComponentStatusTable<PortStatusSnapshotEnti
@Input() set portType(type: 'input' | 'output') { @Input() set portType(type: 'input' | 'output') {
if (type === 'input') { if (type === 'input') {
this.displayedColumns = ['moreDetails', 'name', 'runStatus', 'out', 'actions']; this.displayedColumns = ['name', 'runStatus', 'out', 'actions'];
} else { } else {
this.displayedColumns = ['moreDetails', 'name', 'runStatus', 'in', 'actions']; this.displayedColumns = ['name', 'runStatus', 'in', 'actions'];
} }
this._portType = type; this._portType = type;
} }

View File

@ -40,23 +40,6 @@
(matSortChange)="sortData($event)" (matSortChange)="sortData($event)"
[matSortActive]="initialSortColumn" [matSortActive]="initialSortColumn"
[matSortDirection]="initialSortDirection"> [matSortDirection]="initialSortDirection">
<!-- More Details Column -->
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canRead(item)) {
<div class="flex items-center gap-x-2">
<!-- TODO - support showing connection details in EditConnectionDialog -->
<!-- @if (canRead(item)) {-->
<!-- <div-->
<!-- class="pointer fa fa-info-circle primary-color"-->
<!-- title="View Connection Details"></div>-->
<!-- }-->
</div>
}
</td>
</ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> <th mat-header-cell *matHeaderCellDef mat-sort-header>

View File

@ -17,10 +17,6 @@
.connection-status-table { .connection-status-table {
.listing-table { .listing-table {
.mat-column-moreDetails {
width: 32px;
}
.mat-column-name { .mat-column-name {
width: 25%; width: 25%;
} }

View File

@ -58,7 +58,6 @@ export class ConnectionStatusTable extends ComponentStatusTable<ConnectionStatus
]; ];
displayedColumns: string[] = [ displayedColumns: string[] = [
'moreDetails',
'name', 'name',
'queue', 'queue',
'threshold', 'threshold',

View File

@ -39,14 +39,6 @@
(matSortChange)="sortData($event)" (matSortChange)="sortData($event)"
[matSortActive]="initialSortColumn" [matSortActive]="initialSortColumn"
[matSortDirection]="initialSortDirection"> [matSortDirection]="initialSortDirection">
<!-- More Details Column -->
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-2"></div>
</td>
</ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> <th mat-header-cell *matHeaderCellDef mat-sort-header>

View File

@ -17,10 +17,6 @@
.process-group-status-table { .process-group-status-table {
.listing-table { .listing-table {
.mat-column-moreDetails {
width: 32px;
}
.mat-column-name { .mat-column-name {
width: 25%; width: 25%;
} }

View File

@ -63,7 +63,6 @@ export class ProcessGroupStatusTable extends ComponentStatusTable<ProcessGroupSt
filterableColumns: SummaryTableFilterColumn[] = [{ key: 'name', label: 'name' }]; filterableColumns: SummaryTableFilterColumn[] = [{ key: 'name', label: 'name' }];
displayedColumns: string[] = [ displayedColumns: string[] = [
'moreDetails',
'name', 'name',
'versionedFlowState', 'versionedFlowState',
'transferred', 'transferred',

View File

@ -39,23 +39,6 @@
(matSortChange)="sortData($event)" (matSortChange)="sortData($event)"
[matSortActive]="initialSortColumn" [matSortActive]="initialSortColumn"
[matSortDirection]="initialSortDirection"> [matSortDirection]="initialSortDirection">
<!-- More Details Column -->
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canRead(item)) {
<div class="flex items-center gap-x-2">
<!-- TODO - support showing processor details in EditProcessorDialog -->
<!-- @if (canRead(item)) {-->
<!-- <div-->
<!-- class="pointer fa fa-info-circle primary-color"-->
<!-- title="View Processor Details"></div>-->
<!-- }-->
</div>
}
</td>
</ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> <th mat-header-cell *matHeaderCellDef mat-sort-header>

View File

@ -17,10 +17,6 @@
.processor-status-table { .processor-status-table {
.listing-table { .listing-table {
.mat-column-moreDetails {
width: 32px;
}
.mat-column-name { .mat-column-name {
width: 25%; width: 25%;
} }

View File

@ -57,7 +57,6 @@ export class ProcessorStatusTable extends ComponentStatusTable<ProcessorStatusSn
]; ];
displayedColumns: string[] = [ displayedColumns: string[] = [
'moreDetails',
'name', 'name',
'type', 'type',
'processGroup', 'processGroup',

View File

@ -40,14 +40,6 @@
(matSortChange)="sortData($event)" (matSortChange)="sortData($event)"
[matSortActive]="initialSortColumn" [matSortActive]="initialSortColumn"
[matSortDirection]="initialSortDirection"> [matSortDirection]="initialSortDirection">
<!-- More Details Column -->
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-2"></div>
</td>
</ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> <th mat-header-cell *matHeaderCellDef mat-sort-header>

View File

@ -17,10 +17,6 @@
.remote-process-group-status-table { .remote-process-group-status-table {
.listing-table { .listing-table {
.mat-column-moreDetails {
width: 32px;
}
.mat-column-name { .mat-column-name {
width: 25%; width: 25%;
} }

View File

@ -55,7 +55,7 @@ export class RemoteProcessGroupStatusTable extends ComponentStatusTable<RemotePr
{ key: 'name', label: 'name' }, { key: 'name', label: 'name' },
{ key: 'targetUri', label: 'uri' } { key: 'targetUri', label: 'uri' }
]; ];
displayedColumns: string[] = ['moreDetails', 'name', 'uri', 'transmitting', 'sent', 'received', 'actions']; displayedColumns: string[] = ['name', 'uri', 'transmitting', 'sent', 'received', 'actions'];
constructor(private nifiCommon: NiFiCommon) { constructor(private nifiCommon: NiFiCommon) {
super(); super();

View File

@ -31,11 +31,6 @@
<td mat-cell *matCellDef="let item"> <td mat-cell *matCellDef="let item">
@if (canRead(item)) { @if (canRead(item)) {
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">
<div
class="pointer fa fa-book primary-color"
(click)="viewDocumentationClicked(item, $event)"
title="View Documentation"></div>
@if (hasComments(item)) { @if (hasComments(item)) {
<div <div
class="pointer fa fa-comment primary-color" class="pointer fa fa-comment primary-color"
@ -166,6 +161,12 @@
View State View State
</button> </button>
} }
@if (canRead(item)) {
<button mat-menu-item (click)="viewDocumentationClicked(item)">
<i class="fa fa-book primary-color mr-2"></i>
View Documentation
</button>
}
@if (canManageAccessPolicies()) { @if (canManageAccessPolicies()) {
<button mat-menu-item (click)="manageAccessPoliciesClicked(item)"> <button mat-menu-item (click)="manageAccessPoliciesClicked(item)">
<i class="fa fa-key primary-color mr-2"></i> <i class="fa fa-key primary-color mr-2"></i>

View File

@ -21,7 +21,7 @@
.listing-table { .listing-table {
table { table {
.mat-column-moreDetails { .mat-column-moreDetails {
width: 96px; width: 74px;
} }
.mat-column-name { .mat-column-name {

View File

@ -118,8 +118,7 @@ export class ControllerServiceTable {
return !this.nifiCommon.isBlank(entity.component.comments); return !this.nifiCommon.isBlank(entity.component.comments);
} }
viewDocumentationClicked(entity: ControllerServiceEntity, event: MouseEvent): void { viewDocumentationClicked(entity: ControllerServiceEntity): void {
event.stopPropagation();
this.viewControllerServiceDocumentation.next(entity); this.viewControllerServiceDocumentation.next(entity);
} }