mcgilman commented on code in PR #8174: URL: https://github.com/apache/nifi/pull/8174#discussion_r1434084192
########## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.html: ########## @@ -0,0 +1,205 @@ +<!-- + ~ Licensed to the Apache Software Foundation (ASF) under one or more + ~ contributor license agreements. See the NOTICE file distributed with + ~ this work for additional information regarding copyright ownership. + ~ The ASF licenses this file to You under the Apache License, Version 2.0 + ~ (the "License"); you may not use this file except in compliance with + ~ the License. You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + --> +<div class="connection-status-table h-full flex flex-col"> + <!-- allow filtering of the table --> + <summary-table-filter + [filteredCount]="filteredCount" + [totalCount]="totalCount" + [filterableColumns]="filterableColumns" + [includeStatusFilter]="false" + [includePrimaryNodeOnlyFilter]="false" + filterColumn="sourceName" + (filterChanged)="applyFilter($event)"></summary-table-filter> + + <div class="flex-1 relative"> + <div class="listing-table overflow-y-auto border absolute inset-0"> + <table + mat-table + [dataSource]="dataSource" + matSort + matSortDisableClear + (matSortChange)="sortData($event)" + [matSortActive]="initialSortColumn" + [matSortDirection]="initialSortDirection"> + <!-- More Details Column --> + <ng-container matColumnDef="moreDetails"> + <th mat-header-cell *matHeaderCellDef></th> + <td mat-cell *matCellDef="let item"></td> + </ng-container> + + <!-- Name Column --> + <ng-container matColumnDef="name"> + <th mat-header-cell *matHeaderCellDef mat-sort-header> + <div class="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap">Name</div> + </th> + <td mat-cell *matCellDef="let item" [title]="formatName(item)"> + {{ formatName(item) }} + </td> + </ng-container> + + <!-- Queued column --> + <ng-container matColumnDef="queue"> + <th + mat-header-cell + *matHeaderCellDef + mat-sort-header + title="Count / data size in the last 5 minutes"> + <div class="inline-block overflow-hidden overflow-ellipsis whitespace-nowrap space-x-1"> + <span + [ngClass]="{ + underline: multiSort.active === 'queue' && multiSort.sortValueIndex === 0 + }" + >Queue</span + > + <span + [ngClass]="{ + underline: multiSort.active === 'queue' && multiSort.sortValueIndex === 1 + }" + >(Size)</span + > + <span class="font-light">5 min</span> + </div> + </th> + <td mat-cell *matCellDef="let item" [title]="formatQueue(item)"> + {{ formatQueue(item) }} + </td> + </ng-container> + + <!-- Threshold column --> + <ng-container matColumnDef="threshold"> + <th + mat-header-cell + *matHeaderCellDef + mat-sort-header + title="Count / data size in the last 5 minutes"> Review Comment: This title is not accurate ########## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts: ########## @@ -0,0 +1,281 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatSortModule, Sort, SortDirection } from '@angular/material/sort'; +import { MultiSort } from '../index'; +import { MatTableDataSource, MatTableModule } from '@angular/material/table'; +import { PortStatusSnapshot, PortStatusSnapshotEntity } from '../../../state/summary-listing'; +import { SummaryTableFilterModule } from '../summary-table-filter/summary-table-filter.module'; +import { + SummaryTableFilterArgs, + SummaryTableFilterColumn +} from '../summary-table-filter/summary-table-filter.component'; +import { ComponentType } from '../../../../../state/shared'; +import { RouterLink } from '@angular/router'; +import { NiFiCommon } from '../../../../../service/nifi-common.service'; + +export type SupportedColumns = 'name' | 'runStatus' | 'in' | 'out'; + +@Component({ + selector: 'port-status-table', + standalone: true, + imports: [CommonModule, SummaryTableFilterModule, MatSortModule, MatTableModule, RouterLink], + templateUrl: './port-status-table.component.html', + styleUrls: ['./port-status-table.component.scss', '../../../../../../assets/styles/listing-table.scss'] +}) +export class PortStatusTable { + private _initialSortColumn: SupportedColumns = 'name'; + private _initialSortDirection: SortDirection = 'asc'; + private _portType!: 'input' | 'output'; + + filterableColumns: SummaryTableFilterColumn[] = [{ key: 'name', label: 'name' }]; + + totalCount: number = 0; + filteredCount: number = 0; + + multiSort: MultiSort = { + active: this._initialSortColumn, + direction: this._initialSortDirection, + sortValueIndex: 0, + totalValues: 2 + }; + + displayedColumns: string[] = []; + + dataSource: MatTableDataSource<PortStatusSnapshotEntity> = new MatTableDataSource<PortStatusSnapshotEntity>(); + + constructor(private nifiCommon: NiFiCommon) {} + + @Input() set portType(type: 'input' | 'output') { + if (type === 'input') { + this.displayedColumns = ['moreDetails', 'name', 'runStatus', 'in', 'actions']; + } else { + this.displayedColumns = ['moreDetails', 'name', 'runStatus', 'out', 'actions']; + } + this._portType = type; + } + + get portType() { + return this._portType; + } + + @Input() selectedPortId!: string; + + @Input() set initialSortColumn(initialSortColumn: SupportedColumns) { + this._initialSortColumn = initialSortColumn; + this.multiSort = { ...this.multiSort, active: initialSortColumn }; + } + + get initialSortColumn() { + return this._initialSortColumn; + } + + @Input() set initialSortDirection(initialSortDirection: SortDirection) { + this._initialSortDirection = initialSortDirection; + this.multiSort = { ...this.multiSort, direction: initialSortDirection }; + } + + get initialSortDirection() { + return this._initialSortDirection; + } + + @Input() set ports(ports: PortStatusSnapshotEntity[]) { + if (ports) { + this.dataSource.data = this.sortEntities(ports, this.multiSort); + this.dataSource.filterPredicate = (data: PortStatusSnapshotEntity, filter: string) => { + const filterArray: string[] = filter.split('|'); Review Comment: Embedding additional search criteria into a string is problematic if the user enters a `filterTerm` that contains a `|`. Are we able to let the `filter` string in the argument to the `filterPredicate` be the entire `filterTerm` and simply access variables in this component `this.filterColumn` and `this.filterStatus` for the additional criteria? Assuming this approach will work, we'll need to circle back and address existing filtering capabilities that have already been introduced with this same issue. Happy to file a new JIRA to circle back and address all of them. ########## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.html: ########## @@ -0,0 +1,311 @@ +<!-- + ~ Licensed to the Apache Software Foundation (ASF) under one or more + ~ contributor license agreements. See the NOTICE file distributed with + ~ this work for additional information regarding copyright ownership. + ~ The ASF licenses this file to You under the Apache License, Version 2.0 + ~ (the "License"); you may not use this file except in compliance with + ~ the License. You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + --> +<div class="process-group-status-table h-full flex flex-col"> + <!-- allow filtering of the table --> + <summary-table-filter + [filteredCount]="filteredCount" + [totalCount]="totalCount" + [filterableColumns]="filterableColumns" + [includeStatusFilter]="false" + [includePrimaryNodeOnlyFilter]="false" + (filterChanged)="applyFilter($event)"></summary-table-filter> + + <div class="flex-1 relative"> + <div class="listing-table overflow-y-auto border absolute inset-0"> + <table + mat-table + [dataSource]="dataSource" + matSort + matSortDisableClear + (matSortChange)="sortData($event)" + [matSortActive]="initialSortColumn" + [matSortDirection]="initialSortDirection"> + <!-- More Details Column --> + <ng-container matColumnDef="moreDetails"> + <th mat-header-cell *matHeaderCellDef></th> + <td mat-cell *matCellDef="let item"> + <ng-container *ngIf="canRead(item)"> + <div class="flex items-center gap-x-3"> + <!-- TODO - handle read only in configure component? --> + <div + class="pointer fa fa-info-circle" + *ngIf="canRead(item)" + title="View Process Group Details"></div> + </div> + </ng-container> + </td> + </ng-container> + + <!-- Name Column --> + <ng-container matColumnDef="name"> + <th mat-header-cell *matHeaderCellDef mat-sort-header> + <div class="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap">Name</div> + </th> + <td mat-cell *matCellDef="let item" [title]="formatName(item)"> + <div class="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap"> + {{ formatName(item) }} + </div> + </td> + </ng-container> + + <!-- Version State column --> + <ng-container matColumnDef="versionedFlowState"> + <th mat-header-cell *matHeaderCellDef mat-sort-header> + <div class="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap">Version State</div> + </th> + <td mat-cell *matCellDef="let item"> + <div class="flex items-center gap-x-1.5" [title]="formatVersionedFlowState(item)"> + <div [ngClass]="getVersionedFlowStateIcon(item)"></div> + <div class="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap min-w-0"> + {{ formatVersionedFlowState(item) }} + </div> + </div> + </td> + </ng-container> + + <!-- Process Group column --> + <ng-container matColumnDef="transferred"> + <th mat-header-cell *matHeaderCellDef mat-sort-header> Review Comment: This title is missing -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org
