Add permission management

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 },
+      }
     ],
   },
   {

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,

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";

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";

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(

src/app/components/permissions-management/action-button/action-button.component.html

@@ -0,0 +1,6 @@
+<button [ngClass]="{allow: action === 'ALLOW', deny: action === 'DENY'}"
+  mat-button
+  [disabled]="disabled"
+  (click)="change()">
+  {{action}}
+</button>

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;
+}

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<ActionButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ActionButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<PermissionActions>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  change() {
+    this.action === PermissionActions.DENY ? this.action = PermissionActions.ALLOW : this.action = PermissionActions.DENY;
+    this.update.emit(this.action);
+  }
+}

src/app/components/permissions-management/add-permission-line/add-permission-line.component.html

@@ -0,0 +1,19 @@
+<mat-form-field appearance="fill">
+  <mat-label>Type</mat-label>
+  <mat-select [(ngModel)]="selectedType" (ngModelChange)="changeType($event)">
+    <mat-option *ngFor="let type of objectTypes" [value]="type">{{type}}</mat-option>
+  </mat-select>
+</mat-form-field>
+
+<mat-form-field appearance="fill">
+  <mat-select>
+    <mat-option *ngFor="let elt of elements" [value]="elt">{{elt.name ? elt.name : elt.filename}}</mat-option>
+  </mat-select>
+</mat-form-field>
+
+<button mat-button matTooltip="Save Changes" (click)="onSave()" color="primary">
+  <mat-icon>check_circle</mat-icon>
+</button>
+<button mat-button matTooltip="Cancel Changes" color="warn" (click)="onCancel()">
+  <mat-icon>cancel</mat-icon>
+</button>

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<AddPermissionLineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddPermissionLineComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddPermissionLineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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');
+  }
+}

src/app/components/permissions-management/delete-permission-dialog/delete-permission-dialog.component.html

@@ -0,0 +1,12 @@
+<div class="description">
+  <div>confirm deleting permission:</div>
+  <div>{{data.permission_id}}</div>
+  <div>{{data.path}}</div>
+  <div>{{data.methods.join(',')}}</div>
+  <div>{{data.action}}</div>
+  <div>{{data.description}}</div>
+</div>
+<div class="button">
+  <button mat-button mat-raised-button (click)="cancel()">No, cancel</button>
+  <button mat-button mat-raised-button color="primary" (click)="confirm()">Yes, remove</button>
+</div>

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;
+}

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<DeletePermissionDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DeletePermissionDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeletePermissionDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<DeletePermissionDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: Permission) { }
+
+  ngOnInit(): void {
+  }
+
+  cancel() {
+    this.dialog.close(false);
+  }
+
+  confirm() {
+    this.dialog.close(true);
+  }
+}

src/app/components/permissions-management/method-button/method-button.component.html

@@ -0,0 +1,7 @@
+<button
+  [disabled]="disabled"
+  [ngClass]="{enable: enable, disabled: disabled}"
+  (click)="change()"
+mat-button>
+  {{name}}
+</button>

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;
+}

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<MethodButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MethodButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MethodButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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});
+  }
+}

src/app/components/permissions-management/permission-edit-line/permission-edit-line.component.html

@@ -0,0 +1,57 @@
+<div class="permission">
+  <div class="action-button-bar">
+    <div>
+      <app-action-button
+        [action]="permission.action"
+        [disabled]="!isEditable"
+        (update)="permission.action = $event"></app-action-button>
+    </div>
+    <div class="methods">
+      <div *ngFor="let method of apiInformation.getMethods(permission.path) | async">
+        <app-method-button
+          [name]="method"
+          [disabled]="!isEditable"
+          [enable]="permission.methods.includes(method)"
+        (update)="onMethodUpdate($event)"></app-method-button>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div
+      [matTooltip]="permission.path"
+      matTooltipClass="custom-tooltip">
+      {{permission.path}}
+    </div>
+  </div>
+  <div>
+    <mat-form-field class="permission-input" appearance="none">
+      <input
+        [(ngModel)]="permission.description"
+        matInput
+        type="text"
+        placeholder="Description"
+        [matTooltip]="permission.description"
+        matTooltipClass="custom-tooltip"
+        [readonly]="!isEditable"/>
+    </mat-form-field>
+  </div>
+
+  <div class="button-bar">
+    <div>
+      <button mat-button matTooltip="Edit permission" (click)="isEditable = true" *ngIf="!isEditable">
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button mat-button matTooltip="Delete permission" (click)="onDelete()" *ngIf="!isEditable">
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+    <div>
+      <button mat-button matTooltip="Save Changes" (click)="onSave()" *ngIf="isEditable" color="primary">
+        <mat-icon>check_circle</mat-icon>
+      </button>
+      <button mat-button matTooltip="Cancel Changes" color="warn" (click)="onCancel()" *ngIf="isEditable">
+        <mat-icon>cancel</mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

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;
+}
+

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<PermissionEditLineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PermissionEditLineComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PermissionEditLineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<void>();
+
+  constructor(public apiInformation: ApiInformationService,
+              private permissionService: PermissionsService,
+              private toasterService: ToasterService,
+              private dialog: MatDialog) {
+  }
+
+
+  onDelete() {
+    this.dialog.open<DeletePermissionDialogComponent>(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);
+  }
+}

src/app/components/permissions-management/permissions-management.component.html

@@ -0,0 +1,24 @@
+<div class="content" *ngIf="isReady; else loading">
+  <div class="default-header">
+    <div class="row">
+      <button class="col" mat-raised-button color="primary" (click)="addPermission()" class="add-button" *ngIf="!newPermissionEdit" >
+        Add Permission
+      </button>
+    </div>
+  </div>
+
+  <div class="permission-content default-content">
+    <!--<ng-template #dynamic></ng-template>-->
+    <app-add-permission-line [server]="server" (addPermissionEvent)="updateList($event)" *ngIf="newPermissionEdit"></app-add-permission-line>
+    <div *ngFor="let permission of permissions">
+      <app-permission-add-edit-line
+        [permission]="permission"
+        (update)="refresh()"></app-permission-add-edit-line>
+    </div>
+  </div>
+</div>
+<ng-template #loading>
+  <div>
+    <mat-spinner class="loader"></mat-spinner>
+  </div>
+</ng-template>

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;
+}

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<PermissionsManagementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PermissionsManagementComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PermissionsManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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;
+  }
+}

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";

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";

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";
 

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";

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";

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";

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";

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";

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,

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,

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,

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,

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();
+  });
+});

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<IPathDict[]> = new ReplaySubject<IPathDict[]>(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<Methods[]> {
+    return this.getPath(path)
+      .pipe(
+        map((data: IPathDict[]) => {
+          const availableMethods = new Set<string>();
+
+          data.forEach((p: IPathDict) => {
+            p.methods.forEach(method => availableMethods.add(method));
+          });
+          return Array.from(availableMethods) as Methods[];
+        }),
+      );
+  }
+
+  getPath(path: string): Observable<IPathDict[]> {
+    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);
+    }
+  }
+}

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";