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 2019/12/12 13:12:58 UTC

[incubator-dlab] branch DLAB-1321 created (now 11902bb)

This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a change to branch DLAB-1321
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.


      at 11902bb  [DLAB-1321]: Conveyed all resources which will be terminated on confirmation dialog

This branch includes the following new commits:

     new bce33d2  [DLAB-1321]: Conveyed all resources which will be terminated on confirmation dialog
     new 11902bb  [DLAB-1321]: Conveyed all resources which will be terminated on confirmation dialog

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@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org


[incubator-dlab] 01/02: [DLAB-1321]: Conveyed all resources which will be terminated on confirmation dialog

Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DLAB-1321
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit bce33d2bead8f9cd023af7eeabf8b005f7b41253
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Dec 10 17:12:14 2019 +0200

    [DLAB-1321]: Conveyed all resources which will be terminated on confirmation dialog
---
 .../management/endpoints/endpoints.component.ts    | 24 ++++++++++++++++---
 .../manage-environment-dilog.component.ts          |  4 ++--
 .../administration/project/project.component.ts    |  2 +-
 .../resources-grid/resources-grid.component.ts     |  1 -
 .../notification-dialog.component.ts               | 27 +++++++++++++++++-----
 5 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts
index 23eab1c..32554f2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts
@@ -22,9 +22,10 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { ToastrService } from 'ngx-toastr';
 
-import { EndpointService } from '../../../core/services';
+import {EndpointService, UserResourceService} from '../../../core/services';
 import { NotificationDialogComponent } from '../../../shared/modal-dialog/notification-dialog';
 import { PATTERNS } from '../../../core/util';
+import {ExploratoryModel} from "../../../resources/resources-grid/resources-grid.model";
 
 export interface Endpoint {
   name: string;
@@ -41,6 +42,8 @@ export class EndpointsComponent implements OnInit {
   public createEndpointForm: FormGroup;
   endpoints: Endpoint[] = [];
   displayedColumns: string[] = ['name', 'url', 'account', 'endpoint_tag', 'actions'];
+  private resources: any;
+  private filtredResource: Array<any>;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
@@ -48,12 +51,15 @@ export class EndpointsComponent implements OnInit {
     public dialogRef: MatDialogRef<EndpointsComponent>,
     public dialog: MatDialog,
     private endpointService: EndpointService,
-    private _fb: FormBuilder
+    private _fb: FormBuilder,
+    private userResourceService: UserResourceService,
+
   ) { }
 
   ngOnInit() {
     this.initFormModel();
     this.getEndpointList();
+    this.getResource();
   }
 
   public generateEndpointTag($event) {
@@ -68,7 +74,12 @@ export class EndpointsComponent implements OnInit {
   }
 
   public deleteEndpoint(data) {
-    this.dialog.open(NotificationDialogComponent, { data: { type: 'confirmation', item: data }, panelClass: 'modal-sm' })
+    this.filtredResource = this.resources.filter(project => {
+      project.filtredExploratory =  project.exploratory.filter(resource => resource.endpoint === data.name);
+      return project.filtredExploratory.length
+    });
+
+    this.dialog.open(NotificationDialogComponent, { data: { type: 'confirmation', item: data, list: this.filtredResource }, panelClass: 'modal-sm' })
       .afterClosed().subscribe(result => {
         result && this.endpointService.deleteEndpoint(data.name).subscribe(() => {
           this.toastr.success('Endpoint successfully deleted!', 'Success!');
@@ -89,4 +100,11 @@ export class EndpointsComponent implements OnInit {
   private getEndpointList() {
     this.endpointService.getEndpointsData().subscribe((endpoints: any) => this.endpoints = endpoints);
   }
+
+  private getResource(): void{
+  this.userResourceService.getUserProvisionedResources()
+   .subscribe((result: any) => {
+     this.resources = ExploratoryModel.loadEnvironments(result);
+    })
+  }
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts
index caf7245..8ad8eee 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts
@@ -115,11 +115,11 @@ export class ManageEnvironmentComponent implements OnInit {
     <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
   </div>
   <div mat-dialog-content class="content">
-    <p>Environment of <b>{{ data.project }}</b> will be
+    <p>Environment of <span class="strong">{{ data.project }}</span> will be
       <span *ngIf="data.action === 'terminate'"> terminated.</span>
       <span *ngIf="data.action === 'stop'">stopped.</span>
     </p>
-    <p class="m-top-20"><strong>Do you want to proceed?</strong></p>
+    <p class="m-top-20"><span class="strong">Do you want to proceed?</span></p>
   </div>
   <div class="text-center">
     <button type="button" class="butt" mat-raised-button (click)="dialogRef.close()">No</button>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts
index a501ccc..1804b34 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts
@@ -105,7 +105,7 @@ export class ProjectComponent implements OnInit, OnDestroy {
   }
 
   public deleteProject($event) {
-    this.dialog.open(NotificationDialogComponent, { data: { type: 'confirmation', item: $event }, panelClass: 'modal-sm' })
+    this.dialog.open(NotificationDialogComponent, { data: { type: 'confirmation', item: $event, list: [] }, panelClass: 'modal-sm' })
       .afterClosed().subscribe(result => {
         result && this.projectService.deleteProject($event.name).subscribe(() => {
           this.refreshGrid();
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 7246ce4..ed6fc57 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
@@ -98,7 +98,6 @@ export class ResourcesGridComponent implements OnInit {
         this.environments = ExploratoryModel.loadEnvironments(result);
         this.getDefaultFilterConfiguration();
         (this.environments.length) ? this.getUserPreferences() : this.filteredEnvironments = [];
-
         this.healthStatus && !this.healthStatus.billingEnabled && this.modifyGrid();
       });
   }
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 5664583..31b29c8 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
@@ -37,7 +37,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
             <span *ngIf="data.template.notebook.length > 1">, </span>
           </span> will be stopped and all computational resources will be stopped/terminated
         </div>
-
+        
         <div *ngIf="data.template.cluster.length > 0">
           <p *ngFor="let item of data.template.cluster">
               Computational resource<span *ngIf="data.template.cluster.length > 1">s </span>
@@ -48,7 +48,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
         <span class="strong">by a schedule in 15 minutes.</span>
       </div>
       <div *ngIf="data.type === 'message'"><span [innerHTML]="data.template"></span></div>
-      <div *ngIf="data.type === 'confirmation'" class="confirm-dialog">          
+      <div *ngIf="data.type === 'confirmation'" class="confirm-dialog">
         <p *ngIf="data.template; else label">
           <span [innerHTML]="data.template"></span>
         </p>
@@ -58,7 +58,23 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
             {{ data.item.name }}</span> will be {{ data.action || 'decommissioned' }}.
           </p>
         </ng-template>
-        <mat-list *ngIf="data.item.endpoints?.length">
+          
+        <mat-list *ngIf="data.list && data.list.length && data.type === 'confirmation'">
+            <mat-list-item class="list-header sans">
+                <div class="endpoint">Project</div>
+                <div class="status">Resource</div>
+            </mat-list-item>
+            <div class="scrolling-content">
+                <mat-list-item *ngFor="let project of data.list" class="sans node">
+                    <div class="endpoint ellipsis">
+                        <div *ngFor="let notebook of project.filtredExploratory">{{notebook.name}}</div>
+                    </div>
+                    <div class="status ellipsis">{{project.project}}</div>                    
+                </mat-list-item>
+            </div>
+          </mat-list>
+          
+          <mat-list *ngIf="data.item.endpoints?.length">
             <mat-list-item class="list-header sans">
                 <div class="endpoint">Edge node in endpoint</div>
                 <div class="status">Further status</div>
@@ -92,13 +108,12 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
     .label-name { display: inline-block; width: 100% } 
     .scrolling-content{overflow-y: auto; max-height: 200px; }
     .endpoint { width: 70%; text-align: left; color: #577289;}
-    .status { width: 30%;text-align: right;}
+    .status { width: 30%;text-align: left;}
     .label { font-size: 15px; font-weight: 500; font-family: "Open Sans",sans-serif;}
     .node { font-weight: 300;}
     .label-name { display: inline-block; width: 100%}
     .scrolling-content{overflow-y: auto; max-height: 200px;}
-    .endpoint { width: 280px;text-align: left;}
-    .status { text-align: left;}
+    .endpoint { width: 280px;text-align: left;}    
   `]
 })
 export class NotificationDialogComponent {


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org


[incubator-dlab] 02/02: [DLAB-1321]: Conveyed all resources which will be terminated on confirmation dialog

Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DLAB-1321
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit 11902bb98e34e3adbe7f54eb812a1ec1e791b6fa
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Wed Dec 11 15:25:05 2019 +0200

    [DLAB-1321]: Conveyed all resources which will be terminated on confirmation dialog
---
 .../management/endpoints/endpoints.component.ts    |  4 +-
 .../modal-dialog/notification-dialog/index.ts      |  3 +-
 .../notification-dialog.component.ts               | 63 +++++++++++++++-------
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts
index 32554f2..725447e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts
@@ -75,13 +75,13 @@ export class EndpointsComponent implements OnInit {
 
   public deleteEndpoint(data) {
     this.filtredResource = this.resources.filter(project => {
-      project.filtredExploratory =  project.exploratory.filter(resource => resource.endpoint === data.name);
+      project.filtredExploratory =  project.exploratory.filter(resource => resource.endpoint === data.name && resource.status !== 'terminated');
       return project.filtredExploratory.length
     });
 
     this.dialog.open(NotificationDialogComponent, { data: { type: 'confirmation', item: data, list: this.filtredResource }, panelClass: 'modal-sm' })
       .afterClosed().subscribe(result => {
-        result && this.endpointService.deleteEndpoint(data.name).subscribe(() => {
+        result === 'noTerminate' && this.endpointService.deleteEndpoint(data.name).subscribe(() => {
           this.toastr.success('Endpoint successfully deleted!', 'Success!');
           this.getEndpointList();
         }, error => this.toastr.error(error.message || 'Endpoint creation failed!', 'Oops!'));
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/index.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/index.ts
index 7f66ebc..501f2c6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/index.ts
@@ -22,11 +22,12 @@ import { CommonModule } from '@angular/common';
 
 import { NotificationDialogComponent } from './notification-dialog.component';
 import { MaterialModule } from '../../material.module';
+import {FormsModule} from "@angular/forms";
 
 export * from './notification-dialog.component';
 
 @NgModule({
-  imports: [CommonModule, MaterialModule],
+  imports: [CommonModule, MaterialModule, FormsModule],
   declarations: [NotificationDialogComponent],
   entryComponents: [NotificationDialogComponent],
   exports: [NotificationDialogComponent]
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 31b29c8..f371079 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
@@ -55,25 +55,35 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
         <ng-template #label>
           <p>
             <span class="ellipsis label-name strong" matTooltip="{{ data.item.name }}" matTooltipPosition="above" [matTooltipDisabled]="data.item.name.length > 35">
-            {{ data.item.name }}</span> will be {{ data.action || 'decommissioned' }}.
+             {{ data.item.name }}</span> will be {{ data.action || 'disconnected' }}.
           </p>
         </ng-template>
           
-        <mat-list *ngIf="data.list && data.list.length && data.type === 'confirmation'">
-            <mat-list-item class="list-header sans">
-                <div class="endpoint">Project</div>
-                <div class="status">Resource</div>
-            </mat-list-item>
-            <div class="scrolling-content">
-                <mat-list-item *ngFor="let project of data.list" class="sans node">
-                    <div class="endpoint ellipsis">
+        <div *ngIf="data.list && data.list.length && data.type === 'confirmation'">
+          <div class="resource-list">
+            <div class="resource-list-header">
+                <div class="resource-name">Resource</div>
+                <div class="project">Project</div>
+            </div>
+            <div class="scrolling-content resource-heigth" >
+                <div class="resource-list-row sans node" *ngFor="let project of data.list">
+                    <div class="resource-name ellipsis">
                         <div *ngFor="let notebook of project.filtredExploratory">{{notebook.name}}</div>
                     </div>
-                    <div class="status ellipsis">{{project.project}}</div>                    
-                </mat-list-item>
+                    <div class="project ellipsis">{{project.project}}</div>                    
+                </div>
             </div>
-          </mat-list>
-          
+          </div>
+          <div class="confirm-resource-terminating">
+              <label>
+                  <input class="checkbox" type="checkbox"
+                         (change)="terminateResource()"/>Terminate all related resources
+              </label>              
+          </div>
+          <p class="confirm-message">
+              <span *ngIf="willResourceTermineted">All connected computational resources will be terminated as well</span>
+          </p>
+        </div>            
           <mat-list *ngIf="data.item.endpoints?.length">
             <mat-list-item class="list-header sans">
                 <div class="endpoint">Edge node in endpoint</div>
@@ -90,8 +100,9 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
           
         <div class="text-center m-top-30 m-bott-10">
           <button type="button" class="butt" mat-raised-button (click)="dialogRef.close()">No</button>
-          <button type="button" class="butt butt-success" mat-raised-button (click)="dialogRef.close(true)">Yes</button>
-        </div>
+          <button *ngIf="!this.willResourceTermineted" type="button" class="butt butt-success" mat-raised-button (click)="dialogRef.close('noTerminate')">Yes</button>
+          <button *ngIf="this.willResourceTermineted" type="button" class="butt butt-success" mat-raised-button (click)="dialogRef.close('terminate')">Yes</button>
+        </div>          
       </div>
     </div>
   </div>
@@ -110,17 +121,31 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
     .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;}
-    .node { font-weight: 300;}
-    .label-name { display: inline-block; width: 100%}
-    .scrolling-content{overflow-y: auto; max-height: 200px;}
-    .endpoint { width: 280px;text-align: left;}    
+    .node { font-weight: 300;}    
+    .label-name { display: inline-block; width: 100%}    
+    .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-row{display: flex; border-bottom: 1px solid #edf1f5;padding: 0 20px;}
+    .confirm-resource-terminating{text-align: left; padding: 10px 20px;}
+    .confirm-message{color: #35afd5;font-size: 13px;min-height: 18px; text-align: center;}
+    .checkbox{margin-right: 5px;vertical-align: middle; margin-bottom: 3px;}
+    label{cursor: pointer}
+    
+    
   `]
 })
 export class NotificationDialogComponent {
+  public willResourceTermineted: boolean = false;
   constructor(
     public dialogRef: MatDialogRef<NotificationDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     console.log(data);
   }
+
+  public terminateResource(): void{
+    this.willResourceTermineted = !this.willResourceTermineted;
+  }
 }


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org