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

[NIFI-13041] update listing table column widths (#8656) 

* [NIFI-13041] update listing table column widths (moreDetails)

* listing tables actions column widths

* update table columns to better fit the data

* prettier

* restore property table commented out html

* name column now 25%, more-details and actions columns fixed width, all other columns flex

* column width percenatages for clustered tables

* property table updates

This closes #8656
This commit is contained in:
Scott Aslan 2024-04-16 17:17:36 -04:00 committed by GitHub
parent 05558ca2de
commit 3f7085fec8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
53 changed files with 286 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.html
View File

@ -38,7 +38,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (canRemove()) {
<div
class="pointer fa fa-trash primary-color"

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.scss
View File

@ -18,7 +18,7 @@
.policy-table {
.listing-table {
.mat-column-actions {
width: 75px;
width: 32px;
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
View File

@ -29,7 +29,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<ng-container>
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-2">
@if (canRead(item)) {
<div
class="pointer fa fa-info-circle primary-color"

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.scss
View File

@ -19,7 +19,10 @@
.listing-table {
.mat-column-moreDetails {
width: 32px;
min-width: 32px;
}
.mat-column-sourceName {
width: 25%;
}
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
View File

@ -66,9 +66,9 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3 pointer">
<div class="flex items-center justify-end gap-x-2">
<div
class="fa fa-long-arrow-right primary-color"
class="pointer fa fa-long-arrow-right primary-color"
title="Go To"
(click)="goToClicked(item)"></div>
</div>

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.scss
View File

@ -17,9 +17,16 @@
.local-changes-table {
.listing-table {
.mat-column-componentName {
width: 230px;
}
.mat-column-changeType {
width: 230px;
}
.mat-column-actions {
width: 40px;
min-width: 40px;
width: 32px;
}
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
View File

@ -65,7 +65,7 @@
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-2">
@if (hasComments(item)) {
<div>
<div
@ -190,7 +190,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let port">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (
port.exists === true &&
port.connected === true &&

24
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.scss
View File

@ -21,18 +21,22 @@
line-height: normal;
}
.manage-remote-ports-table.listing-table {
@include mat.table-density(-4);
.manage-remote-ports-table {
.listing-table {
@include mat.table-density(-4);
table {
.mat-column-moreDetails {
width: 32px;
min-width: 32px;
}
table {
.mat-column-moreDetails {
width: 52px;
}
.mat-column-actions {
width: 75px;
min-width: 75px;
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 52px;
}
}
}
}

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
View File

@ -15,7 +15,7 @@
~ limitations under the License.
-->
<div class="relative h-full">
<div class="parameter-context-table relative h-full">
<div class="listing-table absolute inset-0 overflow-y-auto">
<table
mat-table
@ -30,7 +30,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canRead(item)) {
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-2">
<!-- TODO - handle read only in configure component? -->
@if (canRead(item)) {
<div class="pointer fa fa-info-circle primary-color"></div>
@ -44,7 +44,9 @@
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let item">
<div [ngClass]="{ unset: !canRead(item), 'nifi-surface-default': !canRead(item) }">
<div
[ngClass]="{ unset: !canRead(item), 'nifi-surface-default': !canRead(item) }"
class="overflow-hidden overflow-ellipsis whitespace-nowrap">
{{ formatName(item) }}
</div>
</td>
@ -70,7 +72,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (canRead(item) && canWrite(item)) {
<div
class="pointer fa fa-pencil primary-color"

16
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.scss
View File

@ -14,3 +14,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.parameter-context-table {
.listing-table {
.mat-column-moreDetails {
width: 32px;
}
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 96px;
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
View File

@ -95,7 +95,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (canGoToParameter(item)) {
<div
class="pointer fa fa-long-arrow-right primary-color"

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.scss
View File

@ -23,7 +23,7 @@
table {
.mat-column-actions {
width: 75px;
width: 74px;
}
}
}

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.html
View File

@ -76,10 +76,12 @@
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div
class="pointer fa fa-info-circle primary-color"
title="View Details"
(click)="viewDetailsClicked(item)"></div>
<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>
@ -145,7 +147,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
<div
class="pointer icon icon-lineage primary-color"
(click)="showLineageGraph(item)"

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.scss
View File

@ -19,13 +19,11 @@
.listing-table {
table {
.mat-column-moreDetails {
min-width: 50px;
width: 50px;
width: 32px;
}
.mat-column-actions {
min-width: 50px;
width: 50px;
width: 52px;
}
}
}

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.html
View File

@ -45,10 +45,12 @@
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div
class="pointer fa fa-info-circle primary-color"
title="View Details"
(click)="viewFlowFileClicked(item)"></div>
<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>
@ -122,7 +124,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (item.size > 0) {
<div
class="pointer fa fa-download primary-color"

16
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.scss
View File

@ -19,23 +19,15 @@
.listing-table {
table {
.mat-column-moreDetails {
min-width: 50px;
width: 50px;
width: 32px;
}
.mat-column-position {
min-width: 75px;
width: 75px;
}
.mat-column-penalized {
min-width: 85px;
width: 85px;
.mat-column-flowFileUuid {
width: 25%;
}
.mat-column-actions {
min-width: 100px;
width: 100px;
width: 74px;
}
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.html
View File

@ -30,7 +30,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canRead(item)) {
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-2">
<div
class="pointer fa fa-book primary-color"
(click)="viewDocumentationClicked(item, $event)"
@ -121,7 +121,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (canConfigure(item)) {
<div
class="pointer fa fa-cog primary-color"

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.scss
View File

@ -19,7 +19,15 @@
.listing-table {
table {
.mat-column-moreDetails {
min-width: 100px;
width: 96px;
}
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 140px;
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
View File

@ -253,7 +253,7 @@
<ng-container matColumnDef="indicators">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3 justify-end">
<div class="flex items-center gap-x-2 justify-end">
<div
class="fa fa-hashtag primary-color"
title="Parameter is currently referenced by a property. The sensitivity cannot be changed."

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.scss
View File

@ -37,11 +37,10 @@
.listing-table {
.mat-column-sensitive {
width: 32px;
min-width: 32px;
}
.mat-column-indicators {
width: 48px;
min-width: 48px;
width: 52px;
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
View File

@ -36,7 +36,7 @@
<ng-container matColumnDef="indicators">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-2">
@if (isSyncedToParameterContext(item)) {
<div class="fa fa-star primary-color" title="Synced to a parameter context."></div>
}

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.scss
View File

@ -19,7 +19,6 @@
.listing-table {
.mat-column-indicators {
width: 32px;
min-width: 32px;
}
}
}

7
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.html
View File

@ -32,7 +32,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canRead(item)) {
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-2">
<!-- TODO: open details -->
<div class="pointer fa fa-info-circle primary-color" title="View details"></div>
@ -67,7 +67,8 @@
[ngClass]="{
unset: !canRead(item),
'nifi-surface-default': !canRead(item)
}">
}"
class="overflow-hidden overflow-ellipsis whitespace-nowrap">
{{ formatName(item) }}
</div>
</td>
@ -96,7 +97,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (canConfigure(item)) {
<div
class="pointer fa fa-cog primary-color"

14
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.scss
View File

@ -17,6 +17,18 @@
.parameter-providers-table {
.listing-table {
// overrides to the listing-table styles go here
table {
.mat-column-moreDetails {
width: 82px;
}
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 118px;
}
}
}
}

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
View File

@ -15,8 +15,8 @@
~ limitations under the License.
-->
<div class="relative h-full">
<div class="registry-client-table listing-table absolute inset-0 overflow-y-auto">
<div class="registry-client-table relative h-full">
<div class="listing-table absolute inset-0 overflow-y-auto">
<table
mat-table
[dataSource]="dataSource"
@ -30,7 +30,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canRead(item)) {
<div class="flex items-center">
<div class="flex items-center gap-x-2">
<!-- TODO - handle read only in configure component? -->
@if (hasErrors(item)) {
<div
@ -99,7 +99,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (canConfigure(item)) {
<div
class="pointer fa fa-cog primary-color"

18
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.scss
View File

@ -15,10 +15,20 @@
* limitations under the License.
*/
.registry-client-table.listing-table {
table {
.mat-column-moreDetails {
min-width: 100px;
.registry-client-table {
.listing-table {
table {
.mat-column-moreDetails {
width: 52px;
}
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 52px;
}
}
}
}

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
View File

@ -30,7 +30,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canRead(item)) {
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-2">
<div
class="pointer fa fa-book primary-color"
(click)="viewDocumentationClicked(item, $event)"
@ -75,7 +75,9 @@
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let item">
<div [ngClass]="{ unset: !canRead(item), 'nifi-surface-default': !canRead(item) }">
<div
[ngClass]="{ unset: !canRead(item), 'nifi-surface-default': !canRead(item) }"
class="overflow-hidden overflow-ellipsis whitespace-nowrap">
{{ formatName(item) }}
</div>
</td>
@ -115,7 +117,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (canStop(item)) {
<div
class="pointer fa fa-stop primary-color"

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.scss
View File

@ -18,7 +18,15 @@
.reporting-task-table.listing-table {
table {
.mat-column-moreDetails {
min-width: 100px;
width: 96px;
}
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 140px; // only 6 of the 8 action icons can be present at the same time
}
}
}

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.scss
View File

@ -18,8 +18,7 @@
.connection-cluster-table {
.listing-table {
.mat-column-node {
min-width: 200px;
width: 30%;
width: 25%;
}
}
}

13
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.scss
View File

@ -17,9 +17,16 @@
.port-cluster-table {
.listing-table {
.mat-column-node {
min-width: 200px;
width: 50%;
.mat-column-runStatus {
width: 15%;
}
.mat-column-in {
width: 15%;
}
.mat-column-out {
width: 15%;
}
}
}

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.scss
View File

@ -18,8 +18,7 @@
.process-group-cluster-table {
.listing-table {
.mat-column-node {
min-width: 200px;
width: 30%;
width: 25%;
}
}
}

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.scss
View File

@ -18,8 +18,7 @@
.processor-cluster-table {
.listing-table {
.mat-column-node {
min-width: 200px;
width: 30%;
width: 25%;
}
}
}

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.scss
View File

@ -18,8 +18,7 @@
.remote-process-group-cluster-table {
.listing-table {
.mat-column-node {
min-width: 200px;
width: 30%;
width: 25%;
}
}
}

6
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.html
View File

@ -42,7 +42,9 @@
<!-- More Details Column -->
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item"></td>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-2"></div>
</td>
</ng-container>
<!-- Name Column -->
@ -140,7 +142,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
<div
class="pointer fa fa-long-arrow-right primary-color"
[routerLink]="getPortLink(item)"

16
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.scss
View File

@ -22,9 +22,21 @@
min-width: 32px;
}
.mat-column-runStatus {
width: 20%;
}
.mat-column-in {
width: 20%;
}
.mat-column-out {
width: 20%;
}
.mat-column-actions {
width: 80px;
min-width: 80px;
width: 52px;
min-width: 52px;
}
}
}

6
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
View File

@ -43,7 +43,9 @@
<!-- More Details Column -->
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item"></td>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-2"></div>
</td>
</ng-container>
<!-- Name Column -->
@ -204,7 +206,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
<div
class="pointer fa fa-long-arrow-right primary-color"
[routerLink]="getConnectionLink(item)"

8
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.scss
View File

@ -19,12 +19,14 @@
.listing-table {
.mat-column-moreDetails {
width: 32px;
min-width: 32px;
}
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 80px;
min-width: 80px;
width: 74px;
}
}
}

4
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
View File

@ -44,7 +44,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canRead(item)) {
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-2">
<!-- TODO - handle read only in configure component? -->
@if (canRead(item)) {
<div
@ -330,7 +330,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
<div
class="pointer fa fa-long-arrow-right primary-color"
[routerLink]="getProcessGroupLink(item)"

8
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.scss
View File

@ -19,12 +19,14 @@
.listing-table {
.mat-column-moreDetails {
width: 32px;
min-width: 32px;
}
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 80px;
min-width: 80px;
width: 74px;
}
}
}

15
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html
View File

@ -44,7 +44,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canRead(item)) {
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-2">
<!-- TODO - handle read only in configure component? -->
@if (canRead(item)) {
<div
@ -70,7 +70,9 @@
P
</div>
}
<div>{{ formatName(item) }}</div>
<div class="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap">
{{ formatName(item) }}
</div>
</div>
</td>
</ng-container>
@ -81,7 +83,9 @@
<div class="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap">Type</div>
</th>
<td mat-cell *matCellDef="let item" [title]="formatType(item)">
{{ formatType(item) }}
<div class="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap">
{{ formatType(item) }}
</div>
</td>
</ng-container>
@ -101,8 +105,7 @@
<ng-container matColumnDef="runStatus">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Run Status</th>
<td mat-cell *matCellDef="let item">
<div
class="inline-block overflow-hidden overflow-ellipsis whitespace-nowrap space-x-1.5 align-middle">
<div class="inline-block space-x-1.5 align-middle">
<span [ngClass]="getRunStatusIcon(item)"></span>
<span [title]="formatRunStatus(item)">{{ formatRunStatus(item) }}</span>
@ -246,7 +249,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
<div
class="pointer fa fa-long-arrow-right primary-color"
[routerLink]="getProcessorLink(item)"

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.scss
View File

@ -18,12 +18,14 @@
.listing-table {
.mat-column-moreDetails {
width: 32px;
min-width: 32px;
}
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 80px;
min-width: 80px;
width: 74px;
}
}
.primary-node-only {

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.html
View File

@ -43,7 +43,9 @@
<!-- More Details Column -->
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item"></td>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-2"></div>
</td>
</ng-container>
<!-- Name Column -->
@ -146,7 +148,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
<div
class="pointer fa fa-long-arrow-right primary-color"
[routerLink]="getRemoteProcessGroupLink(item)"

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.scss
View File

@ -19,12 +19,14 @@
.listing-table {
.mat-column-moreDetails {
width: 32px;
min-width: 32px;
}
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 80px;
min-width: 80px;
width: 74px;
}
}
}

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
View File

@ -60,11 +60,13 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canGoToPolicyTarget(item)) {
<div
class="pointer fa fa-long-arrow-right primary-color"
[routerLink]="getPolicyTargetLink(item)"
mat-dialog-close="ROUTED"
title="Go to"></div>
<div class="flex items-center justify-end gap-x-2">
<div
class="pointer fa fa-long-arrow-right primary-color"
[routerLink]="getPolicyTargetLink(item)"
mat-dialog-close="ROUTED"
title="Go to"></div>
</div>
}
</td>
</ng-container>

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.scss
View File

@ -24,17 +24,8 @@
.listing-table {
table {
td,
th {
cursor: default;
}
.mat-column-action {
width: 75px;
}
.mat-column-actions {
width: 50px;
width: 32px;
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.html
View File

@ -78,7 +78,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (canEditOrDelete(currentUser, item)) {
<div
class="pointer fa fa-pencil primary-color"

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.scss
View File

@ -18,7 +18,7 @@
.user-table {
.listing-table {
.mat-column-actions {
width: 75px;
width: 74px;
}
}
}

28
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
View File

@ -15,8 +15,8 @@
~ limitations under the License.
-->
<div class="relative h-full">
<div class="controller-service-table listing-table absolute inset-0 overflow-y-auto">
<div class="controller-service-table relative h-full">
<div class="listing-table absolute inset-0 overflow-y-auto">
<table
mat-table
[dataSource]="dataSource"
@ -30,7 +30,7 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (canRead(item)) {
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-2">
<div
class="pointer fa fa-book primary-color"
(click)="viewDocumentationClicked(item, $event)"
@ -75,7 +75,9 @@
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let item">
<div [ngClass]="{ unset: !canRead(item), 'nifi-surface-default': !canRead(item) }">
<div
[ngClass]="{ unset: !canRead(item), 'nifi-surface-default': !canRead(item) }"
class="overflow-hidden overflow-ellipsis whitespace-nowrap">
{{ formatName(item) }}
</div>
</td>
@ -97,6 +99,14 @@
</td>
</ng-container>
<!-- Scope Column -->
<ng-container matColumnDef="scope">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Scope</th>
<td mat-cell *matCellDef="let item">
{{ formatScope(item) }}
</td>
</ng-container>
<!-- State Column -->
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
@ -108,20 +118,12 @@
</td>
</ng-container>
<!-- Scope Column -->
<ng-container matColumnDef="scope">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Scope</th>
<td mat-cell *matCellDef="let item">
{{ formatScope(item) }}
</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
@if (definedByCurrentGroup(item)) {
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (canConfigure(item)) {
<div
class="pointer fa fa-cog primary-color"

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.scss
View File

@ -21,7 +21,15 @@
.listing-table {
table {
.mat-column-moreDetails {
min-width: 90px;
width: 96px;
}
.mat-column-name {
width: 25%;
}
.mat-column-actions {
width: 140px; // only 6 of the 8 action icons can be present at the same time
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
View File

@ -102,7 +102,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<div class="flex items-center gap-x-3">
<div class="flex items-center justify-end gap-x-2">
@if (item.descriptor.identifiesControllerService) {
<div
class="pointer fa fa-plus primary-color"

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.scss
View File

@ -14,3 +14,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.property-table {
.listing-table {
table {
.mat-column-actions {
width: 74px;
}
}
}
}

38
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.ts
View File

@ -127,6 +127,12 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
isTouched = false;
onTouched!: () => void;
onChange!: (properties: Property[]) => void;
editorOpen = false;
editorTrigger: any = null;
editorItem!: PropertyItem;
editorWidth = 0;
editorOffsetX = 0;
editorOffsetY = 0;
private originPos: OriginConnectionPosition = {
originX: 'center',
@ -136,17 +142,7 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
overlayX: 'center',
overlayY: 'center'
};
private editorPosition: ConnectionPositionPair = new ConnectionPositionPair(
this.originPos,
this.editorOverlayPos,
0,
0
);
public editorPositions: ConnectionPositionPair[] = [this.editorPosition];
editorOpen = false;
editorTrigger: any = null;
editorItem!: PropertyItem;
editorWidth = 0;
public editorPositions: ConnectionPositionPair[] = [];
constructor(
private changeDetector: ChangeDetectorRef,
@ -408,10 +404,28 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
if (td) {
const { width } = td.getBoundingClientRect();
this.editorPositions.pop();
this.editorItem = item;
this.editorTrigger = editorTrigger;
this.editorOpen = true;
this.editorWidth = width;
if (this.hasAllowableValues(item)) {
this.editorWidth = width;
this.editorOffsetX = -24;
this.editorOffsetY = 24;
} else {
this.editorWidth = width + 100;
this.editorOffsetX = 8;
this.editorOffsetY = 56;
}
this.editorPositions.push(
new ConnectionPositionPair(
this.originPos,
this.editorOverlayPos,
this.editorOffsetX,
this.editorOffsetY
)
);
}
}
}

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
View File

@ -38,23 +38,15 @@
}
.fa {
width: 10px;
width: 14px;
height: 14px;
text-align: center;
}
.icon {
width: 10px;
width: 14px;
text-align: center;
}
.mat-column-moreDetails {
min-width: 30px;
}
.mat-column-actions {
min-width: 115px;
}
}
}