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/06/06 15:22:45 UTC
[incubator-dlab] 03/04: [DLAB-649]: extend billing data grid;
sticky elementing
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch feature/projects
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 48500741e91f1258be680e6670ae81b66da03820
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Thu Jun 6 17:03:30 2019 +0300
[DLAB-649]: extend billing data grid; sticky elementing
---
.../resources/webapp/src/app/core/util/patterns.ts | 2 +-
.../reporting-grid/reporting-grid.component.html | 169 +++++++++++++++++++--
.../reporting-grid/reporting-grid.component.scss | 14 +-
.../reporting-grid/reporting-grid.component.ts | 4 +-
4 files changed, 170 insertions(+), 19 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
index c82bb55..65996ea 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
@@ -20,5 +20,5 @@
export const PATTERNS = {
namePattern: '[-_a-zA-Z0-9]*[_-]*[a-zA-Z0-9]+',
delimitersRegex: '/[-_]?/g',
- url: '[-_a-zA-Z0-9/:.#]*[_-]*[a-zA-Z0-9]+'
+ url: '[-_a-zA-Z0-9/:.#!*();:@&=+$,/?#[]]*[_-]*[a-zA-Z0-9]+'
}
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 b468f1e..7b7336f 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
@@ -17,15 +17,16 @@
~ under the License.
-->
-<table class="dashboard_table reporting">
+<!-- <table class="dashboard_table reporting">
<tr>
- <th *ngFor="let column of filteringColumns"
- ngClass="{{column.className || ''}}"
- [hidden]="column.role && !full_report">{{ column.title }}
+ <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>
+ <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>
@@ -33,22 +34,30 @@
<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>
+ <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" />
+ <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>
+ <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>
+ <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>
+ <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>
+ <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">
@@ -69,7 +78,8 @@
<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 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>
@@ -79,11 +89,140 @@
<td>{{ line[DICTIONARY.billing.cost] }} {{ line[DICTIONARY.billing.currencyCode] }}</td>
</tr>
</ng-template>
-</table>
+</table> -->
+<!-- *ngIf="full_report" -->
+
+<section class="table-wrapper">
+ <table mat-table [dataSource]="reportData?.lines" class="data-grid reporting mat-elevation-z6">
+
+ <ng-container matColumnDef="name" sticky>
+ <th mat-header-cell *matHeaderCellDef class="env_name"> Environment name </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>
+ <td mat-footer-cell *matFooterCellDef></td>
+ </ng-container>
+
+ <ng-container matColumnDef="type">
+ <th mat-header-cell *matHeaderCellDef class="th_type"> Resource Type </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>
+ <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></td>
+ </ng-container>
+
+ <ng-container matColumnDef="shape">
+ <th mat-header-cell *matHeaderCellDef class="th_shape"> {{ DICTIONARY.instance_size}} </th>
+ <td mat-cell *matCellDef="let element">
+ <span [outerHTML]="element[DICTIONARY.billing.instance_size] | lineBreak"></span>
+ </td>
+ <td mat-footer-cell *matFooterCellDef></td>
+ </ng-container>
+
+ <ng-container matColumnDef="service">
+ <th mat-header-cell *matHeaderCellDef class="service">{{ DICTIONARY.service}}</th>
+ <td mat-cell *matCellDef="let element">
+ {{ element[DICTIONARY.billing.service] }}
+ <span *ngIf="element.resource_type">({{ element.resource_type }})</span>
+ </td>
+ <td mat-footer-cell *matFooterCellDef></td>
+ </ng-container>
+
+ <ng-container matColumnDef="charge" stickyEnd>
+ <th mat-header-cell *matHeaderCellDef class="th_charges"> Service Charges </th>
+
+ <td mat-cell *matCellDef="let element">
+ {{ element[DICTIONARY.billing.cost] }} {{ element[DICTIONARY.billing.currencyCode] }}
+ </td>
+ <td mat-footer-cell *matFooterCellDef>{{ reportData[DICTIONARY.billing.costTotal] }}
+ {{ reportData[DICTIONARY.billing.currencyCode] }}</td>
+ </ng-container>
+
+ <!-- ----------------FILTER -->
+ <ng-container matColumnDef="name-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef>
+ <input type="text" placeholder="Filter by environment name" class="form-control filter-field"
+ [value]="filteredReportData.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="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]="[DICTIONARY.billing.instance_size]"
+ [items]="filterConfiguration[DICTIONARY.billing.instance_size]"
+ [model]="filteredReportData[DICTIONARY.billing.instance_size]"></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]="[DICTIONARY.billing.service_filter_key]"
+ [items]="filterConfiguration[DICTIONARY.billing.service_filter_key]"
+ [model]="filteredReportData[DICTIONARY.billing.service_filter_key]"></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>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+ <tr mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true" class="filter-row"></tr>
+
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+ <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
+ </table>
+</section>
+<!--
+
+
+<footer *ngIf="data">
+Total {{ reportData[DICTIONARY.billing.costTotal] }} {{ reportData[DICTIONARY.billing.currencyCode] }}
+</footer>
+
<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>
+</div> -->
\ No newline at end of file
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 ed7a79f..1c2ced0 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
@@ -17,7 +17,14 @@
* under the License.
*/
-.dashboard_table.reporting {
+ .table-wrapper {
+ width: 100%;
+ }
+
+.reporting {
+ width: 100%;
+ min-width: 1100px;
+ overflow: auto;
tr {
th {
font-size: 11px;
@@ -26,6 +33,9 @@
font-size: 13px;
}
&.filter-row {
+ th {
+ padding: 5px;
+ }
.filter-field {
font-size: 13px;
}
@@ -45,7 +55,7 @@
.th_type {
width: 8%;
}
- .th_rstatus {
+ .th_status {
width: 8%;
}
.th_charges {
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.ts
index f4294a6..0aed840 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.ts
@@ -33,12 +33,14 @@ export class ReportingGridComponent implements OnInit {
filterConfiguration: ReportingConfigModel;
filteredReportData: ReportingConfigModel = new ReportingConfigModel([], [], [], [], [], '', '', '');
collapseFilterRow: boolean = false;
- reportData: ReportingConfigModel[];
+ reportData: any;
isFiltered: boolean = false;
full_report: boolean = false;
@Output() filterReport: EventEmitter<{}> = new EventEmitter();
@Output() resetRangePicker: EventEmitter<boolean> = new EventEmitter();
+ displayedColumns: string[] = ['name', 'user', 'type', 'status', 'shape', 'service', 'charge'];
+ displayedFilterColumns: string[] = ['name-filter', 'user-filter', 'type-filter', 'status-filter', 'shape-filter', 'service-filter', 'actions'];
public filteringColumns: Array<any> = [
{ title: 'User', name: 'user', className: 'th_user', filtering: true, role: 'admin'},
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org