smolnar82 commented on code in PR #713: URL: https://github.com/apache/knox/pull/713#discussion_r1064965894
########## 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> + <!-- 'doAs' Knox Tokens (tokens created by the current user on behalf on another user --> - <div class="table-responsive" style="width:100%; overflow: auto; overflow-y: scroll; padding: 10px 0px 0px 0px;" *ngIf="isImpersonationEnabled()"> - <label>Impersonation Knox Tokens</label> - <table class="table table-hover" [mfData]="doAsKnoxTokens" #doAsTokens="mfDataTable" [mfRowsOnPage]="10"> - <thead> - <tr> - <th>Token ID</th> - <th>Issued</th> - <th>Expires</th> - <th>Comment</th> - <th>Additional Metadata</th> - <th>Impersonated User<th> - </tr> - </thead> - <tbody> - <tr *ngFor="let doAsKnoxtoken of doAsTokens.data"> - <td>{{doAsKnoxtoken.tokenId}}</td> - <td>{{formatDateTime(doAsKnoxtoken.issueTimeLong)}}</td> - <td *ngIf="!isTokenExpired(doAsKnoxtoken.expirationLong)" style="color: green">{{formatDateTime(doAsKnoxtoken.expirationLong)}}</td> - <td *ngIf="isTokenExpired(doAsKnoxtoken.expirationLong)" style="color: red">{{formatDateTime(doAsKnoxtoken.expirationLong)}}</td> - <td>{{doAsKnoxtoken.metadata.comment}}</td> - <td> - <ul> - <li *ngFor="let metadata of getCustomMetadataArray(doAsKnoxtoken)"> - {{metadata[0]}} = {{metadata[1]}} - </li> - </ul> - </td> - <td>{{doAsKnoxtoken.metadata.userName}}</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="6"> - <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator> - </td> - </tr> - </tfoot> - </table> + <div class="table-responsive" style="width:100%; overflow: auto; overflow-y: scroll; padding: 10px 0px 0px 0px;"> Review Comment: In theory, they could be, but I made this decision when token impersonation was introduced (so this is not a new thing here). This is easier to understand and the UX is better this way (IMO, at least) The relationship is straightforward: - in the first table we list all tokens generated by the logged-in user for himself/herself: `userName=logged-in user` - in the second one we list all tokens generated by the logged-in user on behalf of other users: `username=otherUser; createdBy=logged-in user` The same is described [here](https://knox.apache.org/books/knox-2-0-0/user-guide.html#Token+Management). -- 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: dev-unsubscr...@knox.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org