Unit tests for filtering & sorting nodes on topology summary added

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';
@@ -193,6 +193,10 @@ export class MockedNodesDataSource {
   update() {
     return of({});
   }
+
+  public get changes() {
+    return new BehaviorSubject<[]>([]);
+  }
 }
 
 export class MockedLinksDataSource {

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

@@ -5,8 +5,12 @@
     </div>
     <mat-divider class="divider"></mat-divider>
     <div class="summaryFilters">
-        Filters <br/>
+        Filter by status <br/>
-        <mat-checkbox (change)="applyStatusFilter($event.checked)">Running state</mat-checkbox>
+        <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/>
@@ -29,9 +33,12 @@
                 </svg>
                 {{node.name}}
             </div>
-            <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>
             <table mat-table [dataSource]="dataSource">

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

@@ -36,6 +36,10 @@
 .summaryContent {
     margin-left: 5px;
     margin-right: 5px;
+    max-height: 220px;
+    overflow: auto;
+    scrollbar-color: darkgrey #263238;
+    scrollbar-width: thin;
 }
 
 .title {
@@ -53,6 +57,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
+    padding-right: 5px;
 }
 
 mat-icon {
@@ -62,6 +67,19 @@ mat-icon {
     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 {
     margin-top: 5px;
 }
@@ -69,3 +87,8 @@ mat-icon {
 .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';
+
+
+fdescribe('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

@@ -2,7 +2,6 @@ import { Component, OnInit, OnDestroy, Input, AfterViewInit, Output, EventEmitte
 import { Project } from '../../models/project';
 import { Server } from '../../models/server';
 import { NodesDataSource } from '../../cartography/datasources/nodes-datasource';
-import { NodeService } from '../../services/node.service';
 import { Node } from '../../cartography/models/node';
 import { Subscription } from 'rxjs';
 import { ProjectService } from '../../services/project.service';
@@ -27,12 +26,13 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
     dataSource: Node[] = [];
     displayedColumns: string[] = ['name', 'console'];
     sortingOrder: string = 'asc';
-    statusFilterEnabled: boolean = false;
+    startedStatusFilterEnabled: boolean = false;
+    suspendedStatusFilterEnabled: boolean = false;
+    stoppedStatusFilterEnabled: boolean = false;
 
     constructor(
         private nodesDataSource: NodesDataSource,
-        private projectService: ProjectService,
+        private projectService: ProjectService
-        private nodeService: NodeService
     ) {}
 
     ngOnInit() {
@@ -75,16 +75,34 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
         }   
     }
 
-    applyStatusFilter(value: boolean) {
+    applyStatusFilter(value: boolean, filter: string) {
-        this.statusFilterEnabled = value;
+        if (filter === 'started') {
+            this.startedStatusFilterEnabled = value;
+        } else if (filter === 'stopped') {
+            this.stoppedStatusFilterEnabled = value;
+        } else if (filter === 'suspended') {
+            this.suspendedStatusFilterEnabled = value;
+        }
         this.applyFilters();
     }
 
     applyFilters() {
-        var nodes = this.nodes;
+        let nodes: Node[] = [];
 
-        if (this.statusFilterEnabled) {
+        if (this.startedStatusFilterEnabled) {
-            nodes = nodes.filter(n => n.status === 'started');
+            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') {

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', () => {