You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/09/13 08:24:09 UTC
[incubator-dlab] 02/02: [DLAB-987]: exteneded billing filtering;
added expanding
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch DLAB-1056
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 42803a4facde602894be91c9cc1de96a2edb2962
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Fri Sep 13 11:23:57 2019 +0300
[DLAB-987]: exteneded billing filtering; added expanding
---
.../reporting-grid/reporting-grid.component.html | 85 +++++++++++++++++++---
.../reporting-grid/reporting-grid.component.scss | 11 ++-
2 files changed, 83 insertions(+), 13 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html
index 09118de..eada0ff 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html
@@ -21,31 +21,71 @@
<table mat-table [dataSource]="reportData" class="data-grid reporting mat-elevation-z6">
<ng-container matColumnDef="name" sticky>
- <th mat-header-cell *matHeaderCellDef class="env_name"> Environment name </th>
+ <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.billing.dlabId]}} </td>
<td mat-footer-cell *matFooterCellDef> Total </td>
</ng-container>
<ng-container matColumnDef="user">
- <th mat-header-cell *matHeaderCellDef class="th_user"> User </th>
- <td mat-cell *matCellDef="let element"> {{element.user}} </td>
+ <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></td>
</ng-container>
<ng-container matColumnDef="project">
- <th mat-header-cell *matHeaderCellDef class="th_project"> Project </th>
+ <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></td>
</ng-container>
<ng-container matColumnDef="type">
- <th mat-header-cell *matHeaderCellDef class="th_type"> Resource Type </th>
+ <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.billing.resourceType]}} </td>
<td mat-footer-cell *matFooterCellDef></td>
</ng-container>
<ng-container matColumnDef="status">
- <th mat-header-cell *matHeaderCellDef class="th_status"> Status </th>
+ <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>
@@ -55,7 +95,15 @@
</ng-container>
<ng-container matColumnDef="shape">
- <th mat-header-cell *matHeaderCellDef class="th_shape"> {{ DICTIONARY.instance_size}} </th>
+ <th mat-header-cell *matHeaderCellDef class="th_shape">
+ <span class="label"> {{ DICTIONARY.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 [outerHTML]="element[DICTIONARY.billing.instance_size] | lineBreak"></span>
</td>
@@ -63,7 +111,16 @@
</ng-container>
<ng-container matColumnDef="service">
- <th mat-header-cell *matHeaderCellDef class="service">{{ DICTIONARY.service}}</th>
+ <th mat-header-cell *matHeaderCellDef class="service">
+ <span class="label"> {{ DICTIONARY.service}} </span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span
+ *ngIf="filteredReportData[DICTIONARY.billing.instance_size].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[DICTIONARY.billing.service] }}
<span *ngIf="element.resource_type">({{ element.resource_type }})</span>
@@ -72,7 +129,9 @@
</ng-container>
<ng-container matColumnDef="charge" stickyEnd>
- <th mat-header-cell *matHeaderCellDef class="th_charges"> Service Charges </th>
+ <th mat-header-cell *matHeaderCellDef class="th_charges">
+ <span class="label"> Service Charges </span>
+ </th>
<td mat-cell *matCellDef="let element">
{{ element[DICTIONARY.billing.cost] }} {{ element[DICTIONARY.billing.currencyCode] }}
@@ -98,7 +157,8 @@
</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">
@@ -149,9 +209,10 @@
</ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
- <tr mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true" class="filter-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="DATA"></tr>
<tr [hidden]="!reportData?.length" mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
index 65d60ee..29fb1b2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
@@ -65,7 +65,7 @@
}
.th_type {
- width: 8%;
+ width: 12%;
}
.th_status {
@@ -82,6 +82,15 @@
text-align: right;
}
+ .header-row {
+ .label {
+ display: inline-block;
+ padding-top: 10px;
+ vertical-align: super !important;
+ padding-left: 5px;
+ }
+ }
+
.filter-row {
.actions {
text-align: right;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org