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/01/23 09:11:05 UTC

[incubator-dlab] branch DLAB-1357 created (now 13050f5)

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

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


      at 13050f5  [DLAB-1357]: Added legion icon to Resource page

This branch includes the following new commits:

     new e89888e  [DLAB-1357]: Added page Legion deployment
     new 09efef4  [DLAB-1357]: Added legion icon to Resource page
     new c0d4694  [DLAB-1357]: Added condition for empty clusters list
     new 13050f5  [DLAB-1357]: Added legion icon to Resource page

The 4 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] 04/04: [DLAB-1357]: Added legion icon to Resource page

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

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

commit 13050f58e912920c3282e6539febc98333ed4f41
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Fri Jan 10 15:56:54 2020 +0200

    [DLAB-1357]: Added legion icon to Resource page
---
 .../administration/legion-deployment/legion-deployment.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.html
index e403ec8..0d5089f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.html
@@ -42,7 +42,7 @@
 
   <mat-divider></mat-divider>
 
-  <div [hidden]="!legionClastersList.length">
+  <div>
     <legion-list>
     </legion-list>
   </div>


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


[incubator-dlab] 03/04: [DLAB-1357]: Added condition for empty clusters list

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

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

commit c0d46944c19ec06781d195c0192a999570615f98
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Fri Jan 10 15:56:34 2020 +0200

    [DLAB-1357]: Added condition for empty clusters list
---
 .../legion-list/legion-list.component.html         | Bin 2722 -> 3606 bytes
 .../legion-list/legion-list.component.scss         |  56 ++++++++++++---------
 .../legion-list/legion-list.component.ts           |   4 +-
 .../app/core/services/legion-deployment.service.ts |  31 ++++++------
 4 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.html
index 80e6b76..2a24402 100644
Binary files a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.html and b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.html differ
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.scss
index 514d2f9..6481052 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.scss
@@ -25,36 +25,42 @@
     cursor: pointer;
   }
 
-  td.settings {
-    position: relative;
-    vertical-align: middle !important;
-    text-align: right;
-
-    .actions {
-      background-image: url(../../../../assets/svg/settings_icon.svg);
-      width: 16px;
-      height: 16px;
-      display: inline-block;
+  td {
+    &.info.mat-footer-cell{
       text-align: center;
-      cursor: pointer;
+      padding: 40px;
     }
-  }
-
-  .project-seting-item {
-    display: flex;
-    padding: 10px;
-    align-items: center;
-    border-bottom: 1px solid #edf1f5;
-    cursor: pointer;
-    color: #577289;
+    .settings {
+      position: relative;
+      vertical-align: middle !important;
+      text-align: right;
 
-    &:hover {
-      color: #36afd5;
-      transition: all .45s ease-in-out;
+      .actions {
+        background-image: url(../../../../assets/svg/settings_icon.svg);
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        text-align: center;
+        cursor: pointer;
+      }
     }
 
-    a {
-      padding-left: 5px;
+    .project-seting-item {
+      display: flex;
+      padding: 10px;
+      align-items: center;
+      border-bottom: 1px solid #edf1f5;
+      cursor: pointer;
+      color: #577289;
+
+      &:hover {
+        color: #36afd5;
+        transition: all .45s ease-in-out;
+      }
+
+      a {
+        padding-left: 5px;
+      }
     }
   }
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.ts
index d445ad4..bea63e7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.ts
@@ -9,7 +9,7 @@ import { MatTableDataSource } from '@angular/material/table';
   styleUrls: ['./legion-list.component.scss']
 })
 export class LegionListComponent implements OnInit {
-  private legionClastersList: any[];
+  private legionClustersList: any[];
   private subscriptions: Subscription = new Subscription();
   private dataSource: MatTableDataSource<unknown>;
   displayedColumns: string[] = ['name', 'endpoint-url', 'legion-name', 'legion-status', "actions"];
@@ -22,7 +22,7 @@ export class LegionListComponent implements OnInit {
     this.subscriptions.add(this.legionDeploymentDataService._legionClasters.subscribe(
       (value) => {
         if (value) {
-          this.legionClastersList = value;
+          this.legionClustersList = value;
           this.dataSource = new MatTableDataSource(value);
         }
       }));
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/legion-deployment.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/legion-deployment.service.ts
index 2414257..8a45252 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/legion-deployment.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/legion-deployment.service.ts
@@ -6,21 +6,22 @@ import {from} from "rxjs";
 })
 export class LegionDeploymentService {
   public list =  [{clasters: [
-      {
-        project: "Project5",
-        endpoint: "Endpoint24",
-        name: "claster1",
-      },
-      {
-        project: "Project4",
-        endpoint: "Endpoint23",
-        name: "claster1",
-      },
-      {
-        project: "Project3",
-        endpoint: "Endpoint21",
-        name: "claster1",
-      },]}];
+      // {
+      //   project: "Project5",
+      //   endpoint: "Endpoint24",
+      //   name: "claster1",
+      // },
+      // {
+      //   project: "Project4",
+      //   endpoint: "Endpoint23",
+      //   name: "claster1",
+      // },
+      // {
+      //   project: "Project3",
+      //   endpoint: "Endpoint21",
+      //   name: "claster1",
+      // }
+      ]}];
   constructor() { }
 
   public getLegionClasters(){


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


[incubator-dlab] 02/04: [DLAB-1357]: Added legion icon to Resource page

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

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

commit 09efef4056d5e8a60dd3f5e102c6920b70acd875
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Fri Jan 10 12:56:24 2020 +0200

    [DLAB-1357]: Added legion icon to Resource page
---
 .../detail-dialog/detail-dialog.component.html     | 34 ++++++++++++++++++++--
 .../detail-dialog/detail-dialog.component.ts       |  9 +++++-
 .../resources-grid/resources-grid.component.html   |  5 ++--
 .../resources-grid/resources-grid.component.scss   |  5 ++++
 .../resources-grid/resources-grid.component.ts     |  7 ++++-
 5 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
index 22802ae..778e5dc 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
@@ -18,11 +18,12 @@
   -->
 
 <div class="detail-dialog" id="dialog-box">
-  <header class="dialog-header header-white">
+  <header class="dialog-header " [ngClass]="{'header-white': data.notebook}">
+    <h4 *ngIf="data.legion" class="modal-title" >Legion cluster</h4>
     <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
   </header>
   <div class="dialog-content">
-    <div *ngIf="data">
+    <div *ngIf="data.notebook">
       <table class="detail-header">
         <tr>
           <td>{{notebook.template_name}}</td>
@@ -129,5 +130,34 @@
         </div>
       </div>
     </div>
+    <div class="legion-info" *ngIf="data.legion">
+      <div class="content-box">
+        <div class="detail-info" *ngIf="!legion.error_message">
+        <div class="links_block">
+          <p>
+            <span class="description">URL for feedback storage</span>
+            <a class="ellipsis" matTooltip=" http://172.31.48.131:8080/" matTooltipPosition="above" href=" http://172.31.48.131:8080/"
+               target="_blank">
+              &nbsp; http://172.31.48.131:8080/
+            </a>
+          </p>
+          <p>
+            <span class="description">URL for Swagger API registry</span>
+            <a class="ellipsis" matTooltip=" http://172.31.48.131:8080/" matTooltipPosition="above" href=" http://172.31.48.131:8080/"
+               target="_blank">
+              &nbsp; http://172.31.48.131:8080/
+            </a>
+          </p>
+          <p>
+            <span class="description">URL for Grafana</span>
+            <a class="ellipsis" matTooltip=" http://172.31.48.131:8080/" matTooltipPosition="above" href=" http://172.31.48.131:8080/"
+               target="_blank">
+              &nbsp; http://172.31.48.131:8080/
+            </a>
+          </p>
+        </div>
+    </div>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
index fa05b52..5b4eb23 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
@@ -42,6 +42,7 @@ export class DetailDialogComponent implements OnInit {
   config: Array<{}> = [];
 
   public configurationForm: FormGroup;
+  private legion: any;
 
   @ViewChild('configurationNode', { static: false }) configuration;
 
@@ -52,7 +53,13 @@ export class DetailDialogComponent implements OnInit {
     public dialogRef: MatDialogRef<DetailDialogComponent>,
     public toastr: ToastrService
   ) {
-    this.notebook = data;
+    if(data.notebook){
+      this.notebook = data.notebook;
+    }
+
+    if(data.legion){
+      this.legion = data.legion;
+    }
   }
 
   ngOnInit() {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
index 78e3977..f5e2bdf 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
@@ -103,8 +103,9 @@
         [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" sticky>
 
         <tr *ngFor="let element of element.exploratory; let i = index" class="element-row mat-row">
-          <td class="name-col" (click)="printDetailEnvironmentModal(element)">
-            <span matTooltip="{{ element.name }}" matTooltipPosition="above">{{ element.name }}</span>
+          <td class="name-col">
+            <span matTooltip="{{ element.name }}" matTooltipPosition="above" (click)="printDetailEnvironmentModal(element)">{{ element.name }}</span>
+            <span (click)="printDetailLegionModal(element)" ><i class="material-icons legion-icon">cloud_circle</i></span>
           </td>
           <td class="status-col status" ngClass="{{ element.status.toLowerCase() || ''}}">
             {{element.status | underscoreless }}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
index 682fb7b..16e4d88 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
@@ -375,3 +375,8 @@ tr.detail-row {
   padding: 40px;
   text-align: center;
 }
+
+.legion-icon{
+  vertical-align: middle;
+  margin-left: 10px;
+}
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 8c49782..43f40bf 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
@@ -159,7 +159,12 @@ export class ResourcesGridComponent implements OnInit {
   }
 
   public printDetailEnvironmentModal(data): void {
-    this.dialog.open(DetailDialogComponent, { data: data, panelClass: 'modal-lg' })
+    this.dialog.open(DetailDialogComponent, { data: {notebook: data}, panelClass: 'modal-lg' })
+      .afterClosed().subscribe(() => this.buildGrid());
+  }
+
+  public printDetailLegionModal(data): void {
+    this.dialog.open(DetailDialogComponent, { data: {legion: data}, panelClass: 'modal-lg' })
       .afterClosed().subscribe(() => this.buildGrid());
   }
 


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


[incubator-dlab] 01/04: [DLAB-1357]: Added page Legion deployment

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

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

commit e89888e3412b670045a4e13684a5bd613a066dad
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Fri Jan 10 11:46:12 2020 +0200

    [DLAB-1357]: Added page Legion deployment
---
 .../app/administration/administration.module.ts    |   6 +-
 .../create-legion-cluster.component.html           |  80 +++++++++++++++++++
 .../create-legion-cluster.component.scss           |   8 ++
 .../create-legion-cluster.component.ts             |  87 +++++++++++++++++++++
 .../create-legion-claster/index.ts}                |  27 +++++--
 .../app/administration/legion-deployment/index.ts  |  50 ++++++++++++
 .../legion-deployment-data.service.ts              |  25 ++++++
 .../legion-deployment.component.html               |  50 ++++++++++++
 .../legion-deployment.component.scss               |   0
 .../legion-deployment.component.ts                 |  55 +++++++++++++
 .../legion-list/legion-list.component.html         | Bin 0 -> 2722 bytes
 .../legion-list/legion-list.component.scss         |  62 +++++++++++++++
 .../legion-list/legion-list.component.ts           |  31 ++++++++
 .../resources/webapp/src/app/app.routing.module.ts |   6 ++
 .../webapp/src/app/core/services/index.ts          |   1 +
 .../app/core/services/legion-deployment.service.ts |  34 ++++++++
 .../resources/webapp/src/app/core/util/patterns.ts |   5 +-
 .../src/app/shared/navbar/navbar.component.html    |   5 ++
 18 files changed, 520 insertions(+), 12 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/administration.module.ts b/services/self-service/src/main/resources/webapp/src/app/administration/administration.module.ts
index e535bda..8c19a94 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/administration.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/administration.module.ts
@@ -23,10 +23,10 @@ import { CommonModule } from '@angular/common';
 import { ManagenementModule } from './management';
 import { ProjectModule } from './project';
 import { RolesModule } from './roles';
+import {LegionDeploymentModule} from "./legion-deployment";
 
 @NgModule({
-  imports: [CommonModule, ManagenementModule, ProjectModule, RolesModule],
-  declarations: [],
-  exports: [ManagenementModule, ProjectModule, RolesModule]
+  imports: [CommonModule, ManagenementModule, ProjectModule, RolesModule, LegionDeploymentModule],
+  exports: [ManagenementModule, ProjectModule, RolesModule, LegionDeploymentModule],
 })
 export class AdministrationModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/create-legion-cluster.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/create-legion-cluster.component.html
new file mode 100644
index 0000000..92ee71a
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/create-legion-cluster.component.html
@@ -0,0 +1,80 @@
+<div class="create-legion-cluster" id="dialog-box">
+  <header class="dialog-header">
+    <h4 class="modal-title">Create Legion cluster</h4>
+    <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
+  </header>
+  <div class="dialog-content selection">
+    <div id="scrolling" class="content-box mat-reset scrolling-content">
+      <form [formGroup]="createLegionClusterForm" *ngIf="createLegionClusterForm" novalidate>
+        <div class="control-group">
+          <label class="label">Select project</label>
+          <div class="control selector-wrapper">
+            <mat-form-field>
+              <mat-label>Select project</mat-label>
+              <mat-select formControlName="project" panelClass="create-resources-dialog">
+                <mat-option *ngFor="let project of projects" [value]="project.name" (click)="setEndpoints(project)">
+                  {{ project.name }}</mat-option>
+                <mat-option *ngIf="!projects.length" class="multiple-select ml-10" disabled>
+                  Projects list is empty
+                </mat-option>
+              </mat-select>
+              <button class="caret">
+                <i class="material-icons">keyboard_arrow_down</i>
+              </button>
+            </mat-form-field>
+          </div>
+        </div>
+
+        <div class="control-group">
+          <label class="label">Select endpoint</label>
+          <div class="control selector-wrapper" [ngClass]="{ 'not-active' : !endpoints.length }">
+            <mat-form-field>
+              <mat-label>Select endpoint</mat-label>
+              <mat-select formControlName="endpoint" disableOptionCentering [disabled]="!endpoints.length"
+                          panelClass="create-resources-dialog">
+                <mat-option *ngFor="let endpoint of endpoints" [value]="endpoint">
+                  {{ endpoint }}
+                </mat-option>
+                <mat-option *ngIf="!endpoints.length" class="multiple-select ml-10" disabled>Endpoints list is empty
+                </mat-option>
+              </mat-select>
+              <button class="caret">
+                <i class="material-icons">keyboard_arrow_down</i>
+              </button>
+            </mat-form-field>
+          </div>
+        </div>
+
+        <div class="control-group name-control">
+          <label class="label">Name</label>
+          <div class="control">
+            <input type="text" class="form-control" placeholder="Enter Name" formControlName="name">
+          </div>
+        </div>
+
+        <div class="control-group">
+          <label class="label" [ngStyle]="!createLegionClusterForm.controls.useExistingClusterUrl.value && {'width': '100%' }">
+            <input  type="checkbox" formControlName="useExistingClusterUrl"/> Use existing k8s cluster
+          </label>
+          <div class="control" *ngIf="createLegionClusterForm.controls.useExistingClusterUrl.value">
+            <input type="text" class="form-control"
+                                   formControlName="existingClusterUrl" placeholder="Enter Legion k8s cluster URL"/>
+            <span class="error url-error">
+                  <span *ngIf="!createLegionClusterForm.controls.existingClusterUrl.valid">Please enter valid cluster URL</span>
+                </span>
+          </div>
+        </div>
+
+        <div class="text-center m-top-30">
+          <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button>
+          <button mat-raised-button type="button" class="butt butt-success action"
+                  [disabled]="!createLegionClusterForm.valid" (click)="dialogRef.close(createLegionClusterForm.value)">
+            Create
+          </button>
+        </div>
+
+      </form>
+    </div>
+  </div>
+</div>
+
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/create-legion-cluster.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/create-legion-cluster.component.scss
new file mode 100644
index 0000000..f5dc1ca
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/create-legion-cluster.component.scss
@@ -0,0 +1,8 @@
+.create-legion-cluster{
+  .control-group .error.url-error {
+    position: absolute;
+    right: 179px;
+    top: 35px;
+  }
+}
+
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/create-legion-cluster.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/create-legion-cluster.component.ts
new file mode 100644
index 0000000..b0bebff
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/create-legion-cluster.component.ts
@@ -0,0 +1,87 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, OnInit, Inject } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ToastrService } from 'ngx-toastr';
+
+import { Project } from '../../../administration/project/project.component';
+import { UserResourceService, ProjectService } from '../../../core/services';
+
+import { DICTIONARY } from '../../../../dictionary/global.dictionary';
+import {PATTERNS} from "../../../core/util";
+
+
+@Component({
+  selector: 'create-legion-cluster',
+  templateUrl: 'create-legion-cluster.component.html',
+  styleUrls: ['./create-legion-cluster.component.scss']
+})
+
+export class CreateLegionClusterComponent implements OnInit {
+  readonly DICTIONARY = DICTIONARY;
+  public createLegionClusterForm: FormGroup;
+
+  projects: Project[] = [];
+  endpoints: Array<String> = [];
+  minInstanceNumber = 2;
+  maxInstanceNumber: number = 14;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    public toastr: ToastrService,
+    public dialogRef: MatDialogRef<CreateLegionClusterComponent>,
+    private _fb: FormBuilder,
+    private projectService: ProjectService
+  ) {
+  }
+
+  ngOnInit() {
+    this.getUserProjects();
+    this.initFormModel();
+  }
+
+  public getProjectsgetProjects(): void{
+    this.projectService.getProjectsList().subscribe((projects: any) => this.projects = projects);
+  }
+
+  public getUserProjects(): void {
+    this.projectService.getUserProjectsList(true).subscribe((projects: any) => {
+      this.projects = projects;
+    });
+  }
+
+  public setEndpoints(project): void {
+    this.endpoints = project.endpoints
+      .filter(e => e.status === 'RUNNING')
+      .map(e => e.name);
+  }
+
+  private initFormModel(): void {
+    this.createLegionClusterForm = this._fb.group({
+      project: ['', Validators.required],
+      endpoint: ['', Validators.required],
+      name: ['', Validators.required],
+      useExistingClusterUrl: [false],
+      existingClusterUrl: ['', Validators.pattern(PATTERNS.fullUrl)]
+    });
+  }
+
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/administration.module.ts b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/index.ts
similarity index 54%
copy from services/self-service/src/main/resources/webapp/src/app/administration/administration.module.ts
copy to services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/index.ts
index e535bda..a3adc9c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/administration.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/create-legion-claster/index.ts
@@ -19,14 +19,27 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { ManagenementModule } from './management';
-import { ProjectModule } from './project';
-import { RolesModule } from './roles';
+import { MaterialModule } from '../../../shared/material.module';
+import { FormControlsModule } from '../../../shared/form-controls';
+import { KeysPipeModule, UnderscorelessPipeModule } from '../../../core/pipes';
+import {CreateLegionClusterComponent} from "./create-legion-cluster.component";
+
+export * from './create-legion-cluster.component';
 
 @NgModule({
-  imports: [CommonModule, ManagenementModule, ProjectModule, RolesModule],
-  declarations: [],
-  exports: [ManagenementModule, ProjectModule, RolesModule]
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    FormControlsModule,
+    MaterialModule,
+    KeysPipeModule,
+    UnderscorelessPipeModule
+  ],
+  declarations: [CreateLegionClusterComponent],
+  entryComponents: [CreateLegionClusterComponent],
+  exports: [CreateLegionClusterComponent]
 })
-export class AdministrationModule { }
+export class CreateLegionClusterModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/index.ts b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/index.ts
new file mode 100644
index 0000000..fa28e36
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/index.ts
@@ -0,0 +1,50 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { MaterialModule } from '../../shared/material.module';
+import { FormControlsModule } from '../../shared/form-controls';
+import { UnderscorelessPipeModule } from '../../core/pipes/underscoreless-pipe';
+
+import {BubbleModule} from "../../shared/bubble";
+import {LegionDeploymentComponent} from "./legion-deployment.component";
+import {LegionDeploymentDataService} from "./legion-deployment-data.service";
+import {LegionListComponent} from "./legion-list/legion-list.component";
+import {CreateLegionClusterModule} from "./create-legion-claster";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MaterialModule,
+    FormControlsModule,
+    UnderscorelessPipeModule,
+    BubbleModule,
+    CreateLegionClusterModule
+  ],
+  declarations: [LegionDeploymentComponent, LegionListComponent],
+  entryComponents: [],
+  providers: [LegionDeploymentDataService],
+  exports: [LegionDeploymentComponent]
+})
+export class LegionDeploymentModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment-data.service.ts b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment-data.service.ts
new file mode 100644
index 0000000..4163802
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment-data.service.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import {BehaviorSubject, Observable} from "rxjs";
+import {LegionDeploymentService} from "../../core/services";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class LegionDeploymentDataService {
+  _legionClasters = new BehaviorSubject<any>(null);
+
+  constructor(private legionDeploymentService: LegionDeploymentService) {
+    this.getClastersList();
+  }
+
+  public updateClasters(): void {
+    this.getClastersList();
+  }
+
+  private getClastersList(): void {
+   this.legionDeploymentService.getLegionClasters().subscribe(
+      (response: any ) => this._legionClasters.next(response.clasters));
+  }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.html
new file mode 100644
index 0000000..e403ec8
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.html
@@ -0,0 +1,50 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+
+<div class="base-retreat">
+  <div class="sub-nav">
+    <div>
+      <button mat-raised-button class="butt butt-create" (click)="createLegionClaster()">
+        <i class="material-icons">add</i>Create new
+      </button>
+    </div>
+    <div>
+<!--      <button mat-raised-button class="butt butt-tool mr-10">-->
+<!--        <span *ngIf="!activeFiltering">-->
+<!--          <i class="material-icons">visibility_off</i> Show active-->
+<!--        </span>-->
+<!--        <span *ngIf="activeFiltering">-->
+<!--          <i class="material-icons">visibility</i> Show all-->
+<!--        </span>-->
+<!--      </button>-->
+      <button mat-raised-button class="butt" (click)="refreshGrid()">
+        <i class="material-icons">autorenew</i>Refresh
+      </button>
+    </div>
+  </div>
+
+  <mat-divider></mat-divider>
+
+  <div [hidden]="!legionClastersList.length">
+    <legion-list>
+    </legion-list>
+  </div>
+</div>
+
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.ts
new file mode 100644
index 0000000..c1b7a35
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-deployment.component.ts
@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import {LegionDeploymentDataService} from "./legion-deployment-data.service";
+import {Subscription} from "rxjs";
+import {MatDialog} from "@angular/material/dialog";
+import {ToastrService} from "ngx-toastr";
+import {CreateLegionClusterComponent} from "./create-legion-claster/create-legion-cluster.component";
+import {HealthStatusService, LegionDeploymentService} from "../../core/services";
+
+@Component({
+  selector: 'dlab-legion-deployment',
+  templateUrl: './legion-deployment.component.html',
+  styleUrls: ['./legion-deployment.component.scss']
+})
+export class LegionDeploymentComponent implements OnInit {
+  private legionClastersList: any[];
+  private subscriptions: Subscription = new Subscription();
+  private healthStatus;
+
+  constructor(
+    private legionDeploymentDataService: LegionDeploymentDataService,
+    private dialog: MatDialog,
+    public toastr: ToastrService,
+    public legionDeploymentService: LegionDeploymentService,
+    private healthStatusService: HealthStatusService,
+  ) { }
+
+  ngOnInit() {
+    this.getEnvironmentHealthStatus();
+    this.subscriptions.add(this.legionDeploymentDataService._legionClasters.subscribe(
+      (value) => {
+        if (value) this.legionClastersList = value;
+      }));
+  }
+
+  public createLegionClaster(): void {
+    this.dialog.open(CreateLegionClusterComponent, { panelClass: 'modal-lg' })
+      .afterClosed().subscribe(result => {
+      result && this.createLegionCluster(result);
+        this.refreshGrid()
+      });
+  }
+
+  private createLegionCluster(value): void{
+    this.legionDeploymentService.addLegionCluster(value);
+  }
+
+  private getEnvironmentHealthStatus(): void {
+    this.healthStatusService.getEnvironmentHealthStatus()
+      .subscribe((result: any) => this.healthStatus = result);
+  }
+
+  private refreshGrid(): void {
+    this.legionDeploymentDataService.updateClasters();
+  }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.html
new file mode 100644
index 0000000..80e6b76
Binary files /dev/null and b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.html differ
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.scss
new file mode 100644
index 0000000..514d2f9
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.scss
@@ -0,0 +1,62 @@
+.legion-clasters-table {
+  width: 100%;
+
+  td.settings {
+    position: relative;
+    vertical-align: middle !important;
+    text-align: right;
+  }
+
+  .list-menu {
+    min-width: 190px;
+  }
+
+  .material-icons {
+    font-size: 18px;
+    padding-top: 1px;
+  }
+
+  td.settings .actions {
+    background-image: url(../../../../assets/svg/settings_icon.svg);
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  td.settings {
+    position: relative;
+    vertical-align: middle !important;
+    text-align: right;
+
+    .actions {
+      background-image: url(../../../../assets/svg/settings_icon.svg);
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+
+  .project-seting-item {
+    display: flex;
+    padding: 10px;
+    align-items: center;
+    border-bottom: 1px solid #edf1f5;
+    cursor: pointer;
+    color: #577289;
+
+    &:hover {
+      color: #36afd5;
+      transition: all .45s ease-in-out;
+    }
+
+    a {
+      padding-left: 5px;
+    }
+  }
+}
+
+
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.ts
new file mode 100644
index 0000000..d445ad4
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/legion-deployment/legion-list/legion-list.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import {Subscription} from "rxjs";
+import {LegionDeploymentDataService} from "../legion-deployment-data.service";
+import { MatTableDataSource } from '@angular/material/table';
+
+@Component({
+  selector: 'legion-list',
+  templateUrl: './legion-list.component.html',
+  styleUrls: ['./legion-list.component.scss']
+})
+export class LegionListComponent implements OnInit {
+  private legionClastersList: any[];
+  private subscriptions: Subscription = new Subscription();
+  private dataSource: MatTableDataSource<unknown>;
+  displayedColumns: string[] = ['name', 'endpoint-url', 'legion-name', 'legion-status', "actions"];
+
+  constructor(
+    private legionDeploymentDataService: LegionDeploymentDataService,
+  ) { }
+
+  ngOnInit() {
+    this.subscriptions.add(this.legionDeploymentDataService._legionClasters.subscribe(
+      (value) => {
+        if (value) {
+          this.legionClastersList = value;
+          this.dataSource = new MatTableDataSource(value);
+        }
+      }));
+  }
+
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts b/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts
index 3c8ae3f..912f4dc 100644
--- a/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts
@@ -34,6 +34,7 @@ import { RolesComponent } from './administration/roles/roles.component';
 import { SwaggerComponent } from './swagger/swagger.component';
 
 import { AuthorizationGuard, CheckParamsGuard, CloudProviderGuard, AdminGuard } from './core/services';
+import {LegionDeploymentComponent} from "./administration/legion-deployment/legion-deployment.component";
 
 const routes: Routes = [{
   path: 'login',
@@ -59,6 +60,11 @@ const routes: Routes = [{
       path: 'projects',
       component: ProjectComponent,
       canActivate: [AuthorizationGuard, AdminGuard],
+    },
+     {
+      path: 'legion-deployment',
+      component: LegionDeploymentComponent,
+      canActivate: [AuthorizationGuard,],
     }, {
       path: 'roles',
       component: RolesComponent,
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/index.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/index.ts
index 0068a29..395c667 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/index.ts
@@ -38,3 +38,4 @@ export * from './dataengineConfiguration.service';
 export * from './storage.service';
 export * from './project.service';
 export * from './endpoint.service';
+export * from './legion-deployment.service';
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/legion-deployment.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/legion-deployment.service.ts
new file mode 100644
index 0000000..2414257
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/legion-deployment.service.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import {from} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LegionDeploymentService {
+  public list =  [{clasters: [
+      {
+        project: "Project5",
+        endpoint: "Endpoint24",
+        name: "claster1",
+      },
+      {
+        project: "Project4",
+        endpoint: "Endpoint23",
+        name: "claster1",
+      },
+      {
+        project: "Project3",
+        endpoint: "Endpoint21",
+        name: "claster1",
+      },]}];
+  constructor() { }
+
+  public getLegionClasters(){
+    const obsList = from(this.list);
+    return obsList
+  }
+
+  public addLegionCluster(cluster) {
+    this.list[0].clasters.push(cluster);
+  }
+}
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 52e2670..be14887 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
@@ -23,5 +23,6 @@ export const PATTERNS = {
   delimitersRegex: '[-_]?',
   url: '[a-zA-Z0-9.://%#&\\.@:%-_\+~#=]*\.[^\s]*[a-zA-Z0-9]/+',
   nodeCountPattern: '^[1-9]\\d*$',
-  integerRegex: '^[0-9]*$'
-}
+  integerRegex: '^[0-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-]+\.(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/shared/navbar/navbar.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
index 919dadb..bca5141 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
@@ -88,6 +88,11 @@
               <span *ngIf="isExpanded; else projects">Projects</span>
               <ng-template #projects><i class="material-icons">dns</i></ng-template>
             </a>
+            <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/legion-deployment']"
+               [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+              <span *ngIf="isExpanded; else legion">Legion deployment</span>
+              <ng-template #legion><i class="material-icons">get_app</i></ng-template>
+            </a>
             <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'"
               [routerLink]="['/environment_management']" [routerLinkActive]="['active']"
               [routerLinkActiveOptions]="{exact:true}">


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