You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/05/29 09:05:15 UTC
[incubator-dlab] 24/29: [DLAB-642]: replaced env management and
budget with material component
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 <An...@epam.com>
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: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org