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/08/13 12:36:17 UTC
[incubator-dlab] 01/01: [DLAB-1991]: Set of UI changes
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1991
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 9c8d7730e7e74dbef0c06871bc369840b26d25e2
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Thu Aug 13 13:09:35 2020 +0300
[DLAB-1991]: Set of UI changes
---
.../app/administration/roles/roles.component.scss | 2 +-
.../resources/webapp/src/app/core/util/patterns.ts | 2 +-
.../bucket-browser/bucket-browser.component.html | 2 +-
.../bucket-browser/bucket-browser.component.scss | 5 ++++
.../bucket-browser/bucket-data.service.ts | 28 +++++++++++-----------
...mputational-resource-create-dialog.component.ts | 2 +-
.../resources-grid/resources-grid.component.ts | 4 +++-
.../multi-level-select-dropdown.component.scss | 9 +++++--
.../notification-dialog.component.ts | 4 +---
.../src/app/shared/navbar/navbar.component.ts | 21 +++++++++-------
.../webapp/src/assets/styles/_general.scss | 2 +-
.../resources/webapp/src/assets/styles/_theme.scss | 3 +++
12 files changed, 51 insertions(+), 33 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss
index 1167084..1e0084e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss
@@ -96,7 +96,7 @@
display: flex;
align-self: center;
width: 490px;
- height: 36px;
+ height: 32px;
padding-left: 0;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
index 7201423..4408402 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
@@ -25,6 +25,6 @@ export const PATTERNS = {
nodeCountPattern: '^[1-9]\\d*$',
integerRegex: '^[0-9]*$',
folderRegex: /^[a-zA-Z0-9!@$^&*()_+\-=\[\]{};':|,.<>~` ]*$/,
- libVersion: /^[a-zA-Z0-9_\-:/~.+`]*$/,
+ libVersion: /^[a-zA-Z0-9_\-:/~.+]*$/,
fullUrl: /^(http?|ftp|https):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+([.:])(\d{4}|com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*\/$/
};
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
index c1e3be4..3255628 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
@@ -100,7 +100,7 @@
</div>
<p class="path"><span>Bucket path:</span>
<span class="url ellipsis" [ngClass]="{'cursor-not-allow': bucketDataService.emptyFolder}">
- <span *ngFor="let folder of this.objectPath">
+ <span class="path-folder" *ngFor="let folder of this.objectPath">
<span class="url-icon" *ngIf="this.objectPath.indexOf(folder) !== 0"> <i class="material-icons">
chevron_right
</i> </span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
index 2cf6731..3e7927a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
@@ -98,6 +98,10 @@
white-space: nowrap;
display: flex;
+ &-folder{
+ position: relative;
+ }
+
.url{
font-weight: 600;
overflow: hidden;
@@ -119,6 +123,7 @@
transform: translateY(1px);
font-size: 15px;
position: absolute;
+ left: 0;
}
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
index 96f8e2d..95aa4d4 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
@@ -44,24 +44,24 @@ export class BucketDataService {
public refreshBucketdata(bucket, endpoint) {
let backetData = [];
- this.bucketBrowserService.getBucketData(bucket, endpoint).subscribe(v => {
- const copiedData = JSON.parse(JSON.stringify(v));
- this.serverData = v;
+ // this.bucketBrowserService.getBucketData(bucket, endpoint).subscribe(v => {
+ // const copiedData = JSON.parse(JSON.stringify(v));
+ // this.serverData = v;
+ // if (this.emptyFolder) {
+ // copiedData.unshift(this.emptyFolder);
+ // }
+ //
+ // backetData = this.convertToFolderTree(copiedData);
+ // const data = this.buildFileTree({[bucket]: backetData}, 0);
+ // this._bucketData.next(data);
+ // });
if (this.emptyFolder) {
- copiedData.unshift(this.emptyFolder);
+ array.unshift(this.emptyFolder);
}
-
- backetData = this.convertToFolderTree(copiedData);
+ this.serverData = array;
+ backetData = this.convertToFolderTree(array);
const data = this.buildFileTree({[bucket]: backetData}, 0);
this._bucketData.next(data);
- });
- // if (this.emptyFolder) {
- // array.unshift(this.emptyFolder);
- // }
- // this.serverData = array;
- // backetData = this.convertToFolderTree(array);
- // const data = this.buildFileTree({[bucket]: backetData}, 0);
- // this._bucketData.next(data);
}
public buildFileTree(obj: {[key: string]: any}, level: number): TodoItemNode[] {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
index 55bb6e8..10ad5ae 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
@@ -291,7 +291,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
this.selectedImage = this.clusterTypes[0];
}
} else if (this.notebook_instance.template_name.toLowerCase().indexOf('jupyter notebook') !== -1 &&
- this.selectedImage.image === 'docker.dlab-dataengine-service') {
+ this.selectedImage.image === 'docker.dlab-dataengine-service' && this.notebook_instance.cloud_provider !== 'gcp') {
filtered = filterShapes(v => v);
} else {
filtered = filterShapes(key => !(allowed.includes(key)));
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
index e4e5bf3..043d328 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
@@ -326,7 +326,9 @@ export class ResourcesGridComponent implements OnInit {
return list.filter((item: any) => { if (selectedItems.indexOf(item.status) !== -1) return item; });
};
- if (filteredData.length) this.filtering = true;
+ if (filteredData.some((v) => v.exploratory.length)) {
+ this.filtering = true;
+ }
if (config) {
this.activeProject = config.project;
filteredData = filteredData
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
index 038b54c..a6a1148 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
@@ -25,7 +25,7 @@
.dropdown-list button,
.dropdown-multiselect button {
- height: 38px;
+
width: 100%;
background: #fff;
padding-left: 15px;
@@ -66,13 +66,18 @@
.dropdown-multiselect {
button {
- span {
+ span{
color: #999;
font-weight: 300;
display: inline-block;
max-width: 80%;
}
+ span:not(.caret-btn){
+ padding-top: 3px;
+ font-size: 14px;
+ }
+
.selected-items {
color: #4a5c89;
max-width: 477px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts
index 551e3e2..1691198 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts
@@ -57,7 +57,7 @@ import {Endpoint} from '../../../administration/project/project.component';
<span class="strong blue">by a schedule in less than 15 minutes.</span>
</div>
<div class="alert" *ngIf="data.type === 'message'">
- <span [innerHTML]="data.template"></span>
+ <span class='highlight'[innerHTML]="data.template"></span>
</div>
<div *ngIf="data.type === 'confirmation'" class="confirm-dialog">
<p *ngIf="data.template; else label">
@@ -172,8 +172,6 @@ import {Endpoint} from '../../../administration/project/project.component';
.bottom-message{padding-top: 15px;}
.table-header{padding-bottom: 10px;}
.alert{text-align: left; line-height: 22px; padding-bottom: 25px;padding-top: 15px;}
-
-
`]
})
export class NotificationDialogComponent {
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 7046696..75f1272 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
@@ -164,8 +164,13 @@ export class NavbarComponent implements OnInit, OnDestroy {
}
private checkQuoteUsed(): void {
- if (!this.storage.getBillingQuoteUsed( )) {
+ if (!this.storage.getBillingQuoteUsed()) {
+ console.log('storage');
this.healthStatusService.getQuotaStatus().pipe(take(1)).subscribe((params: Quota) => {
+ params = {
+ projectQuotas: {Project2: 90, Project211: 90, Project21: 100, Project12: 100},
+ totalQuotaUsed: 90
+ };
let checkQuotaAlert = '';
const exceedProjects = [], informProjects = [];
Object.keys(params.projectQuotas).forEach(key => {
@@ -237,24 +242,24 @@ export class NavbarComponent implements OnInit, OnDestroy {
total_quota_and_project_inform_and_exceed: `Dear <span class="strong">${this.currentUserName}</span>,<br /><br />
DLab cloud infrastructure usage quota has been used for <span class="strong">${total_quota}%</span>.
Once quota is depleted all your analytical environment will be stopped.<br /><br />
- Quota associated with project(s) <span class="strong">${exideedProjects}</span> has been exceeded. All your analytical environment will be stopped.<br /><br />
- Quota associated with project(s) <span class="strong">${informProjects}</span> has been used over <span class="strong">${this.quotesLimit}%</span>.
+ Quota associated with project(s) <span class="strong">${exideedProjects.join(', ')}</span> has been exceeded. All your analytical environment will be stopped.<br /><br />
+ Quota associated with project(s) <span class="strong">${informProjects.join(', ')}</span> has been used over <span class="strong">${this.quotesLimit}%</span>.
If quota is depleted all your analytical environment will be stopped.<br /><br />
To proceed working with environment you'll have to request increase of quota from DLab administrator. `,
total_quota_and_project_exceed: `Dear <span class="strong">${this.currentUserName}</span>,<br /><br />
DLab cloud infrastructure usage quota has been used for <span class="strong">${total_quota}%</span>.
Once quota is depleted all your analytical environment will be stopped.<br /><br />
- Quota associated with project(s) <span class="strong">${exideedProjects}</span> has been exceeded. All your analytical environment will be stopped.<br /><br />
+ Quota associated with project(s) <span class="strong">${exideedProjects.join(', ')}</span> has been exceeded. All your analytical environment will be stopped.<br /><br />
To proceed working with environment you'll have to request increase of quota from DLab administrator. `,
project_inform_and_exceed: `Dear <span class="strong">${this.currentUserName}</span>,<br /><br />
- DLab cloud infrastructure usage quota associated with project(s) <span class="strong">${exideedProjects}</span> has been exceeded. All your analytical environment will be stopped.<br /><br />
- Quota associated with project(s) <span class="strong">${informProjects}</span> has been used over <span class="strong">${this.quotesLimit}%</span>.
+ DLab cloud infrastructure usage quota associated with project(s) <span class="strong">${exideedProjects.join(', ')}</span> has been exceeded. All your analytical environment will be stopped.<br /><br />
+ Quota associated with project(s) <span class="strong">${informProjects.join(', ')}</span> has been used over <span class="strong">${this.quotesLimit}%</span>.
If quota is depleted all your analytical environment will be stopped.<br /><br />
To proceed working with environment, request increase of project quota from DLab administrator.`,
project_exceed: `Dear <span class="strong">${this.currentUserName}</span>,<br /><br />
- DLab cloud infrastructure usage quota associated with project(s) <span class="strong">${exideedProjects}</span> has been exceeded.
+ DLab cloud infrastructure usage quota associated with project(s) <span class="strong">${exideedProjects.join(', ')}</span> has been exceeded.
All your analytical environment will be stopped.<br /><br />
To proceed working with environment,
request increase of project(s) quota from DLab administrator.`,
@@ -264,7 +269,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
To proceed working with environment,
request increase application quota from DLab administrator.`,
project_quota: `Dear <span class="strong">${this.currentUserName}</span>,<br /><br />
- Cloud infrastructure usage quota associated with project(s) <span class="strong">${informProjects}</span> has been used over <span class="strong">${this.quotesLimit}%</span>.
+ Cloud infrastructure usage quota associated with project(s) <span class="strong">${informProjects.join(', ')}</span> has been used over <span class="strong">${this.quotesLimit}%</span>.
Once quota is depleted all your analytical environment will be stopped.<br /><br />
To proceed working with environment you'll have to request increase of project(s) quota from DLab administrator.`,
total_quota: `Dear <span class="strong">${this.currentUserName}</span>,<br /><br />
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 50aeed8..9f486fd 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
@@ -36,7 +36,7 @@ body.modal-open {
.mt-5 {margin-top: 5px}
-.pr-3{padding-right: 3pxr7}
+.pr-3{padding-right: 3px}
.pb-50 {padding-bottom: 50px;}
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index ee719c5..2e7a5b8 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -850,6 +850,7 @@ mat-progress-bar {
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ top: 58px;
&.is-to:after {
left: 250px;
@@ -983,5 +984,7 @@ mat-progress-bar {
}
}
+.alert .highlight .strong{ color: #35afd5}
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org