You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@knox.apache.org by GitBox <gi...@apache.org> on 2023/01/06 15:46:12 UTC

[GitHub] [knox] smolnar82 opened a new pull request, #713: KNOX-2859 - Token Management UI improvements

smolnar82 opened a new pull request, #713:
URL: https://github.com/apache/knox/pull/713

   ## What changes were proposed in this pull request?
   
   Replaced the old Angular2 Datatable with a more modern Material Table implementation and configured filtering, sorting, and pagination on both tables on the Token Management UI.
   
   ## How was this patch tested?
   
   Manual testing with a huge amount of tokens created (2k) to ensure the new implementation still performs.
   


-- 
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-unsubscribe@knox.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [knox] smolnar82 merged pull request #713: KNOX-2859 - Token Management UI improvements

Posted by GitBox <gi...@apache.org>.
smolnar82 merged PR #713:
URL: https://github.com/apache/knox/pull/713


-- 
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-unsubscribe@knox.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [knox] pzampino commented on a diff in pull request #713: KNOX-2859 - Token Management UI improvements

Posted by GitBox <gi...@apache.org>.
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>
 
+
     <!-- '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:
   I recognize that this is not directly related to this PR.
   I think my confusion may be due to the inability to disable/revoke the tokens in the second table, but that is a separate topic.



-- 
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-unsubscribe@knox.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [knox] smolnar82 commented on a diff in pull request #713: KNOX-2859 - Token Management UI improvements

Posted by GitBox <gi...@apache.org>.
smolnar82 commented on code in PR #713:
URL: https://github.com/apache/knox/pull/713#discussion_r1064959951


##########
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:
   Nope, the order is irrelevant. I just made to change to reflect the order of the tables on te GUI: my tokens first then the impersonation tokens.



-- 
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-unsubscribe@knox.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [knox] smolnar82 commented on a diff in pull request #713: KNOX-2859 - Token Management UI improvements

Posted by GitBox <gi...@apache.org>.
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-unsubscribe@knox.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [knox] pzampino commented on a diff in pull request #713: KNOX-2859 - Token Management UI improvements

Posted by GitBox <gi...@apache.org>.
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: dev-unsubscribe@knox.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [knox] zeroflag commented on a diff in pull request #713: KNOX-2859 - Token Management UI improvements

Posted by GitBox <gi...@apache.org>.
zeroflag commented on code in PR #713:
URL: https://github.com/apache/knox/pull/713#discussion_r1064559462


##########
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);
     }
 
     fetchKnoxTokens(impersonated: boolean): void {
         this.tokenManagementService.getKnoxTokens(this.userName, impersonated)
-            .then(tokens => impersonated ? this.doAsKnoxTokens = tokens : this.knoxTokens = tokens);
+            .then(tokens => this.populateTokens(impersonated, tokens));
+    }
+
+    populateTokens(impersonated: boolean, tokens: KnoxToken[]) {
+	    if (impersonated) {

Review Comment:
   nit: missing indentation



-- 
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-unsubscribe@knox.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [knox] zeroflag commented on a diff in pull request #713: KNOX-2859 - Token Management UI improvements

Posted by GitBox <gi...@apache.org>.
zeroflag commented on code in PR #713:
URL: https://github.com/apache/knox/pull/713#discussion_r1064559699


##########
knox-token-management-ui/token-management/app/token.management.component.ts:
##########
@@ -42,6 +55,53 @@ export class TokenManagementComponent implements OnInit {
     }
 
     constructor(private tokenManagementService: TokenManagementService) {
+        let isMatch: (record: KnoxToken, filter: String, impersonated: boolean) => boolean = (record, filter, impersonated) => {
+          let normalizedFilter = filter.trim().toLocaleLowerCase();
+          let matchesTokenId = record.tokenId.toLocaleLowerCase().includes(normalizedFilter);
+          let matchesComment = record.metadata.comment && record.metadata.comment.toLocaleLowerCase().includes(normalizedFilter);
+          let matchesCustomMetadata = false;
+          if (record.metadata.customMetadataMap) {
+            for (let entry of Array.from(Object.entries(record.metadata.customMetadataMap))) {
+	          if (entry[0].toLocaleLowerCase().includes(normalizedFilter) || entry[1].toLocaleLowerCase().includes(normalizedFilter)) {
+                  matchesCustomMetadata = true;
+                  break;
+              }
+            }
+          } else {
+            matchesCustomMetadata = true; // nothing to match
+          }
+
+          let matchesImpersonatedUserName = false;  // doAs username should be checked only if impersonation is enabled
+          if (impersonated) {
+              matchesImpersonatedUserName = record.metadata.userName.toLocaleLowerCase().includes(normalizedFilter);
+          }
+
+          return matchesTokenId || matchesComment || matchesCustomMetadata || matchesImpersonatedUserName;
+        };
+
+        this.knoxTokens.filterPredicate = function (record, filter) {
+	      return isMatch(record, filter, false);
+        };
+
+        this.doAsKnoxTokens.filterPredicate = function (record, filter) {
+          return isMatch(record, filter, true);
+        };
+
+        this.knoxTokens.sortingDataAccessor = (item, property) => {
+           switch(property) {
+             case 'metadata.comment': return item.metadata.comment;
+             default: return item[property];
+           }
+        };
+
+        this.doAsKnoxTokens.sortingDataAccessor = (item, property) => {
+	       let normalizedPropertyName = property.replace('impersonation.', '');

Review Comment:
   nit: wrong indentation



-- 
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-unsubscribe@knox.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [knox] smolnar82 commented on a diff in pull request #713: KNOX-2859 - Token Management UI improvements

Posted by GitBox <gi...@apache.org>.
smolnar82 commented on code in PR #713:
URL: https://github.com/apache/knox/pull/713#discussion_r1064586511


##########
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);
     }
 
     fetchKnoxTokens(impersonated: boolean): void {
         this.tokenManagementService.getKnoxTokens(this.userName, impersonated)
-            .then(tokens => impersonated ? this.doAsKnoxTokens = tokens : this.knoxTokens = tokens);
+            .then(tokens => this.populateTokens(impersonated, tokens));
+    }
+
+    populateTokens(impersonated: boolean, tokens: KnoxToken[]) {
+	    if (impersonated) {

Review Comment:
   Fixed.



##########
knox-token-management-ui/token-management/app/token.management.component.ts:
##########
@@ -42,6 +55,53 @@ export class TokenManagementComponent implements OnInit {
     }
 
     constructor(private tokenManagementService: TokenManagementService) {
+        let isMatch: (record: KnoxToken, filter: String, impersonated: boolean) => boolean = (record, filter, impersonated) => {
+          let normalizedFilter = filter.trim().toLocaleLowerCase();
+          let matchesTokenId = record.tokenId.toLocaleLowerCase().includes(normalizedFilter);
+          let matchesComment = record.metadata.comment && record.metadata.comment.toLocaleLowerCase().includes(normalizedFilter);
+          let matchesCustomMetadata = false;
+          if (record.metadata.customMetadataMap) {
+            for (let entry of Array.from(Object.entries(record.metadata.customMetadataMap))) {
+	          if (entry[0].toLocaleLowerCase().includes(normalizedFilter) || entry[1].toLocaleLowerCase().includes(normalizedFilter)) {
+                  matchesCustomMetadata = true;
+                  break;
+              }
+            }
+          } else {
+            matchesCustomMetadata = true; // nothing to match
+          }
+
+          let matchesImpersonatedUserName = false;  // doAs username should be checked only if impersonation is enabled
+          if (impersonated) {
+              matchesImpersonatedUserName = record.metadata.userName.toLocaleLowerCase().includes(normalizedFilter);
+          }
+
+          return matchesTokenId || matchesComment || matchesCustomMetadata || matchesImpersonatedUserName;
+        };
+
+        this.knoxTokens.filterPredicate = function (record, filter) {
+	      return isMatch(record, filter, false);
+        };
+
+        this.doAsKnoxTokens.filterPredicate = function (record, filter) {
+          return isMatch(record, filter, true);
+        };
+
+        this.knoxTokens.sortingDataAccessor = (item, property) => {
+           switch(property) {
+             case 'metadata.comment': return item.metadata.comment;
+             default: return item[property];
+           }
+        };
+
+        this.doAsKnoxTokens.sortingDataAccessor = (item, property) => {
+	       let normalizedPropertyName = property.replace('impersonation.', '');

Review Comment:
   Fixed.



-- 
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-unsubscribe@knox.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org