| <!-- |
| ~ 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. |
| --> |
| |
| <table class="dashboard_table reporting"> |
| <tr> |
| <th *ngFor="let column of filteringColumns" |
| ngClass="{{column.className || ''}}" |
| [hidden]="column.role && !full_report">{{ column.title }} |
| <button mat-icon-button *ngIf="column.filtering" aria-label="More" class="ar" (click)="toggleFilterRow()"> |
| <i class="material-icons"> |
| <span *ngIf="isFiltered && filteredReportData[column.name].length > 0 && !collapseFilterRow">filter_list</span> |
| <span [hidden]="isFiltered && filteredReportData[column.name].length > 0 && !collapseFilterRow">more_vert</span> |
| </i> |
| </button> |
| </th> |
| </tr> |
| |
| <tr *ngIf="collapseFilterRow" class="filter-row"> |
| <td *ngIf="full_report"> |
| <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'user'" [items]="filterConfiguration.user" [model]="filteredReportData.user"></multi-select-dropdown> |
| </td> |
| <td> |
| <input type="text" placeholder="Filter by environment name" class="form-control filter-field" [value]="filteredReportData.dlab_id" (input)="filteredReportData.dlab_id = $event.target.value" /> |
| </td> |
| <td> |
| <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resource_type'" [items]="filterConfiguration.resource_type" [model]="filteredReportData.resource_type"></multi-select-dropdown> |
| </td> |
| <td> |
| <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'status'" [items]="filterConfiguration.status" [model]="filteredReportData.status"></multi-select-dropdown> |
| </td> |
| <td> |
| <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="[DICTIONARY.billing.instance_size]" [items]="filterConfiguration[DICTIONARY.billing.instance_size]" [model]="filteredReportData[DICTIONARY.billing.instance_size]"></multi-select-dropdown> |
| </td> |
| <td> |
| <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="[DICTIONARY.billing.service_filter_key]" [items]="filterConfiguration[DICTIONARY.billing.service_filter_key]" [model]="filteredReportData[DICTIONARY.billing.service_filter_key]"></multi-select-dropdown> |
| </td> |
| <td> |
| <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> |
| </td> |
| </tr> |
| |
| <ng-template [ngIf]="reportData"> |
| <tr *ngFor="let line of reportData" class="dashboard_table_body"> |
| <td class="user-field" *ngIf="full_report">{{ line.user }}</td> |
| <td class="env_name">{{ line[DICTIONARY.billing.dlabId] }}</td> |
| <td>{{ line[DICTIONARY.billing.resourceType] }}</td> |
| <td> |
| <span class="status" ngClass="{{ line.status.toLowerCase() || '' }}" *ngIf="line.status">{{ line.status.toLowerCase() }}</span> |
| <span *ngIf="!line.status">N/A</span> |
| </td> |
| <td><span [outerHTML]="line[DICTIONARY.billing.instance_size] | lineBreak"></span></td> |
| <td>{{ line[DICTIONARY.billing.service] }} |
| <span *ngIf="line.resource_type">({{ line.resource_type }})</span> |
| </td> |
| <td>{{ line[DICTIONARY.billing.cost] }} {{ line[DICTIONARY.billing.currencyCode] }}</td> |
| </tr> |
| </ng-template> |
| </table> |
| |
| <div *ngIf="!reportData" class="message_block message info"> |
| <span>To start working, please, create new environment</span> |
| </div> |
| <div *ngIf="reportData && reportData.length == 0" class="message_block message info"> |
| <span>No matches found</span> |
| </div> |