Creating appliance service

src/app/app.module.ts

@@ -275,6 +275,7 @@ import { NodeConsoleService } from './services/nodeConsole.service';
 import { HttpConsoleNewTabActionComponent } from './components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component';
 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';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -461,7 +462,8 @@ if (environment.production) {
     WebConsoleComponent,
     ConsoleWrapperComponent,
     HttpConsoleNewTabActionComponent,
-    WebConsoleFullWindowComponent
+    WebConsoleFullWindowComponent,
+    NewTemplateDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -600,7 +602,8 @@ if (environment.production) {
     ScreenshotDialogComponent,
     ConfirmationBottomSheetComponent,
     ConfigDialogComponent,
-    AdbutlerComponent
+    AdbutlerComponent,
+    NewTemplateDialogComponent
   ],
   bootstrap: [AppComponent]
 })

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

@@ -0,0 +1,29 @@
+<h1 mat-dialog-title>Add new template</h1>
+
+<mat-horizontal-stepper [linear]="false" #stepper>
+    <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-button value="1" (click)="setFiletype('svg')" checked>SVG</mat-radio-button>
+            <mat-radio-button [disabled]="!isPngAvailable" value="2" (click)="setFiletype('png')">PNG</mat-radio-button>
+        </mat-radio-group>
+
+        <div>
+            <button mat-button matStepperNext>Next</button>
+        </div>
+    </mat-step>
+
+    <mat-step [stepControl]="secondFormGroup">
+        <ng-template matStepLabel>Appliances from server</ng-template>
+    </mat-step>
+
+    <mat-step>
+      <ng-template matStepLabel>Done</ng-template>
+
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button (click)="stepper.reset()">Reset</button>
+      </div>
+    </mat-step>
+</mat-horizontal-stepper>

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

@@ -0,0 +1,25 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { Server } from '../../../models/server';
+import { Node } from '../../../cartography/models/node';
+import { Project } from '../../../models/project';
+
+@Component({
+    selector: 'app-new-template-dialog',
+    templateUrl: './new-template-dialog.component.html',
+    styleUrls: ['./new-template-dialog.component.scss']
+})
+export class NewTemplateDialogComponent implements OnInit {
+    @Input() server: Server;
+    @Input() project: Project;
+
+    constructor(
+        public dialogRef: MatDialogRef<NewTemplateDialogComponent>
+    ) {}
+
+    ngOnInit() {}
+
+    onCloseClick() {
+        this.dialogRef.close();
+    }
+}

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

@@ -59,6 +59,10 @@
           <mat-icon>info</mat-icon>
           <span>Go to system status</span>
         </button>
+        <button mat-menu-item (click)="addNewTemplate()">
+          <mat-icon>control_point</mat-icon>
+          <span>New template</span>
+        </button>
         <app-import-appliance [server]="server" [project]="project"></app-import-appliance>
         <button mat-menu-item [matMenuTriggerFor]="projectMenu">
           <mat-icon>settings</mat-icon>

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

@@ -67,6 +67,7 @@ import { NodeAddedEvent } from '../template/template-list-dialog/template-list-d
 import { NotificationService } from '../../services/notification.service';
 import { ThemeService } from '../../services/theme.service';
 import { Title } from '@angular/platform-browser';
+import { NewTemplateDialogComponent } from './new-template-dialog/new-template-dialog.component';
 
 
 @Component({
@@ -850,6 +851,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     });
   }
 
+  public addNewTemplate() {
+    const dialogRef = this.dialog.open(NewTemplateDialogComponent, {
+      width: '1000px',
+      height: '500px',
+      autoFocus: false,
+      disableClose: true
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.project = this.project;
+  }
+
   public ngOnDestroy() {
     this.title.setTitle('GNS3 Web UI');
     this.drawingsDataSource.clear();

src/app/models/appliance.ts

@@ -0,0 +1,50 @@
+export interface Image {
+    download_url: string;
+    filename: string;
+    filesize: any;
+    md5sum: string;
+    version: string;
+}
+
+export interface Qemu {
+    adapter_type: string;
+    adapters: number;
+    arch: string;
+    boot_priority: string;
+    console_type: string;
+    hda_disk_interface: string;
+    kvm: string;
+    ram: number;
+}
+
+export interface Images {
+    hda_disk_image: string;
+}
+
+export interface Version {
+    images: Images;
+    name: string;
+}
+
+export interface Appliance {
+    builtin: boolean;
+    category: string;
+    description: string;
+    documentation_url: string;
+    first_port_name: string;
+    images: Image[];
+    maintainer: string;
+    maintainer_email: string;
+    name: string;
+    port_name_format: string;
+    product_name: string;
+    product_url: string;
+    qemu: Qemu;
+    registry_version: number;
+    status: string;
+    symbol: string;
+    usage: string;
+    vendor_name: string;
+    vendor_url: string;
+    versions: Version[];
+}

src/app/services/appliances.service.ts

@@ -0,0 +1,16 @@
+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';
+import { ComputeStatistics } from '../models/computeStatistics';
+import { Appliance } from '../models/appliance';
+
+@Injectable()
+export class ComputeService {
+    constructor(private httpServer: HttpServer) {}
+
+    getAppliances(server: Server): Observable<Appliance[]> {
+        return this.httpServer.get<Appliance[]>(server, '/appliances') as Observable<Appliance[]>;
+    }
+}