| <!-- |
| ~ 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"> |
| <span class="label"> Environment name </span> |
| <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[DICTIONARY[PROVIDER].billing.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"> |
| <span class="label"> User </span> |
| <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span *ngIf="filteredReportData.user.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"> |
| <span class="label">Project</span> |
| <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span *ngIf="filteredReportData.project.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"> |
| <span class="label"> Resource Type </span> |
| <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[DICTIONARY[PROVIDER].billing.resourceType]}} </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="status"> |
| <th mat-header-cell *matHeaderCellDef class="th_status"> |
| <span class="label"> Status </span> |
| <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span *ngIf="filteredReportData.status.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"> |
| <span class="label"> Instance size</span> |
| <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span |
| *ngIf="filteredReportData['shape'].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[DICTIONARY[PROVIDER].billing.instance_size]}}</span> |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"></td> |
| </ng-container> |
| |
| <ng-container matColumnDef="service"> |
| <th mat-header-cell *matHeaderCellDef class="service"> |
| <span class="label"> Service </span> |
| <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span |
| *ngIf="filteredReportData['shape'].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"> |
| <span *ngIf="element[DICTIONARY[PROVIDER].billing.service]">{{ element[DICTIONARY[PROVIDER].billing.service] }}</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"> |
| <span class="label"> Service Charges </span> |
| </th> |
| |
| <td mat-cell *matCellDef="let element"> |
| {{ element[DICTIONARY[PROVIDER].billing.cost] }} {{ element[DICTIONARY[PROVIDER].billing.currencyCode] }} |
| </td> |
| <td mat-footer-cell *matFooterCellDef class="table-footer"> |
| Total <span *ngIf="reportData?.length"> {{ fullReport['cost_total'] }} |
| {{ fullReport[DICTIONARY[PROVIDER].billing.currencyCode] }}</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.user" [model]="filteredReportData.user"></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.project" [model]="filteredReportData.project"></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.status" [model]="filteredReportData.status"></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]="'shape'"[items]="filterConfiguration['shape']" |
| [model]="filteredReportData['shape']"></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]="['service']" |
| [items]="filterConfiguration['service']" |
| [model]="filteredReportData['service']"></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 || !PROVIDER" 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> |