Add group management list

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

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,
   ],

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

@@ -0,0 +1,43 @@
+<div class="content">
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Groups management</h1>
+    </div>
+  </div>
+  <div class="default-content">
+    <table mat-table [dataSource]="sortedGroups" class="mat-elevation-z8" matSort (matSortChange)="sort($event)">
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="created_at">
+        <th mat-header-cell *matHeaderCellDef> Creation date</th>
+        <td mat-cell *matCellDef="let element"> {{element.created_at}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="updated_at">
+        <th mat-header-cell *matHeaderCellDef> last update</th>
+        <td mat-cell *matCellDef="let element"> {{element.updated_at}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="is_builtin">
+        <th mat-header-cell *matHeaderCellDef> is build in</th>
+        <td mat-cell *matCellDef="let element"> {{element.is_builtin}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell *matHeaderCellDef> </th>
+        <td mat-cell *matCellDef="let element"><mat-icon>delete</mat-icon></td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+
+    </table>
+  </div>
+</div>

src/app/components/group-management/group-management.component.scss

@@ -0,0 +1,4 @@
+table {
+  width: 100%;
+}
+

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

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

src/app/layouts/default-layout/default-layout.component.html

@@ -27,6 +27,10 @@
         <mat-icon>groups</mat-icon>
         <span>User management</span>
       </button>
+      <button mat-menu-item (click)="goToGroupManagement()">
+        <mat-icon>groups</mat-icon>
+        <span>Group management</span>
+      </button>
       <button mat-menu-item routerLink="/installed-software" [disabled]="!isInstalledSoftwareAvailable">
         <mat-icon>cloud_download</mat-icon>
         <span>Installed software</span>

src/app/layouts/default-layout/default-layout.component.ts

@@ -68,6 +68,13 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     this.shouldStopServersOnClosing = this.electronService.isElectronApp;
   }
 
+  goToGroupManagement() {
+    let serverId = this.router.url.split("/server/")[1].split("/")[0];
+    this.serverService.get(+serverId).then((server: Server) => {
+      this.router.navigate(['/server', server.id, 'group_management']);
+    });
+  }
+
   goToUserInfo() {
     let serverId = this.router.url.split("/server/")[1].split("/")[0];
     this.serverService.get(+serverId).then((server: Server) => {

src/app/models/groups/group.ts

@@ -0,0 +1,19 @@
+/*
+* 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 interface Group {
+  name: string;
+  created_at: string;
+  updated_at: string;
+  user_group_id: string;
+  is_builtin: boolean;
+}

src/app/services/group.service.spec.ts

@@ -0,0 +1,16 @@
+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();
+  });
+});

src/app/services/group.service.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 { 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";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GroupService {
+
+  constructor(
+    private httpServer: HttpServer
+  ) { }
+
+  getGroups(server: Server) {
+    return this.httpServer.get<Group[]>(server, '/groups');
+  }
+
+  getGroupMember(server: Server, groupId: string) {
+    return this.httpServer.get<User[]>(server, `/groups/${groupId}/members`);
+  }
+}