You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/09/13 11:30:33 UTC

[incubator-dlab] 03/04: [DLAB-1103]: added endpoints list with actions

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

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

commit 1622375f9adcdc2c7016bf71791eecbbd575100b
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Fri Sep 13 13:35:43 2019 +0300

    [DLAB-1103]: added endpoints list with actions
---
 .../project-list/project-list.component.html       | 35 ++++++++++++++++++++--
 .../project-list/project-list.component.scss       |  6 ++++
 .../project/project-list/project-list.component.ts |  6 ++--
 .../administration/project/project.component.ts    | 21 +++++++++----
 .../create-environment.component.ts                |  4 +--
 5 files changed, 59 insertions(+), 13 deletions(-)

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 382f5c8..3d7ffcb 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
@@ -34,10 +34,39 @@
 
   <ng-container matColumnDef="endpoints">
     <th mat-header-cell *matHeaderCellDef class="endpoints"> Endpoints </th>
-    <td mat-cell *matCellDef="let element">
-      <mat-chip-list>
+    <td mat-cell *matCellDef="let element" class="source">
+      <!-- <mat-chip-list>
         <mat-chip *ngFor="let endpoint of element.endpoints">{{ endpoint }}</mat-chip>
-      </mat-chip-list>
+      </mat-chip-list> -->
+      <div *ngIf="!element.endpoints?.length; else list">
+        <span *ngIf="!element.endpoints.length" class="no-details">no details</span>
+      </div>
+      <ng-template #list>
+        <div *ngFor="let endpoint of element.endpoints" class="resource-wrap">
+          <div class="resource-name">
+            <a class="detailed-link">
+              {{ endpoint.name }}
+            </a>
+          </div>
+          <span ngClass="{{endpoint.status.toLowerCase() || ''}}"
+            class="status resource-status">{{ endpoint.status.toLowerCase() }}</span>
+          <div class="resource-actions">
+            <a class="start-stop-action">
+              <i class="material-icons" (click)="toggleEndpointAction(element, 'stop', endpoint)"
+                *ngIf="endpoint.status === 'RUNNING'">pause_circle_outline</i>
+            </a>
+            <a class="start-stop-action">
+              <i class="material-icons" (click)="toggleEndpointAction(element, 'start', endpoint)"
+                *ngIf="endpoint.status === 'STOPPED'">play_circle_outline</i>
+            </a>
+
+            <a class="remove_butt" (click)="toggleEndpointAction(element, 'terminate', endpoint)"
+              [ngClass]="{ 'disabled' : endpoint.status !== 'RUNNING' && endpoint.status !== 'STOPPED' }">
+              <i class="material-icons">highlight_off</i>
+            </a>
+          </div>
+        </div>
+      </ng-template>
     </td>
   </ng-container>
 
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 361d687..ae0e8ba 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
@@ -20,6 +20,10 @@
 table {
   width: 100%;
 
+  td {
+    vertical-align: initial;
+  }
+
   .name {
     width: 25%;
   }
@@ -42,6 +46,8 @@ table {
     color: #607d8b;
     width: 10%;
     text-align: right;
+    vertical-align: top;
+    padding-top: 16px;
 
     span {
       transition: all .5s ease-in-out;
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
index ff6f766..a6e5768 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
@@ -29,7 +29,7 @@ import { Project } from '../project.component';
 @Component({
   selector: 'project-list',
   templateUrl: './project-list.component.html',
-  styleUrls: ['./project-list.component.scss']
+  styleUrls: ['./project-list.component.scss', '../../../resources/computational/computational-resources-list/computational-resources-list.component.scss']
 })
 export class ProjectListComponent implements OnInit, OnDestroy {
 
@@ -58,8 +58,8 @@ export class ProjectListComponent implements OnInit, OnDestroy {
     this.subscriptions.unsubscribe();
   }
 
-  public toggleProjectStatus(project, action) {
-    this.toggleStatus.emit({ project, action });
+  public toggleEndpointAction(project, action, endpoint) {
+    this.toggleStatus.emit({ project, endpoint, action });
   }
 
   public editProject(item: Project[]) {
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 18d892e..0e1642e 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
@@ -94,12 +94,20 @@ export class ProjectComponent implements OnInit, OnDestroy {
   }
 
   public toggleStatus($event) {
+    // project, endpoint, action
     const data = { 'project_name': $event.project.name };
 
-    if ($event.action === 'stop') {
-      this.dialog.open(NotificationDialogComponent, { data: { type: 'confirmation', item: $event.project, action: 'stopped' }, panelClass: 'modal-sm' })
+    if ($event.action === 'stop' || $event.action === 'terminated') {
+      this.dialog.open(NotificationDialogComponent, {
+        data: {
+          type: 'confirmation',
+          item: $event.project, action: $event.action === 'stop' ? 'stopped' : 'terminated'
+        }, panelClass: 'modal-sm'
+      })
         .afterClosed().subscribe(result => {
-          result && this.toggleStatusRequest(data, $event.action);
+          // result && this.toggleStatusRequest(data, $event.action);
+
+          debugger;
         }, error => this.toastr.error(error.message, 'Oops!'));
     } else {
       this.toggleStatusRequest(data, $event.action);
@@ -107,8 +115,11 @@ export class ProjectComponent implements OnInit, OnDestroy {
   }
 
   private toggleStatusRequest(data, action) {
-    this.projectService.toggleProjectStatus(data, action).subscribe(() => this.refreshGrid(),
-      error => this.toastr.error(error.message, 'Oops!'));
+    // this.projectService.toggleProjectStatus(data, action).subscribe(() => this.refreshGrid(),
+    //   error => this.toastr.error(error.message, 'Oops!'));
+
+
+    debugger;
   }
 
   private getEnvironmentHealthStatus() {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
index 4718bc1..0b7e12f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
@@ -74,8 +74,8 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
 
   public setEndpoints(project) {
     this.endpoints = project.endpoints
-    .filter(e => e.status === 'RUNNING')
-    .map(e => e.name);
+      .filter(e => e.status === 'RUNNING')
+      .map(e => e.name);
   }
 
   public getTemplates(project, endpoint) {


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