Merge branch 'master' into Support-node-label-edit-mode---only-by-menu

angular.json

@@ -18,7 +18,8 @@
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
-              "src/favicon.ico"
+              "src/favicon.ico",
+              "src/ReleaseNotes.txt"
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",

src/ReleaseNotes.txt

@@ -0,0 +1,16 @@
+GNS3 WebUI is web implementation of user interface for GNS3 software.
+
+Current version: 2019.2.0
+
+What's New
+- Help section added with information about third party components
+- Showing progress when server starting
+- Possibility to edit interface & node labels by using context menu
+- Enhancements in moving elements on map
+- Context menu extended with option to duplicate
+- Main menu extended with option to lock all items on map
+
+Bug Fixes
+- Removing issues with positioning interface labels while adding link between nodes on map
+- Context menu now is correctly placed
+- Entered text in text & style editor is now validated

src/app/app.module.ts

@@ -187,6 +187,7 @@ import { DefaultConsoleService } from './services/settings/default-console.servi
 import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
 import { NonNegativeValidator } from './validators/non-negative-validator';
 import { RotationValidator } from './validators/rotation-validator';
+import { DuplicateActionComponent } from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component';
 import { MapSettingService } from './services/mapsettings.service';
 import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
 import { HelpComponent } from './components/help/help.component';
@@ -224,6 +225,7 @@ if (environment.production) {
     EditStyleActionComponent,
     EditTextActionComponent,
     DeleteActionComponent,
+    DuplicateActionComponent,
     PacketFiltersActionComponent,
     StartCaptureActionComponent,
     StopCaptureActionComponent,

src/app/cartography/components/draggable-selection/draggable-selection.component.ts

@@ -50,7 +50,7 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
   ngOnInit() {
     const svg = select(this.svg);
 
-    this.mapSettingsService.isMapLocked.subscribe((value) => {
+    this.mapSettingsSubscription = this.mapSettingsService.isMapLocked.subscribe((value) => {
       this.isMapLocked = value;
     });
 

src/app/components/help/help.component.html

@@ -9,6 +9,12 @@
                     </mat-expansion-panel-header>
                     <div [innerHTML]="thirdpartylicenses"></div>
                 </mat-expansion-panel>
+                <mat-expansion-panel>
+                    <mat-expansion-panel-header>
+                        <mat-panel-title> Release notes </mat-panel-title>
+                    </mat-expansion-panel-header>
+                    <div [innerHTML]="releasenotes"></div>
+                </mat-expansion-panel>
             </mat-accordion>
         </div>
     </div>

src/app/components/help/help.component.ts

@@ -8,6 +8,7 @@ styleUrls: ['./help.component.scss']
 })
 export class HelpComponent implements OnInit {
     thirdpartylicenses = '';
+    releasenotes = '';
 
     constructor(
         private httpClient: HttpClient
@@ -23,5 +24,10 @@ export class HelpComponent implements OnInit {
                     this.thirdpartylicenses = 'File not found';
                 } 
             });
+
+        this.httpClient.get('ReleaseNotes.txt', {responseType: 'text'})
+            .subscribe(data => {
+                this.releasenotes = data.replace(new RegExp('\n', 'g'), "<br />")
+            });
     }
 }

src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.html

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="duplicate()">
+    <mat-icon>filter_none</mat-icon>
+    <span>Duplicate</span>
+</button>

src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.spec.ts

@@ -0,0 +1,78 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatMenuModule } from '@angular/material';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
+import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
+import { NodeService } from '../../../../../services/node.service';
+import { DrawingService } from '../../../../../services/drawing.service';
+import { MockedDrawingService, MockedNodeService } from '../../../project-map.component.spec';
+import { Node } from '../../../../../cartography/models/node';
+import { Drawing } from '../../../../../cartography/models/drawing';
+import { of } from 'rxjs';
+import { DuplicateActionComponent } from './duplicate-action.component';
+
+describe('DuplicateActionComponent', () => {
+    let component: DuplicateActionComponent;
+    let fixture: ComponentFixture<DuplicateActionComponent>;
+    let mockedNodeService: MockedNodeService = new MockedNodeService();
+    let mockedDrawingService: MockedDrawingService = new MockedDrawingService();
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [MatIconModule, MatMenuModule, NoopAnimationsModule],
+            providers: [
+                { provide: NodesDataSource,  useClass: NodesDataSource },
+                { provide: DrawingsDataSource, useClass: DrawingsDataSource },
+                { provide: NodeService, useValue: mockedNodeService },
+                { provide: DrawingService, useValue: mockedDrawingService }
+            ],
+            declarations: [DuplicateActionComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DuplicateActionComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call duplicate action in drawing service', () => {
+        let drawing = { drawing_id: '1' } as Drawing;
+        component.drawings = [drawing];
+        component.nodes = [];
+        spyOn(mockedDrawingService, 'duplicate').and.returnValue(of());
+
+        component.duplicate();
+
+        expect(mockedDrawingService.duplicate).toHaveBeenCalled();
+    });
+
+    it('should call duplicate action in node service', () => {
+        let node = { node_id: '1' } as Node;
+        component.nodes = [node];
+        component.drawings = [];
+        spyOn(mockedNodeService, 'duplicate').and.returnValue(of());
+
+        component.duplicate();
+
+        expect(mockedNodeService.duplicate).toHaveBeenCalled();
+    });
+
+    it('should call duplicate action in both services', () => {
+        let drawing = { drawing_id: '1' } as Drawing;
+        component.drawings = [drawing];
+        let node = { node_id: '1' } as Node;
+        component.nodes = [node];
+        spyOn(mockedDrawingService, 'duplicate').and.returnValue(of());
+        spyOn(mockedNodeService, 'duplicate').and.returnValue(of());
+
+        component.duplicate();
+
+        expect(mockedDrawingService.duplicate).toHaveBeenCalled();
+        expect(mockedNodeService.duplicate).toHaveBeenCalled();
+    });
+});

src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Server } from '../../../../../models/server';
+import { Node } from '../../../../../cartography/models/node';
+import { Drawing } from '../../../../../cartography/models/drawing';
+import { Project } from '../../../../../models/project';
+import { NodeService } from '../../../../../services/node.service';
+import { DrawingService } from '../../../../../services/drawing.service';
+import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
+import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
+
+@Component({
+selector: 'app-duplicate-action',
+templateUrl: './duplicate-action.component.html'
+})
+export class DuplicateActionComponent {
+    @Input() server: Server;
+    @Input() project: Project;
+    @Input() drawings: Drawing[];
+    @Input() nodes: Node[];
+    
+    constructor(
+        private nodeService: NodeService,
+        private nodesDataSource: NodesDataSource,
+        private drawingService: DrawingService,
+        private drawingsDataSource: DrawingsDataSource
+    ) {}
+
+    duplicate() {
+        for(let node of this.nodes) {
+            this.nodeService.duplicate(this.server, node).subscribe((node: Node) => {
+                this.nodesDataSource.add(node);
+            });
+        }
+
+        for(let drawing of this.drawings) {
+            this.drawingService.duplicate(this.server, drawing.project_id, drawing).subscribe((drawing: Drawing) => {
+                this.drawingsDataSource.add(drawing);
+            })
+        }
+    }
+}

src/app/components/project-map/context-menu/context-menu.component.html

@@ -8,6 +8,12 @@
       [server]="server"
       [nodes]="nodes"
     ></app-console-device-action>
+    <app-duplicate-action *ngIf="drawings.length>0 || nodes.length>0"
+      [server]="server"
+      [project]="project"
+      [nodes]="nodes"
+      [drawings]="drawings"
+    ></app-duplicate-action>
     <app-edit-style-action *ngIf="!projectService.isReadOnly(project) && drawings.length===1 && !hasTextCapabilities"
       [server]="server"
       [project]="project"

src/app/components/project-map/project-map.component.spec.ts

@@ -88,6 +88,10 @@ export class MockedNodeService {
   reloadAll(server: Server, project: Project) {
     return of();
   }
+
+  duplicate(server: Server, node: Node) {
+    return of(node);
+  }
 }
 
 export class MockedDrawingService {
@@ -98,6 +102,10 @@ export class MockedDrawingService {
     return of(this.drawing);
   }
 
+  duplicate(server: Server, project_id: string, drawing: Drawing) {
+    return of(drawing);
+  }
+
   updatePosition(_server: Server, _drawing: Drawing, _x: number, _y: number) {
     return of(this.drawing);
   }

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

@@ -135,4 +135,27 @@ describe('DrawingService', () => {
     const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/projects/myproject/drawings/id');
     expect(req.request.method).toEqual('DELETE');
   }));
+
+  it('should duplicate drawing', inject([DrawingService], (service: DrawingService) => {
+    const drawing = new Drawing();
+    drawing.project_id = "project_id_1";
+    drawing.drawing_id = "drawing_id_1";
+    drawing.x = 100;
+    drawing.y = 90;
+    drawing.z = 1;
+    drawing.rotation = 0;
+    drawing.svg = "<svg height=\"100\" width=\"200\"><rect fill=\"#ffffff\" fill-opacity=\"1.0\" height=\"100\" stroke=\"#000000\" stroke-width=\"2\" width=\"200\" /></svg>";
+
+    service.duplicate(server, drawing.project_id, drawing).subscribe();
+
+    const req = httpTestingController.expectOne(`http://127.0.0.1:3080/v2/projects/${drawing.project_id}/drawings`);
+    expect(req.request.method).toEqual('POST');
+    expect(req.request.body).toEqual({
+      svg: drawing.svg,
+      rotation: 0,
+      x: 110,
+      y: 100,
+      z: 1
+    });
+  }));
 });

src/app/services/drawing.service.ts

@@ -19,6 +19,16 @@ export class DrawingService {
     });
   }
 
+  duplicate(server: Server, project_id: string, drawing: Drawing) {
+    return this.httpServer.post<Drawing>(server, `/projects/${project_id}/drawings`, {
+      svg: drawing.svg,
+      rotation: drawing.rotation,
+      x: drawing.x + 10,
+      y: drawing.y + 10,
+      z: drawing.z
+    });
+  }
+
   updatePosition(server: Server, drawing: Drawing, x: number, y: number): Observable<Drawing> {
     return this.httpServer.put<Drawing>(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, {
       x: Math.round(x),

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

@@ -215,4 +215,15 @@ describe('NodeService', () => {
     const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/projects/myproject/nodes/id');
     expect(req.request.method).toEqual('DELETE');
   }));
+
+  it('should duplicate node', inject([NodeService], (service: NodeService) => {
+    const node = new Node();
+    node.project_id = "project_id_1";
+    node.node_id = "node_id_1";
+
+    service.duplicate(server, node).subscribe();
+
+    const req = httpTestingController.expectOne(`http://127.0.0.1:3080/v2/projects/${node.project_id}/nodes/${node.node_id}/duplicate`);
+    expect(req.request.method).toEqual('POST');
+  }));
 });

src/app/services/node.service.ts

@@ -75,4 +75,13 @@ export class NodeService {
   delete(server: Server, node: Node) {
     return this.httpServer.delete<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`);
   }
+
+  duplicate(server: Server, node: Node) {
+    return this.httpServer.post(server, `/projects/${node.project_id}/nodes/${node.node_id}/duplicate`, 
+    {
+      "x": node.x + 10,
+      "y": node.y + 10,
+      "z": node.z
+    });
+  }
 }