You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/06/01 06:27:47 UTC
[incubator-dlab] 01/01: [DLAB-1770]: Fixed set of minor
improvements for 'Billing report' page
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1770
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 3e626dd7d5470dc28df60c937ca40f76fff98371
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Mon Jun 1 09:27:35 2020 +0300
[DLAB-1770]: Fixed set of minor improvements for 'Billing report' page
---
.../reporting-grid/reporting-grid.component.html | 50 +++++++++++++++++++---
.../reporting-grid/reporting-grid.component.scss | 3 ++
.../reporting-grid/reporting-grid.component.ts | 6 +--
.../src/app/reporting/reporting.component.ts | 10 ++++-
.../webapp/src/dictionary/global.dictionary.ts | 6 ++-
5 files changed, 64 insertions(+), 11 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 537cbb5..aae61ef 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
@@ -20,9 +20,9 @@
<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 label-header">
- <div class="label"><span class="text"> Environment name</span></div>
+ <ng-container matColumnDef="name" sticky>
+ <th mat-header-cell *matHeaderCellDef class="env_name label-header sticky-name" >
+ <div class="label"><span class="text"> Resource name</span></div>
<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>
@@ -72,6 +72,34 @@
<td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
+ <ng-container matColumnDef="endpoint">
+ <th mat-header-cell *matHeaderCellDef class="th_type label-header">
+ <div class="label"><span class="text"> Endpoint</span> </div>
+ <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.endpoint | titlecase}} </td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
+ </ng-container>
+
+ <ng-container matColumnDef="cloud">
+ <th mat-header-cell *matHeaderCellDef class="th_type label-header">
+ <div class="label"><span class="text"> Cloud</span> </div>
+ <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.cloud | titlecase}} </td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
+ </ng-container>
+
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef class="th_type label-header">
<div class="label"><span class="text"> Resource Type</span> </div>
@@ -162,8 +190,8 @@
</ng-container>
<!-- ----------------FILTER -->
- <ng-container matColumnDef="name-filter">
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+ <ng-container matColumnDef="name-filter" [sticky]="true">
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item sticky-name">
<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>
@@ -180,6 +208,18 @@
[items]="filterConfiguration.projects" [model]="filteredReportData.projects"></multi-select-dropdown>
</th>
</ng-container>
+ <ng-container matColumnDef="endpoint-filter">
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+ <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'endpoints'"
+ [items]="filterConfiguration.endpoints" [model]="filteredReportData.endpoints"></multi-select-dropdown>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="cloud-filter">
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+ <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'clouds'"
+ [items]="filterConfiguration.clouds" [model]="filteredReportData.clouds"></multi-select-dropdown>
+ </th>
+ </ng-container>
<ng-container matColumnDef="type-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="['resource_type']"
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 9c4f819..7433501 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
@@ -34,6 +34,9 @@
tr {
th {
+ &.sticky-name{
+ z-index: 3 !important;
+ }
padding-right: 5px;
z-index: 2 !important;
&.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 d4e0076..6f7673c 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
@@ -30,7 +30,7 @@ import { ReportingConfigModel } from '../../../dictionary/global.dictionary';
export class ReportingGridComponent implements OnInit {
filterConfiguration: ReportingConfigModel;
- filteredReportData: ReportingConfigModel = new ReportingConfigModel([], [], [], [], [], '', '', '', []);
+ filteredReportData: ReportingConfigModel = new ReportingConfigModel([], [], [], [], [], [], [], '', '', '', []);
collapseFilterRow: boolean = true;
reportData: Array<any> = [];
fullReport: Array<any>;
@@ -41,8 +41,8 @@ export class ReportingGridComponent implements OnInit {
@Output() filterReport: EventEmitter<{}> = new EventEmitter();
@Output() resetRangePicker: EventEmitter<boolean> = new EventEmitter();
- displayedColumns: string[] = ['name', 'user', 'project', 'type', 'status', 'shape', 'service', 'charge'];
- displayedFilterColumns: string[] = ['name-filter', 'user-filter', 'project-filter', 'type-filter', 'status-filter', 'shape-filter', 'service-filter', 'actions'];
+ displayedColumns: string[] = ['name', 'user', 'project', 'endpoint', 'cloud', 'type', 'status', 'shape', 'service', 'charge'];
+ displayedFilterColumns: string[] = ['name-filter', 'user-filter', 'project-filter', 'endpoint-filter', 'cloud-filter', 'type-filter', 'status-filter', 'shape-filter', 'service-filter', 'actions'];
filtered: any;
ngOnInit() {}
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
index 1692ef1..68074f4 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
@@ -140,7 +140,7 @@ export class ReportingComponent implements OnInit, OnDestroy {
}
getDefaultFilterConfiguration(data): void {
- const users = [], types = [], shapes = [], services = [], statuses = [], projects = [];
+ const users = [], endpoints = [], clouds = [], types = [], shapes = [], services = [], statuses = [], projects = [];
data.report_lines.forEach((item: any) => {
if (item.user && users.indexOf(item.user) === -1)
@@ -149,6 +149,12 @@ export class ReportingComponent implements OnInit, OnDestroy {
if (item.status && statuses.indexOf(item.status.toLowerCase()) === -1)
statuses.push(item.status.toLowerCase());
+ if (item.endpoints && endpoints.indexOf(item.endpoints.toLowerCase()) === -1)
+ statuses.push(item.endpoints.toLowerCase());
+
+ if (item.clouds && clouds.indexOf(item.clouds.toLowerCase()) === -1)
+ clouds.push(item.clouds.toLowerCase());
+
if (item.project && projects.indexOf(item.project) === -1)
projects.push(item.project);
@@ -178,7 +184,7 @@ export class ReportingComponent implements OnInit, OnDestroy {
});
if (!this.reportingGrid.filterConfiguration || !localStorage.getItem('report_config')) {
- this.filterConfiguration = new ReportingConfigModel(users, services, types, statuses, shapes, '', '', '', projects);
+ this.filterConfiguration = new ReportingConfigModel(users, services, endpoints, clouds, types, statuses, shapes, '', '', '', projects);
this.reportingGrid.setConfiguration(this.filterConfiguration);
localStorage.setItem('report_config', JSON.stringify(this.filterConfiguration));
}
diff --git a/services/self-service/src/main/resources/webapp/src/dictionary/global.dictionary.ts b/services/self-service/src/main/resources/webapp/src/dictionary/global.dictionary.ts
index 26fe456..36e3f7a 100644
--- a/services/self-service/src/main/resources/webapp/src/dictionary/global.dictionary.ts
+++ b/services/self-service/src/main/resources/webapp/src/dictionary/global.dictionary.ts
@@ -32,13 +32,15 @@ export const DICTIONARY = Object.freeze({
export class ReportingConfigModel {
static getDefault(): ReportingConfigModel {
- return new ReportingConfigModel([], [], [], [], [], '', '', '', []);
+ return new ReportingConfigModel([], [], [], [], [], [], [], '', '', '', []);
}
constructor(
public users: Array<string>,
public products: Array<string>,
public resource_type: Array<string>,
+ public endpoints: Array<string>,
+ public clouds: Array<string>,
public statuses: Array<string>,
public shapes: Array<string>,
public date_start: string,
@@ -51,6 +53,8 @@ export class ReportingConfigModel {
this.users = [];
this.products = [];
this.resource_type = [];
+ this.endpoints = [];
+ this.clouds = [];
this.statuses = [];
this.shapes = [];
this.date_start = '';
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org