[
https://issues.apache.org/jira/browse/KNOX-2859?focusedWorklogId=838347&page=com.atlassian.jira.plugin.system.issuetabpanels:worklog-tabpanel#worklog-838347
]
ASF GitHub Bot logged work on KNOX-2859:
----------------------------------------
Author: ASF GitHub Bot
Created on: 10/Jan/23 14:59
Start Date: 10/Jan/23 14:59
Worklog Time Spent: 10m
Work Description: pzampino commented on code in PR #713:
URL: https://github.com/apache/knox/pull/713#discussion_r1065889252
##########
knox-token-management-ui/token-management/app/token.management.component.html:
##########
@@ -20,90 +20,116 @@
<span class="glyphicon glyphicon-refresh"></span>
</button>
</div>
+
<div class="table-responsive" style="width:100%; overflow: auto;
overflow-y: scroll; padding: 10px 0px 0px 0px;">
<label>My Knox Tokens</label>
- <table class="table table-hover" [mfData]="knoxTokens"
#tokens="mfDataTable" [mfRowsOnPage]="10">
- <thead>
- <tr>
- <th>Token ID</th>
- <th>Issued</th>
- <th>Expires</th>
- <th>Comment</th>
- <th>Additional Metadata</th>
- <th>Actions</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let knoxToken of tokens.data">
- <td>{{knoxToken.tokenId}}</td>
- <td>{{formatDateTime(knoxToken.issueTimeLong)}}</td>
- <td *ngIf="!isTokenExpired(knoxToken.expirationLong)"
style="color: green">{{formatDateTime(knoxToken.expirationLong)}}</td>
- <td *ngIf="isTokenExpired(knoxToken.expirationLong)"
style="color: red">{{formatDateTime(knoxToken.expirationLong)}}</td>
- <td>{{knoxToken.metadata.comment}}</td>
- <td>
- <ul>
- <li *ngFor="let metadata of
getCustomMetadataArray(knoxToken)">
- {{metadata[0]}} = {{metadata[1]}}
- </li>
- </ul>
- </td>
- <td>
+
+ <mat-form-field [floatLabel]="always" appearance="fill" #search>
+ <mat-label>Search by Token ID, Comment or Metadata...</mat-label>
+ <input matInput (keyup)="applyFilter(false, $event.target.value)">
+ </mat-form-field>
+
+ <mat-table [dataSource]="knoxTokens" matSort #ownSort="matSort">
+ <ng-container matColumnDef="tokenId">
+ <mat-header-cell *matHeaderCellDef
mat-sort-header="tokenId">Token ID</mat-header-cell>
+ <mat-cell *matCellDef="let
knoxToken">{{knoxToken.tokenId}}</mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="issued">
+ <mat-header-cell *matHeaderCellDef
mat-sort-header="issueTime">Issued</mat-header-cell>
+ <mat-cell *matCellDef="let
knoxToken">{{formatDateTime(knoxToken.issueTimeLong)}}</mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="expires">
+ <mat-header-cell *matHeaderCellDef
mat-sort-header="expiration">Expires</mat-header-cell>
+ <mat-cell *matCellDef="let knoxToken"
[style.color]="getExpirationColor(knoxToken.expirationLong)">{{formatDateTime(knoxToken.expirationLong)}}</mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="comment">
+ <mat-header-cell *matHeaderCellDef
mat-sort-header="metadata.comment">Comment</mat-header-cell>
+ <mat-cell *matCellDef="let
knoxToken">{{knoxToken.metadata.comment}}</mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="metadata">
+ <mat-header-cell *matHeaderCellDef>Additional
Metadata</mat-header-cell>
+ <mat-cell *matCellDef="let knoxToken">
+ <ul>
+ <li *ngFor="let metadata of
getCustomMetadataArray(knoxToken)">
+ {{metadata[0]}} = {{metadata[1]}}
+ </li>
+ </ul>
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="actions">
+ <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
+ <mat-cell *matCellDef="let knoxToken">
<button *ngIf="knoxToken.metadata.enabled &&
!isTokenExpired(knoxToken.expirationLong)"
(click)="disableToken(knoxToken.tokenId);">Disable</button>
<button *ngIf="!knoxToken.metadata.enabled &&
!isTokenExpired(knoxToken.expirationLong)"
(click)="enableToken(knoxToken.tokenId);">Enable</button>
<button
(click)="revokeToken(knoxToken.tokenId);">Revoke</button>
- </td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="6">
- <mfBootstrapPaginator
[rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
- </td>
- </tr>
- </tfoot>
- </table>
+ </mat-cell>
+ </ng-container>
+
+ <mat-header-row
*matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns:
displayedColumns;"></mat-row>
+
+ </mat-table>
+ <mat-paginator #ownPaginator [pageSizeOptions]="[5, 10, 25, 100]"
[showFirstLastButtons]="true"></mat-paginator>
</div>
+
<!
Issue Time Tracking
-------------------
Worklog Id: (was: 838347)
Time Spent: 1h 20m (was: 1h 10m)
> Search/filter tokens on Token Management page
> ---------------------------------------------
>
> Key: KNOX-2859
> URL: https://issues.apache.org/jira/browse/KNOX-2859
> Project: Apache Knox
> Issue Type: Improvement
> Components: TokenManagementUI
> Affects Versions: 2.0.0
> Reporter: Sandor Molnar
> Assignee: Sandor Molnar
> Priority: Major
> Fix For: 2.1.0
>
> Time Spent: 1h 20m
> Remaining Estimate: 0h
>
> In 2.0.0, the Knox team introduced a new UI where logged-in users can see
> their own tokens as well as tokens generated by them on behalf of other users
> (impersonated tokens).
> These tables show different useful information, such as custom metadata, in
> tables where pagination is used. However, there is no way that end-users can
> filter/search for specific tokens based on their needs. In the case of a huge
> token list (e.g. when the token limit is disabled), it may be very hard for
> them to find the token they are interested in (e.g. they want to
> revoke/disable one).
> The scope of this task is to find another Angular DataTable implementation
> where these features are supported and integrate them on the token management
> page (we may want to do the same on tables on the Admin UI).
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
