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/02/04 12:48:50 UTC
[incubator-dlab] 01/01: [DLAB-1512]: Combined the similar action
for a project
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1512
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 169eab6bfed8ba99813765b1b99fc8869a059f89
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Feb 4 14:47:51 2020 +0200
[DLAB-1512]: Combined the similar action for a project
---
.../management-grid/management-grid.component.ts | 6 ++--
.../project-list/project-list.component.html | 6 ----
.../project/project-list/project-list.component.ts | 34 ++++++++-----------
.../administration/project/project.component.ts | 9 -----
.../install-libraries.component.ts | 32 +++++++++---------
.../edge-action-dialog.component.ts | 38 +++++++++++++++++-----
6 files changed, 63 insertions(+), 62 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
index f13f0b5..f8f6b84 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
@@ -27,7 +27,7 @@ import { ConfirmationDialogType } from '../../../shared';
import { ConfirmationDialogComponent } from '../../../shared/modal-dialog/confirmation-dialog';
import { EnvironmentsDataService } from '../management-data.service';
import { EnvironmentModel, ManagementConfigModel } from '../management.model';
-import {ProgressBarService} from "../../../core/services/progress-bar.service";
+import {ProgressBarService} from '../../../core/services/progress-bar.service';
export interface ManageAction {
action: string;
@@ -72,11 +72,11 @@ export class ManagementGridComponent implements OnInit {
) { }
ngOnInit() {
- this.getEnvironmentData()
+ this.getEnvironmentData();
}
getEnvironmentData() {
- setTimeout(() => {this.progressBarService.startProgressBar()} , 0);
+ setTimeout(() => {this.progressBarService.startProgressBar();} , 0);
this.environmentsDataService._data.subscribe(data => {
if (data) {
this.allEnvironmentData = EnvironmentModel.loadEnvironments(data);
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 efed1eb..a2fc6cf 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
@@ -93,12 +93,6 @@
Edit project
</a>
</li>
- <li class="project-seting-item" *ngIf="!isInProgress(element) && isActiveEndpoint(element)" (click)="deleteProject(element)">
- <i class="material-icons">delete_forever</i>
- <a class="action" [ngClass]="{'not-allowed' : isInProgress(element) || !isActiveEndpoint(element) }">
- Delete project
- </a>
- </li>
</ul>
</bubble-up>
</td>
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 b57dd29..9010480 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
@@ -26,9 +26,8 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dial
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";
+import {ProgressBarService} from '../../../core/services/progress-bar.service';
+import {EdgeActionDialogComponent} from '../../../shared/modal-dialog/edge-action-dialog';
@Component({
selector: 'project-list',
@@ -42,7 +41,6 @@ export class ProjectListComponent implements OnInit, OnDestroy {
projectList: Project[];
@Output() editItem: EventEmitter<{}> = new EventEmitter();
- @Output() deleteItem: EventEmitter<{}> = new EventEmitter();
@Output() toggleStatus: EventEmitter<{}> = new EventEmitter();
private subscriptions: Subscription = new Subscription();
@@ -65,8 +63,8 @@ export class ProjectListComponent implements OnInit, OnDestroy {
this.subscriptions.unsubscribe();
}
- private getProjectList(){
- setTimeout(() => {this.progressBarService.startProgressBar()} , 0);
+ private getProjectList() {
+ setTimeout(() => {this.progressBarService.startProgressBar(); } , 0);
this.subscriptions.add(this.projectDataService._projects.subscribe((value: Project[]) => {
this.projectList = value;
if (value) this.dataSource = new MatTableDataSource(value);
@@ -91,13 +89,9 @@ export class ProjectListComponent implements OnInit, OnDestroy {
this.editItem.emit(item);
}
- public deleteProject(item: Project[]) {
- this.deleteItem.emit(item);
- }
-
public isInProgress(project) {
if (project)
- return project.endpoints.some(e => e.status !== 'RUNNING' && e.status !== 'STOPPED' && e.status !== 'TERMINATED' && e.status !== 'FAILED')
+ return project.endpoints.some(e => e.status !== 'RUNNING' && e.status !== 'STOPPED' && e.status !== 'TERMINATED' && e.status !== 'FAILED');
}
public isActiveEndpoint(project) {
@@ -111,19 +105,19 @@ export class ProjectListComponent implements OnInit, OnDestroy {
public openEdgeDialog(action, project) {
const endpoints = project.endpoints.filter(endpoint => {
- if(action === "stop"){
- return endpoint.status == 'RUNNING'
+ if (action === 'stop') {
+ return endpoint.status === 'RUNNING';
}
- if(action === "start"){
- return endpoint.status == 'STOPPED'
+ if (action === 'start') {
+ return endpoint.status === 'STOPPED';
}
- if(action === "terminate"){
- return endpoint.status == 'RUNNING' || 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 => {
- if(endpoint && endpoint.length){
+ if (endpoint && endpoint.length) {
this.toggleStatus.emit({project, endpoint, action});
}
}, error => this.toastr.error(error.message || `Endpoint ${action} failed!`, 'Oops!')
@@ -131,10 +125,10 @@ export class ProjectListComponent implements OnInit, OnDestroy {
}
public areStartedEndpoints(project) {
- return project.endpoints.filter(endpoint => endpoint.status == 'RUNNING').length > 0;
+ return project.endpoints.filter(endpoint => endpoint.status === 'RUNNING').length > 0;
}
public areStoppedEndpoints(project) {
- return project.endpoints.filter(endpoint => endpoint.status == 'STOPPED').length > 0;
+ 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 06a4f2a..ba3d45a 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
@@ -104,15 +104,6 @@ export class ProjectComponent implements OnInit, OnDestroy {
});
}
- public deleteProject($event) {
- this.dialog.open(NotificationDialogComponent, { data: { type: 'confirmation', item: $event , action: 'decommissioned', }, panelClass: 'modal-sm' })
- .afterClosed().subscribe(result => {
- result && this.projectService.deleteProject($event.name).subscribe(() => {
- this.refreshGrid();
- });
- });
- }
-
public toggleStatus($event) {
const data = { 'project_name': $event.project.name, endpoint: $event.endpoint.map(endpoint => endpoint.name)};
this.toggleStatusRequest(data, $event.action);
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts
index 0b49cb7..3bee009 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts
@@ -27,7 +27,7 @@ import { debounceTime } from 'rxjs/operators';
import { InstallLibrariesModel } from './install-libraries.model';
import { LibrariesInstallationService } from '../../../core/services';
import { SortUtils, HTTP_STATUS_CODES } from '../../../core/util';
-import {FilterLibsModel} from "./filter-libs.model";
+import {FilterLibsModel} from './filter-libs.model';
@Component({
@@ -69,8 +69,8 @@ export class InstallLibrariesComponent implements OnInit {
private clear: number;
private clearCheckInstalling = undefined;
- public filterConfiguration: FilterLibsModel = new FilterLibsModel('',[],[],[],[]);
- public filterModel: FilterLibsModel = new FilterLibsModel('', [], [], [],[]);
+ public filterConfiguration: FilterLibsModel = new FilterLibsModel('', [], [], [], []);
+ public filterModel: FilterLibsModel = new FilterLibsModel('', [], [], [], []);
public filtered: boolean;
public filtredNotebookLibs: Array<any> = [];
@@ -199,10 +199,12 @@ export class InstallLibrariesComponent implements OnInit {
if (response.status === HTTP_STATUS_CODES.OK) {
this.getInstalledLibrariesList();
this.resetDialog();
+ console.log('Open response status');
}
},
error => this.toastr.error(error.message || 'Library installation failed!', 'Oops!'),
() => {
+ console.log('Failed open response status');
this.getInstalledLibrariesList(true);
this.changeDetector.detectChanges();
this.selectorsReset();
@@ -217,7 +219,7 @@ export class InstallLibrariesComponent implements OnInit {
public isInstallingInProgress(): void {
const isInstallingNow = this.notebookLibs.some(lib => lib.filteredStatus.some(status => status.status === 'installing'));
- if (isInstallingNow){
+ if (isInstallingNow) {
this.clearCheckInstalling = window.setInterval(() => this.getInstalledLibrariesList(), 10000);
} else {
window.clearInterval(this.clearCheckInstalling);
@@ -237,28 +239,28 @@ export class InstallLibrariesComponent implements OnInit {
private getInstalledLibrariesList(init?: boolean) {
this.model.getInstalledLibrariesList(this.notebook)
.subscribe((data: any) => {
- if( !this.filtredNotebookLibs.length || data.length !== this.notebookLibs.length){
+ if ( !this.filtredNotebookLibs.length || data.length !== this.notebookLibs.length) {
this.filtredNotebookLibs = [...data];
}
this.filtredNotebookLibs = data.filter(lib => this.filtredNotebookLibs.some(v => (v.name + v.version === lib.name + v.version) && v.resource === lib.resource));
this.notebookLibs = data ? data : [];
this.notebookLibs.forEach(lib => {
lib.filteredStatus = lib.status;
- if(lib.version && lib.version !== 'N/A')
- lib.version = 'v.' + lib.version
+ if (lib.version && lib.version !== 'N/A')
+ lib.version = 'v.' + lib.version;
}
);
this.changeDetector.markForCheck();
- this.filterConfiguration.group = this.createFilterList(this.notebookLibs.map(v=>this.groupsListMap[v.group]));
- this.filterConfiguration.resource = this.createFilterList(this.notebookLibs.map(lib=>lib.status.map(status=>status.resource)));
- this.filterConfiguration.resourceType = this.createFilterList(this.notebookLibs.map(lib=>lib.status.map(status=>status.resourceType)));
- this.filterConfiguration.status = this.createFilterList(this.notebookLibs.map(lib=>lib.status.map(status=>status.status)));
+ this.filterConfiguration.group = this.createFilterList(this.notebookLibs.map(v => this.groupsListMap[v.group]));
+ this.filterConfiguration.resource = this.createFilterList(this.notebookLibs.map(lib => lib.status.map(status => status.resource)));
+ this.filterConfiguration.resourceType = this.createFilterList(this.notebookLibs.map(lib => lib.status.map(status => status.resourceType)));
+ this.filterConfiguration.status = this.createFilterList(this.notebookLibs.map(lib => lib.status.map(status => status.status)));
this.isInstallingInProgress();
});
}
public createFilterList(array): [] {
- return array.flat().filter((v,i,arr)=> arr.indexOf(v) === i);
+ return array.flat().filter((v, i, arr) => arr.indexOf(v) === i);
}
private getInstalledLibsByResource() {
@@ -325,7 +327,7 @@ export class InstallLibrariesComponent implements OnInit {
}
public toggleFilterRow(): void {
- this.filtered = !this.filtered
+ this.filtered = !this.filtered;
}
public filterLibs(): void {
@@ -333,10 +335,10 @@ export class InstallLibrariesComponent implements OnInit {
const isName = this.filterModel.name ? lib.name.toLowerCase().indexOf(this.filterModel.name.toLowerCase().trim()) !== -1 || lib.version.indexOf(this.filterModel.name.toLowerCase().trim()) !== -1 : true;
const isGroup = this.filterModel.group.length ? this.filterModel.group.includes(this.groupsListMap[lib.group]) : true;
lib.filteredStatus = lib.status.filter(status => {
- const isResource = this.filterModel.resource.length ? this.filterModel.resource.includes(status.resource) :true;
+ const isResource = this.filterModel.resource.length ? this.filterModel.resource.includes(status.resource) : true;
const isResourceType = this.filterModel.resourceType.length ? this.filterModel.resourceType.includes(status.resourceType) : true;
const isStatus = this.filterModel.status.length ? this.filterModel.status.includes(status.status) : true;
- return isResource && isResourceType && isStatus
+ return isResource && isResourceType && isStatus;
});
return isName && isGroup && lib.filteredStatus.length;
});
diff --git 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
index 511cd62..b514e78 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
@@ -11,14 +11,22 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
<button type="button" class="close" (click)="closeModal()">×</button>
</header>
<div mat-dialog-content class="content message mat-dialog-content">
- <h3 class="strong">Select the items you want to {{data.type}}</h3>
+ <h3 class="strong">Select the edge nodes you want to {{data.type}}</h3>
<ul class="endpoint-list scrolling-content">
- <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>
+ <li *ngIf="data.item.length>1" class="endpoint-list-item header-item">
+ <label class="strong all">
+ <input type="checkbox" [(ngModel)]="isAllChecked" (change)="chooseAll()">
+ {{data.type | titlecase}} all
+ </label>
+ </li>
+ <div class="scrolling-content" id="scrolling">
+ <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>
+ </div>
</ul>
<p class="m-top-20 action-text"><span class="strong">Do you want to proceed?</span></p>
@@ -39,18 +47,20 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
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}
+ .endpoint-list-item{padding: 5px 20px}
.action{text-transform: capitalize}
.action-text { text-align: center; }
.scrolling-content{overflow-y: auto; max-height: 200px; }
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;}
+ label input {margin-top: 2px; margin-right: 10px;cursor: pointer;}
+ .all{font-size: 16px; font-weight: 600;}
.scrolling-content{overflow-y: auto; max-height: 200px;}
`]
})
export class EdgeActionDialogComponent {
public endpointsNewStatus: Array<object> = [];
+ public isAllChecked: boolean;
constructor(
public dialogRef: MatDialogRef<EdgeActionDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
@@ -63,5 +73,15 @@ export class EdgeActionDialogComponent {
public endpointAction() {
this.endpointsNewStatus = this.data.item.filter(endpoint => endpoint.checked);
+ this.isAllChecked = this.endpointsNewStatus.length === this.data.item.length;
+ }
+
+ public chooseAll() {
+ if (this.isAllChecked) {
+ this.data.item.forEach(endpoint => endpoint.checked = true);
+ } else {
+ this.data.item.forEach(endpoint => endpoint.checked = false);
+ }
+ this.endpointAction();
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org