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 <andriana_kovalys...@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-unsubscr...@dlab.apache.org For additional commands, e-mail: commits-h...@dlab.apache.org