pzampino commented on code in PR #713:
URL: https://github.com/apache/knox/pull/713#discussion_r1064780286


##########
knox-token-management-ui/token-management/app/token.management.component.ts:
##########
@@ -57,13 +117,29 @@ export class TokenManagementComponent implements OnInit {
     }
 
     fetchAllKnoxTokens(): void {
-        this.fetchKnoxTokens(true);
         this.fetchKnoxTokens(false);
+        this.fetchKnoxTokens(true);

Review Comment:
   Is the order important here? Just trying to understand the change.



##########
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:
   Why are tokens acquired with impersonation presented in a distinct table 
from "normal" tokens? Couldn't it be a single table? The relationship between 
the tables isn't entirely clear to me, and you can only act on rows in the My 
Knox Tokens table.



-- 
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: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to