From d46502b80491e699d50367643e4749951920f1d1 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Wed, 8 Dec 2021 14:27:56 +0000 Subject: [PATCH 01/50] Add User management and group management template --- src/app/app-routing.module.ts | 12 +- src/app/app.module.ts | 4 +- .../add-user-dialog.component.html | 26 ++++ .../add-user-dialog.component.scss | 12 ++ .../add-user-dialog.component.spec.ts | 25 ++++ .../add-user-dialog.component.ts | 68 ++++++++++ .../user-management.component.html | 45 ++++++- .../user-management.component.scss | 5 + .../user-management.component.ts | 119 +++++++++++++++++- .../default-layout.component.html | 2 +- .../default-layout.component.ts | 9 +- src/app/services/user.service.ts | 19 ++- 12 files changed, 332 insertions(+), 14 deletions(-) create mode 100644 src/app/components/user-management/add-user-dialog/add-user-dialog.component.html create mode 100644 src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss create mode 100644 src/app/components/user-management/add-user-dialog/add-user-dialog.component.spec.ts create mode 100644 src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9b2b3650..48cd5074 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -76,6 +76,12 @@ const routes: Routes = [ { path: 'help', component: HelpComponent }, { path: 'settings', component: SettingsComponent }, { path: 'settings/console', component: ConsoleComponent }, + { + path: 'server/:server_id/user_management', + component: UserManagementComponent, + canActivate: [LoginGuard], + resolve: { server: ServerResolve }, + }, { path: 'installed-software', component: InstalledSoftwareComponent }, { path: 'server/:server_id/systemstatus', component: SystemStatusComponent, canActivate: [LoginGuard] }, @@ -208,15 +214,11 @@ const routes: Routes = [ component: WebConsoleFullWindowComponent, canActivate: [LoginGuard] }, - { - path: 'user_management', - component: UserManagementComponent - }, { path: '**', component: PageNotFoundComponent, } - + ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index caa42a53..b96c4095 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -272,6 +272,7 @@ import { HttpRequestsInterceptor } from './interceptors/http.interceptor'; import { UserManagementComponent } from './components/user-management/user-management.component' import { UserService } from './services/user.service'; import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; +import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component'; @NgModule({ declarations: [ @@ -459,7 +460,8 @@ import { LoggedUserComponent } from './components/users/logged-user/logged-user. ConfigureCustomAdaptersDialogComponent, EditNetworkConfigurationDialogComponent, UserManagementComponent, - ProjectReadmeComponent + ProjectReadmeComponent, + AddUserDialogComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html new file mode 100644 index 00000000..c9ce0f5b --- /dev/null +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html @@ -0,0 +1,26 @@ +

Create new user

+
+ + + + + + + + + + + + + + Is active + Is admin + +
+ + +
+
diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss new file mode 100644 index 00000000..0907b1ef --- /dev/null +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss @@ -0,0 +1,12 @@ +.input-field { + width: 100%; +} + +.checkbox-field { + display: block; + margin-bottom: 5px; +} + +.button-div { + float: right; +} diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.spec.ts b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.spec.ts new file mode 100644 index 00000000..2b92fda2 --- /dev/null +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddUserDialogComponent } from './add-user-dialog.component'; + +describe('AddUserDialogComponent', () => { + let component: AddUserDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddUserDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddUserDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts new file mode 100644 index 00000000..771c84a1 --- /dev/null +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts @@ -0,0 +1,68 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import { Component, OnInit } from '@angular/core'; +import {FormControl, FormGroup, Validators} from "@angular/forms"; +import {MatDialogRef} from "@angular/material/dialog"; +import {UserService} from "@services/user.service"; +import {Server} from "@models/server"; +import {User} from "@models/users/user"; +import {ToasterService} from "@services/toaster.service"; + +@Component({ + selector: 'app-add-user-dialog', + templateUrl: './add-user-dialog.component.html', + styleUrls: ['./add-user-dialog.component.scss'] +}) +export class AddUserDialogComponent implements OnInit { + addUserForm: FormGroup; + server: Server; + + constructor(public dialogRef: MatDialogRef, + public userService: UserService, + private toasterService: ToasterService) { } + + ngOnInit(): void { + this.addUserForm = new FormGroup({ + username: new FormControl(null, [ + Validators.required, + Validators.minLength(3), + Validators.pattern("[a-zA-Z0-9_-]+$")]), + full_name: new FormControl(), + email: new FormControl(null, [Validators.email, Validators.required]), + password: new FormControl(null, + [Validators.required, Validators.minLength(6), Validators.maxLength(100)]), + is_active: new FormControl(true), + is_superadmin: new FormControl(false) + }); + } + + onCancelClick() { + this.dialogRef.close(); + } + + onAddClick() { + if (!this.addUserForm.valid) { + return; + } + const newUser = this.addUserForm.value; + this.userService.add(this.server, newUser) + .subscribe((user: User) => { + console.log("Done ", user) + this.toasterService.success(`User ${user.username} added`); + this.dialogRef.close(); + }, + (error) => { + this.toasterService.error('Cannot create user : ' + error); + }) + } +} diff --git a/src/app/components/user-management/user-management.component.html b/src/app/components/user-management/user-management.component.html index e453d528..4a7d8f47 100644 --- a/src/app/components/user-management/user-management.component.html +++ b/src/app/components/user-management/user-management.component.html @@ -1,3 +1,42 @@ -

- user-management works! -

+
+
+
+

User Management

+ +
+
+ +
+
+ + + Name + + {{ row.username }} + + + + Mail + {{ row.email }} + + + Active + {{row.is_active}} + + + Admin + {{row.is_superadmin}} + + + Last Update + {{row.updated_at ? row.updated_at : row.created_at}} + + + + + +
+
+
diff --git a/src/app/components/user-management/user-management.component.scss b/src/app/components/user-management/user-management.component.scss index e69de29b..5819f4a2 100644 --- a/src/app/components/user-management/user-management.component.scss +++ b/src/app/components/user-management/user-management.component.scss @@ -0,0 +1,5 @@ +.add-button { + height: 40px; + width: 160px; + margin: 20px; +} diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index a374bb28..c06bd280 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -1,4 +1,28 @@ -import { Component, OnInit } from '@angular/core'; +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Component, OnInit, ViewChild} from '@angular/core'; +import {ActivatedRoute, Router} from "@angular/router"; +import {Server} from "@models/server"; +import {MatSort, MatSortable} from "@angular/material/sort"; +import {UserService} from "@services/user.service"; +import {ProgressService} from "../../common/progress/progress.service"; +import {User} from "@models/users/user"; +import {BehaviorSubject, merge, Observable} from "rxjs"; +import {DataSource} from "@angular/cdk/collections"; +import {map} from "rxjs/operators"; +import {AddBlankProjectDialogComponent} from "@components/projects/add-blank-project-dialog/add-blank-project-dialog.component"; +import {AddUserDialogComponent} from "@components/user-management/add-user-dialog/add-user-dialog.component"; +import {MatDialog} from "@angular/material/dialog"; @Component({ selector: 'app-user-management', @@ -6,10 +30,101 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./user-management.component.scss'] }) export class UserManagementComponent implements OnInit { + server: Server; + dataSource: UserDataSource; + userDatabase = new UserDatabase(); + displayedColumns = ['name', 'email', 'is_active', 'is_superadmin', 'last']; - constructor() { } + @ViewChild(MatSort, { static: true }) sort: MatSort; + + constructor( + private route: ActivatedRoute, + private router: Router, + private userService: UserService, + private progressService: ProgressService, + public dialog: MatDialog) { } ngOnInit() { + this.server = this.route.snapshot.data['server']; + if (!this.server) this.router.navigate(['/servers']); + + this.refresh(); + this.sort.sort({ + id: 'name', + start: 'asc', + }); + this.dataSource = new UserDataSource(this.userDatabase, this.sort); } + refresh() { + this.userService.list(this.server).subscribe( + (users: User[]) => { + this.userDatabase.addUsers(users); + }, + (error) => { + this.progressService.setError(error); + } + ); + } + + addUser() { + const dialogRef = this.dialog.open(AddUserDialogComponent, { + width: '400px', + autoFocus: false, + disableClose: true, + }); + let instance = dialogRef.componentInstance; + instance.server = this.server; + dialogRef.afterClosed().subscribe(() => this.refresh()); + } +} + +export class UserDatabase { + dataChange: BehaviorSubject = new BehaviorSubject([]); + + get data(): User[] { + return this.dataChange.value; + } + + public addUsers(users: User[]) { + this.dataChange.next(users); + } + + public remove(user: User) { + const index = this.data.indexOf(user); + if (index >= 0) { + this.data.splice(index, 1); + this.dataChange.next(this.data.slice()); + } + } +} + +export class UserDataSource extends DataSource { + constructor(public userDatabase: UserDatabase, private sort: MatSort) { + super(); + } + + connect(): Observable { + const displayDataChanges = [this.userDatabase.dataChange, this.sort.sortChange]; + + return merge(...displayDataChanges).pipe( + map(() => { + if (!this.sort.active || this.sort.direction === '') { + return this.userDatabase.data; + } + + return this.userDatabase.data.sort((a, b) => { + const propertyA = a[this.sort.active]; + const propertyB = b[this.sort.active]; + + const valueA = isNaN(+propertyA) ? propertyA : +propertyA; + const valueB = isNaN(+propertyB) ? propertyB : +propertyB; + + return (valueA < valueB ? -1 : 1) * (this.sort.direction === 'asc' ? 1 : -1); + }); + }) + ); + } + + disconnect() {} } diff --git a/src/app/layouts/default-layout/default-layout.component.html b/src/app/layouts/default-layout/default-layout.component.html index 483f6310..ba883a12 100644 --- a/src/app/layouts/default-layout/default-layout.component.html +++ b/src/app/layouts/default-layout/default-layout.component.html @@ -23,7 +23,7 @@ settings Settings - diff --git a/src/app/layouts/default-layout/default-layout.component.ts b/src/app/layouts/default-layout/default-layout.component.ts index 57e47444..dcf4915e 100644 --- a/src/app/layouts/default-layout/default-layout.component.ts +++ b/src/app/layouts/default-layout/default-layout.component.ts @@ -45,7 +45,7 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy { this.routeSubscription = this.router.events.subscribe((val) => { if (val instanceof NavigationEnd) this.checkIfUserIsLoginPage(); }); - + this.recentlyOpenedServerId = this.recentlyOpenedProjectService.getServerId(); this.recentlyOpenedProjectId = this.recentlyOpenedProjectService.getProjectId(); this.serverIdProjectList = this.recentlyOpenedProjectService.getServerIdProjectList(); @@ -129,4 +129,11 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy { this.serverStatusSubscription.unsubscribe(); this.routeSubscription.unsubscribe(); } + + goToUserManagement() { + let serverId = this.router.url.split("/server/")[1].split("/")[0]; + this.serverService.get(+serverId).then((server: Server) => { + this.router.navigate(['/server', server.id, 'user_management']); + }); + } } diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts index 8cd1d4e5..e90cf9a1 100644 --- a/src/app/services/user.service.ts +++ b/src/app/services/user.service.ts @@ -1,8 +1,9 @@ import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs'; +import {Observable, Subject} from 'rxjs'; import { Server } from '../models/server'; import { HttpServer } from './http-server.service'; import { User } from '../models/users/user'; +import {Project} from "@models/project"; @Injectable() export class UserService { @@ -13,4 +14,20 @@ export class UserService { getInformationAboutLoggedUser(server: Server) { return this.httpServer.get(server, '/users/me/'); } + + list(server: Server) { + return this.httpServer.get(server, '/users'); + } + + add(server: Server, user: any): Observable { + console.log(user) + return this.httpServer.post(server, `/users`, { + username: user.username, + is_active: user.is_active, + email: user.email, + full_name: user.full_name, + password: user.password + }); + } + } From 4e2d0435619a0fd4bf36889f28f3f081905faf4d Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Thu, 9 Dec 2021 15:13:02 +0000 Subject: [PATCH 02/50] Add search filter to user management --- src/app/app.module.ts | 2 ++ .../user-management.component.html | 8 ++++- .../user-management.component.scss | 6 ++++ .../user-management.component.ts | 3 ++ src/app/filters/user-filter.pipe.spec.ts | 8 +++++ src/app/filters/user-filter.pipe.ts | 31 +++++++++++++++++++ 6 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 src/app/filters/user-filter.pipe.spec.ts create mode 100644 src/app/filters/user-filter.pipe.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b96c4095..7e0df83a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -273,6 +273,7 @@ import { UserManagementComponent } from './components/user-management/user-manag import { UserService } from './services/user.service'; import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component'; +import { UserFilterPipe } from './filters/user-filter.pipe'; @NgModule({ declarations: [ @@ -462,6 +463,7 @@ import { AddUserDialogComponent } from './components/user-management/add-user-di UserManagementComponent, ProjectReadmeComponent, AddUserDialogComponent, + UserFilterPipe, ], imports: [ BrowserModule, diff --git a/src/app/components/user-management/user-management.component.html b/src/app/components/user-management/user-management.component.html index 4a7d8f47..bf14d26c 100644 --- a/src/app/components/user-management/user-management.component.html +++ b/src/app/components/user-management/user-management.component.html @@ -8,9 +8,15 @@ +
+ + + +
+
- + Name diff --git a/src/app/components/user-management/user-management.component.scss b/src/app/components/user-management/user-management.component.scss index 5819f4a2..b264352a 100644 --- a/src/app/components/user-management/user-management.component.scss +++ b/src/app/components/user-management/user-management.component.scss @@ -3,3 +3,9 @@ width: 160px; margin: 20px; } + +.full-width { + width: 940px; + margin-left: -470px; + left: 50%; +} diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index c06bd280..936d16fc 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -35,6 +35,8 @@ export class UserManagementComponent implements OnInit { userDatabase = new UserDatabase(); displayedColumns = ['name', 'email', 'is_active', 'is_superadmin', 'last']; + searchText: string = ''; + @ViewChild(MatSort, { static: true }) sort: MatSort; constructor( @@ -77,6 +79,7 @@ export class UserManagementComponent implements OnInit { instance.server = this.server; dialogRef.afterClosed().subscribe(() => this.refresh()); } + } export class UserDatabase { diff --git a/src/app/filters/user-filter.pipe.spec.ts b/src/app/filters/user-filter.pipe.spec.ts new file mode 100644 index 00000000..46766027 --- /dev/null +++ b/src/app/filters/user-filter.pipe.spec.ts @@ -0,0 +1,8 @@ +import { UserFilterPipe } from './user-filter.pipe'; + +describe('UserFilterPipe', () => { + it('create an instance', () => { + const pipe = new UserFilterPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/filters/user-filter.pipe.ts b/src/app/filters/user-filter.pipe.ts new file mode 100644 index 00000000..0086bdb3 --- /dev/null +++ b/src/app/filters/user-filter.pipe.ts @@ -0,0 +1,31 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import { Pipe, PipeTransform } from '@angular/core'; +import {UserDataSource} from "@components/user-management/user-management.component"; + +@Pipe({ + name: 'userFilter' +}) +export class UserFilterPipe implements PipeTransform { + + transform(items: UserDataSource, searchText: string) { + if (!items) return []; + if (!searchText) return items; + searchText = searchText.toLowerCase(); + return items.userDatabase.data.filter((item) => { + return (item.username && item.username.toLowerCase().includes(searchText)) + || (item.email && item.email.toLowerCase().includes(searchText)); + }); + } + +} From e37f1e97fa506ffcc8f181667107a94772c8d508 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 9 Dec 2021 10:45:45 +0100 Subject: [PATCH 03/50] Add group management list --- src/app/app-routing.module.ts | 2 + src/app/app.module.ts | 4 +- .../group-management.component.html | 43 +++++++++++ .../group-management.component.scss | 4 + .../group-management.component.spec.ts | 25 +++++++ .../group-management.component.ts | 74 +++++++++++++++++++ .../default-layout.component.html | 4 + .../default-layout.component.ts | 7 ++ src/app/models/groups/group.ts | 19 +++++ src/app/services/group.service.spec.ts | 16 ++++ src/app/services/group.service.ts | 35 +++++++++ 11 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 src/app/components/group-management/group-management.component.html create mode 100644 src/app/components/group-management/group-management.component.scss create mode 100644 src/app/components/group-management/group-management.component.spec.ts create mode 100644 src/app/components/group-management/group-management.component.ts create mode 100644 src/app/models/groups/group.ts create mode 100644 src/app/services/group.service.spec.ts create mode 100644 src/app/services/group.service.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 48cd5074..c83e3179 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -56,6 +56,7 @@ import { DefaultLayoutComponent } from './layouts/default-layout/default-layout. import { ServerResolve } from './resolvers/server-resolve'; import { UserManagementComponent } from './components/user-management/user-management.component'; import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; +import {GroupManagementComponent} from "./components/group-management/group-management.component"; const routes: Routes = [ { @@ -196,6 +197,7 @@ const routes: Routes = [ { path: 'server/:server_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent, canActivate: [LoginGuard] }, { path: 'server/:server_id/preferences/iou/templates/:template_id/copy', component: CopyIouTemplateComponent, canActivate: [LoginGuard] }, { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent, canActivate: [LoginGuard] }, + { path: 'server/:server_id/group_management', component: GroupManagementComponent}, ], }, { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7e0df83a..58f46eac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -269,9 +269,10 @@ import { MarkedDirective } from './directives/marked.directive'; import { LoginComponent } from './components/login/login.component'; import { LoginService } from './services/login.service'; import { HttpRequestsInterceptor } from './interceptors/http.interceptor'; -import { UserManagementComponent } from './components/user-management/user-management.component' +import { UserManagementComponent } from './components/user-management/user-management.component'; import { UserService } from './services/user.service'; import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; +import { GroupManagementComponent } from './components/group-management/group-management.component'; import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component'; import { UserFilterPipe } from './filters/user-filter.pipe'; @@ -462,6 +463,7 @@ import { UserFilterPipe } from './filters/user-filter.pipe'; EditNetworkConfigurationDialogComponent, UserManagementComponent, ProjectReadmeComponent, + GroupManagementComponent, AddUserDialogComponent, UserFilterPipe, ], diff --git a/src/app/components/group-management/group-management.component.html b/src/app/components/group-management/group-management.component.html new file mode 100644 index 00000000..e3eb9982 --- /dev/null +++ b/src/app/components/group-management/group-management.component.html @@ -0,0 +1,43 @@ +
+
+
+

Groups management

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name {{element.name}} Creation date {{element.created_at}} last update {{element.updated_at}} is build in {{element.is_builtin}} delete
+
+
diff --git a/src/app/components/group-management/group-management.component.scss b/src/app/components/group-management/group-management.component.scss new file mode 100644 index 00000000..6a98db4f --- /dev/null +++ b/src/app/components/group-management/group-management.component.scss @@ -0,0 +1,4 @@ +table { + width: 100%; +} + diff --git a/src/app/components/group-management/group-management.component.spec.ts b/src/app/components/group-management/group-management.component.spec.ts new file mode 100644 index 00000000..374c0a34 --- /dev/null +++ b/src/app/components/group-management/group-management.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GroupManagementComponent } from './group-management.component'; + +describe('GroupManagementComponent', () => { + let component: GroupManagementComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GroupManagementComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GroupManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts new file mode 100644 index 00000000..e20ee78f --- /dev/null +++ b/src/app/components/group-management/group-management.component.ts @@ -0,0 +1,74 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from "@angular/router"; +import {ServerService} from "../../services/server.service"; +import {ToasterService} from "../../services/toaster.service"; +import {GroupService} from "../../services/group.service"; +import {Server} from "../../models/server"; +import {Group} from "../../models/groups/group"; +import {Sort} from "@angular/material/sort"; + +@Component({ + selector: 'app-group-management', + templateUrl: './group-management.component.html', + styleUrls: ['./group-management.component.scss'] +}) +export class GroupManagementComponent implements OnInit { + server: Server; + + public displayedColumns = ['name', 'created_at', 'updated_at', 'is_builtin', 'delete']; + groups: Group[]; + sortedGroups: Group[]; + + constructor( + private route: ActivatedRoute, + private serverService: ServerService, + private toasterService: ToasterService, + public groupService: GroupService, + ) { + } + + ngOnInit(): void { + const serverId = this.route.snapshot.paramMap.get('server_id'); + this.serverService.get(+serverId).then((server: Server) => { + this.server = server; + this.groupService.getGroups(server).subscribe((groups: Group[]) => { + this.groups = groups; + this.sortedGroups = groups; + }); + }); + } + + sort(sort: Sort) { + const data = this.groups.slice(); + if (!sort.active || sort.direction === '') { + this.sortedGroups = data; + return; + } + + this.sortedGroups = data.sort((a, b) => { + const isAsc = sort.direction === 'asc'; + switch (sort.active) { + case 'name': + return compare(a.name, b.name, isAsc); + default: + return 0; + } + }); + + function compare(a: number | string, b: number | string, isAsc: boolean) { + return (a < b ? -1 : 1) * (isAsc ? 1 : -1); + } + } +} diff --git a/src/app/layouts/default-layout/default-layout.component.html b/src/app/layouts/default-layout/default-layout.component.html index ba883a12..925ab581 100644 --- a/src/app/layouts/default-layout/default-layout.component.html +++ b/src/app/layouts/default-layout/default-layout.component.html @@ -27,6 +27,10 @@ groups User management +
+ +
+ + + +
+
- +
diff --git a/src/app/components/group-management/group-management.component.scss b/src/app/components/group-management/group-management.component.scss index 6a98db4f..48b24ba6 100644 --- a/src/app/components/group-management/group-management.component.scss +++ b/src/app/components/group-management/group-management.component.scss @@ -2,3 +2,9 @@ table { width: 100%; } +.full-width { + width: 940px; + margin-left: -470px; + left: 50%; +} + diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index e20ee78f..2311ca36 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -30,6 +30,7 @@ export class GroupManagementComponent implements OnInit { public displayedColumns = ['name', 'created_at', 'updated_at', 'is_builtin', 'delete']; groups: Group[]; sortedGroups: Group[]; + searchText: string; constructor( private route: ActivatedRoute, diff --git a/src/app/filters/group-filter.pipe.spec.ts b/src/app/filters/group-filter.pipe.spec.ts new file mode 100644 index 00000000..32b6e979 --- /dev/null +++ b/src/app/filters/group-filter.pipe.spec.ts @@ -0,0 +1,8 @@ +import { GroupFilterPipe } from './group-filter.pipe'; + +describe('GroupFilterPipe', () => { + it('create an instance', () => { + const pipe = new GroupFilterPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/filters/group-filter.pipe.ts b/src/app/filters/group-filter.pipe.ts new file mode 100644 index 00000000..25653143 --- /dev/null +++ b/src/app/filters/group-filter.pipe.ts @@ -0,0 +1,35 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Pipe, PipeTransform} from '@angular/core'; +import {Group} from "../models/groups/group"; + +@Pipe({ + name: 'groupFilter' +}) +export class GroupFilterPipe implements PipeTransform { + + transform(groups: Group[], searchText: string): Group[] { + if (!groups) { + return []; + } + if (!searchText) { + return groups; + } + + searchText = searchText.toLowerCase(); + return groups.filter((group: Group) => { + return group.name.toLowerCase().includes(searchText); + }); + } + +} From 7219f02783e856fceb048bb9d021606fdd718485 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 9 Dec 2021 15:23:57 +0100 Subject: [PATCH 05/50] group management, add create new group functionality --- src/app/app.module.ts | 2 + .../add-group-dialog/GroupNameValidator.ts | 14 +++++ .../add-group-dialog.component.html | 28 +++++++++ .../add-group-dialog.component.scss | 7 +++ .../add-group-dialog.component.spec.ts | 25 ++++++++ .../add-group-dialog.component.ts | 57 +++++++++++++++++++ .../groupNameAsyncValidator.ts | 17 ++++++ .../group-management.component.html | 3 + .../group-management.component.scss | 5 ++ .../group-management.component.ts | 23 ++++++++ src/app/services/group.service.ts | 10 +++- 11 files changed, 189 insertions(+), 2 deletions(-) create mode 100644 src/app/components/group-management/add-group-dialog/GroupNameValidator.ts create mode 100644 src/app/components/group-management/add-group-dialog/add-group-dialog.component.html create mode 100644 src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss create mode 100644 src/app/components/group-management/add-group-dialog/add-group-dialog.component.spec.ts create mode 100644 src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts create mode 100644 src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4fce5525..691c6210 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -275,6 +275,7 @@ import { UserService } from './services/user.service'; import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; import { GroupManagementComponent } from './components/group-management/group-management.component'; import { GroupFilterPipe } from './filters/group-filter.pipe'; +import { AddGroupDialogComponent } from './components/group-management/add-group-dialog/add-group-dialog.component'; import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component'; import { UserFilterPipe } from './filters/user-filter.pipe'; @@ -465,6 +466,7 @@ import { UserFilterPipe } from './filters/user-filter.pipe'; EditNetworkConfigurationDialogComponent, UserManagementComponent, ProjectReadmeComponent, + AddGroupDialogComponent, GroupFilterPipe, GroupManagementComponent, AddUserDialogComponent, diff --git a/src/app/components/group-management/add-group-dialog/GroupNameValidator.ts b/src/app/components/group-management/add-group-dialog/GroupNameValidator.ts new file mode 100644 index 00000000..3450506d --- /dev/null +++ b/src/app/components/group-management/add-group-dialog/GroupNameValidator.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class GroupNameValidator { + get(groupName) { + const pattern = new RegExp(/[~`!#$%\^&*+=\[\]\\';,/{}|\\":<>\?]/); + + if (!pattern.test(groupName.value)) { + return null; + } + + return { invalidName: true }; + } +} diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html new file mode 100644 index 00000000..bc1026c2 --- /dev/null +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html @@ -0,0 +1,28 @@ +

Create new group

+
+ + + Group name is required + Group name is incorrect + Group with this name exists + +
+ + +
+ diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss new file mode 100644 index 00000000..2fa952b3 --- /dev/null +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss @@ -0,0 +1,7 @@ +.file-name-form-field { + width: 100%; +} + +.project-snackbar { + background: #2196f3; +} diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.spec.ts b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.spec.ts new file mode 100644 index 00000000..4efbdf61 --- /dev/null +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddGroupDialogComponent } from './add-group-dialog.component'; + +describe('AddGroupDialogComponent', () => { + let component: AddGroupDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddGroupDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddGroupDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts new file mode 100644 index 00000000..981b9521 --- /dev/null +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts @@ -0,0 +1,57 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; +import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; +import {groupNameAsyncValidator} from "@components/group-management/add-group-dialog/groupNameAsyncValidator"; +import {GroupNameValidator} from "@components/group-management/add-group-dialog/GroupNameValidator"; +import {GroupService} from "../../../services/group.service"; +import {Server} from "../../../models/server"; + +@Component({ + selector: 'app-add-group-dialog', + templateUrl: './add-group-dialog.component.html', + styleUrls: ['./add-group-dialog.component.scss'], + providers: [GroupNameValidator] +}) +export class AddGroupDialogComponent implements OnInit { + + groupNameForm: FormGroup; + + constructor(private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { server: Server }, + private formBuilder: FormBuilder, + private groupNameValidator: GroupNameValidator, + private groupService: GroupService) { + } + + ngOnInit(): void { + this.groupNameForm = this.formBuilder.group({ + groupName: new FormControl( + null, + [Validators.required, this.groupNameValidator.get], + [groupNameAsyncValidator(this.data.server, this.groupService)] + ), + }); + } + + onKeyDown(event) { + if (event.key === 'Enter') { + this.onAddClick(); + } + } + + get form() { + return this.groupNameForm.controls; + } + + onAddClick() { + if (this.groupNameForm.invalid) { + return; + } + const groupName = this.groupNameForm.controls['groupName'].value; + this.dialogRef.close(groupName); + } + + onNoClick() { + this.dialogRef.close(); + } +} diff --git a/src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts b/src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts new file mode 100644 index 00000000..d8ea0fd9 --- /dev/null +++ b/src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts @@ -0,0 +1,17 @@ +import { FormControl } from '@angular/forms'; +import { timer } from 'rxjs'; +import {map, switchMap, tap} from 'rxjs/operators'; +import {Server} from "../../../models/server"; +import {GroupService} from "../../../services/group.service"; + +export const groupNameAsyncValidator = (server: Server, groupService: GroupService) => { + return (control: FormControl) => { + return timer(500).pipe( + switchMap(() => groupService.getGroups(server)), + map((response) => { + console.log(response); + return (response.find((n) => n.name === control.value) ? { projectExist: true } : null); + }) + ); + }; +}; diff --git a/src/app/components/group-management/group-management.component.html b/src/app/components/group-management/group-management.component.html index 29cd1fc1..9bef23b8 100644 --- a/src/app/components/group-management/group-management.component.html +++ b/src/app/components/group-management/group-management.component.html @@ -2,6 +2,9 @@

Groups management

+
diff --git a/src/app/components/group-management/group-management.component.scss b/src/app/components/group-management/group-management.component.scss index 48b24ba6..acc51935 100644 --- a/src/app/components/group-management/group-management.component.scss +++ b/src/app/components/group-management/group-management.component.scss @@ -8,3 +8,8 @@ table { left: 50%; } +.add-group-button { + height: 40px; + width: 160px; + margin: 20px; +} diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index 2311ca36..04ecc37c 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -18,6 +18,8 @@ import {GroupService} from "../../services/group.service"; import {Server} from "../../models/server"; import {Group} from "../../models/groups/group"; import {Sort} from "@angular/material/sort"; +import {MatDialog} from "@angular/material/dialog"; +import {AddGroupDialogComponent} from "@components/group-management/add-group-dialog/add-group-dialog.component"; @Component({ selector: 'app-group-management', @@ -37,6 +39,7 @@ export class GroupManagementComponent implements OnInit { private serverService: ServerService, private toasterService: ToasterService, public groupService: GroupService, + public dialog: MatDialog ) { } @@ -72,4 +75,24 @@ export class GroupManagementComponent implements OnInit { return (a < b ? -1 : 1) * (isAsc ? 1 : -1); } } + + + addGroup() { + this.dialog + .open(AddGroupDialogComponent, {width: '250px', height: '250px', data: {server: this.server}}) + .afterClosed() + .subscribe((name: string) => { + if (name) { + this.groupService.addGroup(this.server, name) + .subscribe(() => { + this.groupService.getGroups(this.server).subscribe((groups: Group[]) => { + this.groups = groups; + this.sortedGroups = groups; + }); + }, (error) => { + this.toasterService.error(`An error occur while trying to create new group ${name}`); + }); + } + }); + } } diff --git a/src/app/services/group.service.ts b/src/app/services/group.service.ts index 3a5e0b08..bd549359 100644 --- a/src/app/services/group.service.ts +++ b/src/app/services/group.service.ts @@ -10,11 +10,12 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; import {HttpServer} from "./http-server.service"; import {Server} from "../models/server"; import {Group} from "../models/groups/group"; import {User} from "../models/users/user"; +import {Observable} from "rxjs"; @Injectable({ providedIn: 'root' @@ -23,7 +24,8 @@ export class GroupService { constructor( private httpServer: HttpServer - ) { } + ) { + } getGroups(server: Server) { return this.httpServer.get(server, '/groups'); @@ -32,4 +34,8 @@ export class GroupService { getGroupMember(server: Server, groupId: string) { return this.httpServer.get(server, `/groups/${groupId}/members`); } + + addGroup(server: Server, name: string): Observable { + return this.httpServer.post(server, `/groups`, {name}); + } } From 9546ed94fef023ac5607e0d21180642c3af2d508 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 9 Dec 2021 15:47:33 +0100 Subject: [PATCH 06/50] group management, add trash icon on each group to delete it --- src/app/app.module.ts | 2 ++ .../add-group-dialog/GroupNameValidator.ts | 12 +++++++++ .../add-group-dialog.component.ts | 12 +++++++++ .../groupNameAsyncValidator.ts | 12 +++++++++ .../delete-group-dialog.component.html | 7 ++++++ .../delete-group-dialog.component.scss | 6 +++++ .../delete-group-dialog.component.spec.ts | 25 +++++++++++++++++++ .../delete-group-dialog.component.ts | 25 +++++++++++++++++++ .../group-management.component.html | 2 +- .../group-management.component.ts | 20 +++++++++++++++ src/app/services/group.service.ts | 4 +++ 11 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.html create mode 100644 src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.scss create mode 100644 src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.spec.ts create mode 100644 src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 691c6210..9a36ea70 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -276,6 +276,7 @@ import { LoggedUserComponent } from './components/users/logged-user/logged-user. import { GroupManagementComponent } from './components/group-management/group-management.component'; import { GroupFilterPipe } from './filters/group-filter.pipe'; import { AddGroupDialogComponent } from './components/group-management/add-group-dialog/add-group-dialog.component'; +import { DeleteGroupDialogComponent } from './components/group-management/delete-group-dialog/delete-group-dialog.component'; import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component'; import { UserFilterPipe } from './filters/user-filter.pipe'; @@ -466,6 +467,7 @@ import { UserFilterPipe } from './filters/user-filter.pipe'; EditNetworkConfigurationDialogComponent, UserManagementComponent, ProjectReadmeComponent, + DeleteGroupDialogComponent, AddGroupDialogComponent, GroupFilterPipe, GroupManagementComponent, diff --git a/src/app/components/group-management/add-group-dialog/GroupNameValidator.ts b/src/app/components/group-management/add-group-dialog/GroupNameValidator.ts index 3450506d..09b9cda8 100644 --- a/src/app/components/group-management/add-group-dialog/GroupNameValidator.ts +++ b/src/app/components/group-management/add-group-dialog/GroupNameValidator.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { Injectable } from '@angular/core'; @Injectable() diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts index 981b9521..c73e745e 100644 --- a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, Inject, OnInit} from '@angular/core'; import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; diff --git a/src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts b/src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts index d8ea0fd9..a511d16c 100644 --- a/src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts +++ b/src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { FormControl } from '@angular/forms'; import { timer } from 'rxjs'; import {map, switchMap, tap} from 'rxjs/operators'; diff --git a/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.html b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.html new file mode 100644 index 00000000..a0f3c00f --- /dev/null +++ b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.html @@ -0,0 +1,7 @@ +

Are you sure to delete group named: '{{data.groupName}}' ?

+
+ + +
diff --git a/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.scss b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.scss new file mode 100644 index 00000000..1b0fdabd --- /dev/null +++ b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.scss @@ -0,0 +1,6 @@ +:host { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} diff --git a/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.spec.ts b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.spec.ts new file mode 100644 index 00000000..b82479f3 --- /dev/null +++ b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeleteGroupDialogComponent } from './delete-group-dialog.component'; + +describe('DeleteGroupDialogComponent', () => { + let component: DeleteGroupDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DeleteGroupDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DeleteGroupDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.ts b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.ts new file mode 100644 index 00000000..acdb01e4 --- /dev/null +++ b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.ts @@ -0,0 +1,25 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {Server} from "@models/server"; + +@Component({ + selector: 'app-delete-group-dialog', + templateUrl: './delete-group-dialog.component.html', + styleUrls: ['./delete-group-dialog.component.scss'] +}) +export class DeleteGroupDialogComponent implements OnInit { + + constructor(private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { groupName: string }) { } + + ngOnInit(): void { + } + + onCancel() { + this.dialogRef.close(); + } + + onDelete() { + this.dialogRef.close(true); + } +} diff --git a/src/app/components/group-management/group-management.component.html b/src/app/components/group-management/group-management.component.html index 9bef23b8..9d512124 100644 --- a/src/app/components/group-management/group-management.component.html +++ b/src/app/components/group-management/group-management.component.html @@ -41,7 +41,7 @@ - + diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index 04ecc37c..e1f9fb7a 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -20,6 +20,7 @@ import {Group} from "../../models/groups/group"; import {Sort} from "@angular/material/sort"; import {MatDialog} from "@angular/material/dialog"; import {AddGroupDialogComponent} from "@components/group-management/add-group-dialog/add-group-dialog.component"; +import {DeleteGroupDialogComponent} from "@components/group-management/delete-group-dialog/delete-group-dialog.component"; @Component({ selector: 'app-group-management', @@ -95,4 +96,23 @@ export class GroupManagementComponent implements OnInit { } }); } + + onDelete(group: Group) { + this.dialog + .open(DeleteGroupDialogComponent, {width: '500px', height: '250px', data: {groupName: group.name}}) + .afterClosed() + .subscribe((isDeletedConfirm) => { + if (isDeletedConfirm) { + this.groupService.delete(this.server, group.user_group_id) + .subscribe(() => { + this.groupService.getGroups(this.server).subscribe((groups: Group[]) => { + this.groups = groups; + this.sortedGroups = groups; + }); + }, (error) => { + this.toasterService.error(`An error occur while trying to delete group ${group.name}`); + }); + } + }); + } } diff --git a/src/app/services/group.service.ts b/src/app/services/group.service.ts index bd549359..62f14eb4 100644 --- a/src/app/services/group.service.ts +++ b/src/app/services/group.service.ts @@ -38,4 +38,8 @@ export class GroupService { addGroup(server: Server, name: string): Observable { return this.httpServer.post(server, `/groups`, {name}); } + + delete(server: Server, user_group_id: string) { + return this.httpServer.delete(server, `/groups/${user_group_id}`); + } } From 4e207d270e00e3697cf4f7bbb6251ff9db254b78 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Thu, 9 Dec 2021 15:58:22 +0000 Subject: [PATCH 07/50] user management, add delete button on each row --- src/app/app.module.ts | 8 +++--- .../delete-group-dialog.component.ts | 12 +++++++++ .../delete-user-dialog.component.html | 7 +++++ .../delete-user-dialog.component.scss | 3 +++ .../delete-user-dialog.component.spec.ts | 25 ++++++++++++++++++ .../delete-user-dialog.component.ts | 26 +++++++++++++++++++ .../user-management.component.html | 7 ++++- .../user-management.component.ts | 23 +++++++++++++--- src/app/services/user.service.ts | 3 +++ 9 files changed, 107 insertions(+), 7 deletions(-) create mode 100644 src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.html create mode 100644 src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.scss create mode 100644 src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.spec.ts create mode 100644 src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9a36ea70..d5b43685 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -273,12 +273,13 @@ import { HttpRequestsInterceptor } from './interceptors/http.interceptor'; import { UserManagementComponent } from './components/user-management/user-management.component'; import { UserService } from './services/user.service'; import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; +import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component'; +import { UserFilterPipe } from './filters/user-filter.pipe'; import { GroupManagementComponent } from './components/group-management/group-management.component'; import { GroupFilterPipe } from './filters/group-filter.pipe'; import { AddGroupDialogComponent } from './components/group-management/add-group-dialog/add-group-dialog.component'; import { DeleteGroupDialogComponent } from './components/group-management/delete-group-dialog/delete-group-dialog.component'; -import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component'; -import { UserFilterPipe } from './filters/user-filter.pipe'; +import { DeleteUserDialogComponent } from './components/user-management/delete-user-dialog/delete-user-dialog.component'; @NgModule({ declarations: [ @@ -467,12 +468,13 @@ import { UserFilterPipe } from './filters/user-filter.pipe'; EditNetworkConfigurationDialogComponent, UserManagementComponent, ProjectReadmeComponent, - DeleteGroupDialogComponent, AddGroupDialogComponent, GroupFilterPipe, GroupManagementComponent, AddUserDialogComponent, UserFilterPipe, + DeleteGroupDialogComponent, + DeleteUserDialogComponent ], imports: [ BrowserModule, diff --git a/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.ts b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.ts index acdb01e4..e5a80d35 100644 --- a/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.ts +++ b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, Inject, OnInit} from '@angular/core'; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {Server} from "@models/server"; diff --git a/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.html b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.html new file mode 100644 index 00000000..dc1287c1 --- /dev/null +++ b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.html @@ -0,0 +1,7 @@ +

Are you sure to delete user named: '{{data.user.username}}' ?

+
+ + +
diff --git a/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.scss b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.scss new file mode 100644 index 00000000..4b5fa184 --- /dev/null +++ b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.scss @@ -0,0 +1,3 @@ +.button-div { + float: right; +} diff --git a/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.spec.ts b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.spec.ts new file mode 100644 index 00000000..98ea5694 --- /dev/null +++ b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeleteUserDialogComponent } from './delete-user-dialog.component'; + +describe('DeleteUserDialogComponent', () => { + let component: DeleteUserDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DeleteUserDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DeleteUserDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.ts b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.ts new file mode 100644 index 00000000..9bdda601 --- /dev/null +++ b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.ts @@ -0,0 +1,26 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {User} from "@models/users/user"; +import {UserService} from "@services/user.service"; + +@Component({ + selector: 'app-delete-user-dialog', + templateUrl: './delete-user-dialog.component.html', + styleUrls: ['./delete-user-dialog.component.scss'] +}) +export class DeleteUserDialogComponent implements OnInit { + + constructor(private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { user: User }) { } + + ngOnInit(): void { + } + + onCancel() { + this.dialogRef.close(); + } + + onDelete() { + this.dialogRef.close(true); + } +} diff --git a/src/app/components/user-management/user-management.component.html b/src/app/components/user-management/user-management.component.html index bf14d26c..20754a0c 100644 --- a/src/app/components/user-management/user-management.component.html +++ b/src/app/components/user-management/user-management.component.html @@ -35,11 +35,16 @@ Admin {{row.is_superadmin}} - + Last Update {{row.updated_at ? row.updated_at : row.created_at}} + + + + + diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index 936d16fc..ce3c2ae3 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -20,9 +20,10 @@ import {User} from "@models/users/user"; import {BehaviorSubject, merge, Observable} from "rxjs"; import {DataSource} from "@angular/cdk/collections"; import {map} from "rxjs/operators"; -import {AddBlankProjectDialogComponent} from "@components/projects/add-blank-project-dialog/add-blank-project-dialog.component"; import {AddUserDialogComponent} from "@components/user-management/add-user-dialog/add-user-dialog.component"; import {MatDialog} from "@angular/material/dialog"; +import {DeleteUserDialogComponent} from "@components/user-management/delete-user-dialog/delete-user-dialog.component"; +import {ToasterService} from "@services/toaster.service"; @Component({ selector: 'app-user-management', @@ -33,7 +34,7 @@ export class UserManagementComponent implements OnInit { server: Server; dataSource: UserDataSource; userDatabase = new UserDatabase(); - displayedColumns = ['name', 'email', 'is_active', 'is_superadmin', 'last']; + displayedColumns = ['name', 'email', 'is_active', 'is_superadmin', 'updated_at', 'delete']; searchText: string = ''; @@ -44,7 +45,8 @@ export class UserManagementComponent implements OnInit { private router: Router, private userService: UserService, private progressService: ProgressService, - public dialog: MatDialog) { } + public dialog: MatDialog, + private toasterService: ToasterService) { } ngOnInit() { this.server = this.route.snapshot.data['server']; @@ -80,6 +82,21 @@ export class UserManagementComponent implements OnInit { dialogRef.afterClosed().subscribe(() => this.refresh()); } + onDelete(user: User) { + this.dialog + .open(DeleteUserDialogComponent, {width: '500px', data: {user: user}}) + .afterClosed() + .subscribe((isDeletedConfirm) => { + if (isDeletedConfirm) { + this.userService.delete(this.server, user.user_id) + .subscribe(() => { + this.refresh() + }, (error) => { + this.toasterService.error(`An error occur while trying to delete user ${user.username}`); + }); + } + }); + } } export class UserDatabase { diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts index e90cf9a1..e49d76fd 100644 --- a/src/app/services/user.service.ts +++ b/src/app/services/user.service.ts @@ -30,4 +30,7 @@ export class UserService { }); } + delete(server: Server, user_id: string) { + return this.httpServer.delete(server, `/users/${user_id}`); + } } From 0c0d77e22006077742e901ddfcfe74f5939c130a Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Fri, 10 Dec 2021 11:28:12 +0000 Subject: [PATCH 08/50] user management, add multiple user selection --- .../delete-user-dialog.component.html | 5 ++- .../delete-user-dialog.component.scss | 4 ++ .../delete-user-dialog.component.ts | 14 ++++++- .../user-management.component.html | 18 +++++++++ .../user-management.component.scss | 4 ++ .../user-management.component.ts | 40 +++++++++++++++++-- src/app/models/users/user.ts | 1 + src/app/services/user.service.ts | 1 - 8 files changed, 80 insertions(+), 7 deletions(-) diff --git a/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.html b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.html index dc1287c1..d15b5b40 100644 --- a/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.html +++ b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.html @@ -1,4 +1,7 @@ -

Are you sure to delete user named: '{{data.user.username}}' ?

+

Are you sure you want to delete the following users ?

+
    +
  • {{ user.username }} {{ user.full_name ? '- ' + user.full_name : '' }}
    • +
@@ -17,6 +20,21 @@
+ + + + + + + + + + + Name diff --git a/src/app/components/user-management/user-management.component.scss b/src/app/components/user-management/user-management.component.scss index b264352a..03241487 100644 --- a/src/app/components/user-management/user-management.component.scss +++ b/src/app/components/user-management/user-management.component.scss @@ -9,3 +9,7 @@ margin-left: -470px; left: 50%; } + +.small-col { + flex-grow: 0.5; +} diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index ce3c2ae3..6c82fce0 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -18,7 +18,7 @@ import {UserService} from "@services/user.service"; import {ProgressService} from "../../common/progress/progress.service"; import {User} from "@models/users/user"; import {BehaviorSubject, merge, Observable} from "rxjs"; -import {DataSource} from "@angular/cdk/collections"; +import {DataSource, SelectionModel} from "@angular/cdk/collections"; import {map} from "rxjs/operators"; import {AddUserDialogComponent} from "@components/user-management/add-user-dialog/add-user-dialog.component"; import {MatDialog} from "@angular/material/dialog"; @@ -34,8 +34,8 @@ export class UserManagementComponent implements OnInit { server: Server; dataSource: UserDataSource; userDatabase = new UserDatabase(); - displayedColumns = ['name', 'email', 'is_active', 'is_superadmin', 'updated_at', 'delete']; - + displayedColumns = ['select', 'name', 'email', 'is_active', 'is_superadmin', 'updated_at', 'delete']; + selection = new SelectionModel(true, []); searchText: string = ''; @ViewChild(MatSort, { static: true }) sort: MatSort; @@ -84,7 +84,7 @@ export class UserManagementComponent implements OnInit { onDelete(user: User) { this.dialog - .open(DeleteUserDialogComponent, {width: '500px', data: {user: user}}) + .open(DeleteUserDialogComponent, {width: '500px', data: {users: [user]}}) .afterClosed() .subscribe((isDeletedConfirm) => { if (isDeletedConfirm) { @@ -97,6 +97,38 @@ export class UserManagementComponent implements OnInit { } }); } + + isAllSelected() { + const numSelected = this.selection.selected.length; + const numRows = this.userDatabase.data.length; + return numSelected === numRows; + } + + masterToggle() { + this.isAllSelected() ? + this.selection.clear() : + this.userDatabase.data.forEach(row => this.selection.select(row)); + } + + deleteMultiple() { + this.dialog + .open(DeleteUserDialogComponent, {width: '500px', data: {users: this.selection.selected}}) + .afterClosed() + .subscribe((isDeletedConfirm) => { + if (isDeletedConfirm) { + this.selection.selected.forEach((user: User) => { + this.userService.delete(this.server, user.user_id) + .subscribe(() => { + this.refresh() + }, (error) => { + this.toasterService.error(`An error occur while trying to delete user ${user.username}`); + }); + }) + this.selection.clear(); + } + }); + + } } export class UserDatabase { diff --git a/src/app/models/users/user.ts b/src/app/models/users/user.ts index 880734dd..a385cc85 100644 --- a/src/app/models/users/user.ts +++ b/src/app/models/users/user.ts @@ -2,6 +2,7 @@ export interface User { created_at: string; email: string; full_name: string; + last_login: string; is_active: boolean; is_superadmin: boolean; updated_at: string; diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts index e49d76fd..8cd4c0b4 100644 --- a/src/app/services/user.service.ts +++ b/src/app/services/user.service.ts @@ -20,7 +20,6 @@ export class UserService { } add(server: Server, user: any): Observable { - console.log(user) return this.httpServer.post(server, `/users`, { username: user.username, is_active: user.is_active, From 11029db9561bb9b20bada4ad27b4960f27f27db6 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Fri, 10 Dec 2021 13:51:19 +0000 Subject: [PATCH 09/50] remove is_admin field in user management list and add field validation on create a new user --- .../add-user-dialog.component.html | 24 +++++++++++--- .../add-user-dialog.component.scss | 4 --- .../add-user-dialog.component.ts | 16 +++++++--- .../userEmailAsyncValidator.ts | 16 ++++++++++ .../add-user-dialog/userNameAsyncValidator.ts | 16 ++++++++++ .../user-management.component.html | 32 ++++++++++++------- .../user-management.component.scss | 15 +++++++++ .../user-management.component.ts | 2 +- src/app/filters/user-filter.pipe.ts | 1 + 9 files changed, 100 insertions(+), 26 deletions(-) create mode 100644 src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts create mode 100644 src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html index c9ce0f5b..2f565edb 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html @@ -2,19 +2,33 @@
+ Username is required + Username is incorrect + User with this username exists - - - + Email is required + Email is invalid - Is active - Is admin + + + + A password between 6 and 100 characters is required. + + + + Is active
diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss index 0907b1ef..469c3dda 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss @@ -2,10 +2,6 @@ width: 100%; } -.checkbox-field { - display: block; - margin-bottom: 5px; -} .button-div { float: right; diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts index 771c84a1..2bc64b1b 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts @@ -17,6 +17,8 @@ import {UserService} from "@services/user.service"; import {Server} from "@models/server"; import {User} from "@models/users/user"; import {ToasterService} from "@services/toaster.service"; +import {userNameAsyncValidator} from "@components/user-management/add-user-dialog/userNameAsyncValidator"; +import {userEmailAsyncValidator} from "@components/user-management/add-user-dialog/userEmailAsyncValidator"; @Component({ selector: 'app-add-user-dialog', @@ -36,16 +38,22 @@ export class AddUserDialogComponent implements OnInit { username: new FormControl(null, [ Validators.required, Validators.minLength(3), - Validators.pattern("[a-zA-Z0-9_-]+$")]), + Validators.pattern("[a-zA-Z0-9_-]+$")], + [userNameAsyncValidator(this.server, this.userService)]), full_name: new FormControl(), - email: new FormControl(null, [Validators.email, Validators.required]), + email: new FormControl(null, + [Validators.email, Validators.required], + [userEmailAsyncValidator(this.server, this.userService)]), password: new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(100)]), - is_active: new FormControl(true), - is_superadmin: new FormControl(false) + is_active: new FormControl(true) }); } + get form() { + return this.addUserForm.controls; + } + onCancelClick() { this.dialogRef.close(); } diff --git a/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts b/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts new file mode 100644 index 00000000..429cd32e --- /dev/null +++ b/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts @@ -0,0 +1,16 @@ +import {Server} from "../../../models/server"; +import {UserService} from "../../../services/user.service"; +import {FormControl} from "@angular/forms"; +import {timer} from "rxjs"; +import {map, switchMap} from "rxjs/operators"; + +export const userEmailAsyncValidator = (server: Server, userService: UserService) => { + return (control: FormControl) => { + return timer(500).pipe( + switchMap(() => userService.list(server)), + map((response) => { + return (response.find((n) => n.email === control.value) ? { emailExists: true } : null); + }) + ); + }; +}; diff --git a/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts b/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts new file mode 100644 index 00000000..d88eb38c --- /dev/null +++ b/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts @@ -0,0 +1,16 @@ +import {Server} from "../../../models/server"; +import {FormControl} from "@angular/forms"; +import {timer} from "rxjs"; +import {map, switchMap} from "rxjs/operators"; +import {UserService} from "../../../services/user.service"; + +export const userNameAsyncValidator = (server: Server, userService: UserService) => { + return (control: FormControl) => { + return timer(500).pipe( + switchMap(() => userService.list(server)), + map((response) => { + return (response.find((n) => n.username === control.value) ? { userExists: true } : null); + }) + ); + }; +}; diff --git a/src/app/components/user-management/user-management.component.html b/src/app/components/user-management/user-management.component.html index dc489135..17ca0c9f 100644 --- a/src/app/components/user-management/user-management.component.html +++ b/src/app/components/user-management/user-management.component.html @@ -35,32 +35,40 @@ - - Name + + Username - {{ row.username }} + {{ row.username }} + + + + Full Name + +
{{ row.full_name }}
 Mail - {{ row.email }} + +
{{ row.email }}
+ - Active - {{row.is_active}} + Active + {{row.is_active}} - - Admin - {{row.is_superadmin}} + + Last Login + {{row.last_login}} Last Update - {{row.updated_at ? row.updated_at : row.created_at}} + {{row.updated_at ? row.updated_at : row.created_at}} - - + + diff --git a/src/app/components/user-management/user-management.component.scss b/src/app/components/user-management/user-management.component.scss index 03241487..9ed45f4a 100644 --- a/src/app/components/user-management/user-management.component.scss +++ b/src/app/components/user-management/user-management.component.scss @@ -11,5 +11,20 @@ } .small-col { + flex-grow: 0.3; +} + +.active-col { flex-grow: 0.5; } + +.overflow-col { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-right: 5px; +} + +.custom-tooltip { + font-size:100px; +} diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index 6c82fce0..2f010b40 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -34,7 +34,7 @@ export class UserManagementComponent implements OnInit { server: Server; dataSource: UserDataSource; userDatabase = new UserDatabase(); - displayedColumns = ['select', 'name', 'email', 'is_active', 'is_superadmin', 'updated_at', 'delete']; + displayedColumns = ['select', 'username', 'full_name', 'email', 'is_active', 'last_login', 'updated_at', 'delete']; selection = new SelectionModel(true, []); searchText: string = ''; diff --git a/src/app/filters/user-filter.pipe.ts b/src/app/filters/user-filter.pipe.ts index 0086bdb3..f8b8e86e 100644 --- a/src/app/filters/user-filter.pipe.ts +++ b/src/app/filters/user-filter.pipe.ts @@ -24,6 +24,7 @@ export class UserFilterPipe implements PipeTransform { searchText = searchText.toLowerCase(); return items.userDatabase.data.filter((item) => { return (item.username && item.username.toLowerCase().includes(searchText)) + || (item.full_name && item.full_name.toLowerCase().includes(searchText)) || (item.email && item.email.toLowerCase().includes(searchText)); }); } From 596a11210f9b9778ac94ee92ed1c8a9c7da6ea60 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Mon, 13 Dec 2021 13:53:52 +0000 Subject: [PATCH 10/50] user management, add paginator --- .../userEmailAsyncValidator.ts | 12 +++ .../add-user-dialog/userNameAsyncValidator.ts | 12 +++ .../user-management.component.html | 9 +- .../user-management.component.ts | 86 ++++++------------- src/app/filters/user-filter.pipe.ts | 7 +- 5 files changed, 60 insertions(+), 66 deletions(-) diff --git a/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts b/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts index 429cd32e..41f4aedd 100644 --- a/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts +++ b/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Server} from "../../../models/server"; import {UserService} from "../../../services/user.service"; import {FormControl} from "@angular/forms"; diff --git a/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts b/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts index d88eb38c..52503e8a 100644 --- a/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts +++ b/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Server} from "../../../models/server"; import {FormControl} from "@angular/forms"; import {timer} from "rxjs"; diff --git a/src/app/components/user-management/user-management.component.html b/src/app/components/user-management/user-management.component.html index 17ca0c9f..a155cdf0 100644 --- a/src/app/components/user-management/user-management.component.html +++ b/src/app/components/user-management/user-management.component.html @@ -13,7 +13,7 @@ - + @@ -44,7 +44,7 @@ Full Name -
{{ row.full_name }}
+
{{ row.full_name }}
 @@ -74,6 +74,11 @@ + + +
diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index 2f010b40..83798abb 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -13,7 +13,7 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from "@angular/router"; import {Server} from "@models/server"; -import {MatSort, MatSortable} from "@angular/material/sort"; +import {MatSort, MatSortable, Sort} from "@angular/material/sort"; import {UserService} from "@services/user.service"; import {ProgressService} from "../../common/progress/progress.service"; import {User} from "@models/users/user"; @@ -24,6 +24,8 @@ import {AddUserDialogComponent} from "@components/user-management/add-user-dialo import {MatDialog} from "@angular/material/dialog"; import {DeleteUserDialogComponent} from "@components/user-management/delete-user-dialog/delete-user-dialog.component"; import {ToasterService} from "@services/toaster.service"; +import {MatPaginator} from "@angular/material/paginator"; +import {MatTableDataSource} from "@angular/material/table"; @Component({ selector: 'app-user-management', @@ -32,12 +34,12 @@ import {ToasterService} from "@services/toaster.service"; }) export class UserManagementComponent implements OnInit { server: Server; - dataSource: UserDataSource; - userDatabase = new UserDatabase(); + dataSource = new MatTableDataSource(); displayedColumns = ['select', 'username', 'full_name', 'email', 'is_active', 'last_login', 'updated_at', 'delete']; selection = new SelectionModel(true, []); searchText: string = ''; + @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort, { static: true }) sort: MatSort; constructor( @@ -53,17 +55,27 @@ export class UserManagementComponent implements OnInit { if (!this.server) this.router.navigate(['/servers']); this.refresh(); - this.sort.sort({ - id: 'name', - start: 'asc', - }); - this.dataSource = new UserDataSource(this.userDatabase, this.sort); + } + + ngAfterViewInit() { + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + this.dataSource.sortingDataAccessor = (item, property) => { + switch (property) { + case 'username': + case 'full_name': + case 'email': + return item[property] ? item[property].toLowerCase() : ''; + default: + return item[property]; + } + } } refresh() { this.userService.list(this.server).subscribe( (users: User[]) => { - this.userDatabase.addUsers(users); + this.dataSource.data = users; }, (error) => { this.progressService.setError(error); @@ -98,16 +110,18 @@ export class UserManagementComponent implements OnInit { }); } + + isAllSelected() { const numSelected = this.selection.selected.length; - const numRows = this.userDatabase.data.length; + const numRows = this.dataSource.data.length; return numSelected === numRows; } masterToggle() { this.isAllSelected() ? this.selection.clear() : - this.userDatabase.data.forEach(row => this.selection.select(row)); + this.dataSource.data.forEach(row => this.selection.select(row)); } deleteMultiple() { @@ -130,53 +144,3 @@ export class UserManagementComponent implements OnInit { } } - -export class UserDatabase { - dataChange: BehaviorSubject = new BehaviorSubject([]); - - get data(): User[] { - return this.dataChange.value; - } - - public addUsers(users: User[]) { - this.dataChange.next(users); - } - - public remove(user: User) { - const index = this.data.indexOf(user); - if (index >= 0) { - this.data.splice(index, 1); - this.dataChange.next(this.data.slice()); - } - } -} - -export class UserDataSource extends DataSource { - constructor(public userDatabase: UserDatabase, private sort: MatSort) { - super(); - } - - connect(): Observable { - const displayDataChanges = [this.userDatabase.dataChange, this.sort.sortChange]; - - return merge(...displayDataChanges).pipe( - map(() => { - if (!this.sort.active || this.sort.direction === '') { - return this.userDatabase.data; - } - - return this.userDatabase.data.sort((a, b) => { - const propertyA = a[this.sort.active]; - const propertyB = b[this.sort.active]; - - const valueA = isNaN(+propertyA) ? propertyA : +propertyA; - const valueB = isNaN(+propertyB) ? propertyB : +propertyB; - - return (valueA < valueB ? -1 : 1) * (this.sort.direction === 'asc' ? 1 : -1); - }); - }) - ); - } - - disconnect() {} -} diff --git a/src/app/filters/user-filter.pipe.ts b/src/app/filters/user-filter.pipe.ts index f8b8e86e..fec797e9 100644 --- a/src/app/filters/user-filter.pipe.ts +++ b/src/app/filters/user-filter.pipe.ts @@ -11,18 +11,19 @@ * Author: Sylvain MATHIEU, Elise LEBEAU */ import { Pipe, PipeTransform } from '@angular/core'; -import {UserDataSource} from "@components/user-management/user-management.component"; +import {User} from "@models/users/user"; +import {MatTableDataSource} from "@angular/material/table"; @Pipe({ name: 'userFilter' }) export class UserFilterPipe implements PipeTransform { - transform(items: UserDataSource, searchText: string) { + transform(items: MatTableDataSource, searchText: string) { if (!items) return []; if (!searchText) return items; searchText = searchText.toLowerCase(); - return items.userDatabase.data.filter((item) => { + return items.data.filter((item: User) => { return (item.username && item.username.toLowerCase().includes(searchText)) || (item.full_name && item.full_name.toLowerCase().includes(searchText)) || (item.email && item.email.toLowerCase().includes(searchText)); From 2e2a59f6f2cb2b12ab741eea4a3c12e9dc4b297f Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Mon, 13 Dec 2021 15:32:51 +0100 Subject: [PATCH 11/50] group management, add sort on all columns --- .../group-management/group-management.component.html | 6 +++--- .../group-management/group-management.component.ts | 9 ++++++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/app/components/group-management/group-management.component.html b/src/app/components/group-management/group-management.component.html index 9d512124..08aff060 100644 --- a/src/app/components/group-management/group-management.component.html +++ b/src/app/components/group-management/group-management.component.html @@ -23,19 +23,19 @@ -
+ - + - + diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index e1f9fb7a..a716ce6d 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -66,13 +66,20 @@ export class GroupManagementComponent implements OnInit { const isAsc = sort.direction === 'asc'; switch (sort.active) { case 'name': - return compare(a.name, b.name, isAsc); + return compare(a.name.toLowerCase(), b.name.toLowerCase(), isAsc); + case 'created_at': + return compare(a.created_at, b.created_at, isAsc); + case 'updated_at': + return compare(a.updated_at, b.updated_at, isAsc); + case 'is_builtin': + return compare(a.is_builtin.toString(), b.is_builtin.toString(), isAsc); default: return 0; } }); function compare(a: number | string, b: number | string, isAsc: boolean) { + return (a < b ? -1 : 1) * (isAsc ? 1 : -1); } } From eb5437d005d2901024937fdc2ff88dd3564e65bc Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Wed, 15 Dec 2021 09:02:38 +0100 Subject: [PATCH 12/50] group management, add multiple delete --- .../delete-group-dialog.component.html | 3 +- .../delete-group-dialog.component.ts | 4 +- .../group-management.component.html | 20 +++++++- .../group-management.component.ts | 48 +++++++++++++------ 4 files changed, 57 insertions(+), 18 deletions(-) diff --git a/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.html b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.html index a0f3c00f..4ab22367 100644 --- a/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.html +++ b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.html @@ -1,4 +1,5 @@ -

Are you sure to delete group named: '{{data.groupName}}' ?

+

Are you sure to delete group named:

+

{{group.name}}

@@ -17,6 +20,21 @@
Name delete
Creation date Creation date {{element.created_at}} last update last update {{element.updated_at}} is build in is build in {{element.is_builtin}}
+ + + + + + + + + + + @@ -41,7 +59,7 @@ - + diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index a716ce6d..52609152 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -21,6 +21,10 @@ import {Sort} from "@angular/material/sort"; import {MatDialog} from "@angular/material/dialog"; import {AddGroupDialogComponent} from "@components/group-management/add-group-dialog/add-group-dialog.component"; import {DeleteGroupDialogComponent} from "@components/group-management/delete-group-dialog/delete-group-dialog.component"; +import {SelectionModel} from "@angular/cdk/collections"; +import {DeleteUserDialogComponent} from "@components/user-management/delete-user-dialog/delete-user-dialog.component"; +import {User} from "@models/users/user"; +import {forkJoin} from "rxjs"; @Component({ selector: 'app-group-management', @@ -30,7 +34,8 @@ import {DeleteGroupDialogComponent} from "@components/group-management/delete-gr export class GroupManagementComponent implements OnInit { server: Server; - public displayedColumns = ['name', 'created_at', 'updated_at', 'is_builtin', 'delete']; + public displayedColumns = ['select', 'name', 'created_at', 'updated_at', 'is_builtin', 'delete']; + selection = new SelectionModel(true, []); groups: Group[]; sortedGroups: Group[]; searchText: string; @@ -84,6 +89,17 @@ export class GroupManagementComponent implements OnInit { } } + isAllSelected() { + const numSelected = this.selection.selected.length; + const numRows = this.groups.length; + return numSelected === numRows; + } + + masterToggle() { + this.isAllSelected() ? + this.selection.clear() : + this.groups.forEach(row => this.selection.select(row)); + } addGroup() { this.dialog @@ -93,10 +109,7 @@ export class GroupManagementComponent implements OnInit { if (name) { this.groupService.addGroup(this.server, name) .subscribe(() => { - this.groupService.getGroups(this.server).subscribe((groups: Group[]) => { - this.groups = groups; - this.sortedGroups = groups; - }); + this.refresh(); }, (error) => { this.toasterService.error(`An error occur while trying to create new group ${name}`); }); @@ -104,21 +117,28 @@ export class GroupManagementComponent implements OnInit { }); } - onDelete(group: Group) { + refresh() { + this.groupService.getGroups(this.server).subscribe((groups: Group[]) => { + this.groups = groups; + this.sortedGroups = groups; + this.selection.clear(); + }); + } + + onDelete(groupsToDelete: Group[]) { this.dialog - .open(DeleteGroupDialogComponent, {width: '500px', height: '250px', data: {groupName: group.name}}) + .open(DeleteGroupDialogComponent, {width: '500px', height: '250px', data: {groups: groupsToDelete}}) .afterClosed() .subscribe((isDeletedConfirm) => { if (isDeletedConfirm) { - this.groupService.delete(this.server, group.user_group_id) + const observables = groupsToDelete.map((group: Group) => this.groupService.delete(this.server, group.user_group_id)); + forkJoin(observables) .subscribe(() => { - this.groupService.getGroups(this.server).subscribe((groups: Group[]) => { - this.groups = groups; - this.sortedGroups = groups; + this.refresh(); + }, + (error) => { + this.toasterService.error(`An error occur while trying to delete group`); }); - }, (error) => { - this.toasterService.error(`An error occur while trying to delete group ${group.name}`); - }); } }); } From cbeca9d0ca95d6d2e5c245694790780dc6e55933 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Tue, 14 Dec 2021 14:22:35 +0000 Subject: [PATCH 13/50] user management, create edit user detail dialog --- src/app/app.module.ts | 2 +- .../add-user-dialog.component.html | 2 +- .../add-user-dialog.component.ts | 1 - .../userEmailAsyncValidator.ts | 4 +- .../add-user-dialog/userNameAsyncValidator.ts | 4 +- .../edit-user-dialog.component.html | 42 ++++++++++ .../edit-user-dialog.component.scss | 8 ++ .../edit-user-dialog.component.spec.ts | 25 ++++++ .../edit-user-dialog.component.ts | 81 +++++++++++++++++++ .../user-management.component.html | 2 +- .../user-management.component.ts | 10 +++ src/app/services/user.service.ts | 12 ++- 12 files changed, 178 insertions(+), 15 deletions(-) create mode 100644 src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.html create mode 100644 src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.scss create mode 100644 src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.spec.ts create mode 100644 src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d5b43685..11aff1fc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -474,7 +474,7 @@ import { DeleteUserDialogComponent } from './components/user-management/delete-u AddUserDialogComponent, UserFilterPipe, DeleteGroupDialogComponent, - DeleteUserDialogComponent + DeleteUserDialogComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html index 2f565edb..c94ac91c 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html @@ -22,7 +22,7 @@ - + A password between 6 and 100 characters is required. diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts index 2bc64b1b..1a94a1a9 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts @@ -65,7 +65,6 @@ export class AddUserDialogComponent implements OnInit { const newUser = this.addUserForm.value; this.userService.add(this.server, newUser) .subscribe((user: User) => { - console.log("Done ", user) this.toasterService.success(`User ${user.username} added`); this.dialogRef.close(); }, diff --git a/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts b/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts index 41f4aedd..302febae 100644 --- a/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts +++ b/src/app/components/user-management/add-user-dialog/userEmailAsyncValidator.ts @@ -16,12 +16,12 @@ import {FormControl} from "@angular/forms"; import {timer} from "rxjs"; import {map, switchMap} from "rxjs/operators"; -export const userEmailAsyncValidator = (server: Server, userService: UserService) => { +export const userEmailAsyncValidator = (server: Server, userService: UserService, except: string = '') => { return (control: FormControl) => { return timer(500).pipe( switchMap(() => userService.list(server)), map((response) => { - return (response.find((n) => n.email === control.value) ? { emailExists: true } : null); + return (response.find((n) => n.email === control.value && control.value !== except) ? { emailExists: true } : null); }) ); }; diff --git a/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts b/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts index 52503e8a..fb2dd5bb 100644 --- a/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts +++ b/src/app/components/user-management/add-user-dialog/userNameAsyncValidator.ts @@ -16,12 +16,12 @@ import {timer} from "rxjs"; import {map, switchMap} from "rxjs/operators"; import {UserService} from "../../../services/user.service"; -export const userNameAsyncValidator = (server: Server, userService: UserService) => { +export const userNameAsyncValidator = (server: Server, userService: UserService, except: string = '') => { return (control: FormControl) => { return timer(500).pipe( switchMap(() => userService.list(server)), map((response) => { - return (response.find((n) => n.username === control.value) ? { userExists: true } : null); + return (response.find((n) => n.username === control.value && control.value !== except) ? { userExists: true } : null); }) ); }; diff --git a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.html b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.html new file mode 100644 index 00000000..8b1e6e1c --- /dev/null +++ b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.html @@ -0,0 +1,42 @@ +

Update user

+
+ + + Username is required + Username is incorrect + User with this username exists + + + + + + + Email is required + Email is invalid + User with this email exists + + + + + + Password must be between 6 and 100 characters + + + + Is active + +
+ + +
+ diff --git a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.scss b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.scss new file mode 100644 index 00000000..469c3dda --- /dev/null +++ b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.scss @@ -0,0 +1,8 @@ +.input-field { + width: 100%; +} + + +.button-div { + float: right; +} diff --git a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.spec.ts b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.spec.ts new file mode 100644 index 00000000..7c6e36da --- /dev/null +++ b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditUserDialogComponent } from './edit-user-dialog.component'; + +describe('EditUserDialogComponent', () => { + let component: EditUserDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EditUserDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EditUserDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.ts b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.ts new file mode 100644 index 00000000..0a5129d1 --- /dev/null +++ b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.ts @@ -0,0 +1,81 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Component, Inject, OnInit} from '@angular/core'; +import {FormControl, FormGroup, Validators} from "@angular/forms"; +import {Server} from "@models/server"; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {UserService} from "@services/user.service"; +import {ToasterService} from "@services/toaster.service"; +import {userNameAsyncValidator} from "@components/user-management/add-user-dialog/userNameAsyncValidator"; +import {userEmailAsyncValidator} from "@components/user-management/add-user-dialog/userEmailAsyncValidator"; +import {User} from "@models/users/user"; + +@Component({ + selector: 'app-edit-user-dialog', + templateUrl: './edit-user-dialog.component.html', + styleUrls: ['./edit-user-dialog.component.scss'] +}) +export class EditUserDialogComponent implements OnInit { + + editUserForm: FormGroup; + + constructor(public dialogRef: MatDialogRef, + public userService: UserService, + private toasterService: ToasterService, + @Inject(MAT_DIALOG_DATA) public data: { user: User, server: Server }) {} + + ngOnInit(): void { + this.editUserForm = new FormGroup({ + username: new FormControl(this.data.user.username, [ + Validators.required, + Validators.minLength(3), + Validators.pattern("[a-zA-Z0-9_-]+$")], + [userNameAsyncValidator(this.data.server, this.userService, this.data.user.username)]), + full_name: new FormControl(this.data.user.full_name), + email: new FormControl(this.data.user.email, + [Validators.email, Validators.required], + [userEmailAsyncValidator(this.data.server, this.userService, this.data.user.email)]), + password: new FormControl(null, + [Validators.minLength(6), Validators.maxLength(100)]), + is_active: new FormControl(this.data.user.is_active) + }); + } + + get form() { + return this.editUserForm.controls; + } + + onCancelClick() { + this.dialogRef.close(); + } + + onEditClick() { + if (!this.editUserForm.valid) { + return; + } + const updatedUser = this.editUserForm.value; + + updatedUser.user_id = this.data.user.user_id; + console.log(updatedUser) + this.userService.update(this.data.server, updatedUser) + .subscribe((user: User) => { + console.log("Done ", user) + this.toasterService.success(`User ${user.username} updated`); + this.dialogRef.close(); + }, + (error) => { + this.toasterService.error('Cannot update user : ' + error); + }) + } + +} diff --git a/src/app/components/user-management/user-management.component.html b/src/app/components/user-management/user-management.component.html index a155cdf0..72cc8dbb 100644 --- a/src/app/components/user-management/user-management.component.html +++ b/src/app/components/user-management/user-management.component.html @@ -38,7 +38,7 @@ Username - {{ row.username }} + {{ row.username }} diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index 83798abb..98631aaa 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -26,6 +26,7 @@ import {DeleteUserDialogComponent} from "@components/user-management/delete-user import {ToasterService} from "@services/toaster.service"; import {MatPaginator} from "@angular/material/paginator"; import {MatTableDataSource} from "@angular/material/table"; +import {EditUserDialogComponent} from "@components/user-management/edit-user-dialog/edit-user-dialog.component"; @Component({ selector: 'app-user-management', @@ -143,4 +144,13 @@ export class UserManagementComponent implements OnInit { }); } + + onEdit(user: User) { + this.dialog + .open(EditUserDialogComponent, {width: '500px', data: {user: user, server: this.server}}) + .afterClosed() + .subscribe(() => { + this.refresh(); + }); + } } diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts index 8cd4c0b4..72ca9ab3 100644 --- a/src/app/services/user.service.ts +++ b/src/app/services/user.service.ts @@ -20,16 +20,14 @@ export class UserService { } add(server: Server, user: any): Observable { - return this.httpServer.post(server, `/users`, { - username: user.username, - is_active: user.is_active, - email: user.email, - full_name: user.full_name, - password: user.password - }); + return this.httpServer.post(server, `/users`, user); } delete(server: Server, user_id: string) { return this.httpServer.delete(server, `/users/${user_id}`); } + + update(server: Server, user: User): Observable { + return this.httpServer.put(server, `/users/${user.user_id}`, user); + } } From c3f3fafbef94000014b6731e8db548672706a711 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Thu, 16 Dec 2021 14:10:28 +0000 Subject: [PATCH 14/50] user management detail refactor --- src/app/app-routing.module.ts | 7 ++ src/app/app.module.ts | 2 + .../edit-user-dialog.component.html | 42 ------- .../edit-user-dialog.component.scss | 8 -- .../user-detail/user-detail.component.html | 74 +++++++++++++ .../user-detail/user-detail.component.scss | 16 +++ .../user-detail.component.spec.ts} | 12 +- .../user-detail/user-detail.component.ts | 103 ++++++++++++++++++ .../user-management.component.html | 3 +- .../user-management.component.ts | 16 +-- src/app/services/user.service.ts | 11 +- 11 files changed, 222 insertions(+), 72 deletions(-) delete mode 100644 src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.html delete mode 100644 src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.scss create mode 100644 src/app/components/user-management/user-detail/user-detail.component.html create mode 100644 src/app/components/user-management/user-detail/user-detail.component.scss rename src/app/components/user-management/{edit-user-dialog/edit-user-dialog.component.spec.ts => user-detail/user-detail.component.spec.ts} (52%) create mode 100644 src/app/components/user-management/user-detail/user-detail.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c83e3179..b3d367d1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -57,6 +57,7 @@ import { ServerResolve } from './resolvers/server-resolve'; import { UserManagementComponent } from './components/user-management/user-management.component'; import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; import {GroupManagementComponent} from "./components/group-management/group-management.component"; +import {UserDetailComponent} from "@components/user-management/user-detail/user-detail.component"; const routes: Routes = [ { @@ -83,6 +84,12 @@ const routes: Routes = [ canActivate: [LoginGuard], resolve: { server: ServerResolve }, }, + { + path: 'server/:server_id/user_management/:user_id', + component: UserDetailComponent, + canActivate: [LoginGuard], + resolve: { server: ServerResolve }, + }, { path: 'installed-software', component: InstalledSoftwareComponent }, { path: 'server/:server_id/systemstatus', component: SystemStatusComponent, canActivate: [LoginGuard] }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 11aff1fc..d64b149b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -280,6 +280,7 @@ import { GroupFilterPipe } from './filters/group-filter.pipe'; import { AddGroupDialogComponent } from './components/group-management/add-group-dialog/add-group-dialog.component'; import { DeleteGroupDialogComponent } from './components/group-management/delete-group-dialog/delete-group-dialog.component'; import { DeleteUserDialogComponent } from './components/user-management/delete-user-dialog/delete-user-dialog.component'; +import { UserDetailComponent } from './components/user-management/user-detail/user-detail.component'; @NgModule({ declarations: [ @@ -475,6 +476,7 @@ import { DeleteUserDialogComponent } from './components/user-management/delete-u UserFilterPipe, DeleteGroupDialogComponent, DeleteUserDialogComponent, + UserDetailComponent ], imports: [ BrowserModule, diff --git a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.html b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.html deleted file mode 100644 index 8b1e6e1c..00000000 --- a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.html +++ /dev/null @@ -1,42 +0,0 @@ -

Update user

-
- - - Username is required - Username is incorrect - User with this username exists - - - - - - - Email is required - Email is invalid - User with this email exists - - - - - - Password must be between 6 and 100 characters - - - - Is active - -
- - -
- diff --git a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.scss b/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.scss deleted file mode 100644 index 469c3dda..00000000 --- a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.scss +++ /dev/null @@ -1,8 +0,0 @@ -.input-field { - width: 100%; -} - - -.button-div { - float: right; -} diff --git a/src/app/components/user-management/user-detail/user-detail.component.html b/src/app/components/user-management/user-detail/user-detail.component.html new file mode 100644 index 00000000..5d24dc14 --- /dev/null +++ b/src/app/components/user-management/user-detail/user-detail.component.html @@ -0,0 +1,74 @@ +
+
+
+ +

User Details

+
+
+
+
+

Update user

+
+
+ + + Username is required + Username is incorrect + User with this username exists + + + + + + + Email is required + Email is invalid + User with this email exists + + + + + + Password must be between 6 and 100 characters + + + + Is active + +
+ +
+ +
+ +
+ +
+
Groups
+ +
+
+
+ + diff --git a/src/app/components/user-management/user-detail/user-detail.component.scss b/src/app/components/user-management/user-detail/user-detail.component.scss new file mode 100644 index 00000000..a1d07ca9 --- /dev/null +++ b/src/app/components/user-management/user-detail/user-detail.component.scss @@ -0,0 +1,16 @@ +.input-field { + width: 100%; +} + +.button-div { + float: right; +} + +.user-edit , +.user-groups { + flex: 1; +} + +.default-content { + display: flex; +} diff --git a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.spec.ts b/src/app/components/user-management/user-detail/user-detail.component.spec.ts similarity index 52% rename from src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.spec.ts rename to src/app/components/user-management/user-detail/user-detail.component.spec.ts index 7c6e36da..66c3622e 100644 --- a/src/app/components/user-management/edit-user-dialog/edit-user-dialog.component.spec.ts +++ b/src/app/components/user-management/user-detail/user-detail.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { EditUserDialogComponent } from './edit-user-dialog.component'; +import { UserDetailComponent } from './user-detail.component'; -describe('EditUserDialogComponent', () => { - let component: EditUserDialogComponent; - let fixture: ComponentFixture; +describe('UserDetailComponent', () => { + let component: UserDetailComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ EditUserDialogComponent ] + declarations: [ UserDetailComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(EditUserDialogComponent); + fixture = TestBed.createComponent(UserDetailComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/components/user-management/user-detail/user-detail.component.ts b/src/app/components/user-management/user-detail/user-detail.component.ts new file mode 100644 index 00000000..9e206946 --- /dev/null +++ b/src/app/components/user-management/user-detail/user-detail.component.ts @@ -0,0 +1,103 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {FormControl, FormGroup, Validators} from "@angular/forms"; +import {Group} from "@models/groups/group"; +import {UserService} from "@services/user.service"; +import {ToasterService} from "@services/toaster.service"; +import {User} from "@models/users/user"; +import {Server} from "@models/server"; +import {userNameAsyncValidator} from "@components/user-management/add-user-dialog/userNameAsyncValidator"; +import {userEmailAsyncValidator} from "@components/user-management/add-user-dialog/userEmailAsyncValidator"; +import {ActivatedRoute, Router} from "@angular/router"; + +@Component({ + selector: 'app-user-detail', + templateUrl: './user-detail.component.html', + styleUrls: ['./user-detail.component.scss'] +}) +export class UserDetailComponent implements OnInit { + + editUserForm: FormGroup; + groups: Group[]; + user: User; + server: Server; + user_id: string; + + constructor(public userService: UserService, + private toasterService: ToasterService, + private route: ActivatedRoute, + private router: Router) { + + } + + ngOnInit(): void { + this.server = this.route.snapshot.data['server']; + if (!this.server) this.router.navigate(['/servers']); + + this.user_id = this.route.snapshot.paramMap.get('user_id'); + this.userService.get(this.server, this.user_id).subscribe((user: User) => { + console.log(user) + this.user = user; + this.userService.getGroupsByUserId(this.server, this.user.user_id).subscribe( + (groups: Group[]) => { + this.groups = groups; + }); + this.initForm(); + }) + } + + initForm() { + this.editUserForm = new FormGroup({ + username: new FormControl(this.user.username, [ + Validators.required, + Validators.minLength(3), + Validators.pattern("[a-zA-Z0-9_-]+$")], + [userNameAsyncValidator(this.server, this.userService, this.user.username)]), + full_name: new FormControl(this.user.full_name), + email: new FormControl(this.user.email, + [Validators.email, Validators.required], + [userEmailAsyncValidator(this.server, this.userService, this.user.email)]), + password: new FormControl(null, + [Validators.minLength(6), Validators.maxLength(100)]), + is_active: new FormControl(this.user.is_active) + }); + } + + get form() { + return this.editUserForm.controls; + } + + onEditClick() { + if (!this.editUserForm.valid) { + return; + } + + const updatedUser = this.getUpdatedValues(); + updatedUser['user_id'] = this.user.user_id; + + this.userService.update(this.server, updatedUser) + .subscribe((user: User) => { + console.log("Done ", user) + this.toasterService.success(`User ${user.username} updated`); + }, + (error) => { + this.toasterService.error('Cannot update user : ' + error); + }) + } + + getUpdatedValues() { + let dirtyValues = {}; + + Object.keys(this.editUserForm.controls) + .forEach(key => { + const currentControl = this.editUserForm.get(key); + + if (currentControl.dirty && currentControl.value !== this.user[key] && currentControl.value !== '') { + dirtyValues[key] = currentControl.value; + } + }); + + return dirtyValues; + } + + +} diff --git a/src/app/components/user-management/user-management.component.html b/src/app/components/user-management/user-management.component.html index 72cc8dbb..6ab59098 100644 --- a/src/app/components/user-management/user-management.component.html +++ b/src/app/components/user-management/user-management.component.html @@ -38,7 +38,8 @@ Username - {{ row.username }} + {{ row.username }} diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index 98631aaa..cdfa47ad 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -13,20 +13,17 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from "@angular/router"; import {Server} from "@models/server"; -import {MatSort, MatSortable, Sort} from "@angular/material/sort"; +import {MatSort} from "@angular/material/sort"; import {UserService} from "@services/user.service"; import {ProgressService} from "../../common/progress/progress.service"; import {User} from "@models/users/user"; -import {BehaviorSubject, merge, Observable} from "rxjs"; -import {DataSource, SelectionModel} from "@angular/cdk/collections"; -import {map} from "rxjs/operators"; +import {SelectionModel} from "@angular/cdk/collections"; import {AddUserDialogComponent} from "@components/user-management/add-user-dialog/add-user-dialog.component"; import {MatDialog} from "@angular/material/dialog"; import {DeleteUserDialogComponent} from "@components/user-management/delete-user-dialog/delete-user-dialog.component"; import {ToasterService} from "@services/toaster.service"; import {MatPaginator} from "@angular/material/paginator"; import {MatTableDataSource} from "@angular/material/table"; -import {EditUserDialogComponent} from "@components/user-management/edit-user-dialog/edit-user-dialog.component"; @Component({ selector: 'app-user-management', @@ -144,13 +141,4 @@ export class UserManagementComponent implements OnInit { }); } - - onEdit(user: User) { - this.dialog - .open(EditUserDialogComponent, {width: '500px', data: {user: user, server: this.server}}) - .afterClosed() - .subscribe(() => { - this.refresh(); - }); - } } diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts index 72ca9ab3..e0540d59 100644 --- a/src/app/services/user.service.ts +++ b/src/app/services/user.service.ts @@ -4,6 +4,7 @@ import { Server } from '../models/server'; import { HttpServer } from './http-server.service'; import { User } from '../models/users/user'; import {Project} from "@models/project"; +import {Group} from "@models/groups/group"; @Injectable() export class UserService { @@ -15,6 +16,10 @@ export class UserService { return this.httpServer.get(server, '/users/me/'); } + get(server:Server, user_id: string) { + return this.httpServer.get(server, `/users/${user_id}`); + } + list(server: Server) { return this.httpServer.get(server, '/users'); } @@ -27,7 +32,11 @@ export class UserService { return this.httpServer.delete(server, `/users/${user_id}`); } - update(server: Server, user: User): Observable { + update(server: Server, user: any): Observable { return this.httpServer.put(server, `/users/${user.user_id}`, user); } + + getGroupsByUserId(server: Server, user_id: string) { + return this.httpServer.get(server, `/users/${user_id}/groups`); + } } From 6122801f901de6a11be8ab0c2683c104b5275238 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Tue, 28 Dec 2021 09:27:42 +0100 Subject: [PATCH 15/50] group management, add group details --- src/app/app-routing.module.ts | 4 + src/app/app.module.ts | 8 +- .../add-user-to-group-dialog.component.html | 16 +++ .../add-user-to-group-dialog.component.scss | 31 ++++++ ...add-user-to-group-dialog.component.spec.ts | 25 +++++ .../add-user-to-group-dialog.component.ts | 79 +++++++++++++++ .../group-details.component.html | 40 ++++++++ .../group-details.component.scss | 46 +++++++++ .../group-details.component.spec.ts | 25 +++++ .../group-details/group-details.component.ts | 98 +++++++++++++++++++ ...remove-user-to-group-dialog.component.html | 9 ++ ...remove-user-to-group-dialog.component.scss | 20 ++++ ...ove-user-to-group-dialog.component.spec.ts | 25 +++++ .../remove-user-to-group-dialog.component.ts | 25 +++++ .../group-management.component.html | 8 +- .../group-management.component.ts | 59 +++++------ src/app/filters/group-filter.pipe.ts | 14 ++- .../resolvers/group-details.resolver.spec.ts | 16 +++ src/app/resolvers/group-details.resolver.ts | 40 ++++++++ src/app/services/group.service.ts | 16 +++ 20 files changed, 557 insertions(+), 47 deletions(-) create mode 100644 src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.html create mode 100644 src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.scss create mode 100644 src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.spec.ts create mode 100644 src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.ts create mode 100644 src/app/components/group-details/group-details.component.html create mode 100644 src/app/components/group-details/group-details.component.scss create mode 100644 src/app/components/group-details/group-details.component.spec.ts create mode 100644 src/app/components/group-details/group-details.component.ts create mode 100644 src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.html create mode 100644 src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.scss create mode 100644 src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.spec.ts create mode 100644 src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.ts create mode 100644 src/app/resolvers/group-details.resolver.spec.ts create mode 100644 src/app/resolvers/group-details.resolver.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b3d367d1..79fa95cf 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -57,7 +57,9 @@ import { ServerResolve } from './resolvers/server-resolve'; import { UserManagementComponent } from './components/user-management/user-management.component'; import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; import {GroupManagementComponent} from "./components/group-management/group-management.component"; +import {GroupDetailsComponent} from "@components/group-details/group-details.component"; import {UserDetailComponent} from "@components/user-management/user-detail/user-detail.component"; +import {GroupDetailsResolver} from "@resolvers/group-details.resolver"; const routes: Routes = [ { @@ -205,6 +207,8 @@ const routes: Routes = [ { path: 'server/:server_id/preferences/iou/templates/:template_id/copy', component: CopyIouTemplateComponent, canActivate: [LoginGuard] }, { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent, canActivate: [LoginGuard] }, { path: 'server/:server_id/group_management', component: GroupManagementComponent}, + { path: 'server/:server_id/group_management/:user_group_id', component: GroupDetailsComponent, resolve: {group: GroupDetailsResolver}}, + ], }, { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d64b149b..8280698c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -280,7 +280,10 @@ import { GroupFilterPipe } from './filters/group-filter.pipe'; import { AddGroupDialogComponent } from './components/group-management/add-group-dialog/add-group-dialog.component'; import { DeleteGroupDialogComponent } from './components/group-management/delete-group-dialog/delete-group-dialog.component'; import { DeleteUserDialogComponent } from './components/user-management/delete-user-dialog/delete-user-dialog.component'; +import { GroupDetailsComponent } from './components/group-details/group-details.component'; import { UserDetailComponent } from './components/user-management/user-detail/user-detail.component'; +import { AddUserToGroupDialogComponent } from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component'; +import { RemoveUserToGroupDialogComponent } from './components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component'; @NgModule({ declarations: [ @@ -476,7 +479,10 @@ import { UserDetailComponent } from './components/user-management/user-detail/us UserFilterPipe, DeleteGroupDialogComponent, DeleteUserDialogComponent, - UserDetailComponent + GroupDetailsComponent, + UserDetailComponent, + AddUserToGroupDialogComponent, + RemoveUserToGroupDialogComponent ], imports: [ BrowserModule, diff --git a/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.html b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.html new file mode 100644 index 00000000..5c397473 --- /dev/null +++ b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.html @@ -0,0 +1,16 @@ +
+

Add User To group: {{data.group.name}}

+
+
+ + Search user + + +
+ +
+
{{user.username}}
+
{{user.email}}
+ add + +
diff --git a/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.scss b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.scss new file mode 100644 index 00000000..51781781 --- /dev/null +++ b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.scss @@ -0,0 +1,31 @@ +:host { + display: flex; + flex-direction: column; + width: 100%; +} + +.title { + width: 100%; + text-align: center; +} + +.filter { + display: flex; + width: 600px; + justify-content: center; + margin-bottom: 50px; +} + +mat-form-field { + width: 600px; +} + +input { + width: 100%; +} + +.userList { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} diff --git a/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.spec.ts b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.spec.ts new file mode 100644 index 00000000..ead6fde4 --- /dev/null +++ b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddUserToGroupDialogComponent } from './add-user-to-group-dialog.component'; + +describe('AddUserToGroupDialogComponent', () => { + let component: AddUserToGroupDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddUserToGroupDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddUserToGroupDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.ts b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.ts new file mode 100644 index 00000000..2a83777a --- /dev/null +++ b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.ts @@ -0,0 +1,79 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {UserService} from "@services/user.service"; +import {Server} from "@models/server"; +import {BehaviorSubject, forkJoin, observable, Observable, timer} from "rxjs"; +import {User} from "@models/users/user"; +import {GroupService} from "@services/group.service"; +import {Group} from "@models/groups/group"; +import {tap} from "rxjs/operators"; +import {ToasterService} from "@services/toaster.service"; + +@Component({ + selector: 'app-add-user-to-group-dialog', + templateUrl: './add-user-to-group-dialog.component.html', + styleUrls: ['./add-user-to-group-dialog.component.scss'] +}) +export class AddUserToGroupDialogComponent implements OnInit { + users = new BehaviorSubject([]); + displayedUsers = new BehaviorSubject([]); + + searchText: string; + loading = false; + + constructor(private dialog: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { server: Server; group: Group }, + private userService: UserService, + private groupService: GroupService, + private toastService: ToasterService) { + } + + ngOnInit(): void { + this.getUsers(); + } + + onSearch() { + timer(500) + .subscribe(() => { + const displayedUsers = this.users.value.filter((user: User) => { + return user.username.includes(this.searchText) || user.email?.includes(this.searchText); + }); + + this.displayedUsers.next(displayedUsers); + }); + } + + getUsers() { + forkJoin([ + this.userService.list(this.data.server), + this.groupService.getGroupMember(this.data.server, this.data.group.user_group_id) + ]).subscribe((results) => { + const [userList, members] = results; + const users = userList.filter((user: User) => { + return !members.find((u: User) => u.user_id === user.user_id); + }); + + this.users.next(users); + this.displayedUsers.next(users); + + }); + + } + + addUser(user: User) { + this.loading = true; + this.groupService + .addMemberToGroup(this.data.server, this.data.group, user) + .subscribe(() => { + this.toastService.success(`user ${user.username} was added`); + this.getUsers(); + this.loading = false; + }, (err) => { + console.log(err); + this.toastService.error(`error while adding user ${user.username} to group ${this.data.group.name}`); + this.loading = false; + }); + + + } +} diff --git a/src/app/components/group-details/group-details.component.html b/src/app/components/group-details/group-details.component.html new file mode 100644 index 00000000..fa22aec5 --- /dev/null +++ b/src/app/components/group-details/group-details.component.html @@ -0,0 +1,40 @@ +
+
+
+

Groups {{group.name}} details

+
+
+
+
+ + Group name: + + +
+
Creation date: {{group.created_at}}
+
Last update Date: {{group.updated_at}}
+
UUID: {{group.user_group_id}}
+
+ Is build in +
+
+ +
+
+
+
+
Members:
+ person_add +
+
+
{{user.username}}
 + delete +
+
+ +
+
+
diff --git a/src/app/components/group-details/group-details.component.scss b/src/app/components/group-details/group-details.component.scss new file mode 100644 index 00000000..54ea87ef --- /dev/null +++ b/src/app/components/group-details/group-details.component.scss @@ -0,0 +1,46 @@ +.main { + display: flex; + justify-content: space-between; +} + +.details { + width: 30vw; + display: flex; + flex-direction: column; + justify-content: center; +} + +.members { + width: 40vw; + display: flex; + flex-direction: column; + justify-content: stretch; +} + +.members > div { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 5px; +} + +.clickable { + cursor: pointer; +} + +.members .title { + font-size: 2em; + text-decoration: underline; +} + +.details > div { + margin-bottom: 20px; +} + +.input-field { + width: 100%; +} + +.button-div { + float: right; +} diff --git a/src/app/components/group-details/group-details.component.spec.ts b/src/app/components/group-details/group-details.component.spec.ts new file mode 100644 index 00000000..f536c6c2 --- /dev/null +++ b/src/app/components/group-details/group-details.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GroupDetailsComponent } from './group-details.component'; + +describe('GroupDetailsComponent', () => { + let component: GroupDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GroupDetailsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GroupDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/group-details/group-details.component.ts b/src/app/components/group-details/group-details.component.ts new file mode 100644 index 00000000..4115c571 --- /dev/null +++ b/src/app/components/group-details/group-details.component.ts @@ -0,0 +1,98 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {ActivatedRoute, Router} from "@angular/router"; +import {Server} from "@models/server"; +import {Group} from "@models/groups/group"; +import {User} from "@models/users/user"; +import {FormControl, FormGroup} from "@angular/forms"; +import {MatDialog} from "@angular/material/dialog"; +import {AddUserToGroupDialogComponent} from "@components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component"; +import {RemoveUserToGroupDialogComponent} from "@components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component"; +import {GroupService} from "@services/group.service"; +import {ToasterService} from "@services/toaster.service"; + +@Component({ + selector: 'app-group-details', + templateUrl: './group-details.component.html', + styleUrls: ['./group-details.component.scss'] +}) +export class GroupDetailsComponent implements OnInit { + server: Server; + group: Group; + members: User[]; + editGroupForm: FormGroup; + + constructor(private route: ActivatedRoute, + private dialog: MatDialog, + private groupService: GroupService, + private toastService: ToasterService) { + + this.editGroupForm = new FormGroup({ + groupname: new FormControl(''), + }); + + this.route.data.subscribe((d: { group: { server: Server; group: Group, users: User[] } }) => { + + this.server = d.group.server; + this.group = d.group.group; + this.members = d.group.users; + this.editGroupForm.setValue({groupname: this.group.name}); + }); + + + } + + ngOnInit(): void { + + } + + onUpdate() { + this.groupService.update(this.server, this.group) + .subscribe(() => { + this.toastService.success(`group updated`); + }, (error) => { + this.toastService.error('Error: Cannot update group'); + console.log(error); + }); + } + + openAddUserDialog() { + this.dialog + .open(AddUserToGroupDialogComponent, + { + width: '700px', height: '500px', + data: {server: this.server, group: this.group} + }) + .afterClosed() + .subscribe(() => { + this.reloadMembers(); + }); + } + + openRemoveUserDialog(user: User) { + this.dialog + .open(RemoveUserToGroupDialogComponent, + {width: '500px', height: '200px', data: {user}}) + .afterClosed() + .subscribe((userToRemove: User) => { + console.log(userToRemove); + if (userToRemove) { + this.groupService.removeUser(this.server, this.group, userToRemove) + .subscribe(() => { + this.toastService.success(`User ${user.username} was removed`); + this.reloadMembers(); + }, + (error) => { + this.toastService.error(`Error while removing user ${user.username} from ${this.group.name}`); + console.log(error); + }); + } + }); + } + + reloadMembers() { + this.groupService.getGroupMember(this.server, this.group.user_group_id) + .subscribe((members: User[]) => { + this.members = members; + }); + } +} diff --git a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.html b/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.html new file mode 100644 index 00000000..a87d964d --- /dev/null +++ b/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.html @@ -0,0 +1,9 @@ +
+
Confirm ?
+
Removing user: {{data.user.username}}
+
+
+ + +
+ diff --git a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.scss b/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.scss new file mode 100644 index 00000000..8ebc2b8a --- /dev/null +++ b/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.scss @@ -0,0 +1,20 @@ +:host { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} + +.header { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + margin-bottom: 20px; +} + +.button { + display: flex; + flex-direction: row; + justify-content: space-evenly; +} diff --git a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.spec.ts b/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.spec.ts new file mode 100644 index 00000000..61d76e2f --- /dev/null +++ b/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RemoveUserToGroupDialogComponent } from './remove-user-to-group-dialog.component'; + +describe('RemoveUserToGroupDialogComponent', () => { + let component: RemoveUserToGroupDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RemoveUserToGroupDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RemoveUserToGroupDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.ts b/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.ts new file mode 100644 index 00000000..089389d0 --- /dev/null +++ b/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.ts @@ -0,0 +1,25 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {User} from "@models/users/user"; + +@Component({ + selector: 'app-remove-user-to-group-dialog', + templateUrl: './remove-user-to-group-dialog.component.html', + styleUrls: ['./remove-user-to-group-dialog.component.scss'] +}) +export class RemoveUserToGroupDialogComponent implements OnInit { + + constructor(private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { user: User }) { } + + ngOnInit(): void { + } + + onCancel() { + this.dialogRef.close(); + } + + onConfirm() { + this.dialogRef.close(this.data.user); + } +} diff --git a/src/app/components/group-management/group-management.component.html b/src/app/components/group-management/group-management.component.html index f17dcea8..4b4be62e 100644 --- a/src/app/components/group-management/group-management.component.html +++ b/src/app/components/group-management/group-management.component.html @@ -18,7 +18,7 @@
-
Name {{element.name}}
+
@@ -37,7 +37,7 @@ - + @@ -67,5 +67,9 @@
Name {{element.name}} {{element.name}}
+ +
diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index 52609152..20a4d107 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -10,21 +10,21 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import {Component, OnInit} from '@angular/core'; -import {ActivatedRoute} from "@angular/router"; +import {Component, OnInit, ViewChild} from '@angular/core'; +import {ActivatedRoute, Router} from "@angular/router"; import {ServerService} from "../../services/server.service"; import {ToasterService} from "../../services/toaster.service"; import {GroupService} from "../../services/group.service"; import {Server} from "../../models/server"; import {Group} from "../../models/groups/group"; -import {Sort} from "@angular/material/sort"; +import {MatSort, Sort} from "@angular/material/sort"; import {MatDialog} from "@angular/material/dialog"; import {AddGroupDialogComponent} from "@components/group-management/add-group-dialog/add-group-dialog.component"; import {DeleteGroupDialogComponent} from "@components/group-management/delete-group-dialog/delete-group-dialog.component"; import {SelectionModel} from "@angular/cdk/collections"; -import {DeleteUserDialogComponent} from "@components/user-management/delete-user-dialog/delete-user-dialog.component"; -import {User} from "@models/users/user"; import {forkJoin} from "rxjs"; +import {MatPaginator} from "@angular/material/paginator"; +import {MatTableDataSource} from "@angular/material/table"; @Component({ selector: 'app-group-management', @@ -34,10 +34,13 @@ import {forkJoin} from "rxjs"; export class GroupManagementComponent implements OnInit { server: Server; + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort, { static: true }) sort: MatSort; + public displayedColumns = ['select', 'name', 'created_at', 'updated_at', 'is_builtin', 'delete']; selection = new SelectionModel(true, []); groups: Group[]; - sortedGroups: Group[]; + dataSource = new MatTableDataSource(); searchText: string; constructor( @@ -49,44 +52,28 @@ export class GroupManagementComponent implements OnInit { ) { } + ngOnInit(): void { const serverId = this.route.snapshot.paramMap.get('server_id'); this.serverService.get(+serverId).then((server: Server) => { this.server = server; - this.groupService.getGroups(server).subscribe((groups: Group[]) => { - this.groups = groups; - this.sortedGroups = groups; - }); + this.refresh(); }); } - sort(sort: Sort) { - const data = this.groups.slice(); - if (!sort.active || sort.direction === '') { - this.sortedGroups = data; - return; - } - - this.sortedGroups = data.sort((a, b) => { - const isAsc = sort.direction === 'asc'; - switch (sort.active) { - case 'name': - return compare(a.name.toLowerCase(), b.name.toLowerCase(), isAsc); - case 'created_at': - return compare(a.created_at, b.created_at, isAsc); - case 'updated_at': - return compare(a.updated_at, b.updated_at, isAsc); - case 'is_builtin': - return compare(a.is_builtin.toString(), b.is_builtin.toString(), isAsc); + ngAfterViewInit() { + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + this.dataSource.sortingDataAccessor = (item, property) => { + switch (property) { + case 'username': + case 'full_name': + case 'email': + return item[property] ? item[property].toLowerCase() : ''; default: - return 0; + return item[property]; } - }); - - function compare(a: number | string, b: number | string, isAsc: boolean) { - - return (a < b ? -1 : 1) * (isAsc ? 1 : -1); - } + }; } isAllSelected() { @@ -120,7 +107,7 @@ export class GroupManagementComponent implements OnInit { refresh() { this.groupService.getGroups(this.server).subscribe((groups: Group[]) => { this.groups = groups; - this.sortedGroups = groups; + this.dataSource.data = groups; this.selection.clear(); }); } diff --git a/src/app/filters/group-filter.pipe.ts b/src/app/filters/group-filter.pipe.ts index 25653143..8bda5a94 100644 --- a/src/app/filters/group-filter.pipe.ts +++ b/src/app/filters/group-filter.pipe.ts @@ -12,24 +12,22 @@ */ import {Pipe, PipeTransform} from '@angular/core'; import {Group} from "../models/groups/group"; +import {MatTableDataSource} from "@angular/material/table"; @Pipe({ name: 'groupFilter' }) export class GroupFilterPipe implements PipeTransform { - transform(groups: Group[], searchText: string): Group[] { - if (!groups) { - return []; - } + transform(groups: MatTableDataSource, searchText: string): MatTableDataSource { + if (!searchText) { return groups; } - searchText = searchText.toLowerCase(); - return groups.filter((group: Group) => { - return group.name.toLowerCase().includes(searchText); - }); + searchText = searchText.trim().toLowerCase(); + groups.filter = searchText; + return groups; } } diff --git a/src/app/resolvers/group-details.resolver.spec.ts b/src/app/resolvers/group-details.resolver.spec.ts new file mode 100644 index 00000000..f57fe67f --- /dev/null +++ b/src/app/resolvers/group-details.resolver.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { GroupDetailsResolver } from './group-details.resolver'; + +describe('GroupDetailsResolver', () => { + let resolver: GroupDetailsResolver; + + beforeEach(() => { + TestBed.configureTestingModule({}); + resolver = TestBed.inject(GroupDetailsResolver); + }); + + it('should be created', () => { + expect(resolver).toBeTruthy(); + }); +}); diff --git a/src/app/resolvers/group-details.resolver.ts b/src/app/resolvers/group-details.resolver.ts new file mode 100644 index 00000000..ae1c5fc7 --- /dev/null +++ b/src/app/resolvers/group-details.resolver.ts @@ -0,0 +1,40 @@ +import { Injectable } from '@angular/core'; +import { + Router, Resolve, + RouterStateSnapshot, + ActivatedRouteSnapshot +} from '@angular/router'; +import {Observable, of, Subscriber} from 'rxjs'; +import {ServerService} from "../services/server.service"; +import {GroupService} from "../services/group.service"; +import {Server} from "../models/server"; +import {Group} from "../models/groups/group"; +import {User} from "../models/users/user"; + +@Injectable({ + providedIn: 'root' +}) +export class GroupDetailsResolver implements Resolve<{server: Server; group: Group; users: User[]}> { + + constructor(private serverService: ServerService, + private groupService: GroupService) { + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<{server: Server; group: Group; users: User[]}> { + + return new Observable<{server: Server; group: Group; users: User[]}>((subscriber: Subscriber) => { + + const serverId = route.paramMap.get('server_id'); + const groupId = route.paramMap.get('user_group_id'); + + this.serverService.get(+serverId).then((server: Server) => { + this.groupService.get(server, groupId).subscribe((group: Group) => { + this.groupService.getGroupMember(server, groupId).subscribe((users: User[]) => { + subscriber.next({server, group, users}); + subscriber.complete(); + }); + }); + }); + }); + } +} diff --git a/src/app/services/group.service.ts b/src/app/services/group.service.ts index 62f14eb4..d7f5914e 100644 --- a/src/app/services/group.service.ts +++ b/src/app/services/group.service.ts @@ -42,4 +42,20 @@ export class GroupService { delete(server: Server, user_group_id: string) { return this.httpServer.delete(server, `/groups/${user_group_id}`); } + + get(server: Server, user_group_id: string) { + return this.httpServer.get(server, `/groups/${user_group_id}`); + } + + addMemberToGroup(server: Server, group: Group, user: User) { + return this.httpServer.put(server, `/groups/${group.user_group_id}/members/${user.user_id}`, {}); + } + + removeUser(server: Server, group: Group, user: User) { + return this.httpServer.delete(server, `/groups/${group.user_group_id}/members/${user.user_id}`); + } + + update(server: Server, group: Group) { + return this.httpServer.put(server, `/groups/${group.user_group_id}`, {name: group.name}); + } } From 4911b0da66db5a41d31ba61fc47012ee44452e0b Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Fri, 7 Jan 2022 09:42:20 +0000 Subject: [PATCH 16/50] create permission service --- .../add-user-to-group-dialog.component.ts | 12 ++++++++ .../group-details/group-details.component.ts | 12 ++++++++ .../remove-user-to-group-dialog.component.ts | 12 ++++++++ src/app/models/permission.ts | 23 +++++++++++++++ src/app/resolvers/group-details.resolver.ts | 12 ++++++++ src/app/services/permissions.service.spec.ts | 16 ++++++++++ src/app/services/permissions.service.ts | 29 +++++++++++++++++++ 7 files changed, 116 insertions(+) create mode 100644 src/app/models/permission.ts create mode 100644 src/app/services/permissions.service.spec.ts create mode 100644 src/app/services/permissions.service.ts diff --git a/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.ts b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.ts index 2a83777a..3f1483cb 100644 --- a/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.ts +++ b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, Inject, OnInit} from '@angular/core'; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {UserService} from "@services/user.service"; diff --git a/src/app/components/group-details/group-details.component.ts b/src/app/components/group-details/group-details.component.ts index 4115c571..d773634a 100644 --- a/src/app/components/group-details/group-details.component.ts +++ b/src/app/components/group-details/group-details.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, Inject, OnInit} from '@angular/core'; import {ActivatedRoute, Router} from "@angular/router"; import {Server} from "@models/server"; diff --git a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.ts b/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.ts index 089389d0..ef70a89f 100644 --- a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.ts +++ b/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, Inject, OnInit} from '@angular/core'; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {User} from "@models/users/user"; diff --git a/src/app/models/permission.ts b/src/app/models/permission.ts new file mode 100644 index 00000000..4462cd33 --- /dev/null +++ b/src/app/models/permission.ts @@ -0,0 +1,23 @@ +export enum Methods { + GET = 'GET', + HEAD = 'HEAD', + POST = 'POST', + PATCH = 'PATCH', + PUT = 'PUT', + DELETE = 'DELETE' +} + +export enum PermissionActions { + ALLOW = 'ALLOW', + DENY = 'DENY' +} + +export interface Permission { + methods: Methods[], + path: string, + action: PermissionActions, + description: string, + created_at: string, + updated_at: string, + permission_id: string +} diff --git a/src/app/resolvers/group-details.resolver.ts b/src/app/resolvers/group-details.resolver.ts index ae1c5fc7..89049766 100644 --- a/src/app/resolvers/group-details.resolver.ts +++ b/src/app/resolvers/group-details.resolver.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { Injectable } from '@angular/core'; import { Router, Resolve, diff --git a/src/app/services/permissions.service.spec.ts b/src/app/services/permissions.service.spec.ts new file mode 100644 index 00000000..f5972c66 --- /dev/null +++ b/src/app/services/permissions.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { PermissionsService } from './permissions.service'; + +describe('PermissionsService', () => { + let service: PermissionsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(PermissionsService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/permissions.service.ts b/src/app/services/permissions.service.ts new file mode 100644 index 00000000..0de4e409 --- /dev/null +++ b/src/app/services/permissions.service.ts @@ -0,0 +1,29 @@ +import { Injectable } from '@angular/core'; +import {HttpServer} from "./http-server.service"; +import {Server} from "../models/server"; +import {Permission} from "../models/permission"; +import {Observable} from "rxjs/Rx"; + +@Injectable({ + providedIn: 'root' +}) +export class PermissionsService { + + constructor(private httpServer: HttpServer) { } + + list(server: Server) { + return this.httpServer.get(server, '/permissions'); + } + + add(server: Server, permission: Permission): Observable { + return this.httpServer.post(server, '/permissions', permission); + } + + update(server: Server, permission: Permission): Observable { + return this.httpServer.put(server, `/permissions/${permission.permission_id}`, permission); + } + + delete(server: Server, permission_id: string) { + return this.httpServer.delete(server, `/permissions/${permission_id}`); + } +} From a4e8dee2e140f3ff96886c57274d25441b367f07 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Tue, 4 Jan 2022 14:20:41 +0100 Subject: [PATCH 17/50] group detail, page refactoring --- .../group-details/group-details.component.html | 1 + .../group-details/group-details.component.scss | 4 ++-- src/app/models/permission.ts | 12 ++++++++++++ src/app/services/permissions.service.ts | 12 ++++++++++++ 4 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/app/components/group-details/group-details.component.html b/src/app/components/group-details/group-details.component.html index fa22aec5..5368644d 100644 --- a/src/app/components/group-details/group-details.component.html +++ b/src/app/components/group-details/group-details.component.html @@ -24,6 +24,7 @@ +
Members:
diff --git a/src/app/components/group-details/group-details.component.scss b/src/app/components/group-details/group-details.component.scss index 54ea87ef..ac8538fc 100644 --- a/src/app/components/group-details/group-details.component.scss +++ b/src/app/components/group-details/group-details.component.scss @@ -1,6 +1,6 @@ .main { display: flex; - justify-content: space-between; + justify-content: space-around; } .details { @@ -11,7 +11,7 @@ } .members { - width: 40vw; + width: 30vw; display: flex; flex-direction: column; justify-content: stretch; diff --git a/src/app/models/permission.ts b/src/app/models/permission.ts index 4462cd33..0e93a35a 100644 --- a/src/app/models/permission.ts +++ b/src/app/models/permission.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ export enum Methods { GET = 'GET', HEAD = 'HEAD', diff --git a/src/app/services/permissions.service.ts b/src/app/services/permissions.service.ts index 0de4e409..dfde68cf 100644 --- a/src/app/services/permissions.service.ts +++ b/src/app/services/permissions.service.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { Injectable } from '@angular/core'; import {HttpServer} from "./http-server.service"; import {Server} from "../models/server"; From a7f6743860907547c2b587229ca431812eb11ddd Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Tue, 4 Jan 2022 15:16:07 +0100 Subject: [PATCH 18/50] group details, add members pagination --- src/app/app.module.ts | 4 ++- .../group-details.component.html | 3 +- .../group-details/group-details.component.ts | 2 ++ .../group-details/paginator.pipe.spec.ts | 8 +++++ .../group-details/paginator.pipe.ts | 29 +++++++++++++++++++ 5 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 src/app/components/group-details/paginator.pipe.spec.ts create mode 100644 src/app/components/group-details/paginator.pipe.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8280698c..7aff44bb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -284,6 +284,7 @@ import { GroupDetailsComponent } from './components/group-details/group-details. import { UserDetailComponent } from './components/user-management/user-detail/user-detail.component'; import { AddUserToGroupDialogComponent } from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component'; import { RemoveUserToGroupDialogComponent } from './components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component'; +import { PaginatorPipe } from './components/group-details/paginator.pipe'; @NgModule({ declarations: [ @@ -482,7 +483,8 @@ import { RemoveUserToGroupDialogComponent } from './components/group-details/rem GroupDetailsComponent, UserDetailComponent, AddUserToGroupDialogComponent, - RemoveUserToGroupDialogComponent + RemoveUserToGroupDialogComponent, + PaginatorPipe ], imports: [ BrowserModule, diff --git a/src/app/components/group-details/group-details.component.html b/src/app/components/group-details/group-details.component.html index 5368644d..5b6c370c 100644 --- a/src/app/components/group-details/group-details.component.html +++ b/src/app/components/group-details/group-details.component.html @@ -30,10 +30,11 @@
Members:
person_add
-
+ +
diff --git a/src/app/components/group-details/group-details.component.ts b/src/app/components/group-details/group-details.component.ts index d773634a..7107e920 100644 --- a/src/app/components/group-details/group-details.component.ts +++ b/src/app/components/group-details/group-details.component.ts @@ -21,6 +21,7 @@ import {AddUserToGroupDialogComponent} from "@components/group-details/add-user- import {RemoveUserToGroupDialogComponent} from "@components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component"; import {GroupService} from "@services/group.service"; import {ToasterService} from "@services/toaster.service"; +import {PageEvent} from "@angular/material/paginator"; @Component({ selector: 'app-group-details', @@ -32,6 +33,7 @@ export class GroupDetailsComponent implements OnInit { group: Group; members: User[]; editGroupForm: FormGroup; + pageEvent: PageEvent | undefined; constructor(private route: ActivatedRoute, private dialog: MatDialog, diff --git a/src/app/components/group-details/paginator.pipe.spec.ts b/src/app/components/group-details/paginator.pipe.spec.ts new file mode 100644 index 00000000..233d4a9b --- /dev/null +++ b/src/app/components/group-details/paginator.pipe.spec.ts @@ -0,0 +1,8 @@ +import { PaginatorPipe } from './paginator.pipe'; + +describe('PaginatorPipe', () => { + it('create an instance', () => { + const pipe = new PaginatorPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/components/group-details/paginator.pipe.ts b/src/app/components/group-details/paginator.pipe.ts new file mode 100644 index 00000000..59a3ca45 --- /dev/null +++ b/src/app/components/group-details/paginator.pipe.ts @@ -0,0 +1,29 @@ +import {Pipe, PipeTransform} from '@angular/core'; +import {User} from "@models/users/user"; +import {PageEvent} from "@angular/material/paginator"; + +@Pipe({ + name: 'paginator' +}) +export class PaginatorPipe implements PipeTransform { + + transform(members: User[] | undefined, paginatorEvent: PageEvent | undefined): User[] { + if (!members) { + return []; + } + + if (!paginatorEvent) { + paginatorEvent = { + length: members.length, + pageIndex: 0, + pageSize: 5 + }; + } + + + return members.slice( + paginatorEvent.pageIndex * paginatorEvent.pageSize, + (paginatorEvent.pageIndex + 1) * paginatorEvent.pageSize); + } + +} From fb7845bbcef1e01e3f47e6d0c9e8917b08e9e6d5 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Tue, 4 Jan 2022 15:33:20 +0100 Subject: [PATCH 19/50] group details, add filter on members list --- src/app/app.module.ts | 4 +++- .../group-details.component.html | 18 ++++++++++++----- .../group-details.component.scss | 14 +++++++++---- .../group-details/group-details.component.ts | 1 + .../group-details/members-filter.pipe.spec.ts | 8 ++++++++ .../group-details/members-filter.pipe.ts | 20 +++++++++++++++++++ .../group-details/paginator.pipe.ts | 12 +++++++++++ 7 files changed, 67 insertions(+), 10 deletions(-) create mode 100644 src/app/components/group-details/members-filter.pipe.spec.ts create mode 100644 src/app/components/group-details/members-filter.pipe.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7aff44bb..2517da92 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -285,6 +285,7 @@ import { UserDetailComponent } from './components/user-management/user-detail/us import { AddUserToGroupDialogComponent } from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component'; import { RemoveUserToGroupDialogComponent } from './components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component'; import { PaginatorPipe } from './components/group-details/paginator.pipe'; +import { MembersFilterPipe } from './components/group-details/members-filter.pipe'; @NgModule({ declarations: [ @@ -484,7 +485,8 @@ import { PaginatorPipe } from './components/group-details/paginator.pipe'; UserDetailComponent, AddUserToGroupDialogComponent, RemoveUserToGroupDialogComponent, - PaginatorPipe + PaginatorPipe, + MembersFilterPipe ], imports: [ BrowserModule, diff --git a/src/app/components/group-details/group-details.component.html b/src/app/components/group-details/group-details.component.html index 5b6c370c..dc1709b1 100644 --- a/src/app/components/group-details/group-details.component.html +++ b/src/app/components/group-details/group-details.component.html @@ -6,7 +6,7 @@
- + Group name: @@ -27,14 +27,22 @@
-
Members:
+
Members:
person_add
-
-
{{user.username}}
 +
+ + + +
+ - +
diff --git a/src/app/components/group-details/group-details.component.scss b/src/app/components/group-details/group-details.component.scss index ac8538fc..c5fe588a 100644 --- a/src/app/components/group-details/group-details.component.scss +++ b/src/app/components/group-details/group-details.component.scss @@ -37,10 +37,16 @@ margin-bottom: 20px; } -.input-field { - width: 100%; -} - .button-div { float: right; } + +.members > .search { + display: flex; + flex-direction: row; + justify-content: stretch; + width: 100%; +} +mat-form-field { + width: 100%; +} diff --git a/src/app/components/group-details/group-details.component.ts b/src/app/components/group-details/group-details.component.ts index 7107e920..5578fb65 100644 --- a/src/app/components/group-details/group-details.component.ts +++ b/src/app/components/group-details/group-details.component.ts @@ -34,6 +34,7 @@ export class GroupDetailsComponent implements OnInit { members: User[]; editGroupForm: FormGroup; pageEvent: PageEvent | undefined; + searchMembers: string; constructor(private route: ActivatedRoute, private dialog: MatDialog, diff --git a/src/app/components/group-details/members-filter.pipe.spec.ts b/src/app/components/group-details/members-filter.pipe.spec.ts new file mode 100644 index 00000000..f632ee84 --- /dev/null +++ b/src/app/components/group-details/members-filter.pipe.spec.ts @@ -0,0 +1,8 @@ +import { MembersFilterPipe } from './members-filter.pipe'; + +describe('MembersFilterPipe', () => { + it('create an instance', () => { + const pipe = new MembersFilterPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/components/group-details/members-filter.pipe.ts b/src/app/components/group-details/members-filter.pipe.ts new file mode 100644 index 00000000..56cb3850 --- /dev/null +++ b/src/app/components/group-details/members-filter.pipe.ts @@ -0,0 +1,20 @@ +import {Pipe, PipeTransform} from '@angular/core'; +import {User} from "@models/users/user"; + +@Pipe({ + name: 'membersFilter' +}) +export class MembersFilterPipe implements PipeTransform { + + transform(members: User[], filterText: string): User[] { + if (!members) { + return []; + } + if (filterText === undefined || filterText === '') { + return members; + } + + return members.filter((member: User) => member.username.toLowerCase().includes(filterText.toLowerCase())); + } + +} diff --git a/src/app/components/group-details/paginator.pipe.ts b/src/app/components/group-details/paginator.pipe.ts index 59a3ca45..86dba9f8 100644 --- a/src/app/components/group-details/paginator.pipe.ts +++ b/src/app/components/group-details/paginator.pipe.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Pipe, PipeTransform} from '@angular/core'; import {User} from "@models/users/user"; import {PageEvent} from "@angular/material/paginator"; From b8b7e4d151b318da7fb24f216138819afb4db9f1 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Tue, 4 Jan 2022 15:43:04 +0100 Subject: [PATCH 20/50] group detail, members none case-sensitive sorted a to z --- .../group-details/group-details.component.html | 4 +++- .../group-details/group-details.component.ts | 2 +- .../components/group-details/members-filter.pipe.ts | 12 ++++++++++++ 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/app/components/group-details/group-details.component.html b/src/app/components/group-details/group-details.component.html index dc1709b1..cd5f121b 100644 --- a/src/app/components/group-details/group-details.component.html +++ b/src/app/components/group-details/group-details.component.html @@ -27,7 +27,9 @@
-
Members:
+
+
Members:
+
person_add
diff --git a/src/app/components/group-details/group-details.component.ts b/src/app/components/group-details/group-details.component.ts index 5578fb65..edf8fefb 100644 --- a/src/app/components/group-details/group-details.component.ts +++ b/src/app/components/group-details/group-details.component.ts @@ -49,7 +49,7 @@ export class GroupDetailsComponent implements OnInit { this.server = d.group.server; this.group = d.group.group; - this.members = d.group.users; + this.members = d.group.users.sort((a: User, b: User) => a.username.toLowerCase().localeCompare(b.username.toLowerCase())); this.editGroupForm.setValue({groupname: this.group.name}); }); diff --git a/src/app/components/group-details/members-filter.pipe.ts b/src/app/components/group-details/members-filter.pipe.ts index 56cb3850..570a1456 100644 --- a/src/app/components/group-details/members-filter.pipe.ts +++ b/src/app/components/group-details/members-filter.pipe.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Pipe, PipeTransform} from '@angular/core'; import {User} from "@models/users/user"; From 39627c28c84d091477fc792797960c2daa15d437 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Wed, 5 Jan 2022 15:13:31 +0100 Subject: [PATCH 21/50] Management refactoring, creating unique entry in menu for management --- src/app/app-routing.module.ts | 25 +++++++---- src/app/app.module.ts | 4 +- .../group-details.component.html | 13 ++++-- .../group-management.component.html | 9 +++- .../group-management.component.scss | 11 +++++ .../group-management.component.ts | 4 +- .../management/management.component.html | 9 ++++ .../management/management.component.scss | 0 .../management/management.component.spec.ts | 25 +++++++++++ .../management/management.component.ts | 28 ++++++++++++ .../user-detail/user-detail.component.html | 35 +++++++++------ .../user-management.component.html | 43 ++++++++++++------- .../user-management.component.scss | 11 +++++ .../user-management.component.ts | 17 +++++--- .../default-layout.component.html | 8 +--- .../default-layout.component.ts | 11 +---- 16 files changed, 187 insertions(+), 66 deletions(-) create mode 100644 src/app/components/management/management.component.html create mode 100644 src/app/components/management/management.component.scss create mode 100644 src/app/components/management/management.component.spec.ts create mode 100644 src/app/components/management/management.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 79fa95cf..a7459b18 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -60,6 +60,7 @@ import {GroupManagementComponent} from "./components/group-management/group-mana import {GroupDetailsComponent} from "@components/group-details/group-details.component"; import {UserDetailComponent} from "@components/user-management/user-detail/user-detail.component"; import {GroupDetailsResolver} from "@resolvers/group-details.resolver"; +import {ManagementComponent} from "@components/management/management.component"; const routes: Routes = [ { @@ -81,13 +82,7 @@ const routes: Routes = [ { path: 'settings', component: SettingsComponent }, { path: 'settings/console', component: ConsoleComponent }, { - path: 'server/:server_id/user_management', - component: UserManagementComponent, - canActivate: [LoginGuard], - resolve: { server: ServerResolve }, - }, - { - path: 'server/:server_id/user_management/:user_id', + path: 'server/:server_id/management/users/:user_id', component: UserDetailComponent, canActivate: [LoginGuard], resolve: { server: ServerResolve }, @@ -206,8 +201,20 @@ const routes: Routes = [ { path: 'server/:server_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent, canActivate: [LoginGuard] }, { path: 'server/:server_id/preferences/iou/templates/:template_id/copy', component: CopyIouTemplateComponent, canActivate: [LoginGuard] }, { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/group_management', component: GroupManagementComponent}, - { path: 'server/:server_id/group_management/:user_group_id', component: GroupDetailsComponent, resolve: {group: GroupDetailsResolver}}, + { + path: 'server/:server_id/management', + component: ManagementComponent, + children: [ + { + path: 'users', + component: UserManagementComponent + }, + { + path: 'groups', + component: GroupManagementComponent + } + ]}, + { path: 'server/:server_id/management/groups/:user_group_id', component: GroupDetailsComponent, resolve: {group: GroupDetailsResolver}}, ], }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2517da92..ac82a08d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -286,6 +286,7 @@ import { AddUserToGroupDialogComponent } from './components/group-details/add-us import { RemoveUserToGroupDialogComponent } from './components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component'; import { PaginatorPipe } from './components/group-details/paginator.pipe'; import { MembersFilterPipe } from './components/group-details/members-filter.pipe'; +import { ManagementComponent } from './components/management/management.component'; @NgModule({ declarations: [ @@ -486,7 +487,8 @@ import { MembersFilterPipe } from './components/group-details/members-filter.pip AddUserToGroupDialogComponent, RemoveUserToGroupDialogComponent, PaginatorPipe, - MembersFilterPipe + MembersFilterPipe, + ManagementComponent ], imports: [ BrowserModule, diff --git a/src/app/components/group-details/group-details.component.html b/src/app/components/group-details/group-details.component.html index cd5f121b..33473f5e 100644 --- a/src/app/components/group-details/group-details.component.html +++ b/src/app/components/group-details/group-details.component.html @@ -1,6 +1,13 @@
-
+
+ + keyboard_arrow_left +

Groups {{group.name}} details

@@ -28,7 +35,7 @@
-
Members:
+
Members:
person_add
@@ -38,7 +45,7 @@
- +
{{user.username}}
 delete diff --git a/src/app/components/group-management/group-management.component.html b/src/app/components/group-management/group-management.component.html index 4b4be62e..bff63406 100644 --- a/src/app/components/group-management/group-management.component.html +++ b/src/app/components/group-management/group-management.component.html @@ -1,4 +1,4 @@ -
+

Groups management

@@ -37,7 +37,7 @@ Name - {{element.name}} + {{element.name}} @@ -73,3 +73,8 @@
+ +
+ +
+ diff --git a/src/app/components/group-management/group-management.component.scss b/src/app/components/group-management/group-management.component.scss index acc51935..2b5547ab 100644 --- a/src/app/components/group-management/group-management.component.scss +++ b/src/app/components/group-management/group-management.component.scss @@ -13,3 +13,14 @@ table { width: 160px; margin: 20px; } + +.loader { + position: absolute; + margin: auto; + height: 175px; + bottom: 0; + left: 0; + right: 0; + top: 0; + width: 175px; +} diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index 20a4d107..f4bd2cd1 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -42,6 +42,7 @@ export class GroupManagementComponent implements OnInit { groups: Group[]; dataSource = new MatTableDataSource(); searchText: string; + isReady = false; constructor( private route: ActivatedRoute, @@ -54,7 +55,7 @@ export class GroupManagementComponent implements OnInit { ngOnInit(): void { - const serverId = this.route.snapshot.paramMap.get('server_id'); + const serverId = this.route.parent.snapshot.paramMap.get('server_id'); this.serverService.get(+serverId).then((server: Server) => { this.server = server; this.refresh(); @@ -106,6 +107,7 @@ export class GroupManagementComponent implements OnInit { refresh() { this.groupService.getGroups(this.server).subscribe((groups: Group[]) => { + this.isReady = true; this.groups = groups; this.dataSource.data = groups; this.selection.clear(); diff --git a/src/app/components/management/management.component.html b/src/app/components/management/management.component.html new file mode 100644 index 00000000..24f7e2ed --- /dev/null +++ b/src/app/components/management/management.component.html @@ -0,0 +1,9 @@ + + diff --git a/src/app/components/management/management.component.scss b/src/app/components/management/management.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/management/management.component.spec.ts b/src/app/components/management/management.component.spec.ts new file mode 100644 index 00000000..20137d16 --- /dev/null +++ b/src/app/components/management/management.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ManagementComponent } from './management.component'; + +describe('ManagementComponent', () => { + let component: ManagementComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ManagementComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/management/management.component.ts b/src/app/components/management/management.component.ts new file mode 100644 index 00000000..b4acb8a0 --- /dev/null +++ b/src/app/components/management/management.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import {ActivatedRoute, Router} from "@angular/router"; +import {Server} from "@models/server"; +import {ServerService} from "@services/server.service"; + +@Component({ + selector: 'app-management', + templateUrl: './management.component.html', + styleUrls: ['./management.component.scss'] +}) +export class ManagementComponent implements OnInit { + + server: Server; + links = ['users', 'groups']; + activeLink: string = this.links[0]; + + constructor( + private route: ActivatedRoute, + public router: Router, + private serverService: ServerService) { } + + ngOnInit(): void { + const serverId = this.route.snapshot.paramMap.get('server_id'); + this.serverService.get(+serverId).then((server: Server) => { + this.server = server; + }); + } +} diff --git a/src/app/components/user-management/user-detail/user-detail.component.html b/src/app/components/user-management/user-detail/user-detail.component.html index 5d24dc14..742c8836 100644 --- a/src/app/components/user-management/user-detail/user-detail.component.html +++ b/src/app/components/user-management/user-detail/user-detail.component.html @@ -5,8 +5,8 @@ mat-icon-button matTooltip="Back to user management" matTooltipClass="custom-tooltip" - [routerLink]="['/server', server.id, 'user_management']"> - keyboard_arrow_left + [routerLink]="['/server', server.id, 'management', 'users']"> + keyboard_arrow_left

User Details

@@ -17,32 +17,39 @@
- + Username is required + >Username is required + Username is incorrect + >Username is incorrect + User with this username exists + >User with this username exists + - + - + Email is required + >Email is required + Email is invalid + >Email is invalid + User with this email exists + >User with this email exists + - + Password must be between 6 and 100 characters + >Password must be between 6 and 100 characters + @@ -63,7 +70,7 @@
Groups
diff --git a/src/app/components/user-management/user-management.component.html b/src/app/components/user-management/user-management.component.html index 6ab59098..e94cc5ee 100644 --- a/src/app/components/user-management/user-management.component.html +++ b/src/app/components/user-management/user-management.component.html @@ -1,8 +1,9 @@ -
+

User Management

- + + + + @@ -83,3 +91,8 @@
+ +
+ +
+ diff --git a/src/app/components/user-management/user-management.component.scss b/src/app/components/user-management/user-management.component.scss index 9ed45f4a..114fb52a 100644 --- a/src/app/components/user-management/user-management.component.scss +++ b/src/app/components/user-management/user-management.component.scss @@ -28,3 +28,14 @@ .custom-tooltip { font-size:100px; } + +.loader { + position: absolute; + margin: auto; + height: 175px; + bottom: 0; + left: 0; + right: 0; + top: 0; + width: 175px; +} diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index cdfa47ad..9c94bd40 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -24,6 +24,7 @@ import {DeleteUserDialogComponent} from "@components/user-management/delete-user import {ToasterService} from "@services/toaster.service"; import {MatPaginator} from "@angular/material/paginator"; import {MatTableDataSource} from "@angular/material/table"; +import {ServerService} from "@services/server.service"; @Component({ selector: 'app-user-management', @@ -35,24 +36,27 @@ export class UserManagementComponent implements OnInit { dataSource = new MatTableDataSource(); displayedColumns = ['select', 'username', 'full_name', 'email', 'is_active', 'last_login', 'updated_at', 'delete']; selection = new SelectionModel(true, []); - searchText: string = ''; + searchText = ''; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort, { static: true }) sort: MatSort; + isReady = false; constructor( private route: ActivatedRoute, private router: Router, private userService: UserService, private progressService: ProgressService, + private serverService: ServerService, public dialog: MatDialog, private toasterService: ToasterService) { } ngOnInit() { - this.server = this.route.snapshot.data['server']; - if (!this.server) this.router.navigate(['/servers']); - - this.refresh(); + const serverId = this.route.parent.snapshot.paramMap.get('server_id'); + this.serverService.get(+serverId).then((server: Server) => { + this.server = server; + this.refresh(); + }); } ngAfterViewInit() { @@ -67,12 +71,13 @@ export class UserManagementComponent implements OnInit { default: return item[property]; } - } + }; } refresh() { this.userService.list(this.server).subscribe( (users: User[]) => { + this.isReady = true; this.dataSource.data = users; }, (error) => { diff --git a/src/app/layouts/default-layout/default-layout.component.html b/src/app/layouts/default-layout/default-layout.component.html index 925ab581..d5febca6 100644 --- a/src/app/layouts/default-layout/default-layout.component.html +++ b/src/app/layouts/default-layout/default-layout.component.html @@ -23,13 +23,9 @@ settings Settings - - - @@ -35,15 +37,18 @@ help Help - - - diff --git a/src/app/layouts/default-layout/default-layout.component.ts b/src/app/layouts/default-layout/default-layout.component.ts index 5ca59af8..aaef873e 100644 --- a/src/app/layouts/default-layout/default-layout.component.ts +++ b/src/app/layouts/default-layout/default-layout.component.ts @@ -1,15 +1,15 @@ -import { Component, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { NavigationEnd } from '@angular/router'; -import { ActivatedRoute, ParamMap, Router } from '@angular/router'; -import { ServerService } from '../../services/server.service'; -import { ElectronService } from 'ngx-electron'; -import { Subscription } from 'rxjs'; -import { ProgressService } from '../../common/progress/progress.service'; -import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service'; -import { ServerManagementService } from '../../services/server-management.service'; -import { ToasterService } from '../../services/toaster.service'; -import { version } from './../../version'; -import { Server } from '../../models/server'; +import {Component, HostListener, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core'; +import {NavigationEnd} from '@angular/router'; +import {ActivatedRoute, ParamMap, Router} from '@angular/router'; +import {ServerService} from '../../services/server.service'; +import {ElectronService} from 'ngx-electron'; +import {Subscription} from 'rxjs'; +import {ProgressService} from '../../common/progress/progress.service'; +import {RecentlyOpenedProjectService} from '../../services/recentlyOpenedProject.service'; +import {ServerManagementService} from '../../services/server-management.service'; +import {ToasterService} from '../../services/toaster.service'; +import {version} from './../../version'; +import {Server} from '../../models/server'; @Component({ selector: 'app-default-layout', @@ -29,6 +29,7 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy { recentlyOpenedServerId: string; recentlyOpenedProjectId: string; serverIdProjectList: string; + serverId: string | undefined | null; constructor( private electronService: ElectronService, @@ -37,8 +38,15 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy { private toasterService: ToasterService, private progressService: ProgressService, private router: Router, + private route: ActivatedRoute, private serverService: ServerService - ) {} + ) { + this.router.events.subscribe((data) => { + if (data instanceof NavigationEnd) { + this.serverId = this.route.children[0].snapshot.paramMap.get("server_id"); + } + }); + } ngOnInit() { this.checkIfUserIsLoginPage(); @@ -68,16 +76,8 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy { this.shouldStopServersOnClosing = this.electronService.isElectronApp; } - goToUserInfo() { - let serverId = this.router.url.split("/server/")[1].split("/")[0]; - this.serverService.get(+serverId).then((server: Server) => { - this.router.navigate(['/server', server.id, 'loggeduser']); - }); - } - goToDocumentation() { - let serverId = this.router.url.split("/server/")[1].split("/")[0]; - this.serverService.get(+serverId).then((server: Server) => { + this.serverService.get(+this.serverId).then((server: Server) => { (window as any).open(`http://${server.host}:${server.port}/docs`); }); } @@ -91,8 +91,7 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy { } logout() { - let serverId = this.router.url.split("/server/")[1].split("/")[0]; - this.serverService.get(+serverId).then((server: Server) => { + this.serverService.get(+this.serverId).then((server: Server) => { server.authToken = null; this.serverService.update(server).then(val => this.router.navigate(['/server', server.id, 'login'])); }); @@ -129,11 +128,4 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy { this.serverStatusSubscription.unsubscribe(); this.routeSubscription.unsubscribe(); } - - goToManagement() { - let serverId = this.router.url.split("/server/")[1].split("/")[0]; - this.serverService.get(+serverId).then((server: Server) => { - this.router.navigate(['/server', server.id, 'management', 'users']); - }); - } } From 920154e7b9fbe5cb05d091c51bb6bde7d2c66756 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 6 Jan 2022 16:41:37 +0100 Subject: [PATCH 23/50] Add role management --- src/app/app-routing.module.ts | 263 +++++++++++------- src/app/app.module.ts | 18 +- .../management/management.component.ts | 2 +- .../add-role-dialog.component.html | 30 ++ .../add-role-dialog.component.scss | 7 + .../add-role-dialog.component.spec.ts | 25 ++ .../add-role-dialog.component.ts | 48 ++++ .../delete-role-dialog.component.html | 8 + .../delete-role-dialog.component.scss | 6 + .../delete-role-dialog.component.spec.ts | 25 ++ .../delete-role-dialog.component.ts | 27 ++ .../editable-permission.component.html | 14 + .../editable-permission.component.scss | 42 +++ .../editable-permission.component.spec.ts | 25 ++ .../editable-permission.component.ts | 32 +++ ...sion-editor-validate-dialog.component.html | 33 +++ ...sion-editor-validate-dialog.component.scss | 33 +++ ...n-editor-validate-dialog.component.spec.ts | 25 ++ ...ission-editor-validate-dialog.component.ts | 26 ++ .../permission-editor.component.html | 62 +++++ .../permission-editor.component.scss | 47 ++++ .../permission-editor.component.spec.ts | 25 ++ .../permission-editor.component.ts | 104 +++++++ .../role-detail/role-detail.component.html | 59 ++++ .../role-detail/role-detail.component.scss | 40 +++ .../role-detail/role-detail.component.spec.ts | 25 ++ .../role-detail/role-detail.component.ts | 47 ++++ .../role-management/role-filter.pipe.spec.ts | 8 + .../role-management/role-filter.pipe.ts | 22 ++ .../role-management.component.html | 90 ++++++ .../role-management.component.scss | 56 ++++ .../role-management.component.spec.ts | 25 ++ .../role-management.component.ts | 120 ++++++++ .../user-management.component.scss | 1 + src/app/models/LocalStorage.ts | 0 src/app/models/{ => api}/permission.ts | 14 +- src/app/models/api/role.ts | 11 + src/app/resolvers/permission.resolver.spec.ts | 16 ++ src/app/resolvers/permission.resolver.ts | 35 +++ .../resolvers/role-detail.resolver.spec.ts | 16 ++ src/app/resolvers/role-detail.resolver.ts | 36 +++ src/app/services/permissions.service.ts | 2 +- src/app/services/role.service.spec.ts | 16 ++ src/app/services/role.service.ts | 43 +++ src/app/services/server-version.service.ts | 29 ++ src/styles.scss | 11 + tslint.json | 2 + 47 files changed, 1534 insertions(+), 117 deletions(-) create mode 100644 src/app/components/role-management/add-role-dialog/add-role-dialog.component.html create mode 100644 src/app/components/role-management/add-role-dialog/add-role-dialog.component.scss create mode 100644 src/app/components/role-management/add-role-dialog/add-role-dialog.component.spec.ts create mode 100644 src/app/components/role-management/add-role-dialog/add-role-dialog.component.ts create mode 100644 src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.html create mode 100644 src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.scss create mode 100644 src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.spec.ts create mode 100644 src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.ts create mode 100644 src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.html create mode 100644 src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.scss create mode 100644 src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.spec.ts create mode 100644 src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts create mode 100644 src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.html create mode 100644 src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.scss create mode 100644 src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.spec.ts create mode 100644 src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.ts create mode 100644 src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html create mode 100644 src/app/components/role-management/role-detail/permission-editor/permission-editor.component.scss create mode 100644 src/app/components/role-management/role-detail/permission-editor/permission-editor.component.spec.ts create mode 100644 src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts create mode 100644 src/app/components/role-management/role-detail/role-detail.component.html create mode 100644 src/app/components/role-management/role-detail/role-detail.component.scss create mode 100644 src/app/components/role-management/role-detail/role-detail.component.spec.ts create mode 100644 src/app/components/role-management/role-detail/role-detail.component.ts create mode 100644 src/app/components/role-management/role-filter.pipe.spec.ts create mode 100644 src/app/components/role-management/role-filter.pipe.ts create mode 100644 src/app/components/role-management/role-management.component.html create mode 100644 src/app/components/role-management/role-management.component.scss create mode 100644 src/app/components/role-management/role-management.component.spec.ts create mode 100644 src/app/components/role-management/role-management.component.ts create mode 100644 src/app/models/LocalStorage.ts rename src/app/models/{ => api}/permission.ts (79%) create mode 100644 src/app/models/api/role.ts create mode 100644 src/app/resolvers/permission.resolver.spec.ts create mode 100644 src/app/resolvers/permission.resolver.ts create mode 100644 src/app/resolvers/role-detail.resolver.spec.ts create mode 100644 src/app/resolvers/role-detail.resolver.ts create mode 100644 src/app/services/role.service.spec.ts create mode 100644 src/app/services/role.service.ts create mode 100644 src/app/services/server-version.service.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a7459b18..ed0242b1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,107 +1,112 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component'; -import { DirectLinkComponent } from './components/direct-link/direct-link.component'; -import { HelpComponent } from './components/help/help.component'; -import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component'; -import { LoginComponent } from './components/login/login.component'; -import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'; -import { BuiltInPreferencesComponent } from './components/preferences/built-in/built-in-preferences.component'; -import { CloudNodesAddTemplateComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component'; -import { CloudNodesTemplateDetailsComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component'; -import { CloudNodesTemplatesComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component'; -import { EthernetHubsAddTemplateComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component'; -import { EthernetHubsTemplateDetailsComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component'; -import { EthernetHubsTemplatesComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component'; -import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component'; -import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component'; -import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component'; -import { AddDockerTemplateComponent } from './components/preferences/docker/add-docker-template/add-docker-template.component'; -import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component'; -import { DockerTemplateDetailsComponent } from './components/preferences/docker/docker-template-details/docker-template-details.component'; -import { DockerTemplatesComponent } from './components/preferences/docker/docker-templates/docker-templates.component'; -import { AddIosTemplateComponent } from './components/preferences/dynamips/add-ios-template/add-ios-template.component'; -import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component'; -import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component'; -import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component'; -import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component'; -import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component'; -import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component'; -import { IouTemplatesComponent } from './components/preferences/ios-on-unix/iou-templates/iou-templates.component'; -import { PreferencesComponent } from './components/preferences/preferences.component'; -import { AddQemuVmTemplateComponent } from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component'; -import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component'; -import { QemuVmTemplateDetailsComponent } from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component'; -import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component'; -import { AddVirtualBoxTemplateComponent } from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component'; -import { VirtualBoxTemplateDetailsComponent } from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component'; -import { VirtualBoxTemplatesComponent } from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component'; -import { AddVmwareTemplateComponent } from './components/preferences/vmware/add-vmware-template/add-vmware-template.component'; -import { VmwareTemplateDetailsComponent } from './components/preferences/vmware/vmware-template-details/vmware-template-details.component'; -import { VmwareTemplatesComponent } from './components/preferences/vmware/vmware-templates/vmware-templates.component'; -import { AddVpcsTemplateComponent } from './components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component'; -import { VpcsTemplateDetailsComponent } from './components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component'; -import { VpcsTemplatesComponent } from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component'; -import { ProjectMapComponent } from './components/project-map/project-map.component'; -import { ProjectsComponent } from './components/projects/projects.component'; -import { ServersComponent } from './components/servers/servers.component'; -import { ConsoleComponent } from './components/settings/console/console.component'; -import { SettingsComponent } from './components/settings/settings.component'; -import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component'; -import { SystemStatusComponent } from './components/system-status/system-status.component'; -import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component'; -import { ConsoleGuard } from './guards/console-guard'; -import { LoginGuard } from './guards/login-guard'; -import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component'; -import { ServerResolve } from './resolvers/server-resolve'; -import { UserManagementComponent } from './components/user-management/user-management.component'; -import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; +import {BundledServerFinderComponent} from './components/bundled-server-finder/bundled-server-finder.component'; +import {DirectLinkComponent} from './components/direct-link/direct-link.component'; +import {HelpComponent} from './components/help/help.component'; +import {InstalledSoftwareComponent} from './components/installed-software/installed-software.component'; +import {LoginComponent} from './components/login/login.component'; +import {PageNotFoundComponent} from './components/page-not-found/page-not-found.component'; +import {BuiltInPreferencesComponent} from './components/preferences/built-in/built-in-preferences.component'; +import {CloudNodesAddTemplateComponent} from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component'; +import {CloudNodesTemplateDetailsComponent} from './components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component'; +import {CloudNodesTemplatesComponent} from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component'; +import {EthernetHubsAddTemplateComponent} from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component'; +import {EthernetHubsTemplateDetailsComponent} from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component'; +import {EthernetHubsTemplatesComponent} from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component'; +import {EthernetSwitchesAddTemplateComponent} from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component'; +import {EthernetSwitchesTemplateDetailsComponent} from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component'; +import {EthernetSwitchesTemplatesComponent} from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component'; +import {AddDockerTemplateComponent} from './components/preferences/docker/add-docker-template/add-docker-template.component'; +import {CopyDockerTemplateComponent} from './components/preferences/docker/copy-docker-template/copy-docker-template.component'; +import {DockerTemplateDetailsComponent} from './components/preferences/docker/docker-template-details/docker-template-details.component'; +import {DockerTemplatesComponent} from './components/preferences/docker/docker-templates/docker-templates.component'; +import {AddIosTemplateComponent} from './components/preferences/dynamips/add-ios-template/add-ios-template.component'; +import {CopyIosTemplateComponent} from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component'; +import {IosTemplateDetailsComponent} from './components/preferences/dynamips/ios-template-details/ios-template-details.component'; +import {IosTemplatesComponent} from './components/preferences/dynamips/ios-templates/ios-templates.component'; +import {AddIouTemplateComponent} from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component'; +import {CopyIouTemplateComponent} from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component'; +import {IouTemplateDetailsComponent} from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component'; +import {IouTemplatesComponent} from './components/preferences/ios-on-unix/iou-templates/iou-templates.component'; +import {PreferencesComponent} from './components/preferences/preferences.component'; +import {AddQemuVmTemplateComponent} from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component'; +import {CopyQemuVmTemplateComponent} from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component'; +import {QemuVmTemplateDetailsComponent} from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component'; +import {QemuVmTemplatesComponent} from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component'; +import {AddVirtualBoxTemplateComponent} from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component'; +import {VirtualBoxTemplateDetailsComponent} from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component'; +import {VirtualBoxTemplatesComponent} from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component'; +import {AddVmwareTemplateComponent} from './components/preferences/vmware/add-vmware-template/add-vmware-template.component'; +import {VmwareTemplateDetailsComponent} from './components/preferences/vmware/vmware-template-details/vmware-template-details.component'; +import {VmwareTemplatesComponent} from './components/preferences/vmware/vmware-templates/vmware-templates.component'; +import {AddVpcsTemplateComponent} from './components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component'; +import {VpcsTemplateDetailsComponent} from './components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component'; +import {VpcsTemplatesComponent} from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component'; +import {ProjectMapComponent} from './components/project-map/project-map.component'; +import {ProjectsComponent} from './components/projects/projects.component'; +import {ServersComponent} from './components/servers/servers.component'; +import {ConsoleComponent} from './components/settings/console/console.component'; +import {SettingsComponent} from './components/settings/settings.component'; +import {ListOfSnapshotsComponent} from './components/snapshots/list-of-snapshots/list-of-snapshots.component'; +import {SystemStatusComponent} from './components/system-status/system-status.component'; +import {WebConsoleFullWindowComponent} from './components/web-console-full-window/web-console-full-window.component'; +import {ConsoleGuard} from './guards/console-guard'; +import {LoginGuard} from './guards/login-guard'; +import {DefaultLayoutComponent} from './layouts/default-layout/default-layout.component'; +import {ServerResolve} from './resolvers/server-resolve'; +import {UserManagementComponent} from './components/user-management/user-management.component'; +import {LoggedUserComponent} from './components/users/logged-user/logged-user.component'; import {GroupManagementComponent} from "./components/group-management/group-management.component"; import {GroupDetailsComponent} from "@components/group-details/group-details.component"; import {UserDetailComponent} from "@components/user-management/user-detail/user-detail.component"; import {GroupDetailsResolver} from "@resolvers/group-details.resolver"; import {ManagementComponent} from "@components/management/management.component"; +import {RoleManagementComponent} from "@components/role-management/role-management.component"; +import {RoleDetailComponent} from "@components/role-management/role-detail/role-detail.component"; +import {RoleDetailResolver} from "@resolvers/role-detail.resolver"; +import {PermissionEditorComponent} from "@components/role-management/role-detail/permission-editor/permission-editor.component"; +import {PermissionResolver} from "@resolvers/permission.resolver"; const routes: Routes = [ { path: '', component: DefaultLayoutComponent, children: [ - { path: '', redirectTo: 'servers', pathMatch: 'full' }, - { path: 'servers', component: ServersComponent }, - { path: 'bundled', component: BundledServerFinderComponent }, - { path: 'server/:server_id/login', component: LoginComponent }, - { path: 'server/:server_id/loggeduser', component: LoggedUserComponent }, + {path: '', redirectTo: 'servers', pathMatch: 'full'}, + {path: 'servers', component: ServersComponent}, + {path: 'bundled', component: BundledServerFinderComponent}, + {path: 'server/:server_id/login', component: LoginComponent}, + {path: 'server/:server_id/loggeduser', component: LoggedUserComponent}, { path: 'server/:server_id/projects', component: ProjectsComponent, canActivate: [LoginGuard], - resolve: { server: ServerResolve }, + resolve: {server: ServerResolve}, }, - { path: 'help', component: HelpComponent }, - { path: 'settings', component: SettingsComponent }, - { path: 'settings/console', component: ConsoleComponent }, + {path: 'help', component: HelpComponent}, + {path: 'settings', component: SettingsComponent}, + {path: 'settings/console', component: ConsoleComponent}, { path: 'server/:server_id/management/users/:user_id', component: UserDetailComponent, canActivate: [LoginGuard], - resolve: { server: ServerResolve }, + resolve: {server: ServerResolve}, }, - { path: 'installed-software', component: InstalledSoftwareComponent }, - { path: 'server/:server_id/systemstatus', component: SystemStatusComponent, canActivate: [LoginGuard] }, + {path: 'installed-software', component: InstalledSoftwareComponent}, + {path: 'server/:server_id/systemstatus', component: SystemStatusComponent, canActivate: [LoginGuard]}, - { path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent, canActivate: [LoginGuard]}, { path: 'server/:server_id/project/:project_id/snapshots', component: ListOfSnapshotsComponent, canActivate: [LoginGuard], - resolve: { server: ServerResolve }, + resolve: {server: ServerResolve}, }, - { path: 'server/:server_id/preferences', component: PreferencesComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences', component: PreferencesComponent, canActivate: [LoginGuard]}, // { path: 'server/:server_id/preferences/general', component: GeneralPreferencesComponent }, - { path: 'server/:server_id/preferences/builtin', component: BuiltInPreferencesComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/builtin', component: BuiltInPreferencesComponent, canActivate: [LoginGuard]}, - { path: 'server/:server_id/preferences/builtin/ethernet-hubs', component: EthernetHubsTemplatesComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/builtin/ethernet-hubs', component: EthernetHubsTemplatesComponent, canActivate: [LoginGuard]}, { path: 'server/:server_id/preferences/builtin/ethernet-hubs/addtemplate', component: EthernetHubsAddTemplateComponent, @@ -129,7 +134,7 @@ const routes: Routes = [ canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/builtin/cloud-nodes', component: CloudNodesTemplatesComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/builtin/cloud-nodes', component: CloudNodesTemplatesComponent, canActivate: [LoginGuard]}, { path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate', component: CloudNodesAddTemplateComponent, @@ -142,9 +147,13 @@ const routes: Routes = [ }, //{ path: 'server/:server_id/preferences/dynamips', component: DynamipsPreferencesComponent }, - { path: 'server/:server_id/preferences/dynamips/templates', component: IosTemplatesComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/dynamips/templates/addtemplate', component: AddIosTemplateComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/dynamips/templates/:template_id', component: IosTemplateDetailsComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/dynamips/templates', component: IosTemplatesComponent, canActivate: [LoginGuard]}, + {path: 'server/:server_id/preferences/dynamips/templates/addtemplate', component: AddIosTemplateComponent, canActivate: [LoginGuard]}, + { + path: 'server/:server_id/preferences/dynamips/templates/:template_id', + component: IosTemplateDetailsComponent, + canActivate: [LoginGuard] + }, { path: 'server/:server_id/preferences/dynamips/templates/:template_id/copy', component: CopyIosTemplateComponent, @@ -152,39 +161,47 @@ const routes: Routes = [ }, // { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent }, - { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent, canActivate: [LoginGuard]}, { path: 'server/:server_id/preferences/qemu/templates/:template_id/copy', component: CopyQemuVmTemplateComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent, canActivate: [LoginGuard] }, + { + path: 'server/:server_id/preferences/qemu/templates/:template_id', + component: QemuVmTemplateDetailsComponent, + canActivate: [LoginGuard] + }, + {path: 'server/:server_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent, canActivate: [LoginGuard]}, // { path: 'server/:server_id/preferences/vpcs', component: VpcsPreferencesComponent }, - { path: 'server/:server_id/preferences/vpcs/templates', component: VpcsTemplatesComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/vpcs/templates/:template_id', component: VpcsTemplateDetailsComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/vpcs/addtemplate', component: AddVpcsTemplateComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/vpcs/templates', component: VpcsTemplatesComponent, canActivate: [LoginGuard]}, + { + path: 'server/:server_id/preferences/vpcs/templates/:template_id', + component: VpcsTemplateDetailsComponent, + canActivate: [LoginGuard] + }, + {path: 'server/:server_id/preferences/vpcs/addtemplate', component: AddVpcsTemplateComponent, canActivate: [LoginGuard]}, // { path: 'server/:server_id/preferences/virtualbox', component: VirtualBoxPreferencesComponent }, - { path: 'server/:server_id/preferences/virtualbox/templates', component: VirtualBoxTemplatesComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/virtualbox/templates', component: VirtualBoxTemplatesComponent, canActivate: [LoginGuard]}, { path: 'server/:server_id/preferences/virtualbox/templates/:template_id', component: VirtualBoxTemplateDetailsComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/virtualbox/addtemplate', component: AddVirtualBoxTemplateComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/virtualbox/addtemplate', component: AddVirtualBoxTemplateComponent, canActivate: [LoginGuard]}, // { path: 'server/:server_id/preferences/vmware', component: VmwarePreferencesComponent }, - { path: 'server/:server_id/preferences/vmware/templates', component: VmwareTemplatesComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/vmware/templates', component: VmwareTemplatesComponent, canActivate: [LoginGuard]}, { path: 'server/:server_id/preferences/vmware/templates/:template_id', component: VmwareTemplateDetailsComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/vmware/addtemplate', component: AddVmwareTemplateComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/vmware/addtemplate', component: AddVmwareTemplateComponent, canActivate: [LoginGuard]}, - { path: 'server/:server_id/preferences/docker/templates', component: DockerTemplatesComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/docker/templates', component: DockerTemplatesComponent, canActivate: [LoginGuard]}, { path: 'server/:server_id/preferences/docker/templates/:template_id', component: DockerTemplateDetailsComponent, @@ -195,27 +212,58 @@ const routes: Routes = [ component: CopyDockerTemplateComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent, canActivate: [LoginGuard]}, - { path: 'server/:server_id/preferences/iou/templates', component: IouTemplatesComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/iou/templates/:template_id/copy', component: CopyIouTemplateComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent, canActivate: [LoginGuard] }, + {path: 'server/:server_id/preferences/iou/templates', component: IouTemplatesComponent, canActivate: [LoginGuard]}, + {path: 'server/:server_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent, canActivate: [LoginGuard]}, + { + path: 'server/:server_id/preferences/iou/templates/:template_id/copy', + component: CopyIouTemplateComponent, + canActivate: [LoginGuard] + }, + {path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent, canActivate: [LoginGuard]}, { path: 'server/:server_id/management', component: ManagementComponent, - children: [ - { - path: 'users', - component: UserManagementComponent - }, - { - path: 'groups', - component: GroupManagementComponent + children: [ + { + path: 'users', + component: UserManagementComponent + }, + { + path: 'groups', + component: GroupManagementComponent + }, + { + path: 'roles', + component: RoleManagementComponent + } + ] + }, + { + path: 'server/:server_id/management/groups/:user_group_id', + component: GroupDetailsComponent, + resolve: { + group: GroupDetailsResolver } - ]}, - { path: 'server/:server_id/management/groups/:user_group_id', component: GroupDetailsComponent, resolve: {group: GroupDetailsResolver}}, - + }, + { + path: 'server/:server_id/management/roles/:role_id', + component: RoleDetailComponent, + resolve: { + role: RoleDetailResolver, + server: ServerResolve + } + }, + { + path: 'server/:server_id/management/roles/:role_id/permissions', + component: PermissionEditorComponent, + resolve: { + role: RoleDetailResolver, + server: ServerResolve, + permissions: PermissionResolver + } + }, ], }, { @@ -251,4 +299,5 @@ const routes: Routes = [ ], exports: [RouterModule], }) -export class AppRoutingModule {} +export class AppRoutingModule { +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ac82a08d..3d09e55e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -287,6 +287,14 @@ import { RemoveUserToGroupDialogComponent } from './components/group-details/rem import { PaginatorPipe } from './components/group-details/paginator.pipe'; import { MembersFilterPipe } from './components/group-details/members-filter.pipe'; import { ManagementComponent } from './components/management/management.component'; +import { RoleManagementComponent } from './components/role-management/role-management.component'; +import { RoleFilterPipe } from './components/role-management/role-filter.pipe'; +import { AddRoleDialogComponent } from './components/role-management/add-role-dialog/add-role-dialog.component'; +import { DeleteRoleDialogComponent } from './components/role-management/delete-role-dialog/delete-role-dialog.component'; +import { RoleDetailComponent } from './components/role-management/role-detail/role-detail.component'; +import { PermissionEditorComponent } from './components/role-management/role-detail/permission-editor/permission-editor.component'; +import { EditablePermissionComponent } from './components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component'; +import { PermissionEditorValidateDialogComponent } from './components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component'; @NgModule({ declarations: [ @@ -488,7 +496,15 @@ import { ManagementComponent } from './components/management/management.componen RemoveUserToGroupDialogComponent, PaginatorPipe, MembersFilterPipe, - ManagementComponent + ManagementComponent, + RoleManagementComponent, + RoleFilterPipe, + AddRoleDialogComponent, + DeleteRoleDialogComponent, + RoleDetailComponent, + PermissionEditorComponent, + EditablePermissionComponent, + PermissionEditorValidateDialogComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/management/management.component.ts b/src/app/components/management/management.component.ts index 11825403..d7637602 100644 --- a/src/app/components/management/management.component.ts +++ b/src/app/components/management/management.component.ts @@ -23,7 +23,7 @@ import {ServerService} from "@services/server.service"; export class ManagementComponent implements OnInit { server: Server; - links = ['users', 'groups']; + links = ['users', 'groups', 'roles']; activeLink: string = this.links[0]; constructor( diff --git a/src/app/components/role-management/add-role-dialog/add-role-dialog.component.html b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.html new file mode 100644 index 00000000..d1cd0b6d --- /dev/null +++ b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.html @@ -0,0 +1,30 @@ +

Create new role

+
+ + + + role name is required + + + Role name is incorrect + + + + + +
+ + +
+
diff --git a/src/app/components/role-management/add-role-dialog/add-role-dialog.component.scss b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.scss new file mode 100644 index 00000000..d0a286af --- /dev/null +++ b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.scss @@ -0,0 +1,7 @@ +mat-form-field { + width: 100%; +} + +.project-snackbar { + background: #2196f3; +} diff --git a/src/app/components/role-management/add-role-dialog/add-role-dialog.component.spec.ts b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.spec.ts new file mode 100644 index 00000000..fca7b0bc --- /dev/null +++ b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddRoleDialogComponent } from './add-role-dialog.component'; + +describe('AddRoleDialogComponent', () => { + let component: AddRoleDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddRoleDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddRoleDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/role-management/add-role-dialog/add-role-dialog.component.ts b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.ts new file mode 100644 index 00000000..0e2a0544 --- /dev/null +++ b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.ts @@ -0,0 +1,48 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {Server} from "@models/server"; +import {GroupNameValidator} from "@components/group-management/add-group-dialog/GroupNameValidator"; +import {GroupService} from "@services/group.service"; +import {groupNameAsyncValidator} from "@components/group-management/add-group-dialog/groupNameAsyncValidator"; + +@Component({ + selector: 'app-add-role-dialog', + templateUrl: './add-role-dialog.component.html', + styleUrls: ['./add-role-dialog.component.scss'] +}) +export class AddRoleDialogComponent implements OnInit { + + roleNameForm: FormGroup; + + constructor(private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { server: Server }, + private formBuilder: FormBuilder) { + } + + ngOnInit(): void { + this.roleNameForm = this.formBuilder.group({ + name: new FormControl(), + description: new FormControl() + }); + } + + get form() { + return this.roleNameForm.controls; + } + + onAddClick() { + if (this.roleNameForm.invalid) { + return; + } + const roleName = this.roleNameForm.controls['name'].value; + const description = this.roleNameForm.controls['description'].value; + this.dialogRef.close({name: roleName, description}); + } + + onNoClick() { + this.dialogRef.close(); + } + + +} diff --git a/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.html b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.html new file mode 100644 index 00000000..5008f0d3 --- /dev/null +++ b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.html @@ -0,0 +1,8 @@ +

Are you sure to delete role named:

+

{{role.name}}

+
+ + +
diff --git a/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.scss b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.scss new file mode 100644 index 00000000..1b0fdabd --- /dev/null +++ b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.scss @@ -0,0 +1,6 @@ +:host { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} diff --git a/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.spec.ts b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.spec.ts new file mode 100644 index 00000000..cf52943b --- /dev/null +++ b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeleteRoleDialogComponent } from './delete-role-dialog.component'; + +describe('DeleteRoleDialogComponent', () => { + let component: DeleteRoleDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DeleteRoleDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DeleteRoleDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.ts b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.ts new file mode 100644 index 00000000..82d461cd --- /dev/null +++ b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.ts @@ -0,0 +1,27 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {Role} from "@models/api/role"; + +@Component({ + selector: 'app-delete-role-dialog', + templateUrl: './delete-role-dialog.component.html', + styleUrls: ['./delete-role-dialog.component.scss'] +}) +export class DeleteRoleDialogComponent implements OnInit { + + constructor(private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { roles: Role[] }) { } + + ngOnInit(): void { + } + + onCancel() { + this.dialogRef.close(); + } + + onDelete() { + this.dialogRef.close(true); + } + + +} diff --git a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.html b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.html new file mode 100644 index 00000000..65ccb761 --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.html @@ -0,0 +1,14 @@ +
+ +
+
{{permission.methods.join(",")}}
+
{{permission.path}}
+
+ +
diff --git a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.scss b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.scss new file mode 100644 index 00000000..07167210 --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.scss @@ -0,0 +1,42 @@ +.box { + display: flex; + flex-direction: row; + border: 1px solid; + border-radius: 20px; + margin: 10px; + font-size: 12px; + font-family: monospace; + justify-items: center; + background-color: rgba(130, 8, 8, 0.36); + justify-content: flex-start; +} + + + +.left { + justify-content: flex-end; +} + +.allow { + background-color: rgba(5, 76, 5, 0.38); +} + +.content { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.content > div { + padding-right: 20px; +} + +.center { + display: flex; + align-items: center; + justify-content: center; +} +button { + border-radius: 20px; +} diff --git a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.spec.ts b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.spec.ts new file mode 100644 index 00000000..4a3316e0 --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditablePermissionComponent } from './editable-permission.component'; + +describe('EditablePermissionComponent', () => { + let component: EditablePermissionComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EditablePermissionComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EditablePermissionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts new file mode 100644 index 00000000..d9db67f9 --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts @@ -0,0 +1,32 @@ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {Permission} from "@models/api/permission"; + +@Component({ + selector: 'app-editable-permission', + templateUrl: './editable-permission.component.html', + styleUrls: ['./editable-permission.component.scss'] +}) +export class EditablePermissionComponent implements OnInit { + + @Input() permission: Permission; + @Input() side: 'LEFT' | 'RIGHT'; + @Output() click = new EventEmitter(); + + constructor() { } + + ngOnInit(): void { + } + + + onClick() { + this.click.emit(); + } + + getToolTip() { + return ` + action: ${this.permission.action} + methods: ${this.permission.methods.join(',')} + path: ${this.permission.path} + `; + } +} diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.html b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.html new file mode 100644 index 00000000..ff0fe79f --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.html @@ -0,0 +1,33 @@ +
+
+ + +
+
+

+
Permission to Add:
+
+ +
+
Permission to Remove:
+
+ +
+
+ +
+ No change +
+ +
diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.scss b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.scss new file mode 100644 index 00000000..732815d5 --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.scss @@ -0,0 +1,33 @@ +.change { + height: 350px; + display: flex; + flex-direction: column; + justify-content: center; + overflow-y: auto; +} + +.change div { + justify-content: center; + justify-items: center; + text-align: center; +} + +.title { + font-size: 20px; +} + +.button { + position: relative; + top: 400px; + z-index: 1; +} + +.button button { + margin-right: 50px; +} + +.noChange { + display: flex; + justify-content: center; + justify-items: center; +} diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.spec.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.spec.ts new file mode 100644 index 00000000..7d55aa60 --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PermissionEditorValidateDialogComponent } from './permission-editor-validate-dialog.component'; + +describe('PermissionEditorValidateDialogComponent', () => { + let component: PermissionEditorValidateDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PermissionEditorValidateDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PermissionEditorValidateDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.ts new file mode 100644 index 00000000..97890027 --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.ts @@ -0,0 +1,26 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {Group} from "@models/groups/group"; +import {Permission} from "@models/api/permission"; + +@Component({ + selector: 'app-permission-editor-validate-dialog', + templateUrl: './permission-editor-validate-dialog.component.html', + styleUrls: ['./permission-editor-validate-dialog.component.scss'] +}) +export class PermissionEditorValidateDialogComponent implements OnInit { + + constructor(private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { add: Permission[], remove: Permission[] }) { } + + ngOnInit(): void { + } + + close() { + this.dialogRef.close(false); + } + + update() { + this.dialogRef.close(true); + } +} diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html new file mode 100644 index 00000000..ecda97df --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html @@ -0,0 +1,62 @@ +
+
+ +
+ Edit {{role.name}} role permissions +
+
+
+
+ Allow: +
+
+
+ Deny: +
+
+
+
+ + +
+
+
+
+
Owned
+ + + +
+ +
+
available
+ + + +
+
diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.scss b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.scss new file mode 100644 index 00000000..86286fd8 --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.scss @@ -0,0 +1,47 @@ +.editor { + display: flex; + justify-content: stretch; +} +.column { + width: 50vw; +} + +.header { + margin-top: 5px; + display: flex; + flex-direction: row; + justify-content: space-between; + font-size: 20px; +} + +.header > div > button { + margin-right: 30px; +} + +.header > div { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; + +} + +.title { + font-size: 20px; + margin-left: 20px; +} +.box { + width: 50px; + height: 25px; + border: 1px solid; + margin-right: 20px; + margin-left: 10px; +} + +.allow { + background-color: rgba(5, 76, 5, 0.38); +} + +.deny { + background-color: rgba(130, 8, 8, 0.36); +} diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.spec.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.spec.ts new file mode 100644 index 00000000..c5276217 --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PermissionEditorComponent } from './permission-editor.component'; + +describe('PermissionEditorComponent', () => { + let component: PermissionEditorComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PermissionEditorComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PermissionEditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts new file mode 100644 index 00000000..6cc5a5cc --- /dev/null +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts @@ -0,0 +1,104 @@ +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute, Router} from "@angular/router"; +import {Role} from "@models/api/role"; +import {Server} from "@models/server"; +import {Permission} from "@models/api/permission"; +import {MatDialog} from "@angular/material/dialog"; +import {PermissionEditorValidateDialogComponent} from "@components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component"; +import {forkJoin, Observable} from "rxjs"; +import {RoleService} from "@services/role.service"; +import {ToasterService} from "@services/toaster.service"; + +@Component({ + selector: 'app-permission-editor', + templateUrl: './permission-editor.component.html', + styleUrls: ['./permission-editor.component.scss'] +}) +export class PermissionEditorComponent implements OnInit { + server: Server; + role: Role; + private permissions: Permission[]; + owned: Set; + available: Set; + + constructor(private route: ActivatedRoute, + private dialog: MatDialog, + private toastService: ToasterService, + private router: Router, + private roleService: RoleService) { + this.route.data.subscribe((data: { server: Server, role: Role, permissions: Permission[] }) => { + this.server = data.server; + this.role = data.role; + this.permissions = data.permissions; + this.reset(); + }); + } + + ngOnInit(): void { + } + + add(permission: Permission) { + this.available.delete(permission); + this.owned.add(permission); + } + + remove(permission: Permission) { + this.owned.delete(permission); + this.available.add(permission); + } + + reset() { + const ownedPermissionId = this.role.permissions.map(p => p.permission_id); + this.owned = new Set(this.role.permissions); + this.available = new Set(this.permissions.filter(p => !ownedPermissionId.includes(p.permission_id))); + } + + update() { + const {add, remove} = this.diff(); + this.dialog + .open(PermissionEditorValidateDialogComponent, + {width: '700px', height: '500px', data: {add, remove}}) + .afterClosed() + .subscribe((confirmed: boolean) => { + if (confirmed) { + const obs: Observable[] = []; + add.forEach((permission: Permission) => { + obs.push(this.roleService.addPermission(this.server, this.role, permission)); + }); + remove.forEach((permission: Permission) => { + obs.push(this.roleService.removePermission(this.server, this.role, permission)); + }); + + forkJoin(obs) + .subscribe(() => { + this.toastService.success(`permissions updated`); + this.router.navigate(['/server', this.server.id, 'management', 'roles', this.role.role_id]); + }, + (error) => { + this.toastService.error(error); + }); + } + + }); + } + + private diff() { + const add: Permission[] = []; + + const currentRolePermissionId = this.role.permissions.map(p => p.permission_id); + this.owned.forEach((permission: Permission) => { + if (!currentRolePermissionId.includes(permission.permission_id)) { + add.push(permission); + } + }); + + const remove: Permission[] = []; + this.role.permissions.forEach((permission: Permission) => { + if (!this.owned.has(permission)) { + remove.push(permission); + } + }); + + return {add, remove}; + } +} diff --git a/src/app/components/role-management/role-detail/role-detail.component.html b/src/app/components/role-management/role-detail/role-detail.component.html new file mode 100644 index 00000000..755af749 --- /dev/null +++ b/src/app/components/role-management/role-detail/role-detail.component.html @@ -0,0 +1,59 @@ +
+
+
+ + keyboard_arrow_left + +

Role {{role.name}} details

+
+
+
+
+ + Role name: + + +
+
+ + Description: + + +
+
Creation date: {{role.created_at}}
+
Last update Date: {{role.updated_at}}
+
UUID: {{role.role_id}}
+
+ Is build in +
+
+ +
+
+ +
+
+
Permissions
+
+ +
+
+ + +
+
+
+
diff --git a/src/app/components/role-management/role-detail/role-detail.component.scss b/src/app/components/role-management/role-detail/role-detail.component.scss new file mode 100644 index 00000000..bf38d212 --- /dev/null +++ b/src/app/components/role-management/role-detail/role-detail.component.scss @@ -0,0 +1,40 @@ +.main { + display: flex; + justify-content: space-around; +} + +.details { + width: 30vw; + display: flex; + flex-direction: column; + justify-content: center; +} + +.permissions { + width: 35vw; + display: flex; + flex-direction: column; + justify-content: stretch; +} + +.permission { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 10px; + border: 1px solid; + padding: 5px; + border-radius: 5px; + font-family: monospace; +} + +.header { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-bottom: 20px; + +} +.header > div { + font-size: 2em; +} diff --git a/src/app/components/role-management/role-detail/role-detail.component.spec.ts b/src/app/components/role-management/role-detail/role-detail.component.spec.ts new file mode 100644 index 00000000..ed8ae265 --- /dev/null +++ b/src/app/components/role-management/role-detail/role-detail.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoleDetailComponent } from './role-detail.component'; + +describe('RoleDetailComponent', () => { + let component: RoleDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RoleDetailComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RoleDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/role-management/role-detail/role-detail.component.ts b/src/app/components/role-management/role-detail/role-detail.component.ts new file mode 100644 index 00000000..bab01d94 --- /dev/null +++ b/src/app/components/role-management/role-detail/role-detail.component.ts @@ -0,0 +1,47 @@ +import {Component, OnInit} from '@angular/core'; +import {RoleService} from "@services/role.service"; +import {ActivatedRoute} from "@angular/router"; +import {Server} from "@models/server"; +import {ServerService} from "@services/server.service"; +import {Role} from "@models/api/role"; +import {FormControl, FormGroup} from "@angular/forms"; +import {ToasterService} from "@services/toaster.service"; + +@Component({ + selector: 'app-role-detail', + templateUrl: './role-detail.component.html', + styleUrls: ['./role-detail.component.scss'] +}) +export class RoleDetailComponent implements OnInit { + server: Server; + role: Role; + editRoleForm: FormGroup; + + constructor(private roleService: RoleService, + private serverService: ServerService, + private toastService: ToasterService, + private route: ActivatedRoute) { + + this.editRoleForm = new FormGroup({ + rolename: new FormControl(), + description: new FormControl(), + }); + } + + ngOnInit(): void { + this.route.data.subscribe((d: { server: Server; role: Role }) => { + this.server = d.server; + this.role = d.role; + }); + } + + onUpdate() { + this.roleService.update(this.server, this.role) + .subscribe(() => { + this.toastService.success(`role: ${this.role.name} was updated`); + }, + (error) => { + this.toastService.error(error); + }); + } +} diff --git a/src/app/components/role-management/role-filter.pipe.spec.ts b/src/app/components/role-management/role-filter.pipe.spec.ts new file mode 100644 index 00000000..e2cd1647 --- /dev/null +++ b/src/app/components/role-management/role-filter.pipe.spec.ts @@ -0,0 +1,8 @@ +import { RoleFilterPipe } from './role-filter.pipe'; + +describe('RoleFilterPipe', () => { + it('create an instance', () => { + const pipe = new RoleFilterPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/components/role-management/role-filter.pipe.ts b/src/app/components/role-management/role-filter.pipe.ts new file mode 100644 index 00000000..99443581 --- /dev/null +++ b/src/app/components/role-management/role-filter.pipe.ts @@ -0,0 +1,22 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import {Role} from "@models/api/role"; +import {User} from "@models/users/user"; +import {MatTableDataSource} from "@angular/material/table"; + +@Pipe({ + name: 'roleFilter' +}) +export class RoleFilterPipe implements PipeTransform { + + transform(roles: MatTableDataSource, searchText: string): MatTableDataSource { + if (!searchText) { + return roles; + } + searchText = searchText.trim().toLowerCase(); + roles.filter = searchText; + return roles; + + + } + +} diff --git a/src/app/components/role-management/role-management.component.html b/src/app/components/role-management/role-management.component.html new file mode 100644 index 00000000..eff07f44 --- /dev/null +++ b/src/app/components/role-management/role-management.component.html @@ -0,0 +1,90 @@ +
+
+
+

Roles Management

+ + +
+
+ +
+ + + +
+ +
+
+ + + + + + + + + + + + + + Name + + {{ row.name }} + + + + Description + +
{{ row.description }}
+ + + + Permissions (Allow) + +
+
+
{{permission.action}}
+
{{permission.methods.join(',')}}
+
{{permission.path}}
+
+
+ + + + + + + + + + + + + + + +
+
+
+ +
+ +
+ diff --git a/src/app/components/role-management/role-management.component.scss b/src/app/components/role-management/role-management.component.scss new file mode 100644 index 00000000..2045941d --- /dev/null +++ b/src/app/components/role-management/role-management.component.scss @@ -0,0 +1,56 @@ +.add-button { + height: 40px; + width: 160px; + margin: 20px; +} + +.full-width { + width: 940px; + margin-left: -470px; + left: 50%; +} + +.small-col { + flex-grow: 0.3; +} + +.active-col { + flex-grow: 0.5; +} + +.overflow-col { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-right: 5px; +} + +.permission { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.permission > div { + margin-right: 20px; + font-size: 10px; +} +.custom-tooltip { + font-size:100px; +} + +.loader { + position: absolute; + margin: auto; + height: 175px; + bottom: 0; + left: 0; + right: 0; + top: 0; + width: 175px; +} + +.permissions-list { + display: flex; + flex-direction: column; + justify-content: stretch; +} diff --git a/src/app/components/role-management/role-management.component.spec.ts b/src/app/components/role-management/role-management.component.spec.ts new file mode 100644 index 00000000..ddf1c7a4 --- /dev/null +++ b/src/app/components/role-management/role-management.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoleManagementComponent } from './role-management.component'; + +describe('RoleManagementComponent', () => { + let component: RoleManagementComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RoleManagementComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RoleManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/role-management/role-management.component.ts b/src/app/components/role-management/role-management.component.ts new file mode 100644 index 00000000..59b5a7b2 --- /dev/null +++ b/src/app/components/role-management/role-management.component.ts @@ -0,0 +1,120 @@ +import {Component, OnInit, ViewChild} from '@angular/core'; +import {Server} from "@models/server"; +import {MatTableDataSource} from "@angular/material/table"; +import {SelectionModel} from "@angular/cdk/collections"; +import {MatPaginator} from "@angular/material/paginator"; +import {MatSort} from "@angular/material/sort"; +import {ActivatedRoute, Router} from "@angular/router"; +import {ProgressService} from "../../common/progress/progress.service"; +import {ServerService} from "@services/server.service"; +import {MatDialog} from "@angular/material/dialog"; +import {ToasterService} from "@services/toaster.service"; +import {Role} from "@models/api/role"; +import {RoleService} from "@services/role.service"; +import {AddRoleDialogComponent} from "@components/role-management/add-role-dialog/add-role-dialog.component"; +import {DeleteRoleDialogComponent} from "@components/role-management/delete-role-dialog/delete-role-dialog.component"; +import {forkJoin} from "rxjs"; + + +@Component({ + selector: 'app-role-management', + templateUrl: './role-management.component.html', + styleUrls: ['./role-management.component.scss'] +}) +export class RoleManagementComponent implements OnInit { + server: Server; + dataSource = new MatTableDataSource(); + displayedColumns = ['select', 'name', 'description', 'permissions', 'delete']; + selection = new SelectionModel(true, []); + searchText = ''; + + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort, {static: true}) sort: MatSort; + isReady = false; + + constructor( + private route: ActivatedRoute, + private router: Router, + private roleService: RoleService, + private progressService: ProgressService, + private serverService: ServerService, + public dialog: MatDialog, + private toasterService: ToasterService) { + } + + ngOnInit() { + const serverId = this.route.parent.snapshot.paramMap.get('server_id'); + this.serverService.get(+serverId).then((server: Server) => { + this.server = server; + this.refresh(); + }); + } + + ngAfterViewInit() { + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + + } + + refresh() { + this.roleService.get(this.server).subscribe( + (roles: Role[]) => { + this.isReady = true; + this.dataSource.data = roles; + }, + (error) => { + this.progressService.setError(error); + } + ); + } + + addRole() { + const dialogRef = this.dialog.open(AddRoleDialogComponent, { + width: '400px', + autoFocus: false, + disableClose: true, + data: {server: this.server}, + }) + .afterClosed() + .subscribe((role: { name: string; description: string }) => { + if (role) { + this.roleService.create(this.server, role) + .subscribe(() => { + this.toasterService.success(`${role.name} role created`); + this.refresh(); + }, + (error) => this.toasterService.error(error)); + } + }); + } + + isAllSelected() { + const numSelected = this.selection.selected.length; + const numRows = this.dataSource.data.length; + return numSelected === numRows; + } + + masterToggle() { + this.isAllSelected() ? + this.selection.clear() : + this.dataSource.data.forEach(row => this.selection.select(row)); + } + + onDelete(rolesToDelete: Role[]) { + this.dialog + .open(DeleteRoleDialogComponent, {width: '500px', height: '250px', data: {roles: rolesToDelete}}) + .afterClosed() + .subscribe((isDeletedConfirm) => { + if (isDeletedConfirm) { + const observables = rolesToDelete.map((role: Role) => this.roleService.delete(this.server, role.role_id)); + forkJoin(observables) + .subscribe(() => { + this.refresh(); + }, + (error) => { + this.toasterService.error(`An error occur while trying to delete role`); + }); + } + }); + } +} diff --git a/src/app/components/user-management/user-management.component.scss b/src/app/components/user-management/user-management.component.scss index 114fb52a..6b41b9a7 100644 --- a/src/app/components/user-management/user-management.component.scss +++ b/src/app/components/user-management/user-management.component.scss @@ -27,6 +27,7 @@ .custom-tooltip { font-size:100px; + white-space: pre-line; } .loader { diff --git a/src/app/models/LocalStorage.ts b/src/app/models/LocalStorage.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/models/permission.ts b/src/app/models/api/permission.ts similarity index 79% rename from src/app/models/permission.ts rename to src/app/models/api/permission.ts index 0e93a35a..5545c8d5 100644 --- a/src/app/models/permission.ts +++ b/src/app/models/api/permission.ts @@ -25,11 +25,11 @@ export enum PermissionActions { } export interface Permission { - methods: Methods[], - path: string, - action: PermissionActions, - description: string, - created_at: string, - updated_at: string, - permission_id: string + methods: Methods[]; + path: string; + action: PermissionActions; + description: string; + created_at: string; + updated_at: string; + permission_id: string; } diff --git a/src/app/models/api/role.ts b/src/app/models/api/role.ts new file mode 100644 index 00000000..16519371 --- /dev/null +++ b/src/app/models/api/role.ts @@ -0,0 +1,11 @@ +import {Permission} from "./permission"; + +export interface Role { + name: string; + description: string; + created_at: string; + updated_at: string; + role_id: string; + is_builtin: boolean; + permissions: Permission[]; +} diff --git a/src/app/resolvers/permission.resolver.spec.ts b/src/app/resolvers/permission.resolver.spec.ts new file mode 100644 index 00000000..e25796f5 --- /dev/null +++ b/src/app/resolvers/permission.resolver.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { PermissionResolver } from './permission.resolver'; + +describe('PermissionResolver', () => { + let resolver: PermissionResolver; + + beforeEach(() => { + TestBed.configureTestingModule({}); + resolver = TestBed.inject(PermissionResolver); + }); + + it('should be created', () => { + expect(resolver).toBeTruthy(); + }); +}); diff --git a/src/app/resolvers/permission.resolver.ts b/src/app/resolvers/permission.resolver.ts new file mode 100644 index 00000000..424b7d2f --- /dev/null +++ b/src/app/resolvers/permission.resolver.ts @@ -0,0 +1,35 @@ +import { Injectable } from '@angular/core'; +import { + Router, Resolve, + RouterStateSnapshot, + ActivatedRouteSnapshot +} from '@angular/router'; +import {Observable, of, Subscriber} from 'rxjs'; +import {Permission} from "@models/api/permission"; +import {PermissionsService} from "@services/permissions.service"; +import {ServerService} from "@services/server.service"; +import {Server} from "@models/server"; + +@Injectable({ + providedIn: 'root' +}) +export class PermissionResolver implements Resolve { + + constructor(private permissionService: PermissionsService, + private serverService: ServerService) { + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + return new Observable((observer: Subscriber) => { + const serverId = route.paramMap.get('server_id'); + this.serverService.get(+serverId).then((server: Server) => { + this.permissionService.list(server).subscribe((permission: Permission[]) => { + observer.next(permission); + observer.complete(); + }); + }); + }); + + + } +} diff --git a/src/app/resolvers/role-detail.resolver.spec.ts b/src/app/resolvers/role-detail.resolver.spec.ts new file mode 100644 index 00000000..1185b804 --- /dev/null +++ b/src/app/resolvers/role-detail.resolver.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { RoleDetailResolver } from './role-detail.resolver'; + +describe('RoleDetailResolver', () => { + let resolver: RoleDetailResolver; + + beforeEach(() => { + TestBed.configureTestingModule({}); + resolver = TestBed.inject(RoleDetailResolver); + }); + + it('should be created', () => { + expect(resolver).toBeTruthy(); + }); +}); diff --git a/src/app/resolvers/role-detail.resolver.ts b/src/app/resolvers/role-detail.resolver.ts new file mode 100644 index 00000000..31e9466c --- /dev/null +++ b/src/app/resolvers/role-detail.resolver.ts @@ -0,0 +1,36 @@ +import {Injectable} from '@angular/core'; +import { + Router, Resolve, + RouterStateSnapshot, + ActivatedRouteSnapshot +} from '@angular/router'; +import {Observable, of, Subscriber} from 'rxjs'; +import {Server} from "../models/server"; +import {Role} from "../models/api/role"; +import {ServerService} from "../services/server.service"; +import {RoleService} from "../services/role.service"; + +@Injectable({ + providedIn: 'root' +}) +export class RoleDetailResolver implements Resolve { + + constructor(private serverService: ServerService, + private roleService: RoleService) { + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + return new Observable((observer: Subscriber) => { + const serverId = route.paramMap.get('server_id'); + const roleId = route.paramMap.get('role_id'); + + this.serverService.get(+serverId).then((server: Server) => { + this.roleService.getById(server, roleId).subscribe((role: Role) => { + observer.next( role); + observer.complete(); + }); + }); + }); + + } +} diff --git a/src/app/services/permissions.service.ts b/src/app/services/permissions.service.ts index dfde68cf..fc0ead02 100644 --- a/src/app/services/permissions.service.ts +++ b/src/app/services/permissions.service.ts @@ -13,7 +13,7 @@ import { Injectable } from '@angular/core'; import {HttpServer} from "./http-server.service"; import {Server} from "../models/server"; -import {Permission} from "../models/permission"; +import {Permission} from "../models/api/permission"; import {Observable} from "rxjs/Rx"; @Injectable({ diff --git a/src/app/services/role.service.spec.ts b/src/app/services/role.service.spec.ts new file mode 100644 index 00000000..275b25a3 --- /dev/null +++ b/src/app/services/role.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { RoleService } from './role.service'; + +describe('RoleService', () => { + let service: RoleService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(RoleService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/role.service.ts b/src/app/services/role.service.ts new file mode 100644 index 00000000..3d54909f --- /dev/null +++ b/src/app/services/role.service.ts @@ -0,0 +1,43 @@ +import { Injectable } from '@angular/core'; +import {HttpServer} from "./http-server.service"; +import {Server} from "../models/server"; +import {Group} from "../models/groups/group"; +import {Role} from "../models/api/role"; +import {Permission} from "@models/api/permission"; + +@Injectable({ + providedIn: 'root' +}) +export class RoleService { + + constructor(private httpServer: HttpServer) { } + + get(server: Server) { + return this.httpServer.get(server, '/roles'); + } + + delete(server: Server, role_id: string) { + return this.httpServer.delete(server, `/roles/${role_id}`); + } + + create(server: Server, newRole: { name: string; description: string }) { + return this.httpServer.post(server, `/roles`, newRole); + } + + getById(server: Server, roleId: string) { + return this.httpServer.get(server, `/roles/${roleId}`); + } + + update(server: Server, role: Role) { + return this.httpServer.put(server, `/roles/${role.role_id}`, {name: role.name, description: role.description}); + } + + addPermission(server: Server, role: Role, permission: Permission) { + return this.httpServer.put(server, `/roles/${role.role_id}/permissions/${permission.permission_id}`, {}); + + } + + removePermission(server: Server, role: Role, permission: Permission) { + return this.httpServer.delete(server, `/roles/${role.role_id}/permissions/${permission.permission_id}`); + } +} diff --git a/src/app/services/server-version.service.ts b/src/app/services/server-version.service.ts new file mode 100644 index 00000000..34324fd5 --- /dev/null +++ b/src/app/services/server-version.service.ts @@ -0,0 +1,29 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import { Injectable } from '@angular/core'; +import {HttpServer} from "./http-server.service"; +import {Server} from "../models/server"; +import {Observable} from "rxjs"; + +@Injectable({ + providedIn: 'root' +}) +export class ServerVersionService { + + constructor(private httpServer: HttpServer) { } + + + public checkServerVersion(server: Server): Observable { + return this.httpServer.get(server, '/version'); + } +} diff --git a/src/styles.scss b/src/styles.scss index f65fb1dc..0c98b1e6 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -51,3 +51,14 @@ mat-menu-panel { background-color: grey; color: #ffffff; } + +.permission-tooltip { + max-width: unset !important; + background-color: grey; + color: #ffffff; + background-color: grey; + color: #ffffff; + white-space: pre-line; + font-size: 12px !important; + font-family: monospace; +} diff --git a/tslint.json b/tslint.json index c123a5f1..aaba6e64 100644 --- a/tslint.json +++ b/tslint.json @@ -4,6 +4,8 @@ ], "rules": { "arrow-return-shorthand": true, + "no-implicit-dependencies": false, + "no-submodule-imports": false, "callable-types": true, "class-name": true, "comment-format": [ From 65172c18b5709ee1a2fba3647c8da07da16a0643 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Tue, 11 Jan 2022 11:20:48 +0100 Subject: [PATCH 24/50] Group details, can add role to group --- src/app/app-routing.module.ts | 9 +- src/app/app.module.ts | 6 +- .../add-role-to-group.component.html | 15 +++ .../add-role-to-group.component.scss | 35 +++++++ .../add-role-to-group.component.spec.ts | 25 +++++ .../add-role-to-group.component.ts | 78 +++++++++++++++ .../add-user-to-group-dialog.component.scss | 4 + .../group-details.component.html | 97 +++++++++++-------- .../group-details.component.scss | 13 ++- .../group-details/group-details.component.ts | 71 +++++++++++--- .../remove-to-group-dialog.component.html} | 2 +- .../remove-to-group-dialog.component.scss} | 0 .../remove-to-group-dialog.component.spec.ts} | 10 +- .../remove-to-group-dialog.component.ts | 25 +++++ ...spec.ts => group-members.resolver.spec.ts} | 6 +- src/app/resolvers/group-members.resolver.ts | 38 ++++++++ src/app/resolvers/group-role.resolver.spec.ts | 16 +++ ...ils.resolver.ts => group-role.resolver.ts} | 20 ++-- src/app/resolvers/group.resolver.spec.ts | 16 +++ src/app/resolvers/group.resolver.ts | 39 ++++++++ src/app/services/group.service.ts | 13 +++ 21 files changed, 449 insertions(+), 89 deletions(-) create mode 100644 src/app/components/group-details/add-role-to-group/add-role-to-group.component.html create mode 100644 src/app/components/group-details/add-role-to-group/add-role-to-group.component.scss create mode 100644 src/app/components/group-details/add-role-to-group/add-role-to-group.component.spec.ts create mode 100644 src/app/components/group-details/add-role-to-group/add-role-to-group.component.ts rename src/app/components/group-details/{remove-user-to-group-dialog/remove-user-to-group-dialog.component.html => remove-to-group-dialog/remove-to-group-dialog.component.html} (84%) rename src/app/components/group-details/{remove-user-to-group-dialog/remove-user-to-group-dialog.component.scss => remove-to-group-dialog/remove-to-group-dialog.component.scss} (100%) rename src/app/components/group-details/{remove-user-to-group-dialog/remove-user-to-group-dialog.component.spec.ts => remove-to-group-dialog/remove-to-group-dialog.component.spec.ts} (54%) create mode 100644 src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.ts rename src/app/resolvers/{group-details.resolver.spec.ts => group-members.resolver.spec.ts} (60%) create mode 100644 src/app/resolvers/group-members.resolver.ts create mode 100644 src/app/resolvers/group-role.resolver.spec.ts rename src/app/resolvers/{group-details.resolver.ts => group-role.resolver.ts} (65%) create mode 100644 src/app/resolvers/group.resolver.spec.ts create mode 100644 src/app/resolvers/group.resolver.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index ed0242b1..6c91c003 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -59,13 +59,15 @@ import {LoggedUserComponent} from './components/users/logged-user/logged-user.co import {GroupManagementComponent} from "./components/group-management/group-management.component"; import {GroupDetailsComponent} from "@components/group-details/group-details.component"; import {UserDetailComponent} from "@components/user-management/user-detail/user-detail.component"; -import {GroupDetailsResolver} from "@resolvers/group-details.resolver"; +import {GroupMembersResolver} from "@resolvers/group-members.resolver"; import {ManagementComponent} from "@components/management/management.component"; import {RoleManagementComponent} from "@components/role-management/role-management.component"; import {RoleDetailComponent} from "@components/role-management/role-detail/role-detail.component"; import {RoleDetailResolver} from "@resolvers/role-detail.resolver"; import {PermissionEditorComponent} from "@components/role-management/role-detail/permission-editor/permission-editor.component"; import {PermissionResolver} from "@resolvers/permission.resolver"; +import {GroupResolver} from "@resolvers/group.resolver"; +import {GroupRoleResolver} from "@resolvers/group-role.resolver"; const routes: Routes = [ { @@ -244,7 +246,10 @@ const routes: Routes = [ path: 'server/:server_id/management/groups/:user_group_id', component: GroupDetailsComponent, resolve: { - group: GroupDetailsResolver + members: GroupMembersResolver, + server: ServerResolve, + group: GroupResolver, + roles: GroupRoleResolver } }, { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3d09e55e..85e30c19 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -283,7 +283,7 @@ import { DeleteUserDialogComponent } from './components/user-management/delete-u import { GroupDetailsComponent } from './components/group-details/group-details.component'; import { UserDetailComponent } from './components/user-management/user-detail/user-detail.component'; import { AddUserToGroupDialogComponent } from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component'; -import { RemoveUserToGroupDialogComponent } from './components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component'; +import { RemoveToGroupDialogComponent } from '@components/group-details/remove-to-group-dialog/remove-to-group-dialog.component'; import { PaginatorPipe } from './components/group-details/paginator.pipe'; import { MembersFilterPipe } from './components/group-details/members-filter.pipe'; import { ManagementComponent } from './components/management/management.component'; @@ -295,6 +295,7 @@ import { RoleDetailComponent } from './components/role-management/role-detail/ro import { PermissionEditorComponent } from './components/role-management/role-detail/permission-editor/permission-editor.component'; import { EditablePermissionComponent } from './components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component'; import { PermissionEditorValidateDialogComponent } from './components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component'; +import { AddRoleToGroupComponent } from './components/group-details/add-role-to-group/add-role-to-group.component'; @NgModule({ declarations: [ @@ -493,7 +494,7 @@ import { PermissionEditorValidateDialogComponent } from './components/role-manag GroupDetailsComponent, UserDetailComponent, AddUserToGroupDialogComponent, - RemoveUserToGroupDialogComponent, + RemoveToGroupDialogComponent, PaginatorPipe, MembersFilterPipe, ManagementComponent, @@ -505,6 +506,7 @@ import { PermissionEditorValidateDialogComponent } from './components/role-manag PermissionEditorComponent, EditablePermissionComponent, PermissionEditorValidateDialogComponent, + AddRoleToGroupComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/group-details/add-role-to-group/add-role-to-group.component.html b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.html new file mode 100644 index 00000000..dff5bcd0 --- /dev/null +++ b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.html @@ -0,0 +1,15 @@ +
+

Add Role To group: {{data.group.name}}

+
+
+ + Search user + + +
+ +
+
{{role.name}}
+ add + +
diff --git a/src/app/components/group-details/add-role-to-group/add-role-to-group.component.scss b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.scss new file mode 100644 index 00000000..01cd6a62 --- /dev/null +++ b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.scss @@ -0,0 +1,35 @@ +:host { + display: flex; + flex-direction: column; + width: 100%; +} + +.title { + width: 100%; + text-align: center; +} + +.filter { + display: flex; + width: 600px; + justify-content: center; + margin-bottom: 50px; +} + +mat-form-field { + width: 600px; +} + +input { + width: 100%; +} + +.userList { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} + +mat-spinner { + width: 36px; +} diff --git a/src/app/components/group-details/add-role-to-group/add-role-to-group.component.spec.ts b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.spec.ts new file mode 100644 index 00000000..bd05a9b7 --- /dev/null +++ b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddRoleToGroupComponent } from './add-role-to-group.component'; + +describe('AddRoleToGroupComponent', () => { + let component: AddRoleToGroupComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddRoleToGroupComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddRoleToGroupComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/group-details/add-role-to-group/add-role-to-group.component.ts b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.ts new file mode 100644 index 00000000..f0cd6f33 --- /dev/null +++ b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.ts @@ -0,0 +1,78 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {BehaviorSubject, forkJoin, timer} from "rxjs"; +import {User} from "@models/users/user"; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {Server} from "@models/server"; +import {Group} from "@models/groups/group"; +import {UserService} from "@services/user.service"; +import {GroupService} from "@services/group.service"; +import {ToasterService} from "@services/toaster.service"; +import {Role} from "@models/api/role"; +import {RoleService} from "@services/role.service"; + +@Component({ + selector: 'app-add-role-to-group', + templateUrl: './add-role-to-group.component.html', + styleUrls: ['./add-role-to-group.component.scss'] +}) +export class AddRoleToGroupComponent implements OnInit { + roles = new BehaviorSubject([]); + displayedRoles = new BehaviorSubject([]); + + searchText: string; + loading = false; + + constructor(private dialog: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { server: Server; group: Group }, + private groupService: GroupService, + private roleService: RoleService, + private toastService: ToasterService) { + } + + ngOnInit(): void { + this.getRoles(); + } + + onSearch() { + timer(500) + .subscribe(() => { + const displayedUsers = this.roles.value.filter((roles: Role) => { + return roles.name.includes(this.searchText); + }); + + this.displayedRoles.next(displayedUsers); + }); + } + + getRoles() { + forkJoin([ + this.roleService.get(this.data.server), + this.groupService.getGroupRole(this.data.server, this.data.group.user_group_id) + ]).subscribe((results) => { + const [globalRoles, groupRoles] = results; + const roles = globalRoles.filter((role: Role) => { + return !groupRoles.find((r: Role) => r.role_id === role.role_id); + }); + + this.roles.next(roles); + this.displayedRoles.next(roles); + + }); + + } + + addRole(role: Role) { + this.loading = true; + this.groupService + .addRoleToGroup(this.data.server, this.data.group, role) + .subscribe(() => { + this.toastService.success(`role ${role.name} was added`); + this.getRoles(); + this.loading = false; + }, (err) => { + console.log(err); + this.toastService.error(`error while adding role ${role.name} to group ${this.data.group.name}`); + this.loading = false; + }); + } +} diff --git a/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.scss b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.scss index 51781781..01cd6a62 100644 --- a/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.scss +++ b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.scss @@ -29,3 +29,7 @@ input { justify-content: space-between; margin-bottom: 10px; } + +mat-spinner { + width: 36px; +} diff --git a/src/app/components/group-details/group-details.component.html b/src/app/components/group-details/group-details.component.html index 33473f5e..472d92e6 100644 --- a/src/app/components/group-details/group-details.component.html +++ b/src/app/components/group-details/group-details.component.html @@ -10,50 +10,63 @@

Groups {{group.name}} details

-
-
+ +
- - Group name: - - -
-
Creation date: {{group.created_at}}
-
Last update Date: {{group.updated_at}}
-
UUID: {{group.user_group_id}}
-
- Is build in -
-
- -
-
- -
-
-
-
Members:
+
+ + Group name: + +
- person_add -
-
- - - -
- - -
-
+
+ Is build in +
+
+ +
+
+
+
Creation date: {{group.created_at}}
+
Last update Date: {{group.updated_at}}
+
UUID: {{group.user_group_id}}
+
+ + +
+
+ person_add +
+
+ + + +
+ + +
+ + +
+
+
{{role.name}}
+
+ +
+
+ +
diff --git a/src/app/components/group-details/group-details.component.scss b/src/app/components/group-details/group-details.component.scss index c5fe588a..e8417eab 100644 --- a/src/app/components/group-details/group-details.component.scss +++ b/src/app/components/group-details/group-details.component.scss @@ -4,14 +4,12 @@ } .details { - width: 30vw; display: flex; flex-direction: column; justify-content: center; } .members { - width: 30vw; display: flex; flex-direction: column; justify-content: stretch; @@ -28,11 +26,6 @@ cursor: pointer; } -.members .title { - font-size: 2em; - text-decoration: underline; -} - .details > div { margin-bottom: 20px; } @@ -50,3 +43,9 @@ mat-form-field { width: 100%; } + +.roles { + display: flex; + flex-direction: row; + justify-content: space-between; +} diff --git a/src/app/components/group-details/group-details.component.ts b/src/app/components/group-details/group-details.component.ts index edf8fefb..831a1af5 100644 --- a/src/app/components/group-details/group-details.component.ts +++ b/src/app/components/group-details/group-details.component.ts @@ -10,18 +10,20 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import {Component, Inject, OnInit} from '@angular/core'; -import {ActivatedRoute, Router} from "@angular/router"; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from "@angular/router"; import {Server} from "@models/server"; import {Group} from "@models/groups/group"; import {User} from "@models/users/user"; import {FormControl, FormGroup} from "@angular/forms"; import {MatDialog} from "@angular/material/dialog"; import {AddUserToGroupDialogComponent} from "@components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component"; -import {RemoveUserToGroupDialogComponent} from "@components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component"; +import {RemoveToGroupDialogComponent} from "@components/group-details/remove-to-group-dialog/remove-to-group-dialog.component"; import {GroupService} from "@services/group.service"; import {ToasterService} from "@services/toaster.service"; import {PageEvent} from "@angular/material/paginator"; +import {Role} from "@models/api/role"; +import {AddRoleToGroupComponent} from "@components/group-details/add-role-to-group/add-role-to-group.component"; @Component({ selector: 'app-group-details', @@ -35,6 +37,7 @@ export class GroupDetailsComponent implements OnInit { editGroupForm: FormGroup; pageEvent: PageEvent | undefined; searchMembers: string; + roles: Role[]; constructor(private route: ActivatedRoute, private dialog: MatDialog, @@ -45,15 +48,14 @@ export class GroupDetailsComponent implements OnInit { groupname: new FormControl(''), }); - this.route.data.subscribe((d: { group: { server: Server; group: Group, users: User[] } }) => { + this.route.data.subscribe((d: { server: Server; group: Group, members: User[], roles: Role[] }) => { - this.server = d.group.server; - this.group = d.group.group; - this.members = d.group.users.sort((a: User, b: User) => a.username.toLowerCase().localeCompare(b.username.toLowerCase())); + this.server = d.server; + this.group = d.group; + this.roles = d.roles; + this.members = d.members.sort((a: User, b: User) => a.username.toLowerCase().localeCompare(b.username.toLowerCase())); this.editGroupForm.setValue({groupname: this.group.name}); }); - - } ngOnInit(): void { @@ -70,6 +72,18 @@ export class GroupDetailsComponent implements OnInit { }); } + openAddRoleDialog() { + this.dialog + .open(AddRoleToGroupComponent, + { + width: '700px', height: '500px', + data: {server: this.server, group: this.group} + }) + .afterClosed() + .subscribe(() => { + this.reloadRoles(); + }); + } openAddUserDialog() { this.dialog .open(AddUserToGroupDialogComponent, @@ -84,14 +98,12 @@ export class GroupDetailsComponent implements OnInit { } openRemoveUserDialog(user: User) { - this.dialog - .open(RemoveUserToGroupDialogComponent, - {width: '500px', height: '200px', data: {user}}) + this.dialog.open(RemoveToGroupDialogComponent, + {width: '500px', height: '200px', data: {name: user.username}}) .afterClosed() - .subscribe((userToRemove: User) => { - console.log(userToRemove); - if (userToRemove) { - this.groupService.removeUser(this.server, this.group, userToRemove) + .subscribe((confirm: boolean) => { + if (confirm) { + this.groupService.removeUser(this.server, this.group, user) .subscribe(() => { this.toastService.success(`User ${user.username} was removed`); this.reloadMembers(); @@ -104,10 +116,37 @@ export class GroupDetailsComponent implements OnInit { }); } + + openRemoveRoleDialog(role: Role) { + this.dialog.open(RemoveToGroupDialogComponent, + {width: '500px', height: '200px', data: {name: role.name}}) + .afterClosed() + .subscribe((confirm: string) => { + if (confirm) { + this.groupService.removeRole(this.server, this.group, role) + .subscribe(() => { + this.toastService.success(`Role ${role.name} was removed`); + this.reloadRoles(); + }, + (error) => { + this.toastService.error(`Error while removing role ${role.name} from ${this.group.name}`); + console.log(error); + }); + } + }); + } + reloadMembers() { this.groupService.getGroupMember(this.server, this.group.user_group_id) .subscribe((members: User[]) => { this.members = members; }); } + + reloadRoles() { + this.groupService.getGroupRole(this.server, this.group.user_group_id) + .subscribe((roles: Role[]) => { + this.roles = roles; + }); + } } diff --git a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.html b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.html similarity index 84% rename from src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.html rename to src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.html index a87d964d..e5811dad 100644 --- a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.html +++ b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.html @@ -1,6 +1,6 @@
Confirm ?
-
Removing user: {{data.user.username}}
+
Removing: {{data.name}}
diff --git a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.scss b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.scss similarity index 100% rename from src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.scss rename to src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.scss diff --git a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.spec.ts b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.spec.ts similarity index 54% rename from src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.spec.ts rename to src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.spec.ts index 61d76e2f..7ddbe114 100644 --- a/src/app/components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component.spec.ts +++ b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { RemoveUserToGroupDialogComponent } from './remove-user-to-group-dialog.component'; +import { RemoveToGroupDialogComponent } from './remove-to-group-dialog.component'; describe('RemoveUserToGroupDialogComponent', () => { - let component: RemoveUserToGroupDialogComponent; - let fixture: ComponentFixture; + let component: RemoveToGroupDialogComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ RemoveUserToGroupDialogComponent ] + declarations: [ RemoveToGroupDialogComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(RemoveUserToGroupDialogComponent); + fixture = TestBed.createComponent(RemoveToGroupDialogComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.ts b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.ts new file mode 100644 index 00000000..593fd4d9 --- /dev/null +++ b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.ts @@ -0,0 +1,25 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {User} from "@models/users/user"; + +@Component({ + selector: 'app-remove-user-to-group-dialog', + templateUrl: './remove-to-group-dialog.component.html', + styleUrls: ['./remove-to-group-dialog.component.scss'] +}) +export class RemoveToGroupDialogComponent implements OnInit { + + constructor(private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { name: string }) { } + + ngOnInit(): void { + } + + onCancel() { + this.dialogRef.close(false); + } + + onConfirm() { + this.dialogRef.close(true); + } +} diff --git a/src/app/resolvers/group-details.resolver.spec.ts b/src/app/resolvers/group-members.resolver.spec.ts similarity index 60% rename from src/app/resolvers/group-details.resolver.spec.ts rename to src/app/resolvers/group-members.resolver.spec.ts index f57fe67f..ba5ffc92 100644 --- a/src/app/resolvers/group-details.resolver.spec.ts +++ b/src/app/resolvers/group-members.resolver.spec.ts @@ -1,13 +1,13 @@ import { TestBed } from '@angular/core/testing'; -import { GroupDetailsResolver } from './group-details.resolver'; +import { GroupMembersResolver } from './group-members.resolver'; describe('GroupDetailsResolver', () => { - let resolver: GroupDetailsResolver; + let resolver: GroupMembersResolver; beforeEach(() => { TestBed.configureTestingModule({}); - resolver = TestBed.inject(GroupDetailsResolver); + resolver = TestBed.inject(GroupMembersResolver); }); it('should be created', () => { diff --git a/src/app/resolvers/group-members.resolver.ts b/src/app/resolvers/group-members.resolver.ts new file mode 100644 index 00000000..d48c4aeb --- /dev/null +++ b/src/app/resolvers/group-members.resolver.ts @@ -0,0 +1,38 @@ +import {Injectable} from '@angular/core'; +import { + Resolve, + RouterStateSnapshot, + ActivatedRouteSnapshot +} from '@angular/router'; +import {Observable, Subscriber} from 'rxjs'; +import {ServerService} from "../services/server.service"; +import {GroupService} from "../services/group.service"; +import {Server} from "../models/server"; +import {Group} from "../models/groups/group"; +import {User} from "../models/users/user"; + +@Injectable({ + providedIn: 'root' +}) +export class GroupMembersResolver implements Resolve { + + constructor(private serverService: ServerService, + private groupService: GroupService) { + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + + return new Observable((subscriber: Subscriber) => { + + const serverId = route.paramMap.get('server_id'); + const groupId = route.paramMap.get('user_group_id'); + + this.serverService.get(+serverId).then((server: Server) => { + this.groupService.getGroupMember(server, groupId).subscribe((users: User[]) => { + subscriber.next(users); + subscriber.complete(); + }); + }); + }); + } +} diff --git a/src/app/resolvers/group-role.resolver.spec.ts b/src/app/resolvers/group-role.resolver.spec.ts new file mode 100644 index 00000000..4af7789c --- /dev/null +++ b/src/app/resolvers/group-role.resolver.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { GroupRoleResolver } from './group-role.resolver'; + +describe('GroupRoleResolver', () => { + let resolver: GroupRoleResolver; + + beforeEach(() => { + TestBed.configureTestingModule({}); + resolver = TestBed.inject(GroupRoleResolver); + }); + + it('should be created', () => { + expect(resolver).toBeTruthy(); + }); +}); diff --git a/src/app/resolvers/group-details.resolver.ts b/src/app/resolvers/group-role.resolver.ts similarity index 65% rename from src/app/resolvers/group-details.resolver.ts rename to src/app/resolvers/group-role.resolver.ts index 89049766..a16b0e7a 100644 --- a/src/app/resolvers/group-details.resolver.ts +++ b/src/app/resolvers/group-role.resolver.ts @@ -10,7 +10,7 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; import { Router, Resolve, RouterStateSnapshot, @@ -19,32 +19,30 @@ import { import {Observable, of, Subscriber} from 'rxjs'; import {ServerService} from "../services/server.service"; import {GroupService} from "../services/group.service"; -import {Server} from "../models/server"; -import {Group} from "../models/groups/group"; import {User} from "../models/users/user"; +import {Server} from "../models/server"; +import {Role} from "../models/api/role"; @Injectable({ providedIn: 'root' }) -export class GroupDetailsResolver implements Resolve<{server: Server; group: Group; users: User[]}> { +export class GroupRoleResolver implements Resolve { constructor(private serverService: ServerService, private groupService: GroupService) { } - resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<{server: Server; group: Group; users: User[]}> { + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { - return new Observable<{server: Server; group: Group; users: User[]}>((subscriber: Subscriber) => { + return new Observable((subscriber: Subscriber) => { const serverId = route.paramMap.get('server_id'); const groupId = route.paramMap.get('user_group_id'); this.serverService.get(+serverId).then((server: Server) => { - this.groupService.get(server, groupId).subscribe((group: Group) => { - this.groupService.getGroupMember(server, groupId).subscribe((users: User[]) => { - subscriber.next({server, group, users}); - subscriber.complete(); - }); + this.groupService.getGroupRole(server, groupId).subscribe((role: Role[]) => { + subscriber.next(role); + subscriber.complete(); }); }); }); diff --git a/src/app/resolvers/group.resolver.spec.ts b/src/app/resolvers/group.resolver.spec.ts new file mode 100644 index 00000000..deccb382 --- /dev/null +++ b/src/app/resolvers/group.resolver.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { GroupResolver } from './group.resolver'; + +describe('GroupResolver', () => { + let resolver: GroupResolver; + + beforeEach(() => { + TestBed.configureTestingModule({}); + resolver = TestBed.inject(GroupResolver); + }); + + it('should be created', () => { + expect(resolver).toBeTruthy(); + }); +}); diff --git a/src/app/resolvers/group.resolver.ts b/src/app/resolvers/group.resolver.ts new file mode 100644 index 00000000..9ba4e8e6 --- /dev/null +++ b/src/app/resolvers/group.resolver.ts @@ -0,0 +1,39 @@ +import {Injectable} from '@angular/core'; +import { + Router, Resolve, + RouterStateSnapshot, + ActivatedRouteSnapshot +} from '@angular/router'; +import {Observable, of, Subscriber} from 'rxjs'; +import {ServerService} from "@services/server.service"; +import {GroupService} from "@services/group.service"; +import {User} from "@models/users/user"; +import {Server} from "@models/server"; +import {Group} from "@models/groups/group"; + +@Injectable({ + providedIn: 'root' +}) +export class GroupResolver implements Resolve { + + + constructor(private serverService: ServerService, + private groupService: GroupService) { + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + + return new Observable((subscriber: Subscriber) => { + + const serverId = route.paramMap.get('server_id'); + const groupId = route.paramMap.get('user_group_id'); + + this.serverService.get(+serverId).then((server: Server) => { + this.groupService.get(server, groupId).subscribe((group: Group) => { + subscriber.next(group); + subscriber.complete(); + }); + }); + }); + } +} diff --git a/src/app/services/group.service.ts b/src/app/services/group.service.ts index d7f5914e..c259cb52 100644 --- a/src/app/services/group.service.ts +++ b/src/app/services/group.service.ts @@ -16,6 +16,7 @@ import {Server} from "../models/server"; import {Group} from "../models/groups/group"; import {User} from "../models/users/user"; import {Observable} from "rxjs"; +import {Role} from "@models/api/role"; @Injectable({ providedIn: 'root' @@ -58,4 +59,16 @@ export class GroupService { update(server: Server, group: Group) { return this.httpServer.put(server, `/groups/${group.user_group_id}`, {name: group.name}); } + + getGroupRole(server: Server, groupId: string) { + return this.httpServer.get(server, `/groups/${groupId}/roles`); + } + + removeRole(server: Server, group: Group, role: Role) { + return this.httpServer.delete(server, `/groups/${group.user_group_id}/roles/${role.role_id}`); + } + + addRoleToGroup(server: Server, group: Group, role: Role) { + return this.httpServer.put(server, `/groups/${group.user_group_id}/roles/${role.role_id}`, {}); + } } From 26649114555784a994b33e82d0e0b65fe16d1775 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Fri, 7 Jan 2022 09:43:10 +0000 Subject: [PATCH 25/50] Add permission management --- src/app/app-routing.module.ts | 10 ++ src/app/app.module.ts | 20 +++ .../add-role-to-group.component.ts | 12 ++ .../remove-to-group-dialog.component.ts | 12 ++ .../management/management.component.ts | 2 +- .../action-button.component.html | 6 + .../action-button.component.scss | 8 ++ .../action-button.component.spec.ts | 25 ++++ .../action-button/action-button.component.ts | 38 ++++++ .../add-permission-line.component.html | 19 +++ .../add-permission-line.component.scss | 0 .../add-permission-line.component.spec.ts | 25 ++++ .../add-permission-line.component.ts | 73 +++++++++++ .../delete-permission-dialog.component.html | 12 ++ .../delete-permission-dialog.component.scss | 18 +++ ...delete-permission-dialog.component.spec.ts | 25 ++++ .../delete-permission-dialog.component.ts | 37 ++++++ .../method-button.component.html | 7 ++ .../method-button.component.scss | 10 ++ .../method-button.component.spec.ts | 25 ++++ .../method-button/method-button.component.ts | 38 ++++++ .../permission-edit-line.component.html | 57 +++++++++ .../permission-edit-line.component.scss | 28 +++++ .../permission-edit-line.component.spec.ts | 25 ++++ .../permission-edit-line.component.ts | 81 ++++++++++++ .../permissions-management.component.html | 24 ++++ .../permissions-management.component.scss | 20 +++ .../permissions-management.component.spec.ts | 25 ++++ .../permissions-management.component.ts | 76 ++++++++++++ .../add-role-dialog.component.ts | 12 ++ .../delete-role-dialog.component.ts | 12 ++ .../editable-permission.component.ts | 12 ++ ...ission-editor-validate-dialog.component.ts | 12 ++ .../permission-editor.component.ts | 12 ++ .../role-detail/role-detail.component.ts | 12 ++ .../role-management/role-filter.pipe.ts | 12 ++ .../role-management.component.ts | 12 ++ src/app/resolvers/group-members.resolver.ts | 12 ++ src/app/resolvers/group.resolver.ts | 12 ++ src/app/resolvers/permission.resolver.ts | 12 ++ src/app/resolvers/role-detail.resolver.ts | 12 ++ .../services/api-information.service.spec.ts | 16 +++ src/app/services/api-information.service.ts | 115 ++++++++++++++++++ src/app/services/role.service.ts | 12 ++ 44 files changed, 1044 insertions(+), 1 deletion(-) create mode 100644 src/app/components/permissions-management/action-button/action-button.component.html create mode 100644 src/app/components/permissions-management/action-button/action-button.component.scss create mode 100644 src/app/components/permissions-management/action-button/action-button.component.spec.ts create mode 100644 src/app/components/permissions-management/action-button/action-button.component.ts create mode 100644 src/app/components/permissions-management/add-permission-line/add-permission-line.component.html create mode 100644 src/app/components/permissions-management/add-permission-line/add-permission-line.component.scss create mode 100644 src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts create mode 100644 src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts create mode 100644 src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.html create mode 100644 src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.scss create mode 100644 src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.spec.ts create mode 100644 src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.ts create mode 100644 src/app/components/permissions-management/method-button/method-button.component.html create mode 100644 src/app/components/permissions-management/method-button/method-button.component.scss create mode 100644 src/app/components/permissions-management/method-button/method-button.component.spec.ts create mode 100644 src/app/components/permissions-management/method-button/method-button.component.ts create mode 100644 src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.html create mode 100644 src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.scss create mode 100644 src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.spec.ts create mode 100644 src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.ts create mode 100644 src/app/components/permissions-management/permissions-management.component.html create mode 100644 src/app/components/permissions-management/permissions-management.component.scss create mode 100644 src/app/components/permissions-management/permissions-management.component.spec.ts create mode 100644 src/app/components/permissions-management/permissions-management.component.ts create mode 100644 src/app/services/api-information.service.spec.ts create mode 100644 src/app/services/api-information.service.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 6c91c003..b852cc6b 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -66,6 +66,7 @@ import {RoleDetailComponent} from "@components/role-management/role-detail/role- import {RoleDetailResolver} from "@resolvers/role-detail.resolver"; import {PermissionEditorComponent} from "@components/role-management/role-detail/permission-editor/permission-editor.component"; import {PermissionResolver} from "@resolvers/permission.resolver"; +import {PermissionsManagementComponent} from "@components/permissions-management/permissions-management.component"; import {GroupResolver} from "@resolvers/group.resolver"; import {GroupRoleResolver} from "@resolvers/group-role.resolver"; @@ -239,6 +240,9 @@ const routes: Routes = [ { path: 'roles', component: RoleManagementComponent + }, + {path: 'permissions', + component: PermissionsManagementComponent } ] }, @@ -269,6 +273,12 @@ const routes: Routes = [ permissions: PermissionResolver } }, + { + path: 'server/:server_id/permission_management', + component: PermissionsManagementComponent, + canActivate: [LoginGuard], + resolve: { server: ServerResolve }, + } ], }, { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 85e30c19..00752519 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* tslint:disable:max-line-length */ import { DragDropModule } from '@angular/cdk/drag-drop'; import { OverlayModule } from '@angular/cdk/overlay'; import { CdkTableModule } from '@angular/cdk/table'; @@ -287,6 +288,7 @@ import { RemoveToGroupDialogComponent } from '@components/group-details/remove-t import { PaginatorPipe } from './components/group-details/paginator.pipe'; import { MembersFilterPipe } from './components/group-details/members-filter.pipe'; import { ManagementComponent } from './components/management/management.component'; +import {MatCheckboxModule} from "@angular/material/checkbox"; import { RoleManagementComponent } from './components/role-management/role-management.component'; import { RoleFilterPipe } from './components/role-management/role-filter.pipe'; import { AddRoleDialogComponent } from './components/role-management/add-role-dialog/add-role-dialog.component'; @@ -295,7 +297,15 @@ import { RoleDetailComponent } from './components/role-management/role-detail/ro import { PermissionEditorComponent } from './components/role-management/role-detail/permission-editor/permission-editor.component'; import { EditablePermissionComponent } from './components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component'; import { PermissionEditorValidateDialogComponent } from './components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component'; +import { PermissionsManagementComponent } from './components/permissions-management/permissions-management.component'; +import { PermissionEditLineComponent } from '@components/permissions-management/permission-edit-line/permission-edit-line.component'; +import {MatSlideToggleModule} from '@angular/material/slide-toggle'; +import { AddPermissionLineComponent } from './components/permissions-management/add-permission-line/add-permission-line.component'; +import { MethodButtonComponent } from './components/permissions-management/method-button/method-button.component'; +import { ActionButtonComponent } from './components/permissions-management/action-button/action-button.component'; +import { DeletePermissionDialogComponent } from './components/permissions-management/delete-permission-dialog/delete-permission-dialog.component'; import { AddRoleToGroupComponent } from './components/group-details/add-role-to-group/add-role-to-group.component'; +import {MatFormFieldModule} from "@angular/material/form-field"; @NgModule({ declarations: [ @@ -506,7 +516,14 @@ import { AddRoleToGroupComponent } from './components/group-details/add-role-to- PermissionEditorComponent, EditablePermissionComponent, PermissionEditorValidateDialogComponent, + RemoveToGroupDialogComponent, + PermissionsManagementComponent, AddRoleToGroupComponent, + PermissionEditLineComponent, + AddPermissionLineComponent, + MethodButtonComponent, + ActionButtonComponent, + DeletePermissionDialogComponent ], imports: [ BrowserModule, @@ -524,9 +541,12 @@ import { AddRoleToGroupComponent } from './components/group-details/add-role-to- DragAndDropModule, DragDropModule, NgxChildProcessModule, + MatFormFieldModule, MATERIAL_IMPORTS, NgCircleProgressModule.forRoot(), OverlayModule, + MatSlideToggleModule, + MatCheckboxModule, ], providers: [ SettingsService, diff --git a/src/app/components/group-details/add-role-to-group/add-role-to-group.component.ts b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.ts index f0cd6f33..e6a34e04 100644 --- a/src/app/components/group-details/add-role-to-group/add-role-to-group.component.ts +++ b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, Inject, OnInit} from '@angular/core'; import {BehaviorSubject, forkJoin, timer} from "rxjs"; import {User} from "@models/users/user"; diff --git a/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.ts b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.ts index 593fd4d9..2e86af2e 100644 --- a/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.ts +++ b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, Inject, OnInit} from '@angular/core'; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {User} from "@models/users/user"; diff --git a/src/app/components/management/management.component.ts b/src/app/components/management/management.component.ts index d7637602..12273a93 100644 --- a/src/app/components/management/management.component.ts +++ b/src/app/components/management/management.component.ts @@ -23,7 +23,7 @@ import {ServerService} from "@services/server.service"; export class ManagementComponent implements OnInit { server: Server; - links = ['users', 'groups', 'roles']; + links = ['users', 'groups', 'roles', 'permissions']; activeLink: string = this.links[0]; constructor( diff --git a/src/app/components/permissions-management/action-button/action-button.component.html b/src/app/components/permissions-management/action-button/action-button.component.html new file mode 100644 index 00000000..cac08740 --- /dev/null +++ b/src/app/components/permissions-management/action-button/action-button.component.html @@ -0,0 +1,6 @@ + diff --git a/src/app/components/permissions-management/action-button/action-button.component.scss b/src/app/components/permissions-management/action-button/action-button.component.scss new file mode 100644 index 00000000..fe2111dc --- /dev/null +++ b/src/app/components/permissions-management/action-button/action-button.component.scss @@ -0,0 +1,8 @@ +.allow { + background-color: green; + border-radius: unset !important; +} + +.deny { + background-color: darkred; +} diff --git a/src/app/components/permissions-management/action-button/action-button.component.spec.ts b/src/app/components/permissions-management/action-button/action-button.component.spec.ts new file mode 100644 index 00000000..9d1e566c --- /dev/null +++ b/src/app/components/permissions-management/action-button/action-button.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ActionButtonComponent } from './action-button.component'; + +describe('ActionButtonComponent', () => { + let component: ActionButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ActionButtonComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ActionButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/action-button/action-button.component.ts b/src/app/components/permissions-management/action-button/action-button.component.ts new file mode 100644 index 00000000..9cf23619 --- /dev/null +++ b/src/app/components/permissions-management/action-button/action-button.component.ts @@ -0,0 +1,38 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {PermissionActions} from "@models/api/permission"; + +@Component({ + selector: 'app-action-button', + templateUrl: './action-button.component.html', + styleUrls: ['./action-button.component.scss'] +}) +export class ActionButtonComponent implements OnInit { + + readonly DENY = 'DENY'; + readonly ALLOW = 'ALLOW'; + @Input() action: PermissionActions; + @Input() disabled = true; + @Output() update = new EventEmitter(); + + constructor() { } + + ngOnInit(): void { + } + + change() { + this.action === PermissionActions.DENY ? this.action = PermissionActions.ALLOW : this.action = PermissionActions.DENY; + this.update.emit(this.action); + } +} diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.html b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.html new file mode 100644 index 00000000..2a4a1032 --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.html @@ -0,0 +1,19 @@ + + Type + + {{type}} + + + + + + {{elt.name ? elt.name : elt.filename}} + + + + + diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.scss b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts new file mode 100644 index 00000000..0a0cf212 --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddPermissionLineComponent } from './add-permission-line.component'; + +describe('AddPermissionLineComponent', () => { + let component: AddPermissionLineComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddPermissionLineComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddPermissionLineComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts new file mode 100644 index 00000000..1d4e58df --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts @@ -0,0 +1,73 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Component, Input, OnInit, Output} from '@angular/core'; +import {ProjectService} from "@services/project.service"; +import {Server} from "@models/server"; +import {ComputeService} from "@services/compute.service"; +import EventEmitter from "events"; + +@Component({ + selector: 'app-add-permission-line', + templateUrl: './add-permission-line.component.html', + styleUrls: ['./add-permission-line.component.scss'] +}) +export class AddPermissionLineComponent implements OnInit { + + objectTypes = ['projects', 'images', 'templates', 'computes'] + elements = []; + selectedType = 'projects'; + @Input() server: Server; + + @Output() addPermissionEvent = new EventEmitter(); + + constructor(private projectService: ProjectService, + private computeService: ComputeService) { } + + ngOnInit(): void { + this.projectService.list(this.server) + .subscribe(elts => { + this.elements = elts; + }) + } + + changeType(value) { + console.log(value); + this.selectedType = value; + switch (this.selectedType) { + case 'projects': + this.projectService.list(this.server) + .subscribe(elts => { + this.elements = elts; + }) + break; + case 'computes': + this.computeService.getComputes(this.server) + .subscribe(elts => { + this.elements = elts; + }) + break; + default: + console.log("TODO"); + this.elements = []; + + } + } + + onSave() { + this.addPermissionEvent.emit('save'); + } + + onCancel() { + this.addPermissionEvent.emit('cancel'); + } +} diff --git a/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.html b/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.html new file mode 100644 index 00000000..1983ebb8 --- /dev/null +++ b/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.html @@ -0,0 +1,12 @@ +
+
confirm deleting permission:
+
{{data.permission_id}}
+
{{data.path}}
+
{{data.methods.join(',')}}
+
{{data.action}}
+
{{data.description}}
+
+
+ + +
diff --git a/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.scss b/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.scss new file mode 100644 index 00000000..51a31794 --- /dev/null +++ b/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.scss @@ -0,0 +1,18 @@ +.description { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + margin-top: 20px; +} + +.description > div { + margin-bottom: 10px; +} + +.button { + display: flex; + flex-direction: row; + justify-content: space-around; + margin-top: 20px; +} diff --git a/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.spec.ts b/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.spec.ts new file mode 100644 index 00000000..3ce9d30c --- /dev/null +++ b/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeletePermissionDialogComponent } from './delete-permission-dialog.component'; + +describe('DeletePermissionDialogComponent', () => { + let component: DeletePermissionDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DeletePermissionDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DeletePermissionDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.ts b/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.ts new file mode 100644 index 00000000..cc1a149c --- /dev/null +++ b/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.ts @@ -0,0 +1,37 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {Permission} from "@models/api/permission"; + +@Component({ + selector: 'app-delete-permission-dialog', + templateUrl: './delete-permission-dialog.component.html', + styleUrls: ['./delete-permission-dialog.component.scss'] +}) +export class DeletePermissionDialogComponent implements OnInit { + + constructor(private dialog: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: Permission) { } + + ngOnInit(): void { + } + + cancel() { + this.dialog.close(false); + } + + confirm() { + this.dialog.close(true); + } +} diff --git a/src/app/components/permissions-management/method-button/method-button.component.html b/src/app/components/permissions-management/method-button/method-button.component.html new file mode 100644 index 00000000..4e4a10cc --- /dev/null +++ b/src/app/components/permissions-management/method-button/method-button.component.html @@ -0,0 +1,7 @@ + diff --git a/src/app/components/permissions-management/method-button/method-button.component.scss b/src/app/components/permissions-management/method-button/method-button.component.scss new file mode 100644 index 00000000..cc1b1778 --- /dev/null +++ b/src/app/components/permissions-management/method-button/method-button.component.scss @@ -0,0 +1,10 @@ +:host { + padding: unset !important; +} + +.enable { + color: green !important; +} +.disabled { + color: dimgrey; +} diff --git a/src/app/components/permissions-management/method-button/method-button.component.spec.ts b/src/app/components/permissions-management/method-button/method-button.component.spec.ts new file mode 100644 index 00000000..78fa382f --- /dev/null +++ b/src/app/components/permissions-management/method-button/method-button.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MethodButtonComponent } from './method-button.component'; + +describe('MethodButtonComponent', () => { + let component: MethodButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MethodButtonComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MethodButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/method-button/method-button.component.ts b/src/app/components/permissions-management/method-button/method-button.component.ts new file mode 100644 index 00000000..b9a2c373 --- /dev/null +++ b/src/app/components/permissions-management/method-button/method-button.component.ts @@ -0,0 +1,38 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {Methods} from "@models/api/permission"; + +@Component({ + selector: 'app-method-button', + templateUrl: './method-button.component.html', + styleUrls: ['./method-button.component.scss'] +}) +export class MethodButtonComponent implements OnInit { + + @Input() enable = false; + @Input() name: Methods; + @Input() disabled = true; + + @Output() update = new EventEmitter<{name: Methods; enable: boolean}>(); + + constructor() { } + + ngOnInit(): void { + } + + change() { + this.enable = !this.enable; + this.update.emit({name: this.name, enable: this.enable}); + } +} diff --git a/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.html b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.html new file mode 100644 index 00000000..5164b55b --- /dev/null +++ b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.html @@ -0,0 +1,57 @@ +
+
+
+ +
+
+
+ +
+
+
+
+
+ {{permission.path}} +
+
+
+ + + +
+ +
+
+ + +
+
+ + +
+
+
diff --git a/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.scss b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.scss new file mode 100644 index 00000000..8d6e5890 --- /dev/null +++ b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.scss @@ -0,0 +1,28 @@ +.permission { + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: solid 1px; + margin-top: 10px; + align-items: center; +} + +.action-button-bar { + display: flex; + flex-direction: row; +} + +.methods { + display: flex; + flex-direction: row; + border: 1px solid; +} + +.permission-input { + width: 300px; +} + +.button-bar > div > button { + padding: unset !important; +} + diff --git a/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.spec.ts b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.spec.ts new file mode 100644 index 00000000..51510353 --- /dev/null +++ b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PermissionEditLineComponent } from './permission-edit-line.component'; + +describe('PermissionAddEditLineComponent', () => { + let component: PermissionEditLineComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PermissionEditLineComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PermissionEditLineComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.ts b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.ts new file mode 100644 index 00000000..ed9e7e55 --- /dev/null +++ b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.ts @@ -0,0 +1,81 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {Methods, Permission} from "@models/api/permission"; +import {Server} from '@models/server'; +import {ApiInformationService} from "@services/api-information.service"; +import {PermissionsService} from "@services/permissions.service"; +import {ToasterService} from "@services/toaster.service"; +import {MatDialog} from "@angular/material/dialog"; +import {DeletePermissionDialogComponent} from "@components/permissions-management/delete-permission-dialog/delete-permission-dialog.component"; + +@Component({ + selector: 'app-permission-add-edit-line', + templateUrl: './permission-edit-line.component.html', + styleUrls: ['./permission-edit-line.component.scss'] +}) +export class PermissionEditLineComponent { + @Input() permission: Permission; + @Input() server: Server; + + isEditable = false; + @Output() update = new EventEmitter(); + + constructor(public apiInformation: ApiInformationService, + private permissionService: PermissionsService, + private toasterService: ToasterService, + private dialog: MatDialog) { + } + + + onDelete() { + this.dialog.open(DeletePermissionDialogComponent, + {width: '700px', height: '500px', data: this.permission}) + .afterClosed() + .subscribe((confirm: boolean) => { + if (confirm) { + this.permissionService.delete(this.server, this.permission.permission_id) + .subscribe(() => { + this.toasterService.success(`Permission was deleted`); + this.update.emit(); + }, (e) => { + this.toasterService.error(e); + this.update.emit(); + }); + } + }); + + } + + onSave() { + this.permissionService.update(this.server, this.permission) + .subscribe(() => { + this.toasterService.success(`Permission was updated`); + this.update.emit(); + }, (e) => { + this.toasterService.error(e); + this.update.emit(); + }); + } + + onCancel() { + this.update.emit(); + } + + + onMethodUpdate(event: { name: Methods; enable: boolean }) { + const set = new Set(this.permission.methods); + event.enable ? set.add(event.name) : set.delete(event.name); + this.permission.methods = Array.from(set); + } +} diff --git a/src/app/components/permissions-management/permissions-management.component.html b/src/app/components/permissions-management/permissions-management.component.html new file mode 100644 index 00000000..c8f4fd7a --- /dev/null +++ b/src/app/components/permissions-management/permissions-management.component.html @@ -0,0 +1,24 @@ +
+
+
+ +
+
+ +
+ + +
+ +
+
+
+ +
+ +
+ diff --git a/src/app/components/permissions-management/permissions-management.component.scss b/src/app/components/permissions-management/permissions-management.component.scss new file mode 100644 index 00000000..860f184c --- /dev/null +++ b/src/app/components/permissions-management/permissions-management.component.scss @@ -0,0 +1,20 @@ +.permission-content { + max-width: 1400px; +} + +.add-button { + height: 40px; + width: 160px; + margin: 20px; +} + +.loader { + position: absolute; + margin: auto; + height: 175px; + bottom: 0; + left: 0; + right: 0; + top: 0; + width: 175px; +} diff --git a/src/app/components/permissions-management/permissions-management.component.spec.ts b/src/app/components/permissions-management/permissions-management.component.spec.ts new file mode 100644 index 00000000..c7dcdc86 --- /dev/null +++ b/src/app/components/permissions-management/permissions-management.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PermissionsManagementComponent } from './permissions-management.component'; + +describe('PermissionsManagementComponent', () => { + let component: PermissionsManagementComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PermissionsManagementComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PermissionsManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/permissions-management.component.ts b/src/app/components/permissions-management/permissions-management.component.ts new file mode 100644 index 00000000..d9b662d1 --- /dev/null +++ b/src/app/components/permissions-management/permissions-management.component.ts @@ -0,0 +1,76 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Component, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef} from '@angular/core'; +import {ActivatedRoute, Router} from "@angular/router"; +import {Server} from "@models/server"; +import {PermissionsService} from "@services/permissions.service"; +import {ProgressService} from "../../common/progress/progress.service"; +import {Permission} from "@models/api/permission"; +import {AddPermissionLineComponent} from "@components/permissions-management/add-permission-line/add-permission-line.component"; +import {ServerService} from "@services/server.service"; + +@Component({ + selector: 'app-permissions-management', + templateUrl: './permissions-management.component.html', + styleUrls: ['./permissions-management.component.scss'] +}) +export class PermissionsManagementComponent implements OnInit { + server: Server; + permissions: Permission[]; + addPermissionLineComp = AddPermissionLineComponent; + newPermissionEdit = false; + + @ViewChild('dynamic', { + read: ViewContainerRef + }) viewContainerRef: ViewContainerRef; + isReady = false; + + constructor(private route: ActivatedRoute, + private router: Router, + private permissionService: PermissionsService, + private progressService: ProgressService, + private serverService: ServerService) { } + + ngOnInit(): void { + const serverId = this.route.parent.snapshot.paramMap.get('server_id'); + console.log(serverId); + this.serverService.get(+serverId).then((server: Server) => { + this.server = server; + this.refresh(); + }); + } + + refresh() { + this.permissionService.list(this.server).subscribe( + (permissions: Permission[]) => { + this.permissions = permissions; + this.isReady = true; + }, + (error) => { + this.progressService.setError(error); + } + ); + } + + addPermission() { + //const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.addPermissionLineComp); + //const component = this.viewContainerRef.createComponent(componentFactory); + //component.instance.server = this.server; + this.newPermissionEdit = true; + + } + + updateList($event: any) { + this.newPermissionEdit = false; + } +} diff --git a/src/app/components/role-management/add-role-dialog/add-role-dialog.component.ts b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.ts index 0e2a0544..58f58311 100644 --- a/src/app/components/role-management/add-role-dialog/add-role-dialog.component.ts +++ b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, Inject, OnInit} from '@angular/core'; import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; diff --git a/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.ts b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.ts index 82d461cd..01f41da8 100644 --- a/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.ts +++ b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, Inject, OnInit} from '@angular/core'; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {Role} from "@models/api/role"; diff --git a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts index d9db67f9..5744ce42 100644 --- a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts +++ b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {Permission} from "@models/api/permission"; diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.ts index 97890027..b1a7dd9f 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.ts +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, Inject, OnInit} from '@angular/core'; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {Group} from "@models/groups/group"; diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts index 6cc5a5cc..f5f0b45a 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, OnInit} from '@angular/core'; import {ActivatedRoute, Router} from "@angular/router"; import {Role} from "@models/api/role"; diff --git a/src/app/components/role-management/role-detail/role-detail.component.ts b/src/app/components/role-management/role-detail/role-detail.component.ts index bab01d94..3638e78b 100644 --- a/src/app/components/role-management/role-detail/role-detail.component.ts +++ b/src/app/components/role-management/role-detail/role-detail.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, OnInit} from '@angular/core'; import {RoleService} from "@services/role.service"; import {ActivatedRoute} from "@angular/router"; diff --git a/src/app/components/role-management/role-filter.pipe.ts b/src/app/components/role-management/role-filter.pipe.ts index 99443581..f9e70fcb 100644 --- a/src/app/components/role-management/role-filter.pipe.ts +++ b/src/app/components/role-management/role-filter.pipe.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { Pipe, PipeTransform } from '@angular/core'; import {Role} from "@models/api/role"; import {User} from "@models/users/user"; diff --git a/src/app/components/role-management/role-management.component.ts b/src/app/components/role-management/role-management.component.ts index 59b5a7b2..1f6e08ad 100644 --- a/src/app/components/role-management/role-management.component.ts +++ b/src/app/components/role-management/role-management.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, OnInit, ViewChild} from '@angular/core'; import {Server} from "@models/server"; import {MatTableDataSource} from "@angular/material/table"; diff --git a/src/app/resolvers/group-members.resolver.ts b/src/app/resolvers/group-members.resolver.ts index d48c4aeb..f9a1e483 100644 --- a/src/app/resolvers/group-members.resolver.ts +++ b/src/app/resolvers/group-members.resolver.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Injectable} from '@angular/core'; import { Resolve, diff --git a/src/app/resolvers/group.resolver.ts b/src/app/resolvers/group.resolver.ts index 9ba4e8e6..147d127f 100644 --- a/src/app/resolvers/group.resolver.ts +++ b/src/app/resolvers/group.resolver.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Injectable} from '@angular/core'; import { Router, Resolve, diff --git a/src/app/resolvers/permission.resolver.ts b/src/app/resolvers/permission.resolver.ts index 424b7d2f..176e8572 100644 --- a/src/app/resolvers/permission.resolver.ts +++ b/src/app/resolvers/permission.resolver.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { Injectable } from '@angular/core'; import { Router, Resolve, diff --git a/src/app/resolvers/role-detail.resolver.ts b/src/app/resolvers/role-detail.resolver.ts index 31e9466c..2bec400b 100644 --- a/src/app/resolvers/role-detail.resolver.ts +++ b/src/app/resolvers/role-detail.resolver.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Injectable} from '@angular/core'; import { Router, Resolve, diff --git a/src/app/services/api-information.service.spec.ts b/src/app/services/api-information.service.spec.ts new file mode 100644 index 00000000..6d0f65d6 --- /dev/null +++ b/src/app/services/api-information.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ApiInformationService } from './api-information.service'; + +describe('ApiInformationService', () => { + let service: ApiInformationService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ApiInformationService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/api-information.service.ts b/src/app/services/api-information.service.ts new file mode 100644 index 00000000..93d64a0c --- /dev/null +++ b/src/app/services/api-information.service.ts @@ -0,0 +1,115 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import {Injectable} from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {Observable, ReplaySubject} from "rxjs"; +import {map} from "rxjs/operators"; +import {Methods} from "@models/api/permission"; + +export interface IPathDict { + methods: ('POST' | 'GET' | 'PUT' | 'DELETE' | 'HEAD' | 'PATH')[]; + originalPath: string; + path: string; + subPaths: string[]; +} + +@Injectable({ + providedIn: 'root' +}) +export class ApiInformationService { + private data: ReplaySubject = new ReplaySubject(1); + + constructor(private httpClient: HttpClient) { + this.loadLocalInformation(); + + this.data.subscribe((data) => { + localStorage.setItem('api-definition', JSON.stringify(data)); + }); + + + this.httpClient + .get(`https://apiv3.gns3.net/openapi.json`) + .subscribe((openapi: any) => { + const data = this.apiModelAdapter(openapi); + this.data.next(data); + }); + + } + + private apiModelAdapter(openapi: any): IPathDict[] { + + const keys = Object.keys(openapi.paths); + return keys + .map(path => { + const subPaths = path.split('/').filter(elem => !(elem === '' || elem === 'v3')); + return {originalPath: path, path: subPaths.join('/'), subPaths}; + }) + .map(path => { + //FIXME + // @ts-ignore + const methods = Object.keys(openapi.paths[path.originalPath]); + return {methods: methods.map(m => m.toUpperCase()), ...path}; + + }) as unknown as IPathDict[]; + } + + + getMethods(path: string): Observable { + return this.getPath(path) + .pipe( + map((data: IPathDict[]) => { + const availableMethods = new Set(); + + data.forEach((p: IPathDict) => { + p.methods.forEach(method => availableMethods.add(method)); + }); + return Array.from(availableMethods) as Methods[]; + }), + ); + } + + getPath(path: string): Observable { + return this.data + .asObservable() + .pipe( + map((data) => { + + const splinted = path.split('/').filter(elem => !(elem === '' || elem === 'v3')); + let remains = data; + splinted.forEach((value, index) => { + if (value === '*') { + return remains; + } + remains = remains.filter((val => { + if (!val.subPaths[index]) { + return false; + } + if (val.subPaths[index].includes('{')) { + return true; + } + return val.subPaths[index] === value; + })); + }); + + return remains; + }) + ); + } + + private loadLocalInformation() { + const data = JSON.parse(localStorage.getItem('api-definition')); + if (data) { + this.data.next(data); + } + } +} diff --git a/src/app/services/role.service.ts b/src/app/services/role.service.ts index 3d54909f..f4cf41d4 100644 --- a/src/app/services/role.service.ts +++ b/src/app/services/role.service.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { Injectable } from '@angular/core'; import {HttpServer} from "./http-server.service"; import {Server} from "../models/server"; From 65f1d45dc54b34cf12d3154843b265e91191ea67 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 13 Jan 2022 09:41:02 +0100 Subject: [PATCH 26/50] Permission management, create add permission component and apiInformation service, which parse swagger api information schema --- src/app/app.module.ts | 588 +++++++++--------- .../add-permission-line.component.html | 67 +- .../add-permission-line.component.scss | 49 ++ .../add-permission-line.component.ts | 80 +-- .../filter-complete.pipe.spec.ts | 8 + .../filter-complete.pipe.ts | 17 + .../path-auto-complete.component.html | 37 ++ .../path-auto-complete.component.scss | 22 + .../path-auto-complete.component.spec.ts | 25 + .../path-auto-complete.component.ts | 74 +++ .../permissions-management.component.html | 14 +- .../permissions-management.component.scss | 10 + src/app/models/api/permission.ts | 6 +- src/app/services/api-information.service.ts | 151 ++++- 14 files changed, 772 insertions(+), 376 deletions(-) create mode 100644 src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts create mode 100644 src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts create mode 100644 src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.html create mode 100644 src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.scss create mode 100644 src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.spec.ts create mode 100644 src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 00752519..4a8a6c31 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,293 +1,293 @@ /* tslint:disable */ /* tslint:disable:max-line-length */ -import { DragDropModule } from '@angular/cdk/drag-drop'; -import { OverlayModule } from '@angular/cdk/overlay'; -import { CdkTableModule } from '@angular/cdk/table'; -import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; -import { ErrorHandler, NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatSidenavModule } from '@angular/material/sidenav'; -import { BrowserModule, Title } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { DragAndDropModule } from 'angular-draggable-droppable'; -import { ResizableModule } from 'angular-resizable-element'; -import { D3Service } from 'd3-ng2-service'; -import { NgCircleProgressModule } from 'ng-circle-progress'; -import { FileUploadModule } from 'ng2-file-upload'; -import { NgxChildProcessModule } from 'ngx-childprocess'; -import { NgxElectronModule } from 'ngx-electron'; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { CartographyModule } from './cartography/cartography.module'; -import { DrawingsDataSource } from './cartography/datasources/drawings-datasource'; -import { LinksDataSource } from './cartography/datasources/links-datasource'; -import { NodesDataSource } from './cartography/datasources/nodes-datasource'; -import { SymbolsDataSource } from './cartography/datasources/symbols-datasource'; -import { InRectangleHelper } from './cartography/helpers/in-rectangle-helper'; -import { SelectionManager } from './cartography/managers/selection-manager'; -import { ToasterErrorHandler } from './common/error-handlers/toaster-error-handler'; -import { ProgressDialogComponent } from './common/progress-dialog/progress-dialog.component'; -import { ProgressDialogService } from './common/progress-dialog/progress-dialog.service'; -import { ProgressComponent } from './common/progress/progress.component'; -import { ProgressService } from './common/progress/progress.service'; -import { AdbutlerComponent } from './components/adbutler/adbutler.component'; -import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component'; -import { InformationDialogComponent } from './components/dialogs/information-dialog.component'; -import { DirectLinkComponent } from './components/direct-link/direct-link.component'; -import { DrawingAddedComponent } from './components/drawings-listeners/drawing-added/drawing-added.component'; -import { DrawingDraggedComponent } from './components/drawings-listeners/drawing-dragged/drawing-dragged.component'; -import { DrawingResizedComponent } from './components/drawings-listeners/drawing-resized/drawing-resized.component'; -import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component'; -import { LinkCreatedComponent } from './components/drawings-listeners/link-created/link-created.component'; -import { NodeDraggedComponent } from './components/drawings-listeners/node-dragged/node-dragged.component'; -import { NodeLabelDraggedComponent } from './components/drawings-listeners/node-label-dragged/node-label-dragged.component'; -import { TextAddedComponent } from './components/drawings-listeners/text-added/text-added.component'; -import { TextEditedComponent } from './components/drawings-listeners/text-edited/text-edited.component'; -import { HelpComponent } from './components/help/help.component'; -import { InstallSoftwareComponent } from './components/installed-software/install-software/install-software.component'; -import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component'; -import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'; -import { BuiltInPreferencesComponent } from './components/preferences/built-in/built-in-preferences.component'; -import { CloudNodesAddTemplateComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component'; -import { CloudNodesTemplateDetailsComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component'; -import { CloudNodesTemplatesComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component'; -import { EthernetHubsAddTemplateComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component'; -import { EthernetHubsTemplateDetailsComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component'; -import { EthernetHubsTemplatesComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component'; -import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component'; -import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component'; -import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component'; -import { CustomAdaptersTableComponent } from './components/preferences/common/custom-adapters-table/custom-adapters-table.component'; -import { CustomAdaptersComponent } from './components/preferences/common/custom-adapters/custom-adapters.component'; -import { DeleteConfirmationDialogComponent } from './components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component'; -import { DeleteTemplateComponent } from './components/preferences/common/delete-template-component/delete-template.component'; -import { EmptyTemplatesListComponent } from './components/preferences/common/empty-templates-list/empty-templates-list.component'; -import { PortsComponent } from './components/preferences/common/ports/ports.component'; -import { SymbolsMenuComponent } from './components/preferences/common/symbols-menu/symbols-menu.component'; -import { SymbolsComponent } from './components/preferences/common/symbols/symbols.component'; -import { UdpTunnelsComponent } from './components/preferences/common/udp-tunnels/udp-tunnels.component'; -import { AddDockerTemplateComponent } from './components/preferences/docker/add-docker-template/add-docker-template.component'; -import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component'; -import { DockerTemplateDetailsComponent } from './components/preferences/docker/docker-template-details/docker-template-details.component'; -import { DockerTemplatesComponent } from './components/preferences/docker/docker-templates/docker-templates.component'; -import { AddIosTemplateComponent } from './components/preferences/dynamips/add-ios-template/add-ios-template.component'; -import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component'; -import { DynamipsPreferencesComponent } from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component'; -import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component'; -import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component'; -import { GeneralPreferencesComponent } from './components/preferences/general/general-preferences.component'; -import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component'; -import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component'; -import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component'; -import { IouTemplatesComponent } from './components/preferences/ios-on-unix/iou-templates/iou-templates.component'; -import { PreferencesComponent } from './components/preferences/preferences.component'; -import { AddQemuVmTemplateComponent } from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component'; -import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component'; -import { QemuPreferencesComponent } from './components/preferences/qemu/qemu-preferences/qemu-preferences.component'; -import { QemuVmTemplateDetailsComponent } from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component'; -import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component'; -import { AddVirtualBoxTemplateComponent } from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component'; -import { VirtualBoxPreferencesComponent } from './components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component'; -import { VirtualBoxTemplateDetailsComponent } from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component'; -import { VirtualBoxTemplatesComponent } from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component'; -import { AddVmwareTemplateComponent } from './components/preferences/vmware/add-vmware-template/add-vmware-template.component'; -import { VmwarePreferencesComponent } from './components/preferences/vmware/vmware-preferences/vmware-preferences.component'; -import { VmwareTemplateDetailsComponent } from './components/preferences/vmware/vmware-template-details/vmware-template-details.component'; -import { VmwareTemplatesComponent } from './components/preferences/vmware/vmware-templates/vmware-templates.component'; -import { AddVpcsTemplateComponent } from './components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component'; -import { VpcsPreferencesComponent } from './components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component'; -import { VpcsTemplateDetailsComponent } from './components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component'; -import { VpcsTemplatesComponent } from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component'; -import { ChangeHostnameDialogComponent } from './components/project-map/change-hostname-dialog/change-hostname-dialog.component'; -import { ChangeSymbolDialogComponent } from './components/project-map/change-symbol-dialog/change-symbol-dialog.component'; -import { ConsoleWrapperComponent } from './components/project-map/console-wrapper/console-wrapper.component'; -import { ContextConsoleMenuComponent } from './components/project-map/context-console-menu/context-console-menu.component'; -import { AlignHorizontallyActionComponent } from './components/project-map/context-menu/actions/align-horizontally/align-horizontally.component'; -import { AlignVerticallyActionComponent } from './components/project-map/context-menu/actions/align_vertically/align-vertically.component'; -import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component'; -import { ChangeHostnameActionComponent } from './components/project-map/context-menu/actions/change-hostname/change-hostname-action.component'; -import { ChangeSymbolActionComponent } from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component'; -import { ConfigActionComponent } from './components/project-map/context-menu/actions/config-action/config-action.component'; -import { ConsoleDeviceActionBrowserComponent } from './components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component'; -import { ConsoleDeviceActionComponent } from './components/project-map/context-menu/actions/console-device-action/console-device-action.component'; -import { DeleteActionComponent } from './components/project-map/context-menu/actions/delete-action/delete-action.component'; -import { DuplicateActionComponent } from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component'; -import { EditConfigActionComponent } from './components/project-map/context-menu/actions/edit-config/edit-config-action.component'; -import { EditStyleActionComponent } from './components/project-map/context-menu/actions/edit-style-action/edit-style-action.component'; -import { EditTextActionComponent } from './components/project-map/context-menu/actions/edit-text-action/edit-text-action.component'; -import { ExportConfigActionComponent } from './components/project-map/context-menu/actions/export-config/export-config-action.component'; -import { HttpConsoleNewTabActionComponent } from './components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component'; -import { HttpConsoleActionComponent } from './components/project-map/context-menu/actions/http-console/http-console-action.component'; -import { ImportConfigActionComponent } from './components/project-map/context-menu/actions/import-config/import-config-action.component'; -import { LockActionComponent } from './components/project-map/context-menu/actions/lock-action/lock-action.component'; -import { MoveLayerDownActionComponent } from './components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component'; -import { MoveLayerUpActionComponent } from './components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component'; -import { OpenFileExplorerActionComponent } from './components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component'; -import { PacketFiltersActionComponent } from './components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component'; -import { ReloadNodeActionComponent } from './components/project-map/context-menu/actions/reload-node-action/reload-node-action.component'; -import { ResumeLinkActionComponent } from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component'; -import { ShowNodeActionComponent } from './components/project-map/context-menu/actions/show-node-action/show-node-action.component'; -import { StartCaptureOnStartedLinkActionComponent } from './components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component'; -import { StartCaptureActionComponent } from './components/project-map/context-menu/actions/start-capture/start-capture-action.component'; -import { StartNodeActionComponent } from './components/project-map/context-menu/actions/start-node-action/start-node-action.component'; -import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component'; -import { IsolateNodeActionComponent } from './components/project-map/context-menu/actions/isolate-node-action/isolate-node-action.component'; +import {DragDropModule} from '@angular/cdk/drag-drop'; +import {OverlayModule} from '@angular/cdk/overlay'; +import {CdkTableModule} from '@angular/cdk/table'; +import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http'; +import {ErrorHandler, NgModule} from '@angular/core'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {MatSidenavModule} from '@angular/material/sidenav'; +import {BrowserModule, Title} from '@angular/platform-browser'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {DragAndDropModule} from 'angular-draggable-droppable'; +import {ResizableModule} from 'angular-resizable-element'; +import {D3Service} from 'd3-ng2-service'; +import {NgCircleProgressModule} from 'ng-circle-progress'; +import {FileUploadModule} from 'ng2-file-upload'; +import {NgxChildProcessModule} from 'ngx-childprocess'; +import {NgxElectronModule} from 'ngx-electron'; +import {AppRoutingModule} from './app-routing.module'; +import {AppComponent} from './app.component'; +import {CartographyModule} from './cartography/cartography.module'; +import {DrawingsDataSource} from './cartography/datasources/drawings-datasource'; +import {LinksDataSource} from './cartography/datasources/links-datasource'; +import {NodesDataSource} from './cartography/datasources/nodes-datasource'; +import {SymbolsDataSource} from './cartography/datasources/symbols-datasource'; +import {InRectangleHelper} from './cartography/helpers/in-rectangle-helper'; +import {SelectionManager} from './cartography/managers/selection-manager'; +import {ToasterErrorHandler} from './common/error-handlers/toaster-error-handler'; +import {ProgressDialogComponent} from './common/progress-dialog/progress-dialog.component'; +import {ProgressDialogService} from './common/progress-dialog/progress-dialog.service'; +import {ProgressComponent} from './common/progress/progress.component'; +import {ProgressService} from './common/progress/progress.service'; +import {AdbutlerComponent} from './components/adbutler/adbutler.component'; +import {BundledServerFinderComponent} from './components/bundled-server-finder/bundled-server-finder.component'; +import {InformationDialogComponent} from './components/dialogs/information-dialog.component'; +import {DirectLinkComponent} from './components/direct-link/direct-link.component'; +import {DrawingAddedComponent} from './components/drawings-listeners/drawing-added/drawing-added.component'; +import {DrawingDraggedComponent} from './components/drawings-listeners/drawing-dragged/drawing-dragged.component'; +import {DrawingResizedComponent} from './components/drawings-listeners/drawing-resized/drawing-resized.component'; +import {InterfaceLabelDraggedComponent} from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component'; +import {LinkCreatedComponent} from './components/drawings-listeners/link-created/link-created.component'; +import {NodeDraggedComponent} from './components/drawings-listeners/node-dragged/node-dragged.component'; +import {NodeLabelDraggedComponent} from './components/drawings-listeners/node-label-dragged/node-label-dragged.component'; +import {TextAddedComponent} from './components/drawings-listeners/text-added/text-added.component'; +import {TextEditedComponent} from './components/drawings-listeners/text-edited/text-edited.component'; +import {HelpComponent} from './components/help/help.component'; +import {InstallSoftwareComponent} from './components/installed-software/install-software/install-software.component'; +import {InstalledSoftwareComponent} from './components/installed-software/installed-software.component'; +import {PageNotFoundComponent} from './components/page-not-found/page-not-found.component'; +import {BuiltInPreferencesComponent} from './components/preferences/built-in/built-in-preferences.component'; +import {CloudNodesAddTemplateComponent} from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component'; +import {CloudNodesTemplateDetailsComponent} from './components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component'; +import {CloudNodesTemplatesComponent} from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component'; +import {EthernetHubsAddTemplateComponent} from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component'; +import {EthernetHubsTemplateDetailsComponent} from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component'; +import {EthernetHubsTemplatesComponent} from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component'; +import {EthernetSwitchesAddTemplateComponent} from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component'; +import {EthernetSwitchesTemplateDetailsComponent} from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component'; +import {EthernetSwitchesTemplatesComponent} from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component'; +import {CustomAdaptersTableComponent} from './components/preferences/common/custom-adapters-table/custom-adapters-table.component'; +import {CustomAdaptersComponent} from './components/preferences/common/custom-adapters/custom-adapters.component'; +import {DeleteConfirmationDialogComponent} from './components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component'; +import {DeleteTemplateComponent} from './components/preferences/common/delete-template-component/delete-template.component'; +import {EmptyTemplatesListComponent} from './components/preferences/common/empty-templates-list/empty-templates-list.component'; +import {PortsComponent} from './components/preferences/common/ports/ports.component'; +import {SymbolsMenuComponent} from './components/preferences/common/symbols-menu/symbols-menu.component'; +import {SymbolsComponent} from './components/preferences/common/symbols/symbols.component'; +import {UdpTunnelsComponent} from './components/preferences/common/udp-tunnels/udp-tunnels.component'; +import {AddDockerTemplateComponent} from './components/preferences/docker/add-docker-template/add-docker-template.component'; +import {CopyDockerTemplateComponent} from './components/preferences/docker/copy-docker-template/copy-docker-template.component'; +import {DockerTemplateDetailsComponent} from './components/preferences/docker/docker-template-details/docker-template-details.component'; +import {DockerTemplatesComponent} from './components/preferences/docker/docker-templates/docker-templates.component'; +import {AddIosTemplateComponent} from './components/preferences/dynamips/add-ios-template/add-ios-template.component'; +import {CopyIosTemplateComponent} from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component'; +import {DynamipsPreferencesComponent} from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component'; +import {IosTemplateDetailsComponent} from './components/preferences/dynamips/ios-template-details/ios-template-details.component'; +import {IosTemplatesComponent} from './components/preferences/dynamips/ios-templates/ios-templates.component'; +import {GeneralPreferencesComponent} from './components/preferences/general/general-preferences.component'; +import {AddIouTemplateComponent} from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component'; +import {CopyIouTemplateComponent} from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component'; +import {IouTemplateDetailsComponent} from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component'; +import {IouTemplatesComponent} from './components/preferences/ios-on-unix/iou-templates/iou-templates.component'; +import {PreferencesComponent} from './components/preferences/preferences.component'; +import {AddQemuVmTemplateComponent} from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component'; +import {CopyQemuVmTemplateComponent} from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component'; +import {QemuPreferencesComponent} from './components/preferences/qemu/qemu-preferences/qemu-preferences.component'; +import {QemuVmTemplateDetailsComponent} from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component'; +import {QemuVmTemplatesComponent} from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component'; +import {AddVirtualBoxTemplateComponent} from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component'; +import {VirtualBoxPreferencesComponent} from './components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component'; +import {VirtualBoxTemplateDetailsComponent} from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component'; +import {VirtualBoxTemplatesComponent} from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component'; +import {AddVmwareTemplateComponent} from './components/preferences/vmware/add-vmware-template/add-vmware-template.component'; +import {VmwarePreferencesComponent} from './components/preferences/vmware/vmware-preferences/vmware-preferences.component'; +import {VmwareTemplateDetailsComponent} from './components/preferences/vmware/vmware-template-details/vmware-template-details.component'; +import {VmwareTemplatesComponent} from './components/preferences/vmware/vmware-templates/vmware-templates.component'; +import {AddVpcsTemplateComponent} from './components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component'; +import {VpcsPreferencesComponent} from './components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component'; +import {VpcsTemplateDetailsComponent} from './components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component'; +import {VpcsTemplatesComponent} from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component'; +import {ChangeHostnameDialogComponent} from './components/project-map/change-hostname-dialog/change-hostname-dialog.component'; +import {ChangeSymbolDialogComponent} from './components/project-map/change-symbol-dialog/change-symbol-dialog.component'; +import {ConsoleWrapperComponent} from './components/project-map/console-wrapper/console-wrapper.component'; +import {ContextConsoleMenuComponent} from './components/project-map/context-console-menu/context-console-menu.component'; +import {AlignHorizontallyActionComponent} from './components/project-map/context-menu/actions/align-horizontally/align-horizontally.component'; +import {AlignVerticallyActionComponent} from './components/project-map/context-menu/actions/align_vertically/align-vertically.component'; +import {BringToFrontActionComponent} from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component'; +import {ChangeHostnameActionComponent} from './components/project-map/context-menu/actions/change-hostname/change-hostname-action.component'; +import {ChangeSymbolActionComponent} from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component'; +import {ConfigActionComponent} from './components/project-map/context-menu/actions/config-action/config-action.component'; +import {ConsoleDeviceActionBrowserComponent} from './components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component'; +import {ConsoleDeviceActionComponent} from './components/project-map/context-menu/actions/console-device-action/console-device-action.component'; +import {DeleteActionComponent} from './components/project-map/context-menu/actions/delete-action/delete-action.component'; +import {DuplicateActionComponent} from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component'; +import {EditConfigActionComponent} from './components/project-map/context-menu/actions/edit-config/edit-config-action.component'; +import {EditStyleActionComponent} from './components/project-map/context-menu/actions/edit-style-action/edit-style-action.component'; +import {EditTextActionComponent} from './components/project-map/context-menu/actions/edit-text-action/edit-text-action.component'; +import {ExportConfigActionComponent} from './components/project-map/context-menu/actions/export-config/export-config-action.component'; +import {HttpConsoleNewTabActionComponent} from './components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component'; +import {HttpConsoleActionComponent} from './components/project-map/context-menu/actions/http-console/http-console-action.component'; +import {ImportConfigActionComponent} from './components/project-map/context-menu/actions/import-config/import-config-action.component'; +import {LockActionComponent} from './components/project-map/context-menu/actions/lock-action/lock-action.component'; +import {MoveLayerDownActionComponent} from './components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component'; +import {MoveLayerUpActionComponent} from './components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component'; +import {OpenFileExplorerActionComponent} from './components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component'; +import {PacketFiltersActionComponent} from './components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component'; +import {ReloadNodeActionComponent} from './components/project-map/context-menu/actions/reload-node-action/reload-node-action.component'; +import {ResumeLinkActionComponent} from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component'; +import {ShowNodeActionComponent} from './components/project-map/context-menu/actions/show-node-action/show-node-action.component'; +import {StartCaptureOnStartedLinkActionComponent} from './components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component'; +import {StartCaptureActionComponent} from './components/project-map/context-menu/actions/start-capture/start-capture-action.component'; +import {StartNodeActionComponent} from './components/project-map/context-menu/actions/start-node-action/start-node-action.component'; +import {StopCaptureActionComponent} from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component'; +import {IsolateNodeActionComponent } from './components/project-map/context-menu/actions/isolate-node-action/isolate-node-action.component'; import { UnisolateNodeActionComponent } from './components/project-map/context-menu/actions/unisolate-node-action/unisolate-node-action.component'; -import { StopNodeActionComponent } from './components/project-map/context-menu/actions/stop-node-action/stop-node-action.component'; -import { SuspendLinkActionComponent } from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component'; -import { SuspendNodeActionComponent } from './components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component'; -import { ContextMenuComponent } from './components/project-map/context-menu/context-menu.component'; -import { ConfigDialogComponent } from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component'; -import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component'; -import { StyleEditorDialogComponent } from './components/project-map/drawings-editors/style-editor/style-editor.component'; -import { TextEditorDialogComponent } from './components/project-map/drawings-editors/text-editor/text-editor.component'; -import { HelpDialogComponent } from './components/project-map/help-dialog/help-dialog.component'; -import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer'; -import { ImportApplianceComponent } from './components/project-map/import-appliance/import-appliance.component'; -import { InfoDialogComponent } from './components/project-map/info-dialog/info-dialog.component'; -import { LogConsoleComponent } from './components/project-map/log-console/log-console.component'; -import { LogEventsDataSource } from './components/project-map/log-console/log-events-datasource'; -import { ApplianceInfoDialogComponent } from './components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component'; -import { NewTemplateDialogComponent } from './components/project-map/new-template-dialog/new-template-dialog.component'; -import { TemplateNameDialogComponent } from './components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component'; -import { ConfigEditorDialogComponent } from './components/project-map/node-editors/config-editor/config-editor.component'; -import { ConfiguratorDialogAtmSwitchComponent } from './components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component'; -import { ConfiguratorDialogCloudComponent } from './components/project-map/node-editors/configurator/cloud/configurator-cloud.component'; -import { ConfiguratorDialogDockerComponent } from './components/project-map/node-editors/configurator/docker/configurator-docker.component'; -import { ConfigureCustomAdaptersDialogComponent } from './components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component'; -import { EditNetworkConfigurationDialogComponent } from './components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component'; -import { ConfiguratorDialogEthernetSwitchComponent } from './components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component'; -import { ConfiguratorDialogEthernetHubComponent } from './components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component'; -import { ConfiguratorDialogIosComponent } from './components/project-map/node-editors/configurator/ios/configurator-ios.component'; -import { ConfiguratorDialogIouComponent } from './components/project-map/node-editors/configurator/iou/configurator-iou.component'; -import { ConfiguratorDialogNatComponent } from './components/project-map/node-editors/configurator/nat/configurator-nat.component'; -import { ConfiguratorDialogQemuComponent } from './components/project-map/node-editors/configurator/qemu/configurator-qemu.component'; -import { QemuImageCreatorComponent } from './components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component'; -import { ConfiguratorDialogSwitchComponent } from './components/project-map/node-editors/configurator/switch/configurator-switch.component'; -import { ConfiguratorDialogVirtualBoxComponent } from './components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component'; -import { ConfiguratorDialogVmwareComponent } from './components/project-map/node-editors/configurator/vmware/configurator-vmware.component'; -import { ConfiguratorDialogVpcsComponent } from './components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component'; -import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component'; -import { NodesMenuComponent } from './components/project-map/nodes-menu/nodes-menu.component'; -import { PacketFiltersDialogComponent } from './components/project-map/packet-capturing/packet-filters/packet-filters.component'; -import { StartCaptureDialogComponent } from './components/project-map/packet-capturing/start-capture/start-capture.component'; -import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component'; -import { ProjectMapComponent } from './components/project-map/project-map.component'; -import { ProjectReadmeComponent } from './components/project-map/project-readme/project-readme.component'; -import { ScreenshotDialogComponent } from './components/project-map/screenshot-dialog/screenshot-dialog.component'; -import { WebConsoleComponent } from './components/project-map/web-console/web-console.component'; -import { AddBlankProjectDialogComponent } from './components/projects/add-blank-project-dialog/add-blank-project-dialog.component'; -import { ChooseNameDialogComponent } from './components/projects/choose-name-dialog/choose-name-dialog.component'; -import { ConfirmationBottomSheetComponent } from './components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component'; -import { ConfirmationDialogComponent } from './components/projects/confirmation-dialog/confirmation-dialog.component'; -import { EditProjectDialogComponent } from './components/projects/edit-project-dialog/edit-project-dialog.component'; -import { ReadmeEditorComponent } from './components/projects/edit-project-dialog/readme-editor/readme-editor.component'; -import { ImportProjectDialogComponent } from './components/projects/import-project-dialog/import-project-dialog.component'; -import { ProjectNameValidator } from './components/projects/models/projectNameValidator'; -import { NavigationDialogComponent } from './components/projects/navigation-dialog/navigation-dialog.component'; -import { ProjectsComponent } from './components/projects/projects.component'; -import { SaveProjectDialogComponent } from './components/projects/save-project-dialog/save-project-dialog.component'; -import { AddServerDialogComponent } from './components/servers/add-server-dialog/add-server-dialog.component'; -import { ServerDiscoveryComponent } from './components/servers/server-discovery/server-discovery.component'; -import { ServersComponent } from './components/servers/servers.component'; -import { ConsoleComponent } from './components/settings/console/console.component'; -import { SettingsComponent } from './components/settings/settings.component'; -import { CreateSnapshotDialogComponent } from './components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component'; -import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component'; -import { SnapshotMenuItemComponent } from './components/snapshots/snapshot-menu-item/snapshot-menu-item.component'; -import { StatusChartComponent } from './components/system-status/status-chart/status-chart.component'; -import { StatusInfoComponent } from './components/system-status/status-info/status-info.component'; -import { SystemStatusComponent } from './components/system-status/system-status.component'; -import { TemplateListDialogComponent } from './components/template/template-list-dialog/template-list-dialog.component'; -import { TemplateComponent } from './components/template/template.component'; -import { TopologySummaryComponent } from './components/topology-summary/topology-summary.component'; -import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component'; -import { DataSourceFilter } from './filters/dataSourceFilter'; -import { AuthImageFilter } from './filters/authImageFilter'; -import { DateFilter } from './filters/dateFilter.pipe'; -import { NameFilter } from './filters/nameFilter.pipe'; -import { ProjectsFilter } from './filters/projectsFilter.pipe'; -import { SearchFilter } from './filters/searchFilter.pipe'; -import { TemplateFilter } from './filters/templateFilter.pipe'; -import { ConsoleGuard } from './guards/console-guard'; -import { LoginGuard } from './guards/login-guard'; -import { ProjectWebServiceHandler } from './handlers/project-web-service-handler'; -import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component'; -import { MATERIAL_IMPORTS } from './material.imports'; -import { ServerResolve } from './resolvers/server-resolve'; -import { ApplianceService } from './services/appliances.service'; -import { BuiltInTemplatesConfigurationService } from './services/built-in-templates-configuration.service'; -import { BuiltInTemplatesService } from './services/built-in-templates.service'; -import { ComputeService } from './services/compute.service'; -import { DockerConfigurationService } from './services/docker-configuration.service'; -import { DockerService } from './services/docker.service'; -import { DrawingService } from './services/drawing.service'; -import { ExternalSoftwareDefinitionService } from './services/external-software-definition.service'; -import { GoogleAnalyticsService } from './services/google-analytics.service'; -import { HttpServer, ServerErrorHandler } from './services/http-server.service'; -import { InfoService } from './services/info.service'; -import { InstalledSoftwareService } from './services/installed-software.service'; -import { IosConfigurationService } from './services/ios-configuration.service'; -import { IosService } from './services/ios.service'; -import { IouConfigurationService } from './services/iou-configuration.service'; -import { IouService } from './services/iou.service'; -import { LinkService } from './services/link.service'; -import { MapScaleService } from './services/mapScale.service'; -import { MapSettingsService } from './services/mapsettings.service'; -import { NodeService } from './services/node.service'; -import { NodeConsoleService } from './services/nodeConsole.service'; -import { NotificationService } from './services/notification.service'; -import { PacketCaptureService } from './services/packet-capture.service'; -import { PlatformService } from './services/platform.service'; -import { ProjectService } from './services/project.service'; -import { QemuConfigurationService } from './services/qemu-configuration.service'; -import { QemuService } from './services/qemu.service'; -import { RecentlyOpenedProjectService } from './services/recentlyOpenedProject.service'; -import { ServerManagementService } from './services/server-management.service'; -import { ServerSettingsService } from './services/server-settings.service'; -import { ServerDatabase } from './services/server.database'; -import { ServerService } from './services/server.service'; -import { SettingsService } from './services/settings.service'; -import { ConsoleService } from './services/settings/console.service'; -import { DefaultConsoleService } from './services/settings/default-console.service'; -import { SnapshotService } from './services/snapshot.service'; -import { SymbolService } from './services/symbol.service'; -import { TemplateMocksService } from './services/template-mocks.service'; -import { TemplateService } from './services/template.service'; -import { ThemeService } from './services/theme.service'; -import { ToasterService } from './services/toaster.service'; -import { ToolsService } from './services/tools.service'; -import { UpdatesService } from './services/updates.service'; -import { VersionService } from './services/version.service'; -import { VirtualBoxConfigurationService } from './services/virtual-box-configuration.service'; -import { VirtualBoxService } from './services/virtual-box.service'; -import { VmwareConfigurationService } from './services/vmware-configuration.service'; -import { VmwareService } from './services/vmware.service'; -import { VpcsConfigurationService } from './services/vpcs-configuration.service'; -import { VpcsService } from './services/vpcs.service'; -import { NonNegativeValidator } from './validators/non-negative-validator'; -import { RotationValidator } from './validators/rotation-validator'; -import { MarkedDirective } from './directives/marked.directive'; -import { LoginComponent } from './components/login/login.component'; -import { LoginService } from './services/login.service'; -import { HttpRequestsInterceptor } from './interceptors/http.interceptor'; -import { UserManagementComponent } from './components/user-management/user-management.component'; -import { UserService } from './services/user.service'; -import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; -import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component'; -import { UserFilterPipe } from './filters/user-filter.pipe'; -import { GroupManagementComponent } from './components/group-management/group-management.component'; -import { GroupFilterPipe } from './filters/group-filter.pipe'; -import { AddGroupDialogComponent } from './components/group-management/add-group-dialog/add-group-dialog.component'; -import { DeleteGroupDialogComponent } from './components/group-management/delete-group-dialog/delete-group-dialog.component'; -import { DeleteUserDialogComponent } from './components/user-management/delete-user-dialog/delete-user-dialog.component'; -import { GroupDetailsComponent } from './components/group-details/group-details.component'; -import { UserDetailComponent } from './components/user-management/user-detail/user-detail.component'; -import { AddUserToGroupDialogComponent } from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component'; -import { RemoveToGroupDialogComponent } from '@components/group-details/remove-to-group-dialog/remove-to-group-dialog.component'; -import { PaginatorPipe } from './components/group-details/paginator.pipe'; -import { MembersFilterPipe } from './components/group-details/members-filter.pipe'; -import { ManagementComponent } from './components/management/management.component'; +import {StopNodeActionComponent} from './components/project-map/context-menu/actions/stop-node-action/stop-node-action.component'; +import {SuspendLinkActionComponent} from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component'; +import {SuspendNodeActionComponent} from './components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component'; +import {ContextMenuComponent} from './components/project-map/context-menu/context-menu.component'; +import {ConfigDialogComponent} from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component'; +import {DrawLinkToolComponent} from './components/project-map/draw-link-tool/draw-link-tool.component'; +import {StyleEditorDialogComponent} from './components/project-map/drawings-editors/style-editor/style-editor.component'; +import {TextEditorDialogComponent} from './components/project-map/drawings-editors/text-editor/text-editor.component'; +import {HelpDialogComponent} from './components/project-map/help-dialog/help-dialog.component'; +import {NodeCreatedLabelStylesFixer} from './components/project-map/helpers/node-created-label-styles-fixer'; +import {ImportApplianceComponent} from './components/project-map/import-appliance/import-appliance.component'; +import {InfoDialogComponent} from './components/project-map/info-dialog/info-dialog.component'; +import {LogConsoleComponent} from './components/project-map/log-console/log-console.component'; +import {LogEventsDataSource} from './components/project-map/log-console/log-events-datasource'; +import {ApplianceInfoDialogComponent} from './components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component'; +import {NewTemplateDialogComponent} from './components/project-map/new-template-dialog/new-template-dialog.component'; +import {TemplateNameDialogComponent} from './components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component'; +import {ConfigEditorDialogComponent} from './components/project-map/node-editors/config-editor/config-editor.component'; +import {ConfiguratorDialogAtmSwitchComponent} from './components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component'; +import {ConfiguratorDialogCloudComponent} from './components/project-map/node-editors/configurator/cloud/configurator-cloud.component'; +import {ConfiguratorDialogDockerComponent} from './components/project-map/node-editors/configurator/docker/configurator-docker.component'; +import {ConfigureCustomAdaptersDialogComponent} from './components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component'; +import {EditNetworkConfigurationDialogComponent} from './components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component'; +import {ConfiguratorDialogEthernetSwitchComponent} from './components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component'; +import {ConfiguratorDialogEthernetHubComponent} from './components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component'; +import {ConfiguratorDialogIosComponent} from './components/project-map/node-editors/configurator/ios/configurator-ios.component'; +import {ConfiguratorDialogIouComponent} from './components/project-map/node-editors/configurator/iou/configurator-iou.component'; +import {ConfiguratorDialogNatComponent} from './components/project-map/node-editors/configurator/nat/configurator-nat.component'; +import {ConfiguratorDialogQemuComponent} from './components/project-map/node-editors/configurator/qemu/configurator-qemu.component'; +import {QemuImageCreatorComponent} from './components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component'; +import {ConfiguratorDialogSwitchComponent} from './components/project-map/node-editors/configurator/switch/configurator-switch.component'; +import {ConfiguratorDialogVirtualBoxComponent} from './components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component'; +import {ConfiguratorDialogVmwareComponent} from './components/project-map/node-editors/configurator/vmware/configurator-vmware.component'; +import {ConfiguratorDialogVpcsComponent} from './components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component'; +import {NodeSelectInterfaceComponent} from './components/project-map/node-select-interface/node-select-interface.component'; +import {NodesMenuComponent} from './components/project-map/nodes-menu/nodes-menu.component'; +import {PacketFiltersDialogComponent} from './components/project-map/packet-capturing/packet-filters/packet-filters.component'; +import {StartCaptureDialogComponent} from './components/project-map/packet-capturing/start-capture/start-capture.component'; +import {ProjectMapMenuComponent} from './components/project-map/project-map-menu/project-map-menu.component'; +import {ProjectMapComponent} from './components/project-map/project-map.component'; +import {ProjectReadmeComponent} from './components/project-map/project-readme/project-readme.component'; +import {ScreenshotDialogComponent} from './components/project-map/screenshot-dialog/screenshot-dialog.component'; +import {WebConsoleComponent} from './components/project-map/web-console/web-console.component'; +import {AddBlankProjectDialogComponent} from './components/projects/add-blank-project-dialog/add-blank-project-dialog.component'; +import {ChooseNameDialogComponent} from './components/projects/choose-name-dialog/choose-name-dialog.component'; +import {ConfirmationBottomSheetComponent} from './components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component'; +import {ConfirmationDialogComponent} from './components/projects/confirmation-dialog/confirmation-dialog.component'; +import {EditProjectDialogComponent} from './components/projects/edit-project-dialog/edit-project-dialog.component'; +import {ReadmeEditorComponent} from './components/projects/edit-project-dialog/readme-editor/readme-editor.component'; +import {ImportProjectDialogComponent} from './components/projects/import-project-dialog/import-project-dialog.component'; +import {ProjectNameValidator} from './components/projects/models/projectNameValidator'; +import {NavigationDialogComponent} from './components/projects/navigation-dialog/navigation-dialog.component'; +import {ProjectsComponent} from './components/projects/projects.component'; +import {SaveProjectDialogComponent} from './components/projects/save-project-dialog/save-project-dialog.component'; +import {AddServerDialogComponent} from './components/servers/add-server-dialog/add-server-dialog.component'; +import {ServerDiscoveryComponent} from './components/servers/server-discovery/server-discovery.component'; +import {ServersComponent} from './components/servers/servers.component'; +import {ConsoleComponent} from './components/settings/console/console.component'; +import {SettingsComponent} from './components/settings/settings.component'; +import {CreateSnapshotDialogComponent} from './components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component'; +import {ListOfSnapshotsComponent} from './components/snapshots/list-of-snapshots/list-of-snapshots.component'; +import {SnapshotMenuItemComponent} from './components/snapshots/snapshot-menu-item/snapshot-menu-item.component'; +import {StatusChartComponent} from './components/system-status/status-chart/status-chart.component'; +import {StatusInfoComponent} from './components/system-status/status-info/status-info.component'; +import {SystemStatusComponent} from './components/system-status/system-status.component'; +import {TemplateListDialogComponent} from './components/template/template-list-dialog/template-list-dialog.component'; +import {TemplateComponent} from './components/template/template.component'; +import {TopologySummaryComponent} from './components/topology-summary/topology-summary.component'; +import {WebConsoleFullWindowComponent} from './components/web-console-full-window/web-console-full-window.component'; +import {DataSourceFilter} from './filters/dataSourceFilter'; +import {AuthImageFilter} from './filters/authImageFilter'; +import {DateFilter} from './filters/dateFilter.pipe'; +import {NameFilter} from './filters/nameFilter.pipe'; +import {ProjectsFilter} from './filters/projectsFilter.pipe'; +import {SearchFilter} from './filters/searchFilter.pipe'; +import {TemplateFilter} from './filters/templateFilter.pipe'; +import {ConsoleGuard} from './guards/console-guard'; +import {LoginGuard} from './guards/login-guard'; +import {ProjectWebServiceHandler} from './handlers/project-web-service-handler'; +import {DefaultLayoutComponent} from './layouts/default-layout/default-layout.component'; +import {MATERIAL_IMPORTS} from './material.imports'; +import {ServerResolve} from './resolvers/server-resolve'; +import {ApplianceService} from './services/appliances.service'; +import {BuiltInTemplatesConfigurationService} from './services/built-in-templates-configuration.service'; +import {BuiltInTemplatesService} from './services/built-in-templates.service'; +import {ComputeService} from './services/compute.service'; +import {DockerConfigurationService} from './services/docker-configuration.service'; +import {DockerService} from './services/docker.service'; +import {DrawingService} from './services/drawing.service'; +import {ExternalSoftwareDefinitionService} from './services/external-software-definition.service'; +import {GoogleAnalyticsService} from './services/google-analytics.service'; +import {HttpServer, ServerErrorHandler} from './services/http-server.service'; +import {InfoService} from './services/info.service'; +import {InstalledSoftwareService} from './services/installed-software.service'; +import {IosConfigurationService} from './services/ios-configuration.service'; +import {IosService} from './services/ios.service'; +import {IouConfigurationService} from './services/iou-configuration.service'; +import {IouService} from './services/iou.service'; +import {LinkService} from './services/link.service'; +import {MapScaleService} from './services/mapScale.service'; +import {MapSettingsService} from './services/mapsettings.service'; +import {NodeService} from './services/node.service'; +import {NodeConsoleService} from './services/nodeConsole.service'; +import {NotificationService} from './services/notification.service'; +import {PacketCaptureService} from './services/packet-capture.service'; +import {PlatformService} from './services/platform.service'; +import {ProjectService} from './services/project.service'; +import {QemuConfigurationService} from './services/qemu-configuration.service'; +import {QemuService} from './services/qemu.service'; +import {RecentlyOpenedProjectService} from './services/recentlyOpenedProject.service'; +import {ServerManagementService} from './services/server-management.service'; +import {ServerSettingsService} from './services/server-settings.service'; +import {ServerDatabase} from './services/server.database'; +import {ServerService} from './services/server.service'; +import {SettingsService} from './services/settings.service'; +import {ConsoleService} from './services/settings/console.service'; +import {DefaultConsoleService} from './services/settings/default-console.service'; +import {SnapshotService} from './services/snapshot.service'; +import {SymbolService} from './services/symbol.service'; +import {TemplateMocksService} from './services/template-mocks.service'; +import {TemplateService} from './services/template.service'; +import {ThemeService} from './services/theme.service'; +import {ToasterService} from './services/toaster.service'; +import {ToolsService} from './services/tools.service'; +import {UpdatesService} from './services/updates.service'; +import {VersionService} from './services/version.service'; +import {VirtualBoxConfigurationService} from './services/virtual-box-configuration.service'; +import {VirtualBoxService} from './services/virtual-box.service'; +import {VmwareConfigurationService} from './services/vmware-configuration.service'; +import {VmwareService} from './services/vmware.service'; +import {VpcsConfigurationService} from './services/vpcs-configuration.service'; +import {VpcsService} from './services/vpcs.service'; +import {NonNegativeValidator} from './validators/non-negative-validator'; +import {RotationValidator} from './validators/rotation-validator'; +import {MarkedDirective} from './directives/marked.directive'; +import {LoginComponent} from './components/login/login.component'; +import {LoginService} from './services/login.service'; +import {HttpRequestsInterceptor} from './interceptors/http.interceptor'; +import {UserManagementComponent} from './components/user-management/user-management.component'; +import {UserService} from './services/user.service'; +import {LoggedUserComponent} from './components/users/logged-user/logged-user.component'; +import {AddUserDialogComponent} from './components/user-management/add-user-dialog/add-user-dialog.component'; +import {UserFilterPipe} from './filters/user-filter.pipe'; +import {GroupManagementComponent} from './components/group-management/group-management.component'; +import {GroupFilterPipe} from './filters/group-filter.pipe'; +import {AddGroupDialogComponent} from './components/group-management/add-group-dialog/add-group-dialog.component'; +import {DeleteGroupDialogComponent} from './components/group-management/delete-group-dialog/delete-group-dialog.component'; +import {DeleteUserDialogComponent} from './components/user-management/delete-user-dialog/delete-user-dialog.component'; +import {GroupDetailsComponent} from './components/group-details/group-details.component'; +import {UserDetailComponent} from './components/user-management/user-detail/user-detail.component'; +import {AddUserToGroupDialogComponent} from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component'; +import {RemoveToGroupDialogComponent} from '@components/group-details/remove-to-group-dialog/remove-to-group-dialog.component'; +import {PaginatorPipe} from './components/group-details/paginator.pipe'; +import {MembersFilterPipe} from './components/group-details/members-filter.pipe'; +import {ManagementComponent} from './components/management/management.component'; import {MatCheckboxModule} from "@angular/material/checkbox"; import { RoleManagementComponent } from './components/role-management/role-management.component'; import { RoleFilterPipe } from './components/role-management/role-filter.pipe'; @@ -300,6 +300,9 @@ import { PermissionEditorValidateDialogComponent } from './components/role-manag import { PermissionsManagementComponent } from './components/permissions-management/permissions-management.component'; import { PermissionEditLineComponent } from '@components/permissions-management/permission-edit-line/permission-edit-line.component'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; +import {MatAutocompleteModule} from "@angular/material/autocomplete"; +import {PathAutoCompleteComponent} from './components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component'; +import {FilterCompletePipe} from './components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe'; import { AddPermissionLineComponent } from './components/permissions-management/add-permission-line/add-permission-line.component'; import { MethodButtonComponent } from './components/permissions-management/method-button/method-button.component'; import { ActionButtonComponent } from './components/permissions-management/action-button/action-button.component'; @@ -523,7 +526,9 @@ import {MatFormFieldModule} from "@angular/material/form-field"; AddPermissionLineComponent, MethodButtonComponent, ActionButtonComponent, - DeletePermissionDialogComponent + DeletePermissionDialogComponent, + PathAutoCompleteComponent, + FilterCompletePipe ], imports: [ BrowserModule, @@ -537,21 +542,22 @@ import {MatFormFieldModule} from "@angular/material/form-field"; NgxElectronModule, FileUploadModule, MatSidenavModule, + MatFormFieldModule, ResizableModule, DragAndDropModule, DragDropModule, NgxChildProcessModule, - MatFormFieldModule, MATERIAL_IMPORTS, NgCircleProgressModule.forRoot(), OverlayModule, MatSlideToggleModule, MatCheckboxModule, + MatAutocompleteModule, ], providers: [ SettingsService, - { provide: ErrorHandler, useClass: ToasterErrorHandler }, - { provide: HTTP_INTERCEPTORS, useClass: HttpRequestsInterceptor, multi: true }, + {provide: ErrorHandler, useClass: ToasterErrorHandler}, + {provide: HTTP_INTERCEPTORS, useClass: HttpRequestsInterceptor, multi: true}, D3Service, VersionService, ProjectService, diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.html b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.html index 2a4a1032..219ebc2a 100644 --- a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.html +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.html @@ -1,19 +1,48 @@ - - Type - - {{type}} - - - - - - {{elt.name ? elt.name : elt.filename}} - - - - - +
+
+
+
+
+ +
+
+ +
+ +
+
+ + + +
+
+
+
+ + +
+
+
+ +
+ +
+ +
diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.scss b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.scss index e69de29b..aed624da 100644 --- a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.scss +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.scss @@ -0,0 +1,49 @@ +.box-border { + width: 100%; + margin-top: 20px; + border-bottom: 1px solid; +} + +.edit-mode { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +.information-box { + margin-left: 10px; + width: 100%; +} + +.information-box > div { + margin-bottom: 10px; +} + +.methods { + display: flex; + flex-direction: row; + align-items: center; +} + +.button-box { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.description { + width: 100%; + margin-left: 10px; + margin-right: 10px; +} + +.description > mat-form-field { + width: 100%; +} + +.not-edit { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; +} diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts index 1d4e58df..426e0b21 100644 --- a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts @@ -10,11 +10,12 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import {Component, Input, OnInit, Output} from '@angular/core'; -import {ProjectService} from "@services/project.service"; +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {Server} from "@models/server"; -import {ComputeService} from "@services/compute.service"; -import EventEmitter from "events"; +import {ApiInformationService} from "@services/api-information.service"; +import {Methods, Permission, PermissionActions} from "@models/api/permission"; +import {PermissionsService} from "@services/permissions.service"; +import {ToasterService} from "@services/toaster.service"; @Component({ selector: 'app-add-permission-line', @@ -23,51 +24,56 @@ import EventEmitter from "events"; }) export class AddPermissionLineComponent implements OnInit { - objectTypes = ['projects', 'images', 'templates', 'computes'] - elements = []; - selectedType = 'projects'; @Input() server: Server; + @Output() addPermissionEvent = new EventEmitter(); + permission: Permission = { + action: PermissionActions.ALLOW, + description: "", + methods: [], + path: "/", + }; + edit = false; - @Output() addPermissionEvent = new EventEmitter(); + constructor(public apiInformation: ApiInformationService, + private permissionService: PermissionsService, + private toasterService: ToasterService) { - constructor(private projectService: ProjectService, - private computeService: ComputeService) { } + } ngOnInit(): void { - this.projectService.list(this.server) - .subscribe(elts => { - this.elements = elts; - }) + } - changeType(value) { - console.log(value); - this.selectedType = value; - switch (this.selectedType) { - case 'projects': - this.projectService.list(this.server) - .subscribe(elts => { - this.elements = elts; - }) - break; - case 'computes': - this.computeService.getComputes(this.server) - .subscribe(elts => { - this.elements = elts; - }) - break; - default: - console.log("TODO"); - this.elements = []; + updateMethod(data: { name: Methods; enable: boolean }) { + const set = new Set(this.permission.methods); + if (data.enable) { + set.add(data.name); + } else { + set.delete(data.name); } + + this.permission.methods = Array.from(set); } - onSave() { - this.addPermissionEvent.emit('save'); + reset() { + this.permission = { + action: PermissionActions.ALLOW, + description: "", + methods: [], + path: "/", + }; + + this.edit = false; } - onCancel() { - this.addPermissionEvent.emit('cancel'); + save() { + this.permissionService.add(this.server, this.permission) + .subscribe(() => { + this.toasterService.success(`permission was created`); + this.reset(); + }, (error) => { + this.toasterService.error(error); + }); } } diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts new file mode 100644 index 00000000..29e9810f --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts @@ -0,0 +1,8 @@ +import { FilterCompletePipe } from './filter-complete.pipe'; + +describe('FilterCompletePipe', () => { + it('create an instance', () => { + const pipe = new FilterCompletePipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts new file mode 100644 index 00000000..94519809 --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts @@ -0,0 +1,17 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import {IFormatedList} from "@services/api-information.service"; + +@Pipe({ + name: 'filterComplete' +}) +export class FilterCompletePipe implements PipeTransform { + + transform(value: IFormatedList[], searchText: string): IFormatedList[] { + if (!searchText || searchText === '') { return value; } + + return value.filter((v) => { + return v.name.includes(searchText) || v.id.includes(searchText); + }); + } + +} diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.html b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.html new file mode 100644 index 00000000..dfae28fb --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.html @@ -0,0 +1,37 @@ +
+
Path: /
+
{{p}}/
+
+
+
+ + {{value}} + +
+
+ + + * + + {{data.name}} | + {{data.id}} + + +
+
+
+ cancel + add_circle_outline + check_circle +
+
+
diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.scss b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.scss new file mode 100644 index 00000000..2720f01e --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.scss @@ -0,0 +1,22 @@ +.path { + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +mat-select { + width: 150px; +} + +.edit-area { + border: 1px solid; +} + +.command-button { + margin-left: 5px; +} + +.path-edit-line { + display: flex; + flex-direction: row; +} diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.spec.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.spec.ts new file mode 100644 index 00000000..17452ee4 --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PathAutoCompleteComponent } from './path-auto-complete.component'; + +describe('PathAutoCompleteComponent', () => { + let component: PathAutoCompleteComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PathAutoCompleteComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PathAutoCompleteComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts new file mode 100644 index 00000000..5f9a8a2b --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts @@ -0,0 +1,74 @@ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {ApiInformationService, IFormatedList} from "@services/api-information.service"; +import {Server} from "@models/server"; + +@Component({ + selector: 'app-path-auto-complete', + templateUrl: './path-auto-complete.component.html', + styleUrls: ['./path-auto-complete.component.scss'] +}) +export class PathAutoCompleteComponent implements OnInit { + + + @Output() update = new EventEmitter(); + @Input() server: Server; + path: string[] = []; + values: string[] = []; + private completeData: IFormatedList[]; + public mode: 'SELECT' | 'COMPLETE' | undefined; + completeField: string; + + constructor(private apiInformationService: ApiInformationService) { + + } + + updatePath(value: string) { + this.path.push(value); + this.update.emit(`/${this.path.join('/')}`); + } + + popPath() { + this.path.pop(); + this.update.emit(`/${this.path.join('/')}`); + } + + ngOnInit(): void { + } + + getNext() { + this.apiInformationService + .getPathNextElement(this.path) + .subscribe((next: string[]) => { + this.values = next; + this.mode = 'SELECT'; + }); + } + + removePrevious() { + if (this.mode) { + return this.mode = undefined; + } + if (this.path.length > 0) { + return this.popPath(); + } + } + + valueChanged(value: string) { + if (value.match(this.apiInformationService.bracketIdRegex)) { + this.apiInformationService.getListByObjectId(this.server, value) + .subscribe((data) => { + this.mode = 'COMPLETE'; + this.completeData = data; + }); + + } else { + this.updatePath(value); + this.mode = undefined; + } + } + + validComplete() { + this.updatePath(this.completeField); + this.mode = undefined; + } +} diff --git a/src/app/components/permissions-management/permissions-management.component.html b/src/app/components/permissions-management/permissions-management.component.html index c8f4fd7a..07049b82 100644 --- a/src/app/components/permissions-management/permissions-management.component.html +++ b/src/app/components/permissions-management/permissions-management.component.html @@ -1,15 +1,13 @@
-
-
- -
+
+
-
- +
= new ReplaySubject(1); - constructor(private httpClient: HttpClient) { + private allowed = ['projects', 'images', 'templates', 'computes', 'symbols', 'notifications']; + private data: ReplaySubject = new ReplaySubject(1); + private objs: ReplaySubject = new ReplaySubject(1); + public readonly bracketIdRegex = new RegExp("\{(.*?)\}"); + public readonly finalBracketIdRegex = new RegExp("\{(.*?)\}$"); + + constructor(private httpClient: HttpClient, + private httpServer: HttpServer) { this.loadLocalInformation(); this.data.subscribe((data) => { localStorage.setItem('api-definition', JSON.stringify(data)); }); + this.objs.subscribe((data) => { + localStorage.setItem('api-definition-objs', JSON.stringify(data)); + }); + this.httpClient .get(`https://apiv3.gns3.net/openapi.json`) .subscribe((openapi: any) => { - const data = this.apiModelAdapter(openapi); + const objs = this.apiObjectModelAdapter(openapi); + const data = this.apiPathModelAdapter(openapi); this.data.next(data); + this.objs.next(objs); }); } - private apiModelAdapter(openapi: any): IPathDict[] { + private apiObjectModelAdapter(openapi: any): IApiObject[] { + function haveGetMethod(path: string): boolean { + const obj = openapi.paths[path]; + if (obj) { + const methods = Object.keys(obj); + return methods.includes("get"); + } else { + return false; + } + } + + function extractId(originalPath: string): IApiObject { + const d = originalPath.split('/'); + + const name = d.pop(); + const path = d.join('/'); + + return {name, path}; + } + + const keys = Object.keys(openapi.paths); + return keys + .filter((path: string) => path.match(this.finalBracketIdRegex)) + .filter(haveGetMethod) + .map(extractId) + .filter((object) => haveGetMethod(object.path)); + } + + private apiPathModelAdapter(openapi: any): IPathDict[] { const keys = Object.keys(openapi.paths); return keys .map(path => { const subPaths = path.split('/').filter(elem => !(elem === '' || elem === 'v3')); return {originalPath: path, path: subPaths.join('/'), subPaths}; }) + .filter(d => this.allowed.includes(d.subPaths[0])) .map(path => { //FIXME // @ts-ignore @@ -69,7 +127,6 @@ export class ApiInformationService { .pipe( map((data: IPathDict[]) => { const availableMethods = new Set(); - data.forEach((p: IPathDict) => { p.methods.forEach(method => availableMethods.add(method)); }); @@ -83,24 +140,24 @@ export class ApiInformationService { .asObservable() .pipe( map((data) => { + const splinted = path + .split('/') + .filter(elem => !(elem === '' || elem === 'v3')); - const splinted = path.split('/').filter(elem => !(elem === '' || elem === 'v3')); let remains = data; splinted.forEach((value, index) => { if (value === '*') { - return remains; + return; } - remains = remains.filter((val => { - if (!val.subPaths[index]) { - return false; - } - if (val.subPaths[index].includes('{')) { - return true; - } - return val.subPaths[index] === value; - })); - }); + let matchUrl = remains.filter(val => val.subPaths[index]?.includes(value)); + if (matchUrl.length === 0) { + matchUrl = remains.filter(val => val.subPaths[index]?.match(this.bracketIdRegex)); + } + + remains = matchUrl; + + }); return remains; }) ); @@ -111,5 +168,63 @@ export class ApiInformationService { if (data) { this.data.next(data); } + const obj = JSON.parse(localStorage.getItem('api-definition-objs')); + if (obj) { + this.objs.next(obj); + } + } + + getPathNextElement(path: string[]): Observable { + + return this.getPath(path.join('/')) + .pipe(map((paths: IPathDict[]) => { + const set = new Set(); + paths.forEach((p) => { + if (p.subPaths[path.length]) { + set.add(p.subPaths[path.length]); + } + }); + + return Array.from(set); + })); + } + + getListByObjectId(server: Server, value: string) { + + function findElement(data: IApiObject[]): IApiObject { + const elem = data.find(d => d.name === value); + if (!elem) { + throw new Error('entry not found'); + } + return elem; + } + + return this.objs.pipe( + map(findElement), + switchMap(elem => { + const url = `${server.protocol}//${server.host}:${server.port}${elem.path}`; + return this.httpClient.get(url, {headers: {Authorization: `Bearer ${server.authToken}`}}); + } + ), + map(response => { + + if (response.length === 0) { + return []; + } + + const keys = Object.keys(response[0]); + const idKey = keys.find(k => k.match(/_id$|filename/)); + const nameKey = keys.find(k => k.match(/name/)); + + return response.map(o => { + return { + id: o[idKey], + name: o[nameKey] + }; + }); + })); + } } + + From 0d5f11dfc118e51e8a2c23b4a2c2b053a3a7ef3d Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Wed, 19 Jan 2022 14:16:38 +0000 Subject: [PATCH 27/50] user details, Add/remove permissions --- src/app/app-routing.module.ts | 28 ++++++--- src/app/app.module.ts | 6 +- .../group-details.component.html | 4 +- .../permission-editor.component.html | 14 ----- .../permission-editor.component.ts | 55 +++++----------- .../role-permissions.component.html | 16 +++++ .../role-permissions.component.scss | 0 .../role-permissions.component.spec.ts | 25 ++++++++ .../role-permissions.component.ts | 56 +++++++++++++++++ .../user-detail/user-detail.component.html | 50 +++++++++++---- .../user-detail/user-detail.component.scss | 9 --- .../user-detail/user-detail.component.ts | 19 +++--- .../user-permissions.component.html | 16 +++++ .../user-permissions.component.scss | 0 .../user-permissions.component.spec.ts | 25 ++++++++ .../user-permissions.component.ts | 62 +++++++++++++++++++ .../resolvers/user-detail.resolver.spec.ts | 16 +++++ src/app/resolvers/user-detail.resolver.ts | 36 +++++++++++ .../resolvers/user-groups.resolver.spec.ts | 16 +++++ src/app/resolvers/user-groups.resolver.ts | 36 +++++++++++ .../user-permissions.resolver.spec.ts | 16 +++++ .../resolvers/user-permissions.resolver.ts | 36 +++++++++++ src/app/services/user.service.ts | 14 ++++- 23 files changed, 458 insertions(+), 97 deletions(-) create mode 100644 src/app/components/role-management/role-detail/role-permissions/role-permissions.component.html create mode 100644 src/app/components/role-management/role-detail/role-permissions/role-permissions.component.scss create mode 100644 src/app/components/role-management/role-detail/role-permissions/role-permissions.component.spec.ts create mode 100644 src/app/components/role-management/role-detail/role-permissions/role-permissions.component.ts create mode 100644 src/app/components/user-management/user-detail/user-permissions/user-permissions.component.html create mode 100644 src/app/components/user-management/user-detail/user-permissions/user-permissions.component.scss create mode 100644 src/app/components/user-management/user-detail/user-permissions/user-permissions.component.spec.ts create mode 100644 src/app/components/user-management/user-detail/user-permissions/user-permissions.component.ts create mode 100644 src/app/resolvers/user-detail.resolver.spec.ts create mode 100644 src/app/resolvers/user-detail.resolver.ts create mode 100644 src/app/resolvers/user-groups.resolver.spec.ts create mode 100644 src/app/resolvers/user-groups.resolver.ts create mode 100644 src/app/resolvers/user-permissions.resolver.spec.ts create mode 100644 src/app/resolvers/user-permissions.resolver.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b852cc6b..6ea67ee9 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -64,11 +64,15 @@ import {ManagementComponent} from "@components/management/management.component"; import {RoleManagementComponent} from "@components/role-management/role-management.component"; import {RoleDetailComponent} from "@components/role-management/role-detail/role-detail.component"; import {RoleDetailResolver} from "@resolvers/role-detail.resolver"; -import {PermissionEditorComponent} from "@components/role-management/role-detail/permission-editor/permission-editor.component"; import {PermissionResolver} from "@resolvers/permission.resolver"; -import {PermissionsManagementComponent} from "@components/permissions-management/permissions-management.component"; import {GroupResolver} from "@resolvers/group.resolver"; import {GroupRoleResolver} from "@resolvers/group-role.resolver"; +import {PermissionsManagementComponent} from "@components/permissions-management/permissions-management.component"; +import {UserDetailResolver} from "@resolvers/user-detail.resolver"; +import {UserGroupsResolver} from "@resolvers/user-groups.resolver"; +import {UserPermissionsResolver} from "@resolvers/user-permissions.resolver"; +import {RolePermissionsComponent} from "@components/role-management/role-detail/role-permissions/role-permissions.component"; +import {UserPermissionsComponent} from "@components/user-management/user-detail/user-permissions/user-permissions.component"; const routes: Routes = [ { @@ -93,7 +97,11 @@ const routes: Routes = [ path: 'server/:server_id/management/users/:user_id', component: UserDetailComponent, canActivate: [LoginGuard], - resolve: {server: ServerResolve}, + resolve: { + user: UserDetailResolver, + groups: UserGroupsResolver, + permissions: UserPermissionsResolver, + server: ServerResolve}, }, {path: 'installed-software', component: InstalledSoftwareComponent}, {path: 'server/:server_id/systemstatus', component: SystemStatusComponent, canActivate: [LoginGuard]}, @@ -266,7 +274,7 @@ const routes: Routes = [ }, { path: 'server/:server_id/management/roles/:role_id/permissions', - component: PermissionEditorComponent, + component: RolePermissionsComponent, resolve: { role: RoleDetailResolver, server: ServerResolve, @@ -274,10 +282,14 @@ const routes: Routes = [ } }, { - path: 'server/:server_id/permission_management', - component: PermissionsManagementComponent, - canActivate: [LoginGuard], - resolve: { server: ServerResolve }, + path: 'server/:server_id/management/users/:user_id/permissions', + component: UserPermissionsComponent, + resolve: { + user: UserDetailResolver, + userPermissions: UserPermissionsResolver, + server: ServerResolve, + permissions: PermissionResolver + } } ], }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4a8a6c31..6c4f19b9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -300,6 +300,8 @@ import { PermissionEditorValidateDialogComponent } from './components/role-manag import { PermissionsManagementComponent } from './components/permissions-management/permissions-management.component'; import { PermissionEditLineComponent } from '@components/permissions-management/permission-edit-line/permission-edit-line.component'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; +import { RolePermissionsComponent } from './components/role-management/role-detail/role-permissions/role-permissions.component'; +import { UserPermissionsComponent } from './components/user-management/user-detail/user-permissions/user-permissions.component'; import {MatAutocompleteModule} from "@angular/material/autocomplete"; import {PathAutoCompleteComponent} from './components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component'; import {FilterCompletePipe} from './components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe'; @@ -528,7 +530,9 @@ import {MatFormFieldModule} from "@angular/material/form-field"; ActionButtonComponent, DeletePermissionDialogComponent, PathAutoCompleteComponent, - FilterCompletePipe + FilterCompletePipe, + RolePermissionsComponent, + UserPermissionsComponent ], imports: [ BrowserModule, diff --git a/src/app/components/group-details/group-details.component.html b/src/app/components/group-details/group-details.component.html index 472d92e6..c8dfd913 100644 --- a/src/app/components/group-details/group-details.component.html +++ b/src/app/components/group-details/group-details.component.html @@ -3,10 +3,10 @@
- keyboard_arrow_left + keyboard_arrow_left

Groups {{group.name}} details

diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html index ecda97df..74499215 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html @@ -1,18 +1,4 @@
-
- -
- Edit {{role.name}} role permissions -
-
Allow: diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts index f5f0b45a..e4fcdfd9 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts @@ -10,16 +10,13 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import {Component, OnInit} from '@angular/core'; -import {ActivatedRoute, Router} from "@angular/router"; +import {Component, Inject, Input, OnInit, Output} from '@angular/core'; import {Role} from "@models/api/role"; import {Server} from "@models/server"; import {Permission} from "@models/api/permission"; import {MatDialog} from "@angular/material/dialog"; import {PermissionEditorValidateDialogComponent} from "@components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component"; -import {forkJoin, Observable} from "rxjs"; -import {RoleService} from "@services/role.service"; -import {ToasterService} from "@services/toaster.service"; +import { EventEmitter } from '@angular/core'; @Component({ selector: 'app-permission-editor', @@ -28,25 +25,18 @@ import {ToasterService} from "@services/toaster.service"; }) export class PermissionEditorComponent implements OnInit { server: Server; - role: Role; - private permissions: Permission[]; owned: Set; available: Set; - constructor(private route: ActivatedRoute, - private dialog: MatDialog, - private toastService: ToasterService, - private router: Router, - private roleService: RoleService) { - this.route.data.subscribe((data: { server: Server, role: Role, permissions: Permission[] }) => { - this.server = data.server; - this.role = data.role; - this.permissions = data.permissions; - this.reset(); - }); - } + @Input() ownedPermissions: Permission[]; + @Input() availablePermissions: Permission[]; + @Output() updatedPermissions: EventEmitter = new EventEmitter(); + + + constructor(private dialog: MatDialog) {} ngOnInit(): void { + this.reset(); } add(permission: Permission) { @@ -60,9 +50,9 @@ export class PermissionEditorComponent implements OnInit { } reset() { - const ownedPermissionId = this.role.permissions.map(p => p.permission_id); - this.owned = new Set(this.role.permissions); - this.available = new Set(this.permissions.filter(p => !ownedPermissionId.includes(p.permission_id))); + const ownedPermissionId = this.ownedPermissions.map(p => p.permission_id); + this.owned = new Set(this.ownedPermissions); + this.available = new Set(this.availablePermissions.filter(p => !ownedPermissionId.includes(p.permission_id))); } update() { @@ -73,22 +63,7 @@ export class PermissionEditorComponent implements OnInit { .afterClosed() .subscribe((confirmed: boolean) => { if (confirmed) { - const obs: Observable[] = []; - add.forEach((permission: Permission) => { - obs.push(this.roleService.addPermission(this.server, this.role, permission)); - }); - remove.forEach((permission: Permission) => { - obs.push(this.roleService.removePermission(this.server, this.role, permission)); - }); - - forkJoin(obs) - .subscribe(() => { - this.toastService.success(`permissions updated`); - this.router.navigate(['/server', this.server.id, 'management', 'roles', this.role.role_id]); - }, - (error) => { - this.toastService.error(error); - }); + this.updatedPermissions.emit({add, remove}); } }); @@ -97,7 +72,7 @@ export class PermissionEditorComponent implements OnInit { private diff() { const add: Permission[] = []; - const currentRolePermissionId = this.role.permissions.map(p => p.permission_id); + const currentRolePermissionId = this.ownedPermissions.map(p => p.permission_id); this.owned.forEach((permission: Permission) => { if (!currentRolePermissionId.includes(permission.permission_id)) { add.push(permission); @@ -105,7 +80,7 @@ export class PermissionEditorComponent implements OnInit { }); const remove: Permission[] = []; - this.role.permissions.forEach((permission: Permission) => { + this.ownedPermissions.forEach((permission: Permission) => { if (!this.owned.has(permission)) { remove.push(permission); } diff --git a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.html b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.html new file mode 100644 index 00000000..2305135e --- /dev/null +++ b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.html @@ -0,0 +1,16 @@ +
+ +
+ Edit {{role.name}} role permissions +
+
+ diff --git a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.scss b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.spec.ts b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.spec.ts new file mode 100644 index 00000000..13048bd7 --- /dev/null +++ b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RolePermissionsComponent } from './role-permissions.component'; + +describe('RolePermissionsComponent', () => { + let component: RolePermissionsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RolePermissionsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RolePermissionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.ts b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.ts new file mode 100644 index 00000000..0f335e3e --- /dev/null +++ b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.ts @@ -0,0 +1,56 @@ +import { Component, OnInit } from '@angular/core'; +import {ActivatedRoute, Router} from "@angular/router"; +import {MatDialog} from "@angular/material/dialog"; +import {ToasterService} from "@services/toaster.service"; +import {RoleService} from "@services/role.service"; +import {Server} from "@models/server"; +import {Role} from "@models/api/role"; +import {Permission} from "@models/api/permission"; +import {Observable} from "rxjs/Rx"; +import {forkJoin} from "rxjs"; + +@Component({ + selector: 'app-role-permissions', + templateUrl: './role-permissions.component.html', + styleUrls: ['./role-permissions.component.scss'] +}) +export class RolePermissionsComponent implements OnInit { + server: Server; + role: Role; + permissions: Permission[]; + + constructor(private route: ActivatedRoute, + private dialog: MatDialog, + private toastService: ToasterService, + private router: Router, + private roleService: RoleService) { + this.route.data.subscribe((data: { server: Server, role: Role, permissions: Permission[] }) => { + this.server = data.server; + this.role = data.role; + this.permissions = data.permissions; + }); + } + + ngOnInit(): void { + } + + updatePermissions(toUpdate) { + const {add, remove} = toUpdate; + const obs: Observable[] = []; + add.forEach((permission: Permission) => { + obs.push(this.roleService.addPermission(this.server, this.role, permission)); + }); + remove.forEach((permission: Permission) => { + obs.push(this.roleService.removePermission(this.server, this.role, permission)); + }); + + forkJoin(obs) + .subscribe(() => { + this.toastService.success(`permissions updated`); + this.router.navigate(['/server', this.server.id, 'management', 'roles', this.role.role_id]); + }, + (error) => { + this.toastService.error(error); + }); + } +} diff --git a/src/app/components/user-management/user-detail/user-detail.component.html b/src/app/components/user-management/user-detail/user-detail.component.html index 742c8836..51c89b97 100644 --- a/src/app/components/user-management/user-detail/user-detail.component.html +++ b/src/app/components/user-management/user-detail/user-detail.component.html @@ -12,9 +12,9 @@
-
-

Update user

-
+ + +
@@ -54,6 +54,9 @@ Is active +
+ Is Superadmin +
+
+
Creation date: {{user.created_at}}
+
Last update Date: {{user.updated_at}}
+
Last login: {{user.last_login}}
+
UUID: {{user.user_id}}
+
-
+ + +
+ +
+ + +
+ +
+ + + + -
-
Groups
- -
diff --git a/src/app/components/user-management/user-detail/user-detail.component.scss b/src/app/components/user-management/user-detail/user-detail.component.scss index a1d07ca9..a64b61ba 100644 --- a/src/app/components/user-management/user-detail/user-detail.component.scss +++ b/src/app/components/user-management/user-detail/user-detail.component.scss @@ -5,12 +5,3 @@ .button-div { float: right; } - -.user-edit , -.user-groups { - flex: 1; -} - -.default-content { - display: flex; -} diff --git a/src/app/components/user-management/user-detail/user-detail.component.ts b/src/app/components/user-management/user-detail/user-detail.component.ts index 9e206946..7f85b041 100644 --- a/src/app/components/user-management/user-detail/user-detail.component.ts +++ b/src/app/components/user-management/user-detail/user-detail.component.ts @@ -8,6 +8,8 @@ import {Server} from "@models/server"; import {userNameAsyncValidator} from "@components/user-management/add-user-dialog/userNameAsyncValidator"; import {userEmailAsyncValidator} from "@components/user-management/add-user-dialog/userEmailAsyncValidator"; import {ActivatedRoute, Router} from "@angular/router"; +import {Permission} from "@models/api/permission"; +import {Role} from "@models/api/role"; @Component({ selector: 'app-user-detail', @@ -21,6 +23,7 @@ export class UserDetailComponent implements OnInit { user: User; server: Server; user_id: string; + permissions: Permission[]; constructor(public userService: UserService, private toasterService: ToasterService, @@ -33,16 +36,14 @@ export class UserDetailComponent implements OnInit { this.server = this.route.snapshot.data['server']; if (!this.server) this.router.navigate(['/servers']); - this.user_id = this.route.snapshot.paramMap.get('user_id'); - this.userService.get(this.server, this.user_id).subscribe((user: User) => { - console.log(user) - this.user = user; - this.userService.getGroupsByUserId(this.server, this.user.user_id).subscribe( - (groups: Group[]) => { - this.groups = groups; - }); + this.route.data.subscribe((d: { server: Server; user: User, groups: Group[], permissions: Permission[]}) => { + this.user = d.user; + this.user_id = this.user.user_id; + this.groups = d.groups; + this.permissions = d.permissions; this.initForm(); - }) + }); + } initForm() { diff --git a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.html b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.html new file mode 100644 index 00000000..70cc860a --- /dev/null +++ b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.html @@ -0,0 +1,16 @@ +
+ +
+ Edit {{user.username}} role permissions +
+
+ diff --git a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.scss b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.spec.ts b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.spec.ts new file mode 100644 index 00000000..09a078d8 --- /dev/null +++ b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UserPermissionsComponent } from './user-permissions.component'; + +describe('UserPermissionsComponent', () => { + let component: UserPermissionsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ UserPermissionsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(UserPermissionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.ts b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.ts new file mode 100644 index 00000000..f717bd6a --- /dev/null +++ b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit } from '@angular/core'; +import {Server} from "@models/server"; +import {Role} from "@models/api/role"; +import {Permission} from "@models/api/permission"; +import {ActivatedRoute, Router} from "@angular/router"; +import {MatDialog} from "@angular/material/dialog"; +import {ToasterService} from "@services/toaster.service"; +import {RoleService} from "@services/role.service"; +import {forkJoin} from "rxjs"; +import {Observable} from "rxjs/Rx"; +import {UserService} from "@services/user.service"; +import {User} from "@models/users/user"; + +@Component({ + selector: 'app-user-permissions', + templateUrl: './user-permissions.component.html', + styleUrls: ['./user-permissions.component.scss'] +}) +export class UserPermissionsComponent implements OnInit { + + server: Server; + user: User; + userPermissions: Permission[]; + permissions: Permission[]; + + constructor(private route: ActivatedRoute, + private dialog: MatDialog, + private toastService: ToasterService, + private router: Router, + private userService: UserService) { + this.route.data.subscribe((data: { server: Server, user: User, userPermissions: Permission[], permissions: Permission[] }) => { + this.server = data.server; + this.user = data.user; + this.userPermissions = data.userPermissions; + this.permissions = data.permissions; + }); + } + + ngOnInit(): void { + } + + updatePermissions(toUpdate) { + const {add, remove} = toUpdate; + const obs: Observable[] = []; + add.forEach((permission: Permission) => { + obs.push(this.userService.addPermission(this.server, this.user.user_id, permission)); + }); + remove.forEach((permission: Permission) => { + obs.push(this.userService.removePermission(this.server, this.user.user_id, permission)); + }); + + forkJoin(obs) + .subscribe(() => { + this.toastService.success(`permissions updated`); + this.router.navigate(['/server', this.server.id, 'management', 'users', this.user.user_id]); + }, + (error) => { + this.toastService.error(error); + }); + } + +} diff --git a/src/app/resolvers/user-detail.resolver.spec.ts b/src/app/resolvers/user-detail.resolver.spec.ts new file mode 100644 index 00000000..752c4c05 --- /dev/null +++ b/src/app/resolvers/user-detail.resolver.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { UserDetailResolver } from './user-detail.resolver'; + +describe('UserDetailResolver', () => { + let resolver: UserDetailResolver; + + beforeEach(() => { + TestBed.configureTestingModule({}); + resolver = TestBed.inject(UserDetailResolver); + }); + + it('should be created', () => { + expect(resolver).toBeTruthy(); + }); +}); diff --git a/src/app/resolvers/user-detail.resolver.ts b/src/app/resolvers/user-detail.resolver.ts new file mode 100644 index 00000000..e464c28b --- /dev/null +++ b/src/app/resolvers/user-detail.resolver.ts @@ -0,0 +1,36 @@ +import { Injectable } from '@angular/core'; +import { + Router, Resolve, + RouterStateSnapshot, + ActivatedRouteSnapshot +} from '@angular/router'; +import {Observable, of, Subscriber} from 'rxjs'; +import {ServerService} from "@services/server.service"; +import {UserService} from "@services/user.service"; +import {User} from "@models/users/user"; +import {Server} from "@models/server"; + +@Injectable({ + providedIn: 'root' +}) +export class UserDetailResolver implements Resolve { + + constructor(private serverService: ServerService, + private userService: UserService) { + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + return new Observable((subscriber: Subscriber) => { + + const serverId = route.paramMap.get('server_id'); + const userId = route.paramMap.get('user_id'); + + this.serverService.get(+serverId).then((server: Server) => { + this.userService.get(server, userId).subscribe((user: User) => { + subscriber.next(user); + subscriber.complete(); + }); + }); + }); + } +} diff --git a/src/app/resolvers/user-groups.resolver.spec.ts b/src/app/resolvers/user-groups.resolver.spec.ts new file mode 100644 index 00000000..0a3d7140 --- /dev/null +++ b/src/app/resolvers/user-groups.resolver.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { UserGroupsResolver } from './user-groups.resolver'; + +describe('UserGroupsResolver', () => { + let resolver: UserGroupsResolver; + + beforeEach(() => { + TestBed.configureTestingModule({}); + resolver = TestBed.inject(UserGroupsResolver); + }); + + it('should be created', () => { + expect(resolver).toBeTruthy(); + }); +}); diff --git a/src/app/resolvers/user-groups.resolver.ts b/src/app/resolvers/user-groups.resolver.ts new file mode 100644 index 00000000..2aa66dcb --- /dev/null +++ b/src/app/resolvers/user-groups.resolver.ts @@ -0,0 +1,36 @@ +import { Injectable } from '@angular/core'; +import { + Router, Resolve, + RouterStateSnapshot, + ActivatedRouteSnapshot +} from '@angular/router'; +import {Observable, of, Subscriber} from 'rxjs'; +import {Group} from "../models/groups/group"; +import {User} from "../models/users/user"; +import {Server} from "../models/server"; +import {ServerService} from "../services/server.service"; +import {UserService} from "../services/user.service"; + +@Injectable({ + providedIn: 'root' +}) +export class UserGroupsResolver implements Resolve { + constructor(private serverService: ServerService, + private userService: UserService) { + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + return new Observable((subscriber: Subscriber) => { + + const serverId = route.paramMap.get('server_id'); + const userId = route.paramMap.get('user_id'); + + this.serverService.get(+serverId).then((server: Server) => { + this.userService.getGroupsByUserId(server, userId).subscribe((groups: Group[]) => { + subscriber.next(groups); + subscriber.complete(); + }); + }); + }); + } +} diff --git a/src/app/resolvers/user-permissions.resolver.spec.ts b/src/app/resolvers/user-permissions.resolver.spec.ts new file mode 100644 index 00000000..41856573 --- /dev/null +++ b/src/app/resolvers/user-permissions.resolver.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { UserPermissionsResolver } from './user-permissions.resolver'; + +describe('UserPermissionsResolver', () => { + let resolver: UserPermissionsResolver; + + beforeEach(() => { + TestBed.configureTestingModule({}); + resolver = TestBed.inject(UserPermissionsResolver); + }); + + it('should be created', () => { + expect(resolver).toBeTruthy(); + }); +}); diff --git a/src/app/resolvers/user-permissions.resolver.ts b/src/app/resolvers/user-permissions.resolver.ts new file mode 100644 index 00000000..4626af4b --- /dev/null +++ b/src/app/resolvers/user-permissions.resolver.ts @@ -0,0 +1,36 @@ +import { Injectable } from '@angular/core'; +import { + Router, Resolve, + RouterStateSnapshot, + ActivatedRouteSnapshot +} from '@angular/router'; +import {Observable, of, Subscriber} from 'rxjs'; +import {ServerService} from "../services/server.service"; +import {UserService} from "../services/user.service"; +import {Server} from "../models/server"; +import {Permission} from "../models/api/permission"; + +@Injectable({ + providedIn: 'root' +}) +export class UserPermissionsResolver implements Resolve { + + constructor(private serverService: ServerService, + private userService: UserService) { + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + return new Observable((subscriber: Subscriber) => { + + const serverId = route.paramMap.get('server_id'); + const userId = route.paramMap.get('user_id'); + + this.serverService.get(+serverId).then((server: Server) => { + this.userService.getPermissionsByUserId(server, userId).subscribe((permissions: Permission[]) => { + subscriber.next(permissions); + subscriber.complete(); + }); + }); + }); + } +} diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts index e0540d59..f367f238 100644 --- a/src/app/services/user.service.ts +++ b/src/app/services/user.service.ts @@ -3,8 +3,8 @@ import {Observable, Subject} from 'rxjs'; import { Server } from '../models/server'; import { HttpServer } from './http-server.service'; import { User } from '../models/users/user'; -import {Project} from "@models/project"; import {Group} from "@models/groups/group"; +import {Permission} from "@models/api/permission"; @Injectable() export class UserService { @@ -39,4 +39,16 @@ export class UserService { getGroupsByUserId(server: Server, user_id: string) { return this.httpServer.get(server, `/users/${user_id}/groups`); } + + getPermissionsByUserId(server: Server, user_id: string) { + return this.httpServer.get(server, `/users/${user_id}/permissions`); + } + + addPermission(server: Server, user_id: string, permission: Permission) { + return this.httpServer.put(server, `/users/${user_id}/permissions/${permission.permission_id}`, {}); + } + + removePermission(server: Server, user_id: string, permission: Permission) { + return this.httpServer.delete(server, `/users/${ user_id}/permissions/${permission.permission_id}`); + } } From 6a573110e84033452a04f78ee4e1a31399922d5f Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Tue, 25 Jan 2022 14:17:54 +0000 Subject: [PATCH 28/50] Permissions management, add paginator and filters --- src/app/app.module.ts | 9 +- .../group-details/paginator.pipe.ts | 8 +- .../group-management.component.html | 12 +-- .../filter-complete.pipe.ts | 12 +++ .../path-auto-complete.component.ts | 12 +++ .../permissions-filter.pipe.spec.ts | 8 ++ .../permissions-filter.pipe.ts | 32 +++++++ .../permissions-management.component.html | 32 ++++++- .../permissions-management.component.scss | 7 ++ .../permissions-management.component.ts | 39 ++++++-- .../permissions-type-filter.pipe.spec.ts | 8 ++ .../permissions-type-filter.pipe.ts | 32 +++++++ .../permission-editor.component.html | 2 +- .../role-permissions.component.ts | 12 +++ .../user-detail/user-detail.component.ts | 1 - src/app/resolvers/user-detail.resolver.ts | 12 +++ src/app/resolvers/user-groups.resolver.ts | 12 +++ .../resolvers/user-permissions.resolver.ts | 12 +++ src/app/services/api-information.service.ts | 92 +++++++++++++------ 19 files changed, 299 insertions(+), 55 deletions(-) create mode 100644 src/app/components/permissions-management/permissions-filter.pipe.spec.ts create mode 100644 src/app/components/permissions-management/permissions-filter.pipe.ts create mode 100644 src/app/components/permissions-management/permissions-type-filter.pipe.spec.ts create mode 100644 src/app/components/permissions-management/permissions-type-filter.pipe.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6c4f19b9..ff98ff72 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,4 @@ /* tslint:disable */ -/* tslint:disable:max-line-length */ import {DragDropModule} from '@angular/cdk/drag-drop'; import {OverlayModule} from '@angular/cdk/overlay'; import {CdkTableModule} from '@angular/cdk/table'; @@ -300,7 +299,6 @@ import { PermissionEditorValidateDialogComponent } from './components/role-manag import { PermissionsManagementComponent } from './components/permissions-management/permissions-management.component'; import { PermissionEditLineComponent } from '@components/permissions-management/permission-edit-line/permission-edit-line.component'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; -import { RolePermissionsComponent } from './components/role-management/role-detail/role-permissions/role-permissions.component'; import { UserPermissionsComponent } from './components/user-management/user-detail/user-permissions/user-permissions.component'; import {MatAutocompleteModule} from "@angular/material/autocomplete"; import {PathAutoCompleteComponent} from './components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component'; @@ -311,6 +309,8 @@ import { ActionButtonComponent } from './components/permissions-management/actio import { DeletePermissionDialogComponent } from './components/permissions-management/delete-permission-dialog/delete-permission-dialog.component'; import { AddRoleToGroupComponent } from './components/group-details/add-role-to-group/add-role-to-group.component'; import {MatFormFieldModule} from "@angular/material/form-field"; +import { PermissionsFilterPipe } from './components/permissions-management/permissions-filter.pipe'; +import { PermissionsTypeFilterPipe } from './components/permissions-management/permissions-type-filter.pipe'; @NgModule({ declarations: [ @@ -531,8 +531,9 @@ import {MatFormFieldModule} from "@angular/material/form-field"; DeletePermissionDialogComponent, PathAutoCompleteComponent, FilterCompletePipe, - RolePermissionsComponent, - UserPermissionsComponent + UserPermissionsComponent, + PermissionsFilterPipe, + PermissionsTypeFilterPipe ], imports: [ BrowserModule, diff --git a/src/app/components/group-details/paginator.pipe.ts b/src/app/components/group-details/paginator.pipe.ts index 86dba9f8..7bc69424 100644 --- a/src/app/components/group-details/paginator.pipe.ts +++ b/src/app/components/group-details/paginator.pipe.ts @@ -19,21 +19,21 @@ import {PageEvent} from "@angular/material/paginator"; }) export class PaginatorPipe implements PipeTransform { - transform(members: User[] | undefined, paginatorEvent: PageEvent | undefined): User[] { - if (!members) { + transform(elements: T[] | undefined, paginatorEvent: PageEvent | undefined): T[] { + if (!elements) { return []; } if (!paginatorEvent) { paginatorEvent = { - length: members.length, + length: elements.length, pageIndex: 0, pageSize: 5 }; } - return members.slice( + return elements.slice( paginatorEvent.pageIndex * paginatorEvent.pageSize, (paginatorEvent.pageIndex + 1) * paginatorEvent.pageSize); } diff --git a/src/app/components/group-management/group-management.component.html b/src/app/components/group-management/group-management.component.html index bff63406..43d54c66 100644 --- a/src/app/components/group-management/group-management.component.html +++ b/src/app/components/group-management/group-management.component.html @@ -21,23 +21,23 @@ - + + - + @@ -47,7 +47,7 @@ - + diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts index 94519809..d42c242f 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { Pipe, PipeTransform } from '@angular/core'; import {IFormatedList} from "@services/api-information.service"; diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts index 5f9a8a2b..7d5ef529 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {ApiInformationService, IFormatedList} from "@services/api-information.service"; import {Server} from "@models/server"; diff --git a/src/app/components/permissions-management/permissions-filter.pipe.spec.ts b/src/app/components/permissions-management/permissions-filter.pipe.spec.ts new file mode 100644 index 00000000..b73d1b5d --- /dev/null +++ b/src/app/components/permissions-management/permissions-filter.pipe.spec.ts @@ -0,0 +1,8 @@ +import { PermissionsFilterPipe } from './permissions-filter.pipe'; + +describe('PermissionsFilterPipe', () => { + it('create an instance', () => { + const pipe = new PermissionsFilterPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/permissions-filter.pipe.ts b/src/app/components/permissions-management/permissions-filter.pipe.ts new file mode 100644 index 00000000..71b4e75f --- /dev/null +++ b/src/app/components/permissions-management/permissions-filter.pipe.ts @@ -0,0 +1,32 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import { Pipe, PipeTransform } from '@angular/core'; +import {Permission} from "@models/api/permission"; + +@Pipe({ + name: 'permissionsFilter' +}) +export class PermissionsFilterPipe implements PipeTransform { + + transform(permissions: Permission[], filterText: string): Permission[] { + if (!permissions) { + return []; + } + if (filterText === undefined || filterText === null || filterText === '') { + return permissions; + } + + return permissions.filter((permissions: Permission) => permissions.path.toLowerCase().includes(filterText.toLowerCase())); + } + +} diff --git a/src/app/components/permissions-management/permissions-management.component.html b/src/app/components/permissions-management/permissions-management.component.html index 07049b82..05086799 100644 --- a/src/app/components/permissions-management/permissions-management.component.html +++ b/src/app/components/permissions-management/permissions-management.component.html @@ -5,14 +5,38 @@ (addPermissionEvent)="refresh()">
- - -
+ + + Filter : + + + All + {{elt.view}} + + + + + + {{option.name}} + + + +
+
diff --git a/src/app/components/permissions-management/permissions-management.component.scss b/src/app/components/permissions-management/permissions-management.component.scss index 72573ef6..f4a7bf80 100644 --- a/src/app/components/permissions-management/permissions-management.component.scss +++ b/src/app/components/permissions-management/permissions-management.component.scss @@ -28,3 +28,10 @@ border-bottom: 1px solid; align-items: center;*/ } + +.permission-filter { + border-bottom: 1px solid; + width : 200px; + margin: 5px; + border-bottom-color: #b0bec5; +} diff --git a/src/app/components/permissions-management/permissions-management.component.ts b/src/app/components/permissions-management/permissions-management.component.ts index d9b662d1..b7700e16 100644 --- a/src/app/components/permissions-management/permissions-management.component.ts +++ b/src/app/components/permissions-management/permissions-management.component.ts @@ -18,6 +18,8 @@ import {ProgressService} from "../../common/progress/progress.service"; import {Permission} from "@models/api/permission"; import {AddPermissionLineComponent} from "@components/permissions-management/add-permission-line/add-permission-line.component"; import {ServerService} from "@services/server.service"; +import {PageEvent} from "@angular/material/paginator"; +import {ApiInformationService, IFormatedList} from "@services/api-information.service"; @Component({ selector: 'app-permissions-management', @@ -29,6 +31,16 @@ export class PermissionsManagementComponent implements OnInit { permissions: Permission[]; addPermissionLineComp = AddPermissionLineComponent; newPermissionEdit = false; + searchPermissions: any; + pageEvent: PageEvent | undefined; + filteredOptions: IFormatedList[]; + options: string[] = []; + typeFilter: any; + typeValues = [ + {value: '{project_id}', view:'projects'}, + {value: '{image_path}', view:'images'}, + {value: '{template_id}', view:'templates'}, + {value: '{compute_id}', view:'computes'}] @ViewChild('dynamic', { read: ViewContainerRef @@ -39,11 +51,11 @@ export class PermissionsManagementComponent implements OnInit { private router: Router, private permissionService: PermissionsService, private progressService: ProgressService, - private serverService: ServerService) { } + private serverService: ServerService, + private apiInformationService: ApiInformationService) { } ngOnInit(): void { const serverId = this.route.parent.snapshot.paramMap.get('server_id'); - console.log(serverId); this.serverService.get(+serverId).then((server: Server) => { this.server = server; this.refresh(); @@ -62,15 +74,24 @@ export class PermissionsManagementComponent implements OnInit { ); } - addPermission() { - //const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.addPermissionLineComp); - //const component = this.viewContainerRef.createComponent(componentFactory); - //component.instance.server = this.server; - this.newPermissionEdit = true; + changeType(typeValue: any) { + if (typeValue.value.value.match(this.apiInformationService.bracketIdRegex)) { + this.apiInformationService.getListByObjectId(this.server, typeValue.value.value) + .subscribe((data) => { + this.filteredOptions = data; + }); + } else { + this.filteredOptions = this.apiInformationService.getIdByObjNameFromCache(''); + } } - updateList($event: any) { - this.newPermissionEdit = false; + displayFn(value): string { + return value && value.name ? value.name : ''; } + + changeAutocomplete(inputText) { + this.filteredOptions = this.apiInformationService.getIdByObjNameFromCache(inputText); + } + } diff --git a/src/app/components/permissions-management/permissions-type-filter.pipe.spec.ts b/src/app/components/permissions-management/permissions-type-filter.pipe.spec.ts new file mode 100644 index 00000000..da55bd74 --- /dev/null +++ b/src/app/components/permissions-management/permissions-type-filter.pipe.spec.ts @@ -0,0 +1,8 @@ +import { PermissionsTypeFilterPipe } from './permissions-type-filter.pipe'; + +describe('PermissionsTypeFilterPipe', () => { + it('create an instance', () => { + const pipe = new PermissionsTypeFilterPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/permissions-type-filter.pipe.ts b/src/app/components/permissions-management/permissions-type-filter.pipe.ts new file mode 100644 index 00000000..a5ce9fe0 --- /dev/null +++ b/src/app/components/permissions-management/permissions-type-filter.pipe.ts @@ -0,0 +1,32 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ +import { Pipe, PipeTransform } from '@angular/core'; +import {Permission} from "@models/api/permission"; + +@Pipe({ + name: 'permissionsTypeFilter' +}) +export class PermissionsTypeFilterPipe implements PipeTransform { + + transform(permissions: Permission[], filterTypeText: string): Permission[] { + if (!permissions) { + return []; + } + if (filterTypeText === undefined || filterTypeText === null || filterTypeText === '') { + return permissions; + } + + return permissions.filter((permissions: Permission) => permissions.path.toLowerCase().includes(filterTypeText.toLowerCase())); + } + +} diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html index 74499215..a6c53755 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html @@ -36,7 +36,7 @@
-
available
+
Available
{ - console.log("Done ", user) this.toasterService.success(`User ${user.username} updated`); }, (error) => { diff --git a/src/app/resolvers/user-detail.resolver.ts b/src/app/resolvers/user-detail.resolver.ts index e464c28b..5ea8b6dc 100644 --- a/src/app/resolvers/user-detail.resolver.ts +++ b/src/app/resolvers/user-detail.resolver.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { Injectable } from '@angular/core'; import { Router, Resolve, diff --git a/src/app/resolvers/user-groups.resolver.ts b/src/app/resolvers/user-groups.resolver.ts index 2aa66dcb..9a03ce64 100644 --- a/src/app/resolvers/user-groups.resolver.ts +++ b/src/app/resolvers/user-groups.resolver.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { Injectable } from '@angular/core'; import { Router, Resolve, diff --git a/src/app/resolvers/user-permissions.resolver.ts b/src/app/resolvers/user-permissions.resolver.ts index 4626af4b..5fd0000f 100644 --- a/src/app/resolvers/user-permissions.resolver.ts +++ b/src/app/resolvers/user-permissions.resolver.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import { Injectable } from '@angular/core'; import { Router, Resolve, diff --git a/src/app/services/api-information.service.ts b/src/app/services/api-information.service.ts index 47e232f5..24dc9096 100644 --- a/src/app/services/api-information.service.ts +++ b/src/app/services/api-information.service.ts @@ -12,8 +12,8 @@ */ import {Injectable} from '@angular/core'; import {HttpClient} from "@angular/common/http"; -import {Observable, ReplaySubject} from "rxjs"; -import {map, switchMap} from "rxjs/operators"; +import {Observable, of, ReplaySubject} from "rxjs"; +import {map, switchMap, take} from "rxjs/operators"; import {Methods} from "@models/api/permission"; import {HttpServer} from "@services/http-server.service"; import {Server} from "@models/server"; @@ -40,19 +40,22 @@ export interface IFormatedList { name?: string; } + @Injectable({ providedIn: 'root' }) export class ApiInformationService { + private cache_permissions: { [key: string]: IFormatedList; } = {}; private allowed = ['projects', 'images', 'templates', 'computes', 'symbols', 'notifications']; private data: ReplaySubject = new ReplaySubject(1); private objs: ReplaySubject = new ReplaySubject(1); - public readonly bracketIdRegex = new RegExp("\{(.*?)\}"); + public readonly bracketIdRegex = new RegExp("\{(.*?)\}", 'g'); + public readonly uuidRegex = new RegExp("[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"); public readonly finalBracketIdRegex = new RegExp("\{(.*?)\}$"); - constructor(private httpClient: HttpClient, - private httpServer: HttpServer) { + + constructor(private httpClient: HttpClient) { this.loadLocalInformation(); this.data.subscribe((data) => { @@ -143,7 +146,6 @@ export class ApiInformationService { const splinted = path .split('/') .filter(elem => !(elem === '' || elem === 'v3')); - let remains = data; splinted.forEach((value, index) => { if (value === '*') { @@ -154,9 +156,7 @@ export class ApiInformationService { if (matchUrl.length === 0) { matchUrl = remains.filter(val => val.subPaths[index]?.match(this.bracketIdRegex)); } - remains = matchUrl; - }); return remains; }) @@ -189,10 +189,25 @@ export class ApiInformationService { })); } - getListByObjectId(server: Server, value: string) { + getKeysForPath(path: string): Observable<{ key: string; value: string }[]> { + return this.getPath(path) + .pipe(map((paths: IPathDict[]) => { + const splinted = path + .split('/') + .filter(elem => !(elem === '' || elem === 'v3')); + return paths[0].subPaths.map((elem, index) => { + if (elem.match(this.bracketIdRegex)) { + return {key: elem, value: splinted[index]}; + } + }); + }), map((values) => { + return values.filter((v) => v !== undefined); + })); + } + getListByObjectId(server: Server, key: string, value?: string) { function findElement(data: IApiObject[]): IApiObject { - const elem = data.find(d => d.name === value); + const elem = data.find(d => d.name === key); if (!elem) { throw new Error('entry not found'); } @@ -202,28 +217,53 @@ export class ApiInformationService { return this.objs.pipe( map(findElement), switchMap(elem => { - const url = `${server.protocol}//${server.host}:${server.port}${elem.path}`; + let url = `${server.protocol}//${server.host}:${server.port}${elem.path}`; + if (value) { + url = `${url}/${value}`; + } return this.httpClient.get(url, {headers: {Authorization: `Bearer ${server.authToken}`}}); } ), - map(response => { + switchMap(response => { - if (response.length === 0) { - return []; + if (response instanceof Array) { + if (response.length === 0) { + return of([]); + } + const keys = Object.keys(response[0]); + const idKey = keys.find(k => k.match(/_id$|filename/)); + const nameKey = keys.find(k => k.match(/name/)); + response = response.map(o => { + return { + id: o[idKey], + name: o[nameKey] + }; + }); + response.forEach(elt => { + this.cache_permissions[elt.id] = elt; + }) + console.log('b', this.cache_permissions) + + return of(response); + } else { + const keys = Object.keys(response); + const idKey = keys.find(k => k.match(/_id$|filename/)); + const nameKey = keys.find(k => k.match(/name/)); + const ret = {id: response[idKey], name: response[nameKey]}; + this.cache_permissions[ret.id] = ret; + return of([ret]); } + }), take(1)); + } - const keys = Object.keys(response[0]); - const idKey = keys.find(k => k.match(/_id$|filename/)); - const nameKey = keys.find(k => k.match(/name/)); - - return response.map(o => { - return { - id: o[idKey], - name: o[nameKey] - }; - }); - })); - + getIdByObjNameFromCache(name: string): IFormatedList[] { + const ret: IFormatedList[] = []; + for (let [key, value] of Object.entries(this.cache_permissions)) { + if (value.name.includes(name)) { + ret.push(value); + } + } + return ret; } } From 707f5b6c7f9894b9933d3f620a36c02dd28fe2d2 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Fri, 21 Jan 2022 15:36:58 +0100 Subject: [PATCH 29/50] Permission object, display object name instead of uuid --- package.json | 2 +- src/app/app.module.ts | 582 +++++++++--------- .../add-permission-line.component.ts | 2 +- .../path-auto-complete/PermissionPath.ts | 44 ++ .../path-auto-complete/SubPath.ts | 6 + .../path-auto-complete.component.html | 14 +- .../path-auto-complete.component.ts | 39 +- .../display-path.pipe.spec.ts | 8 + .../display-path.pipe.ts | 42 ++ .../permission-edit-line.component.html | 4 +- .../permissions-management.component.html | 3 +- .../editable-permission.component.html | 2 +- .../editable-permission.component.ts | 4 +- .../permission-editor.component.html | 2 + .../role-detail/role-detail.component.html | 1 + src/app/services/api-information.service.ts | 19 +- src/app/services/permissions.service.ts | 5 +- 17 files changed, 454 insertions(+), 325 deletions(-) create mode 100644 src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.ts create mode 100644 src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts create mode 100644 src/app/components/permissions-management/display-path.pipe.spec.ts create mode 100644 src/app/components/permissions-management/display-path.pipe.ts diff --git a/package.json b/package.json index 10c9c06e..580718a4 100644 --- a/package.json +++ b/package.json @@ -135,4 +135,4 @@ ] }, "snyk": true -} \ No newline at end of file +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ff98ff72..ca7f756c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,292 +1,292 @@ /* tslint:disable */ -import {DragDropModule} from '@angular/cdk/drag-drop'; -import {OverlayModule} from '@angular/cdk/overlay'; -import {CdkTableModule} from '@angular/cdk/table'; -import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http'; -import {ErrorHandler, NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatSidenavModule} from '@angular/material/sidenav'; -import {BrowserModule, Title} from '@angular/platform-browser'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {DragAndDropModule} from 'angular-draggable-droppable'; -import {ResizableModule} from 'angular-resizable-element'; -import {D3Service} from 'd3-ng2-service'; -import {NgCircleProgressModule} from 'ng-circle-progress'; -import {FileUploadModule} from 'ng2-file-upload'; -import {NgxChildProcessModule} from 'ngx-childprocess'; -import {NgxElectronModule} from 'ngx-electron'; -import {AppRoutingModule} from './app-routing.module'; -import {AppComponent} from './app.component'; -import {CartographyModule} from './cartography/cartography.module'; -import {DrawingsDataSource} from './cartography/datasources/drawings-datasource'; -import {LinksDataSource} from './cartography/datasources/links-datasource'; -import {NodesDataSource} from './cartography/datasources/nodes-datasource'; -import {SymbolsDataSource} from './cartography/datasources/symbols-datasource'; -import {InRectangleHelper} from './cartography/helpers/in-rectangle-helper'; -import {SelectionManager} from './cartography/managers/selection-manager'; -import {ToasterErrorHandler} from './common/error-handlers/toaster-error-handler'; -import {ProgressDialogComponent} from './common/progress-dialog/progress-dialog.component'; -import {ProgressDialogService} from './common/progress-dialog/progress-dialog.service'; -import {ProgressComponent} from './common/progress/progress.component'; -import {ProgressService} from './common/progress/progress.service'; -import {AdbutlerComponent} from './components/adbutler/adbutler.component'; -import {BundledServerFinderComponent} from './components/bundled-server-finder/bundled-server-finder.component'; -import {InformationDialogComponent} from './components/dialogs/information-dialog.component'; -import {DirectLinkComponent} from './components/direct-link/direct-link.component'; -import {DrawingAddedComponent} from './components/drawings-listeners/drawing-added/drawing-added.component'; -import {DrawingDraggedComponent} from './components/drawings-listeners/drawing-dragged/drawing-dragged.component'; -import {DrawingResizedComponent} from './components/drawings-listeners/drawing-resized/drawing-resized.component'; -import {InterfaceLabelDraggedComponent} from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component'; -import {LinkCreatedComponent} from './components/drawings-listeners/link-created/link-created.component'; -import {NodeDraggedComponent} from './components/drawings-listeners/node-dragged/node-dragged.component'; -import {NodeLabelDraggedComponent} from './components/drawings-listeners/node-label-dragged/node-label-dragged.component'; -import {TextAddedComponent} from './components/drawings-listeners/text-added/text-added.component'; -import {TextEditedComponent} from './components/drawings-listeners/text-edited/text-edited.component'; -import {HelpComponent} from './components/help/help.component'; -import {InstallSoftwareComponent} from './components/installed-software/install-software/install-software.component'; -import {InstalledSoftwareComponent} from './components/installed-software/installed-software.component'; -import {PageNotFoundComponent} from './components/page-not-found/page-not-found.component'; -import {BuiltInPreferencesComponent} from './components/preferences/built-in/built-in-preferences.component'; -import {CloudNodesAddTemplateComponent} from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component'; -import {CloudNodesTemplateDetailsComponent} from './components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component'; -import {CloudNodesTemplatesComponent} from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component'; -import {EthernetHubsAddTemplateComponent} from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component'; -import {EthernetHubsTemplateDetailsComponent} from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component'; -import {EthernetHubsTemplatesComponent} from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component'; -import {EthernetSwitchesAddTemplateComponent} from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component'; -import {EthernetSwitchesTemplateDetailsComponent} from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component'; -import {EthernetSwitchesTemplatesComponent} from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component'; -import {CustomAdaptersTableComponent} from './components/preferences/common/custom-adapters-table/custom-adapters-table.component'; -import {CustomAdaptersComponent} from './components/preferences/common/custom-adapters/custom-adapters.component'; -import {DeleteConfirmationDialogComponent} from './components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component'; -import {DeleteTemplateComponent} from './components/preferences/common/delete-template-component/delete-template.component'; -import {EmptyTemplatesListComponent} from './components/preferences/common/empty-templates-list/empty-templates-list.component'; -import {PortsComponent} from './components/preferences/common/ports/ports.component'; -import {SymbolsMenuComponent} from './components/preferences/common/symbols-menu/symbols-menu.component'; -import {SymbolsComponent} from './components/preferences/common/symbols/symbols.component'; -import {UdpTunnelsComponent} from './components/preferences/common/udp-tunnels/udp-tunnels.component'; -import {AddDockerTemplateComponent} from './components/preferences/docker/add-docker-template/add-docker-template.component'; -import {CopyDockerTemplateComponent} from './components/preferences/docker/copy-docker-template/copy-docker-template.component'; -import {DockerTemplateDetailsComponent} from './components/preferences/docker/docker-template-details/docker-template-details.component'; -import {DockerTemplatesComponent} from './components/preferences/docker/docker-templates/docker-templates.component'; -import {AddIosTemplateComponent} from './components/preferences/dynamips/add-ios-template/add-ios-template.component'; -import {CopyIosTemplateComponent} from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component'; -import {DynamipsPreferencesComponent} from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component'; -import {IosTemplateDetailsComponent} from './components/preferences/dynamips/ios-template-details/ios-template-details.component'; -import {IosTemplatesComponent} from './components/preferences/dynamips/ios-templates/ios-templates.component'; -import {GeneralPreferencesComponent} from './components/preferences/general/general-preferences.component'; -import {AddIouTemplateComponent} from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component'; -import {CopyIouTemplateComponent} from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component'; -import {IouTemplateDetailsComponent} from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component'; -import {IouTemplatesComponent} from './components/preferences/ios-on-unix/iou-templates/iou-templates.component'; -import {PreferencesComponent} from './components/preferences/preferences.component'; -import {AddQemuVmTemplateComponent} from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component'; -import {CopyQemuVmTemplateComponent} from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component'; -import {QemuPreferencesComponent} from './components/preferences/qemu/qemu-preferences/qemu-preferences.component'; -import {QemuVmTemplateDetailsComponent} from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component'; -import {QemuVmTemplatesComponent} from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component'; -import {AddVirtualBoxTemplateComponent} from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component'; -import {VirtualBoxPreferencesComponent} from './components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component'; -import {VirtualBoxTemplateDetailsComponent} from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component'; -import {VirtualBoxTemplatesComponent} from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component'; -import {AddVmwareTemplateComponent} from './components/preferences/vmware/add-vmware-template/add-vmware-template.component'; -import {VmwarePreferencesComponent} from './components/preferences/vmware/vmware-preferences/vmware-preferences.component'; -import {VmwareTemplateDetailsComponent} from './components/preferences/vmware/vmware-template-details/vmware-template-details.component'; -import {VmwareTemplatesComponent} from './components/preferences/vmware/vmware-templates/vmware-templates.component'; -import {AddVpcsTemplateComponent} from './components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component'; -import {VpcsPreferencesComponent} from './components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component'; -import {VpcsTemplateDetailsComponent} from './components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component'; -import {VpcsTemplatesComponent} from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component'; -import {ChangeHostnameDialogComponent} from './components/project-map/change-hostname-dialog/change-hostname-dialog.component'; -import {ChangeSymbolDialogComponent} from './components/project-map/change-symbol-dialog/change-symbol-dialog.component'; -import {ConsoleWrapperComponent} from './components/project-map/console-wrapper/console-wrapper.component'; -import {ContextConsoleMenuComponent} from './components/project-map/context-console-menu/context-console-menu.component'; -import {AlignHorizontallyActionComponent} from './components/project-map/context-menu/actions/align-horizontally/align-horizontally.component'; -import {AlignVerticallyActionComponent} from './components/project-map/context-menu/actions/align_vertically/align-vertically.component'; -import {BringToFrontActionComponent} from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component'; -import {ChangeHostnameActionComponent} from './components/project-map/context-menu/actions/change-hostname/change-hostname-action.component'; -import {ChangeSymbolActionComponent} from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component'; -import {ConfigActionComponent} from './components/project-map/context-menu/actions/config-action/config-action.component'; -import {ConsoleDeviceActionBrowserComponent} from './components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component'; -import {ConsoleDeviceActionComponent} from './components/project-map/context-menu/actions/console-device-action/console-device-action.component'; -import {DeleteActionComponent} from './components/project-map/context-menu/actions/delete-action/delete-action.component'; -import {DuplicateActionComponent} from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component'; -import {EditConfigActionComponent} from './components/project-map/context-menu/actions/edit-config/edit-config-action.component'; -import {EditStyleActionComponent} from './components/project-map/context-menu/actions/edit-style-action/edit-style-action.component'; -import {EditTextActionComponent} from './components/project-map/context-menu/actions/edit-text-action/edit-text-action.component'; -import {ExportConfigActionComponent} from './components/project-map/context-menu/actions/export-config/export-config-action.component'; -import {HttpConsoleNewTabActionComponent} from './components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component'; -import {HttpConsoleActionComponent} from './components/project-map/context-menu/actions/http-console/http-console-action.component'; -import {ImportConfigActionComponent} from './components/project-map/context-menu/actions/import-config/import-config-action.component'; -import {LockActionComponent} from './components/project-map/context-menu/actions/lock-action/lock-action.component'; -import {MoveLayerDownActionComponent} from './components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component'; -import {MoveLayerUpActionComponent} from './components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component'; -import {OpenFileExplorerActionComponent} from './components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component'; -import {PacketFiltersActionComponent} from './components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component'; -import {ReloadNodeActionComponent} from './components/project-map/context-menu/actions/reload-node-action/reload-node-action.component'; -import {ResumeLinkActionComponent} from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component'; -import {ShowNodeActionComponent} from './components/project-map/context-menu/actions/show-node-action/show-node-action.component'; -import {StartCaptureOnStartedLinkActionComponent} from './components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component'; -import {StartCaptureActionComponent} from './components/project-map/context-menu/actions/start-capture/start-capture-action.component'; -import {StartNodeActionComponent} from './components/project-map/context-menu/actions/start-node-action/start-node-action.component'; -import {StopCaptureActionComponent} from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component'; -import {IsolateNodeActionComponent } from './components/project-map/context-menu/actions/isolate-node-action/isolate-node-action.component'; +import { DragDropModule } from '@angular/cdk/drag-drop'; +import { OverlayModule } from '@angular/cdk/overlay'; +import { CdkTableModule } from '@angular/cdk/table'; +import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; +import { ErrorHandler, NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { BrowserModule, Title } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { DragAndDropModule } from 'angular-draggable-droppable'; +import { ResizableModule } from 'angular-resizable-element'; +import { D3Service } from 'd3-ng2-service'; +import { NgCircleProgressModule } from 'ng-circle-progress'; +import { FileUploadModule } from 'ng2-file-upload'; +import { NgxChildProcessModule } from 'ngx-childprocess'; +import { NgxElectronModule } from 'ngx-electron'; +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { CartographyModule } from './cartography/cartography.module'; +import { DrawingsDataSource } from './cartography/datasources/drawings-datasource'; +import { LinksDataSource } from './cartography/datasources/links-datasource'; +import { NodesDataSource } from './cartography/datasources/nodes-datasource'; +import { SymbolsDataSource } from './cartography/datasources/symbols-datasource'; +import { InRectangleHelper } from './cartography/helpers/in-rectangle-helper'; +import { SelectionManager } from './cartography/managers/selection-manager'; +import { ToasterErrorHandler } from './common/error-handlers/toaster-error-handler'; +import { ProgressDialogComponent } from './common/progress-dialog/progress-dialog.component'; +import { ProgressDialogService } from './common/progress-dialog/progress-dialog.service'; +import { ProgressComponent } from './common/progress/progress.component'; +import { ProgressService } from './common/progress/progress.service'; +import { AdbutlerComponent } from './components/adbutler/adbutler.component'; +import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component'; +import { InformationDialogComponent } from './components/dialogs/information-dialog.component'; +import { DirectLinkComponent } from './components/direct-link/direct-link.component'; +import { DrawingAddedComponent } from './components/drawings-listeners/drawing-added/drawing-added.component'; +import { DrawingDraggedComponent } from './components/drawings-listeners/drawing-dragged/drawing-dragged.component'; +import { DrawingResizedComponent } from './components/drawings-listeners/drawing-resized/drawing-resized.component'; +import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component'; +import { LinkCreatedComponent } from './components/drawings-listeners/link-created/link-created.component'; +import { NodeDraggedComponent } from './components/drawings-listeners/node-dragged/node-dragged.component'; +import { NodeLabelDraggedComponent } from './components/drawings-listeners/node-label-dragged/node-label-dragged.component'; +import { TextAddedComponent } from './components/drawings-listeners/text-added/text-added.component'; +import { TextEditedComponent } from './components/drawings-listeners/text-edited/text-edited.component'; +import { HelpComponent } from './components/help/help.component'; +import { InstallSoftwareComponent } from './components/installed-software/install-software/install-software.component'; +import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component'; +import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'; +import { BuiltInPreferencesComponent } from './components/preferences/built-in/built-in-preferences.component'; +import { CloudNodesAddTemplateComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component'; +import { CloudNodesTemplateDetailsComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component'; +import { CloudNodesTemplatesComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component'; +import { EthernetHubsAddTemplateComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component'; +import { EthernetHubsTemplateDetailsComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component'; +import { EthernetHubsTemplatesComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component'; +import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component'; +import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component'; +import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component'; +import { CustomAdaptersTableComponent } from './components/preferences/common/custom-adapters-table/custom-adapters-table.component'; +import { CustomAdaptersComponent } from './components/preferences/common/custom-adapters/custom-adapters.component'; +import { DeleteConfirmationDialogComponent } from './components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component'; +import { DeleteTemplateComponent } from './components/preferences/common/delete-template-component/delete-template.component'; +import { EmptyTemplatesListComponent } from './components/preferences/common/empty-templates-list/empty-templates-list.component'; +import { PortsComponent } from './components/preferences/common/ports/ports.component'; +import { SymbolsMenuComponent } from './components/preferences/common/symbols-menu/symbols-menu.component'; +import { SymbolsComponent } from './components/preferences/common/symbols/symbols.component'; +import { UdpTunnelsComponent } from './components/preferences/common/udp-tunnels/udp-tunnels.component'; +import { AddDockerTemplateComponent } from './components/preferences/docker/add-docker-template/add-docker-template.component'; +import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component'; +import { DockerTemplateDetailsComponent } from './components/preferences/docker/docker-template-details/docker-template-details.component'; +import { DockerTemplatesComponent } from './components/preferences/docker/docker-templates/docker-templates.component'; +import { AddIosTemplateComponent } from './components/preferences/dynamips/add-ios-template/add-ios-template.component'; +import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component'; +import { DynamipsPreferencesComponent } from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component'; +import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component'; +import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component'; +import { GeneralPreferencesComponent } from './components/preferences/general/general-preferences.component'; +import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component'; +import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component'; +import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component'; +import { IouTemplatesComponent } from './components/preferences/ios-on-unix/iou-templates/iou-templates.component'; +import { PreferencesComponent } from './components/preferences/preferences.component'; +import { AddQemuVmTemplateComponent } from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component'; +import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component'; +import { QemuPreferencesComponent } from './components/preferences/qemu/qemu-preferences/qemu-preferences.component'; +import { QemuVmTemplateDetailsComponent } from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component'; +import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component'; +import { AddVirtualBoxTemplateComponent } from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component'; +import { VirtualBoxPreferencesComponent } from './components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component'; +import { VirtualBoxTemplateDetailsComponent } from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component'; +import { VirtualBoxTemplatesComponent } from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component'; +import { AddVmwareTemplateComponent } from './components/preferences/vmware/add-vmware-template/add-vmware-template.component'; +import { VmwarePreferencesComponent } from './components/preferences/vmware/vmware-preferences/vmware-preferences.component'; +import { VmwareTemplateDetailsComponent } from './components/preferences/vmware/vmware-template-details/vmware-template-details.component'; +import { VmwareTemplatesComponent } from './components/preferences/vmware/vmware-templates/vmware-templates.component'; +import { AddVpcsTemplateComponent } from './components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component'; +import { VpcsPreferencesComponent } from './components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component'; +import { VpcsTemplateDetailsComponent } from './components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component'; +import { VpcsTemplatesComponent } from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component'; +import { ChangeHostnameDialogComponent } from './components/project-map/change-hostname-dialog/change-hostname-dialog.component'; +import { ChangeSymbolDialogComponent } from './components/project-map/change-symbol-dialog/change-symbol-dialog.component'; +import { ConsoleWrapperComponent } from './components/project-map/console-wrapper/console-wrapper.component'; +import { ContextConsoleMenuComponent } from './components/project-map/context-console-menu/context-console-menu.component'; +import { AlignHorizontallyActionComponent } from './components/project-map/context-menu/actions/align-horizontally/align-horizontally.component'; +import { AlignVerticallyActionComponent } from './components/project-map/context-menu/actions/align_vertically/align-vertically.component'; +import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component'; +import { ChangeHostnameActionComponent } from './components/project-map/context-menu/actions/change-hostname/change-hostname-action.component'; +import { ChangeSymbolActionComponent } from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component'; +import { ConfigActionComponent } from './components/project-map/context-menu/actions/config-action/config-action.component'; +import { ConsoleDeviceActionBrowserComponent } from './components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component'; +import { ConsoleDeviceActionComponent } from './components/project-map/context-menu/actions/console-device-action/console-device-action.component'; +import { DeleteActionComponent } from './components/project-map/context-menu/actions/delete-action/delete-action.component'; +import { DuplicateActionComponent } from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component'; +import { EditConfigActionComponent } from './components/project-map/context-menu/actions/edit-config/edit-config-action.component'; +import { EditStyleActionComponent } from './components/project-map/context-menu/actions/edit-style-action/edit-style-action.component'; +import { EditTextActionComponent } from './components/project-map/context-menu/actions/edit-text-action/edit-text-action.component'; +import { ExportConfigActionComponent } from './components/project-map/context-menu/actions/export-config/export-config-action.component'; +import { HttpConsoleNewTabActionComponent } from './components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component'; +import { HttpConsoleActionComponent } from './components/project-map/context-menu/actions/http-console/http-console-action.component'; +import { ImportConfigActionComponent } from './components/project-map/context-menu/actions/import-config/import-config-action.component'; +import { LockActionComponent } from './components/project-map/context-menu/actions/lock-action/lock-action.component'; +import { MoveLayerDownActionComponent } from './components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component'; +import { MoveLayerUpActionComponent } from './components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component'; +import { OpenFileExplorerActionComponent } from './components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component'; +import { PacketFiltersActionComponent } from './components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component'; +import { ReloadNodeActionComponent } from './components/project-map/context-menu/actions/reload-node-action/reload-node-action.component'; +import { ResumeLinkActionComponent } from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component'; +import { ShowNodeActionComponent } from './components/project-map/context-menu/actions/show-node-action/show-node-action.component'; +import { StartCaptureOnStartedLinkActionComponent } from './components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component'; +import { StartCaptureActionComponent } from './components/project-map/context-menu/actions/start-capture/start-capture-action.component'; +import { StartNodeActionComponent } from './components/project-map/context-menu/actions/start-node-action/start-node-action.component'; +import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component'; +import { IsolateNodeActionComponent } from './components/project-map/context-menu/actions/isolate-node-action/isolate-node-action.component'; import { UnisolateNodeActionComponent } from './components/project-map/context-menu/actions/unisolate-node-action/unisolate-node-action.component'; -import {StopNodeActionComponent} from './components/project-map/context-menu/actions/stop-node-action/stop-node-action.component'; -import {SuspendLinkActionComponent} from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component'; -import {SuspendNodeActionComponent} from './components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component'; -import {ContextMenuComponent} from './components/project-map/context-menu/context-menu.component'; -import {ConfigDialogComponent} from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component'; -import {DrawLinkToolComponent} from './components/project-map/draw-link-tool/draw-link-tool.component'; -import {StyleEditorDialogComponent} from './components/project-map/drawings-editors/style-editor/style-editor.component'; -import {TextEditorDialogComponent} from './components/project-map/drawings-editors/text-editor/text-editor.component'; -import {HelpDialogComponent} from './components/project-map/help-dialog/help-dialog.component'; -import {NodeCreatedLabelStylesFixer} from './components/project-map/helpers/node-created-label-styles-fixer'; -import {ImportApplianceComponent} from './components/project-map/import-appliance/import-appliance.component'; -import {InfoDialogComponent} from './components/project-map/info-dialog/info-dialog.component'; -import {LogConsoleComponent} from './components/project-map/log-console/log-console.component'; -import {LogEventsDataSource} from './components/project-map/log-console/log-events-datasource'; -import {ApplianceInfoDialogComponent} from './components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component'; -import {NewTemplateDialogComponent} from './components/project-map/new-template-dialog/new-template-dialog.component'; -import {TemplateNameDialogComponent} from './components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component'; -import {ConfigEditorDialogComponent} from './components/project-map/node-editors/config-editor/config-editor.component'; -import {ConfiguratorDialogAtmSwitchComponent} from './components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component'; -import {ConfiguratorDialogCloudComponent} from './components/project-map/node-editors/configurator/cloud/configurator-cloud.component'; -import {ConfiguratorDialogDockerComponent} from './components/project-map/node-editors/configurator/docker/configurator-docker.component'; -import {ConfigureCustomAdaptersDialogComponent} from './components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component'; -import {EditNetworkConfigurationDialogComponent} from './components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component'; -import {ConfiguratorDialogEthernetSwitchComponent} from './components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component'; -import {ConfiguratorDialogEthernetHubComponent} from './components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component'; -import {ConfiguratorDialogIosComponent} from './components/project-map/node-editors/configurator/ios/configurator-ios.component'; -import {ConfiguratorDialogIouComponent} from './components/project-map/node-editors/configurator/iou/configurator-iou.component'; -import {ConfiguratorDialogNatComponent} from './components/project-map/node-editors/configurator/nat/configurator-nat.component'; -import {ConfiguratorDialogQemuComponent} from './components/project-map/node-editors/configurator/qemu/configurator-qemu.component'; -import {QemuImageCreatorComponent} from './components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component'; -import {ConfiguratorDialogSwitchComponent} from './components/project-map/node-editors/configurator/switch/configurator-switch.component'; -import {ConfiguratorDialogVirtualBoxComponent} from './components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component'; -import {ConfiguratorDialogVmwareComponent} from './components/project-map/node-editors/configurator/vmware/configurator-vmware.component'; -import {ConfiguratorDialogVpcsComponent} from './components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component'; -import {NodeSelectInterfaceComponent} from './components/project-map/node-select-interface/node-select-interface.component'; -import {NodesMenuComponent} from './components/project-map/nodes-menu/nodes-menu.component'; -import {PacketFiltersDialogComponent} from './components/project-map/packet-capturing/packet-filters/packet-filters.component'; -import {StartCaptureDialogComponent} from './components/project-map/packet-capturing/start-capture/start-capture.component'; -import {ProjectMapMenuComponent} from './components/project-map/project-map-menu/project-map-menu.component'; -import {ProjectMapComponent} from './components/project-map/project-map.component'; -import {ProjectReadmeComponent} from './components/project-map/project-readme/project-readme.component'; -import {ScreenshotDialogComponent} from './components/project-map/screenshot-dialog/screenshot-dialog.component'; -import {WebConsoleComponent} from './components/project-map/web-console/web-console.component'; -import {AddBlankProjectDialogComponent} from './components/projects/add-blank-project-dialog/add-blank-project-dialog.component'; -import {ChooseNameDialogComponent} from './components/projects/choose-name-dialog/choose-name-dialog.component'; -import {ConfirmationBottomSheetComponent} from './components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component'; -import {ConfirmationDialogComponent} from './components/projects/confirmation-dialog/confirmation-dialog.component'; -import {EditProjectDialogComponent} from './components/projects/edit-project-dialog/edit-project-dialog.component'; -import {ReadmeEditorComponent} from './components/projects/edit-project-dialog/readme-editor/readme-editor.component'; -import {ImportProjectDialogComponent} from './components/projects/import-project-dialog/import-project-dialog.component'; -import {ProjectNameValidator} from './components/projects/models/projectNameValidator'; -import {NavigationDialogComponent} from './components/projects/navigation-dialog/navigation-dialog.component'; -import {ProjectsComponent} from './components/projects/projects.component'; -import {SaveProjectDialogComponent} from './components/projects/save-project-dialog/save-project-dialog.component'; -import {AddServerDialogComponent} from './components/servers/add-server-dialog/add-server-dialog.component'; -import {ServerDiscoveryComponent} from './components/servers/server-discovery/server-discovery.component'; -import {ServersComponent} from './components/servers/servers.component'; -import {ConsoleComponent} from './components/settings/console/console.component'; -import {SettingsComponent} from './components/settings/settings.component'; -import {CreateSnapshotDialogComponent} from './components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component'; -import {ListOfSnapshotsComponent} from './components/snapshots/list-of-snapshots/list-of-snapshots.component'; -import {SnapshotMenuItemComponent} from './components/snapshots/snapshot-menu-item/snapshot-menu-item.component'; -import {StatusChartComponent} from './components/system-status/status-chart/status-chart.component'; -import {StatusInfoComponent} from './components/system-status/status-info/status-info.component'; -import {SystemStatusComponent} from './components/system-status/system-status.component'; -import {TemplateListDialogComponent} from './components/template/template-list-dialog/template-list-dialog.component'; -import {TemplateComponent} from './components/template/template.component'; -import {TopologySummaryComponent} from './components/topology-summary/topology-summary.component'; -import {WebConsoleFullWindowComponent} from './components/web-console-full-window/web-console-full-window.component'; -import {DataSourceFilter} from './filters/dataSourceFilter'; -import {AuthImageFilter} from './filters/authImageFilter'; -import {DateFilter} from './filters/dateFilter.pipe'; -import {NameFilter} from './filters/nameFilter.pipe'; -import {ProjectsFilter} from './filters/projectsFilter.pipe'; -import {SearchFilter} from './filters/searchFilter.pipe'; -import {TemplateFilter} from './filters/templateFilter.pipe'; -import {ConsoleGuard} from './guards/console-guard'; -import {LoginGuard} from './guards/login-guard'; -import {ProjectWebServiceHandler} from './handlers/project-web-service-handler'; -import {DefaultLayoutComponent} from './layouts/default-layout/default-layout.component'; -import {MATERIAL_IMPORTS} from './material.imports'; -import {ServerResolve} from './resolvers/server-resolve'; -import {ApplianceService} from './services/appliances.service'; -import {BuiltInTemplatesConfigurationService} from './services/built-in-templates-configuration.service'; -import {BuiltInTemplatesService} from './services/built-in-templates.service'; -import {ComputeService} from './services/compute.service'; -import {DockerConfigurationService} from './services/docker-configuration.service'; -import {DockerService} from './services/docker.service'; -import {DrawingService} from './services/drawing.service'; -import {ExternalSoftwareDefinitionService} from './services/external-software-definition.service'; -import {GoogleAnalyticsService} from './services/google-analytics.service'; -import {HttpServer, ServerErrorHandler} from './services/http-server.service'; -import {InfoService} from './services/info.service'; -import {InstalledSoftwareService} from './services/installed-software.service'; -import {IosConfigurationService} from './services/ios-configuration.service'; -import {IosService} from './services/ios.service'; -import {IouConfigurationService} from './services/iou-configuration.service'; -import {IouService} from './services/iou.service'; -import {LinkService} from './services/link.service'; -import {MapScaleService} from './services/mapScale.service'; -import {MapSettingsService} from './services/mapsettings.service'; -import {NodeService} from './services/node.service'; -import {NodeConsoleService} from './services/nodeConsole.service'; -import {NotificationService} from './services/notification.service'; -import {PacketCaptureService} from './services/packet-capture.service'; -import {PlatformService} from './services/platform.service'; -import {ProjectService} from './services/project.service'; -import {QemuConfigurationService} from './services/qemu-configuration.service'; -import {QemuService} from './services/qemu.service'; -import {RecentlyOpenedProjectService} from './services/recentlyOpenedProject.service'; -import {ServerManagementService} from './services/server-management.service'; -import {ServerSettingsService} from './services/server-settings.service'; -import {ServerDatabase} from './services/server.database'; -import {ServerService} from './services/server.service'; -import {SettingsService} from './services/settings.service'; -import {ConsoleService} from './services/settings/console.service'; -import {DefaultConsoleService} from './services/settings/default-console.service'; -import {SnapshotService} from './services/snapshot.service'; -import {SymbolService} from './services/symbol.service'; -import {TemplateMocksService} from './services/template-mocks.service'; -import {TemplateService} from './services/template.service'; -import {ThemeService} from './services/theme.service'; -import {ToasterService} from './services/toaster.service'; -import {ToolsService} from './services/tools.service'; -import {UpdatesService} from './services/updates.service'; -import {VersionService} from './services/version.service'; -import {VirtualBoxConfigurationService} from './services/virtual-box-configuration.service'; -import {VirtualBoxService} from './services/virtual-box.service'; -import {VmwareConfigurationService} from './services/vmware-configuration.service'; -import {VmwareService} from './services/vmware.service'; -import {VpcsConfigurationService} from './services/vpcs-configuration.service'; -import {VpcsService} from './services/vpcs.service'; -import {NonNegativeValidator} from './validators/non-negative-validator'; -import {RotationValidator} from './validators/rotation-validator'; -import {MarkedDirective} from './directives/marked.directive'; -import {LoginComponent} from './components/login/login.component'; -import {LoginService} from './services/login.service'; -import {HttpRequestsInterceptor} from './interceptors/http.interceptor'; -import {UserManagementComponent} from './components/user-management/user-management.component'; -import {UserService} from './services/user.service'; -import {LoggedUserComponent} from './components/users/logged-user/logged-user.component'; -import {AddUserDialogComponent} from './components/user-management/add-user-dialog/add-user-dialog.component'; -import {UserFilterPipe} from './filters/user-filter.pipe'; -import {GroupManagementComponent} from './components/group-management/group-management.component'; -import {GroupFilterPipe} from './filters/group-filter.pipe'; -import {AddGroupDialogComponent} from './components/group-management/add-group-dialog/add-group-dialog.component'; -import {DeleteGroupDialogComponent} from './components/group-management/delete-group-dialog/delete-group-dialog.component'; -import {DeleteUserDialogComponent} from './components/user-management/delete-user-dialog/delete-user-dialog.component'; -import {GroupDetailsComponent} from './components/group-details/group-details.component'; -import {UserDetailComponent} from './components/user-management/user-detail/user-detail.component'; -import {AddUserToGroupDialogComponent} from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component'; -import {RemoveToGroupDialogComponent} from '@components/group-details/remove-to-group-dialog/remove-to-group-dialog.component'; -import {PaginatorPipe} from './components/group-details/paginator.pipe'; -import {MembersFilterPipe} from './components/group-details/members-filter.pipe'; -import {ManagementComponent} from './components/management/management.component'; +import {StopNodeActionComponent } from './components/project-map/context-menu/actions/stop-node-action/stop-node-action.component'; +import { SuspendLinkActionComponent } from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component'; +import { SuspendNodeActionComponent } from './components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component'; +import { ContextMenuComponent } from './components/project-map/context-menu/context-menu.component'; +import { ConfigDialogComponent } from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component'; +import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component'; +import { StyleEditorDialogComponent } from './components/project-map/drawings-editors/style-editor/style-editor.component'; +import { TextEditorDialogComponent } from './components/project-map/drawings-editors/text-editor/text-editor.component'; +import { HelpDialogComponent } from './components/project-map/help-dialog/help-dialog.component'; +import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer'; +import { ImportApplianceComponent } from './components/project-map/import-appliance/import-appliance.component'; +import { InfoDialogComponent } from './components/project-map/info-dialog/info-dialog.component'; +import { LogConsoleComponent } from './components/project-map/log-console/log-console.component'; +import { LogEventsDataSource } from './components/project-map/log-console/log-events-datasource'; +import { ApplianceInfoDialogComponent } from './components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component'; +import { NewTemplateDialogComponent } from './components/project-map/new-template-dialog/new-template-dialog.component'; +import { TemplateNameDialogComponent } from './components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component'; +import { ConfigEditorDialogComponent } from './components/project-map/node-editors/config-editor/config-editor.component'; +import { ConfiguratorDialogAtmSwitchComponent } from './components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component'; +import { ConfiguratorDialogCloudComponent } from './components/project-map/node-editors/configurator/cloud/configurator-cloud.component'; +import { ConfiguratorDialogDockerComponent } from './components/project-map/node-editors/configurator/docker/configurator-docker.component'; +import { ConfigureCustomAdaptersDialogComponent } from './components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component'; +import { EditNetworkConfigurationDialogComponent } from './components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component'; +import { ConfiguratorDialogEthernetSwitchComponent } from './components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component'; +import { ConfiguratorDialogEthernetHubComponent } from './components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component'; +import { ConfiguratorDialogIosComponent } from './components/project-map/node-editors/configurator/ios/configurator-ios.component'; +import { ConfiguratorDialogIouComponent } from './components/project-map/node-editors/configurator/iou/configurator-iou.component'; +import { ConfiguratorDialogNatComponent } from './components/project-map/node-editors/configurator/nat/configurator-nat.component'; +import { ConfiguratorDialogQemuComponent } from './components/project-map/node-editors/configurator/qemu/configurator-qemu.component'; +import { QemuImageCreatorComponent } from './components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component'; +import { ConfiguratorDialogSwitchComponent } from './components/project-map/node-editors/configurator/switch/configurator-switch.component'; +import { ConfiguratorDialogVirtualBoxComponent } from './components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component'; +import { ConfiguratorDialogVmwareComponent } from './components/project-map/node-editors/configurator/vmware/configurator-vmware.component'; +import { ConfiguratorDialogVpcsComponent } from './components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component'; +import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component'; +import { NodesMenuComponent } from './components/project-map/nodes-menu/nodes-menu.component'; +import { PacketFiltersDialogComponent } from './components/project-map/packet-capturing/packet-filters/packet-filters.component'; +import { StartCaptureDialogComponent } from './components/project-map/packet-capturing/start-capture/start-capture.component'; +import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component'; +import { ProjectMapComponent } from './components/project-map/project-map.component'; +import { ProjectReadmeComponent } from './components/project-map/project-readme/project-readme.component'; +import { ScreenshotDialogComponent } from './components/project-map/screenshot-dialog/screenshot-dialog.component'; +import { WebConsoleComponent } from './components/project-map/web-console/web-console.component'; +import { AddBlankProjectDialogComponent } from './components/projects/add-blank-project-dialog/add-blank-project-dialog.component'; +import { ChooseNameDialogComponent } from './components/projects/choose-name-dialog/choose-name-dialog.component'; +import { ConfirmationBottomSheetComponent } from './components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component'; +import { ConfirmationDialogComponent } from './components/projects/confirmation-dialog/confirmation-dialog.component'; +import { EditProjectDialogComponent } from './components/projects/edit-project-dialog/edit-project-dialog.component'; +import { ReadmeEditorComponent } from './components/projects/edit-project-dialog/readme-editor/readme-editor.component'; +import { ImportProjectDialogComponent } from './components/projects/import-project-dialog/import-project-dialog.component'; +import { ProjectNameValidator } from './components/projects/models/projectNameValidator'; +import { NavigationDialogComponent } from './components/projects/navigation-dialog/navigation-dialog.component'; +import { ProjectsComponent } from './components/projects/projects.component'; +import { SaveProjectDialogComponent } from './components/projects/save-project-dialog/save-project-dialog.component'; +import { AddServerDialogComponent } from './components/servers/add-server-dialog/add-server-dialog.component'; +import { ServerDiscoveryComponent } from './components/servers/server-discovery/server-discovery.component'; +import { ServersComponent } from './components/servers/servers.component'; +import { ConsoleComponent } from './components/settings/console/console.component'; +import { SettingsComponent } from './components/settings/settings.component'; +import { CreateSnapshotDialogComponent } from './components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component'; +import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component'; +import { SnapshotMenuItemComponent } from './components/snapshots/snapshot-menu-item/snapshot-menu-item.component'; +import { StatusChartComponent } from './components/system-status/status-chart/status-chart.component'; +import { StatusInfoComponent } from './components/system-status/status-info/status-info.component'; +import { SystemStatusComponent } from './components/system-status/system-status.component'; +import { TemplateListDialogComponent } from './components/template/template-list-dialog/template-list-dialog.component'; +import { TemplateComponent } from './components/template/template.component'; +import { TopologySummaryComponent } from './components/topology-summary/topology-summary.component'; +import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component'; +import { DataSourceFilter } from './filters/dataSourceFilter'; +import { AuthImageFilter } from './filters/authImageFilter'; +import { DateFilter } from './filters/dateFilter.pipe'; +import { NameFilter } from './filters/nameFilter.pipe'; +import { ProjectsFilter } from './filters/projectsFilter.pipe'; +import { SearchFilter } from './filters/searchFilter.pipe'; +import { TemplateFilter } from './filters/templateFilter.pipe'; +import { ConsoleGuard } from './guards/console-guard'; +import { LoginGuard } from './guards/login-guard'; +import { ProjectWebServiceHandler } from './handlers/project-web-service-handler'; +import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component'; +import { MATERIAL_IMPORTS } from './material.imports'; +import { ServerResolve } from './resolvers/server-resolve'; +import { ApplianceService } from './services/appliances.service'; +import { BuiltInTemplatesConfigurationService } from './services/built-in-templates-configuration.service'; +import { BuiltInTemplatesService } from './services/built-in-templates.service'; +import { ComputeService } from './services/compute.service'; +import { DockerConfigurationService } from './services/docker-configuration.service'; +import { DockerService } from './services/docker.service'; +import { DrawingService } from './services/drawing.service'; +import { ExternalSoftwareDefinitionService } from './services/external-software-definition.service'; +import { GoogleAnalyticsService } from './services/google-analytics.service'; +import { HttpServer, ServerErrorHandler } from './services/http-server.service'; +import { InfoService } from './services/info.service'; +import { InstalledSoftwareService } from './services/installed-software.service'; +import { IosConfigurationService } from './services/ios-configuration.service'; +import { IosService } from './services/ios.service'; +import { IouConfigurationService } from './services/iou-configuration.service'; +import { IouService } from './services/iou.service'; +import { LinkService } from './services/link.service'; +import { MapScaleService } from './services/mapScale.service'; +import { MapSettingsService } from './services/mapsettings.service'; +import { NodeService } from './services/node.service'; +import { NodeConsoleService } from './services/nodeConsole.service'; +import { NotificationService } from './services/notification.service'; +import { PacketCaptureService } from './services/packet-capture.service'; +import { PlatformService } from './services/platform.service'; +import { ProjectService } from './services/project.service'; +import { QemuConfigurationService } from './services/qemu-configuration.service'; +import { QemuService } from './services/qemu.service'; +import { RecentlyOpenedProjectService } from './services/recentlyOpenedProject.service'; +import { ServerManagementService } from './services/server-management.service'; +import { ServerSettingsService } from './services/server-settings.service'; +import { ServerDatabase } from './services/server.database'; +import { ServerService } from './services/server.service'; +import { SettingsService } from './services/settings.service'; +import { ConsoleService } from './services/settings/console.service'; +import { DefaultConsoleService } from './services/settings/default-console.service'; +import { SnapshotService } from './services/snapshot.service'; +import { SymbolService } from './services/symbol.service'; +import { TemplateMocksService } from './services/template-mocks.service'; +import { TemplateService } from './services/template.service'; +import { ThemeService } from './services/theme.service'; +import { ToasterService } from './services/toaster.service'; +import { ToolsService } from './services/tools.service'; +import { UpdatesService } from './services/updates.service'; +import { VersionService } from './services/version.service'; +import { VirtualBoxConfigurationService } from './services/virtual-box-configuration.service'; +import { VirtualBoxService } from './services/virtual-box.service'; +import { VmwareConfigurationService } from './services/vmware-configuration.service'; +import { VmwareService } from './services/vmware.service'; +import { VpcsConfigurationService } from './services/vpcs-configuration.service'; +import { VpcsService } from './services/vpcs.service'; +import { NonNegativeValidator } from './validators/non-negative-validator'; +import { RotationValidator } from './validators/rotation-validator'; +import { MarkedDirective } from './directives/marked.directive'; +import { LoginComponent } from './components/login/login.component'; +import { LoginService } from './services/login.service'; +import { HttpRequestsInterceptor } from './interceptors/http.interceptor'; +import { UserManagementComponent } from './components/user-management/user-management.component'; +import { UserService } from './services/user.service'; +import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; +import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component'; +import { UserFilterPipe } from './filters/user-filter.pipe'; +import { GroupManagementComponent } from './components/group-management/group-management.component'; +import { GroupFilterPipe } from './filters/group-filter.pipe'; +import { AddGroupDialogComponent } from './components/group-management/add-group-dialog/add-group-dialog.component'; +import { DeleteGroupDialogComponent } from './components/group-management/delete-group-dialog/delete-group-dialog.component'; +import { DeleteUserDialogComponent } from './components/user-management/delete-user-dialog/delete-user-dialog.component'; +import { GroupDetailsComponent } from './components/group-details/group-details.component'; +import { UserDetailComponent } from './components/user-management/user-detail/user-detail.component'; +import { AddUserToGroupDialogComponent } from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component'; +import { RemoveToGroupDialogComponent } from '@components/group-details/remove-to-group-dialog/remove-to-group-dialog.component'; +import { PaginatorPipe } from './components/group-details/paginator.pipe'; +import { MembersFilterPipe } from './components/group-details/members-filter.pipe'; +import { ManagementComponent } from './components/management/management.component'; import {MatCheckboxModule} from "@angular/material/checkbox"; import { RoleManagementComponent } from './components/role-management/role-management.component'; import { RoleFilterPipe } from './components/role-management/role-filter.pipe'; @@ -311,6 +311,7 @@ import { AddRoleToGroupComponent } from './components/group-details/add-role-to- import {MatFormFieldModule} from "@angular/material/form-field"; import { PermissionsFilterPipe } from './components/permissions-management/permissions-filter.pipe'; import { PermissionsTypeFilterPipe } from './components/permissions-management/permissions-type-filter.pipe'; +import { DisplayPathPipe } from './components/permissions-management/display-path.pipe'; @NgModule({ declarations: [ @@ -533,7 +534,9 @@ import { PermissionsTypeFilterPipe } from './components/permissions-management/p FilterCompletePipe, UserPermissionsComponent, PermissionsFilterPipe, - PermissionsTypeFilterPipe + PermissionsTypeFilterPipe, + FilterCompletePipe, + DisplayPathPipe ], imports: [ BrowserModule, @@ -685,5 +688,6 @@ import { PermissionsTypeFilterPipe } from './components/permissions-management/p bootstrap: [AppComponent], }) export class AppModule { - constructor(protected _googleAnalyticsService: GoogleAnalyticsService) {} + constructor(protected _googleAnalyticsService: GoogleAnalyticsService) { + } } diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts index 426e0b21..27c1b12d 100644 --- a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts @@ -30,7 +30,7 @@ export class AddPermissionLineComponent implements OnInit { action: PermissionActions.ALLOW, description: "", methods: [], - path: "/", + path: "/" }; edit = false; diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.ts new file mode 100644 index 00000000..9209d5a0 --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.ts @@ -0,0 +1,44 @@ +import {SubPath} from "./SubPath"; + +export class PermissionPath { + private subPath: SubPath[] = []; + + constructor() { + } + + add(subPath: SubPath) { + this.subPath.push(subPath); + } + + getDisplayPath() { + return this.subPath + .map((subPath) => subPath.displayValue); + } + + removeLast() { + this.subPath.pop(); + } + + getPath() { + return this.subPath.map((subPath) => subPath.value); + } + + isEmpty() { + return this.subPath.length === 0; + } + + getVariables(): { key: string; value: string }[] { + return this.subPath + .filter((path) => path.key) + .map((path) => { + return {key: path.key, value: path.value}; + }); + } + + + containStar() { + return this.subPath + .map(subPath => subPath.value === '*') + .reduce((previous, next) => previous || next, false); + } +} diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts new file mode 100644 index 00000000..d32eddad --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts @@ -0,0 +1,6 @@ +export class SubPath { + constructor(public value: string, + public displayValue: string, + public key?: string) { + } +} diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.html b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.html index dfae28fb..b4297c5e 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.html +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.html @@ -1,6 +1,6 @@
Path: /
-
{{p}}/
+
{{p}}/
@@ -17,21 +17,21 @@ [matAutocomplete]="auto"> * - - {{data.name}} | - {{data.id}} + + {{data.name}}
- cancel + cancel add_circle_outline check_circle + *ngIf="this.mode === 'COMPLETE'">check_circle +
diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts index 7d5ef529..8ef82aad 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts @@ -13,6 +13,8 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {ApiInformationService, IFormatedList} from "@services/api-information.service"; import {Server} from "@models/server"; +import {PermissionPath} from "@components/permissions-management/add-permission-line/path-auto-complete/PermissionPath"; +import {SubPath} from "@components/permissions-management/add-permission-line/path-auto-complete/SubPath"; @Component({ selector: 'app-path-auto-complete', @@ -24,9 +26,9 @@ export class PathAutoCompleteComponent implements OnInit { @Output() update = new EventEmitter(); @Input() server: Server; - path: string[] = []; + path: PermissionPath = new PermissionPath(); values: string[] = []; - private completeData: IFormatedList[]; + private completeData: { data: IFormatedList[]; key: string }; public mode: 'SELECT' | 'COMPLETE' | undefined; completeField: string; @@ -34,14 +36,14 @@ export class PathAutoCompleteComponent implements OnInit { } - updatePath(value: string) { - this.path.push(value); - this.update.emit(`/${this.path.join('/')}`); + updatePath(name: string, value: string, key?: string) { + this.path.add(new SubPath(name, value, key)); + this.update.emit('/' + this.path.getPath().join("/")); } popPath() { - this.path.pop(); - this.update.emit(`/${this.path.join('/')}`); + this.path.removeLast(); + this.update.emit('/' + this.path.getPath().join("/")); } ngOnInit(): void { @@ -49,8 +51,11 @@ export class PathAutoCompleteComponent implements OnInit { getNext() { this.apiInformationService - .getPathNextElement(this.path) + .getPathNextElement(this.path.getPath()) .subscribe((next: string[]) => { + if (this.path.containStar()) { + next = next.filter(item => !item.match(this.apiInformationService.bracketIdRegex)); + } this.values = next; this.mode = 'SELECT'; }); @@ -60,27 +65,33 @@ export class PathAutoCompleteComponent implements OnInit { if (this.mode) { return this.mode = undefined; } - if (this.path.length > 0) { + if (!this.path.isEmpty()) { return this.popPath(); } } valueChanged(value: string) { - if (value.match(this.apiInformationService.bracketIdRegex)) { - this.apiInformationService.getListByObjectId(this.server, value) + if (value.match(this.apiInformationService.bracketIdRegex) && !this.path.containStar()) { + this.apiInformationService.getListByObjectId(this.server, value, undefined, this.path.getVariables()) .subscribe((data) => { this.mode = 'COMPLETE'; - this.completeData = data; + this.completeData = {data, key: value}; }); } else { - this.updatePath(value); + this.updatePath(value, value); this.mode = undefined; } } validComplete() { - this.updatePath(this.completeField); + if (this.completeField === '*') { + this.updatePath('*', '*'); + } else { + const data = this.completeData.data.find((d) => this.completeField === d.name); + this.updatePath(data.id, data.name, this.completeData.key); + } this.mode = undefined; + this.completeField = undefined; } } diff --git a/src/app/components/permissions-management/display-path.pipe.spec.ts b/src/app/components/permissions-management/display-path.pipe.spec.ts new file mode 100644 index 00000000..033487fa --- /dev/null +++ b/src/app/components/permissions-management/display-path.pipe.spec.ts @@ -0,0 +1,8 @@ +import { DisplayPathPipe } from './display-path.pipe'; + +describe('DisplayPathPipe', () => { + it('create an instance', () => { + const pipe = new DisplayPathPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/components/permissions-management/display-path.pipe.ts b/src/app/components/permissions-management/display-path.pipe.ts new file mode 100644 index 00000000..ba509c4d --- /dev/null +++ b/src/app/components/permissions-management/display-path.pipe.ts @@ -0,0 +1,42 @@ +import {Pipe, PipeTransform} from '@angular/core'; +import {map, switchMap} from "rxjs/operators"; +import {forkJoin, Observable, of} from "rxjs"; +import {ApiInformationService} from "@services/api-information.service"; +import {Server} from "@models/server"; + +@Pipe({ + name: 'displayPath' +}) +export class DisplayPathPipe implements PipeTransform { + + constructor(private apiInformation: ApiInformationService) { + } + + transform(originalPath: string, server: Server): Observable { + if (!server) { + return of(originalPath); + } + return this.apiInformation + .getKeysForPath(originalPath) + .pipe(switchMap((values) => { + if (values.length === 0) { + return of([]); + } + const obs = values.map((k) => this.apiInformation.getListByObjectId(server, k.key, k.value, values)); + return forkJoin(obs); + }), + map((values: { id: string; name: string }[][]) => { + let displayPath = `${originalPath}`; + values.forEach((value) => { + if (value[0].id && value[0].name) { + displayPath = displayPath.replace(value[0].id, value[0].name); + } else { + } + + }); + return displayPath; + }) + ); + } + +} diff --git a/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.html b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.html index 5164b55b..72e78ae9 100644 --- a/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.html +++ b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.html @@ -18,9 +18,9 @@
- {{permission.path}} + {{permission.path | displayPath: server | async}}
diff --git a/src/app/components/permissions-management/permissions-management.component.html b/src/app/components/permissions-management/permissions-management.component.html index 05086799..5590aca2 100644 --- a/src/app/components/permissions-management/permissions-management.component.html +++ b/src/app/components/permissions-management/permissions-management.component.html @@ -32,7 +32,8 @@
{{permission.methods.join(",")}}
-
{{permission.path}}
+
{{permission.path | displayPath: server | async}}
diff --git a/src/app/services/api-information.service.ts b/src/app/services/api-information.service.ts index 24dc9096..d5b8030e 100644 --- a/src/app/services/api-information.service.ts +++ b/src/app/services/api-information.service.ts @@ -197,6 +197,7 @@ export class ApiInformationService { .filter(elem => !(elem === '' || elem === 'v3')); return paths[0].subPaths.map((elem, index) => { if (elem.match(this.bracketIdRegex)) { + return {key: elem, value: splinted[index]}; } }); @@ -205,7 +206,8 @@ export class ApiInformationService { })); } - getListByObjectId(server: Server, key: string, value?: string) { + getListByObjectId(server: Server, key: string, value?: string, extraParams?: { key: string; value: string }[]) { + const idName = /{([^)]+)}/.exec(key)[1]; function findElement(data: IApiObject[]): IApiObject { const elem = data.find(d => d.name === key); if (!elem) { @@ -218,9 +220,16 @@ export class ApiInformationService { map(findElement), switchMap(elem => { let url = `${server.protocol}//${server.host}:${server.port}${elem.path}`; + if (extraParams) { + extraParams.forEach((param) => { + url = url.replace(param.key, param.value); + }); + } + if (value) { url = `${url}/${value}`; } + return this.httpClient.get(url, {headers: {Authorization: `Bearer ${server.authToken}`}}); } ), @@ -235,21 +244,19 @@ export class ApiInformationService { const nameKey = keys.find(k => k.match(/name/)); response = response.map(o => { return { - id: o[idKey], + id: o[idName] || o[idKey], name: o[nameKey] }; }); response.forEach(elt => { this.cache_permissions[elt.id] = elt; - }) - console.log('b', this.cache_permissions) - + }); return of(response); } else { const keys = Object.keys(response); const idKey = keys.find(k => k.match(/_id$|filename/)); const nameKey = keys.find(k => k.match(/name/)); - const ret = {id: response[idKey], name: response[nameKey]}; + const ret = {id: response[idName] || response[idKey], name: response[nameKey]}; this.cache_permissions[ret.id] = ret; return of([ret]); } diff --git a/src/app/services/permissions.service.ts b/src/app/services/permissions.service.ts index fc0ead02..ef75c53c 100644 --- a/src/app/services/permissions.service.ts +++ b/src/app/services/permissions.service.ts @@ -10,7 +10,7 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; import {HttpServer} from "./http-server.service"; import {Server} from "../models/server"; import {Permission} from "../models/api/permission"; @@ -21,7 +21,8 @@ import {Observable} from "rxjs/Rx"; }) export class PermissionsService { - constructor(private httpServer: HttpServer) { } + constructor(private httpServer: HttpServer) { + } list(server: Server) { return this.httpServer.get(server, '/permissions'); From 7bff9b40de52204ad35dcd6a8fe4d023933a4452 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Thu, 3 Feb 2022 08:48:44 +0000 Subject: [PATCH 30/50] New group, add user to group functionality --- src/app/app.module.ts | 4 +- .../add-group-dialog.component.html | 45 +++++++++++- .../add-group-dialog.component.scss | 17 +++++ .../add-group-dialog.component.ts | 69 ++++++++++++++++++- .../group-management.component.ts | 15 ++-- .../path-auto-complete/PermissionPath.ts | 12 ++++ .../path-auto-complete/SubPath.ts | 12 ++++ .../display-path.pipe.ts | 12 ++++ 8 files changed, 172 insertions(+), 14 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ca7f756c..95d7cd43 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -312,6 +312,7 @@ import {MatFormFieldModule} from "@angular/material/form-field"; import { PermissionsFilterPipe } from './components/permissions-management/permissions-filter.pipe'; import { PermissionsTypeFilterPipe } from './components/permissions-management/permissions-type-filter.pipe'; import { DisplayPathPipe } from './components/permissions-management/display-path.pipe'; +import {RolePermissionsComponent} from "@components/role-management/role-detail/role-permissions/role-permissions.component"; @NgModule({ declarations: [ @@ -536,7 +537,8 @@ import { DisplayPathPipe } from './components/permissions-management/display-pat PermissionsFilterPipe, PermissionsTypeFilterPipe, FilterCompletePipe, - DisplayPathPipe + DisplayPathPipe, + RolePermissionsComponent ], imports: [ BrowserModule, diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html index bc1026c2..2985b8d0 100644 --- a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html @@ -19,10 +19,51 @@ >Group with this name exists -
+ + +
Add users to group:
+
+ + Search user + + +
+ +
+
+ Users available : +
+
+
{{user.username}}
+
{{user.email}}
+ add +
+
+
+ + + +
+ Users to add : +
+
+
{{user.username}}
+
{{user.email}}
+ delete +
+
+
+ + +
+ + + + +
- + diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss index 2fa952b3..3d3e85c1 100644 --- a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss @@ -5,3 +5,20 @@ .project-snackbar { background: #2196f3; } + +.userList { + display: flex; + margin: 10px; + justify-content: space-between; + flex: 1 1 auto +} + +.users { + display: flex; + height: 350px; + overflow: auto; +} + +.button-div { + float: right; +} diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts index c73e745e..8429e467 100644 --- a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts @@ -17,6 +17,11 @@ import {groupNameAsyncValidator} from "@components/group-management/add-group-di import {GroupNameValidator} from "@components/group-management/add-group-dialog/GroupNameValidator"; import {GroupService} from "../../../services/group.service"; import {Server} from "../../../models/server"; +import {BehaviorSubject, forkJoin, timer} from "rxjs"; +import {User} from "@models/users/user"; +import {UserService} from "@services/user.service"; +import {ToasterService} from "@services/toaster.service"; +import {PageEvent} from "@angular/material/paginator"; @Component({ selector: 'app-add-group-dialog', @@ -27,15 +32,26 @@ import {Server} from "../../../models/server"; export class AddGroupDialogComponent implements OnInit { groupNameForm: FormGroup; + server: Server; + + users: Set; + usersToAdd: Set = new Set([]); + + searchText: string; + loading = false; + constructor(private dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: { server: Server }, private formBuilder: FormBuilder, private groupNameValidator: GroupNameValidator, - private groupService: GroupService) { + private groupService: GroupService, + private userService: UserService, + private toasterService: ToasterService) { } ngOnInit(): void { + this.server = this.data.server; this.groupNameForm = this.formBuilder.group({ groupName: new FormControl( null, @@ -43,6 +59,7 @@ export class AddGroupDialogComponent implements OnInit { [groupNameAsyncValidator(this.data.server, this.groupService)] ), }); + this.getUsers(); } onKeyDown(event) { @@ -60,10 +77,58 @@ export class AddGroupDialogComponent implements OnInit { return; } const groupName = this.groupNameForm.controls['groupName'].value; - this.dialogRef.close(groupName); + const toAdd = Array.from(this.usersToAdd.values()); + + + this.groupService.addGroup(this.server, groupName) + .subscribe((group) => { + toAdd.forEach((user: User) => { + this.groupService.addMemberToGroup(this.server, group, user) + .subscribe(() => { + this.toasterService.success(`user ${user.username} was added`); + }, + (error) => { + this.toasterService.error(`An error occur while trying to add user ${user.username} to group ${groupName}`); + }) + }) + this.dialogRef.close(true); + }, (error) => { + this.toasterService.error(`An error occur while trying to create new group ${groupName}`); + this.dialogRef.close(false); + }); } onNoClick() { this.dialogRef.close(); } + + get toDisplay() { + return (user: User) => !this.searchText || user.username.includes(this.searchText) || user.email?.includes(this.searchText); + } + + getUsers() { + + this.userService.list(this.data.server) + .subscribe((users) => { + if (this.usersToAdd) { + users = users.filter((user: User) => { + return !this.usersToAdd.has(user); + }); + } + this.users = new Set(users); + + }); + + } + + addUser(user: User) { + this.usersToAdd.add(user); + this.users.delete(user); + } + + delUser(user: User) { + this.usersToAdd.delete(user); + this.users.add(user); + } + } diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index f4bd2cd1..8579587c 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -26,6 +26,8 @@ import {forkJoin} from "rxjs"; import {MatPaginator} from "@angular/material/paginator"; import {MatTableDataSource} from "@angular/material/table"; +import {User} from "@models/users/user"; + @Component({ selector: 'app-group-management', templateUrl: './group-management.component.html', @@ -91,16 +93,11 @@ export class GroupManagementComponent implements OnInit { addGroup() { this.dialog - .open(AddGroupDialogComponent, {width: '250px', height: '250px', data: {server: this.server}}) + .open(AddGroupDialogComponent, {width: '1000px', height: '700px', data: {server: this.server}}) .afterClosed() - .subscribe((name: string) => { - if (name) { - this.groupService.addGroup(this.server, name) - .subscribe(() => { - this.refresh(); - }, (error) => { - this.toasterService.error(`An error occur while trying to create new group ${name}`); - }); + .subscribe((added: boolean) => { + if (added) { + this.refresh(); } }); } diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.ts index 9209d5a0..5e84941b 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {SubPath} from "./SubPath"; export class PermissionPath { diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts index d32eddad..b6b39524 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ export class SubPath { constructor(public value: string, public displayValue: string, diff --git a/src/app/components/permissions-management/display-path.pipe.ts b/src/app/components/permissions-management/display-path.pipe.ts index ba509c4d..4d660782 100644 --- a/src/app/components/permissions-management/display-path.pipe.ts +++ b/src/app/components/permissions-management/display-path.pipe.ts @@ -1,3 +1,15 @@ +/* +* Software Name : GNS3 Web UI +* Version: 3 +* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services +* SPDX-License-Identifier: GPL-3.0-or-later +* +* This software is distributed under the GPL-3.0 or any later version, +* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt +* or see the "LICENSE" file for more details. +* +* Author: Sylvain MATHIEU, Elise LEBEAU +*/ import {Pipe, PipeTransform} from '@angular/core'; import {map, switchMap} from "rxjs/operators"; import {forkJoin, Observable, of} from "rxjs"; From 5102039dbd77eac244065445e9b3cbc559afa154 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Thu, 3 Feb 2022 15:42:13 +0000 Subject: [PATCH 31/50] User and group details, add paginator and filter on permissions list --- src/app/app.module.ts | 6 +-- .../permissions-management.component.html | 39 +++++++------------ .../permissions-management.component.scss | 1 - .../permissions-management.component.ts | 18 --------- .../permissions-type-filter.pipe.spec.ts | 8 ---- .../editable-permission.component.html | 1 + .../editable-permission.component.ts | 3 +- .../permission-editor.component.html | 23 ++++++++++- .../permission-editor.component.scss | 9 ++++- .../permission-editor.component.ts | 28 ++++++++++++- .../role-permissions.component.html | 2 +- .../user-detail/user-detail.component.html | 2 + .../user-permissions.component.html | 2 +- 13 files changed, 78 insertions(+), 64 deletions(-) delete mode 100644 src/app/components/permissions-management/permissions-type-filter.pipe.spec.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 95d7cd43..2449b198 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -310,7 +310,6 @@ import { DeletePermissionDialogComponent } from './components/permissions-manage import { AddRoleToGroupComponent } from './components/group-details/add-role-to-group/add-role-to-group.component'; import {MatFormFieldModule} from "@angular/material/form-field"; import { PermissionsFilterPipe } from './components/permissions-management/permissions-filter.pipe'; -import { PermissionsTypeFilterPipe } from './components/permissions-management/permissions-type-filter.pipe'; import { DisplayPathPipe } from './components/permissions-management/display-path.pipe'; import {RolePermissionsComponent} from "@components/role-management/role-detail/role-permissions/role-permissions.component"; @@ -535,10 +534,11 @@ import {RolePermissionsComponent} from "@components/role-management/role-detail/ FilterCompletePipe, UserPermissionsComponent, PermissionsFilterPipe, - PermissionsTypeFilterPipe, FilterCompletePipe, DisplayPathPipe, - RolePermissionsComponent + RolePermissionsComponent, + DisplayPathPipe, + PermissionsFilterPipe, ], imports: [ BrowserModule, diff --git a/src/app/components/permissions-management/permissions-management.component.html b/src/app/components/permissions-management/permissions-management.component.html index 5590aca2..5494188f 100644 --- a/src/app/components/permissions-management/permissions-management.component.html +++ b/src/app/components/permissions-management/permissions-management.component.html @@ -5,32 +5,21 @@ (addPermissionEvent)="refresh()">
+ + + + {{option.name}} + + - - Filter : - - - All - {{elt.view}} - - - - - - {{option.name}} - - - -
+
{ - this.filteredOptions = data; - }); - } else { - this.filteredOptions = this.apiInformationService.getIdByObjNameFromCache(''); - } - - } - displayFn(value): string { return value && value.name ? value.name : ''; } diff --git a/src/app/components/permissions-management/permissions-type-filter.pipe.spec.ts b/src/app/components/permissions-management/permissions-type-filter.pipe.spec.ts deleted file mode 100644 index da55bd74..00000000 --- a/src/app/components/permissions-management/permissions-type-filter.pipe.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { PermissionsTypeFilterPipe } from './permissions-type-filter.pipe'; - -describe('PermissionsTypeFilterPipe', () => { - it('create an instance', () => { - const pipe = new PermissionsTypeFilterPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.html b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.html index 060294da..b22e793d 100644 --- a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.html +++ b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.html @@ -11,4 +11,5 @@ +
diff --git a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts index 2f1e6e28..f5cde171 100644 --- a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts +++ b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts @@ -28,8 +28,7 @@ export class EditablePermissionComponent implements OnInit { constructor() { } - ngOnInit(): void { - } + ngOnInit(): void {} onClick() { diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html index 31113efc..fc746656 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html @@ -9,6 +9,19 @@
+ + + + {{option.name}} + +
+ +
Owned
@@ -31,9 +46,11 @@ [permission]="permission" [server]="server" (click)="remove(permission)" - *ngFor="let permission of owned"> + *ngFor="let permission of ownedArray | permissionsFilter: searchPermissions?.id | paginator: pageEventOwned"> +
@@ -43,8 +60,10 @@ [permission]="permission" [server]="server" (click)="add(permission)" - *ngFor="let permission of available"> + *ngFor="let permission of availableArray | permissionsFilter: searchPermissions?.id | paginator: pageEventAvailable"> +
diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.scss b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.scss index 86286fd8..0b325c21 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.scss +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.scss @@ -7,7 +7,7 @@ } .header { - margin-top: 5px; + margin: 10px; display: flex; flex-direction: row; justify-content: space-between; @@ -45,3 +45,10 @@ .deny { background-color: rgba(130, 8, 8, 0.36); } + + +.permission-filter { + border-bottom: 1px solid; + margin: 5px; + border-bottom-color: #b0bec5; +} diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts index e4fcdfd9..11fc9357 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts @@ -17,6 +17,8 @@ import {Permission} from "@models/api/permission"; import {MatDialog} from "@angular/material/dialog"; import {PermissionEditorValidateDialogComponent} from "@components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component"; import { EventEmitter } from '@angular/core'; +import {ApiInformationService, IFormatedList} from "@services/api-information.service"; +import {PageEvent} from "@angular/material/paginator"; @Component({ selector: 'app-permission-editor', @@ -24,16 +26,22 @@ import { EventEmitter } from '@angular/core'; styleUrls: ['./permission-editor.component.scss'] }) export class PermissionEditorComponent implements OnInit { - server: Server; + owned: Set; available: Set; + searchPermissions: any; + filteredOptions: IFormatedList[]; + pageEventOwned: PageEvent | undefined; + pageEventAvailable: PageEvent | undefined; + @Input() server: Server; @Input() ownedPermissions: Permission[]; @Input() availablePermissions: Permission[]; @Output() updatedPermissions: EventEmitter = new EventEmitter(); - constructor(private dialog: MatDialog) {} + constructor(private dialog: MatDialog, + private apiInformationService: ApiInformationService) {} ngOnInit(): void { this.reset(); @@ -88,4 +96,20 @@ export class PermissionEditorComponent implements OnInit { return {add, remove}; } + + displayFn(value): string { + return value && value.name ? value.name : ''; + } + + changeAutocomplete(inputText) { + this.filteredOptions = this.apiInformationService.getIdByObjNameFromCache(inputText); + } + + get ownedArray() { + return Array.from(this.owned.values()) + } + + get availableArray() { + return Array.from(this.available.values()) + } } diff --git a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.html b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.html index 2305135e..a8a5db30 100644 --- a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.html +++ b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.html @@ -12,5 +12,5 @@ Edit {{role.name}} role permissions - diff --git a/src/app/components/user-management/user-detail/user-detail.component.html b/src/app/components/user-management/user-detail/user-detail.component.html index 51c89b97..f9d2db94 100644 --- a/src/app/components/user-management/user-detail/user-detail.component.html +++ b/src/app/components/user-management/user-detail/user-detail.component.html @@ -92,8 +92,10 @@ edit + diff --git a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.html b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.html index 70cc860a..9a47c641 100644 --- a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.html +++ b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.html @@ -12,5 +12,5 @@ Edit {{user.username}} role permissions - From c400ad551ecbbf0d9de78031297336b13f46c529 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Fri, 4 Feb 2022 13:38:52 +0100 Subject: [PATCH 32/50] bug fix, display correctly http error message inside Toaster service --- .../add-permission-line.component.ts | 7 +++++-- .../role-detail/role-detail.component.ts | 10 ++++++---- .../role-permissions/role-permissions.component.ts | 6 ++++-- .../role-management/role-management.component.ts | 4 +++- .../user-permissions/user-permissions.component.ts | 6 ++++-- src/styles.scss | 1 + 6 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts index 27c1b12d..77e48c6d 100644 --- a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts @@ -16,6 +16,7 @@ import {ApiInformationService} from "@services/api-information.service"; import {Methods, Permission, PermissionActions} from "@models/api/permission"; import {PermissionsService} from "@services/permissions.service"; import {ToasterService} from "@services/toaster.service"; +import {HttpErrorResponse} from "@angular/common/http"; @Component({ selector: 'app-add-permission-line', @@ -72,8 +73,10 @@ export class AddPermissionLineComponent implements OnInit { .subscribe(() => { this.toasterService.success(`permission was created`); this.reset(); - }, (error) => { - this.toasterService.error(error); + }, (error: HttpErrorResponse) => { + this.toasterService.error(` + ${error.message} + ${error.error.message}`); }); } } diff --git a/src/app/components/role-management/role-detail/role-detail.component.ts b/src/app/components/role-management/role-detail/role-detail.component.ts index 3638e78b..0ccb142a 100644 --- a/src/app/components/role-management/role-detail/role-detail.component.ts +++ b/src/app/components/role-management/role-detail/role-detail.component.ts @@ -18,6 +18,7 @@ import {ServerService} from "@services/server.service"; import {Role} from "@models/api/role"; import {FormControl, FormGroup} from "@angular/forms"; import {ToasterService} from "@services/toaster.service"; +import {HttpErrorResponse} from "@angular/common/http"; @Component({ selector: 'app-role-detail', @@ -50,10 +51,11 @@ export class RoleDetailComponent implements OnInit { onUpdate() { this.roleService.update(this.server, this.role) .subscribe(() => { - this.toastService.success(`role: ${this.role.name} was updated`); - }, - (error) => { - this.toastService.error(error); + this.toastService.success(`role: ${this.role.name} was updated`); + }, + (error: HttpErrorResponse) => { + this.toastService.error(`${error.message} + ${error.error.message}`); }); } } diff --git a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.ts b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.ts index 2d1f966b..76c8ee5d 100644 --- a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.ts +++ b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.ts @@ -20,6 +20,7 @@ import {Role} from "@models/api/role"; import {Permission} from "@models/api/permission"; import {Observable} from "rxjs/Rx"; import {forkJoin} from "rxjs"; +import {HttpErrorResponse} from "@angular/common/http"; @Component({ selector: 'app-role-permissions', @@ -61,8 +62,9 @@ export class RolePermissionsComponent implements OnInit { this.toastService.success(`permissions updated`); this.router.navigate(['/server', this.server.id, 'management', 'roles', this.role.role_id]); }, - (error) => { - this.toastService.error(error); + (error: HttpErrorResponse) => { + this.toastService.error(`${error.message} + ${error.error.message}`); }); } } diff --git a/src/app/components/role-management/role-management.component.ts b/src/app/components/role-management/role-management.component.ts index 1f6e08ad..b0f7b6e6 100644 --- a/src/app/components/role-management/role-management.component.ts +++ b/src/app/components/role-management/role-management.component.ts @@ -26,6 +26,7 @@ import {RoleService} from "@services/role.service"; import {AddRoleDialogComponent} from "@components/role-management/add-role-dialog/add-role-dialog.component"; import {DeleteRoleDialogComponent} from "@components/role-management/delete-role-dialog/delete-role-dialog.component"; import {forkJoin} from "rxjs"; +import {HttpErrorResponse} from "@angular/common/http"; @Component({ @@ -95,7 +96,8 @@ export class RoleManagementComponent implements OnInit { this.toasterService.success(`${role.name} role created`); this.refresh(); }, - (error) => this.toasterService.error(error)); + (error: HttpErrorResponse) => this.toasterService.error(`${error.message} + ${error.error.message}`)); } }); } diff --git a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.ts b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.ts index f717bd6a..fd96958f 100644 --- a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.ts +++ b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.ts @@ -10,6 +10,7 @@ import {forkJoin} from "rxjs"; import {Observable} from "rxjs/Rx"; import {UserService} from "@services/user.service"; import {User} from "@models/users/user"; +import {HttpErrorResponse} from "@angular/common/http"; @Component({ selector: 'app-user-permissions', @@ -54,8 +55,9 @@ export class UserPermissionsComponent implements OnInit { this.toastService.success(`permissions updated`); this.router.navigate(['/server', this.server.id, 'management', 'users', this.user.user_id]); }, - (error) => { - this.toastService.error(error); + (error: HttpErrorResponse) => { + this.toastService.error(`${error.message} + ${error.error.message}`); }); } diff --git a/src/styles.scss b/src/styles.scss index 0c98b1e6..4c4cc5b1 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -23,6 +23,7 @@ a.table-link { .snackbar-error { background: #b00020 !important; color: white !important; + white-space: pre-wrap !important; } .mat-dialog-actions { From 02285265e3d1936088599c7bbc2ce89a4f3a3373 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Mon, 7 Feb 2022 14:48:44 +0000 Subject: [PATCH 33/50] add user to groups when creating user + refactor add users when creating group --- .../add-group-dialog.component.html | 46 ++++++---------- .../add-group-dialog.component.scss | 5 +- .../add-group-dialog.component.ts | 55 ++++++++++--------- .../group-management.component.ts | 2 +- .../add-user-dialog.component.html | 25 +++++++++ .../add-user-dialog.component.scss | 14 +++++ .../add-user-dialog.component.ts | 54 +++++++++++++++++- 7 files changed, 142 insertions(+), 59 deletions(-) diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html index 2985b8d0..8bb21d51 100644 --- a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.html @@ -22,39 +22,27 @@
Add users to group:
-
- - Search user - - -
+ + Users + + + + {{user.username}} - {{user.email}} + + +
-
- Users available : -
-
-
{{user.username}}
-
{{user.email}}
- add -
+
+
+
{{user.username}}
+
{{user.email}}
+ delete
- - - -
- Users to add : -
-
-
{{user.username}}
-
{{user.email}}
- delete -
-
-
- -
diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss index 3d3e85c1..0ab6fbfb 100644 --- a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.scss @@ -10,13 +10,14 @@ display: flex; margin: 10px; justify-content: space-between; - flex: 1 1 auto + flex: 1 1 auto; } .users { display: flex; - height: 350px; + height: 180px; overflow: auto; + flex-direction: column; } .button-div { diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts index 8429e467..dc96745e 100644 --- a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts @@ -22,6 +22,9 @@ import {User} from "@models/users/user"; import {UserService} from "@services/user.service"; import {ToasterService} from "@services/toaster.service"; import {PageEvent} from "@angular/material/paginator"; +import {Observable} from "rxjs/Rx"; +import {Group} from "@models/groups/group"; +import {map, startWith} from "rxjs/operators"; @Component({ selector: 'app-add-group-dialog', @@ -34,11 +37,12 @@ export class AddGroupDialogComponent implements OnInit { groupNameForm: FormGroup; server: Server; - users: Set; + users: User[]; usersToAdd: Set = new Set([]); - - searchText: string; + filteredUsers: Observable loading = false; + autocompleteControl = new FormControl(); + constructor(private dialogRef: MatDialogRef, @@ -59,7 +63,14 @@ export class AddGroupDialogComponent implements OnInit { [groupNameAsyncValidator(this.data.server, this.groupService)] ), }); - this.getUsers(); + this.userService.list(this.server) + .subscribe((users: User[]) => { + this.users = users; + this.filteredUsers = this.autocompleteControl.valueChanges.pipe( + startWith(''), + map(value => this._filter(value)), + ); + }) } onKeyDown(event) { @@ -102,33 +113,25 @@ export class AddGroupDialogComponent implements OnInit { this.dialogRef.close(); } - get toDisplay() { - return (user: User) => !this.searchText || user.username.includes(this.searchText) || user.email?.includes(this.searchText); - } - - getUsers() { - - this.userService.list(this.data.server) - .subscribe((users) => { - if (this.usersToAdd) { - users = users.filter((user: User) => { - return !this.usersToAdd.has(user); - }); - } - this.users = new Set(users); - - }); - - } - - addUser(user: User) { + selectedUser(user: User) { this.usersToAdd.add(user); - this.users.delete(user); } delUser(user: User) { this.usersToAdd.delete(user); - this.users.add(user); + } + + private _filter(value: string): User[] { + if (typeof value === 'string') { + const filterValue = value.toLowerCase(); + + return this.users.filter(option => option.username.toLowerCase().includes(filterValue) + || (option.email?.toLowerCase().includes(filterValue))); + } + } + + displayFn(value): string { + return value && value.username ? value.username : ''; } } diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index 8579587c..91fe259d 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -93,7 +93,7 @@ export class GroupManagementComponent implements OnInit { addGroup() { this.dialog - .open(AddGroupDialogComponent, {width: '1000px', height: '700px', data: {server: this.server}}) + .open(AddGroupDialogComponent, {width: '600px', height: '500px', data: {server: this.server}}) .afterClosed() .subscribe((added: boolean) => { if (added) { diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html index c94ac91c..478937c9 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html @@ -29,6 +29,31 @@ Is active + +
Add user to groups :
+ + + Groups + + + + {{group.name}} + + + + +
+
+
+
{{group.name}}
+ delete +
+
+
+
diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss index 469c3dda..41142daf 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.scss @@ -6,3 +6,17 @@ .button-div { float: right; } + +.groupList { + display: flex; + margin: 10px; + justify-content: space-between; + flex: 1 1 auto +} + +.groups { + display: flex; + height: 180px; + overflow: auto; + flex-direction: column; +} diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts index 1a94a1a9..95d22b29 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts @@ -19,6 +19,12 @@ import {User} from "@models/users/user"; import {ToasterService} from "@services/toaster.service"; import {userNameAsyncValidator} from "@components/user-management/add-user-dialog/userNameAsyncValidator"; import {userEmailAsyncValidator} from "@components/user-management/add-user-dialog/userEmailAsyncValidator"; +import {BehaviorSubject} from "rxjs"; +import {Group} from "@models/groups/group"; +import {GroupService} from "@services/group.service"; +import {Observable} from "rxjs/Rx"; +import {startWith} from "rxjs/operators"; +import {map} from "rxjs//operators"; @Component({ selector: 'app-add-user-dialog', @@ -29,9 +35,15 @@ export class AddUserDialogComponent implements OnInit { addUserForm: FormGroup; server: Server; + groups: Group[]; + groupsToAdd: Set = new Set([]); + autocompleteControl = new FormControl(); + filteredGroups: Observable; + constructor(public dialogRef: MatDialogRef, public userService: UserService, - private toasterService: ToasterService) { } + private toasterService: ToasterService, + private groupService: GroupService) { } ngOnInit(): void { this.addUserForm = new FormGroup({ @@ -48,6 +60,24 @@ export class AddUserDialogComponent implements OnInit { [Validators.required, Validators.minLength(6), Validators.maxLength(100)]), is_active: new FormControl(true) }); + this.groupService.getGroups(this.server) + .subscribe((groups: Group[]) => { + this.groups = groups; + this.filteredGroups = this.autocompleteControl.valueChanges.pipe( + startWith(''), + map(value => this._filter(value)), + ); + }) + + } + + private _filter(value: string): Group[] { + if (typeof value === 'string') { + const filterValue = value.toLowerCase(); + + return this.groups.filter(option => option.name.toLowerCase().includes(filterValue)); + } + } get form() { @@ -63,13 +93,35 @@ export class AddUserDialogComponent implements OnInit { return; } const newUser = this.addUserForm.value; + const toAdd = Array.from(this.groupsToAdd.values()); this.userService.add(this.server, newUser) .subscribe((user: User) => { this.toasterService.success(`User ${user.username} added`); + toAdd.forEach((group: Group) => { + this.groupService.addMemberToGroup(this.server, group, user) + .subscribe(() => { + this.toasterService.success(`user ${user.username} was added to group ${group.name}`); + }, + (error) => { + this.toasterService.error(`An error occur while trying to add user ${user.username} to group ${group.name}`); + }) + }) this.dialogRef.close(); }, (error) => { this.toasterService.error('Cannot create user : ' + error); }) } + + deleteGroup(group: Group) { + this.groupsToAdd.delete(group); + } + + selectedGroup(value: any) { + this.groupsToAdd.add(value); + } + + displayFn(value): string { + return value && value.name ? value.name : ''; + } } From 8df255ebc3e3db21d7ad7f27a5ebdc02a21e48c7 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Tue, 8 Feb 2022 08:23:33 +0000 Subject: [PATCH 34/50] Bug fix, paginators and sort for user group and role lists --- .../group-management.component.html | 5 ++-- .../group-management.component.ts | 20 ++++++++------- .../role-management.component.html | 5 ++-- .../role-management.component.ts | 25 +++++++++++++++---- .../user-management.component.html | 8 +++--- .../user-management.component.ts | 16 ++++++++---- 6 files changed, 52 insertions(+), 27 deletions(-) diff --git a/src/app/components/group-management/group-management.component.html b/src/app/components/group-management/group-management.component.html index 43d54c66..587d07e3 100644 --- a/src/app/components/group-management/group-management.component.html +++ b/src/app/components/group-management/group-management.component.html @@ -18,7 +18,7 @@
-
- - + - + Name{{element.name}} {{element.name}} last update Last update {{element.updated_at}}
+
@@ -67,7 +67,8 @@
- diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index 91fe259d..47424cdb 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -10,7 +10,7 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import {Component, OnInit, ViewChild} from '@angular/core'; +import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core'; import {ActivatedRoute, Router} from "@angular/router"; import {ServerService} from "../../services/server.service"; import {ToasterService} from "../../services/toaster.service"; @@ -26,7 +26,6 @@ import {forkJoin} from "rxjs"; import {MatPaginator} from "@angular/material/paginator"; import {MatTableDataSource} from "@angular/material/table"; -import {User} from "@models/users/user"; @Component({ selector: 'app-group-management', @@ -36,8 +35,8 @@ import {User} from "@models/users/user"; export class GroupManagementComponent implements OnInit { server: Server; - @ViewChild(MatPaginator) paginator: MatPaginator; - @ViewChild(MatSort, { static: true }) sort: MatSort; + @ViewChildren('groupsPaginator') groupsPaginator: QueryList; + @ViewChildren('groupsSort') groupsSort: QueryList; public displayedColumns = ['select', 'name', 'created_at', 'updated_at', 'is_builtin', 'delete']; selection = new SelectionModel(true, []); @@ -65,13 +64,16 @@ export class GroupManagementComponent implements OnInit { } ngAfterViewInit() { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; + this.groupsPaginator.changes.subscribe((comps: QueryList ) => + { + this.dataSource.paginator = comps.first; + }); + this.groupsSort.changes.subscribe((comps: QueryList) => { + this.dataSource.sort = comps.first; + }); this.dataSource.sortingDataAccessor = (item, property) => { switch (property) { - case 'username': - case 'full_name': - case 'email': + case 'name': return item[property] ? item[property].toLowerCase() : ''; default: return item[property]; diff --git a/src/app/components/role-management/role-management.component.html b/src/app/components/role-management/role-management.component.html index eff07f44..b3f5d945 100644 --- a/src/app/components/role-management/role-management.component.html +++ b/src/app/components/role-management/role-management.component.html @@ -21,7 +21,7 @@
- + - diff --git a/src/app/components/role-management/role-management.component.ts b/src/app/components/role-management/role-management.component.ts index b0f7b6e6..21840342 100644 --- a/src/app/components/role-management/role-management.component.ts +++ b/src/app/components/role-management/role-management.component.ts @@ -10,7 +10,7 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import {Component, OnInit, ViewChild} from '@angular/core'; +import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core'; import {Server} from "@models/server"; import {MatTableDataSource} from "@angular/material/table"; import {SelectionModel} from "@angular/cdk/collections"; @@ -41,10 +41,11 @@ export class RoleManagementComponent implements OnInit { selection = new SelectionModel(true, []); searchText = ''; - @ViewChild(MatPaginator) paginator: MatPaginator; - @ViewChild(MatSort, {static: true}) sort: MatSort; + @ViewChildren('rolesPaginator') rolesPaginator: QueryList; + @ViewChildren('rolesSort') rolesSort: QueryList; isReady = false; + constructor( private route: ActivatedRoute, private router: Router, @@ -61,11 +62,25 @@ export class RoleManagementComponent implements OnInit { this.server = server; this.refresh(); }); + } ngAfterViewInit() { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; + this.rolesPaginator.changes.subscribe((comps: QueryList ) => + { + this.dataSource.paginator = comps.first; + }); + this.rolesSort.changes.subscribe((comps: QueryList) => { + this.dataSource.sort = comps.first; + }); + this.dataSource.sortingDataAccessor = (item, property) => { + switch (property) { + case 'name': + return item[property] ? item[property].toLowerCase() : ''; + default: + return item[property]; + } + }; } diff --git a/src/app/components/user-management/user-management.component.html b/src/app/components/user-management/user-management.component.html index e94cc5ee..a99f8fb6 100644 --- a/src/app/components/user-management/user-management.component.html +++ b/src/app/components/user-management/user-management.component.html @@ -21,7 +21,7 @@
- + - +
diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index 9c94bd40..b5d39e93 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -10,7 +10,7 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import {Component, OnInit, ViewChild} from '@angular/core'; +import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core'; import {ActivatedRoute, Router} from "@angular/router"; import {Server} from "@models/server"; import {MatSort} from "@angular/material/sort"; @@ -38,8 +38,8 @@ export class UserManagementComponent implements OnInit { selection = new SelectionModel(true, []); searchText = ''; - @ViewChild(MatPaginator) paginator: MatPaginator; - @ViewChild(MatSort, { static: true }) sort: MatSort; + @ViewChildren('usersPaginator') usersPaginator: QueryList; + @ViewChildren('usersSort') usersSort: QueryList; isReady = false; constructor( @@ -60,8 +60,14 @@ export class UserManagementComponent implements OnInit { } ngAfterViewInit() { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; + this.usersPaginator.changes.subscribe((comps: QueryList ) => + { + this.dataSource.paginator = comps.first; + }); + this.usersSort.changes.subscribe((comps: QueryList) => { + this.dataSource.sort = comps.first; + }) + this.dataSource.sortingDataAccessor = (item, property) => { switch (property) { case 'username': From b6b9d735f5b67bc2f3a99892f99b8e18d9ecc043 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Tue, 8 Feb 2022 10:55:13 +0000 Subject: [PATCH 35/50] update user password + confirm password validator --- src/app/app.module.ts | 5 +- .../ConfirmPasswordValidator.ts | 10 +++ .../add-user-dialog.component.html | 7 +- .../add-user-dialog.component.ts | 5 ++ .../change-user-password.component.html | 25 +++++++ .../change-user-password.component.scss | 7 ++ .../change-user-password.component.spec.ts | 25 +++++++ .../change-user-password.component.ts | 67 +++++++++++++++++++ .../user-detail/user-detail.component.html | 14 ++-- .../user-detail/user-detail.component.ts | 17 +++-- 10 files changed, 164 insertions(+), 18 deletions(-) create mode 100644 src/app/components/user-management/ConfirmPasswordValidator.ts create mode 100644 src/app/components/user-management/user-detail/change-user-password/change-user-password.component.html create mode 100644 src/app/components/user-management/user-detail/change-user-password/change-user-password.component.scss create mode 100644 src/app/components/user-management/user-detail/change-user-password/change-user-password.component.spec.ts create mode 100644 src/app/components/user-management/user-detail/change-user-password/change-user-password.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2449b198..0b12ea1c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -312,6 +312,7 @@ import {MatFormFieldModule} from "@angular/material/form-field"; import { PermissionsFilterPipe } from './components/permissions-management/permissions-filter.pipe'; import { DisplayPathPipe } from './components/permissions-management/display-path.pipe'; import {RolePermissionsComponent} from "@components/role-management/role-detail/role-permissions/role-permissions.component"; +import { ChangeUserPasswordComponent } from './components/user-management/user-detail/change-user-password/change-user-password.component'; @NgModule({ declarations: [ @@ -534,11 +535,9 @@ import {RolePermissionsComponent} from "@components/role-management/role-detail/ FilterCompletePipe, UserPermissionsComponent, PermissionsFilterPipe, - FilterCompletePipe, - DisplayPathPipe, RolePermissionsComponent, DisplayPathPipe, - PermissionsFilterPipe, + ChangeUserPasswordComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/user-management/ConfirmPasswordValidator.ts b/src/app/components/user-management/ConfirmPasswordValidator.ts new file mode 100644 index 00000000..1e26eac3 --- /dev/null +++ b/src/app/components/user-management/ConfirmPasswordValidator.ts @@ -0,0 +1,10 @@ +import {AbstractControl, FormGroup, ValidationErrors, ValidatorFn} from '@angular/forms'; + + +export function matchingPassword(control: AbstractControl) : ValidationErrors | null { + if (control.get('password').value !== control.get('confirmPassword').value) { + control.get('confirmPassword').setErrors({confirmPasswordMatch: true}); + return; + } + return; +} diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html index 478937c9..5b2c0391 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.html @@ -26,7 +26,12 @@ A password between 6 and 100 characters is required. - + + + Password and Confirm password must be the same. + + Is active diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts index 95d22b29..3bf5e6e1 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.ts @@ -25,6 +25,7 @@ import {GroupService} from "@services/group.service"; import {Observable} from "rxjs/Rx"; import {startWith} from "rxjs/operators"; import {map} from "rxjs//operators"; +import {matchingPassword} from "@components/user-management/ConfirmPasswordValidator"; @Component({ selector: 'app-add-user-dialog', @@ -58,7 +59,11 @@ export class AddUserDialogComponent implements OnInit { [userEmailAsyncValidator(this.server, this.userService)]), password: new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(100)]), + confirmPassword: new FormControl(null, + [Validators.minLength(6), Validators.maxLength(100), Validators.required] ), is_active: new FormControl(true) + },{ + validators: [matchingPassword] }); this.groupService.getGroups(this.server) .subscribe((groups: Group[]) => { diff --git a/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.html b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.html new file mode 100644 index 00000000..f61f5fa5 --- /dev/null +++ b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.html @@ -0,0 +1,25 @@ +

Change password for user :

+
+
+ + + Password must be between 6 and 100 characters. + + + + + Password and Confirm password must be the same. + + + +
+ + +
+
+
diff --git a/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.scss b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.scss new file mode 100644 index 00000000..a64b61ba --- /dev/null +++ b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.scss @@ -0,0 +1,7 @@ +.input-field { + width: 100%; +} + +.button-div { + float: right; +} diff --git a/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.spec.ts b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.spec.ts new file mode 100644 index 00000000..eaa343b8 --- /dev/null +++ b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ChangeUserPasswordComponent } from './change-user-password.component'; + +describe('ChangeUserPasswordComponent', () => { + let component: ChangeUserPasswordComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ChangeUserPasswordComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ChangeUserPasswordComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.ts b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.ts new file mode 100644 index 00000000..192f2644 --- /dev/null +++ b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.ts @@ -0,0 +1,67 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators} from "@angular/forms"; +import {User} from "@models/users/user"; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {UserService} from "@services/user.service"; +import {Server} from "@models/server"; +import {ToasterService} from "@services/toaster.service"; +import {matchingPassword} from "@components/user-management/ConfirmPasswordValidator"; + +@Component({ + selector: 'app-change-user-password', + templateUrl: './change-user-password.component.html', + styleUrls: ['./change-user-password.component.scss'] +}) +export class ChangeUserPasswordComponent implements OnInit { + + editPasswordForm: FormGroup; + user: User; + + constructor(private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { user: User, server: Server }, + private userService: UserService, + private toasterService: ToasterService) { } + + ngOnInit(): void { + this.user = this.data.user; + this.editPasswordForm = new FormGroup({ + password: new FormControl(null, + [Validators.minLength(6), Validators.maxLength(100), Validators.required] ), + confirmPassword: new FormControl(null, + [Validators.minLength(6), Validators.maxLength(100), Validators.required] ), + },{ + validators: [matchingPassword] + }) + } + + get passwordForm() { + return this.editPasswordForm.controls; + } + + + onCancel() { + this.dialogRef.close(); + } + + onPasswordSave() { + if (!this.editPasswordForm.valid) { + return; + } + + const updatedUser = {}; + updatedUser['password'] = this.editPasswordForm.get('password').value; + updatedUser['user_id'] = this.user.user_id; + + console.log(updatedUser); + + this.userService.update(this.data.server, updatedUser) + .subscribe((user: User) => { + this.toasterService.success(`User ${user.username} password updated`); + this.editPasswordForm.reset(); + this.dialogRef.close(true); + }, + (error) => { + this.toasterService.error('Cannot update password for user : ' + error); + }) + } +} diff --git a/src/app/components/user-management/user-detail/user-detail.component.html b/src/app/components/user-management/user-detail/user-detail.component.html index f9d2db94..b4ba6cf0 100644 --- a/src/app/components/user-management/user-detail/user-detail.component.html +++ b/src/app/components/user-management/user-detail/user-detail.component.html @@ -44,15 +44,6 @@ - - - - Password must be between 6 and 100 characters - - - - Is active
Is Superadmin @@ -65,6 +56,11 @@
+ + +
Creation date: {{user.created_at}}
Last update Date: {{user.updated_at}}
diff --git a/src/app/components/user-management/user-detail/user-detail.component.ts b/src/app/components/user-management/user-detail/user-detail.component.ts index bf5931bc..9edbae10 100644 --- a/src/app/components/user-management/user-detail/user-detail.component.ts +++ b/src/app/components/user-management/user-detail/user-detail.component.ts @@ -10,6 +10,10 @@ import {userEmailAsyncValidator} from "@components/user-management/add-user-dial import {ActivatedRoute, Router} from "@angular/router"; import {Permission} from "@models/api/permission"; import {Role} from "@models/api/role"; +import {AddUserDialogComponent} from "@components/user-management/add-user-dialog/add-user-dialog.component"; +import {MatDialog} from "@angular/material/dialog"; +import {ChangeUserPasswordComponent} from "@components/user-management/user-detail/change-user-password/change-user-password.component"; +import {RemoveToGroupDialogComponent} from "@components/group-details/remove-to-group-dialog/remove-to-group-dialog.component"; @Component({ selector: 'app-user-detail', @@ -24,11 +28,13 @@ export class UserDetailComponent implements OnInit { server: Server; user_id: string; permissions: Permission[]; + changingPassword: boolean = false; constructor(public userService: UserService, private toasterService: ToasterService, private route: ActivatedRoute, - private router: Router) { + private router: Router, + public dialog: MatDialog) { } @@ -57,8 +63,6 @@ export class UserDetailComponent implements OnInit { email: new FormControl(this.user.email, [Validators.email, Validators.required], [userEmailAsyncValidator(this.server, this.userService, this.user.email)]), - password: new FormControl(null, - [Validators.minLength(6), Validators.maxLength(100)]), is_active: new FormControl(this.user.is_active) }); } @@ -91,7 +95,7 @@ export class UserDetailComponent implements OnInit { .forEach(key => { const currentControl = this.editUserForm.get(key); - if (currentControl.dirty && currentControl.value !== this.user[key] && currentControl.value !== '') { + if (currentControl.dirty && currentControl.value !== this.user[key]) { dirtyValues[key] = currentControl.value; } }); @@ -99,5 +103,8 @@ export class UserDetailComponent implements OnInit { return dirtyValues; } - + onChangePassword() { + this.dialog.open(ChangeUserPasswordComponent, + {width: '400px', height: '300px', data: {user: this.user, server: this.server}}); + } } From fc0fdd2e5105d7256a229fd36b7455d9edfc466f Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Tue, 8 Feb 2022 14:16:04 +0100 Subject: [PATCH 36/50] bugfix, Permission Link display correctly --- .../add-permission-line.component.ts | 2 +- .../filter-complete.pipe.ts | 4 +- .../path-auto-complete.component.ts | 5 +- .../display-path.pipe.ts | 2 +- .../permission-edit-line.component.ts | 2 +- .../permissions-management.component.ts | 5 +- .../permission-editor.component.ts | 13 +-- .../ApiInformation/ApiInformationCache.ts | 43 +++++++ .../ApiInformation/GetObjectIdHelper.ts | 106 ++++++++++++++++++ src/app/services/ApiInformation/IApiData.ts | 6 + .../services/ApiInformation/IExtraParams.ts | 4 + .../ApiInformation/IGenericApiObject.ts | 4 + .../api-information.service.spec.ts | 0 .../api-information.service.ts | 93 ++++----------- 14 files changed, 202 insertions(+), 87 deletions(-) create mode 100644 src/app/services/ApiInformation/ApiInformationCache.ts create mode 100644 src/app/services/ApiInformation/GetObjectIdHelper.ts create mode 100644 src/app/services/ApiInformation/IApiData.ts create mode 100644 src/app/services/ApiInformation/IExtraParams.ts create mode 100644 src/app/services/ApiInformation/IGenericApiObject.ts rename src/app/services/{ => ApiInformation}/api-information.service.spec.ts (100%) rename src/app/services/{ => ApiInformation}/api-information.service.ts (70%) diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts index 77e48c6d..aeeffbc2 100644 --- a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.ts @@ -12,7 +12,7 @@ */ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {Server} from "@models/server"; -import {ApiInformationService} from "@services/api-information.service"; +import {ApiInformationService} from "@services/ApiInformation/api-information.service"; import {Methods, Permission, PermissionActions} from "@models/api/permission"; import {PermissionsService} from "@services/permissions.service"; import {ToasterService} from "@services/toaster.service"; diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts index d42c242f..e9c1f509 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts @@ -11,14 +11,14 @@ * Author: Sylvain MATHIEU, Elise LEBEAU */ import { Pipe, PipeTransform } from '@angular/core'; -import {IFormatedList} from "@services/api-information.service"; +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; @Pipe({ name: 'filterComplete' }) export class FilterCompletePipe implements PipeTransform { - transform(value: IFormatedList[], searchText: string): IFormatedList[] { + transform(value: IGenericApiObject[], searchText: string): IGenericApiObject[] { if (!searchText || searchText === '') { return value; } return value.filter((v) => { diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts index 8ef82aad..2b145c5c 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.ts @@ -11,10 +11,11 @@ * Author: Sylvain MATHIEU, Elise LEBEAU */ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; -import {ApiInformationService, IFormatedList} from "@services/api-information.service"; +import {ApiInformationService} from "@services/ApiInformation/api-information.service"; import {Server} from "@models/server"; import {PermissionPath} from "@components/permissions-management/add-permission-line/path-auto-complete/PermissionPath"; import {SubPath} from "@components/permissions-management/add-permission-line/path-auto-complete/SubPath"; +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; @Component({ selector: 'app-path-auto-complete', @@ -28,7 +29,7 @@ export class PathAutoCompleteComponent implements OnInit { @Input() server: Server; path: PermissionPath = new PermissionPath(); values: string[] = []; - private completeData: { data: IFormatedList[]; key: string }; + private completeData: { data: IGenericApiObject[]; key: string }; public mode: 'SELECT' | 'COMPLETE' | undefined; completeField: string; diff --git a/src/app/components/permissions-management/display-path.pipe.ts b/src/app/components/permissions-management/display-path.pipe.ts index 4d660782..49260340 100644 --- a/src/app/components/permissions-management/display-path.pipe.ts +++ b/src/app/components/permissions-management/display-path.pipe.ts @@ -13,7 +13,7 @@ import {Pipe, PipeTransform} from '@angular/core'; import {map, switchMap} from "rxjs/operators"; import {forkJoin, Observable, of} from "rxjs"; -import {ApiInformationService} from "@services/api-information.service"; +import {ApiInformationService} from "@services/ApiInformation/api-information.service"; import {Server} from "@models/server"; @Pipe({ diff --git a/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.ts b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.ts index ed9e7e55..c30839e6 100644 --- a/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.ts +++ b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.ts @@ -13,7 +13,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {Methods, Permission} from "@models/api/permission"; import {Server} from '@models/server'; -import {ApiInformationService} from "@services/api-information.service"; +import {ApiInformationService} from "@services/ApiInformation/api-information.service"; import {PermissionsService} from "@services/permissions.service"; import {ToasterService} from "@services/toaster.service"; import {MatDialog} from "@angular/material/dialog"; diff --git a/src/app/components/permissions-management/permissions-management.component.ts b/src/app/components/permissions-management/permissions-management.component.ts index d228a90d..f48e44e6 100644 --- a/src/app/components/permissions-management/permissions-management.component.ts +++ b/src/app/components/permissions-management/permissions-management.component.ts @@ -19,7 +19,8 @@ import {Permission} from "@models/api/permission"; import {AddPermissionLineComponent} from "@components/permissions-management/add-permission-line/add-permission-line.component"; import {ServerService} from "@services/server.service"; import {PageEvent} from "@angular/material/paginator"; -import {ApiInformationService, IFormatedList} from "@services/api-information.service"; +import {ApiInformationService} from "@services/ApiInformation/api-information.service"; +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; @Component({ selector: 'app-permissions-management', @@ -33,7 +34,7 @@ export class PermissionsManagementComponent implements OnInit { newPermissionEdit = false; searchPermissions: any; pageEvent: PageEvent | undefined; - filteredOptions: IFormatedList[]; + filteredOptions: IGenericApiObject[]; options: string[] = []; @ViewChild('dynamic', { diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts index 11fc9357..ffbe254a 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts @@ -10,15 +10,14 @@ * * Author: Sylvain MATHIEU, Elise LEBEAU */ -import {Component, Inject, Input, OnInit, Output} from '@angular/core'; -import {Role} from "@models/api/role"; +import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core'; import {Server} from "@models/server"; import {Permission} from "@models/api/permission"; import {MatDialog} from "@angular/material/dialog"; import {PermissionEditorValidateDialogComponent} from "@components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component"; -import { EventEmitter } from '@angular/core'; -import {ApiInformationService, IFormatedList} from "@services/api-information.service"; +import {ApiInformationService } from "@services/ApiInformation/api-information.service"; import {PageEvent} from "@angular/material/paginator"; +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; @Component({ selector: 'app-permission-editor', @@ -30,7 +29,7 @@ export class PermissionEditorComponent implements OnInit { owned: Set; available: Set; searchPermissions: any; - filteredOptions: IFormatedList[]; + filteredOptions: IGenericApiObject[]; pageEventOwned: PageEvent | undefined; pageEventAvailable: PageEvent | undefined; @@ -106,10 +105,10 @@ export class PermissionEditorComponent implements OnInit { } get ownedArray() { - return Array.from(this.owned.values()) + return Array.from(this.owned.values()); } get availableArray() { - return Array.from(this.available.values()) + return Array.from(this.available.values()); } } diff --git a/src/app/services/ApiInformation/ApiInformationCache.ts b/src/app/services/ApiInformation/ApiInformationCache.ts new file mode 100644 index 00000000..b4f83d3e --- /dev/null +++ b/src/app/services/ApiInformation/ApiInformationCache.ts @@ -0,0 +1,43 @@ +import {IApiData} from "./IApiData"; +import {Server} from "../../models/server"; +import {IExtraParams} from "./IExtraParams"; +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; + +export class ApiInformationCache { + + private cache = new Map(); + + + public update(server: Server, key: string, value: string, extraParams: IExtraParams[], data: IGenericApiObject[]) { + const dataKey = this.generateKey(server, key, value, extraParams); + this.cache.set(dataKey, {expired: Date.now() + 10000, data}); + } + + public get(server: Server, key: string, value: string, extraParams: IExtraParams[]): IGenericApiObject[] | undefined { + const dataKey = this.generateKey(server, key, value, extraParams); + const data = this.cache.get(dataKey); + if (data) { + if (data.expired > Date.now()) { + return data.data; + } + } + + } + + private generateKey(server: Server, key: string, value: string, extraParams: IExtraParams[]) { + return `${server.id}-${key}-${value}-${extraParams.map(param => `${param.key}+${param.value}`).join('.')}`; + } + + searchByName(name: string) { + const result: IGenericApiObject[] = []; + this.cache.forEach((apiData: IApiData) => { + apiData.data.forEach((value: IGenericApiObject) => { + if (value.name.includes(name)) { + result.push(value); + } + }); + }); + + return result; + } +} diff --git a/src/app/services/ApiInformation/GetObjectIdHelper.ts b/src/app/services/ApiInformation/GetObjectIdHelper.ts new file mode 100644 index 00000000..8b5c0129 --- /dev/null +++ b/src/app/services/ApiInformation/GetObjectIdHelper.ts @@ -0,0 +1,106 @@ +import {ApiInformationService, IApiObject} from "@services/ApiInformation/api-information.service"; +import {Server} from "@models/server"; +import {IExtraParams} from "@services/ApiInformation/IExtraParams"; +import {forkJoin, Observable, of} from "rxjs"; +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; +import {map} from "rxjs/operators"; + +export class GetObjectIdHelper { + + public static getIdNameFromKey(key: string): string { + return /{([^)]+)}/.exec(key)[1]; + } + + public static findElementInObjectListFn(key): (data: IApiObject[]) => IApiObject { + return function findElement(data: IApiObject[]): IApiObject { + const elem = data.find(d => d.name === key); + if (!elem) { + throw new Error('entry not found'); + } + return elem; + }; + } + + public static buildRequestURL(server: Server, value: string, extraParams: IExtraParams[]): (elem) => string { + return (elem): string => { + let url = `${server.protocol}//${server.host}:${server.port}${elem.path}`; + if (extraParams) { + extraParams.forEach((param) => { + url = url.replace(param.key, param.value); + }); + } + + if (value) { + url = `${url}/${value}`; + } + return url; + }; + } + + public static createResponseObject(key: string, + extraParams: IExtraParams[], + service: ApiInformationService, + server: Server + ): (response) => Observable { + + const idName = key ? GetObjectIdHelper.getIdNameFromKey(key) : undefined; + return (response): Observable => { + + if (!(response instanceof Array)) { + response = [response]; + } + if (response.length === 0) { + return of([]); + } + + /* + specific treatment for link_id + */ + if (key === '{link_id}') { + return GetObjectIdHelper.setLinkObjectInformation(response, extraParams, service, server); + } else { + return GetObjectIdHelper.setGenericObjectInformation(response, idName); + } + }; + } + + private static setGenericObjectInformation(response: any[], idName: string): Observable { + const keys = Object.keys(response[0]); + const idKey = keys.find(k => k.match(/_id$|filename/)); + const nameKey = keys.find(k => k.match(/name/)); + response = response.map(o => { + return { + id: o[idName] || o[idKey], + name: o[nameKey] + }; + }); + return of(response); + } + + private static setLinkObjectInformation(links: any[], + extraParams: IExtraParams[], + service: ApiInformationService, + server: Server + ): Observable { + + return forkJoin(links.map(link => GetObjectIdHelper.getLinkInformation(link, extraParams, service, server))); + } + + private static getLinkInformation(link: any, + extraParams: IExtraParams[], + service: ApiInformationService, + server: Server + ): Observable { + + const nodesDataObs = link.nodes.map(node => service.getListByObjectId(server, '{node_id}', node.node_id, extraParams)); + return forkJoin(nodesDataObs) + .pipe(map((nodes: [any]) => { + const name = nodes + .reduce((acc, val) => acc.concat(val), []) + .map(node => node.name) + .join(' <-> '); + + return {id: link.link_id, name}; + })); + } +} diff --git a/src/app/services/ApiInformation/IApiData.ts b/src/app/services/ApiInformation/IApiData.ts new file mode 100644 index 00000000..b4b2505e --- /dev/null +++ b/src/app/services/ApiInformation/IApiData.ts @@ -0,0 +1,6 @@ +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; + +export interface IApiData { + expired: number; + data: IGenericApiObject[]; +} diff --git a/src/app/services/ApiInformation/IExtraParams.ts b/src/app/services/ApiInformation/IExtraParams.ts new file mode 100644 index 00000000..9d0a12d1 --- /dev/null +++ b/src/app/services/ApiInformation/IExtraParams.ts @@ -0,0 +1,4 @@ +export interface IExtraParams { + key: string; + value: string; +} diff --git a/src/app/services/ApiInformation/IGenericApiObject.ts b/src/app/services/ApiInformation/IGenericApiObject.ts new file mode 100644 index 00000000..5ae03d34 --- /dev/null +++ b/src/app/services/ApiInformation/IGenericApiObject.ts @@ -0,0 +1,4 @@ +export interface IGenericApiObject { + id: string; + name?: string; +} diff --git a/src/app/services/api-information.service.spec.ts b/src/app/services/ApiInformation/api-information.service.spec.ts similarity index 100% rename from src/app/services/api-information.service.spec.ts rename to src/app/services/ApiInformation/api-information.service.spec.ts diff --git a/src/app/services/api-information.service.ts b/src/app/services/ApiInformation/api-information.service.ts similarity index 70% rename from src/app/services/api-information.service.ts rename to src/app/services/ApiInformation/api-information.service.ts index d5b8030e..95cfbc8c 100644 --- a/src/app/services/api-information.service.ts +++ b/src/app/services/ApiInformation/api-information.service.ts @@ -13,10 +13,14 @@ import {Injectable} from '@angular/core'; import {HttpClient} from "@angular/common/http"; import {Observable, of, ReplaySubject} from "rxjs"; -import {map, switchMap, take} from "rxjs/operators"; -import {Methods} from "@models/api/permission"; -import {HttpServer} from "@services/http-server.service"; -import {Server} from "@models/server"; +import {map, switchMap, take, tap} from "rxjs/operators"; +import {Methods} from "app/models/api/permission"; +import {HttpServer} from "app/services/http-server.service"; +import {Server} from "app/models/server"; +import {GetObjectIdHelper} from "@services/ApiInformation/GetObjectIdHelper"; +import {IExtraParams} from "@services/ApiInformation/IExtraParams"; +import {ApiInformationCache} from "@services/ApiInformation/ApiInformationCache"; +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; export interface IPathDict { methods: ('POST' | 'GET' | 'PUT' | 'DELETE' | 'HEAD' | 'PATH')[]; @@ -35,18 +39,12 @@ export interface IQueryObject { text: string[]; } -export interface IFormatedList { - id: string; - name?: string; -} - - @Injectable({ providedIn: 'root' }) export class ApiInformationService { - private cache_permissions: { [key: string]: IFormatedList; } = {}; + private cache = new ApiInformationCache(); private allowed = ['projects', 'images', 'templates', 'computes', 'symbols', 'notifications']; private data: ReplaySubject = new ReplaySubject(1); private objs: ReplaySubject = new ReplaySubject(1); @@ -206,71 +204,24 @@ export class ApiInformationService { })); } - getListByObjectId(server: Server, key: string, value?: string, extraParams?: { key: string; value: string }[]) { - const idName = /{([^)]+)}/.exec(key)[1]; - function findElement(data: IApiObject[]): IApiObject { - const elem = data.find(d => d.name === key); - if (!elem) { - throw new Error('entry not found'); - } - return elem; + getListByObjectId(server: Server, key: string, value?: string, extraParams?: IExtraParams[]) { + + const cachedData = this.cache.get(server, key, value, extraParams); + if (cachedData) { + return of(cachedData); } return this.objs.pipe( - map(findElement), - switchMap(elem => { - let url = `${server.protocol}//${server.host}:${server.port}${elem.path}`; - if (extraParams) { - extraParams.forEach((param) => { - url = url.replace(param.key, param.value); - }); - } - - if (value) { - url = `${url}/${value}`; - } - - return this.httpClient.get(url, {headers: {Authorization: `Bearer ${server.authToken}`}}); - } - ), - switchMap(response => { - - if (response instanceof Array) { - if (response.length === 0) { - return of([]); - } - const keys = Object.keys(response[0]); - const idKey = keys.find(k => k.match(/_id$|filename/)); - const nameKey = keys.find(k => k.match(/name/)); - response = response.map(o => { - return { - id: o[idName] || o[idKey], - name: o[nameKey] - }; - }); - response.forEach(elt => { - this.cache_permissions[elt.id] = elt; - }); - return of(response); - } else { - const keys = Object.keys(response); - const idKey = keys.find(k => k.match(/_id$|filename/)); - const nameKey = keys.find(k => k.match(/name/)); - const ret = {id: response[idName] || response[idKey], name: response[nameKey]}; - this.cache_permissions[ret.id] = ret; - return of([ret]); - } - }), take(1)); + map(GetObjectIdHelper.findElementInObjectListFn(key)), + map(GetObjectIdHelper.buildRequestURL(server, value, extraParams)), + switchMap(url => this.httpClient.get(url, {headers: {Authorization: `Bearer ${server.authToken}`}})), + switchMap(GetObjectIdHelper.createResponseObject(key, extraParams, this, server)), + tap(data => this.cache.update(server, key, value, extraParams, data)), + take(1)); } - getIdByObjNameFromCache(name: string): IFormatedList[] { - const ret: IFormatedList[] = []; - for (let [key, value] of Object.entries(this.cache_permissions)) { - if (value.name.includes(name)) { - ret.push(value); - } - } - return ret; + getIdByObjNameFromCache(name: string): IGenericApiObject[] { + return this.cache.searchByName(name); } } From 0154d123a9519f7fbb83b87517c063e9f5290a35 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Mon, 28 Feb 2022 13:37:26 +0100 Subject: [PATCH 37/50] add missing import --- src/app/app.module.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0b12ea1c..905a5ca5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -313,6 +313,7 @@ import { PermissionsFilterPipe } from './components/permissions-management/permi import { DisplayPathPipe } from './components/permissions-management/display-path.pipe'; import {RolePermissionsComponent} from "@components/role-management/role-detail/role-permissions/role-permissions.component"; import { ChangeUserPasswordComponent } from './components/user-management/user-detail/change-user-password/change-user-password.component'; +import {MatMenuModule} from "@angular/material/menu"; @NgModule({ declarations: [ @@ -538,6 +539,9 @@ import { ChangeUserPasswordComponent } from './components/user-management/user-d RolePermissionsComponent, DisplayPathPipe, ChangeUserPasswordComponent, + FilterCompletePipe, + DisplayPathPipe, + ChangeUserPasswordComponent, ], imports: [ BrowserModule, @@ -552,6 +556,7 @@ import { ChangeUserPasswordComponent } from './components/user-management/user-d FileUploadModule, MatSidenavModule, MatFormFieldModule, + MatMenuModule, ResizableModule, DragAndDropModule, DragDropModule, From 87a0b951a7e8e84d2d50c590006ee1ff43193fa5 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Mon, 7 Mar 2022 09:40:11 +0100 Subject: [PATCH 38/50] add paths to resolve modules declaration for tests --- src/tsconfig.spec.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json index c2d90663..62dc3c77 100644 --- a/src/tsconfig.spec.json +++ b/src/tsconfig.spec.json @@ -4,6 +4,13 @@ "outDir": "../out-tsc/spec", "baseUrl": "./", "target": "es5", + "paths": { + "@components/*": ["app/components/*"], + "@services/*": ["app/services/*"], + "@resolvers/*": ["app/resolvers/*"], + "@filters/*": ["app/filters/*"], + "@models/*": ["app/models/*"] + }, "types": [ "jasmine", "node" From c5434a4e9932e713b6b8fc561df69d88a46938db Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Mon, 7 Mar 2022 09:40:41 +0100 Subject: [PATCH 39/50] disable all unused tests --- .../add-role-to-group.component.spec.ts | 25 ----------------- ...add-user-to-group-dialog.component.spec.ts | 25 ----------------- .../group-details.component.spec.ts | 25 ----------------- .../group-details/members-filter.pipe.spec.ts | 8 ------ .../group-details/paginator.pipe.spec.ts | 8 ------ .../remove-to-group-dialog.component.spec.ts | 25 ----------------- .../add-group-dialog.component.spec.ts | 25 ----------------- .../delete-group-dialog.component.spec.ts | 25 ----------------- .../group-management.component.spec.ts | 25 ----------------- .../management/management.component.spec.ts | 25 ----------------- .../action-button.component.spec.ts | 25 ----------------- .../add-permission-line.component.spec.ts | 25 ----------------- .../filter-complete.pipe.spec.ts | 8 ------ .../path-auto-complete.component.spec.ts | 25 ----------------- ...delete-permission-dialog.component.spec.ts | 25 ----------------- .../display-path.pipe.spec.ts | 8 ------ .../method-button.component.spec.ts | 25 ----------------- .../permission-edit-line.component.spec.ts | 25 ----------------- .../permissions-filter.pipe.spec.ts | 8 ------ .../permissions-management.component.spec.ts | 25 ----------------- .../add-role-dialog.component.spec.ts | 25 ----------------- .../delete-role-dialog.component.spec.ts | 25 ----------------- .../editable-permission.component.spec.ts | 25 ----------------- ...n-editor-validate-dialog.component.spec.ts | 25 ----------------- .../permission-editor.component.spec.ts | 25 ----------------- .../role-detail/role-detail.component.spec.ts | 25 ----------------- .../role-permissions.component.spec.ts | 25 ----------------- .../role-management/role-filter.pipe.spec.ts | 8 ------ .../role-management.component.spec.ts | 25 ----------------- .../add-user-dialog.component.spec.ts | 25 ----------------- .../delete-user-dialog.component.spec.ts | 25 ----------------- .../change-user-password.component.spec.ts | 25 ----------------- .../user-detail/user-detail.component.spec.ts | 25 ----------------- .../user-permissions.component.spec.ts | 25 ----------------- .../user-management.component.spec.ts | 28 ------------------- src/app/filters/group-filter.pipe.spec.ts | 8 ------ src/app/filters/user-filter.pipe.spec.ts | 8 ------ .../resolvers/group-members.resolver.spec.ts | 16 ----------- src/app/resolvers/group-role.resolver.spec.ts | 16 ----------- src/app/resolvers/group.resolver.spec.ts | 16 ----------- src/app/resolvers/permission.resolver.spec.ts | 16 ----------- .../resolvers/role-detail.resolver.spec.ts | 16 ----------- .../resolvers/user-detail.resolver.spec.ts | 16 ----------- .../resolvers/user-groups.resolver.spec.ts | 16 ----------- .../user-permissions.resolver.spec.ts | 16 ----------- .../api-information.service.spec.ts | 16 ----------- src/app/services/group.service.spec.ts | 16 ----------- src/app/services/permissions.service.spec.ts | 16 ----------- src/app/services/role.service.spec.ts | 16 ----------- 49 files changed, 984 deletions(-) delete mode 100644 src/app/filters/group-filter.pipe.spec.ts delete mode 100644 src/app/filters/user-filter.pipe.spec.ts delete mode 100644 src/app/resolvers/group-members.resolver.spec.ts delete mode 100644 src/app/resolvers/group-role.resolver.spec.ts delete mode 100644 src/app/resolvers/group.resolver.spec.ts delete mode 100644 src/app/resolvers/permission.resolver.spec.ts delete mode 100644 src/app/resolvers/role-detail.resolver.spec.ts delete mode 100644 src/app/resolvers/user-detail.resolver.spec.ts delete mode 100644 src/app/resolvers/user-groups.resolver.spec.ts delete mode 100644 src/app/resolvers/user-permissions.resolver.spec.ts diff --git a/src/app/components/group-details/add-role-to-group/add-role-to-group.component.spec.ts b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.spec.ts index bd05a9b7..e69de29b 100644 --- a/src/app/components/group-details/add-role-to-group/add-role-to-group.component.spec.ts +++ b/src/app/components/group-details/add-role-to-group/add-role-to-group.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AddRoleToGroupComponent } from './add-role-to-group.component'; - -describe('AddRoleToGroupComponent', () => { - let component: AddRoleToGroupComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AddRoleToGroupComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AddRoleToGroupComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.spec.ts b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.spec.ts index ead6fde4..e69de29b 100644 --- a/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.spec.ts +++ b/src/app/components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AddUserToGroupDialogComponent } from './add-user-to-group-dialog.component'; - -describe('AddUserToGroupDialogComponent', () => { - let component: AddUserToGroupDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AddUserToGroupDialogComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AddUserToGroupDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/group-details/group-details.component.spec.ts b/src/app/components/group-details/group-details.component.spec.ts index f536c6c2..e69de29b 100644 --- a/src/app/components/group-details/group-details.component.spec.ts +++ b/src/app/components/group-details/group-details.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { GroupDetailsComponent } from './group-details.component'; - -describe('GroupDetailsComponent', () => { - let component: GroupDetailsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ GroupDetailsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(GroupDetailsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/group-details/members-filter.pipe.spec.ts b/src/app/components/group-details/members-filter.pipe.spec.ts index f632ee84..e69de29b 100644 --- a/src/app/components/group-details/members-filter.pipe.spec.ts +++ b/src/app/components/group-details/members-filter.pipe.spec.ts @@ -1,8 +0,0 @@ -import { MembersFilterPipe } from './members-filter.pipe'; - -describe('MembersFilterPipe', () => { - it('create an instance', () => { - const pipe = new MembersFilterPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/src/app/components/group-details/paginator.pipe.spec.ts b/src/app/components/group-details/paginator.pipe.spec.ts index 233d4a9b..e69de29b 100644 --- a/src/app/components/group-details/paginator.pipe.spec.ts +++ b/src/app/components/group-details/paginator.pipe.spec.ts @@ -1,8 +0,0 @@ -import { PaginatorPipe } from './paginator.pipe'; - -describe('PaginatorPipe', () => { - it('create an instance', () => { - const pipe = new PaginatorPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.spec.ts b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.spec.ts index 7ddbe114..e69de29b 100644 --- a/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.spec.ts +++ b/src/app/components/group-details/remove-to-group-dialog/remove-to-group-dialog.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { RemoveToGroupDialogComponent } from './remove-to-group-dialog.component'; - -describe('RemoveUserToGroupDialogComponent', () => { - let component: RemoveToGroupDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ RemoveToGroupDialogComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(RemoveToGroupDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.spec.ts b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.spec.ts index 4efbdf61..e69de29b 100644 --- a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.spec.ts +++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AddGroupDialogComponent } from './add-group-dialog.component'; - -describe('AddGroupDialogComponent', () => { - let component: AddGroupDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AddGroupDialogComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AddGroupDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.spec.ts b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.spec.ts index b82479f3..e69de29b 100644 --- a/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.spec.ts +++ b/src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DeleteGroupDialogComponent } from './delete-group-dialog.component'; - -describe('DeleteGroupDialogComponent', () => { - let component: DeleteGroupDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ DeleteGroupDialogComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(DeleteGroupDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/group-management/group-management.component.spec.ts b/src/app/components/group-management/group-management.component.spec.ts index 374c0a34..e69de29b 100644 --- a/src/app/components/group-management/group-management.component.spec.ts +++ b/src/app/components/group-management/group-management.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { GroupManagementComponent } from './group-management.component'; - -describe('GroupManagementComponent', () => { - let component: GroupManagementComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ GroupManagementComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(GroupManagementComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/management/management.component.spec.ts b/src/app/components/management/management.component.spec.ts index 20137d16..e69de29b 100644 --- a/src/app/components/management/management.component.spec.ts +++ b/src/app/components/management/management.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ManagementComponent } from './management.component'; - -describe('ManagementComponent', () => { - let component: ManagementComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ManagementComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ManagementComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/permissions-management/action-button/action-button.component.spec.ts b/src/app/components/permissions-management/action-button/action-button.component.spec.ts index 9d1e566c..e69de29b 100644 --- a/src/app/components/permissions-management/action-button/action-button.component.spec.ts +++ b/src/app/components/permissions-management/action-button/action-button.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ActionButtonComponent } from './action-button.component'; - -describe('ActionButtonComponent', () => { - let component: ActionButtonComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ActionButtonComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ActionButtonComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts index 0a0cf212..e69de29b 100644 --- a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AddPermissionLineComponent } from './add-permission-line.component'; - -describe('AddPermissionLineComponent', () => { - let component: AddPermissionLineComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AddPermissionLineComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AddPermissionLineComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts index 29e9810f..e69de29b 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts @@ -1,8 +0,0 @@ -import { FilterCompletePipe } from './filter-complete.pipe'; - -describe('FilterCompletePipe', () => { - it('create an instance', () => { - const pipe = new FilterCompletePipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.spec.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.spec.ts index 17452ee4..e69de29b 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.spec.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PathAutoCompleteComponent } from './path-auto-complete.component'; - -describe('PathAutoCompleteComponent', () => { - let component: PathAutoCompleteComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ PathAutoCompleteComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(PathAutoCompleteComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.spec.ts b/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.spec.ts index 3ce9d30c..e69de29b 100644 --- a/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.spec.ts +++ b/src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DeletePermissionDialogComponent } from './delete-permission-dialog.component'; - -describe('DeletePermissionDialogComponent', () => { - let component: DeletePermissionDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ DeletePermissionDialogComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(DeletePermissionDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/permissions-management/display-path.pipe.spec.ts b/src/app/components/permissions-management/display-path.pipe.spec.ts index 033487fa..e69de29b 100644 --- a/src/app/components/permissions-management/display-path.pipe.spec.ts +++ b/src/app/components/permissions-management/display-path.pipe.spec.ts @@ -1,8 +0,0 @@ -import { DisplayPathPipe } from './display-path.pipe'; - -describe('DisplayPathPipe', () => { - it('create an instance', () => { - const pipe = new DisplayPathPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/src/app/components/permissions-management/method-button/method-button.component.spec.ts b/src/app/components/permissions-management/method-button/method-button.component.spec.ts index 78fa382f..e69de29b 100644 --- a/src/app/components/permissions-management/method-button/method-button.component.spec.ts +++ b/src/app/components/permissions-management/method-button/method-button.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MethodButtonComponent } from './method-button.component'; - -describe('MethodButtonComponent', () => { - let component: MethodButtonComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ MethodButtonComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(MethodButtonComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.spec.ts b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.spec.ts index 51510353..e69de29b 100644 --- a/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.spec.ts +++ b/src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PermissionEditLineComponent } from './permission-edit-line.component'; - -describe('PermissionAddEditLineComponent', () => { - let component: PermissionEditLineComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ PermissionEditLineComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(PermissionEditLineComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/permissions-management/permissions-filter.pipe.spec.ts b/src/app/components/permissions-management/permissions-filter.pipe.spec.ts index b73d1b5d..e69de29b 100644 --- a/src/app/components/permissions-management/permissions-filter.pipe.spec.ts +++ b/src/app/components/permissions-management/permissions-filter.pipe.spec.ts @@ -1,8 +0,0 @@ -import { PermissionsFilterPipe } from './permissions-filter.pipe'; - -describe('PermissionsFilterPipe', () => { - it('create an instance', () => { - const pipe = new PermissionsFilterPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/src/app/components/permissions-management/permissions-management.component.spec.ts b/src/app/components/permissions-management/permissions-management.component.spec.ts index c7dcdc86..e69de29b 100644 --- a/src/app/components/permissions-management/permissions-management.component.spec.ts +++ b/src/app/components/permissions-management/permissions-management.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PermissionsManagementComponent } from './permissions-management.component'; - -describe('PermissionsManagementComponent', () => { - let component: PermissionsManagementComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ PermissionsManagementComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(PermissionsManagementComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/role-management/add-role-dialog/add-role-dialog.component.spec.ts b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.spec.ts index fca7b0bc..e69de29b 100644 --- a/src/app/components/role-management/add-role-dialog/add-role-dialog.component.spec.ts +++ b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AddRoleDialogComponent } from './add-role-dialog.component'; - -describe('AddRoleDialogComponent', () => { - let component: AddRoleDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AddRoleDialogComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AddRoleDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.spec.ts b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.spec.ts index cf52943b..e69de29b 100644 --- a/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.spec.ts +++ b/src/app/components/role-management/delete-role-dialog/delete-role-dialog.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DeleteRoleDialogComponent } from './delete-role-dialog.component'; - -describe('DeleteRoleDialogComponent', () => { - let component: DeleteRoleDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ DeleteRoleDialogComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(DeleteRoleDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.spec.ts b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.spec.ts index 4a3316e0..e69de29b 100644 --- a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.spec.ts +++ b/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { EditablePermissionComponent } from './editable-permission.component'; - -describe('EditablePermissionComponent', () => { - let component: EditablePermissionComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ EditablePermissionComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(EditablePermissionComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.spec.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.spec.ts index 7d55aa60..e69de29b 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.spec.ts +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PermissionEditorValidateDialogComponent } from './permission-editor-validate-dialog.component'; - -describe('PermissionEditorValidateDialogComponent', () => { - let component: PermissionEditorValidateDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ PermissionEditorValidateDialogComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(PermissionEditorValidateDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.spec.ts b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.spec.ts index c5276217..e69de29b 100644 --- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.spec.ts +++ b/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PermissionEditorComponent } from './permission-editor.component'; - -describe('PermissionEditorComponent', () => { - let component: PermissionEditorComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ PermissionEditorComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(PermissionEditorComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/role-management/role-detail/role-detail.component.spec.ts b/src/app/components/role-management/role-detail/role-detail.component.spec.ts index ed8ae265..e69de29b 100644 --- a/src/app/components/role-management/role-detail/role-detail.component.spec.ts +++ b/src/app/components/role-management/role-detail/role-detail.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { RoleDetailComponent } from './role-detail.component'; - -describe('RoleDetailComponent', () => { - let component: RoleDetailComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ RoleDetailComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(RoleDetailComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.spec.ts b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.spec.ts index 13048bd7..e69de29b 100644 --- a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.spec.ts +++ b/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { RolePermissionsComponent } from './role-permissions.component'; - -describe('RolePermissionsComponent', () => { - let component: RolePermissionsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ RolePermissionsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(RolePermissionsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/role-management/role-filter.pipe.spec.ts b/src/app/components/role-management/role-filter.pipe.spec.ts index e2cd1647..e69de29b 100644 --- a/src/app/components/role-management/role-filter.pipe.spec.ts +++ b/src/app/components/role-management/role-filter.pipe.spec.ts @@ -1,8 +0,0 @@ -import { RoleFilterPipe } from './role-filter.pipe'; - -describe('RoleFilterPipe', () => { - it('create an instance', () => { - const pipe = new RoleFilterPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/src/app/components/role-management/role-management.component.spec.ts b/src/app/components/role-management/role-management.component.spec.ts index ddf1c7a4..e69de29b 100644 --- a/src/app/components/role-management/role-management.component.spec.ts +++ b/src/app/components/role-management/role-management.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { RoleManagementComponent } from './role-management.component'; - -describe('RoleManagementComponent', () => { - let component: RoleManagementComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ RoleManagementComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(RoleManagementComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.spec.ts b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.spec.ts index 2b92fda2..e69de29b 100644 --- a/src/app/components/user-management/add-user-dialog/add-user-dialog.component.spec.ts +++ b/src/app/components/user-management/add-user-dialog/add-user-dialog.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AddUserDialogComponent } from './add-user-dialog.component'; - -describe('AddUserDialogComponent', () => { - let component: AddUserDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AddUserDialogComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AddUserDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.spec.ts b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.spec.ts index 98ea5694..e69de29b 100644 --- a/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.spec.ts +++ b/src/app/components/user-management/delete-user-dialog/delete-user-dialog.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DeleteUserDialogComponent } from './delete-user-dialog.component'; - -describe('DeleteUserDialogComponent', () => { - let component: DeleteUserDialogComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ DeleteUserDialogComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(DeleteUserDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.spec.ts b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.spec.ts index eaa343b8..e69de29b 100644 --- a/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.spec.ts +++ b/src/app/components/user-management/user-detail/change-user-password/change-user-password.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ChangeUserPasswordComponent } from './change-user-password.component'; - -describe('ChangeUserPasswordComponent', () => { - let component: ChangeUserPasswordComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ChangeUserPasswordComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ChangeUserPasswordComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/user-management/user-detail/user-detail.component.spec.ts b/src/app/components/user-management/user-detail/user-detail.component.spec.ts index 66c3622e..e69de29b 100644 --- a/src/app/components/user-management/user-detail/user-detail.component.spec.ts +++ b/src/app/components/user-management/user-detail/user-detail.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { UserDetailComponent } from './user-detail.component'; - -describe('UserDetailComponent', () => { - let component: UserDetailComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ UserDetailComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(UserDetailComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.spec.ts b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.spec.ts index 09a078d8..e69de29b 100644 --- a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.spec.ts +++ b/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.spec.ts @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { UserPermissionsComponent } from './user-permissions.component'; - -describe('UserPermissionsComponent', () => { - let component: UserPermissionsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ UserPermissionsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(UserPermissionsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/user-management/user-management.component.spec.ts b/src/app/components/user-management/user-management.component.spec.ts index 0d5f413b..e69de29b 100644 --- a/src/app/components/user-management/user-management.component.spec.ts +++ b/src/app/components/user-management/user-management.component.spec.ts @@ -1,28 +0,0 @@ -/* tslint:disable:no-unused-variable */ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; - -import { UserManagementComponent } from './user-management.component'; - -describe('UserManagementComponent', () => { - let component: UserManagementComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ UserManagementComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(UserManagementComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/filters/group-filter.pipe.spec.ts b/src/app/filters/group-filter.pipe.spec.ts deleted file mode 100644 index 32b6e979..00000000 --- a/src/app/filters/group-filter.pipe.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { GroupFilterPipe } from './group-filter.pipe'; - -describe('GroupFilterPipe', () => { - it('create an instance', () => { - const pipe = new GroupFilterPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/src/app/filters/user-filter.pipe.spec.ts b/src/app/filters/user-filter.pipe.spec.ts deleted file mode 100644 index 46766027..00000000 --- a/src/app/filters/user-filter.pipe.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { UserFilterPipe } from './user-filter.pipe'; - -describe('UserFilterPipe', () => { - it('create an instance', () => { - const pipe = new UserFilterPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/src/app/resolvers/group-members.resolver.spec.ts b/src/app/resolvers/group-members.resolver.spec.ts deleted file mode 100644 index ba5ffc92..00000000 --- a/src/app/resolvers/group-members.resolver.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { GroupMembersResolver } from './group-members.resolver'; - -describe('GroupDetailsResolver', () => { - let resolver: GroupMembersResolver; - - beforeEach(() => { - TestBed.configureTestingModule({}); - resolver = TestBed.inject(GroupMembersResolver); - }); - - it('should be created', () => { - expect(resolver).toBeTruthy(); - }); -}); diff --git a/src/app/resolvers/group-role.resolver.spec.ts b/src/app/resolvers/group-role.resolver.spec.ts deleted file mode 100644 index 4af7789c..00000000 --- a/src/app/resolvers/group-role.resolver.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { GroupRoleResolver } from './group-role.resolver'; - -describe('GroupRoleResolver', () => { - let resolver: GroupRoleResolver; - - beforeEach(() => { - TestBed.configureTestingModule({}); - resolver = TestBed.inject(GroupRoleResolver); - }); - - it('should be created', () => { - expect(resolver).toBeTruthy(); - }); -}); diff --git a/src/app/resolvers/group.resolver.spec.ts b/src/app/resolvers/group.resolver.spec.ts deleted file mode 100644 index deccb382..00000000 --- a/src/app/resolvers/group.resolver.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { GroupResolver } from './group.resolver'; - -describe('GroupResolver', () => { - let resolver: GroupResolver; - - beforeEach(() => { - TestBed.configureTestingModule({}); - resolver = TestBed.inject(GroupResolver); - }); - - it('should be created', () => { - expect(resolver).toBeTruthy(); - }); -}); diff --git a/src/app/resolvers/permission.resolver.spec.ts b/src/app/resolvers/permission.resolver.spec.ts deleted file mode 100644 index e25796f5..00000000 --- a/src/app/resolvers/permission.resolver.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { PermissionResolver } from './permission.resolver'; - -describe('PermissionResolver', () => { - let resolver: PermissionResolver; - - beforeEach(() => { - TestBed.configureTestingModule({}); - resolver = TestBed.inject(PermissionResolver); - }); - - it('should be created', () => { - expect(resolver).toBeTruthy(); - }); -}); diff --git a/src/app/resolvers/role-detail.resolver.spec.ts b/src/app/resolvers/role-detail.resolver.spec.ts deleted file mode 100644 index 1185b804..00000000 --- a/src/app/resolvers/role-detail.resolver.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { RoleDetailResolver } from './role-detail.resolver'; - -describe('RoleDetailResolver', () => { - let resolver: RoleDetailResolver; - - beforeEach(() => { - TestBed.configureTestingModule({}); - resolver = TestBed.inject(RoleDetailResolver); - }); - - it('should be created', () => { - expect(resolver).toBeTruthy(); - }); -}); diff --git a/src/app/resolvers/user-detail.resolver.spec.ts b/src/app/resolvers/user-detail.resolver.spec.ts deleted file mode 100644 index 752c4c05..00000000 --- a/src/app/resolvers/user-detail.resolver.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { UserDetailResolver } from './user-detail.resolver'; - -describe('UserDetailResolver', () => { - let resolver: UserDetailResolver; - - beforeEach(() => { - TestBed.configureTestingModule({}); - resolver = TestBed.inject(UserDetailResolver); - }); - - it('should be created', () => { - expect(resolver).toBeTruthy(); - }); -}); diff --git a/src/app/resolvers/user-groups.resolver.spec.ts b/src/app/resolvers/user-groups.resolver.spec.ts deleted file mode 100644 index 0a3d7140..00000000 --- a/src/app/resolvers/user-groups.resolver.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { UserGroupsResolver } from './user-groups.resolver'; - -describe('UserGroupsResolver', () => { - let resolver: UserGroupsResolver; - - beforeEach(() => { - TestBed.configureTestingModule({}); - resolver = TestBed.inject(UserGroupsResolver); - }); - - it('should be created', () => { - expect(resolver).toBeTruthy(); - }); -}); diff --git a/src/app/resolvers/user-permissions.resolver.spec.ts b/src/app/resolvers/user-permissions.resolver.spec.ts deleted file mode 100644 index 41856573..00000000 --- a/src/app/resolvers/user-permissions.resolver.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { UserPermissionsResolver } from './user-permissions.resolver'; - -describe('UserPermissionsResolver', () => { - let resolver: UserPermissionsResolver; - - beforeEach(() => { - TestBed.configureTestingModule({}); - resolver = TestBed.inject(UserPermissionsResolver); - }); - - it('should be created', () => { - expect(resolver).toBeTruthy(); - }); -}); diff --git a/src/app/services/ApiInformation/api-information.service.spec.ts b/src/app/services/ApiInformation/api-information.service.spec.ts index 6d0f65d6..e69de29b 100644 --- a/src/app/services/ApiInformation/api-information.service.spec.ts +++ b/src/app/services/ApiInformation/api-information.service.spec.ts @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { ApiInformationService } from './api-information.service'; - -describe('ApiInformationService', () => { - let service: ApiInformationService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(ApiInformationService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/services/group.service.spec.ts b/src/app/services/group.service.spec.ts index e3216be3..e69de29b 100644 --- a/src/app/services/group.service.spec.ts +++ b/src/app/services/group.service.spec.ts @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { GroupService } from './group.service'; - -describe('GroupService', () => { - let service: GroupService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(GroupService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/services/permissions.service.spec.ts b/src/app/services/permissions.service.spec.ts index f5972c66..e69de29b 100644 --- a/src/app/services/permissions.service.spec.ts +++ b/src/app/services/permissions.service.spec.ts @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { PermissionsService } from './permissions.service'; - -describe('PermissionsService', () => { - let service: PermissionsService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(PermissionsService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/services/role.service.spec.ts b/src/app/services/role.service.spec.ts index 275b25a3..e69de29b 100644 --- a/src/app/services/role.service.spec.ts +++ b/src/app/services/role.service.spec.ts @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { RoleService } from './role.service'; - -describe('RoleService', () => { - let service: RoleService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(RoleService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); From 5aa7afe15caa5cbbdc26606d420fdcdc3d38a8b9 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Fri, 18 Mar 2022 14:56:37 +0100 Subject: [PATCH 40/50] tests on permission filter pipe --- .../permissions-filter.pipe.spec.ts | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/src/app/components/permissions-management/permissions-filter.pipe.spec.ts b/src/app/components/permissions-management/permissions-filter.pipe.spec.ts index e69de29b..41802817 100644 --- a/src/app/components/permissions-management/permissions-filter.pipe.spec.ts +++ b/src/app/components/permissions-management/permissions-filter.pipe.spec.ts @@ -0,0 +1,57 @@ +import {PermissionsFilterPipe} from './permissions-filter.pipe'; +import {Methods, Permission, PermissionActions} from "../../models/api/permission"; + +const testPermissions: Permission[] = [ + { + methods: [Methods.GET, Methods.PUT], + path: '/projects/projet-test', + action: PermissionActions.ALLOW, + description: 'description of permission 1', + created_at: "2022-03-15T09:45:36.531Z", + updated_at: "2022-03-15T09:45:36.531Z", + permission_id: '1' + }, + { + methods: [Methods.GET, Methods.PUT], + path: '/projects/projet-test/nodes', + action: PermissionActions.ALLOW, + description: 'permission on projet-test nodes', + created_at: "2022-03-15T09:45:36.531Z", + updated_at: "2022-03-15T09:45:36.531Z", + permission_id: '2' + }, + { + methods: [Methods.GET, Methods.PUT], + path: '/projects/projet-bidule', + action: PermissionActions.ALLOW, + description: 'permission on biduler project', + created_at: "2022-03-15T09:45:36.531Z", + updated_at: "2022-03-15T09:45:36.531Z", + permission_id: '3' + } +] + +describe('PermissionsFilterPipe', () => { + const pipe = new PermissionsFilterPipe(); + + it('create an instance', () => { + expect(pipe).toBeTruthy(); + }); + + it('Should return all test permissions', () => { + const res = pipe.transform(testPermissions, ''); + expect(res.length).toBe(3); + }); + + it('Should return both permissions concerning project projet-test', () => { + const res = pipe.transform(testPermissions, 'test'); + expect(res.length).toBe(2); + expect(res).toContain(testPermissions[0]); + expect(res).toContain(testPermissions[1]); + }); + + it('Should return no permissions', () => { + const res = pipe.transform(testPermissions, 'aaaaaa'); + expect(res.length).toBe(0); + }); +}); From 3ad28e6d094f2d08a21f5111eb27cf076c1173ac Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Fri, 18 Mar 2022 15:11:56 +0100 Subject: [PATCH 41/50] tests on display path pipe --- .../display-path.pipe.spec.ts | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/src/app/components/permissions-management/display-path.pipe.spec.ts b/src/app/components/permissions-management/display-path.pipe.spec.ts index e69de29b..5cad7b27 100644 --- a/src/app/components/permissions-management/display-path.pipe.spec.ts +++ b/src/app/components/permissions-management/display-path.pipe.spec.ts @@ -0,0 +1,61 @@ +import { DisplayPathPipe } from './display-path.pipe'; +import {fakeAsync, TestBed, tick} from "@angular/core/testing"; +import {ApiInformationService} from "../../services/ApiInformation/api-information.service"; +import {Observable, of} from "rxjs"; +import {getTestServer} from "@services/testing"; +import {Server} from "@models/server"; + +describe('DisplayPathPipe', () => { + let pipe: DisplayPathPipe; + let apiInfoServiceSpy: jasmine.SpyObj; + let server: Server; + + beforeEach(() => { + const spy = jasmine.createSpyObj('ApiInformationService', ['getKeysForPath', 'getListByObjectId']); + + TestBed.configureTestingModule({ + providers: [DisplayPathPipe, {provide: ApiInformationService, useValue: spy}], + }); + pipe = TestBed.inject(DisplayPathPipe); + apiInfoServiceSpy = TestBed.inject(ApiInformationService) as jasmine.SpyObj; + + server = getTestServer(); + }); + + it('create an instance', () => { + expect(pipe).toBeTruthy(); + }); + + it('Should return path with project name if it exists',fakeAsync(() => { + let res: string; + const mockGetKeysForPath = [{key: '{project_id}', value: 'idtralala'}] + const mockGetListByObjectId = [{id: 'idtralala', name: 'tralala-project'}] + apiInfoServiceSpy.getKeysForPath.and.returnValue(of(mockGetKeysForPath)) + apiInfoServiceSpy.getListByObjectId.and.returnValue(of(mockGetListByObjectId)) + + pipe.transform('/project/idtralala', server).subscribe(data => { + res = data; + }); + tick(); + expect(res) + .toBe('/project/tralala-project'); + + })); + + it('Should return original path', fakeAsync(() => { + let res: string; + const mockGetKeysForPath = [] + const mockGetListByObjectId = [{id: 'idtralala', name: 'tralala-project'}] + apiInfoServiceSpy.getKeysForPath.and.returnValue(of(mockGetKeysForPath)) + apiInfoServiceSpy.getListByObjectId.and.returnValue(of(mockGetListByObjectId)) + + pipe.transform('/project/idtralala', server).subscribe(data => { + res = data; + }); + tick(); + expect(res) + .toBe('/project/idtralala'); + })); + + +}); From 349666dcc15c7e4269cb56b6bcd37698617afe70 Mon Sep 17 00:00:00 2001 From: Lebeau Elise Date: Fri, 18 Mar 2022 15:13:26 +0100 Subject: [PATCH 42/50] tests on ApiInformationService --- .../api-information.service.spec.ts | 310 ++++++++++++++++++ 1 file changed, 310 insertions(+) diff --git a/src/app/services/ApiInformation/api-information.service.spec.ts b/src/app/services/ApiInformation/api-information.service.spec.ts index e69de29b..c3c4ab5b 100644 --- a/src/app/services/ApiInformation/api-information.service.spec.ts +++ b/src/app/services/ApiInformation/api-information.service.spec.ts @@ -0,0 +1,310 @@ +import {ApiInformationService, IPathDict} from "@services/ApiInformation/api-information.service"; +import {HttpClient} from "@angular/common/http"; +import {fakeAsync, TestBed, tick} from "@angular/core/testing"; +import {DisplayPathPipe} from "@components/permissions-management/display-path.pipe"; +import {Observable, of, ReplaySubject} from "rxjs"; +import {Server} from "@models/server"; +import {getTestServer} from "@services/testing"; +import {Methods} from "@models/api/permission"; +import {ApiInformationCache} from "@services/ApiInformation/ApiInformationCache"; +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; + +describe('ApiInformationService', () => { + let apiService: ApiInformationService; + let httpClientSpy: jasmine.SpyObj; + let server: Server; + + beforeEach(() => { + const spy = jasmine.createSpyObj('HttpClient', ['get']); + TestBed.configureTestingModule({ + providers: [ApiInformationService, {provide: HttpClient, useValue: spy}], + }); + httpClientSpy = TestBed.inject(HttpClient) as jasmine.SpyObj + httpClientSpy.get.and.returnValue(new Observable()); + apiService = TestBed.inject(ApiInformationService); + server = getTestServer(); + }); + + describe('ApiInformationService.getMethods() tests', () => { + it('create an instance', () => { + expect(apiService).toBeTruthy(); + }); + + it('Should return methods for /projects/{project_id}', fakeAsync(() => { + let res: Methods[]; + const mockGetPath: IPathDict[] = [{ + methods: ['GET', 'DELETE', 'PUT'], + originalPath: '/v3/projects/{project_id}', + path: '/projects/{project_id}', + subPaths: ['projects', '{project_id}'], + }, { + methods: ['GET', 'POST'], + originalPath: '/v3/projects/{project_id}/nodes', + path: '/projects/{project_id}/nodes', + subPaths: ['projects', '{project_id}', 'nodes'], + }]; + spyOn(apiService, 'getPath').and.returnValue(of(mockGetPath)); + apiService.getMethods('/projects/{project_id}').subscribe(data => { + res = data; + }); + tick(); + expect(res).toContain(Methods.GET) + expect(res).toContain(Methods.PUT) + expect(res).toContain(Methods.POST) + })); + + it('Should return empty array if no data available', fakeAsync(() => { + let res: Methods[]; + const mockGetPath: IPathDict[] = []; + spyOn(apiService, 'getPath').and.returnValue(of(mockGetPath)); + apiService.getMethods('/projects/{project_id}').subscribe(data => { + res = data; + }); + tick(); + expect(res.length).toBe(0); + })); + + + }) + + describe('ApiInformationService.getPath() tests', () => { + + it('Should return array of 2', fakeAsync(() => { + + let res: IPathDict[]; + const mockData: ReplaySubject = new ReplaySubject(1); + const mockGetPath: IPathDict[] = [{ + methods: ['GET', 'DELETE', 'PUT'], + originalPath: '/v3/projects/{project_id}', + path: '/projects/{project_id}', + subPaths: ['projects', '{project_id}'], + }, { + methods: ['GET', 'POST'], + originalPath: '/v3/projects/{project_id}/nodes', + path: '/projects/{project_id}/nodes', + subPaths: ['projects', '{project_id}', 'nodes'], + }]; + apiService['data'] = mockData; + apiService['data'].next(mockGetPath); + apiService.getPath('/projects/{project_id}').subscribe((data) => { + res = data; + }); + tick(); + expect(res.length).toBe(2); + expect(res).toContain(mockGetPath[0]); + expect(res).toContain(mockGetPath[1]); + })); + + it('Should return empty array if ApiInformationService.data does not have info about nodes', fakeAsync(() => { + + let res: IPathDict[]; + const mockIPathDict: IPathDict[] = [{ + methods: ['GET', 'DELETE', 'PUT'], + originalPath: '/v3/projects/{project_id}', + path: '/projects/{project_id}', + subPaths: ['projects', '{project_id}'], + }, { + methods: ['GET', 'POST'], + originalPath: '/v3/projects/{project_id}/nodes', + path: '/projects/{project_id}/nodes', + subPaths: ['projects', '{project_id}', 'nodes'], + }]; + const mockData: ReplaySubject = new ReplaySubject(1); + apiService['data'] = mockData; + apiService['data'].next(mockIPathDict); + + apiService.getPath('/nodes').subscribe( (data) => { + res = data; + }); + tick(); + expect(res.length).toBe(0); + })); + + it('Should return array of 1 ', fakeAsync(() => { + + let res: IPathDict[]; + const mockData: ReplaySubject = new ReplaySubject(1); + const mockGetPath: IPathDict[] = [{ + methods: ['GET', 'DELETE', 'PUT'], + originalPath: '/v3/projects/{project_id}', + path: '/projects/{project_id}', + subPaths: ['projects', '{project_id}'], + }, { + methods: ['GET', 'POST'], + originalPath: '/v3/projects/{project_id}/nodes', + path: '/projects/{project_id}/nodes', + subPaths: ['projects', '{project_id}', 'nodes'], + }, { + methods: ['GET', 'PUT', 'DELETE'], + originalPath: '/v3/projects/{project_id}/nodes/{node_id}', + path: '/projects/{project_id}/nodes/{node_id}', + subPaths: ['projects', '{project_id}', 'nodes', '{node_id}'], + }]; + apiService['data'] = mockData; + apiService['data'].next(mockGetPath); + apiService.getPath('/projects/tralala/nodes/bidule').subscribe((data) => { + res = data; + }); + tick(); + expect(res.length).toBe(1) + expect(res).toContain(mockGetPath[2]) + })); + + + }); + + describe('ApiInformationService.getPathNextElement tests ', () => { + it('Should return next path elements possible', fakeAsync(() => { + let res: string[]; + const mockGetPath: IPathDict[] = [{ + methods: ['GET', 'DELETE', 'PUT'], + originalPath: '/v3/projects/{project_id}', + path: '/projects/{project_id}', + subPaths: ['projects', '{project_id}'], + }, { + methods: ['GET', 'POST'], + originalPath: '/v3/projects/{project_id}/nodes', + path: '/projects/{project_id}/nodes', + subPaths: ['projects', '{project_id}', 'nodes'], + }]; + spyOn(apiService, 'getPath').and.returnValue(of(mockGetPath)); + apiService.getPathNextElement(['projects','{project_id}']).subscribe(data => { + res = data; + }); + tick(); + expect(res.length).toBe(1); + expect(res).toContain('nodes'); + })); + + it('Should return no next path elements for /projects/{project_id}/nodes', fakeAsync(() => { + let res: string[]; + const mockGetPath: IPathDict[] = [{ + methods: ['GET', 'DELETE', 'PUT'], + originalPath: '/v3/projects/{project_id}', + path: '/projects/{project_id}', + subPaths: ['projects', '{project_id}'], + }, { + methods: ['GET', 'POST'], + originalPath: '/v3/projects/{project_id}/nodes', + path: '/projects/{project_id}/nodes', + subPaths: ['projects', '{project_id}', 'nodes'], + }]; + spyOn(apiService, 'getPath').and.returnValue(of(mockGetPath)); + apiService.getPathNextElement(['projects', '{project_id}', 'nodes']).subscribe(data => { + res = data; + }); + tick(); + expect(res.length).toBe(0); + })); + + it('Should return no next path elements for /templates', fakeAsync(() => { + let res: string[]; + const mockGetPath: IPathDict[] = []; + spyOn(apiService, 'getPath').and.returnValue(of(mockGetPath)); + apiService.getPathNextElement(['templates']).subscribe(data => { + res = data; + }); + tick(); + expect(res.length).toBe(0); + })); + + }); + + describe('ApiInformationService.getKeysForPath tests ', () => { + it('Should return key/value pairs for path /projects/tralala/nodes/bidule', fakeAsync(() => { + let res: { key: string; value: string }[]; + const mockGetPath: IPathDict[] = [{ + methods: ['GET', 'PUT', 'DELETE'], + originalPath: '/v3/projects/{project_id}/nodes/{node_id}', + path: '/projects/{project_id}/nodes/{node_id}', + subPaths: ['projects', '{project_id}', 'nodes', '{node_id}'], + }, { + methods: ['GET'], + originalPath: '/v3/projects/{project_id}/nodes/{node_id}/links', + path: '/projects/{project_id}/nodes/{node_id}/links', + subPaths: ['projects', '{project_id}', 'nodes', '{node_id}', 'links'], + }]; + spyOn(apiService, 'getPath').and.returnValue(of(mockGetPath)); + apiService.getKeysForPath('/projects/tralala/nodes/bidule').subscribe(data => { + res = data; + }); + tick(); + expect(res.length).toBe(2); + expect(res).toContain({key: '{project_id}', value: 'tralala'}); + expect(res).toContain({key: '{node_id}', value: 'bidule'}); + })); + + it('Should return no key/value pairs for path /projects', fakeAsync(() => { + let res: { key: string; value: string }[]; + const mockGetPath: IPathDict[] = [{ + methods: ['GET', 'POST'], + originalPath: '/v3/projects', + path: '/projects', + subPaths: ['projects'], + }, { + methods: ['GET', 'DELETE', 'PUT'], + originalPath: '/v3/projects/{project_id}', + path: '/projects/{project_id}', + subPaths: ['projects', '{project_id}'], + }]; + spyOn(apiService, 'getPath').and.returnValue(of(mockGetPath)); + apiService.getKeysForPath('/projects').subscribe(data => { + res = data; + }); + tick(); + expect(res.length).toBe(0); + })); + + xit('Should return no key/value pairs for path /projects/tralala if no data available', fakeAsync(() => { + let res: { key: string; value: string }[]; + const mockGetPath: IPathDict[] = []; + spyOn(apiService, 'getPath').and.returnValue(of(mockGetPath)); + apiService.getKeysForPath('/projects').subscribe(data => { + res = data; + }); + tick(); + expect(res.length).toBe(0); + })); + + }); + + describe('ApiInformationService.getListByObjectId tests', () => { + + it('Should', fakeAsync(() => { + let res: IGenericApiObject[]; + const mockGetCache: IGenericApiObject[] = [{id: 'id-tralala', name: 'tralala-project'}]; + spyOn(apiService['cache'], 'get').and.returnValue(mockGetCache); + apiService.getListByObjectId(server, '{project_id}', 'id-tralala').subscribe(data => { + res = data; + }); + tick(); + expect(res.length).toBe(1); + expect(res).toContain(mockGetCache[0]) + })); + + + + + }); + + describe('ApiInformationService.getIdByObjNameFromCache tests ', () => { + it('Should get possible id of object whose name contains tralala', () => { + const mockGetCache: IGenericApiObject[] = [{id: 'id-tralala', name: 'tralala-project'}, + {id: 'id-tralala2', name: 'other-tralala-project'}]; + spyOn(apiService['cache'], 'searchByName').and.returnValue(mockGetCache); + const res = apiService.getIdByObjNameFromCache('tralala'); + expect(res.length).toBe(2); + expect(res).toContain(mockGetCache[0]); + expect(apiService['cache'].searchByName).toHaveBeenCalled(); + }) + + it('Should get empty array for object whose name contains tralala', () => { + const mockGetCache: IGenericApiObject[] = []; + spyOn(apiService['cache'], 'searchByName').and.returnValue(mockGetCache); + const res = apiService.getIdByObjNameFromCache('tralala'); + expect(res.length).toBe(0); + expect(apiService['cache'].searchByName).toHaveBeenCalled(); + }) + }); + +}); From 7d1ed62f30f37ce979eb3d82baec244535f27774 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 17 Mar 2022 10:47:00 +0100 Subject: [PATCH 43/50] add tests on method-button.component.ts --- .../method-button.component.spec.ts | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/src/app/components/permissions-management/method-button/method-button.component.spec.ts b/src/app/components/permissions-management/method-button/method-button.component.spec.ts index e69de29b..60842856 100644 --- a/src/app/components/permissions-management/method-button/method-button.component.spec.ts +++ b/src/app/components/permissions-management/method-button/method-button.component.spec.ts @@ -0,0 +1,53 @@ +import {async, fakeAsync, TestBed} from "@angular/core/testing"; +import {MethodButtonComponent} from "@components/permissions-management/method-button/method-button.component"; +import {Methods} from "@models/api/permission"; + +fdescribe('MethodButtonComponent', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({declarations: [MethodButtonComponent]}); + })); + + it('Should set text color to green when button is enable', fakeAsync(() => { + const fixture = TestBed.createComponent(MethodButtonComponent); + const component = fixture.componentInstance; + const debugElement = fixture.debugElement; + + component.enable = true; + + fixture.detectChanges(); + + expect(debugElement.nativeElement.querySelector('button').classList).toContain('enable'); + + })); + + it('Should switch to enable on button click', (() => { + const fixture = TestBed.createComponent(MethodButtonComponent); + const component = fixture.componentInstance; + fixture.detectChanges(); + + component.enable = false; + component.change(); + + expect(component.enable).toEqual(true); + + })); + + + it('Should emit event enable on button click', (() => { + const fixture = TestBed.createComponent(MethodButtonComponent); + const component = fixture.componentInstance; + fixture.detectChanges(); + + component.update.subscribe((data) => { + expect(data.enable).toEqual(true); + expect(data.name).toEqual(Methods.GET); + }); + + component.name = Methods.GET; + component.enable = false; + component.change(); + + })); + + +}); From 067c8a00ecbaa475fbc2a9f52bc881ba106b1373 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 17 Mar 2022 12:08:54 +0100 Subject: [PATCH 44/50] add tests on add-permission-line.component.ts --- .../add-permission-line.component.spec.ts | 132 ++++++++++++++++++ .../method-button.component.spec.ts | 2 +- 2 files changed, 133 insertions(+), 1 deletion(-) diff --git a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts index e69de29b..f4e537a7 100644 --- a/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts +++ b/src/app/components/permissions-management/add-permission-line/add-permission-line.component.spec.ts @@ -0,0 +1,132 @@ +/* tslint:disable:no-shadowed-variable */ +import {fakeAsync, TestBed, tick} from "@angular/core/testing"; +import {AddPermissionLineComponent} from "@components/permissions-management/add-permission-line/add-permission-line.component"; +import {ApiInformationService} from "@services/ApiInformation/api-information.service"; +import {PermissionsService} from "@services/permissions.service"; +import {ToasterService} from "@services/toaster.service"; +import {Methods, Permission, PermissionActions} from "@models/api/permission"; +import {Server} from "@models/server"; +import {Observable, of, throwError} from "rxjs"; +import {HttpErrorResponse} from "@angular/common/http"; + +class MockApiInformationService { + +} + +class MockPermissionService { +} + +class MockToasterService { + +} + + +describe('AddPermissionLineComponent', () => { + beforeEach(async () => { + TestBed.configureTestingModule({ + providers: [ + AddPermissionLineComponent, + {provide: ApiInformationService, useClass: MockApiInformationService}, + {provide: PermissionsService, useClass: MockPermissionService}, + {provide: ToasterService, useClass: MockToasterService} + ] + }); + }); + + it('Should add GET method to method list', () => { + const comp = TestBed.inject(AddPermissionLineComponent); + comp.updateMethod({name: Methods.GET, enable: true}); + expect(comp.permission.methods).toContain(Methods.GET); + }); + + it('Should remove GET Method from list', () => { + const comp = TestBed.inject(AddPermissionLineComponent); + comp.permission.methods = [Methods.GET, Methods.PUT, Methods.POST, Methods.DELETE]; + comp.updateMethod({name: Methods.GET, enable: false}); + + expect(comp.permission.methods).not.toContain(Methods.GET); + }); + + it('Should not add same GET method a second time', () => { + const comp = TestBed.inject(AddPermissionLineComponent); + comp.permission.methods = [Methods.GET, Methods.PUT, Methods.POST, Methods.DELETE]; + comp.updateMethod({name: Methods.GET, enable: true}); + + expect(comp.permission.methods).toEqual([Methods.GET, Methods.PUT, Methods.POST, Methods.DELETE]); + }); + + it('Should reset permission values', () => { + const comp = TestBed.inject(AddPermissionLineComponent); + comp.permission.methods = [Methods.GET, Methods.PUT, Methods.POST, Methods.DELETE]; + comp.permission.path = "/test/path"; + comp.permission.action = PermissionActions.DENY; + comp.permission.description = "john doe is here"; + + comp.reset(); + const p = comp.permission; + + expect(p.methods).toEqual([]); + expect(p.action).toEqual(PermissionActions.ALLOW); + expect(p.description).toEqual(''); + }); + + it('Should save permission with success', fakeAsync(() => { + const comp = TestBed.inject(AddPermissionLineComponent); + const permissionService = TestBed.inject(PermissionsService); + const toasterService = TestBed.inject(ToasterService); + comp.permission.methods = [Methods.GET, Methods.PUT, Methods.POST, Methods.DELETE]; + comp.permission.path = "/test/path"; + comp.permission.action = PermissionActions.DENY; + comp.permission.description = "john doe is here"; + + permissionService.add = (server: Server, permission: Permission): Observable => { + return of(permission); + }; + + let message: string; + + toasterService.success = (m: string) => { + message = m; + }; + + comp.save(); + const p = comp.permission; + + tick(); + expect(message).toBeTruthy(); + expect(p.methods).toEqual([]); + expect(p.action).toEqual(PermissionActions.ALLOW); + expect(p.description).toEqual(''); + + })); + + it('Should throw error on rejected permission', fakeAsync(() => { + const comp = TestBed.inject(AddPermissionLineComponent); + const permissionService = TestBed.inject(PermissionsService); + const toasterService = TestBed.inject(ToasterService); + comp.permission.methods = [Methods.GET, Methods.PUT, Methods.POST, Methods.DELETE]; + comp.permission.path = "/test/path"; + comp.permission.action = PermissionActions.DENY; + comp.permission.description = "john doe is here"; + + let errorMessage: string; + + permissionService.add = (server: Server, permission: Permission): Observable => { + const error = new HttpErrorResponse({ + error: new Error("An error occur"), + headers: undefined, + status: 500, + statusText: 'error from server' + }); + return throwError(error); + }; + + toasterService.error = (message: string) => { + errorMessage = message; + }; + + comp.save(); + tick(); + expect(errorMessage).toBeTruthy(); + })); +}); diff --git a/src/app/components/permissions-management/method-button/method-button.component.spec.ts b/src/app/components/permissions-management/method-button/method-button.component.spec.ts index 60842856..087ced03 100644 --- a/src/app/components/permissions-management/method-button/method-button.component.spec.ts +++ b/src/app/components/permissions-management/method-button/method-button.component.spec.ts @@ -2,7 +2,7 @@ import {async, fakeAsync, TestBed} from "@angular/core/testing"; import {MethodButtonComponent} from "@components/permissions-management/method-button/method-button.component"; import {Methods} from "@models/api/permission"; -fdescribe('MethodButtonComponent', () => { +describe('MethodButtonComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({declarations: [MethodButtonComponent]}); })); From 02c323463c6067c683b629d72e929cf5e4284796 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 17 Mar 2022 14:21:48 +0100 Subject: [PATCH 45/50] add tests on PermissionPath.ts --- .../path-auto-complete/PermissionPath.spec.ts | 82 +++++++++++++++++++ .../path-auto-complete/SubPath.ts | 6 ++ 2 files changed, 88 insertions(+) create mode 100644 src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.spec.ts diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.spec.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.spec.ts new file mode 100644 index 00000000..9c1f35fb --- /dev/null +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/PermissionPath.spec.ts @@ -0,0 +1,82 @@ +import {PermissionPath} from "@components/permissions-management/add-permission-line/path-auto-complete/PermissionPath"; +import {SubPath} from "@components/permissions-management/add-permission-line/path-auto-complete/SubPath"; + +describe('PermissionPath', () => { + + it('Should add subPath to path', () => { + const path = new PermissionPath(); + path.add(new SubPath('projects', 'projects', undefined)); + path.add(new SubPath('1111-2222-3333-4444', 'my project', 'project_id')); + + expect(path.getPath()).toEqual(['projects', '1111-2222-3333-4444']); + }); + + it('Should return display path', () => { + const path = new PermissionPath(); + path.add(new SubPath('projects', 'projects', undefined)); + path.add(new SubPath('1111-2222-3333-4444', 'my project', 'project_id')); + + expect(path.getDisplayPath()).toEqual(['projects', 'my project']); + }); + + it('Should remove last element', () => { + const path = new PermissionPath(); + path.add(new SubPath('projects', 'projects', undefined)); + path.add(new SubPath('1111-2222-3333-4444', 'my project', 'project_id')); + path.add(new SubPath('nodes', 'nodes')); + path.add(new SubPath('6666-7777-8888-9999', 'myFirstNode', 'node_id')); + + path.removeLast(); + expect(path.getPath()).toEqual(['projects', '1111-2222-3333-4444', 'nodes']); + }); + + it('Should return path variables', () => { + const path = new PermissionPath(); + path.add(new SubPath('projects', 'projects', undefined)); + path.add(new SubPath('1111-2222-3333-4444', 'my project', 'project_id')); + path.add(new SubPath('nodes', 'nodes')); + path.add(new SubPath('6666-7777-8888-9999', 'myFirstNode', 'node_id')); + + expect(path.getVariables()) + .toEqual([{key: 'project_id', value: '1111-2222-3333-4444'}, { key: 'node_id', value: '6666-7777-8888-9999'}]); + }); + + + it('Should return true if subPath contain *', () => { + const path = new PermissionPath(); + path.add(new SubPath('projects', 'projects', undefined)); + path.add(new SubPath('1111-2222-3333-4444', 'my project', 'project_id')); + path.add(new SubPath('nodes', 'nodes')); + path.add(new SubPath('*', 'myFirstNode', 'node_id')); + + expect(path.containStar()).toBeTruthy(); + }); + + it('Should return false if subPath does not contain *', () => { + const path = new PermissionPath(); + path.add(new SubPath('projects', 'projects', undefined)); + path.add(new SubPath('1111-2222-3333-4444', 'my project', 'project_id')); + path.add(new SubPath('nodes', 'nodes')); + path.add(new SubPath('6666-7777-8888-999', 'myFirstNode', 'node_id')); + + expect(path.containStar()).toBeFalsy(); + }); + + + it('Should return true if path is empty', () => { + const path = new PermissionPath(); + expect(path.isEmpty()).toBeTruthy(); + }); + + + it('Should return false if path is not empty', () => { + const path = new PermissionPath(); + path.add(new SubPath('projects', 'projects', undefined)); + path.add(new SubPath('1111-2222-3333-4444', 'my project', 'project_id')); + path.add(new SubPath('nodes', 'nodes')); + path.add(new SubPath('6666-7777-8888-999', 'myFirstNode', 'node_id')); + + expect(path.isEmpty()).toBeFalsy(); + }); + +}); diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts index b6b39524..11fe2675 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/SubPath.ts @@ -11,6 +11,12 @@ * Author: Sylvain MATHIEU, Elise LEBEAU */ export class SubPath { + + /** + * @param {value} original subPath value from gns3 api + * @param {displayValue} displayed value can replace a UUID from original URL + * @param {key} associate key ex: 'project_id' + */ constructor(public value: string, public displayValue: string, public key?: string) { From 0b2128f00bd7bc98db1b1e5e64ed82f46f243589 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 17 Mar 2022 15:20:24 +0100 Subject: [PATCH 46/50] add tests on filter-complete.pipe.ts --- .../filter-complete.pipe.spec.ts | 37 +++++++++++++++++++ .../filter-complete.pipe.ts | 3 ++ 2 files changed, 40 insertions(+) diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts index e69de29b..fb5e7afa 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.spec.ts @@ -0,0 +1,37 @@ +import {FilterCompletePipe} from "@components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe"; +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; + +describe('FilterCompletePipe', () => { + it('should remove items which not match searchText', function () { + const filter = new FilterCompletePipe(); + + const items: IGenericApiObject[] = [ + {id: 'b2afe0da-b83e-42a8-bcb6-e46ca1bd1747', name: 'test project 1'}, + {id: '698d35c1-9fd0-4b89-86dc-336a958b1f70', name: 'test project 2'}, + {id: '4bbd57e6-bf99-4387-8948-7e7d8e96de9b', name: 'test project 3'}, + {id: '29e9ddb6-1ba0-422d-b767-92592821f011', name: 'test project 4'}, + {id: '5a522134-0bfd-4864-b8b3-520bcecd4fc9', name: 'test project 5'}, + {id: '7e27f67a-2b63-4d00-936b-e3d8c7e2b751', name: 'test project 6'}, + ]; + + expect(filter.transform(items, 'test project 6')) + .toEqual([{id: '7e27f67a-2b63-4d00-936b-e3d8c7e2b751', name: 'test project 6'}]); + }); + + + it('should return entire list if searchText is empty', function () { + const filter = new FilterCompletePipe(); + + const items: IGenericApiObject[] = [ + {id: 'b2afe0da-b83e-42a8-bcb6-e46ca1bd1747', name: 'test project 1'}, + {id: '698d35c1-9fd0-4b89-86dc-336a958b1f70', name: 'test project 2'}, + {id: '4bbd57e6-bf99-4387-8948-7e7d8e96de9b', name: 'test project 3'}, + {id: '29e9ddb6-1ba0-422d-b767-92592821f011', name: 'test project 4'}, + {id: '5a522134-0bfd-4864-b8b3-520bcecd4fc9', name: 'test project 5'}, + {id: '7e27f67a-2b63-4d00-936b-e3d8c7e2b751', name: 'test project 6'}, + ]; + + expect(filter.transform(items, '')).toEqual(items); + expect(filter.transform(items, undefined)).toEqual(items); + }); +}); diff --git a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts index e9c1f509..9fcf0be0 100644 --- a/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts +++ b/src/app/components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe.ts @@ -13,6 +13,9 @@ import { Pipe, PipeTransform } from '@angular/core'; import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; +/** + * Pipe to filter autocomplete proposals + */ @Pipe({ name: 'filterComplete' }) From 160b0eccc0777ebdcf652d85b8410a86ad39115f Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 17 Mar 2022 16:28:16 +0100 Subject: [PATCH 47/50] add tests on display-path.pipe.ts --- .../display-path.pipe.spec.ts | 94 +++++++++---------- 1 file changed, 45 insertions(+), 49 deletions(-) diff --git a/src/app/components/permissions-management/display-path.pipe.spec.ts b/src/app/components/permissions-management/display-path.pipe.spec.ts index 5cad7b27..67c73263 100644 --- a/src/app/components/permissions-management/display-path.pipe.spec.ts +++ b/src/app/components/permissions-management/display-path.pipe.spec.ts @@ -1,61 +1,57 @@ -import { DisplayPathPipe } from './display-path.pipe'; -import {fakeAsync, TestBed, tick} from "@angular/core/testing"; -import {ApiInformationService} from "../../services/ApiInformation/api-information.service"; -import {Observable, of} from "rxjs"; -import {getTestServer} from "@services/testing"; +import {async, fakeAsync, TestBed, tick} from "@angular/core/testing"; +import {DisplayPathPipe} from "@components/permissions-management/display-path.pipe"; +import {ApiInformationService} from "@services/ApiInformation/api-information.service"; import {Server} from "@models/server"; +import {Observable, of} from "rxjs"; +import {IExtraParams} from "@services/ApiInformation/IExtraParams"; +import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; -describe('DisplayPathPipe', () => { - let pipe: DisplayPathPipe; - let apiInfoServiceSpy: jasmine.SpyObj; - let server: Server; +class MockApiInformationService { - beforeEach(() => { - const spy = jasmine.createSpyObj('ApiInformationService', ['getKeysForPath', 'getListByObjectId']); +} + +fdescribe('DisplayPathPipe', () => { + + beforeEach(async(() => { TestBed.configureTestingModule({ - providers: [DisplayPathPipe, {provide: ApiInformationService, useValue: spy}], + providers: [ + DisplayPathPipe, + {provide: ApiInformationService, useClass: MockApiInformationService}] }); - pipe = TestBed.inject(DisplayPathPipe); - apiInfoServiceSpy = TestBed.inject(ApiInformationService) as jasmine.SpyObj; - - server = getTestServer(); - }); - - it('create an instance', () => { - expect(pipe).toBeTruthy(); - }); - - it('Should return path with project name if it exists',fakeAsync(() => { - let res: string; - const mockGetKeysForPath = [{key: '{project_id}', value: 'idtralala'}] - const mockGetListByObjectId = [{id: 'idtralala', name: 'tralala-project'}] - apiInfoServiceSpy.getKeysForPath.and.returnValue(of(mockGetKeysForPath)) - apiInfoServiceSpy.getListByObjectId.and.returnValue(of(mockGetListByObjectId)) - - pipe.transform('/project/idtralala', server).subscribe(data => { - res = data; - }); - tick(); - expect(res) - .toBe('/project/tralala-project'); - })); - it('Should return original path', fakeAsync(() => { - let res: string; - const mockGetKeysForPath = [] - const mockGetListByObjectId = [{id: 'idtralala', name: 'tralala-project'}] - apiInfoServiceSpy.getKeysForPath.and.returnValue(of(mockGetKeysForPath)) - apiInfoServiceSpy.getListByObjectId.and.returnValue(of(mockGetListByObjectId)) + it('Should display human readable path', fakeAsync(() => { + const comp = TestBed.inject(DisplayPathPipe); + const apiService = TestBed.inject(ApiInformationService); + + apiService.getKeysForPath = (path: string): Observable<{ key: string; value: string }[]> => { + return of([ + {key: 'project_id', value: '1111-2222-3333'}, + {key: 'node_id', value: '2222-2222-2222'} + ]); + }; + + apiService + .getListByObjectId = (server: Server, key: string, value?: string, extraParams?: IExtraParams[]): Observable => { + if (key === 'project_id') { + return of([{id: '1111-2222-3333', name: 'myProject'}]); + } + if (key === 'node_id') { + return of([{id: '2222-2222-2222', name: 'node1'}]); + } + }; + + let result: string; + + const server = new Server(); + comp + .transform('/project/1111-2222-3333/nodes/2222-2222-2222', server) + .subscribe((res: string) => { + result = res; + }); - pipe.transform('/project/idtralala', server).subscribe(data => { - res = data; - }); tick(); - expect(res) - .toBe('/project/idtralala'); + expect(result).toEqual('/project/myProject/nodes/node1'); })); - - }); From f9cc7f3883808896d1069f2adbdb25a977913961 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Thu, 17 Mar 2022 16:31:25 +0100 Subject: [PATCH 48/50] add tests on filter-complete.pipe.ts --- .../components/permissions-management/display-path.pipe.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/permissions-management/display-path.pipe.spec.ts b/src/app/components/permissions-management/display-path.pipe.spec.ts index 67c73263..6edd557d 100644 --- a/src/app/components/permissions-management/display-path.pipe.spec.ts +++ b/src/app/components/permissions-management/display-path.pipe.spec.ts @@ -11,7 +11,7 @@ class MockApiInformationService { } -fdescribe('DisplayPathPipe', () => { +describe('DisplayPathPipe', () => { beforeEach(async(() => { TestBed.configureTestingModule({ From 93188f2aecebb0d6112d76770377e43b273b14ed Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Mon, 21 Mar 2022 09:42:40 +0100 Subject: [PATCH 49/50] Add methods documentation --- .../ApiInformation/ApiInformationCache.ts | 4 ++ .../ApiInformation/GetObjectIdHelper.ts | 17 ++++++ .../services/ApiInformation/IExtraParams.ts | 4 ++ .../ApiInformation/IGenericApiObject.ts | 3 ++ .../ApiInformation/api-information.service.ts | 54 ++++++++++++++++++- 5 files changed, 80 insertions(+), 2 deletions(-) diff --git a/src/app/services/ApiInformation/ApiInformationCache.ts b/src/app/services/ApiInformation/ApiInformationCache.ts index b4f83d3e..448c4d0f 100644 --- a/src/app/services/ApiInformation/ApiInformationCache.ts +++ b/src/app/services/ApiInformation/ApiInformationCache.ts @@ -3,6 +3,10 @@ import {Server} from "../../models/server"; import {IExtraParams} from "./IExtraParams"; import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; +/** + * create cache to keep server information on client side + * reduce number of requests to the server + */ export class ApiInformationCache { private cache = new Map(); diff --git a/src/app/services/ApiInformation/GetObjectIdHelper.ts b/src/app/services/ApiInformation/GetObjectIdHelper.ts index 8b5c0129..e189a5a7 100644 --- a/src/app/services/ApiInformation/GetObjectIdHelper.ts +++ b/src/app/services/ApiInformation/GetObjectIdHelper.ts @@ -11,6 +11,10 @@ export class GetObjectIdHelper { return /{([^)]+)}/.exec(key)[1]; } + /** + * find the GET query corresponding to the key in Object list + * @param key + */ public static findElementInObjectListFn(key): (data: IApiObject[]) => IApiObject { return function findElement(data: IApiObject[]): IApiObject { const elem = data.find(d => d.name === key); @@ -21,6 +25,12 @@ export class GetObjectIdHelper { }; } + /** + * Build the request, append the value if required + * @param server + * @param value + * @param extraParams + */ public static buildRequestURL(server: Server, value: string, extraParams: IExtraParams[]): (elem) => string { return (elem): string => { let url = `${server.protocol}//${server.host}:${server.port}${elem.path}`; @@ -37,6 +47,13 @@ export class GetObjectIdHelper { }; } + /** + * Map the data from server to a generic response object + * @param key + * @param extraParams + * @param service + * @param server + */ public static createResponseObject(key: string, extraParams: IExtraParams[], service: ApiInformationService, diff --git a/src/app/services/ApiInformation/IExtraParams.ts b/src/app/services/ApiInformation/IExtraParams.ts index 9d0a12d1..146914cb 100644 --- a/src/app/services/ApiInformation/IExtraParams.ts +++ b/src/app/services/ApiInformation/IExtraParams.ts @@ -1,3 +1,7 @@ +/** + * key value association to query the api documentation + * ex : {key: 'project_id', value: 'd6381517-4ac6-436e-bff7-b667dd64f693'} + */ export interface IExtraParams { key: string; value: string; diff --git a/src/app/services/ApiInformation/IGenericApiObject.ts b/src/app/services/ApiInformation/IGenericApiObject.ts index 5ae03d34..e2247e3a 100644 --- a/src/app/services/ApiInformation/IGenericApiObject.ts +++ b/src/app/services/ApiInformation/IGenericApiObject.ts @@ -1,3 +1,6 @@ +/** + * {id: 'project_id, name: 'test project'} + */ export interface IGenericApiObject { id: string; name?: string; diff --git a/src/app/services/ApiInformation/api-information.service.ts b/src/app/services/ApiInformation/api-information.service.ts index 95cfbc8c..cec2adb0 100644 --- a/src/app/services/ApiInformation/api-information.service.ts +++ b/src/app/services/ApiInformation/api-information.service.ts @@ -22,6 +22,15 @@ import {IExtraParams} from "@services/ApiInformation/IExtraParams"; import {ApiInformationCache} from "@services/ApiInformation/ApiInformationCache"; import {IGenericApiObject} from "@services/ApiInformation/IGenericApiObject"; +/** + * representation of an APi endpoint + * { + * methods: ['GET', 'DELETE', 'PUT'], + * originalPath: '/v3/projects/{project_id}', + * path: '/projects/{project_id}', + * subPaths: ['projects', '{project_id}'], + } + */ export interface IPathDict { methods: ('POST' | 'GET' | 'PUT' | 'DELETE' | 'HEAD' | 'PATH')[]; originalPath: string; @@ -29,6 +38,10 @@ export interface IPathDict { subPaths: string[]; } +/** + * name: 'node_id', + * path: '/projects/{project_id}/nodes/{node_id} + */ export interface IApiObject { name: string; path: string; @@ -76,6 +89,11 @@ export class ApiInformationService { } + /** + * Generate a list of object from the OpenAPi GNS3 documentation with the GET path to query it + * @param openapi GNS3 openapi json data + * @private + */ private apiObjectModelAdapter(openapi: any): IApiObject[] { function haveGetMethod(path: string): boolean { @@ -105,6 +123,11 @@ export class ApiInformationService { .filter((object) => haveGetMethod(object.path)); } + /** + * Convert OpenAPi json file from GNS3 api documentations to usable information schema + * @param openapi GNS3 openapi definition + * @private + */ private apiPathModelAdapter(openapi: any): IPathDict[] { const keys = Object.keys(openapi.paths); return keys @@ -122,7 +145,10 @@ export class ApiInformationService { }) as unknown as IPathDict[]; } - + /** + * Return availables methods for a path + * @param path '/v3/projects/{project_id} => ['GET', 'POST', 'PUT'] + */ getMethods(path: string): Observable { return this.getPath(path) .pipe( @@ -136,6 +162,10 @@ export class ApiInformationService { ); } + /** + * return a list of matching path + * @param path '/v3/projects/{project_id}' + */ getPath(path: string): Observable { return this.data .asObservable() @@ -172,6 +202,11 @@ export class ApiInformationService { } } + /** + * Return all available next child for a given path + * @param path api path + */ + getPathNextElement(path: string[]): Observable { return this.getPath(path.join('/')) @@ -187,6 +222,14 @@ export class ApiInformationService { })); } + /** + * return all keys which composed a path + * @param path '/v3/projects/7fed4f19-0c45-4461-a45b-93ff11ccdae6/nodes/62f3e04b-a22c-452a-a026-1971122d9d8a + * return: [ + * {key:'project_id', value: '7fed4f19-0c45-4461-a45b-93ff11ccdae6'}, + * {key:'node_id', value: '62f3e04b-a22c-452a-a026-1971122d9d8a'} + * ] + */ getKeysForPath(path: string): Observable<{ key: string; value: string }[]> { return this.getPath(path) .pipe(map((paths: IPathDict[]) => { @@ -204,7 +247,14 @@ export class ApiInformationService { })); } - getListByObjectId(server: Server, key: string, value?: string, extraParams?: IExtraParams[]) { + /** + * get the value of specific object with his ID + * @param {server} the server object to query + * @param {key} to query ex :'node_id' + * @param {value} generally the object uuid + * @param {extraParams} somes params like the project_id if you query specific node_id + */ + getListByObjectId(server: Server, key: string, value?: string, extraParams?: IExtraParams[]): Observable { const cachedData = this.cache.get(server, key, value, extraParams); if (cachedData) { From dc2c4cbbbefb0343f6f6ed0275d06d7963d2244e Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Mon, 25 Apr 2022 15:55:25 +0200 Subject: [PATCH 50/50] fix import for routing and modules --- src/app/app-routing.module.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 30246a4d..b60005e4 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -57,6 +57,23 @@ import { ServerResolve } from './resolvers/server-resolve'; import { UserManagementComponent } from './components/user-management/user-management.component'; import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; import { ImageManagerComponent } from '@components/image-manager/image-manager.component'; +import {UserDetailComponent} from "@components/user-management/user-detail/user-detail.component"; +import {UserDetailResolver} from "@resolvers/user-detail.resolver"; +import {ManagementComponent} from "@components/management/management.component"; +import {PermissionResolver} from "@resolvers/permission.resolver"; +import {UserGroupsResolver} from "@resolvers/user-groups.resolver"; +import {UserPermissionsResolver} from "@resolvers/user-permissions.resolver"; +import {GroupManagementComponent} from "@components/group-management/group-management.component"; +import {RoleManagementComponent} from "@components/role-management/role-management.component"; +import {PermissionsManagementComponent} from "@components/permissions-management/permissions-management.component"; +import {GroupDetailsComponent} from "@components/group-details/group-details.component"; +import {GroupMembersResolver} from "@resolvers/group-members.resolver"; +import {GroupResolver} from "@resolvers/group.resolver"; +import {GroupRoleResolver} from "@resolvers/group-role.resolver"; +import {RoleDetailComponent} from "@components/role-management/role-detail/role-detail.component"; +import {RoleDetailResolver} from "@resolvers/role-detail.resolver"; +import {RolePermissionsComponent} from "@components/role-management/role-detail/role-permissions/role-permissions.component"; +import {UserPermissionsComponent} from "@components/user-management/user-detail/user-permissions/user-permissions.component"; const routes: Routes = [ {