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:46 UTC
[incubator-dlab] branch DLAB-1770 created (now 3e626dd)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a change to branch DLAB-1770
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.
at 3e626dd [DLAB-1770]: Fixed set of minor improvements for 'Billing report' page
This branch includes the following new commits:
new 3e626dd [DLAB-1770]: Fixed set of minor improvements for 'Billing report' page
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org
[incubator-dlab] 01/01: [DLAB-1770]: Fixed set of minor
improvements for 'Billing report' page
Posted by dg...@apache.org.
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