Merge pull request #491 from GNS3/Topology-summary---prototype

Topology summary

src/app/app.module.ts

@@ -188,9 +188,10 @@ 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 { 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';
@@ -318,6 +319,7 @@ if (environment.production) {
     NodesMenuComponent,
     ProjectMapMenuComponent,
     HelpComponent,
+    TopologySummaryComponent,
     InfoDialogComponent,
     BringToFrontActionComponent
   ],
@@ -395,7 +397,7 @@ if (environment.production) {
     NodeCreatedLabelStylesFixer,
     NonNegativeValidator,
     RotationValidator,
-    MapSettingService,
+    MapSettingsService,
     InfoService
   ],
   entryComponents: [

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/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

@@ -53,7 +53,7 @@
       </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">
@@ -61,6 +61,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>
 
@@ -124,3 +127,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,7 @@ g.node text,
 .context-menu-items .mat-menu-item:focus {
   background: none;
 }
+
+.visible {
+  display: none;
+}

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

@@ -27,7 +27,7 @@ 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,7 +48,7 @@ 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';
@@ -193,6 +193,10 @@ export class MockedNodesDataSource {
   update() {
     return of({});
   }
+
+  public get changes() {
+    return new BehaviorSubject<[]>([]);
+  }
 }
 
 export class MockedLinksDataSource {
@@ -257,7 +261,8 @@ describe('ProjectMapComponent', () => {
         { provide: MapNodesDataSource, useClass: MapNodesDataSource },
         { provide: MapLinksDataSource, useClass: LinksDataSource },
         { provide: MapDrawingsDataSource, useClass: MapDrawingsDataSource },
-        { provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource }
+        { 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

@@ -52,6 +52,7 @@ import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { ToasterService } from '../../services/toaster.service';
 import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
+import { MapSettingsService } from '../../services/mapsettings.service';
 
 
 @Component({
@@ -69,6 +70,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public server: Server;
   public ws: WebSocket;
   public isProjectMapMenuVisible: boolean = false;
+  public isTopologySummaryVisible: boolean = false;
 
   tools = {
     selection: true,
@@ -121,11 +123,13 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private mapNodesDataSource: MapNodesDataSource,
     private mapLinksDataSource: MapLinksDataSource,
     private mapDrawingsDataSource: MapDrawingsDataSource,
-    private mapSymbolsDataSource: MapSymbolsDataSource
+    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) => {
@@ -394,6 +398,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;

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/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

@@ -45,6 +45,10 @@ export class MockedProjectService {
   duplicate(server: Server, project_id: string) {
     return of(project_id);
   }
+
+  getStatistics(server: Server, project_id: string) {
+    return of({});
+  }
 }
 
 describe('ProjectService', () => {

src/app/services/project.service.ts

@@ -49,6 +49,10 @@ export class ProjectService {
     return this.httpServer.delete(server, `/projects/${project_id}`);
   }
 
+  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 });
   }