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/16 12:41:40 UTC
[incubator-dlab] branch DLAB-1391 created (now 2e4a76e)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a change to branch DLAB-1391
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.
at 2e4a76e [DLAB-1391]: All actions collect in action menu for every project
This branch includes the following new commits:
new a462be8 [DLAB-1391]: Started to collect all actions in action menu for every project
new 2e4a76e [DLAB-1391]: All actions collect in action menu for every project
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] 02/02: [DLAB-1391]: All actions collect in action
menu for every project
Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1391
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 2e4a76ed370d4fed2066bc6b70ae4e9b0880e702
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Mon Dec 16 14:41:10 2019 +0200
[DLAB-1391]: All actions collect in action menu for every project
---
.../project-list/project-list.component.html | 12 +++---
.../project/project-list/project-list.component.ts | 49 +++++++++++++++++++---
.../administration/project/project.component.ts | 34 ++++++++-------
.../webapp/src/app/shared/material.module.ts | 1 +
.../edge-action-dialog}/index.ts | 27 ++++--------
.../webapp/src/app/shared/navbar/index.ts | 5 ++-
6 files changed, 82 insertions(+), 46 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 ad55b29..ad65236 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
@@ -90,21 +90,21 @@
<bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
<ul class="list-unstyled">
<div class="active-items"></div>
- <li class="project-seting-item">
+ <li class="project-seting-item" *ngIf="areStoppedEndpoints(element)">
<i class="material-icons">play_circle_outline</i>
- <a class="action">
+ <a class="action" (click)="openEdgeDialog('start', element)">
Start edge node
</a>
</li>
- <li class="project-seting-item">
+ <li class="project-seting-item" *ngIf="areStartedEndpoints(element)">
<i class="material-icons">pause_circle_outline</i>
- <a class="action">
+ <a class="action" (click)="openEdgeDialog('stop', element )">
Stop edge node
</a>
</li>
- <li class="project-seting-item">
+ <li class="project-seting-item" *ngIf="areStoppedEndpoints(element) || areStartedEndpoints(element)">
<i class="material-icons">highlight_off</i>
- <a class="action">
+ <a class="action" (click)="openEdgeDialog('terminate', element)">
Terminate edge node
</a>
</li>
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 ddc5acb..a8605bd 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
@@ -17,14 +17,16 @@
* under the License.
*/
-import { Component, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import {Component, OnInit, Output, EventEmitter, OnDestroy, Inject} from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MatTableDataSource } from '@angular/material/table';
import { Subscription } from 'rxjs';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { ProjectDataService } from '../project-data.service';
import { Project, Endpoint } from '../project.component';
import { CheckUtils } from '../../../core/util';
+import {EdgeActionDialogComponent} from "../../../shared/modal-dialog/edge-action-dialog";
@Component({
selector: 'project-list',
@@ -45,8 +47,12 @@ export class ProjectListComponent implements OnInit, OnDestroy {
constructor(
public toastr: ToastrService,
- private projectDataService: ProjectDataService
- ) { }
+ private projectDataService: ProjectDataService,
+ @Inject(MAT_DIALOG_DATA) public data: any,
+ public dialogRef: MatDialogRef<ProjectListComponent>,
+ public dialog: MatDialog,
+ ) {
+ }
ngOnInit() {
@@ -65,13 +71,13 @@ export class ProjectListComponent implements OnInit, OnDestroy {
const filteredList = this.projectList.map(project => {
project.endpoints = project.endpoints.filter((endpoint: Endpoint) => endpoint.status !== 'TERMINATED' && endpoint.status !== 'TERMINATING' && endpoint.status !== 'FAILED')
return project;
- })
+ });
this.dataSource = new MatTableDataSource(filteredList);
}
public toggleEndpointAction(project, action, endpoint) {
- this.toggleStatus.emit({ project, endpoint, action });
+ this.toggleStatus.emit({project, endpoint, action});
}
public editProject(item: Project[]) {
@@ -95,4 +101,35 @@ export class ProjectListComponent implements OnInit, OnDestroy {
public toEndpointStatus(status) {
return CheckUtils.endpointStatus[status] || status;
}
-}
\ No newline at end of file
+
+ public openEdgeDialog(action, project) {
+ const endpoints = project.endpoints.filter(endpoint => {
+ if(action === "stop"){
+ return endpoint.status == 'RUNNING'
+ }
+ if(action === "start"){
+ return endpoint.status == 'STOPPED'
+ }
+ if(action === "terminate"){
+ return endpoint.status == 'RUNNING' || endpoint.status == 'STOPPED'
+ }
+ });
+ this.dialog.open(EdgeActionDialogComponent, {data: {type: action, item: endpoints}, panelClass: 'modal-sm'})
+ .afterClosed().subscribe(endpoint => {
+ this.toggleStatus.emit({project, endpoint, action});
+ console.log(endpoint)
+ // result && this.endpointService.deleteEndpoint(data.name).subscribe(() => {
+ // this.toastr.success('Endpoint successfully deleted!', 'Success!');
+
+ // }, error => this.toastr.error(error.message || 'Endpoint creation failed!', 'Oops!'));
+ });
+ }
+
+ public areStartedEndpoints(project) {
+ return project.endpoints.filter(endpoint => endpoint.status == 'RUNNING').length > 0;
+ }
+
+ public areStoppedEndpoints(project) {
+ return project.endpoints.filter(endpoint => endpoint.status == 'STOPPED').length > 0;
+ }
+}
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..6ea0c25 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
@@ -114,24 +114,28 @@ export class ProjectComponent implements OnInit, OnDestroy {
}
public toggleStatus($event) {
- const data = { 'project_name': $event.project.name, endpoint: $event.endpoint.name };
- if ($event.action === 'stop' || $event.action === 'terminate') {
- this.dialog.open(NotificationDialogComponent, {
- data: {
- type: 'confirmation',
- template: `Edge node in endpoint <span class="strong">${$event.endpoint.name}</span> will be ${$event.action === 'stop' ? 'stopped' : 'terminated'} for <span class="strong">${$event.project.name}</span>`,
- item: $event.endpoint, action: $event.action === 'stop' ? 'stopped' : 'terminated'
- }, panelClass: 'modal-sm'
- })
- .afterClosed().subscribe(result => {
- result && this.toggleStatusRequest(data, $event.action);
- }, error => this.toastr.error(error.message, 'Oops!'));
- } else {
- this.toggleStatusRequest(data, $event.action);
- }
+ console.log($event);
+ const data = { 'project_name': $event.project.name, endpoint: $event.endpoint.map(endpoint => endpoint.name)};
+
+ console.log(data)
+ // if ($event.action === 'stop' || $event.action === 'terminate') {
+ // this.dialog.open(NotificationDialogComponent, {
+ // data: {
+ // type: 'confirmation',
+ // template: `Edge node in endpoint <span class="strong">${$event.endpoint.name}</span> will be ${$event.action === 'stop' ? 'stopped' : 'terminated'} for <span class="strong">${$event.project.name}</span>`,
+ // item: $event.endpoint, action: $event.action === 'stop' ? 'stopped' : 'terminated'
+ // }, panelClass: 'modal-sm'
+ // })
+ // .afterClosed().subscribe(result => {
+ // result && this.toggleStatusRequest(data, $event.action);
+ // }, error => this.toastr.error(error.message, 'Oops!'));
+ // } else {
+ // this.toggleStatusRequest(data, $event.action);
+ // }
}
private toggleStatusRequest(data, action) {
+ console.log(data);
this.projectService.toggleProjectStatus(data, action).subscribe(() => {
this.refreshGrid();
this.toastr.success(`Endpoint ${this.toEndpointAction(action)} is in progress!`, 'Processing!');
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/material.module.ts b/services/self-service/src/main/resources/webapp/src/app/shared/material.module.ts
index ef81fe5..f5b953d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/material.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/material.module.ts
@@ -52,6 +52,7 @@ import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { DateAdapter } from '@angular/material/core';
+import { EdgeActionDialogComponent } from './modal-dialog/edge-action-dialog/edge-action-dialog.component';
@NgModule({
exports: [
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/index.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/index.ts
similarity index 60%
copy from services/self-service/src/main/resources/webapp/src/app/shared/navbar/index.ts
copy to services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/index.ts
index c5f19a4..fd6e98a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/index.ts
@@ -19,25 +19,16 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { MaterialModule } from '../material.module';
-import { ProgressDialogModule, BubbleModule } from '../index';
+import { EdgeActionDialogComponent } from './edge-action-dialog.component';
+import { MaterialModule } from '../../material.module';
+import {FormsModule} from "@angular/forms";
-import { NavbarComponent } from './navbar.component';
-import { NotificationDialogModule } from '../modal-dialog/notification-dialog';
-
-export * from './navbar.component';
+export * from './edge-action-dialog.component';
@NgModule({
- imports: [
- CommonModule,
- RouterModule,
- MaterialModule,
- NotificationDialogModule,
- ProgressDialogModule,
- BubbleModule
- ],
- declarations: [NavbarComponent],
- exports: [NavbarComponent, RouterModule]
+ imports: [CommonModule, MaterialModule, FormsModule],
+ declarations: [EdgeActionDialogComponent],
+ entryComponents: [EdgeActionDialogComponent],
+ exports: [EdgeActionDialogComponent]
})
-export class NavbarModule { }
+export class EdgeActionDialogModule {}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/index.ts b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/index.ts
index c5f19a4..c852892 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/index.ts
@@ -25,6 +25,7 @@ import { ProgressDialogModule, BubbleModule } from '../index';
import { NavbarComponent } from './navbar.component';
import { NotificationDialogModule } from '../modal-dialog/notification-dialog';
+import {EdgeActionDialogModule} from "../modal-dialog/edge-action-dialog";
export * from './navbar.component';
@@ -34,8 +35,10 @@ export * from './navbar.component';
RouterModule,
MaterialModule,
NotificationDialogModule,
+ EdgeActionDialogModule,
ProgressDialogModule,
- BubbleModule
+ BubbleModule,
+ EdgeActionDialogModule
],
declarations: [NavbarComponent],
exports: [NavbarComponent, RouterModule]
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org
[incubator-dlab] 01/02: [DLAB-1391]: Started to collect all actions
in action menu for every project
Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1391
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit a462be8237f984cfb0ee7a07627c7dd3897624cd
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Fri Dec 13 16:26:06 2019 +0200
[DLAB-1391]: Started to collect all actions in action menu for every project
---
.../webapp/src/app/administration/project/index.ts | 6 +-
.../project-list/project-list.component.html | 65 ++++++++++++++++++----
.../project-list/project-list.component.scss | 26 +++++++++
.../src/app/shared/bubble/bubble.component.css | 2 +-
4 files changed, 84 insertions(+), 15 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/index.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/index.ts
index f03b47e..609ea59 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/index.ts
@@ -30,6 +30,7 @@ import { ProjectListComponent } from './project-list/project-list.component';
import { ProjectComponent, EditProjectComponent } from './project.component';
import { ProjectDataService } from './project-data.service';
+import {BubbleModule} from "../../shared/bubble";
@NgModule({
imports: [
@@ -38,11 +39,12 @@ import { ProjectDataService } from './project-data.service';
ReactiveFormsModule,
MaterialModule,
FormControlsModule,
- UnderscorelessPipeModule
+ UnderscorelessPipeModule,
+ BubbleModule
],
declarations: [ProjectComponent, EditProjectComponent, ProjectFormComponent, ProjectListComponent],
entryComponents: [EditProjectComponent],
providers: [ProjectDataService],
exports: [ProjectComponent]
})
-export class ProjectModule { }
\ No newline at end of file
+export class ProjectModule { }
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 de8741a..ad55b29 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
@@ -73,18 +73,59 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="project-actions"></th>
- <td mat-cell *matCellDef="let element" class="project-actions">
- <span>
- <a (click)="editProject(element)">
- <mat-icon>mode_edit</mat-icon>
- </a>
- </span>
- <span>
- <a (click)="deleteProject(element)" class="action"
- [ngClass]="{'not-allowed' : isInProgress(element) || !isActiveEndpoint(element) }">
- <mat-icon>delete_forever</mat-icon>
- </a>
- </span>
+ <td mat-cell *matCellDef="let element" class="settings">
+<!-- <span>-->
+<!-- <a (click)="editProject(element)">-->
+<!-- <mat-icon>mode_edit</mat-icon>-->
+<!-- </a>-->
+<!-- </span>-->
+<!-- <span>-->
+<!-- <a (click)="deleteProject(element)" class="action"-->
+<!-- [ngClass]="{'not-allowed' : isInProgress(element) || !isActiveEndpoint(element) }">-->
+<!-- <mat-icon>delete_forever</mat-icon>-->
+<!-- </a>-->
+<!-- </span>-->
+
+ <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">
+ <div class="active-items"></div>
+ <li class="project-seting-item">
+ <i class="material-icons">play_circle_outline</i>
+ <a class="action">
+ Start edge node
+ </a>
+ </li>
+ <li class="project-seting-item">
+ <i class="material-icons">pause_circle_outline</i>
+ <a class="action">
+ Stop edge node
+ </a>
+ </li>
+ <li class="project-seting-item">
+ <i class="material-icons">highlight_off</i>
+ <a class="action">
+ Terminate edge node
+ </a>
+ </li>
+ <li class="project-seting-item">
+ <mat-icon>mode_edit</mat-icon>
+ <a (click)="editProject(element)">
+ Edit {{element.name }}
+ </a>
+ </li>
+ <li class="project-seting-item" *ngIf="!isInProgress(element) && isActiveEndpoint(element)">
+ <mat-icon>delete_forever</mat-icon>
+ <a (click)="deleteProject(element)" class="action"
+ [ngClass]="{'not-allowed' : isInProgress(element) || !isActiveEndpoint(element) }">
+ Delete {{element.name }}
+ </a>
+ </li>
+ </ul>
+ </bubble-up>
+ </td>
+ <td class="settings">
+
</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 c37e628..cb0f561 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
@@ -87,3 +87,29 @@ table {
}
}
}
+
+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;
+ a{
+ padding-left: 5px;
+ }
+}
+
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css
index 90c88aa..331f715 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css
@@ -18,7 +18,7 @@
*/
.bubble-up {
- width: 100%;
+ width: 100%;
background: #fff;
border: none;
display: none;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org