| <!-- |
| ~ 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="table-wrapper"> |
| <table mat-table [dataSource]="reportData" class="data-grid reporting mat-elevation-z6"> |
| |
| <ng-container matColumnDef="name"> |
| <th mat-header-cell *matHeaderCellDef class="env_name"> |
| <div class="label"><span class="text"> Environment name</span></div> |
| <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span *ngIf="filteredReportData.dlab_id.length > 0; else dlab_id_filtered">filter_list</span> |
| <ng-template #dlab_id_filtered>more_vert</ng-template> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element"> {{element.dlabId}} </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="user"> |
| <th mat-header-cell *matHeaderCellDef class="th_user"> |
| <div class="sort"> |
| <div class="sort-arrow up" (click)="sortBy('user', 'down')" [ngClass]="{'active': !!this.active['userdown']}"></div> |
| <div class="sort-arrow down" (click)="sortBy('user', 'up')" [ngClass]="{'active': !!this.active['userup']}"></div> |
| </div> |
| <div class="label"> |
| <span class="text"> User </span> |
| </div> |
| <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span *ngIf="filteredReportData.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"> {{element.user}} </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="project"> |
| <th mat-header-cell *matHeaderCellDef class="th_project"> |
| <div class="sort"> |
| <div class="sort-arrow up" (click)="sortBy('project', 'down')" [ngClass]="{'active': !!this.active['projectdown']}"></div> |
| <div class="sort-arrow down" (click)="sortBy('project', 'up')" [ngClass]="{'active': !!this.active['projectup']}"></div> |
| </div> |
| <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="filteredReportData.projects.length > 0; else project_filtered">filter_list</span> |
| <ng-template #project_filtered>more_vert</ng-template> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element"> {{element.project}} </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="type"> |
| <th mat-header-cell *matHeaderCellDef class="th_type"> |
| <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="filteredReportData.resource_type.length > 0; else type_filtered">filter_list</span> |
| <ng-template #type_filtered>more_vert</ng-template> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element"> {{element.resource_type | titlecase}} </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="status"> |
| <th mat-header-cell *matHeaderCellDef class="th_status"> |
| <div class="label"><span class="text"> Status</span> </div> |
| <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span *ngIf="filteredReportData.statuses.length > 0; else status_filtered">filter_list</span> |
| <ng-template #status_filtered>more_vert</ng-template> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element"> |
| <span class="status" ngClass="{{ element.status.toLowerCase() || '' }}" |
| *ngIf="element.status">{{ element.status.toLowerCase() }}</span> |
| <span *ngIf="!element.status">N/A</span> |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="shape"> |
| <th mat-header-cell *matHeaderCellDef class="th_shape"> |
| <div class="label"><span class="text"> Instance size</span></div> |
| <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span |
| *ngIf="filteredReportData['shapes'].length > 0; else shape_filtered">filter_list</span> |
| <ng-template #shape_filtered>more_vert</ng-template> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element"> |
| <span>{{element.shape}}</span> |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="service"> |
| <th mat-header-cell *matHeaderCellDef class="service"> |
| <div class="label"><span class="text"> Product</span> </div> |
| <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span |
| *ngIf="filteredReportData['shapes'].length > 0; else service_filtered">filter_list</span> |
| <ng-template #service_filtered>more_vert</ng-template> |
| </i> |
| </button> |
| </th> |
| <td mat-cell *matCellDef="let element"> |
| {{ element.product }} |
| <!-- <span *ngIf="element.product">{{ element.product }}</span>--> |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="charge" stickyEnd> |
| <th mat-header-cell *matHeaderCellDef class="th_charges"> |
| <div class="label"> |
| <div class="sort"> |
| <div class="sort-arrow up" (click)="sortBy('cost', 'down')" [ngClass]="{'active': !!this.active['costdown']}"></div> |
| <div class="sort-arrow down" (click)="sortBy('cost', 'up')" [ngClass]="{'active': !!this.active['costup']}"></div> |
| </div> |
| <span class="text">Service Charges</span> |
| </div> |
| </th> |
| |
| <td mat-cell *matCellDef="let element"> |
| {{ element.cost }} {{ element['currency'] }} |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer total-cost"> |
| Total <span *ngIf="reportData?.length"> {{ fullReport['total_cost'] }} |
| {{ fullReport['currency'] }}</span> |
| </td> |
| </ng-container> |
| |
| <!-- ----------------FILTER --> |
| <ng-container matColumnDef="name-filter"> |
| <th mat-header-cell *matHeaderCellDef> |
| <input #nameFilter type="text" placeholder="Filter by environment name" class="form-control filter-field" |
| [value]="filtered?.dlab_id" (input)="filteredReportData.dlab_id = $event.target['value']" /> |
| </th> |
| </ng-container> |
| <ng-container matColumnDef="user-filter"> |
| <th mat-header-cell *matHeaderCellDef> |
| <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'user'" |
| [items]="filterConfiguration.users" [model]="filteredReportData.users"></multi-select-dropdown> |
| </th> |
| </ng-container> |
| <ng-container matColumnDef="project-filter"> |
| <th mat-header-cell *matHeaderCellDef> |
| <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'project'" |
| [items]="filterConfiguration.projects" [model]="filteredReportData.projects"></multi-select-dropdown> |
| </th> |
| </ng-container> |
| <ng-container matColumnDef="type-filter"> |
| <th mat-header-cell *matHeaderCellDef> |
| <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="['resource_type']" |
| [items]="filterConfiguration.resource_type" [model]="filteredReportData.resource_type"> |
| </multi-select-dropdown> |
| </th> |
| </ng-container> |
| <ng-container matColumnDef="status-filter"> |
| <th mat-header-cell *matHeaderCellDef> |
| <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'status'" |
| [items]="filterConfiguration.statuses" [model]="filteredReportData.statuses"></multi-select-dropdown> |
| </th> |
| </ng-container> |
| <ng-container matColumnDef="shape-filter"> |
| <th mat-header-cell *matHeaderCellDef> |
| <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" |
| [type]="'shapes'" [items]="filterConfiguration['shapes']" |
| [model]="filteredReportData['shapes']"></multi-select-dropdown> |
| </th> |
| </ng-container> |
| <ng-container matColumnDef="service-filter"> |
| <th mat-header-cell *matHeaderCellDef> |
| <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" |
| [type]="['products']" |
| [items]="filterConfiguration['products']" |
| [model]="filteredReportData['products']"></multi-select-dropdown> |
| </th> |
| </ng-container> |
| <ng-container matColumnDef="actions" stickyEnd> |
| <th mat-header-cell *matHeaderCellDef> |
| <div class="actions"> |
| <button mat-icon-button class="btn reset" (click)="resetFiltering(); isFiltered = !isFiltered"> |
| <i class="material-icons">close</i> |
| </button> |
| |
| <button mat-icon-button class="btn apply" (click)="filter_btnClick()"> |
| <i class="material-icons">done</i> |
| </button> |
| </div> |
| </th> |
| </ng-container> |
| <ng-container matColumnDef="placeholder"> |
| <td mat-footer-cell *matFooterCellDef colspan="7" class="info"> |
| No data available |
| </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]="!reportData?.length" mat-footer-row *matFooterRowDef="displayedColumns; sticky: true" |
| class="header-row"></tr> |
| <tr [hidden]="reportData?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr> |
| </table> |
| </section> |