Appliance table added

src/app/app.module.ts

@@ -276,6 +276,7 @@ import { HttpConsoleNewTabActionComponent } from './components/project-map/conte
 import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component';
 import { ConsoleGuard } from './guards/console-guard';
 import { NewTemplateDialogComponent } from './components/project-map/new-template-dialog/new-template-dialog.component';
+import { ApplianceService } from './services/appliances.service';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -559,7 +560,8 @@ if (environment.production) {
     ServerResolve,
     ProjectMapGuard,
     ConsoleGuard,
-    Title
+    Title,
+    ApplianceService
   ],
   entryComponents: [
     AddServerDialogComponent,

src/app/components/project-map/new-template-dialog/new-template-dialog.component.html

@@ -4,9 +4,9 @@
     <mat-step [stepControl]="firstFormGroup">
         <ng-template matStepLabel>Please select how you want to create new template</ng-template>
 
-        <mat-radio-group class="radio-group" aria-label="Sorting">
+        <mat-radio-group class="radio-group">
-            <mat-radio-button value="1" (click)="setFiletype('svg')" checked>SVG</mat-radio-button>
+            <mat-radio-button class="radio-button" value="1" (click)="setAction('install')" checked>Install new appliance from the GNS server</mat-radio-button><br/>
-            <mat-radio-button [disabled]="!isPngAvailable" value="2" (click)="setFiletype('png')">PNG</mat-radio-button>
+            <mat-radio-button class="radio-button" value="2" (click)="setAction('import')">Import an appliance file</mat-radio-button>
         </mat-radio-group>
 
         <div>
@@ -15,7 +15,51 @@
     </mat-step>
 
     <mat-step [stepControl]="secondFormGroup">
-        <ng-template matStepLabel>Appliances from server</ng-template>
+        <ng-template matStepLabel>{{actionTitle}}</ng-template>
+
+        <mat-card>
+            <mat-form-field class="filter-field">
+                <input matInput [(ngModel)]="searchText" placeholder="Filter">
+            </mat-form-field>
+
+            <mat-table 
+                class="mat-table" 
+                #table 
+                matSort 
+                (matSortChange)= "sortData($event)" 
+                [dataSource]="appliances | namefilter: searchText">
+                <ng-container matColumnDef="name">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+                    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+                </ng-container>
+
+                <ng-container matColumnDef="emulator">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header> Emulator </mat-header-cell>
+                    <mat-cell *matCellDef="let row"> {{row.emulator}} </mat-cell>
+                </ng-container>
+
+                <ng-container matColumnDef="vendor">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header> Vendor </mat-header-cell>
+                    <mat-cell *matCellDef="let row"> {{row.vendor_name}} </mat-cell>
+                </ng-container>
+        
+                <!-- <ng-container matColumnDef="actions">
+                    <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
+                    <mat-cell *matCellDef="let row" style="text-align: right">
+                        <button mat-icon-button matTooltip="Restore snapshot" (click)="restoreSnapshot(row)">
+                            <mat-icon aria-label="Restore snapshot">restore</mat-icon>
+                        </button>
+                        
+                        <button mat-icon-button matTooltip="Delete snapshot" (click)="deleteSnapshot(row)">
+                            <mat-icon aria-label="Delete snapshot">delete</mat-icon>
+                        </button>
+                    </mat-cell>
+                </ng-container> -->
+        
+                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+                <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+            </mat-table>
+        </mat-card>
     </mat-step>
 
     <mat-step>

src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss

@@ -0,0 +1,3 @@
+.radio-button {
+    margin-bottom: 30px;
+}

src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts

@@ -1,8 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectorRef } from '@angular/core';
 import { MatDialogRef } from '@angular/material';
 import { Server } from '../../../models/server';
 import { Node } from '../../../cartography/models/node';
 import { Project } from '../../../models/project';
+import { ApplianceService } from '../../../services/appliances.service';
+import { Appliance } from '../../../models/appliance';
 
 @Component({
     selector: 'app-new-template-dialog',
@@ -13,11 +15,41 @@ export class NewTemplateDialogComponent implements OnInit {
     @Input() server: Server;
     @Input() project: Project;
 
+    public action: string = 'install';
+    public actionTitle: string = 'Install appliance from server';
+
+    public searchText: string = '';
+    public appliances: Appliance[] = [];
+
+    public categories: string[] = ['router', 'multilayer_switch', 'guest', 'firewall'];
+    public displayedColumns: string[] = ['name', 'emulator', 'vendor'];
+
     constructor(
-        public dialogRef: MatDialogRef<NewTemplateDialogComponent>
+        public dialogRef: MatDialogRef<NewTemplateDialogComponent>,
+        private applianceService: ApplianceService,
+        private changeDetector: ChangeDetectorRef
     ) {}
 
-    ngOnInit() {}
+    ngOnInit() {
+        this.applianceService.getAppliances(this.server).subscribe((appliances) => {
+            this.appliances = appliances;
+            this.appliances.forEach(appliance => {
+                if (appliance.docker) appliance.emulator = 'Docker';
+                if (appliance.dynamips) appliance.emulator = 'Dynamips';
+                if (appliance.iou) appliance.emulator = 'Iou';
+                if (appliance.qemu) appliance.emulator = 'Qemu';
+            });
+        });
+    }
+
+    setAction(action: string) {
+        this.action = action;
+        if (action === 'install') {
+            this.actionTitle = 'Install appliance from server';
+        } else if (action === 'import') {
+            this.actionTitle = 'Import an appliance file';
+        }
+    }
 
     onCloseClick() {
         this.dialogRef.close();

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

@@ -854,7 +854,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public addNewTemplate() {
     const dialogRef = this.dialog.open(NewTemplateDialogComponent, {
       width: '1000px',
-      height: '500px',
+      maxHeight: '500px',
       autoFocus: false,
       disableClose: true
     });

src/app/models/appliance.ts

@@ -17,6 +17,29 @@ export interface Qemu {
     ram: number;
 }
 
+export interface Docker {
+    adapters: number;
+    console_type: string;
+    image: string;
+}
+
+export interface Dynamips {
+    chassis: string;
+    nvram: number;
+    platform: string;
+    ram: number;
+    slot0: string;
+    startup_config: string;
+}
+
+export interface Iou {
+    ethernet_adapters: number;
+    nvram: number;
+    ram: number;
+    serial_adapters: number;
+    startup_config: string;
+}
+
 export interface Images {
     hda_disk_image: string;
 }
@@ -27,6 +50,7 @@ export interface Version {
 }
 
 export interface Appliance {
+    availability: string;
     builtin: boolean;
     category: string;
     description: string;
@@ -39,7 +63,6 @@ export interface Appliance {
     port_name_format: string;
     product_name: string;
     product_url: string;
-    qemu: Qemu;
     registry_version: number;
     status: string;
     symbol: string;
@@ -47,4 +70,11 @@ export interface Appliance {
     vendor_name: string;
     vendor_url: string;
     versions: Version[];
+
+    docker: Docker;
+    dynamips: Dynamips;
+    iou: Iou;
+    qemu: Qemu;
+
+    emulator?: string;
 }

src/app/services/appliances.service.ts

@@ -7,7 +7,7 @@ import { ComputeStatistics } from '../models/computeStatistics';
 import { Appliance } from '../models/appliance';
 
 @Injectable()
-export class ComputeService {
+export class ApplianceService {
     constructor(private httpServer: HttpServer) {}
 
     getAppliances(server: Server): Observable<Appliance[]> {