This is an automated email from the ASF dual-hosted git repository. ankovalyshyn pushed a commit to branch feature/projects in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit e41a72d41641fdab8fbc1c1d7933291b3ea9eb21 Author: Andriana Kovalyshyn <[email protected]> AuthorDate: Tue May 28 15:32:20 2019 +0300 [DLAB-642]: replaced env management and budget with material component --- .../management/endpoints/endpoints.component.html | 48 ++++++++++++++++ .../endpoints.component.scss} | 31 ---------- .../management/endpoints/endpoints.component.ts | 53 +++++++++++++++++ .../src/app/administration/management/index.ts | 3 +- .../manage-environment-dilog.component.html | 19 +++--- .../manage-environment-dilog.component.ts | 32 +++++------ .../management/management.component.html | 4 -- .../management/management.component.ts | 67 ++++++++++++---------- .../ssn-monitor/ssn-monitor.component.scss | 1 + 9 files changed, 165 insertions(+), 93 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html new file mode 100644 index 0000000..4d0cec0 --- /dev/null +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html @@ -0,0 +1,48 @@ +<!-- + ~ 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="ami-dialog" id="dialog-box"> + <header class="dialog-header"> + <h4 class="modal-title">Create endpoint</h4> + <button type="button" class="close" (click)="dialogRef.close()">×</button> + </header> + <div class="dialog-content"> + <div class="content-box"> + <form [formGroup]="createEndpointForm" novalidate> + <div class="control-group"> + <label class="label">Name</label> + <div class="control"> + <input type="text" formControlName="name" placeholder="Enter endpoint name"> + </div> + </div> + <div class="control-group"> + <label class="label">Description</label> + <div class="control"> + <textarea formControlName="description" placeholder="Leave description"></textarea> + </div> + </div> + </form> + <div class="text-center m-top-30 m-bott-10"> + <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button> + <button mat-raised-button type="button" [disabled]="!createEndpointForm.valid" (click)="assignChanges(createEndpointForm.value)" class="butt butt-success action">Create</button> + </div> + </div> + </div> + </div> \ No newline at end of file diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.scss similarity index 58% copy from services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss copy to services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.scss index 769fefe..510f082 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.scss @@ -17,34 +17,3 @@ * under the License. */ -.ssn-monitor-dialog { - .content-box { - padding-top: 10px !important; - } - .ssn-info { - min-height: 400px; - max-height: 500px; - .scrolling-content { - max-height: 310px; - overflow-y: auto; - } - .text-center { - position: absolute; - bottom: 20px; - left: 0; - right: 0; - } - } - .mat-list-item-content { - display: flex; - justify-content: initial; - color: #577289; - padding: 15px 5px; - border-bottom: 1px solid #f3f2f2; - font-size: 15px; - .col { - width: 50%; - font-weight: 300; - } - } -} diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts new file mode 100644 index 0000000..7e14965 --- /dev/null +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts @@ -0,0 +1,53 @@ +/* + * 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'; + +@Component({ + selector: 'endpoints', + templateUrl: './endpoints.component.html', + styleUrls: ['./endpoints.component.scss'] +}) +export class EndpointsComponent implements OnInit { + public createAMIForm: FormGroup; + namePattern = '[-_a-zA-Z0-9]+'; + + constructor( + @Inject(MAT_DIALOG_DATA) public data: any, + public dialogRef: MatDialogRef<EndpointsComponent>, + private _fb: FormBuilder, + ) { } + + ngOnInit() { + + } + + public assignChanges(data) { + console.log('Create', data); + } + + private initFormModel(): void { + this.createAMIForm = this._fb.group({ + name: ['', Validators.required], + description: [''] + }); + } +} diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/index.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/index.ts index e246457..e3bbb00 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/management/index.ts +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/index.ts @@ -81,7 +81,8 @@ export * from './management.component'; ConfirmActionDialogComponent, ConfirmDeleteUserAccountDialogComponent, BackupDilogComponent, - SsnMonitorComponent], + SsnMonitorComponent, + ManageEnvironmentComponent], exports: [ManagementComponent] }) export class ManagenementModule { } diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.html index 094ec9b..3f183bd 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.html @@ -17,13 +17,14 @@ ~ under the License. --> -<modal-dialog #bindDialog modalClass="manage-env-dialog modal-xl-s"> - <modal-header> +<div id="dialog-box" class="manage-env-dialog"> + <header class="dialog-header"> <h4 class="modal-title">Manage environment</h4> - </modal-header> - <modal-content> + <button type="button" class="close" (click)="dialogRef.close()">×</button> + </header> + <div class="dialog-content"> <div class="content-box"> - <div *ngIf="usersList.length"> + <div *ngIf="data.usersList?.length"> <form [formGroup]="manageUsersForm" (submit)="setBudgetLimits(manageUsersForm.value)" novalidate> <mat-list> <mat-list-item class="list-header"> @@ -60,14 +61,14 @@ </div> </div> <div class="text-center m-top-30" *ngIf="DICTIONARY.cloud_provider !== 'gcp'"> - <button mat-raised-button type="button" (click)="bindDialog.close()" class="butt action">Cancel</button> + <button mat-raised-button type="button" (click)="dialogRef.close()" class="butt action">Cancel</button> <button mat-raised-button type="submit" [disabled]="!manageUsersForm.valid" class="butt butt-success" [ngClass]="{'not-allowed': !manageUsersForm.valid}">Apply</button> </div> </mat-list> </form> </div> - <div class="info message" *ngIf="!usersList.length">No active users environments</div> + <div class="info message" *ngIf="!data?.usersList.length">No active users environments</div> </div> - </modal-content> -</modal-dialog> + </div> +</div> diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts index ae7d7d1..8831fd9 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts @@ -17,7 +17,7 @@ * under the License. */ -import { Component, ViewChild, Output, EventEmitter, ViewEncapsulation, Inject } from '@angular/core'; +import { Component, Output, EventEmitter, ViewEncapsulation, Inject, OnInit } from '@angular/core'; import { Validators, FormBuilder, FormGroup, FormArray } from '@angular/forms'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { DICTIONARY } from '../../../../dictionary/global.dictionary'; @@ -28,40 +28,38 @@ import { DICTIONARY } from '../../../../dictionary/global.dictionary'; styleUrls: ['./manage-environment-dilog.component.scss'], encapsulation: ViewEncapsulation.None }) -export class ManageEnvironmentComponent { +export class ManageEnvironmentComponent implements OnInit { readonly DICTIONARY = DICTIONARY; - public usersList: Array<string> = []; + // public usersList: Array<string> = []; public manageUsersForm: FormGroup; public manageTotalsForm: FormGroup; - @ViewChild('bindDialog') bindDialog; @Output() manageEnv: EventEmitter<{}> = new EventEmitter(); - @Output() setBudget: EventEmitter<{}> = new EventEmitter(); + // @Output() setBudget: EventEmitter<{}> = new EventEmitter(); constructor( + @Inject(MAT_DIALOG_DATA) public data: any, private _fb: FormBuilder, - public dialog: MatDialog + public dialog: MatDialog, + public dialogRef: MatDialogRef<ManageEnvironmentComponent> ) { } - get usersEnvironments(): FormArray { - return <FormArray>this.manageUsersForm.get('users'); - } - - public open(param, data, settings): void { - this.usersList = data; + ngOnInit() { !this.manageUsersForm && this.initForm(); this.manageUsersForm.setControl('users', - this._fb.array((this.usersList || []).map((x: any) => this._fb.group({ + this._fb.array((this.data.usersList || []).map((x: any) => this._fb.group({ name: x.name, budget: [x.budget, [Validators.min(0), this.userValidityCheck.bind(this)]], status: x.status })))); - this.manageUsersForm.controls['total'].setValue(settings.conf_max_budget || null); - this.bindDialog.open(param); + this.manageUsersForm.controls['total'].setValue(this.data.total.conf_max_budget || null); + } + + get usersEnvironments(): FormArray { + return <FormArray>this.manageUsersForm.get('users'); } public setBudgetLimits(value) { - this.setBudget.emit(value); - this.bindDialog.close(); + this.dialogRef.close(value); } public applyAction(action, user) { diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html index 44fbfb5..a3125ab 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html @@ -41,10 +41,6 @@ (actionToggle)="manageEnvironmentAction($event)"> </management-grid> - -<dlab-manage-env-dilog #manageEnvDialog (manageEnv)="manageEnvironment($event)" (setBudget)="setBudgetLimits($event)"> -</dlab-manage-env-dilog> - <progress-dialog #preloaderModal></progress-dialog> <dlab-manage-roles-groups #rolesGroupsModal (manageRolesGroupAction)="manageRolesGroups($event)"> diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.ts index 0671d5d..4f4b189 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.ts @@ -36,6 +36,7 @@ import { EnvironmentModel, GeneralEnvironmentStatus } from './management.model'; import { HTTP_STATUS_CODES } from '../../core/util'; import { BackupDilogComponent } from './backup-dilog/backup-dilog.component'; import { SsnMonitorComponent } from './ssn-monitor/ssn-monitor.component'; +import { ManageEnvironmentComponent } from './manage-environment/manage-environment-dilog.component'; @Component({ selector: 'environments-management', @@ -70,7 +71,7 @@ export class ManagementComponent implements OnInit, OnDestroy { private userResourceService: UserResourceService, private rolesService: RolesGroupsService, private storageService: StorageService - ) {} + ) { } ngOnInit() { this.buildGrid(); @@ -105,7 +106,7 @@ export class ManagementComponent implements OnInit, OnDestroy { showBackupDialog() { this.dialog.open(BackupDilogComponent, { panelClass: 'modal-sm' }) - .afterClosed().subscribe(() => this.buildGrid()); + .afterClosed().subscribe(() => this.buildGrid()); } getActiveUsersList() { @@ -118,23 +119,27 @@ export class ManagementComponent implements OnInit, OnDestroy { openManageEnvironmentDialog() { this.getActiveUsersList().subscribe(usersList => { - this.getTotalBudgetData().subscribe(total => this.manageEnvironmentDialog.open({ isFooter: false }, usersList, total)); - }, - () => this.toastr.error('Failed users list loading!', 'Oops!')); + this.getTotalBudgetData().subscribe( + total => { + const dialogRef = this.dialog.open(ManageEnvironmentComponent, { data: { usersList, total }, panelClass: 'modal-xl-s'}); + dialogRef.componentInstance.manageEnv.subscribe((data) => this.manageEnvironment(data)); + dialogRef.afterClosed().subscribe(result => result && this.setBudgetLimits(result)); + }, () => this.toastr.error('Failed users list loading!', 'Oops!')); + }); } openSsnMonitorDialog() { this.healthStatusService.getSsnMonitorData().subscribe( - data => this.dialog.open(SsnMonitorComponent, {data: data, panelClass: 'modal-lg' }), + data => this.dialog.open(SsnMonitorComponent, { data: data, panelClass: 'modal-lg' }), () => this.toastr.error('Failed ssn data loading!', 'Oops!')); } openManageRolesDialog() { this.rolesService.getGroupsData().subscribe(group => { - this.rolesService.getRolesData().subscribe( - roles => this.rolesGroupsDialog.open({ isFooter: false }, group, roles), - error => this.toastr.error(error.message, 'Oops!')); - }, + this.rolesService.getRolesData().subscribe( + roles => this.rolesGroupsDialog.open({ isFooter: false }, group, roles), + error => this.toastr.error(error.message, 'Oops!')); + }, error => this.toastr.error(error.message, 'Oops!')); } @@ -155,7 +160,7 @@ export class ManagementComponent implements OnInit, OnDestroy { this.toastr.success('Backup configuration is processing!', 'Processing!'); this.clear = window.setInterval(() => this.getBackupStatus(result), 3000); }, - error => this.toastr.error(error.message, 'Oops!')); + error => this.toastr.error(error.message, 'Oops!')); } manageRolesGroups($event) { @@ -194,8 +199,8 @@ export class ManagementComponent implements OnInit, OnDestroy { this.healthStatusService.updateUsersBudget($event.users).subscribe((result: any) => { this.healthStatusService.updateTotalBudgetData($event.total).subscribe((res: any) => { result.status === HTTP_STATUS_CODES.OK - && res.status === HTTP_STATUS_CODES.NO_CONTENT - && this.toastr.success('Budget limits updated!', 'Success!'); + && res.status === HTTP_STATUS_CODES.NO_CONTENT + && this.toastr.success('Budget limits updated!', 'Success!'); this.buildGrid(); }); }, error => this.toastr.error(error.message, 'Oops!')); @@ -207,17 +212,17 @@ export class ManagementComponent implements OnInit, OnDestroy { error => this.toastr.error(error.message, 'Oops!')); } - manageEnvironment(event: {action: string, user: string}) { + manageEnvironment(event: { action: string, user: string }) { this.healthStatusService .manageEnvironment(event.action, event.user) .subscribe(res => { - this.getActiveUsersList().subscribe(usersList => { - this.manageEnvironmentDialog.usersList = usersList; - this.toastr.success(`Action ${ event.action } is processing!`, 'Processing!'); - this.buildGrid(); - }); - }, - error => this.toastr.error(error.message, 'Oops!')); + this.getActiveUsersList().subscribe(usersList => { + this.manageEnvironmentDialog.usersList = usersList; + this.toastr.success(`Action ${event.action} is processing!`, 'Processing!'); + this.buildGrid(); + }); + }, + error => this.toastr.error(error.message, 'Oops!')); } private getExploratoryList() { @@ -234,8 +239,8 @@ export class ManagementComponent implements OnInit, OnDestroy { .subscribe((backupStatus: any) => { if (!this.creatingBackup) { backupStatus.status === 'FAILED' - ? this.toastr.error('Backup configuration failed!', 'Oops!') - : this.toastr.success('Backup configuration completed!', 'Success!'); + ? this.toastr.error('Backup configuration failed!', 'Oops!') + : this.toastr.success('Backup configuration completed!', 'Success!'); clearInterval(this.clear); } }, () => { @@ -257,14 +262,14 @@ export class ManagementComponent implements OnInit, OnDestroy { private loadEnvironmentList(data): Array<EnvironmentModel> { if (data) return data.map(value => new EnvironmentModel( - value.resource_name || value.resource_type, - value.status, - value.shape, - value.computational_resources, - value.user, - value.public_ip, - value.resource_type - )); + value.resource_name || value.resource_type, + value.status, + value.shape, + value.computational_resources, + value.user, + value.public_ip, + value.resource_type + )); } private getEnvironmentHealthStatus() { diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss index 769fefe..9881165 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss @@ -20,6 +20,7 @@ .ssn-monitor-dialog { .content-box { padding-top: 10px !important; + position: relative; } .ssn-info { min-height: 400px; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
