You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by yt...@apache.org on 2021/08/31 09:09:16 UTC
[incubator-datalab] 01/01: [DATALAB-2477] fixed bug with dropdown
values on billing and management pages
This is an automated email from the ASF dual-hosted git repository.
ytykhun pushed a commit to branch DATALAB-2477
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 23e5a3e55b7e1208ce64dd9efb2c05a9f41fc7df
Author: Yurii Tykhun <ty...@gmail.com>
AuthorDate: Tue Aug 31 12:08:55 2021 +0300
[DATALAB-2477] fixed bug with dropdown values on billing and management pages
---
.../management-grid/management-grid.component.html | 57 +++++++++++-----------
.../management-grid/management-grid.component.scss | 51 +++++++++++++++++--
.../management-grid/management-grid.component.ts | 4 +-
.../reporting-grid/reporting-grid.component.html | 11 +++--
.../reporting-grid/reporting-grid.component.scss | 11 +++++
5 files changed, 97 insertions(+), 37 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
index 54d9b2c..9eefde9 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
@@ -18,8 +18,33 @@
-->
<div class="managment-wrapper scrolling" #pageWrapper (scroll)="scrollTable($event)" (resize)="onResize($event)">
<div class="ani scrolling scroll-wrapper" #wrapper (scroll)="scrollTable($event)">
+ <div
+ class="nav-buttons"
+ [ngStyle]="{'width.px': userAgentIndex === -1 ? tableWrapperWidth - 3 : tableWrapperWidth - 7 }"
+ [ngClass]="{'border': tableEl['offsetHeight'] < tableWrapper.offsetHeight - 48}"
+ [hidden]="!(tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0)"
+ >
+ <div class="button-container">
+ <button
+ mat-mini-fab aria-label="Scroll left"
+ (click)="sctollTo('left')"
+ [ngClass]="{'not-allowed': wrapper.scrollLeft === 0 }"
+ >
+ <mat-icon [ngClass]="{'highlight': wrapper.scrollLeft !== 0 }">keyboard_arrow_left</mat-icon>
+ </button>
+ </div>
+ <div class="button-container" [ngClass]="{'not-allowed': checkMaxRight()}">
+ <button
+ mat-mini-fab aria-label="Scroll right"
+ (click)="sctollTo('right')"
+ [ngClass]="{'not-allowed': !(isMaxRight | async)}"
+ >
+ <mat-icon [ngClass]="{'highlight': (isMaxRight | async) || false}">keyboard_arrow_right</mat-icon>
+ </button>
+ </div>
+ </div>
<div class="wrapper" #tableWrapper >
- <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6" #table >
+ <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management" #table >
<ng-container matColumnDef="checkbox">
<th mat-header-cell *matHeaderCellDef class="checkbox label-header">
<datalab-checkbox
@@ -43,6 +68,7 @@
&& !clustersInProgress(element.resources)"
>
<datalab-checkbox
+ class="body-checkbox"
[checked]="element.isSelected"
(toggleSelection)="toggleActionForAll(element)"
></datalab-checkbox>
@@ -413,7 +439,7 @@
</ng-container>
<ng-container matColumnDef="placeholder">
- <td mat-footer-cell *matFooterCellDef colspan="8">
+ <td mat-footer-cell *matFooterCellDef colspan="8" class="no-border">
<div
class="info"
*ngIf="(!allFilteredEnvironmentData) && !filtering || (allFilteredEnvironmentData?.length == 0) && !filtering"
@@ -430,32 +456,7 @@
*matFooterCellDef
colspan="9"
class="buttons-wrap"
- >
- <div
- class="buttons"
- [ngStyle]="{'width.px': tableWrapperWidth }"
- [hidden]="!tableWrapperWidth"
- >
- <div class="button-container">
- <button
- mat-mini-fab aria-label="Scroll left"
- (click)="sctollTo('left')"
- [ngClass]="{'not-allowed': wrapper.scrollLeft === 0 }"
- >
- <mat-icon [ngClass]="{'highlight': wrapper.scrollLeft !== 0 }">keyboard_arrow_left</mat-icon>
- </button>
- </div>
- <div class="button-container" [ngClass]="{'not-allowed': checkMaxRight()}">
- <button
- mat-mini-fab aria-label="Scroll right"
- (click)="sctollTo('right')"
- [ngClass]="{'not-allowed': !(isMaxRight | async)}"
- >
- <mat-icon [ngClass]="{'highlight': (isMaxRight | async) || false}">keyboard_arrow_right</mat-icon>
- </button>
- </div>
- </div>
- </td>
+ ></td>
</ng-container>
<tr
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
index 888cfbb..781e80c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
@@ -25,26 +25,66 @@
padding-left: 15px;
padding-right: 15px;
scroll-behavior: smooth;
- overflow: auto;
.scroll-wrapper {
+ height: inherit;
overflow: auto;
scroll-behavior: smooth;
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+
+ .nav-buttons {
+ position: absolute;
+ bottom: 0;
+ z-index: 1013;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ height: 51px;
+ background-color: #ffffff;
+
+ &.border {
+ border-top: 1px solid #e3e5e8;
+ }
+
+ & button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 25px;
+ width: 25px;
+ background-color: #fff;
+ box-shadow: none;
+
+ mat-icon {
+ color: lightgrey;
+
+ &.highlight {
+ color: #35afd5;
+ }
+ }
+ }
+
+ &.border {
+ border-top: 1px solid #e3e5e8;
+ }
+ }
}
.ani {
max-height: calc(100vh - 130px);
- position: relative;
+ background-color: #ffffff;
+
.wrapper {
position: relative;
display: block;
width: 100%;
+ height: inherit;
max-height: calc(100vh - 130px);
overflow: unset;
scroll-behavior: smooth;
+ background-color: #ffffff;
}
}
}
@@ -148,7 +188,7 @@
}
&.mat-column-checkbox {
- z-index: 12 !important;
+ z-index: 1012 !important;
padding-left: 10px;
.ar {
@@ -216,6 +256,7 @@
.buttons-wrap {
padding: 0;
border-top: 1px solid rgba(0, 0, 0, 0.12);
+ border-bottom: none;
transform: translateY(-1px);
}
@@ -287,6 +328,10 @@ table.management {
text-align: center;
}
+ .no-border {
+ border-bottom: none;
+ }
+
.source .resource-wrap {
.resource-actions {
padding-right: 0;
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
index 78ecf28..d762610 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
@@ -66,8 +66,9 @@ export class ManagementGridComponent implements OnInit, AfterViewInit, AfterView
filtering: boolean = false;
collapsedFilterRow: boolean = false;
isMaxRight: Subject<boolean> = new BehaviorSubject(false);
- private tableWrapperWidth: number;
+ tableWrapperWidth: number;
tableEl = {};
+ userAgentIndex: number;
@Input() environmentsHealthStatuses: Array<any>;
@Input() resources: Array<any>;
@@ -110,6 +111,7 @@ export class ManagementGridComponent implements OnInit, AfterViewInit, AfterView
) { }
ngOnInit() {
+ this.userAgentIndex = window.navigator.userAgent.indexOf('Firefox');
this.getEnvironmentData();
}
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 976b189..b522b07 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
@@ -18,16 +18,16 @@
-->
<div
class="billing-page-wrapper scrolling"
- #pageWrapper
- [ngClass]="{'scroll': reportData?.length < 5}"
+ #pageWrapper
(scroll)="scrollTable($event)"
>
<div class="wrapper" #wrapper>
<div
class="nav-buttons"
+ [ngClass]="{'border': tableEl['offsetHeight'] < tableWrapper.offsetHeight - 48}"
[ngStyle]="tableWrapper.scrollHeight === tableWrapper.clientHeight ? {'width': '100%'} :
{'width': userAgentIndex === -1 ? 'calc(100% - 3px)' : 'calc(100% - 8px)'}"
- *ngIf="tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0 && reportData?.length"
+ *ngIf="tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0"
>
<div class="button-container" >
<button
@@ -56,6 +56,7 @@
<div
class="nav-buttons"
+ [ngClass]="{'border': tableEl['offsetHeight'] < tableWrapper.offsetHeight - 48}"
[ngStyle]="tableWrapper.scrollHeight === tableWrapper.clientHeight
? {'width': '100%'}
: {'width': userAgentIndex === -1 ? 'calc(100% - 3px)' : 'calc(100% - 8px)'}"
@@ -382,7 +383,7 @@
mat-header-cell
*matHeaderCellDef
class="filter-row-item index-105"
- [ngClass]="{'right-sticky': reportData?.length < 5}"
+ [ngClass]="{'right-sticky': reportData?.length < 5, 'charges-th': reportData?.length}"
[ngStyle]="{'zIndex': '101 !important'}"
>
<div class="actions">
@@ -408,7 +409,7 @@
</ng-container>
<ng-container matColumnDef="placeholder">
- <td mat-footer-cell *matFooterCellDef colspan="9" class="info">
+ <td mat-footer-cell *matFooterCellDef colspan="8" class="info no-border">
<span *ngIf="!isFilterSelected; else notFound">No data available</span>
<ng-template #notFound>
<span>No matches found</span>
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 e209705..a629196 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
@@ -33,9 +33,11 @@
position: relative;
display: block;
width: 100%;
+ height: inherit;
max-height: calc(100vh - 130px);
overflow: unset;
scroll-behavior: smooth;
+ background-color: #ffffff;
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
&.scroll {
@@ -49,6 +51,7 @@
.wrapper {
position: relative;
+ height: inherit;
.nav-buttons {
position: absolute;
@@ -59,6 +62,10 @@
align-items: center;
height: 48px;
background-color: #ffffff;
+
+ &.border {
+ border-top: 1px solid #e3e5e8;
+ }
.mat-mini-fab {
height: 25px;
@@ -123,6 +130,10 @@
text-align: center;
padding: 40px;
}
+
+ &.no-border {
+ border-bottom: none;
+ }
}
&.filter-row {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org