Merge branch 'master' into Support-for-editing-config-files

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "2019.2.0-alpha.6dev",
+  "version": "2019.2.0-alpha.7dev",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "developers@gns3.com"

src/ReleaseNotes.txt

@@ -3,14 +3,17 @@ 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
+- Editing interface labels on double click
-- Showing progress when server starting
+- Support for keyboard shortcuts
-- Possibility to edit interface & node labels by using context menu
+- Menu extended with option to delete currently opened project, export & import project
-- Enhancements in moving elements on map
+- Possibility to save current state of project
-- Context menu extended with option to duplicate
+- Ability to duplicate project from projects page
-- Main menu extended with option to lock all items on map
+- Node information dialog available from context menu
+- Topology summary widget on map view
+- Improvements in dialog styles
 
 Bug Fixes
-- Removing issues with positioning interface labels while adding link between nodes on map
+- Removing issues with opening console
 - Context menu now is correctly placed
-- Entered text in text & style editor is now validated
+- Text validation in dialogs
+- Removing errors with creating WebSockets

src/app/app.component.css

@@ -0,0 +1,3 @@
+mat-menu-panel {
+    min-height: 0px;
+}

src/app/app.module.ts

@@ -188,11 +188,17 @@ import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/no
 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 { MapSettingsService } from './services/mapsettings.service';
 import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
 import { HelpComponent } from './components/help/help.component';
 import { ConfigEditorDialogComponent } from './components/project-map/node-editors/config-editor/config-editor.component';
 import { EditConfigActionComponent } from './components/project-map/context-menu/actions/edit-config/edit-config-action.component';
+import { SaveProjectDialogComponent } from './components/projects/save-project-dialog/save-project-dialog.component';
+import { TopologySummaryComponent } from './components/topology-summary/topology-summary.component';
+import { ShowNodeActionComponent } from './components/project-map/context-menu/actions/show-node-action/show-node-action.component';
+import { InfoDialogComponent } from './components/project-map/info-dialog/info-dialog.component';
+import { InfoService } from './services/info.service';
+import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -311,12 +317,17 @@ if (environment.production) {
     NodesMenuComponent,
     AdbutlerComponent,
     ConsoleDeviceActionComponent,
+    ShowNodeActionComponent,
     ConsoleComponent,
     NodesMenuComponent,
     ProjectMapMenuComponent,
     HelpComponent,
     ConfigEditorDialogComponent,
-    EditConfigActionComponent
+    EditConfigActionComponent,
+    SaveProjectDialogComponent,
+    TopologySummaryComponent,
+    InfoDialogComponent,
+    BringToFrontActionComponent
   ],
   imports: [
     BrowserModule,
@@ -392,7 +403,8 @@ if (environment.production) {
     NodeCreatedLabelStylesFixer,
     NonNegativeValidator,
     RotationValidator,
-    MapSettingService
+    MapSettingsService,
+    InfoService
   ],
   entryComponents: [
     AddServerDialogComponent,
@@ -409,7 +421,9 @@ if (environment.production) {
     DeleteConfirmationDialogComponent,
     HelpDialogComponent,
     StartCaptureDialogComponent,
-    ConfigEditorDialogComponent
+    ConfigEditorDialogComponent,
+    SaveProjectDialogComponent,
+    InfoDialogComponent
   ],
   bootstrap: [AppComponent]
 })

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

@@ -21,7 +21,7 @@ import { MapLabel } from '../../models/map/map-label';
 import { MapLinkNode } from '../../models/map/map-link-node';
 import { select } from 'd3-selection';
 import { MapLink } from '../../models/map/map-link';
-import { MapSettingService } from '../../../services/mapsettings.service';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 
 describe('DraggableSelectionComponent', () => {
   let component: DraggableSelectionComponent;
@@ -123,7 +123,7 @@ describe('DraggableSelectionComponent', () => {
         { provide: DrawingsEventSource, useValue: drawingsEventSourceStub },
         { provide: GraphDataManager, useValue: mockedGraphDataManager },
         { provide: LinksEventSource, useValue: linksEventSourceStub },
-        { provide: MapSettingService, useClass: MapSettingService }
+        { provide: MapSettingsService, useClass: MapSettingsService }
       ],
       declarations: [DraggableSelectionComponent]
     }).compileComponents();

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

@@ -17,7 +17,7 @@ import { LabelWidget } from '../../widgets/label';
 import { InterfaceLabelWidget } from '../../widgets/interface-label';
 import { MapLinkNode } from '../../models/map/map-link-node';
 import { LinksEventSource } from '../../events/links-event-source';
-import { MapSettingService } from '../../../services/mapsettings.service';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 
 @Component({
   selector: 'app-draggable-selection',
@@ -44,7 +44,7 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
     private drawingsEventSource: DrawingsEventSource,
     private graphDataManager: GraphDataManager,
     private linksEventSource: LinksEventSource,
-    private mapSettingsService: MapSettingService
+    private mapSettingsService: MapSettingsService
   ) {}
 
   ngOnInit() {

src/app/common/progress/progress.component.spec.ts

@@ -7,7 +7,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { Router } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
 
-class MockedRouter {
+export class MockedRouter {
   events: BehaviorSubject<boolean>;
 
   constructor() {

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

@@ -3,6 +3,19 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-accordion>
+                <mat-expansion-panel>
+                    <mat-expansion-panel-header>
+                        <mat-panel-title> Useful shortcuts </mat-panel-title>
+                    </mat-expansion-panel-header>
+                    <mat-list>
+                        <mat-list-item> ctrl + + to zoom in </mat-list-item>
+                        <mat-list-item> ctrl + - to zoom out </mat-list-item>
+                        <mat-list-item> ctrl + 0 to reset zoom </mat-list-item>
+                        <mat-list-item> ctrl + a to select all items on map </mat-list-item>
+                        <mat-list-item> ctrl + shift + a to deselect all items on map </mat-list-item>
+                        <mat-list-item> ctrl + shift + s to go to preferences </mat-list-item>
+                    </mat-list>
+                </mat-expansion-panel>
                 <mat-expansion-panel>
                     <mat-expansion-panel-header>
                         <mat-panel-title> Third party components </mat-panel-title>

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.html

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="bringToFront()">
+    <mat-icon>vertical_align_top</mat-icon>
+    <span>Bring to front</span>
+</button>

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.spec.ts

@@ -0,0 +1,66 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BringToFrontActionComponent } from './bring-to-front-action.component';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MockedDrawingService, MockedDrawingsDataSource, MockedNodesDataSource, MockedNodeService } from '../../../project-map.component.spec';
+import { DrawingService } from '../../../../../services/drawing.service';
+import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
+import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
+import { NodeService } from '../../../../../services/node.service';
+import { Node } from '../../../../../cartography/models/node';
+import { of } from 'rxjs';
+import { ComponentFactoryResolver } from '@angular/core';
+import { Drawing } from '../../../../../cartography/models/drawing';
+
+describe('BringToFrontActionComponent', () => {
+  let component: BringToFrontActionComponent;
+  let fixture: ComponentFixture<BringToFrontActionComponent>;
+  let drawingService = new MockedDrawingService();
+  let drawingsDataSource = new MockedDrawingsDataSource();
+  let nodeService  = new MockedNodeService();
+  let nodesDataSource = new MockedNodesDataSource();
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+        imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
+        providers: [
+            { provide: DrawingService, useValue: drawingService },
+            { provide: DrawingsDataSource, useValue: drawingsDataSource },
+            { provide: NodeService, useValue: nodeService },
+            { provide: NodesDataSource, useValue: nodesDataSource },
+          ],
+        declarations: [BringToFrontActionComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BringToFrontActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call node service when bring to front action called', () => {
+    spyOn(nodeService, 'update').and.returnValue(of());
+    component.nodes = [{z: 0} as Node];
+    component.drawings = [];
+
+    component.bringToFront();
+
+    expect(nodeService.update).toHaveBeenCalled();
+  });
+
+  it('should call drawing service when bring to front action called', () => {
+    spyOn(drawingService, 'update').and.returnValue(of());
+    component.nodes = [];
+    component.drawings = [{z: 0} as Drawing];
+
+    component.bringToFront();
+
+    expect(drawingService.update).toHaveBeenCalled();
+  });
+});

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Server } from '../../../../../models/server';
+import { Node } from '../../../../../cartography/models/node';
+import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
+import { NodeService } from '../../../../../services/node.service';
+import { Drawing } from '../../../../../cartography/models/drawing';
+import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
+import { DrawingService } from '../../../../../services/drawing.service';
+
+@Component({
+  selector: 'app-bring-to-front-action',
+  templateUrl: './bring-to-front-action.component.html'
+})
+export class BringToFrontActionComponent implements OnInit {
+  @Input() server: Server;
+  @Input() nodes: Node[];
+  @Input() drawings: Drawing[];
+
+  constructor(
+    private nodesDataSource: NodesDataSource,
+    private drawingsDataSource: DrawingsDataSource,
+    private nodeService: NodeService,
+    private drawingService: DrawingService
+  ) {}
+
+  ngOnInit() {}
+
+  bringToFront() {
+    this.nodes.forEach((node) => {
+      node.z = 100;
+      this.nodesDataSource.update(node);
+
+      this.nodeService.update(this.server, node).subscribe((node: Node) => {});
+    });
+
+    this.drawings.forEach((drawing) => {
+      drawing.z = 100;
+      this.drawingsDataSource.update(drawing);
+
+      this.drawingService.update(this.server, drawing).subscribe((drawing: Drawing) => {});
+    });
+  }
+}

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

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="showNode()">
+    <mat-icon>info</mat-icon>
+    <span>Show node information</span>
+</button>

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

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { Node } from '../../../../../cartography/models/node';
+import { MatDialog } from '@angular/material';
+import { InfoDialogComponent } from '../../../info-dialog/info-dialog.component';
+import { Server } from '../../../../../models/server';
+
+@Component({
+  selector: 'app-show-node-action',
+  templateUrl: './show-node-action.component.html'
+})
+export class ShowNodeActionComponent {
+  @Input() node: Node;
+  @Input() server: Server
+
+  constructor(private dialog: MatDialog) {}
+
+  showNode() {
+    const dialogRef = this.dialog.open(InfoDialogComponent, {
+        width: '600px',
+        autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.node = this.node;
+    instance.server = this.server;
+  }
+}

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

@@ -1,6 +1,10 @@
 <div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition">
   <span [matMenuTriggerFor]="contextMenu"></span>
   <mat-menu #contextMenu="matMenu" class="context-menu-items">
+    <app-show-node-action *ngIf="nodes.length===1"
+      [server]="server"
+      [node]="nodes[0]"
+    ></app-show-node-action>
     <app-start-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-start-node-action>
     <app-stop-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-stop-node-action>
     <app-console-device-action
@@ -49,6 +53,12 @@
       [nodes]="nodes"
       [drawings]="drawings"
     ></app-move-layer-down-action>
+    <app-bring-to-front-action
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length) && labels.length===0"
+      [server]="server"
+      [nodes]="nodes"
+      [drawings]="drawings"
+    ></app-bring-to-front-action>
     <app-start-capture-action
       *ngIf="!projectService.isReadOnly(project) && isBundledServer 
       && drawings.length===0 && nodes.length===0 && links.length===1"

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

@@ -1,3 +1,8 @@
 .context-menu {
   position: absolute;
+  min-height: 0px;
+}
+
+.mat-menu-panel ng-trigger ng-trigger-transformMenu ng-tns-c7-5 context-menu-items mat-menu-after mat-menu-below ng-star-inserted mat-elevation-z4 {
+  min-height: 0px!important;
 }

src/app/components/project-map/info-dialog/info-dialog.component.html

@@ -0,0 +1,22 @@
+<h1 mat-dialog-title>{{node.name}}</h1>
+
+<div class="modal-form-container">
+    <mat-tab-group>
+        <mat-tab label="General information">
+            <div class='textBox'>
+                <div *ngFor="let info of infoList">
+                    {{info}}
+                </div>
+            </div>
+        </mat-tab>
+        <mat-tab label="Command line">
+            <div class="textBox">
+                {{commandLine}}
+            </div>
+        </mat-tab>
+    </mat-tab-group>
+</div>
+
+<div mat-dialog-actions>
+    <button mat-button (click)="onCloseClick()" color="accent">Close</button>
+</div>

src/app/components/project-map/info-dialog/info-dialog.component.scss

@@ -0,0 +1,3 @@
+.textBox {
+    margin-top: 10px;
+}

src/app/components/project-map/info-dialog/info-dialog.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { Node } from '../../../cartography/models/node';
+import { InfoService } from '../../../services/info.service';
+import { Server } from '../../../models/server';
+
+@Component({
+    selector: 'app-info-dialog',
+    templateUrl: './info-dialog.component.html',
+    styleUrls: ['./info-dialog.component.scss']
+})
+export class InfoDialogComponent implements OnInit {
+    @Input() server: Server;
+    @Input() node: Node;
+    infoList: string[] = [];
+    commandLine: string = '';
+
+    constructor(
+        public dialogRef: MatDialogRef<InfoDialogComponent>,
+        private infoService: InfoService
+    ) {}
+
+    ngOnInit() {
+        this.infoList = this.infoService.getInfoAboutNode(this.node, this.server);
+        this.commandLine = this.infoService.getCommandLine(this.node);
+    }
+
+    onCloseClick() {
+        this.dialogRef.close();
+    }
+}

src/app/components/project-map/node-select-interface/node-select-interface.component.html

@@ -1,6 +1,6 @@
 <div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition" *ngIf="node">
   <span [matMenuTriggerFor]="selectInterfaceMenu"></span>
-  <mat-menu #selectInterfaceMenu="matMenu" class="context-menu-items">
+  <mat-menu [style.min-height]="0" #selectInterfaceMenu="matMenu" class="context-menu-items">
     <button mat-menu-item *ngFor="let port of availablePorts" (click)="chooseInterface(port)">
       <mat-icon>add_circle_outline</mat-icon>
       <span>{{ port.name }}</span>

src/app/components/project-map/node-select-interface/node-select-interface.component.scss

@@ -1,3 +1,7 @@
 .context-menu {
   position: absolute;
 }
+
+.context-menu-items {
+  min-height: 0px!important;
+}

src/app/components/project-map/node-select-interface/node-select-interface.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MatMenuTrigger } from '@angular/material';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Node } from '../../../cartography/models/node';

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

@@ -1,7 +1,7 @@
 import { ProjectMapMenuComponent } from "./project-map-menu.component";
 import { ComponentFixture, async, TestBed } from '@angular/core/testing';
 import { MockedDrawingService } from '../project-map.component.spec';
-import { MapSettingService } from '../../../services/mapsettings.service';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
 import { CommonModule } from '@angular/common';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -15,7 +15,7 @@ describe('ProjectMapMenuComponent', () => {
     let component: ProjectMapMenuComponent;
     let fixture: ComponentFixture<ProjectMapMenuComponent>;
     let drawingService = new MockedDrawingService();
-    let mapSettingService = new MapSettingService();
+    let mapSettingService = new MapSettingsService();
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -23,7 +23,7 @@ describe('ProjectMapMenuComponent', () => {
             providers: [
               { provide: DrawingService, useValue: drawingService },
               { provide: ToolsService },
-              { provide: MapSettingService, useValue: mapSettingService }
+              { provide: MapSettingsService, useValue: mapSettingService }
             ],
             declarations: [ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
             schemas: [NO_ERRORS_SCHEMA]

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

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import { Project } from '../../../models/project';
 import { Server } from '../../../models/server';
 import { ToolsService } from '../../../services/tools.service';
-import { MapSettingService } from '../../../services/mapsettings.service';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 import { DrawingService } from '../../../services/drawing.service';
 
 
@@ -26,7 +26,7 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
 
     constructor(
         private toolsService: ToolsService,
-        private mapSettingsService: MapSettingService,
+        private mapSettingsService: MapSettingsService,
         private drawingService: DrawingService
     ) {}
 

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

@@ -40,16 +40,36 @@
       <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
         <button mat-menu-item [routerLink]="['/server', server.id, 'projects']">
           <mat-icon>work</mat-icon>
-          <span>Projects</span>
+          <span>Go to projects</span>
         </button>
         <button mat-menu-item [routerLink]="['/servers']">
           <mat-icon>developer_board</mat-icon>
-          <span>Servers</span>
+          <span>Go to servers</span>
+        </button>
+        <button mat-menu-item (click)="addNewProject()">
+          <mat-icon>add</mat-icon>
+          <span>Add new blank project</span>
+        </button>
+        <button mat-menu-item (click)="saveProject()">
+          <mat-icon>save</mat-icon>
+          <span>Save project as</span>
+        </button>
+        <button mat-menu-item (click)="exportProject()">
+          <mat-icon>call_made</mat-icon>
+          <span>Export portable project</span>
+        </button>
+        <button mat-menu-item (click)="importProject()">
+          <mat-icon>call_received</mat-icon>
+          <span>Import portable project</span>
+        </button>
+        <button mat-menu-item (click)="deleteProject()">
+          <mat-icon>delete</mat-icon>
+          <span>Delete project</span>
         </button>
       </mat-menu>
 
       <mat-toolbar-row>
-        <button matTooltip="Show/hide interface labels" mat-icon-button [matMenuTriggerFor]="viewMenu"><mat-icon>view_module</mat-icon></button>
+        <button matTooltip="Map settings" mat-icon-button [matMenuTriggerFor]="viewMenu"><mat-icon>view_module</mat-icon></button>
       </mat-toolbar-row>
 
       <mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
@@ -57,6 +77,9 @@
           <mat-checkbox [ngModel]="project.show_interface_labels" (change)="toggleShowInterfaceLabels($event.checked)">
             Show interface labels
           </mat-checkbox>
+          <mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
+            Show topology summary
+          </mat-checkbox>
         </div>
       </mat-menu>
 
@@ -120,3 +143,6 @@
 <app-node-label-dragged [server]="server"></app-node-label-dragged>
 <app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
 <app-text-edited [server]="server"></app-text-edited>
+<div [ngClass]="{ visible: !isTopologySummaryVisible }">
+  <app-topology-summary *ngIf="project" [server]="server" [project]="project" (closeTopologySummary)='toggleShowTopologySummary($event)'></app-topology-summary>
+</div>

src/app/components/project-map/project-map.component.scss

@@ -230,3 +230,11 @@ g.node text,
 .context-menu-items .mat-menu-item:focus {
   background: none;
 }
+
+.visible {
+  display: none;
+}
+
+mat-menu-panel {
+  min-height: 0px;
+}

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

@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ProjectMapComponent } from './project-map.component';
-import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, MatDialogModule } from '@angular/material';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ServerService } from '../../services/server.service';
 import { ProjectService } from '../../services/project.service';
@@ -20,14 +20,14 @@ import { DrawingsDataSource } from '../../cartography/datasources/drawings-datas
 import { CommonModule } from '@angular/common';
 import { ANGULAR_MAP_DECLARATIONS } from '../../cartography/angular-map.imports';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { MockedSettingsService } from '../../services/settings.service.spec';
 import { MockedServerService } from '../../services/server.service.spec';
 import { MockedProjectService } from '../../services/project.service.spec';
 import { Observable } from 'rxjs/Rx';
 import { Drawing } from '../../cartography/models/drawing';
 import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
-import { of } from 'rxjs';
+import { of, BehaviorSubject } from 'rxjs';
 import { Server } from '../../models/server';
 import { Node } from '../../cartography/models/node';
 import { ToolsService } from '../../services/tools.service';
@@ -48,10 +48,12 @@ import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles
 import { LabelWidget } from '../../cartography/widgets/label';
 import { InterfaceLabelWidget } from '../../cartography/widgets/interface-label';
 import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
-import { MapSettingService } from '../../services/mapsettings.service';
+import { MapSettingsService } from '../../services/mapsettings.service';
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { MockedToasterService } from '../../services/toaster.service.spec';
 import { ToasterService } from '../../services/toaster.service';
+import { MockedActivatedRoute } from '../snapshots/list-of-snapshots/list-of-snaphshots.component.spec';
+import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from '../../cartography/datasources/map-datasource';
 
 export class MockedProgressService {
   public activate() {}
@@ -102,6 +104,10 @@ export class MockedNodeService {
   saveConfiguration(server: Server, node: Node, configuration: string) {
     return of(configuration);
   }
+  
+  update(server: Server, node: Node) {
+    return of(node);
+  }
 }
 
 export class MockedDrawingService {
@@ -195,6 +201,10 @@ export class MockedNodesDataSource {
   update() {
     return of({});
   }
+
+  public get changes() {
+    return new BehaviorSubject<[]>([]);
+  }
 }
 
 export class MockedLinksDataSource {
@@ -210,6 +220,7 @@ describe('ProjectMapComponent', () => {
   let linksDataSource = new MockedLinksDataSource();
   let mockedToasterService = new MockedToasterService();
   let nodeCreatedLabelStylesFixer;
+  let mockedRouter = new MockedActivatedRoute;
 
   beforeEach(async(() => {
     nodeCreatedLabelStylesFixer = {
@@ -217,7 +228,7 @@ describe('ProjectMapComponent', () => {
     };
 
     TestBed.configureTestingModule({
-      imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
+      imports: [MatIconModule, MatDialogModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
       providers: [
         { provide: ActivatedRoute },
         { provide: ServerService, useClass: MockedServerService },
@@ -253,7 +264,13 @@ describe('ProjectMapComponent', () => {
         { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
         { provide: MapScaleService },
         { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
-        { provide: ToasterService, useValue: mockedToasterService }
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: Router, useValue: mockedRouter },
+        { provide: MapNodesDataSource, useClass: MapNodesDataSource },
+        { provide: MapLinksDataSource, useClass: LinksDataSource },
+        { provide: MapDrawingsDataSource, useClass: MapDrawingsDataSource },
+        { provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource },
+        { provide: MapSettingsService, useClass: MapSettingsService }
       ],
       declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
       schemas: [NO_ERRORS_SCHEMA]

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

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 
 import { Observable, Subject, Subscription, from } from 'rxjs';
 import { webSocket } from 'rxjs/webSocket';
@@ -51,6 +51,12 @@ import { LabelWidget } from '../../cartography/widgets/label';
 import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { ToasterService } from '../../services/toaster.service';
+import { ImportProjectDialogComponent } from '../projects/import-project-dialog/import-project-dialog.component';
+import { MatDialog } from '@angular/material';
+import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-dialog/add-blank-project-dialog.component';
+import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
+import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
+import { MapSettingsService } from '../../services/mapsettings.service';
 
 
 @Component({
@@ -68,6 +74,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public server: Server;
   public ws: WebSocket;
   public isProjectMapMenuVisible: boolean = false;
+  public isTopologySummaryVisible: boolean = false;
 
   tools = {
     selection: true,
@@ -115,11 +122,19 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private movingEventSource: MovingEventSource,
     private mapScaleService: MapScaleService,
     private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer,
-    private toasterService: ToasterService
+    private toasterService: ToasterService,
+    private dialog: MatDialog,
+    private router: Router,
+    private mapNodesDataSource: MapNodesDataSource,
+    private mapLinksDataSource: MapLinksDataSource,
+    private mapDrawingsDataSource: MapDrawingsDataSource,
+    private mapSymbolsDataSource: MapSymbolsDataSource,
+    private mapSettingsService: MapSettingsService
   ) {}
 
   ngOnInit() {
     this.settings = this.settingsService.getAll();
+    this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
 
     this.progressService.activate();
     const routeSub = this.route.paramMap.subscribe((paramMap: ParamMap) => {
@@ -196,11 +211,37 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   addKeyboardListeners() {
     Mousetrap.bind('ctrl++', (event: Event) => {
       event.preventDefault();
+      this.zoomIn();
     });
 
     Mousetrap.bind('ctrl+-', (event: Event) => {
       event.preventDefault();
-    });;
+      this.zoomOut();
+    });
+
+    Mousetrap.bind('ctrl+0', (event: Event) => {
+      event.preventDefault();
+      this.resetZoom();
+    });
+
+    Mousetrap.bind('ctrl+a', (event: Event) => {
+      event.preventDefault();
+      let allNodes: Indexed[] = this.mapNodesDataSource.getItems();
+      let allDrawings: Indexed[] = this.mapDrawingsDataSource.getItems();
+      let allLinks: Indexed[] = this.mapLinksDataSource.getItems();
+      let allSymbols: Indexed[] = this.mapSymbolsDataSource.getItems();
+      this.selectionManager.setSelected(allNodes.concat(allDrawings).concat(allLinks).concat(allSymbols));
+    });
+
+    Mousetrap.bind('ctrl+shift+a', (event: Event) => {
+      event.preventDefault();
+      this.selectionManager.setSelected([]);
+    });
+
+    Mousetrap.bind('ctrl+shift+s', (event: Event) => {
+      event.preventDefault();
+      this.router.navigate(['/server', this.server.id, 'preferences']);
+    });
   }
 
   onProjectLoad(project: Project) {
@@ -362,6 +403,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.project.show_interface_labels = enabled;
   }
 
+  public toggleShowTopologySummary(visible: boolean) {
+    this.isTopologySummaryVisible = visible;
+    this.mapSettingsService.toggleTopologySummary(this.isTopologySummaryVisible);
+  }
+
   public hideMenu() {
     this.projectMapMenuComponent.resetDrawToolChoice()
     this.isProjectMapMenuVisible = false;
@@ -387,6 +433,60 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.mapScaleService.resetToDefault();
   }
 
+  addNewProject() {
+    const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
+      width: '400px',
+      autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+  }
+
+  saveProject() {
+    const dialogRef = this.dialog.open(SaveProjectDialogComponent, {
+      width: '400px',
+      autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.project = this.project;
+  }
+
+  importProject() {
+    let uuid: string = '';
+    const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
+      width: '400px',
+      autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    const subscription = dialogRef.componentInstance.onImportProject.subscribe((projectId: string) => {
+      uuid = projectId;
+    });
+
+    dialogRef.afterClosed().subscribe(() => {
+      subscription.unsubscribe();
+      if (uuid) {
+        this.projectService.open(this.server, uuid).subscribe(() => {
+          this.router.navigate(['/server', this.server.id, 'project', uuid]);
+        });
+      }
+    });
+  }
+
+  exportProject() {
+    if (this.nodes.filter(node => node.node_type === 'virtualbox').length > 0) {
+      this.toasterService.error('Map with VirtualBox machines cannot be exported.')
+    } else if (this.nodes.filter(node => 
+        (node.status === 'started' && node.node_type==='vpcs') || 
+        (node.status === 'started' && node.node_type==='virtualbox') || 
+        (node.status === 'started' && node.node_type==='vmware')).length > 0) {
+      this.toasterService.error('Project with running nodes cannot be exported.')
+    } else {
+      location.assign(this.projectService.getExportPath(this.server, this.project));
+    }
+  }
+  
   public uploadImageFile(event) {
     this.readImageFile(event.target);
   }
@@ -408,6 +508,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     imageToUpload.src = window.URL.createObjectURL(file);
   }
 
+  public deleteProject() {
+    this.projectService.delete(this.server, this.project.project_id).subscribe(() => {
+      this.router.navigate(['/server', this.server.id, 'projects']);
+    });
+  }
+
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();

src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, EventEmitter } from '@angular/core';
 import { Router } from '@angular/router';
 import { MatDialog, MatDialogRef } from '@angular/material';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@@ -20,6 +20,8 @@ import { ToasterService } from '../../../services/toaster.service';
 export class AddBlankProjectDialogComponent implements OnInit {
   server: Server;
   projectNameForm: FormGroup;
+  uuid: string;
+  onAddProject = new EventEmitter<string>();
 
   constructor(
     public dialogRef: MatDialogRef<AddBlankProjectDialogComponent>,
@@ -62,8 +64,9 @@ export class AddBlankProjectDialogComponent implements OnInit {
   }
 
   addProject(): void {
+    this.uuid = uuid();
     this.projectService
-      .add(this.server, this.projectNameForm.controls['projectName'].value, uuid())
+      .add(this.server, this.projectNameForm.controls['projectName'].value, this.uuid)
       .subscribe((project: Project) => {
         this.dialogRef.close();
         this.toasterService.success(`Project ${project.name} added`);

src/app/components/projects/import-project-dialog/import-project-dialog.component.css

@@ -15,6 +15,10 @@
 }
 
 .file-name-form-field {
+    width: 90%; 
+}
+
+.empty {
     width: 100%; 
 }
 

src/app/components/projects/import-project-dialog/import-project-dialog.component.html

@@ -11,7 +11,7 @@
       [uploader]="uploader"
     />
     <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Choose file</button>
-    <mat-form-field class="file-name-form-field">
+    <mat-form-field [ngClass]="{ empty: !isDeleteVisible }" class="file-name-form-field">
       <input
         matInput
         type="text"

src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts

@@ -46,6 +46,14 @@ export class MockedProjectService {
   list() {
     return of(this.projects);
   }
+
+  getUploadPath(server: Server, uuid: string, project_name: string) {
+    return `http://${server.host}:${server.port}/v2/projects/${uuid}/import?name=${project_name}`;
+  }
+
+  getExportPath(server: Server, project: Project) {
+    return `http://${server.host}:${server.port}/v2/projects/${project.project_id}/export`;
+  }
 }
 
 describe('ImportProjectDialogComponent', () => {

src/app/components/projects/import-project-dialog/import-project-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, EventEmitter } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material';
 import { FileUploader, ParsedResponseHeaders, FileItem } from 'ng2-file-upload';
 import { Server } from '../../../models/server';
@@ -26,6 +26,8 @@ export class ImportProjectDialogComponent implements OnInit {
   projectNameForm: FormGroup;
   submitted: boolean = false;
   isFirstStepCompleted: boolean = false;
+  uuid: string;
+  onImportProject = new EventEmitter<string>();
 
   constructor(
     private dialog: MatDialog,
@@ -58,6 +60,7 @@ export class ImportProjectDialogComponent implements OnInit {
       status: number,
       headers: ParsedResponseHeaders
     ) => {
+      this.onImportProject.emit(this.uuid);
       this.resultMessage = 'Project was imported succesfully!';
       this.isFinishEnabled = true;
     };
@@ -138,7 +141,8 @@ export class ImportProjectDialogComponent implements OnInit {
   }
 
   prepareUploadPath(): string {
+    this.uuid = uuid();
     const projectName = this.projectNameForm.controls['projectName'].value;
-    return `http://${this.server.host}:${this.server.port}/v2/projects/${uuid()}/import?name=${projectName}`;
+    return this.projectService.getUploadPath(this.server, this.uuid, projectName);
   }
 }

src/app/components/projects/projects.component.html

@@ -40,6 +40,9 @@
             <button mat-icon-button matTooltip="Delete project" (click)="delete(row)" *ngIf="row.status == 'closed'">
               <mat-icon aria-label="Delete project">delete</mat-icon>
             </button>
+            <button mat-icon-button matTooltip="Duplicate project" (click)="duplicate(row)" *ngIf="row.status == 'closed'">
+              <mat-icon aria-label="Duplicate project">filter_2</mat-icon>
+            </button>
             <button mat-icon-button matTooltip="Open project" (click)="open(row)" *ngIf="row.status == 'closed'">
               <mat-icon aria-label="Open project">play_arrow</mat-icon>
             </button>

src/app/components/projects/projects.component.spec.ts

@@ -85,6 +85,28 @@ describe('ProjectsComponent', () => {
     expect(mockedProjectService.delete).toHaveBeenCalled();
   });
 
+  it('should call project service after duplicate action', () => {
+    spyOn(mockedProjectService, 'duplicate').and.returnValue(of());
+    let project = new Project();
+    project.project_id = '1';
+    project.status = 'closed';
+
+    component.duplicate(project);
+
+    expect(mockedProjectService.duplicate).toHaveBeenCalled();
+  });
+
+  it('should call refresh after duplicate action', () => {
+    spyOn(component, 'refresh');
+    let project = new Project();
+    project.project_id = '1';
+    project.status = 'closed';
+
+    component.duplicate(project);
+
+    expect(component.refresh).toHaveBeenCalled();
+  });
+
   describe('ProjectComponent open', () => {
     let project: Project;
 

src/app/components/projects/projects.component.ts

@@ -107,6 +107,12 @@ export class ProjectsComponent implements OnInit {
     );
   }
 
+  duplicate(project: Project) {
+    this.projectService.duplicate(this.server, project.project_id, project.name).subscribe(() => {
+      this.refresh();
+    });
+  }
+
   addBlankProject() {
     const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
       width: '400px',

src/app/components/projects/save-project-dialog/save-project-dialog.component.css

@@ -0,0 +1,7 @@
+.file-name-form-field {
+    width: 100%;
+}
+
+.project-snackbar {
+    background: #2196F3;
+}

src/app/components/projects/save-project-dialog/save-project-dialog.component.html

@@ -0,0 +1,23 @@
+<h1 mat-dialog-title>Save project as</h1>
+<form [formGroup]="projectNameForm" class="file-name-form">
+  <mat-form-field class="file-name-form-field">
+    <input
+      matInput
+      (keydown)="onKeyDown($event)"
+      type="text"
+      formControlName="projectName"
+      [ngClass]="{ 'is-invalid': form.projectName?.errors }"
+      placeholder="Please enter name"
+    />
+    <mat-error *ngIf="form.projectName?.touched && form.projectName?.errors && form.projectName?.errors.required"
+      >Project name is required</mat-error
+    >
+    <mat-error *ngIf="form.projectName?.touched && form.projectName?.errors && form.projectName?.errors.invalidName"
+      >Project name is incorrect</mat-error
+    >
+  </mat-form-field>
+  <div mat-dialog-actions>
+    <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
+    <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Save project</button>
+  </div>
+</form>

src/app/components/projects/save-project-dialog/save-project-dialog.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit, EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import { MatDialog, MatDialogRef } from '@angular/material';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { Project } from '../../../models/project';
+import { Server } from '../../../models/server';
+import { ProjectService } from '../../../services/project.service';
+import { v4 as uuid } from 'uuid';
+import { ProjectNameValidator } from '../models/projectNameValidator';
+import { ToasterService } from '../../../services/toaster.service';
+
+
+@Component({
+  selector: 'app-save-project-dialog',
+  templateUrl: './save-project-dialog.component.html',
+  styleUrls: ['./save-project-dialog.component.css'],
+  providers: [ProjectNameValidator]
+})
+export class SaveProjectDialogComponent implements OnInit {
+  server: Server;
+  project: Project;
+  projectNameForm: FormGroup;
+  onAddProject = new EventEmitter<string>();
+
+  constructor(
+    public dialogRef: MatDialogRef<SaveProjectDialogComponent>,
+    private router: Router,
+    private dialog: MatDialog,
+    private projectService: ProjectService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private projectNameValidator: ProjectNameValidator
+  ) {
+    this.projectNameForm = this.formBuilder.group({
+      projectName: new FormControl(null, [Validators.required, projectNameValidator.get])
+    });
+  }
+
+  ngOnInit() {}
+
+  get form() {
+    return this.projectNameForm.controls;
+  }
+
+  onAddClick(): void {
+    if (this.projectNameForm.invalid) {
+      return;
+    }
+    this.projectService.list(this.server).subscribe((projects: Project[]) => {
+      const projectName = this.projectNameForm.controls['projectName'].value;
+      let existingProject = projects.find(project => project.name === projectName);
+
+      if (existingProject) {
+        this.toasterService.success(`Project with this name already exists.`);
+      } else {
+        this.addProject();
+      }
+    });
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  addProject(): void {
+    this.projectService.duplicate(this.server, this.project.project_id, this.projectNameForm.controls['projectName'].value).subscribe((project: Project) => {
+        this.dialogRef.close();
+        this.toasterService.success(`Project ${project.name} added`);
+    });
+  }
+
+  onKeyDown(event) {
+    if (event.key === "Enter") {
+      this.onAddClick();
+    }
+  }
+}

src/app/components/template/template-list-dialog/template-list-dialog.component.html

@@ -1,4 +1,4 @@
-<div mat-dialog-content>
+<div mat-dialog-content class="content">
   <div class="header">
     <mat-form-field floatPlaceholder="never">
       <input matInput #filter placeholder="Filter templates" />

src/app/components/template/template-list-dialog/template-list-dialog.component.scss

@@ -16,3 +16,26 @@
   font-size: 16px;
   flex-grow: 1;
 }
+
+div {
+  scrollbar-color: darkgrey #263238;
+  scrollbar-width: thin;
+}
+
+mat-table {
+  scrollbar-color: darkgrey #263238;
+  scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+  width: 0.5em;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+::-webkit-scrollbar-thumb {
+background-color: darkgrey;
+outline: 1px solid #263238;
+}

src/app/components/template/template-list-dialog/template-list-dialog.component.ts

@@ -20,7 +20,7 @@ export class TemplateListDialogComponent implements OnInit {
   dataSource: TemplateDataSource;
   displayedColumns = ['name'];
 
-  @ViewChild('filter', {static: false}) filter: ElementRef;
+  @ViewChild('filter', {static: true}) filter: ElementRef;
 
   constructor(
     public dialogRef: MatDialogRef<TemplateListDialogComponent>,

src/app/components/topology-summary/topology-summary.component.html

@@ -0,0 +1,44 @@
+<div class="summaryWrapper" *ngIf="projectsStatistics">
+    <div class="summaryHeader">
+        <span class="title">Topology summary ({{projectsStatistics.snapshots}} snapshots)</span>
+        <mat-icon (click)="close()" class="closeButton">close</mat-icon>
+    </div>
+    <mat-divider class="divider"></mat-divider>
+    <div class="summaryFilters">
+        Filter by status <br/>
+        <div class="filterBox">
+            <mat-checkbox (change)="applyStatusFilter($event.checked, 'started')">Started</mat-checkbox>
+            <mat-checkbox (change)="applyStatusFilter($event.checked, 'suspended')">Suspended</mat-checkbox>
+            <mat-checkbox (change)="applyStatusFilter($event.checked, 'stopped')">Stopped</mat-checkbox>
+        </div>
+    </div>
+    <div class="summarySorting">
+        Sorting <br/>
+        <div class="radio-group-wrapper">
+            <mat-radio-group class="radio-group" aria-label="Sorting">
+                <mat-radio-button value="1" (click)="setSortingOrder('asc')" checked>By name ascending</mat-radio-button>
+                <mat-radio-button value="2" (click)="setSortingOrder('desc')">By name descending</mat-radio-button>
+            </mat-radio-group>
+        </div>
+    </div>
+    <mat-divider class="divider"></mat-divider>
+    <div class="summaryContent">
+        <div class="nodeRow" *ngFor="let node of filteredNodes">
+            <div>
+                <svg *ngIf="node.status==='started'" width="10" height="10">
+                    <rect class="status_started" x="0" y="0" width="10" height="10" fill="green"></rect>
+                </svg>
+                <svg *ngIf="node.status==='stopped'" width="10" height="10">
+                    <rect class="status_stopped" x="0" y="0" width="10" height="10" fill="red"></rect>
+                </svg>
+                {{node.name}}
+            </div>
+            <div *ngIf="node.console!=null && node.console!=undefined && node.console_type!='none'">
+                {{node.console_type}} {{node.console_host}}:{{node.console}}
+            </div>
+            <div *ngIf="node.console===null || node.console===undefined || node.console_type==='none'">
+                none
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/topology-summary/topology-summary.component.scss

@@ -0,0 +1,99 @@
+.summaryWrapper {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    height: 400px;
+    width: 300px;
+    background: #263238;
+    color: white;
+    overflow: hidden;
+    font-size: 12px;
+}
+
+.summaryHeaderMenu {
+    height: 24px;
+}
+
+.summaryHeader {
+    width: 100%;
+    height: 24px;
+    display: flex;
+    justify-content: space-between;
+    margin-right: 5px;
+}
+
+.summaryFilters {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.summarySorting {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.summaryContent {
+    margin-left: 5px;
+    margin-right: 5px;
+    max-height: 240px;
+    overflow: auto;
+    scrollbar-color: darkgrey #263238;
+    scrollbar-width: thin;
+}
+
+.title {
+    margin-left: 5px;
+    margin-top: 4px;
+}
+
+.divider {
+    margin: 5px;
+    width: 290px;
+    height: 2px;
+}
+
+.nodeRow {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding-right: 5px;
+}
+
+mat-icon {
+    font-size: 18px;
+    width: 20px;
+    height: 20px;
+    margin-top: 4px;
+}
+
+::-webkit-scrollbar {
+    width: 0.5em;
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: darkgrey;
+    outline: 1px solid #263238;
+}
+
+.radio-group-wrapper {
+    margin-top: 5px;
+}
+
+.radio-group {
+    display: flex;
+    justify-content: space-between;
+}
+
+.closeButton {
+    cursor: pointer;
+}
+
+.filterBox {
+    display: flex;
+    justify-content: space-between;
+}

src/app/components/topology-summary/topology-summary.component.spec.ts

@@ -0,0 +1,148 @@
+import { TopologySummaryComponent } from "./topology-summary.component";
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { ProjectService } from '../../services/project.service';
+import { MockedProjectService } from '../../services/project.service.spec';
+import { MatTableModule, MatTooltipModule, MatIconModule, MatSortModule, MatDialogModule } from '@angular/material';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { MockedNodesDataSource } from '../project-map/project-map.component.spec';
+import { NodesDataSource } from '../../cartography/datasources/nodes-datasource';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Project } from '../../models/project';
+import { Node } from '../../cartography/models/node';
+
+
+describe('TopologySummaryComponent', () => {
+    let component: TopologySummaryComponent;
+    let fixture: ComponentFixture<TopologySummaryComponent>;
+    let mockedProjectService: MockedProjectService = new MockedProjectService();
+    let mockedNodesDataSource: MockedNodesDataSource = new MockedNodesDataSource();
+  
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MatTableModule,
+                MatTooltipModule,
+                MatIconModule,
+                MatSortModule,
+                MatDialogModule,
+                NoopAnimationsModule,
+                RouterTestingModule.withRoutes([])
+            ],
+            providers: [
+                { provide: ProjectService, useValue: mockedProjectService },
+                { provide: NodesDataSource, useValue: mockedNodesDataSource }
+            ],
+            declarations: [TopologySummaryComponent],
+            schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+  
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TopologySummaryComponent);
+        component = fixture.componentInstance;
+        component.project = { project_id: 1 } as unknown as Project;
+        fixture.detectChanges();
+    });
+  
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should show only running nodes when filter started applied', () => {
+        component.nodes = [
+            { status: 'started' } as Node,
+            { status: 'stopped' } as Node
+        ];
+
+        component.applyStatusFilter(true, 'started');
+
+        expect(component.filteredNodes.length).toBe(1);
+        expect(component.filteredNodes[0].status).toBe('started');
+    });
+
+    it('should show only stopped nodes when filter stopped applied', () => {
+        component.nodes = [
+            { status: 'started' } as Node,
+            { status: 'stopped' } as Node
+        ];
+
+        component.applyStatusFilter(true, 'stopped');
+
+        expect(component.filteredNodes.length).toBe(1);
+        expect(component.filteredNodes[0].status).toBe('stopped');
+    });
+
+    it('should show only suspended nodes when filter suspended applied', () => {
+        component.nodes = [
+            { status: 'started' } as Node,
+            { status: 'stopped' } as Node
+        ];
+
+        component.applyStatusFilter(true, 'suspended');
+
+        expect(component.filteredNodes.length).toBe(0);
+    });
+
+    it('should show all nodes when all filters applied', () => {
+        component.nodes = [
+            { status: 'started' } as Node,
+            { status: 'stopped' } as Node
+        ];
+
+        component.applyStatusFilter(true, 'suspended');
+        component.applyStatusFilter(true, 'started');
+        component.applyStatusFilter(true, 'stopped');
+
+        expect(component.filteredNodes.length).toBe(2);
+    });
+
+    it('should show all nodes when no filters applied', () => {
+        component.nodes = [
+            { status: 'started' } as Node,
+            { status: 'stopped' } as Node
+        ];
+
+        component.applyStatusFilter(true, 'suspended');
+        component.applyStatusFilter(true, 'started');
+        component.applyStatusFilter(true, 'stopped');
+
+        expect(component.filteredNodes.length).toBe(2);
+
+        component.applyStatusFilter(false, 'stopped');
+
+        expect(component.filteredNodes.length).toBe(1);
+
+        component.applyStatusFilter(false, 'suspended');
+        component.applyStatusFilter(false, 'started');
+
+        expect(component.filteredNodes.length).toBe(2);
+    });
+
+    it('should sort nodes in correct order', () => {
+        component.nodes = [
+            { status: 'started', name: 'A' } as Node,
+            { status: 'stopped', name: 'B' } as Node,
+            { status: 'stopped', name: 'D' } as Node,
+        ];
+
+        component.applyFilters();
+        component.setSortingOrder('asc');
+
+        expect(component.filteredNodes[0].name).toBe('A');
+    });
+
+    it('should sort filtered nodes in correct order', () => {
+        component.nodes = [
+            { status: 'started', name: 'A' } as Node,
+            { status: 'stopped', name: 'B' } as Node,
+            { status: 'stopped', name: 'D' } as Node,
+        ];
+
+        component.applyStatusFilter(true, 'stopped');
+        component.setSortingOrder('desc');
+
+        expect(component.filteredNodes[0].name).toBe('D');
+    });
+});

src/app/components/topology-summary/topology-summary.component.ts

@@ -0,0 +1,116 @@
+import { Component, OnInit, OnDestroy, Input, AfterViewInit, Output, EventEmitter } from '@angular/core';
+import { Project } from '../../models/project';
+import { Server } from '../../models/server';
+import { NodesDataSource } from '../../cartography/datasources/nodes-datasource';
+import { Node } from '../../cartography/models/node';
+import { Subscription } from 'rxjs';
+import { ProjectService } from '../../services/project.service';
+import { ProjectStatistics } from '../../models/project-statistics';
+
+
+@Component({
+    selector: 'app-topology-summary',
+    templateUrl: './topology-summary.component.html',
+    styleUrls: ['./topology-summary.component.scss']
+})
+export class TopologySummaryComponent implements OnInit, OnDestroy {
+    @Input() server: Server;
+    @Input() project: Project;
+
+    @Output() closeTopologySummary = new EventEmitter<boolean>();
+
+    private subscriptions: Subscription[] = [];
+    projectsStatistics: ProjectStatistics;
+    nodes: Node[] = [];
+    filteredNodes: Node[] = [];
+    sortingOrder: string = 'asc';
+    startedStatusFilterEnabled: boolean = false;
+    suspendedStatusFilterEnabled: boolean = false;
+    stoppedStatusFilterEnabled: boolean = false;
+
+    constructor(
+        private nodesDataSource: NodesDataSource,
+        private projectService: ProjectService
+    ) {}
+
+    ngOnInit() {
+        this.subscriptions.push(
+            this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
+                this.nodes = nodes;
+                if (this.sortingOrder === 'asc') {
+                    this.filteredNodes = nodes.sort(this.compareAsc);
+                } else {
+                    this.filteredNodes = nodes.sort(this.compareDesc);
+                }
+            })
+        );
+
+        this.projectService.getStatistics(this.server, this.project.project_id).subscribe((stats) => {
+            this.projectsStatistics = stats;
+        });
+    }
+
+    compareAsc(first: Node, second: Node) {
+        if (first.name < second.name) return -1;
+        return 1;
+    }
+
+    compareDesc(first: Node, second: Node) {
+        if (first.name < second.name) return 1;
+        return -1;
+    }
+
+    ngOnDestroy() {
+        this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
+    }
+
+    setSortingOrder(order: string) {
+        this.sortingOrder = order;
+        if (this.sortingOrder === 'asc') {
+            this.filteredNodes = this.filteredNodes.sort(this.compareAsc);
+        } else {
+            this.filteredNodes = this.filteredNodes.sort(this.compareDesc);
+        }   
+    }
+
+    applyStatusFilter(value: boolean, filter: string) {
+        if (filter === 'started') {
+            this.startedStatusFilterEnabled = value;
+        } else if (filter === 'stopped') {
+            this.stoppedStatusFilterEnabled = value;
+        } else if (filter === 'suspended') {
+            this.suspendedStatusFilterEnabled = value;
+        }
+        this.applyFilters();
+    }
+
+    applyFilters() {
+        let nodes: Node[] = [];
+
+        if (this.startedStatusFilterEnabled) {
+            nodes = nodes.concat(this.nodes.filter(n => n.status === 'started'));
+        }
+        
+        if (this.stoppedStatusFilterEnabled) {
+            nodes = nodes.concat(this.nodes.filter(n => n.status === 'stopped'));
+        }
+        
+        if (this.suspendedStatusFilterEnabled) {
+            nodes = nodes.concat(this.nodes.filter(n => n.status === 'suspended'));
+        }
+        
+        if (!this.startedStatusFilterEnabled && !this.stoppedStatusFilterEnabled && !this.suspendedStatusFilterEnabled) {
+            nodes = nodes.concat(this.nodes);
+        }
+
+        if (this.sortingOrder === 'asc') {
+            this.filteredNodes = nodes.sort(this.compareAsc);
+        } else {
+            this.filteredNodes = nodes.sort(this.compareDesc);
+        }    
+    }
+
+    close() {
+        this.closeTopologySummary.emit(false);
+    }
+}

src/app/models/project-statistics.ts

@@ -0,0 +1,6 @@
+export class ProjectStatistics {
+    drawings: number;
+    links: number;
+    nodes: number;
+    snapshots: number
+}

src/app/services/info.service.ts

@@ -0,0 +1,77 @@
+import { Injectable } from "@angular/core";
+import { Node } from '../cartography/models/node';
+import { Port } from '../models/port';
+import { Server } from '../models/server';
+
+@Injectable()
+export class InfoService {
+    getInfoAboutNode(node: Node, server: Server): string[] {
+        let infoList: string[] = [];
+        if (node.node_type === 'cloud') {
+            infoList.push(`Cloud ${node.name} is always on.`);
+        } else if (node.node_type === 'nat') {
+            infoList.push(`NAT ${node.name} is always on.`);
+        } else if (node.node_type === 'ethernet-hub') {
+            infoList.push(`Ethernet hub ${node.name} is always on.`);
+        } else if (node.node_type === 'ethernet_switch') {
+            infoList.push(`Ethernet switch ${node.name} is always on.`);
+        } else if (node.node_type === 'frame_relay_switch') {
+            infoList.push(`Frame relay switch ${node.name} is always on.`);
+        } else if (node.node_type === 'atm_switch') {
+            infoList.push(`ATM switch ${node.name} is always on.`);
+        } else if (node.node_type === 'docker') {
+            infoList.push(`Docker ${node.name} is ${node.status}.`);
+        } else if (node.node_type === 'dynamips') {
+            infoList.push(`Dynamips ${node.name} is always on.`);
+        } else if (node.node_type === 'traceng') {
+            infoList.push(`TraceNG ${node.name} is always on.`);
+        } else if (node.node_type === 'virtualbox') {
+            infoList.push(`VirtualBox VM ${node.name} is ${node.status}.`);
+        } else if (node.node_type === 'vmware') {
+            infoList.push(`VMware VM ${node.name} is ${node.status}.`);
+        } else if (node.node_type === 'qemu') {
+            infoList.push(`QEMU VM ${node.name} is ${node.status}.`);
+        } else if (node.node_type === 'iou') {
+            infoList.push(`IOU ${node.name} is always on.`);
+        } else if (node.node_type === 'vpcs') {
+            infoList.push(`Node ${node.name} is ${node.status}.`);
+        }
+        infoList.push(`Running on server ${server.name} with port ${server.port}.`);
+        infoList.push(`Server ID is ${server.id}.`);
+        if (node.console_type !== 'none' && node.console_type !== 'null') {
+            infoList.push(`Console is on port ${node.console} and type is ${node.console_type}.`);
+        }
+        infoList = infoList.concat(this.getInfoAboutPorts(node.ports));
+        return infoList;
+    }
+
+    getInfoAboutPorts(ports: Port[]): string {
+        let response: string = `Ports: `
+        ports.forEach(port => {
+            response += `link_type: ${port.link_type}, 
+                        name: ${port.name}; `
+        });
+        response = response.substring(0, response.length - 2);
+        return response;
+    }
+
+    getCommandLine(node: Node): string {
+        if (node.node_type ===  "cloud" || 
+            node.node_type ===  "nat" || 
+            node.node_type ===  "ethernet_hub" || 
+            node.node_type ===  "ethernet_switch" || 
+            node.node_type ===  "frame_relay_switch" || 
+            node.node_type ===  "atm_switch" || 
+            node.node_type ===  "dynamips" || 
+            node.node_type ===  "traceng" || 
+            node.node_type ===  "iou") {
+            return 'Command line information is not supported for this type of node.';
+        } else {
+            if (node.status === 'started') {
+                return node.command_line;
+            } else {
+                return 'Please start the node in order to get the command line information.';
+            }
+        }
+    }
+}

src/app/services/mapsettings.service.ts

@@ -2,12 +2,17 @@ import { Injectable } from "@angular/core";
 import { Subject } from 'rxjs';
 
 @Injectable()
-export class MapSettingService {
+export class MapSettingsService {
     public isMapLocked = new Subject<boolean>();
+    public isTopologySummaryVisible: boolean = false;
 
     constructor() {}
 
     changeMapLockValue(value: boolean) {
         this.isMapLocked.next(value);
     }
+
+    toggleTopologySummary(value: boolean) {
+        this.isTopologySummaryVisible = value;
+    }
 }

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

@@ -41,6 +41,14 @@ export class MockedProjectService {
   delete(server: Server, project_id: string) {
     return of(project_id);
   }
+
+  duplicate(server: Server, project_id: string) {
+    return of(project_id);
+  }
+
+  getStatistics(server: Server, project_id: string) {
+    return of({});
+  }
 }
 
 describe('ProjectService', () => {
@@ -132,6 +140,13 @@ describe('ProjectService', () => {
     expect(req.request.method).toEqual('DELETE');
   });
 
+  it('should duplicate the project', () => {
+    service.duplicate(server, 'projectId', 'projectName').subscribe();
+
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/projects/projectId/duplicate');
+    expect(req.request.method).toEqual('POST');
+  });
+
   it('should get notifications path of project', () => {
     const path = service.notificationsPath(server, 'myproject');
     expect(path).toEqual('ws://127.0.0.1:3080/v2/projects/myproject/notifications/ws');

src/app/services/project.service.ts

@@ -49,6 +49,26 @@ export class ProjectService {
     return this.httpServer.delete(server, `/projects/${project_id}`);
   }
 
+  getUploadPath(server: Server, uuid: string, project_name: string) {
+    return `http://${server.host}:${server.port}/v2/projects/${uuid}/import?name=${project_name}`;
+  }
+
+  getExportPath(server: Server, project: Project) {
+    return `http://${server.host}:${server.port}/v2/projects/${project.project_id}/export`;
+  }
+
+  export(server: Server, project_id: string): Observable<any> {
+    return this.httpServer.get(server, `/projects/${project_id}/export`)
+  }
+
+  getStatistics(server: Server, project_id: string): Observable<any> {
+    return this.httpServer.get(server, `/projects/${project_id}/stats`);
+  }
+  
+  duplicate(server: Server, project_id: string, project_name): Observable<any> {
+    return this.httpServer.post(server, `/projects/${project_id}/duplicate`, { name: project_name });
+  }
+
   notificationsPath(server: Server, project_id: string): string {
     return `ws://${server.host}:${server.port}/v2/projects/${project_id}/notifications/ws`;
   }

src/styles.css

@@ -33,3 +33,7 @@ a.table-link {
 app-root {
   width: 100%;
 }
+
+mat-menu-panel {
+  min-height: 0px;
+}