| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one |
| ~ or more contributor license agreements. See the NOTICE file |
| ~ distributed with this work for additional information |
| ~ regarding copyright ownership. The ASF licenses this file |
| ~ to you under the Apache License, Version 2.0 (the |
| ~ "License"); you may not use this file except in compliance |
| ~ with the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, |
| ~ software distributed under the License is distributed on an |
| ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| ~ KIND, either express or implied. See the License for the |
| ~ specific language governing permissions and limitations |
| ~ under the License. |
| --> |
| |
| <section class="audit-table-wrapper" id="scrolling" [ngClass]="{'scroll': auditData?.length > 6}"> |
| <table mat-table [dataSource]="auditData" class="data-grid audit mat-elevation-z6"> |
| |
| <ng-container matColumnDef="date"> |
| <th mat-header-cell *matHeaderCellDef class="th_date label-header"> |
| <div class="label"><span class="text">Date</span></div> |
| <button |
| mat-icon-button |
| aria-label="More" |
| class="ar" |
| (click)="toggleFilterRow()" |
| > |
| <i class="material-icons"> |
| <span>more_vert</span> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element"> {{element.timestamp | localDate : 'short'}} </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"> |
| </td> |
| </ng-container> |
| |
| <ng-container matColumnDef="user"> |
| <th mat-header-cell *matHeaderCellDef class="th_user label-header" [ngStyle]="{'z-index': 99}"> |
| <div class="label"><span class="audit-user"> User</span></div> |
| <button |
| mat-icon-button |
| aria-label="More" |
| class="ar" |
| (click)="toggleFilterRow()" |
| > |
| <i class="material-icons"> |
| <span *ngIf="filterAuditData.users.length > 0; else user_filtered">filter_list</span> |
| <ng-template #user_filtered>more_vert</ng-template> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element" class="th_user"> |
| <div class="table-item-wrapper"> |
| <span class="table-item user-col">{{element.user || 'N/A'}}</span> |
| </div> |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="action"> |
| <th mat-header-cell *matHeaderCellDef class="th_action label-header" [ngStyle]="{'zIndex': 98, 'display': 'sticky'}"> |
| <div class="label"> |
| <span class="text"> Action </span> |
| </div> |
| <button |
| mat-icon-button |
| aria-label="More" |
| class="ar" |
| (click)="toggleFilterRow()" |
| > |
| <i class="material-icons"> |
| <span>more_vert</span> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef=" let element" class="th_action"> |
| <div class="action-wrapper"> |
| <span |
| class="ellipsis" |
| [matTooltip]="element.action | convertaction" |
| [matTooltipClass]="'full-size-tooltip'" |
| matTooltipPosition="above" |
| [matTooltipDisabled]="element.action?.length < 12" |
| > |
| {{element.action | convertaction }} |
| </span> |
| <div class="audit-info" (click)="openActionInfo(element)" *ngIf="element.info"> |
| <i class="material-icons">info</i> |
| </div> |
| </div> |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="project"> |
| <th mat-header-cell *matHeaderCellDef class="th_project label-header"> |
| <div class="label"><span class="text">Project</span></div> |
| <button |
| mat-icon-button |
| aria-label="More" |
| class="ar" |
| (click)="toggleFilterRow()" |
| > |
| <i class="material-icons"> |
| <span *ngIf="filterAuditData.projects.length > 0; else user_filtered">filter_list</span> |
| <ng-template #user_filtered>more_vert</ng-template> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element" class="th_project"> |
| <div class="table-item-wrapper"> |
| <span class="table-item project">{{element.project || 'N/A'}}</span> |
| </div> |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="resource-type"> |
| <th mat-header-cell *matHeaderCellDef class="th_resource-type label-header"> |
| <div class="label"><span class="text">Resource type</span></div> |
| <button |
| mat-icon-button |
| aria-label="More" |
| class="ar" |
| (click)="toggleFilterRow()" |
| > |
| <i class="material-icons"> |
| <span *ngIf="filterAuditData.resource_types.length > 0; else user_filtered">filter_list</span> |
| <ng-template #user_filtered>more_vert</ng-template> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element" class="th_resource-type"> |
| <div class="table-item-wrapper"> |
| <span class="table-item"> |
| {{element.type ? (element.type | convertaction) : 'N/A'}} |
| </span> |
| </div> |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer" [colSpan]="3" > |
| <div class="pagination-wrapper"> |
| <div class="selected-items-wrapper"> |
| <span>Items per page:</span> |
| <div class="select-wrapper"> |
| <div class="mat-reset"> |
| <div class="control selector-wrapper"> |
| <mat-form-field> |
| <mat-label></mat-label> |
| <mat-select [(value)]="showItemsPrPage"> |
| <mat-option |
| *ngFor="let item of itemsPrPage" |
| [value]="item" |
| (click)="setItemsPrPage(item)" |
| > |
| {{ item }} |
| </mat-option> |
| </mat-select> |
| <button class="caret"> |
| <i class="material-icons">keyboard_arrow_down</i> |
| </button> |
| </mat-form-field> |
| </div> |
| </div> |
| </div> |
| </div> |
| <span> |
| <span>{{firstItem}}</span> - <span>{{(lastItem < allItems) ? lastItem: allItems}}</span> of <span>{{allItems}}</span> |
| </span> |
| <span> |
| <span [ngClass]="{'not-active': !isNavigationDisabled || firstItem === 1}"> |
| <span |
| class="navigation-butts" |
| (click)="loadItemsForPage('first')" |
| [ngClass]="{'not-allowed': firstItem === 1 || !isNavigationDisabled}" |
| > |
| <i class="material-icons">first_page</i> |
| </span> |
| </span> |
| <span [ngClass]="{'not-active': firstItem === 1 || !isNavigationDisabled}"> |
| <span |
| class="navigation-butts" |
| (click)="loadItemsForPage('previous')" |
| [ngClass]="{'not-allowed': firstItem === 1 || !isNavigationDisabled}" |
| > |
| <i class="material-icons">keyboard_arrow_left</i> |
| </span> |
| </span> |
| <span [ngClass]="{'not-active': lastItem >= allItems || !isNavigationDisabled}"> |
| <span |
| class="navigation-butts" |
| (click)="loadItemsForPage('next')" |
| [ngClass]="{'not-allowed': lastItem >= allItems || !isNavigationDisabled}" |
| > |
| <i class="material-icons">keyboard_arrow_right</i> |
| </span> |
| </span> |
| <span [ngClass]="{'not-active': lastItem >= allItems || !isNavigationDisabled}"> |
| <span |
| class="navigation-butts" |
| (click)="loadItemsForPage('last')" |
| [ngClass]="{'not-allowed': lastItem >= allItems || !isNavigationDisabled}" |
| > |
| <i class="material-icons">last_page</i> |
| </span> |
| </span> |
| </span> |
| </div> |
| </td> |
| </ng-container> |
| |
| <ng-container matColumnDef="resource"> |
| <th mat-header-cell *matHeaderCellDef class="th_resource label-header"> |
| <div class="label"><span class="text">Resource</span></div> |
| <button |
| mat-icon-button |
| aria-label="More" |
| class="ar" |
| (click)="toggleFilterRow()" |
| > |
| <i class="material-icons"> |
| <span *ngIf="filterAuditData.resources.length > 0; else user_filtered">filter_list</span> |
| <ng-template #user_filtered>more_vert</ng-template> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element" class="th_resource"> |
| <div class="table-item-wrapper"> |
| <span |
| class="ellipsis" |
| [matTooltip]="element.resourceName || 'N/A'" |
| matTooltipPosition="above"> |
| {{element.resourceName || 'N/A'}} |
| </span> |
| </div> |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer" [hidden]="true"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="buttons"> |
| <th mat-header-cell *matHeaderCellDef class="th_buttons label-header"></th> |
| <td mat-cell *matCellDef="let element"></td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer" [hidden]="true"> |
| </td> |
| </ng-container> |
| |
| <!-- AUDIT FILTER--> |
| <ng-container matColumnDef="user-filter"> |
| <th mat-header-cell *matHeaderCellDef class="filter-row-item"> |
| <multi-select-dropdown |
| *ngIf="filterConfiguration" |
| (selectionChange)="onUpdate($event)" |
| [type]="'users'" |
| [items]="filterConfiguration.users" |
| [model]="filterAuditData.users" |
| ></multi-select-dropdown> |
| </th> |
| </ng-container> |
| |
| <ng-container matColumnDef="project-filter"> |
| <th mat-header-cell *matHeaderCellDef class="filter-row-item"> |
| <multi-select-dropdown |
| *ngIf="filterConfiguration" |
| (selectionChange)="onUpdate($event)" |
| [type]="'projects'" |
| [items]="filterConfiguration.projects" |
| [model]="filterAuditData.projects" |
| ></multi-select-dropdown> |
| </th> |
| </ng-container> |
| |
| <ng-container matColumnDef="resource-filter"> |
| <th mat-header-cell *matHeaderCellDef class="filter-row-item"> |
| <multi-select-dropdown |
| class="audit-resources" |
| *ngIf="filterConfiguration" |
| (selectionChange)="onUpdate($event)" |
| [type]="'resources'" |
| [items]="filterConfiguration.resources" |
| [model]="filterAuditData.resources" |
| ></multi-select-dropdown> |
| </th> |
| </ng-container> |
| |
| <ng-container matColumnDef="resource-type-filter"> |
| <th mat-header-cell *matHeaderCellDef class="filter-row-item"> |
| <multi-select-dropdown |
| *ngIf="filterConfiguration" |
| (selectionChange)="onUpdate($event)" |
| [type]="'resource_types'" |
| [items]="filterConfiguration.resource_types" |
| [model]="filterAuditData.resource_types" |
| ></multi-select-dropdown> |
| </th> |
| </ng-container> |
| |
| <ng-container matColumnDef="actions-filter"> |
| <th mat-header-cell *matHeaderCellDef class="filter-row-item"></th> |
| </ng-container> |
| |
| <ng-container matColumnDef="date-filter"> |
| <th mat-header-cell *matHeaderCellDef class="filter-row-item"></th> |
| </ng-container> |
| |
| <ng-container matColumnDef="filter-buttons" stickyEnd> |
| <th mat-header-cell *matHeaderCellDef class="filter-row-item"> |
| <div class="actions audit-actions"> |
| <button |
| mat-icon-button |
| class="btn reset" |
| (click)="resetFilterConfigurations()" |
| [disabled]="!isFilterSelected" |
| > |
| <i class="material-icons">close</i> |
| </button> |
| |
| <button |
| mat-icon-button |
| class="btn apply" |
| (click)="buildAuditGrid(true)" |
| [disabled]="isNavigationDisabled" |
| > |
| <i class="material-icons">done</i> |
| </button> |
| </div> |
| </th> |
| </ng-container> |
| |
| <ng-container matColumnDef="placeholder"> |
| <td mat-footer-cell *matFooterCellDef colspan="7" class="info"> |
| <span *ngIf="!filterConfiguration.users?.length;else noMatch">No data available</span> |
| <ng-template #noMatch> |
| <span>No matches found</span> |
| </ng-template> |
| </td> |
| </ng-container> |
| |
| <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr> |
| |
| <tr |
| [hidden]="!collapseFilterRow" |
| mat-header-row |
| *matHeaderRowDef="displayedFilterColumns; sticky: true" |
| class="filter-row" |
| ></tr> |
| <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="content-row"></tr> |
| <tr [hidden]="!auditData?.length" mat-footer-row *matFooterRowDef="displayedColumns"></tr> |
| <tr [hidden]="auditData?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr> |
| </table> |
| </section> |