This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-2006
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 3da4beba25673f7ed45d0a057f975c87b883b3fb
Author: Dmytro_Gnatyshyn <di1...@ukr.net>
AuthorDate: Mon Aug 31 12:57:17 2020 +0300
[DLAB-2006]: [Billing][Audit]:Set of grid issues
---
.../audit/audit-grid/audit-grid.component.html | 2 +-
.../audit/audit-grid/audit-grid.component.scss | 8 +++--
.../reporting-grid/reporting-grid.component.html | 10 +++----
.../reporting-grid/reporting-grid.component.scss | 23 ++++++---------
.../reporting-grid/reporting-grid.component.ts | 34 ++++++++++++++++++----
.../app/reports/reporting/reporting.component.ts | 7 ++++-
.../src/app/shared/navbar/navbar.component.html | 1 -
.../src/app/shared/navbar/navbar.component.ts | 16 ++++++++--
.../webapp/src/assets/styles/_general.scss | 26 +++++++++++++++++
9 files changed, 94 insertions(+), 33 deletions(-)
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
index cfdaa59..2a57cdf 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
@@ -17,7 +17,7 @@
~ under the License.
-->
-<section class="audit-table-wrapper" id="scrolling">
+<section class="audit-table-wrapper" id="scrolling" [ngClass]="{'scroll':
auditData?.length > 6}">
<table mat-table [dataSource]="auditData" class="data-grid audit
mat-elevation-z6">
<ng-container matColumnDef="date">
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
index 493e094..28b26bb 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
@@ -20,9 +20,13 @@
.audit-table-wrapper {
width: 100%;
max-height: calc(100vh - 130px);
- overflow: auto;
+ overflow: visible;
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0
1px 18px 0 rgba(0,0,0,.12);
+ &.scroll{
+ overflow: auto;
+ }
+
.audit {
width: 100%;
min-width: 1100px;
@@ -303,7 +307,7 @@
.table-footer {
position: sticky;
- bottom: 0;
+ bottom: -1px;
background: inherit;
border-top: 1px solid #E0E0E0;
transform: translateY(-1px);
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html
index 1481d53..4464991 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html
@@ -17,8 +17,8 @@
~ under the License.
-->
-<div class="wrapper">
-<section class="table-wrapper" id="scrolling" #tableWrapper
(scroll)="scrollTable($event)">
+<div class="wrapper" >
+<section class="table-wrapper" id="scrolling" #tableWrapper
(scroll)="scrollTable($event)" [ngClass]="{'scroll': reportData?.length > 4}">
<!-- <div class="navigation-btn">-->
<!-- <div class="left">-->
@@ -256,7 +256,7 @@
<i class="material-icons">close</i>
</button>
- <button mat-icon-button class="btn apply"
(click)="filter_btnClick()">
+ <button mat-icon-button class="btn apply"
(click)="filter_btnClick()" [disabled]="isFilterChanged()">
<i class="material-icons">done</i>
</button>
</div>
@@ -279,7 +279,7 @@
<tr [hidden]="reportData?.length" mat-footer-row
*matFooterRowDef="['placeholder']"></tr>
</table>
</section>
- <div class="buttons" *ngIf="isScrollButtonsVisible && reportData?.length">
+ <div class="buttons" *ngIf="tableWrapper.offsetWidth -
tableEl['offsetWidth'] < 0 && reportData?.length">
<div class="button-container">
<button mat-mini-fab aria-label="Scroll left" (click)="sctollTo('left')"
[ngClass]="{'not-allowed': tableWrapper.scrollLeft === 0 }">
<mat-icon [ngClass]="{'highlight': tableWrapper.scrollLeft !==
0}">keyboard_arrow_left</mat-icon>
@@ -290,7 +290,7 @@
(click)="sctollTo('right')"
[ngClass]="{'not-allowed': !isMaxRight }"
>
- <mat-icon [ngClass]="{'highlight': isMaxRight
}">keyboard_arrow_right</mat-icon>
+ <mat-icon [ngClass]="{'highlight': checkMaxRight()
}">keyboard_arrow_right</mat-icon>
</button>
</div>
</div>
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
index 253d354..9f60383 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
@@ -21,24 +21,17 @@
width: 100%;
display: block;
max-height: calc(100vh - 130px);
- overflow: auto;
+ overflow: unset;
position: relative;
scroll-behavior: smooth;
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0
1px 18px 0 rgba(0,0,0,.12);
+ &.scroll{
+ overflow: auto;
+ }
}
.wrapper{
position: relative;
-
- .buttons{
- position: absolute;
- display: flex;
- justify-content: space-around;
- z-index: 1000;
- bottom: 9px;
- left: 0;
- right: 0;
-
button{
background-color: #fff;
box-shadow: none;
@@ -50,7 +43,7 @@
}
}
}
-}
+
.reporting {
@@ -273,7 +266,7 @@
.table-footer{
position: sticky;
- bottom: 0;
+ bottom: -1px;
background: inherit;
border-top: 1px solid #E0E0E0;
transform: translateY(-1px);
@@ -298,7 +291,7 @@
.table-footer{
position: sticky;
- bottom: 0;
+ bottom: -1px;
background: inherit;
border-top: 1px solid #E0E0E0;
transform: translateY(-1px);
@@ -323,6 +316,8 @@
right: 0;
}
+
+
@media screen and (max-width: 1280px) {
.dashboard_table.reporting {
.env_name,
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
index bf25aae..25c7c7c 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
@@ -17,18 +17,32 @@
* under the License.
*/
-import {Component, OnInit, Output, EventEmitter, ViewChild, Input,
HostListener, AfterViewInit, ChangeDetectorRef} from '@angular/core';
+import {
+ Component,
+ OnInit,
+ Output,
+ EventEmitter,
+ ViewChild,
+ Input,
+ HostListener,
+ AfterViewInit,
+ ChangeDetectorRef,
+ ChangeDetectionStrategy
+} from '@angular/core';
import { ReportingConfigModel } from
'../../../../dictionary/global.dictionary';
+import {fromEvent, of} from 'rxjs';
+import {logger} from 'codelyzer/util/logger';
@Component({
selector: 'dlab-reporting-grid',
templateUrl: './reporting-grid.component.html',
styleUrls: ['./reporting-grid.component.scss',
'../../../resources/resources-grid/resources-grid.component.scss'],
+ // changeDetection: ChangeDetectionStrategy.OnPush
})
export class ReportingGridComponent implements OnInit, AfterViewInit {
-
+ tableEl = {};
filterConfiguration: ReportingConfigModel;
// filteredReportData: ReportingConfigModel = new ReportingConfigModel([],
[], [], [], [], '', '', '', []);
collapseFilterRow: boolean = false;
@@ -45,6 +59,7 @@ export class ReportingGridComponent implements OnInit,
AfterViewInit {
@Output() filterReport: EventEmitter<{}> = new EventEmitter();
@Output() resetRangePicker: EventEmitter<boolean> = new EventEmitter();
@Input() filteredReportData: ReportingConfigModel;
+ @Input() previousFilterData: ReportingConfigModel;
@HostListener('window:resize', ['$event'])
onResize(event) {
@@ -66,13 +81,16 @@ export class ReportingGridComponent implements OnInit,
AfterViewInit {
constructor(private changeDetector: ChangeDetectorRef) {
}
- ngOnInit() {}
-
- ngAfterViewInit() {
+ ngOnInit() {
window.setTimeout(() => {
this.isScrollButtonsVisible =
this.tableWrapper.nativeElement.offsetWidth -
this.table._elementRef.nativeElement.offsetWidth < 0;
this.isMaxRight = this.checkMaxRight();
- }, 500);
+ this.tableEl = this.table._elementRef.nativeElement;
+ }, 1000);
+ }
+
+ ngAfterViewInit() {
+
}
onUpdate($event): void {
@@ -157,4 +175,8 @@ export class ReportingGridComponent implements OnInit,
AfterViewInit {
this.tableWrapper.nativeElement.scrollLeft + 2 <=
this.table._elementRef.nativeElement.offsetWidth;
}
+ public isFilterChanged() {
+ return JSON.stringify(this.filteredReportData) ===
JSON.stringify(this.previousFilterData);
+ }
+
}
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.component.ts
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.component.ts
index 060b284..1b90a30 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.component.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.component.ts
@@ -37,7 +37,12 @@ import {ProgressBarService} from
'../../core/services/progress-bar.service';
(setRangeOption)="setRangeOption($event)">
</dlab-toolbar>
<mat-divider></mat-divider>
- <dlab-reporting-grid (filterReport)="filterReport($event)"
(resetRangePicker)="resetRangePicker()" [filteredReportData]="reportData"
></dlab-reporting-grid>
+ <dlab-reporting-grid
+ (filterReport)="filterReport($event)"
+ (resetRangePicker)="resetRangePicker()"
+ [filteredReportData]="reportData"
+ [previousFilterData]="this.cashedFilterData"
+ ></dlab-reporting-grid>
</div>
`,
diff --git
a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
index f24a29f..a192d2b 100644
---
a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
@@ -115,7 +115,6 @@
<!-- <span *ngIf="isExpanded; else endpoint">Cloud Endpoint
API</span>-->
<!-- <ng-template #endpoint>-->
<!-- <span>-->
-<!-- <svg width="30px" height="27px" viewBox="0 0 256 256"
version="1.1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; preserveAspectRatio="xMidYMid">-->
<!-- <g>-->
<!-- <path d="M127.059657,255.996921 C58.8506544,255.526472
-0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628
57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081
256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453
197.934268,256.489189 127.059657,255.996921 Z M127.059657,255.996921
C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303
C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0. [...]
<!-- <path id="swager-bgr" d="M127.184644,238.997327
C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428
C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872
C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251
C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z
M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744
17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106
128.963117,17.0024872 [...]
diff --git
a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
index 6ac010c..dc1a05d 100644
---
a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import { Component, ViewEncapsulation, OnInit, OnDestroy, ViewChild } from
'@angular/core';
+import {Component, ViewEncapsulation, OnInit, OnDestroy, ViewChild,
ChangeDetectorRef, ApplicationRef} from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import {Subscription, timer, interval, Subject} from 'rxjs';
import { ToastrService } from 'ngx-toastr';
@@ -40,6 +40,7 @@ import {
} from '@angular/animations';
import {skip, take} from 'rxjs/operators';
import {ProgressBarService} from '../../core/services/progress-bar.service';
+import {tick} from '@angular/core/testing';
interface Quota {
@@ -103,10 +104,13 @@ export class NavbarComponent implements OnInit, OnDestroy
{
private storage: StorageService,
private dialog: MatDialog,
private progressBarService: ProgressBarService,
+ private changeDetector: ChangeDetectorRef,
+ private applicationRef: ApplicationRef,
) { }
ngOnInit() {
- this.showProgressBarSubscr =
this.progressBarService.showProgressBar.subscribe(isProgressBarVissible =>
this.showProgressBar = isProgressBarVissible);
+ this.showProgressBarSubscr = this.progressBarService.showProgressBar
+ .subscribe(isProgressBarVissible => this.showProgressBar =
isProgressBarVissible);
this.applicationSecurityService.loggedInStatus.subscribe(response => {
this.subscriptions.unsubscribe();
this.subscriptions.closed = false;
@@ -151,6 +155,11 @@ export class NavbarComponent implements OnInit, OnDestroy {
collapse() {
this.isExpanded = !this.isExpanded;
+ const timeout = window.setTimeout(() => {
+ // this.changeDetector.detectChanges();
+ this.applicationRef.tick();
+ window.clearTimeout(timeout);
+ }, 400);
}
public emitQuotes(alert, total_quota?, exideedProjects?, informProjects?):
void {
@@ -181,7 +190,8 @@ export class NavbarComponent implements OnInit, OnDestroy {
if (exceedProjects.length > 0 && informProjects.length === 0)
checkQuotaAlert = 'project_exceed';
if (informProjects.length > 0 && exceedProjects.length > 0)
checkQuotaAlert = 'project_inform_and_exceed';
if (params.totalQuotaUsed >= this.quotesLimit && params.totalQuotaUsed
< 100 && exceedProjects.length > 0) checkQuotaAlert =
'total_quota_and_project_exceed';
- if (params.totalQuotaUsed >= this.quotesLimit && params.totalQuotaUsed
< 100 && informProjects.length > 0 && exceedProjects.length > 0)
checkQuotaAlert = 'total_quota_and_project_inform_and_exceed';
+ if (params.totalQuotaUsed >= this.quotesLimit && params.totalQuotaUsed
< 100
+ && informProjects.length > 0 && exceedProjects.length > 0)
checkQuotaAlert = 'total_quota_and_project_inform_and_exceed';
if (Number(params.totalQuotaUsed) >= 100) checkQuotaAlert =
'total_exceed';
diff --git
a/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
index 9f486fd..9b305f0 100644
---
a/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
+++
b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
@@ -181,3 +181,29 @@ input[type=file]::-webkit-file-upload-button {
.refresh-icon{
color: #35afd5;
}
+
+.buttons {
+ position: absolute;
+ display: flex;
+ justify-content: space-around;
+ z-index: 1000;
+ bottom: 9px;
+ left: 0;
+ right: 0;
+
+ .mat-mini-fab {
+ height: 25px;
+ width: 25px;
+
+ .mat-button-wrapper {
+ padding: 0;
+ line-height: unset;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-top: 2px;
+ }
+ }
+}
+
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@dlab.apache.org
For additional commands, e-mail: commits-h...@dlab.apache.org
