This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1390
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 25b0ec7002a564873f67457ff8c8b9914f3efbe0
Merge: 4d82bdf 3c0f019
Author: Dmytro Gnatyshyn <di1...@ukr.net>
AuthorDate: Fri Dec 27 13:30:36 2019 +0200
[DLAB-1390]: Added Endpoint Status on project page
.../dlab/backendapi/resources/ProjectResource.java | 16 ++---
.../resources/dto/ProjectActionFormDTO.java | 7 +-
.../dlab/backendapi/service/ProjectService.java | 6 ++
.../webapp/src/app/administration/project/index.ts | 6 +-
.../project-list/project-list.component.html | 76 ++++++++++++++--------
.../project-list/project-list.component.scss | 60 +++++++++++++++--
.../project/project-list/project-list.component.ts | 53 +++++++++++++--
.../administration/project/project.component.ts | 17 +----
.../src/app/core/services/endpoint.service.ts | 5 +-
.../detail-dialog/detail-dialog.component.html | 2 +-
.../install-libraries.component.html | 2 +-
.../install-libraries.component.scss | 6 +-
.../src/app/shared/bubble/bubble.component.css | 2 +-
.../webapp/src/app/shared/material.module.ts | 1 -
.../edge-action-dialog.component.ts | 72 ++++++++++++++++++++
.../edge-action-dialog}/index.ts | 27 +++-----
.../webapp/src/app/shared/navbar/index.ts | 4 +-
17 files changed, 271 insertions(+), 91 deletions(-)
diff --cc
services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
index de8741a,3c34f3c..06246d4
---
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
@@@ -48,24 -49,30 +49,14 @@@
{{ endpoint.name }}
</a>
</div>
+ <div class="resource-status">
- <a class="detailed-link">
- {{ endpoint.name }}
- </a>
++ <span [ngClass]="{'active' : endpoint.endpointStatus ===
'ACTIVE', 'failed': endpoint.endpointStatus === 'INACTIVE'}">
++ {{ endpoint.endpointStatus | titlecase }}
++ </span>
+ </div>
+
<span class="status resource-status"
ngClass="{{endpoint.status.toLowerCase() || ''}}">{{
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' || endpoint.status ===
'STOPPING'"
- [ngClass]="{'not-active' : endpoint.status ===
'STOPPING'}">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>
-<!-- <div class="resource-actions">-->
-<!-- <a class="start-stop-action">-->
-<!-- <i class="material-icons"
(click)="toggleEndpointAction(element, 'stop', endpoint)"-->
-<!-- *ngIf="endpoint.status === 'RUNNING' || endpoint.status
=== 'STOPPING'"-->
-<!-- [ngClass]="{'not-active' : endpoint.status ===
'STOPPING'}">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>
-<!-- <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>
@@@ -73,18 -80,59 +64,47 @@@
<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"
*ngIf="areStoppedEndpoints(element)">
+ <i class="material-icons">play_circle_outline</i>
+ <a class="action" (click)="openEdgeDialog('start', element)">
+ Start edge node
+ </a>
+ </li>
+ <li class="project-seting-item"
*ngIf="areStartedEndpoints(element)">
+ <i class="material-icons">pause_circle_outline</i>
+ <a class="action" (click)="openEdgeDialog('stop', element )">
+ Stop edge node
+ </a>
+ </li>
+ <li class="project-seting-item "
*ngIf="areStoppedEndpoints(element) || areStartedEndpoints(element)">
+ <i class="material-icons">highlight_off</i>
+ <a class="action" (click)="openEdgeDialog('terminate', element)">
+ Terminate edge node
+ </a>
+ </li>
+ <li class="project-seting-item">
+ <i class="material-icons">mode_edit</i>
+ <a (click)="editProject(element)">
+ Edit {{element.name }}
+ </a>
+ </li>
+ <li class="project-seting-item" *ngIf="!isInProgress(element) &&
isActiveEndpoint(element)">
+ <i class="material-icons">delete_forever</i>
+ <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 --cc
services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
index 1e2d3a8,e5feeac..5256d77
---
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
@@@ -25,7 -26,7 +26,9 @@@ import { MatDialogRef, MAT_DIALOG_DATA
import { ProjectDataService } from '../project-data.service';
import { Project, Endpoint } from '../project.component';
import { CheckUtils } from '../../../core/util';
+import {ProgressBarService} from
"../../../core/services/progress-bar.service";
+ import {EdgeActionDialogComponent} from
"../../../shared/modal-dialog/edge-action-dialog";
++import {EndpointService} from "../../../core/services";
@Component({
selector: 'project-list',
@@@ -41,14 -42,17 +44,18 @@@ export class ProjectListComponent imple
@Output() editItem: EventEmitter<{}> = new EventEmitter();
@Output() deleteItem: EventEmitter<{}> = new EventEmitter();
@Output() toggleStatus: EventEmitter<{}> = new EventEmitter();
--
private subscriptions: Subscription = new Subscription();
constructor(
public toastr: ToastrService,
private projectDataService: ProjectDataService,
+ private progressBarService: ProgressBarService,
- ) { }
++ private endpointService: EndpointService,
+ @Inject(MAT_DIALOG_DATA) public data: any,
+ public dialogRef: MatDialogRef<ProjectListComponent>,
+ public dialog: MatDialog,
+ ) {
+ }
ngOnInit() {
@@@ -59,18 -66,9 +66,25 @@@
this.subscriptions.unsubscribe();
}
+ private getProjectList(){
+ setTimeout(() => {this.progressBarService.startProgressBar()} , 0);
+
this.subscriptions.add(this.projectDataService._projects.subscribe((value:
Project[]) => {
+ this.projectList = value;
++ this.endpointService.getEndpointsData().subscribe((endpoints: any) => {
++ if(this.projectList){
++ this.projectList.forEach(project =>
project.endpoints.forEach(endpoint => {
++ endpoint.endpointStatus = endpoints.filter(v => v.name ===
endpoint.name)[0].status;
++ }))
++ }
++ });
+ if (value) this.dataSource = new MatTableDataSource(value);
+ this.progressBarService.stopProgressBar();
+ }, () => this.progressBarService.stopProgressBar()));
+ }
+
public showActiveInstances(): void {
const filteredList = this.projectList.map(project => {
-- project.endpoints = project.endpoints.filter((endpoint: Endpoint) =>
endpoint.status !== 'TERMINATED' && endpoint.status !== 'TERMINATING' &&
endpoint.status !== 'FAILED')
++ project.endpoints = project.endpoints.filter((endpoint: Endpoint) =>
endpoint.status !== 'TERMINATED' && endpoint.status !== 'TERMINATING' &&
endpoint.status !== 'FAILED');
return project;
});
diff --cc
services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts
index da7c986,52d2ff2..382cd17
---
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
@@@ -35,10 -35,10 +35,10 @@@ export interface Endpoint
export interface Project {
name: string;
-- endpoints: Endpoint[];
++ endpoints: any;
tag: string;
groups: string[];
- // shared_image_enabled?: boolean;
+ shared_image_enabled?: boolean;
}
@Component({
diff --cc
services/self-service/src/main/resources/webapp/src/app/core/services/endpoint.service.ts
index aa94418,98801b4..2abe823
---
a/services/self-service/src/main/resources/webapp/src/app/core/services/endpoint.service.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/core/services/endpoint.service.ts
@@@ -35,7 -35,7 +35,10 @@@ export class EndpointService
return this.applicationServiceFacade
.buildGetEndpointsData()
.pipe(
-- map(response => response),
++ map(response => {
++ console.log(response);
++ return response
++ }),
catchError(ErrorUtils.handleServiceError));
}
diff --cc
services/self-service/src/main/resources/webapp/src/app/shared/material.module.ts
index ef81fe5,f5b953d..44f2ca3
---
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
@@@ -51,7 -51,8 +51,6 @@@ import { MatTableModule } from '@angula
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 --cc
services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
index 0000000,6f64d3f..0152c3d
mode 000000,100644..100644
---
a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
@@@ -1,0 -1,73 +1,72 @@@
+ import { Component, Inject } from '@angular/core';
+ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+
+ @Component({
+ selector: 'edge-action-dialog',
+ template: `
+ <div id="dialog-box">
+ <header class="dialog-header">
- <h4 class="modal-title"><i
class="material-icons">priority_high</i><span
class="action">{{data.type}}</span> endpoints</h4>
++ <h4 class="modal-title"><span class="action">{{data.type |
titlecase}}</span> endpoints</h4>
+ <button type="button" class="close"
(click)="dialogRef.close()">×</button>
+ </header>
+ <div mat-dialog-content class="content message">
+ <h3 class="strong">Select the items you want to {{data.type}}</h3>
+ <ul class="endpoint-list scrolling-content">
- <li *ngFor="let endpoint of data.item"
class="endpoint-list-item">
++ <li *ngFor="let endpoint of data.item"
class="endpoint-list-item">
+ <label class="strong">
+ <input type="checkbox" [(ngModel)]="endpoint.checked"
(change)="endpointAction()">
+ {{endpoint.name}}
+ </label>
+ </li>
+ </ul>
- </div>
++ </div>
+ <p class="m-top-20 action-text"><span class="strong">Do you want to
proceed?</span></p>
-
++
+ <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(endpointsNewStatus)">Yes</button>
+ </div>
+ </div>
+ `,
+ styles: [`
+ .content { color: #718ba6; padding: 20px 50px; font-size: 14px;
font-weight: 400; margin: 0; }
+ .info { color: #35afd5; }
+ .info .confirm-dialog { color: #607D8B; }
+ header { display: flex; justify-content: space-between; color: #607D8B; }
+ header h4 i { vertical-align: bottom; }
+ header a i { font-size: 20px; }
+ header a:hover i { color: #35afd5; cursor: pointer; }
+ .endpoint-list{text-align: left; margin-top: 30px}
+ .endpoint-list-item{padding: 5px 0}
+ .action{text-transform: capitalize}
+ .action-text { text-align: center; }
- .label-name { display: inline-block; width: 100% }
++ .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;}
+ label { font-size: 15px; font-weight: 500; font-family: "Open
Sans",sans-serif; cursor: pointer; display: flex; align-items: center;}
+ label input {margin-top: 2px; margin-right: 5px;}
-
++
+ .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;}
+ `]
+ })
+
+ export class EdgeActionDialogComponent {
+ public endpointsNewStatus: Array<object>;
+ constructor(
+ public dialogRef: MatDialogRef<EdgeActionDialogComponent>,
+ @Inject(MAT_DIALOG_DATA) public data: any) {
- console.log(data)
+ }
+
+ ngOnInit() {
+ }
+
+ public endpointAction() {
+ this.endpointsNewStatus = this.data.item.filter(endpoint =>
endpoint.checked);
+ }
+ }
diff --cc
services/self-service/src/main/resources/webapp/src/app/shared/navbar/index.ts
index c5f19a4,c852892..7a6f2d4
---
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
@@@ -34,8 -35,10 +35,9 @@@ export * from './navbar.component'
RouterModule,
MaterialModule,
NotificationDialogModule,
+ EdgeActionDialogModule,
ProgressDialogModule,
- BubbleModule
+ BubbleModule,
- EdgeActionDialogModule
],
declarations: [NavbarComponent],
exports: [NavbarComponent, RouterModule]
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@dlab.apache.org
For additional commands, e-mail: commits-h...@dlab.apache.org
