Servers summary added

src/app/app.module.ts

@@ -208,6 +208,7 @@ import { ChangeSymbolDialogComponent } from './components/project-map/change-sym
 import { ChangeSymbolActionComponent } from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component';
 import { EditProjectDialogComponent } from './components/projects/edit-project-dialog/edit-project-dialog.component';
 import { ProjectsFilter } from './filters/projectsFilter.pipe';
+import { ComputeService } from './services/compute.service';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -422,7 +423,8 @@ if (environment.production) {
     NonNegativeValidator,
     RotationValidator,
     MapSettingsService,
-    InfoService
+    InfoService,
+    ComputeService
   ],
   entryComponents: [
     AddServerDialogComponent,

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

@@ -85,7 +85,7 @@
             Show console
           </mat-checkbox>
           <mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
-            Show topology summary
+            Show topology/servers summary
           </mat-checkbox>
         </div>
       </mat-menu>

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

@@ -1,43 +1,62 @@
 <div class="summaryWrapper" *ngIf="projectsStatistics">
     <div class="summaryHeader">
-        <span class="title">Topology summary ({{projectsStatistics.snapshots}} snapshots)</span>
+        <button class="titleButton" [ngClass]="{ marked: isTopologyVisible }" (click)="toogleTopologyVisibility(true)" mat-button>Map topology</button>
+        <button class="titleButton" [ngClass]="{ marked: !isTopologyVisible }" (click)=toogleTopologyVisibility(false) mat-button>Servers</button>
         <mat-icon (click)="close()" class="closeButton">close</mat-icon>
     </div>
-    <mat-divider class="divider"></mat-divider>
+    <div [ngClass]="{ notvisible: !isTopologyVisible }">
-    <div class="summaryFilters">
+        <mat-divider class="divider"></mat-divider>
-        Filter by status <br/>
+        <div class="summaryFilters">
-        <div class="filterBox">
+            Filter by status <br/>
-            <mat-checkbox (change)="applyStatusFilter($event.checked, 'started')">Started</mat-checkbox>
+            <div class="filterBox">
-            <mat-checkbox (change)="applyStatusFilter($event.checked, 'suspended')">Suspended</mat-checkbox>
+                <mat-checkbox (change)="applyStatusFilter($event.checked, 'started')">Started</mat-checkbox>
-            <mat-checkbox (change)="applyStatusFilter($event.checked, 'stopped')">Stopped</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>
-    <div class="summarySorting">
+    <div [ngClass]="{ notvisible: isTopologyVisible }">
-        Sorting <br/>
+        <mat-divider class="divider"></mat-divider>
-        <div class="radio-group-wrapper">
+        <div class="summaryContentServers">
-            <mat-radio-group class="radio-group" aria-label="Sorting">
+            <div class="nodeRow" *ngFor="let compute of computes">
-                <mat-radio-button value="1" (click)="setSortingOrder('asc')" checked>By name ascending</mat-radio-button>
+                <div>
-                <mat-radio-button value="2" (click)="setSortingOrder('desc')">By name descending</mat-radio-button>
+                    {{compute.name}}
-            </mat-radio-group>
+                </div>
-        </div>
+                <div>
-    </div>
+                    {{compute.host}}
-    <mat-divider class="divider"></mat-divider>
+                </div>
-    <div class="summaryContent">
+                <div>
-        <div class="nodeRow" *ngFor="let node of filteredNodes">
+                    {{server.location}}
-            <div>
+                </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>

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

@@ -17,7 +17,7 @@
 
 .summaryHeader {
     width: 100%;
-    height: 24px;
+    height: 34px;
     display: flex;
     justify-content: space-between;
     margin-right: 5px;
@@ -36,15 +36,29 @@
 .summaryContent {
     margin-left: 5px;
     margin-right: 5px;
-    max-height: 240px;
+    max-height: 230px;
     overflow: auto;
     scrollbar-color: darkgrey #263238;
     scrollbar-width: thin;
 }
 
-.title {
+.summaryContentServers {
+    margin-left: 5px;
+    margin-right: 5px;
+    max-height: 350px;
+    overflow: auto;
+    scrollbar-color: darkgrey #263238;
+    scrollbar-width: thin;
+}
+
+.titleButton {
     margin-left: 5px;
     margin-top: 4px;
+    outline: none;
+}
+
+.marked {
+    color: #0097a7;
 }
 
 .divider {
@@ -60,13 +74,6 @@
     padding-right: 5px;
 }
 
-mat-icon {
-    font-size: 18px;
-    width: 20px;
-    height: 20px;
-    margin-top: 4px;
-}
-
 ::-webkit-scrollbar {
     width: 0.5em;
 }
@@ -91,9 +98,16 @@ mat-icon {
 
 .closeButton {
     cursor: pointer;
+    font-size: 24px;
+    margin-top: 8px;
+    margin-right: 5px;
 }
 
 .filterBox {
     display: flex;
     justify-content: space-between;
 }
+
+.notvisible {
+    display: none;
+}

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

@@ -11,13 +11,21 @@ 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';
+import { Server } from '../../models/server';
+import { ComputeService } from '../../services/compute.service';
 
+export class MockedComputeService {
+    getComputes(server: Server) {
+        return of([]);
+    }
+}
 
 describe('TopologySummaryComponent', () => {
     let component: TopologySummaryComponent;
     let fixture: ComponentFixture<TopologySummaryComponent>;
     let mockedProjectService: MockedProjectService = new MockedProjectService();
     let mockedNodesDataSource: MockedNodesDataSource = new MockedNodesDataSource();
+    let mockedComputeService: MockedComputeService = new MockedComputeService();
   
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -32,7 +40,8 @@ describe('TopologySummaryComponent', () => {
             ],
             providers: [
                 { provide: ProjectService, useValue: mockedProjectService },
-                { provide: NodesDataSource, useValue: mockedNodesDataSource }
+                { provide: NodesDataSource, useValue: mockedNodesDataSource },
+                { provide: ComputeService, useValue: mockedComputeService}
             ],
             declarations: [TopologySummaryComponent],
             schemas: [NO_ERRORS_SCHEMA]

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

@@ -6,6 +6,8 @@ import { Node } from '../../cartography/models/node';
 import { Subscription } from 'rxjs';
 import { ProjectService } from '../../services/project.service';
 import { ProjectStatistics } from '../../models/project-statistics';
+import { Compute } from '../../models/compute';
+import { ComputeService } from '../../services/compute.service';
 
 
 @Component({
@@ -27,10 +29,13 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
     startedStatusFilterEnabled: boolean = false;
     suspendedStatusFilterEnabled: boolean = false;
     stoppedStatusFilterEnabled: boolean = false;
+    computes: Compute[] = [];
+    isTopologyVisible: boolean = true;
 
     constructor(
         private nodesDataSource: NodesDataSource,
-        private projectService: ProjectService
+        private projectService: ProjectService,
+        private computeService: ComputeService
     ) {}
 
     ngOnInit() {
@@ -48,6 +53,14 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
         this.projectService.getStatistics(this.server, this.project.project_id).subscribe((stats) => {
             this.projectsStatistics = stats;
         });
+
+        this.computeService.getComputes(this.server).subscribe((computes) => {
+            this.computes = computes;
+        });
+    }
+
+    toogleTopologyVisibility(value: boolean) {
+        this.isTopologyVisible = value;
     }
 
     compareAsc(first: Node, second: Node) {

src/app/material.imports.ts

@@ -20,7 +20,8 @@ import {
   MatStepperModule,
   MatRadioModule,
   MatGridListModule,
-  MatTabsModule
+  MatTabsModule,
+  MatTreeModule
 } from '@angular/material';
 
 export const MATERIAL_IMPORTS = [
@@ -45,5 +46,6 @@ export const MATERIAL_IMPORTS = [
   MatStepperModule,
   MatRadioModule,
   MatGridListModule,
-  MatTabsModule
+  MatTabsModule,
+  MatTreeModule
 ];

src/app/models/compute.ts

@@ -0,0 +1,19 @@
+export interface Capabilities {
+    node_types: string[];
+    platform: string;
+    version: string;
+}
+
+export interface Compute {
+    capabilities: Capabilities;
+    compute_id: string;
+    connected: boolean;
+    cpu_usage_percent: number;
+    host: string;
+    last_error?: any;
+    memory_usage_percent: number;
+    name: string;
+    port: number;
+    protocol: string;
+    user: string;
+}

src/app/services/compute.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Compute } from '../models/compute';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class ComputeService {
+    constructor(private httpServer: HttpServer) {}
+
+    getComputes(server: Server): Observable<Compute[]> {
+        return this.httpServer.get<Compute[]>(server, '/computes') as Observable<Compute[]>;
+    }
+}