You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by dg...@apache.org on 2020/10/23 12:21:10 UTC
[incubator-datalab] branch DATALAB-1949 created (now 690b50f)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a change to branch DATALAB-1949
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git.
at 690b50f [DATALAB-1949]: Made all dialog windows consistent
This branch includes the following new commits:
new 2988254 [DATALAB-1949]: Made all dialog windows consistent
new 690b50f [DATALAB-1949]: Made all dialog windows consistent
The 2 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/02: [DATALAB-1949]: Made all dialog windows
consistent
Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DATALAB-1949
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 2988254da11aba81eee52b3b114b4811e16a7f92
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Fri Oct 23 09:57:25 2020 +0300
[DATALAB-1949]: Made all dialog windows consistent
---
.../management-grid/management-grid.component.ts | 4 ++
.../project-list/project-list.component.html | 2 +-
.../project-list/project-list.component.scss | 7 ++
.../resources-grid/resources-grid.component.ts | 5 +-
.../multi-level-select-dropdown.component.scss | 4 +-
.../confirmation-dialog.component.html | 80 ++++++++++++++++------
.../confirmation-dialog.component.scss | 29 +++++++-
.../confirmation-dialog.component.ts | 16 ++++-
.../edge-action-dialog.component.ts | 28 +++++---
.../notification-dialog.component.ts | 8 ++-
.../resources/webapp/src/assets/styles/_theme.scss | 9 +++
.../src/main/resources/webapp/src/styles.scss | 4 ++
12 files changed, 158 insertions(+), 38 deletions(-)
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 7a59bd1..6590eac 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
@@ -359,14 +359,18 @@ export class ReconfirmationDialogComponent {
public dialogRef: MatDialogRef<ReconfirmationDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
+ console.log(data.notebooks);
+ console.log(data.notebooks.length);
if (data.notebooks && data.notebooks.length) {
this.notebooks = JSON.parse(JSON.stringify(data.notebooks));
+ console.log(this.notebooks);
this.notebooks = this.notebooks.map(notebook => {
notebook.resources = notebook.resources.filter(res => res.status !== 'failed' &&
res.status !== 'terminated' && res.status.slice(0, 4) !== data.action);
if (notebook.resources.length) {
this.isClusterLength = true;
}
+ console.log(notebook);
return notebook;
});
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
index 81d4ddf..100e859 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
@@ -69,7 +69,7 @@
<td mat-cell *matCellDef="let element" class="settings">
<span #settings (click)="actions.toggle($event, settings)" class="actions"></span>
<bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
- <ul class="list-unstyled">
+ <ul class="list-unstyled actions-list">
<div class="active-items"></div>
<li class="project-seting-item" *ngIf="element.areStoppedNode" (click)="openEdgeDialog('start', element)">
<i class="material-icons">play_circle_outline</i>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
index 9050ff6..69190e0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
@@ -124,6 +124,9 @@ td.settings {
border-bottom: 1px solid #edf1f5;
cursor: pointer;
color: #577289;
+ &:last-child{
+ border-bottom: none;
+ }
&:hover{
color: #36afd5;
transition: all .45s ease-in-out;
@@ -145,6 +148,10 @@ td.settings {
color: #577289;
}
+.actions-list{
+ padding: 10px 15px;
+}
+
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 5530850..ad7e167 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
@@ -41,6 +41,7 @@ import {ComputationModel} from '../computational/computational-resource.model';
import {NotebookModel} from '../exploratory/notebook.model';
import {AuditService} from '../../core/services/audit.service';
import {JAN} from '@angular/material/core';
+import {ReconfirmationDialogComponent} from '../../administration/management/management-grid/management-grid.component';
export interface SharedEndpoint {
edge_node_ip: string;
@@ -233,7 +234,6 @@ export class ResourcesGridComponent implements OnInit {
public exploratoryAction(data, action: string): void {
const resource = this.getResourceByName(data.name, data.project);
-
if (action === 'deploy') {
this.dialog.open(ComputationalResourceCreateDialogComponent, { data: { notebook: resource, full_list: this.environments }, panelClass: 'modal-xxl' })
.afterClosed().subscribe((res) => {
@@ -246,6 +246,9 @@ export class ResourcesGridComponent implements OnInit {
() => this.buildGrid(),
error => this.toastr.error(error.message || 'Exploratory starting failed!', 'Oops!'));
} else if (action === 'stop') {
+ // this.dialog.open(ReconfirmationDialogComponent, {
+ // data: { notebooks: [data], type: 'notebook', action }, width: '550px', panelClass: 'error-modalbox'
+ // })
this.dialog.open(ConfirmationDialogComponent, { data: { notebook: data, type: ConfirmationDialogType.StopExploratory }, panelClass: 'modal-sm' })
.afterClosed().subscribe((res) => {
res && this.buildGrid();
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 a6a1148..aab2b07 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
@@ -265,7 +265,7 @@
color: #35afd5;
&.checked-checkbox {
- top: 0px;
+ top: 0;
left: 4px;
width: 5px;
height: 10px;
@@ -276,7 +276,7 @@
}
&.line-checkbox {
- top: 0px;
+ top: 0;
left: 2px;
width: 8px;
height: 7px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html
index 9d41181..498e1ad 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html
@@ -37,33 +37,71 @@
<div class="content-box">
<p *ngIf="data.type !== 4 && data.type !== 5" class="info text-center">{{ model.title }}</p>
<div *ngIf="data.type === 4" class="text-center m-bot-20">
- <h3 class="strong">Group data will be updated.</h3>
+ <h4 class="strong">Group data will be updated.</h4>
</div>
<p *ngIf="data.type === 4 && data.notebook.length" class="text-center delete-user">User<span *ngIf="data.notebook.length>1">s</span> <span class="strong"> {{data.notebook.join(', ')}} </span>will be removed from this group. Removing may prevent the user<span *ngIf="data.notebook.length>1">s</span> to access {{data.notebook.length>1 ? 'their' : 'his/her'}} resources</p>
<p *ngIf="data.type === 5" class="text-center delete-user">Removing the group<span *ngIf="data.notebook.length>1">s</span> <span class="strong">{{' ' + data.notebook}}</span> from the project may prevent the users from this group<span *ngIf="data.notebook.length>1">s</span> to access their resources</p>
<!-- All <span *ngIf="data.notebook.length===1">his</span><span *ngIf="data.notebook.length>1">their</span> resources authorized within this group will be terminated.-->
- <mat-list class="resources"
- [hidden]="model.notebook.type === 'Edge Node' || model.notebook.name === 'edge node'
- || !model.notebook.resources || model.notebook.resources.length === 0 || (!isAliveResources && !confirmationType) || onlyKilled">
- <mat-list-item class="list-header">
- <div class="cluster">Cluster</div>
- <div class="status">Further status</div>
- <div class="size">Size</div>
- </mat-list-item>
- <div class="scrolling-content" id="scrolling">
- <mat-list-item *ngFor="let resource of model.notebook.resources"
- [hidden]="resource.status === 'failed' || resource.status === 'terminated' || resource.status === 'terminating' || (resource.status === 'stopped' && !confirmationType)">
- <div class="cluster ellipsis">{{ resource.computational_name }}</div>
- <div class="status" [ngClass]="{ 'stopped': !confirmationType && resource.image === 'docker.datalab-dataengine',
- 'terminated': resource.image === 'docker.datalab-dataengine-service' || confirmationType }">
- {{ (!confirmationType && resource.image === 'docker.datalab-dataengine') ? 'Stopped' : 'Terminated' }}
+<!-- <mat-list class="resources"-->
+<!-- [hidden]="model.notebook.type === 'Edge Node' || model.notebook.name === 'edge node'-->
+<!-- || !model.notebook.resources || model.notebook.resources.length === 0 || (!isAliveResources && !confirmationType) || onlyKilled">-->
+<!-- <mat-list-item class="list-header">-->
+<!-- <div class="cluster">Cluster</div>-->
+<!-- <div class="status">Further status</div>-->
+<!-- <div class="size">Size</div>-->
+<!-- </mat-list-item>-->
+<!-- <div class="scrolling-content" id="scrolling">-->
+<!-- <mat-list-item *ngFor="let resource of model.notebook.resources"-->
+<!-- [hidden]="resource.status === 'failed' || resource.status === 'terminated' || resource.status === 'terminating' || (resource.status === 'stopped' && !confirmationType)">-->
+<!-- <div class="cluster ellipsis">{{ resource.computational_name }}</div>-->
+<!-- <div class="status" [ngClass]="{ 'stopped': !confirmationType && resource.image === 'docker.datalab-dataengine',-->
+<!-- 'terminated': resource.image === 'docker.datalab-dataengine-service' || confirmationType }">-->
+<!-- {{ (!confirmationType && resource.image === 'docker.datalab-dataengine') ? 'Stopped' : 'Terminated' }}-->
+<!-- </div>-->
+<!-- <div class="size">{{-->
+<!-- resource[DICTIONARY[notebook.cloud_provider.toLowerCase()][resource.image].master_node_shape] }}-->
+<!-- </div>-->
+<!-- </mat-list-item>-->
+<!-- </div>-->
+<!-- </mat-list>-->
+
+ <div class="resource-list" *ngIf="data.type === 0 || data.type === 1">
+ <div class="resource-list-header">
+ <div class="resource-name">Notebook</div>
+ <div class="clusters-list">
+ <div class="clusters-list-item">
+ <div class="cluster"><span *ngIf="isClusterLength">Cluster</span></div>
+ <div class="status">Further status</div>
+ </div>
+ </div>
+
+ </div>
+ <div class="scrolling-content resource-heigth">
+ <div class="resource-list-row sans node">
+ <div class="resource-name ellipsis">
+ {{notebook.name}}
</div>
- <div class="size">{{
- resource[DICTIONARY[notebook.cloud_provider.toLowerCase()][resource.image].master_node_shape] }}
+
+ <div class="clusters-list">
+ <div class="clusters-list-item">
+ <div class="cluster"></div>
+ <div class="status"
+ [ngClass]="{
+ 'stopped': data.action==='stop', 'terminated': data.action === 'terminate'
+ }"
+ >
+ {{data.action === 'stop' ? 'Stopped' : 'Terminated'}}
+ </div>
+ </div>
+ <div class="clusters-list-item" *ngFor="let cluster of notebook?.resources">
+ <div class="cluster">{{cluster.computational_name}}</div>
+ <div class="status" [ngClass]="{
+ 'stopped': (data.action==='stop' && cluster.image==='docker.datalab-dataengine'), 'terminated': data.action === 'terminate' || (data.action==='stop' && cluster.image!=='docker.datalab-dataengine')
+ }">{{data.action === 'stop' && cluster.image === "docker.datalab-dataengine" ? 'Stopped' : 'Terminated'}}</div>
+ </div>
</div>
- </mat-list-item>
- </div>
- </mat-list>
+
+
<div class="text-center m-top-20">
<p class="strong">Do you want to proceed?</p>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.scss
index c71e2ed..1764dfb 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.scss
@@ -18,7 +18,10 @@
*/
.confirmation-dialog {
- h3{
+ .content-box{
+ font-family: "Open Sans", sans-serif;
+ }
+ h4{
margin-bottom: 20px;
}
color: #718ba6;
@@ -61,3 +64,27 @@
width: 100%;
}
}
+
+.content { color: #718ba6; padding: 20px 50px; font-size: 14px; font-weight: 400; margin: 0; }
+.info { color: #35afd5; }
+.info .confirm-dialog { color: #607D8B; }
+header { display: flex; justify-content: space-between; color: #607D8B; }
+header h4 i { vertical-align: bottom; }
+header a i { font-size: 20px; }
+header a:hover i { color: #35afd5; cursor: pointer; }
+.plur { font-style: normal; }
+.scrolling-content{overflow-y: auto; max-height: 200px; }
+.cluster { width: 50%; text-align: left;}
+.status { width: 50%;text-align: left;}
+.label { font-size: 15px; font-weight: 500; font-family: "Open Sans",sans-serif;}
+.node { font-weight: 300;}
+.resource-name { width: 40%;text-align: left; padding: 10px 0;line-height: 26px;}
+.clusters-list { width: 60%;text-align: left; padding: 10px 0;line-height: 26px;}
+.clusters-list-item { width: 100%;text-align: left;display: flex}
+.resource-list{max-width: 100%; margin: 0 auto;margin-top: 20px; }
+.resource-list-header{display: flex; font-weight: 600; font-size: 16px;height: 48px; border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; padding: 0 20px;}
+.resource-list-row{display: flex; border-bottom: 1px solid #edf1f5;padding: 0 20px;}
+.confirm-resource-terminating{text-align: left; padding: 10px 20px;}
+.confirm-message{color: #ef5c4b;font-size: 13px;min-height: 18px; text-align: center; padding-top: 20px}
+.checkbox{margin-right: 5px;vertical-align: middle; margin-bottom: 3px;}
+label{cursor: pointer}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts
index 0a875b5..cac3b01 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts
@@ -47,6 +47,7 @@ export class ConfirmationDialogComponent implements OnInit {
@Input() manageAction: boolean = false;
@Output() buildGrid: EventEmitter<{}> = new EventEmitter();
+ private isClusterLength: boolean;
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
@@ -59,7 +60,7 @@ export class ConfirmationDialogComponent implements OnInit {
this.model = ConfirmationDialogModel.getDefault();
}
- ngOnInit() {
+ ngOnInit() {
if (this.data.type !== 5) {
this.confirmationType = this.data.type;
this.notebook = this.data.notebook;
@@ -79,6 +80,19 @@ export class ConfirmationDialogComponent implements OnInit {
!this.notebook.resources.some(el => el.status !== 'terminated' && el.status !== 'failed')
: false;
}
+
+ if (this.data.type === 0 || this.data.type === 1) {
+ if (this.notebook.resources.length) {
+ this.isClusterLength = true;
+ }
+ // this.notebook = this.notebook.map(notebook => {
+ // notebook.resources = notebook.resources.filter(res => res.status !== 'failed' &&
+ // res.status !== 'terminated' && res.status.slice(0, 4) !== data.action);
+ //
+ // console.log(notebook);
+ // return notebook;
+ // });
+ }
}
public confirm() {
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
index cf74931..e55f1e2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
@@ -33,16 +33,23 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
<h3 class="strong">Select the edge nodes you want to {{data.type}}</h3>
<ul class="endpoint-list scrolling-content">
<li *ngIf="data.item.length>1" class="endpoint-list-item header-item">
- <label class="strong all">
- <input type="checkbox" [(ngModel)]="isAllChecked" (change)="chooseAll()">
- {{data.type | titlecase}} all
+ <label class="strong all" (click)="chooseAll()">
+<!-- <input type="checkbox" [(ngModel)]="isAllChecked" (change)="chooseAll()">-->
+ <span class="empty-checkbox" [ngClass]="{'checked': isAllChecked || isSomeSelected}">
+ <span class="checked-checkbox" *ngIf="isAllChecked"></span>
+ <span class="line-checkbox" *ngIf="isSomeSelected"></span>
+ </span>
+ <span class="pl-5">{{data.type | titlecase}} all</span>
</label>
</li>
<div class="scrolling-content" id="scrolling">
<li *ngFor="let endpoint of data.item" class="endpoint-list-item">
- <label class="strong">
- <input type="checkbox" [(ngModel)]="endpoint.checked" (change)="endpointAction()">
- {{endpoint.name}}
+ <label class="strong" (click)="endpointAction(endpoint)">
+ <span class="empty-checkbox" [ngClass]="{'checked': endpoint.checked}">
+ <span class="checked-checkbox" *ngIf="endpoint.checked"></span>
+ </span>
+<!-- <input type="checkbox" [(ngModel)]="endpoint.checked" (change)="endpointAction()"> -->
+ <span class="pl-5">{{endpoint.name}}</span>
</label>
</li>
</div>
@@ -74,24 +81,29 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
label input {margin-top: 2px; margin-right: 10px;cursor: pointer;}
.all{font-size: 16px; padding-left: 0; font-weight: 500}
.scrolling-content{overflow-y: auto; max-height: 200px;}
+
`]
})
export class EdgeActionDialogComponent implements OnDestroy {
public endpointsNewStatus: Array<object> = [];
public isAllChecked: boolean;
+ public isSomeSelected: boolean;
constructor(
public dialogRef: MatDialogRef<EdgeActionDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
}
- public endpointAction() {
+ public endpointAction(target?) {
+ if (target) target.checked = !target.checked;
this.endpointsNewStatus = this.data.item.filter(endpoint => endpoint.checked);
this.isAllChecked = this.endpointsNewStatus.length === this.data.item.length;
+ this.isSomeSelected = this.endpointsNewStatus.length && !this.isAllChecked;
}
public chooseAll() {
- if (this.isAllChecked) {
+ console.log(this.isAllChecked);
+ if (!this.isAllChecked) {
this.data.item.forEach(endpoint => endpoint.checked = true);
} else {
this.clearCheckedNodes();
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 f46360e..01a75ae 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
@@ -42,7 +42,7 @@ import {Endpoint} from '../../../administration/project/project.component';
<span class="strong blue" *ngFor="let notebook of item.notebook; let i = index">{{i === 0 ? '' : ', '}} {{ notebook }}</span> in project <span
class="strong blue">{{ item.project }}</span>
<span *ngIf="data.template.notebook.length > 1">, </span>
- </span> will be stopped and all computational resources will be stopped/terminated
+ </span> will be stopped and all computes will be stopped/terminated
</div>
<div class="quota-message" *ngIf="data.template.cluster?.length > 0">
@@ -155,7 +155,7 @@ import {Endpoint} from '../../../administration/project/project.component';
header a i { font-size: 20px; }
header a:hover i { color: #35afd5; cursor: pointer; }
.plur { font-style: normal; }
- .scrolling-content{overflow-y: auto; max-height: 200px; }
+ .scrolling-content{overflow-y: auto; max-height: 200px; border-bottom: 1px solid #edf1f5; }
.endpoint { width: 70%; text-align: left; color: #577289;}
.status { width: 30%;text-align: left;}
.label { font-size: 15px; font-weight: 500; font-family: "Open Sans",sans-serif;}
@@ -163,8 +163,9 @@ import {Endpoint} from '../../../administration/project/project.component';
.resource-name { width: 280px;text-align: left; padding: 10px 0;line-height: 26px;}
.project { width: 30%;text-align: left; padding: 10px 0;line-height: 26px;}
.resource-list{max-width: 100%; margin: 0 auto;margin-top: 20px; }
- .resource-list-header{display: flex; font-weight: 600; font-size: 16px;height: 48px; border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; padding: 0 20px;}
+ .resource-list-header{display: flex; font-weight: 600; font-size: 14px;height: 48px; border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; padding: 0 20px;}
.resource-list-row{display: flex; border-bottom: 1px solid #edf1f5;padding: 0 20px;}
+ .resource-list-row:last-child{border-bottom: none}
.confirm-resource-terminating{text-align: left; padding: 10px 20px;}
.confirm-message{color: #ef5c4b;font-size: 13px;min-height: 18px; text-align: center; padding-top: 20px}
.checkbox{margin-right: 5px;vertical-align: middle; margin-bottom: 3px;}
@@ -173,6 +174,7 @@ import {Endpoint} from '../../../administration/project/project.component';
.table-header{padding-bottom: 10px;}
.alert{text-align: left; line-height: 22px; padding-bottom: 25px;padding-top: 15px;}
.quota-message{padding-top: 10px}
+ .mat-list-base .mat-list-item { font-size: 15px}
`]
})
export class NotificationDialogComponent {
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 50d4f30..72ddcc8 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
@@ -494,6 +494,15 @@ span.mat-slide-toggle-content {
position: absolute;
transform: rotate(45deg);
}
+
+ .line-checkbox {
+ top: 0;
+ left: 2px;
+ width: 8px;
+ height: 7px;
+ border-bottom: 2px solid white;
+ position: absolute;
+ }
}
.none-select{
user-select: none;
diff --git a/services/self-service/src/main/resources/webapp/src/styles.scss b/services/self-service/src/main/resources/webapp/src/styles.scss
index bd79768..c09ccd9 100644
--- a/services/self-service/src/main/resources/webapp/src/styles.scss
+++ b/services/self-service/src/main/resources/webapp/src/styles.scss
@@ -307,6 +307,10 @@ input[type='number'] {
text-align: right;
}
+.pl-5{
+ padding-left: 5px;
+}
+
.pl-20{
padding-left: 20px;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org
[incubator-datalab] 02/02: [DATALAB-1949]: Made all dialog windows
consistent
Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DATALAB-1949
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 690b50f51bb3e0ab36e53bfe8177d9628b95c58d
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Fri Oct 23 15:19:54 2020 +0300
[DATALAB-1949]: Made all dialog windows consistent
---
.../management-grid/management-grid.component.ts | 6 +-----
.../confirmation-dialog.component.html | 16 ++++++++-------
.../confirmation-dialog.component.ts | 11 ++--------
.../edge-action-dialog.component.ts | 24 +++++++++-------------
.../notification-dialog.component.ts | 4 ++--
5 files changed, 24 insertions(+), 37 deletions(-)
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 6590eac..d54ca56 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
@@ -359,19 +359,15 @@ export class ReconfirmationDialogComponent {
public dialogRef: MatDialogRef<ReconfirmationDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
- console.log(data.notebooks);
- console.log(data.notebooks.length);
if (data.notebooks && data.notebooks.length) {
this.notebooks = JSON.parse(JSON.stringify(data.notebooks));
- console.log(this.notebooks);
this.notebooks = this.notebooks.map(notebook => {
notebook.resources = notebook.resources.filter(res => res.status !== 'failed' &&
res.status !== 'terminated' && res.status.slice(0, 4) !== data.action);
if (notebook.resources.length) {
this.isClusterLength = true;
}
- console.log(notebook);
- return notebook;
+ return notebook;
});
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html
index 498e1ad..a80b08f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html
@@ -22,7 +22,7 @@
<h4 class="modal-title">
<span *ngIf="data.type !== 5 && model.notebook.name && model.notebook.name !== 'edge node'">
- <span>{{ confirmationType ? 'Terminate' : 'Stop' }} notebook: {{ model.notebook.name }}</span>
+ <span>{{ data.type === 1 ? 'Terminate' : 'Stop' }} resource</span>
</span>
<span *ngIf="model.notebook.type === 'Edge Node' || model.notebook.name === 'edge node' || data.type === 4 && data.notebook.length || data.type === 5 ">
<i class="material-icons">priority_high</i>Warning
@@ -35,7 +35,7 @@
</header>
<div class="dialog-content">
<div class="content-box">
- <p *ngIf="data.type !== 4 && data.type !== 5" class="info text-center">{{ model.title }}</p>
+<!-- <p *ngIf="data.type !== 4 && data.type !== 5" class="info text-center">{{ model.title }}</p>-->
<div *ngIf="data.type === 4" class="text-center m-bot-20">
<h4 class="strong">Group data will be updated.</h4>
</div>
@@ -87,20 +87,21 @@
<div class="cluster"></div>
<div class="status"
[ngClass]="{
- 'stopped': data.action==='stop', 'terminated': data.action === 'terminate'
+ 'stopped': data.type === 0, 'terminated': data.type === 1
}"
>
- {{data.action === 'stop' ? 'Stopped' : 'Terminated'}}
+ {{data.type === 0 ? 'Stopped' : 'Terminated'}}
</div>
</div>
<div class="clusters-list-item" *ngFor="let cluster of notebook?.resources">
<div class="cluster">{{cluster.computational_name}}</div>
<div class="status" [ngClass]="{
- 'stopped': (data.action==='stop' && cluster.image==='docker.datalab-dataengine'), 'terminated': data.action === 'terminate' || (data.action==='stop' && cluster.image!=='docker.datalab-dataengine')
- }">{{data.action === 'stop' && cluster.image === "docker.datalab-dataengine" ? 'Stopped' : 'Terminated'}}</div>
+ 'stopped': (data.type === 0 && cluster.image==='docker.datalab-dataengine'), 'terminated': data.type === 1 || (data.type===0 && cluster.image!=='docker.datalab-dataengine')
+ }">{{data.type === 0 && cluster.image === "docker.datalab-dataengine" ? 'Stopped' : 'Terminated'}}</div>
</div>
</div>
-
+ </div>
+ </div>
<div class="text-center m-top-20">
@@ -112,5 +113,6 @@
<button *ngIf="data.type === 4 || data.type === 5" mat-raised-button type="button" class="butt butt-success action" (click)="dialogRef.close(true)">Yes</button>
</div>
</div>
+ </div>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts
index cac3b01..4843d41 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts
@@ -60,7 +60,7 @@ export class ConfirmationDialogComponent implements OnInit {
this.model = ConfirmationDialogModel.getDefault();
}
- ngOnInit() {
+ ngOnInit() {
if (this.data.type !== 5) {
this.confirmationType = this.data.type;
this.notebook = this.data.notebook;
@@ -81,17 +81,10 @@ export class ConfirmationDialogComponent implements OnInit {
: false;
}
- if (this.data.type === 0 || this.data.type === 1) {
+ if (this.data.type === 0 || this.data.type === 1) {
if (this.notebook.resources.length) {
this.isClusterLength = true;
}
- // this.notebook = this.notebook.map(notebook => {
- // notebook.resources = notebook.resources.filter(res => res.status !== 'failed' &&
- // res.status !== 'terminated' && res.status.slice(0, 4) !== data.action);
- //
- // console.log(notebook);
- // return notebook;
- // });
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
index e55f1e2..06b7be9 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
@@ -33,24 +33,24 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
<h3 class="strong">Select the edge nodes you want to {{data.type}}</h3>
<ul class="endpoint-list scrolling-content">
<li *ngIf="data.item.length>1" class="endpoint-list-item header-item">
- <label class="strong all" (click)="chooseAll()">
+ <span class="strong all item-wrapper" (click)="chooseAll()">
<!-- <input type="checkbox" [(ngModel)]="isAllChecked" (change)="chooseAll()">-->
- <span class="empty-checkbox" [ngClass]="{'checked': isAllChecked || isSomeSelected}">
+ <div class="empty-checkbox" [ngClass]="{'checked': isAllChecked || isSomeSelected}">
<span class="checked-checkbox" *ngIf="isAllChecked"></span>
<span class="line-checkbox" *ngIf="isSomeSelected"></span>
- </span>
+ </div>
<span class="pl-5">{{data.type | titlecase}} all</span>
- </label>
+ </span>
</li>
<div class="scrolling-content" id="scrolling">
<li *ngFor="let endpoint of data.item" class="endpoint-list-item">
- <label class="strong" (click)="endpointAction(endpoint)">
- <span class="empty-checkbox" [ngClass]="{'checked': endpoint.checked}">
+ <span class="strong item-wrapper" (click)="endpointAction(endpoint)">
+ <div class="empty-checkbox" [ngClass]="{'checked': endpoint.checked}">
<span class="checked-checkbox" *ngIf="endpoint.checked"></span>
- </span>
+ </div>
<!-- <input type="checkbox" [(ngModel)]="endpoint.checked" (change)="endpointAction()"> -->
<span class="pl-5">{{endpoint.name}}</span>
- </label>
+ </span>
</li>
</div>
</ul>
@@ -66,8 +66,6 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
`,
styles: [`
.content { color: #718ba6; padding: 20px 50px; font-size: 14px; font-weight: 400; margin: 0; }
- .info { color: #35afd5; }
- .info .confirm-dialog { color: #607D8B; }
header { display: flex; justify-content: space-between; color: #607D8B; }
header h4 i { vertical-align: bottom; }
header a i { font-size: 20px; }
@@ -77,11 +75,10 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
.action{text-transform: capitalize}
.action-text { text-align: center; }
.scrolling-content{overflow-y: auto; max-height: 200px; }
- label { font-size: 15px; font-weight: 300; font-family: "Open Sans",sans-serif; cursor: pointer; display: flex; align-items: center; padding-left: 10px}
- label input {margin-top: 2px; margin-right: 10px;cursor: pointer;}
+ .item-wrapper { font-size: 15px; font-weight: 300; font-family: "Open Sans",sans-serif; cursor: pointer; display: flex; align-items: center; padding-left: 10px}
+ .item-wrapper .empty-checkbox {margin-top: 0}
.all{font-size: 16px; padding-left: 0; font-weight: 500}
.scrolling-content{overflow-y: auto; max-height: 200px;}
-
`]
})
@@ -102,7 +99,6 @@ export class EdgeActionDialogComponent implements OnDestroy {
}
public chooseAll() {
- console.log(this.isAllChecked);
if (!this.isAllChecked) {
this.data.item.forEach(endpoint => endpoint.checked = true);
} else {
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 01a75ae..35419c2 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
@@ -96,7 +96,7 @@ import {Endpoint} from '../../../administration/project/project.component';
<!-- </label>-->
<!-- </div>-->
<p class="confirm-message">
- <span *ngIf="!willNotTerminate">All connected computational resources will be terminated as well.</span>
+ <span *ngIf="!willNotTerminate">All connected computes will be terminated as well.</span>
</p>
</div>
<mat-list *ngIf="data.item.endpoints?.length">
@@ -133,7 +133,7 @@ import {Endpoint} from '../../../administration/project/project.component';
</div>
</mat-list>
<div mat-dialog-content class="bottom-message" *ngIf="data.item.resources.length > 0">
- <span class="confirm-message">All connected computational resources will be terminated as well.</span>
+ <span class="confirm-message">All connected computes will be terminated as well.</span>
</div>
<p class="m-top-20"><span class="strong">Do you want to proceed?</span></p>
<div class="text-center m-top-30 m-bott-10">
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org