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:15 UTC
[incubator-datalab] branch DATALAB-2477 created (now 23e5a3e)
This is an automated email from the ASF dual-hosted git repository.
ytykhun pushed a change to branch DATALAB-2477
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git.
at 23e5a3e [DATALAB-2477] fixed bug with dropdown values on billing and management pages
This branch includes the following new commits:
new 23e5a3e [DATALAB-2477] fixed bug with dropdown values on billing and management pages
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@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org
[incubator-datalab] 01/01: [DATALAB-2477] fixed bug with dropdown
values on billing and management pages
Posted by yt...@apache.org.
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