Page for creating new templates added

src/app/app-routing.module.ts

@@ -9,7 +9,9 @@ import { SettingsComponent } from './components/settings/settings.component';
 import { LocalServerComponent } from './components/local-server/local-server.component';
 import { PreferencesComponent } from './components/preferences/preferences.component';
 import { QemuPreferencesComponent } from './components/preferences/qemu/qemu-preferences/qemu-preferences.component';
-import { QemuVirtualMachinesComponent } from './components/preferences/qemu/qemu-virtual-machines/qemu-virtual-machines.component';
+import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component';
+import { QemuVmTemplateDetailsComponent } from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component';
+import { AddQemuVmTemplateComponent } from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component';
 
 const routes: Routes = [
   {
@@ -23,7 +25,9 @@ const routes: Routes = [
       { path: 'settings', component: SettingsComponent },
       { path: 'server/:server_id/preferences', component: PreferencesComponent },
       { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
-      { path: 'server/:server_id/preferences/qemu/templates', component: QemuVirtualMachinesComponent }
+      { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },
+      { path: 'server/:server_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent },
+      { path: 'server/:server_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent }
     ]
   },
   { path: 'server/:server_id/project/:project_id', component: ProjectMapComponent }

src/app/app.module.ts

@@ -91,7 +91,10 @@ import { TextEditorDialogComponent } from './components/project-map/drawings-edi
 import { PreferencesComponent } from './components/preferences/preferences.component';
 import { QemuPreferencesComponent } from './components/preferences/qemu/qemu-preferences/qemu-preferences.component';
 import { ServerSettingsService } from './services/server-settings.service';
-import { QemuVirtualMachinesComponent } from './components/preferences/qemu/qemu-virtual-machines/qemu-virtual-machines.component';
+import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component';
+import { AddQemuVmTemplateComponent } from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component';
+import { QemuVmTemplateDetailsComponent } from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component';
+import { QemuService } from './services/qemu.service';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -146,7 +149,9 @@ if (environment.production) {
     StyleEditorDialogComponent,
     TextEditorDialogComponent,
     QemuPreferencesComponent,
-    QemuVirtualMachinesComponent
+    QemuVmTemplatesComponent,
+    AddQemuVmTemplateComponent,
+    QemuVmTemplateDetailsComponent
   ],
   imports: [
     BrowserModule,
@@ -193,7 +198,8 @@ if (environment.production) {
     ServerDatabase,
     ProjectNameValidator,
     ToolsService,
-    ServerSettingsService
+    ServerSettingsService,
+    QemuService
   ],
   entryComponents: [
     AddServerDialogComponent,

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html

@@ -0,0 +1,48 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">New QEMU template</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="example-container mat-elevation-z8">
+            <mat-vertical-stepper [linear]="true">
+                <mat-step label="QEMU VM Name">
+                    <mat-form-field class="form-field">
+                        <input matInput type="text" placeholder="Please choose a descriptive name for your new QEMU virtual machine"/>
+                    </mat-form-field><br/>
+                    <mat-checkbox>
+                        This is a legacy ASA VM
+                    </mat-checkbox>
+                </mat-step>
+                <mat-step label="QEMU binary and memory">
+                    <mat-form-field class="form-field">
+                        <mat-select placeholder="Qemu binary" [(ngModel)]="selectedBinary">
+                            <mat-option *ngFor="let binary of qemuBinaries" [value]="binary">
+                                {{binary.path}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field><br/>
+                    <mat-form-field class="form-field">
+                        <input matInput type="number" placeholder="RAM" [(ngModel)]="ramMemory"/>
+                    </mat-form-field>
+                </mat-step>
+                <mat-step label="Console type">
+                    <mat-form-field class="form-field">
+                        <mat-select placeholder="Console type" [(ngModel)]="selectedConsoleType">
+                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                                {{type}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </mat-step>
+                <mat-step label="Disk image">
+                    <mat-radio-group>
+                        <mat-radio-button value="1" (click)="setradio('Male')">Existing image</mat-radio-button>
+                        <mat-radio-button value="2" (click)="setradio('Male')">New image</mat-radio-button>
+                    </mat-radio-group>
+                </mat-step>
+            </mat-vertical-stepper>
+        </div>
+    </div>
+</div>

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.scss

@@ -0,0 +1,3 @@
+.form-field {
+    width: 100%;
+}

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { switchMap } from 'rxjs/operators';
+import { QemuService } from '../../../../services/qemu.service';
+import { QemuBinary } from '../../../../models/qemu/qemu-binary';
+
+
+@Component({
+    selector: 'app-add-qemu-virtual-machine-template',
+    templateUrl: './add-qemu-vm-template.component.html',
+    styleUrls: ['./add-qemu-vm-template.component.scss']
+})
+export class AddQemuVmTemplateComponent implements OnInit {
+    server: Server;
+    qemuBinaries: QemuBinary[] = [];
+    selectedBinary: QemuBinary;
+    ramMemory: number;
+    consoleTypes: string[] = ['telnet', 'vnc', 'spice', 'spice+agent', 'none'];
+    selectedConsoleType: string;
+    
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private qemuService: QemuService
+    ) {}
+
+    ngOnInit() {
+        this.route.paramMap
+        .pipe(
+          switchMap((params: ParamMap) => {
+            const server_id = params.get('server_id');
+            return this.serverService.get(parseInt(server_id, 10));
+          })
+        )
+        .subscribe((server: Server) => {
+            this.server = server;
+            this.qemuService.getBinaries(server).subscribe((qemuBinaries: QemuBinary[]) => {
+                this.qemuBinaries = qemuBinaries;
+            });
+        });
+    }
+
+    setradio(msg){
+        console.log(msg);
+    }
+}

src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.html

@@ -2,7 +2,7 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">QEMU preferences</h1>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/qemu/templates" mat-raised-button color="primary">QEMU Virtual Machines</button>
+            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/qemu/templates" mat-raised-button color="primary">QEMU VM templates</button>
         </div>
     </div>
     <div class="default-content">

src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.ts

@@ -4,10 +4,8 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Server } from '../../../../models/server';
 import { switchMap } from 'rxjs/operators';
 import { ServerService } from '../../../../services/server.service';
-import { ServerSettings } from '../../../../models/serverSettings';
-import { Qemu } from '../../../../models/server-settings-models/qemu';
 import { ToasterService } from '../../../../services/toaster.service';
-import { QemuSettings } from '../../../../models/settings/qemu';
+import { QemuSettings } from '../../../../models/settings/qemu-settings';
 
 
 @Component({

src/app/components/preferences/qemu/qemu-virtual-machines/qemu-virtual-machines.component.ts

@@ -1,19 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { Server } from '../../../../models/server';
-import { ActivatedRoute } from '@angular/router';
-
-
-@Component({
-    selector: 'app-qemu-virtual-machines',
-    templateUrl: './qemu-virtual-machines.component.html',
-    styleUrls: ['./qemu-virtual-machines.component.scss']
-})
-export class QemuVirtualMachinesComponent implements OnInit {
-    server: Server;
-
-    constructor(
-        private route: ActivatedRoute
-    ) {}
-
-    ngOnInit() {}
-}

src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+    selector: 'app-qemu-virtual-machine-template-details',
+    templateUrl: './qemu-vm-template-details.component.html',
+    styleUrls: ['./qemu-vm-template-details.component.scss']
+})
+export class QemuVmTemplateDetailsComponent implements OnInit {
+    constructor(){}
+
+    ngOnInit(){}
+}

src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html

@@ -0,0 +1,17 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">QEMU VM templates</h1>
+            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/qemu/addtemplate" mat-raised-button color="primary">Add QEMU VM template</button>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="example-container mat-elevation-z8">
+            <mat-nav-list *ngIf="server">
+                <mat-list-item *ngFor='let template of qemuTemplates' routerLink="{{template.template_id}}">
+                    {{template.name}}
+                </mat-list-item>
+            </mat-nav-list>
+        </div>
+    </div>
+</div>

src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.scss

@@ -0,0 +1,4 @@
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}

src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { TemplateService } from '../../../../services/template.service';
+import { ServerService } from '../../../../services/server.service';
+import { switchMap } from 'rxjs/operators';
+import { QemuTemplate } from '../../../../models/templates/qemu-template';
+import { QemuService } from '../../../../services/qemu.service';
+
+
+@Component({
+    selector: 'app-qemu-virtual-machines-templates',
+    templateUrl: './qemu-vm-templates.component.html',
+    styleUrls: ['./qemu-vm-templates.component.scss']
+})
+export class QemuVmTemplatesComponent implements OnInit {
+    server: Server;
+    qemuTemplates: QemuTemplate[] = [];
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private qemuService: QemuService 
+    ) {}
+
+    ngOnInit() {
+        this.route.paramMap
+        .pipe(
+          switchMap((params: ParamMap) => {
+            const server_id = params.get('server_id');
+            return this.serverService.get(parseInt(server_id, 10));
+          })
+        )
+        .subscribe((server: Server) => {
+            this.server = server;
+            this.qemuService.getTemplates(server).subscribe((qemuTemplates: QemuTemplate[]) => {
+                qemuTemplates.forEach((template) => {
+                    if ((template.template_type = 'qemu') && !template.builtin) {
+                        this.qemuTemplates.push(template);
+                    }
+                });
+            });
+        });
+    }
+}

src/app/material.imports.ts

@@ -16,7 +16,9 @@ import {
   MatExpansionModule,
   MatSortModule,
   MatSelectModule,
-  MatTooltipModule
+  MatTooltipModule,
+  MatStepperModule,
+  MatRadioModule
 } from '@angular/material';
 
 export const MATERIAL_IMPORTS = [
@@ -37,5 +39,7 @@ export const MATERIAL_IMPORTS = [
   MatExpansionModule,
   MatSortModule,
   MatSelectModule,
-  MatTooltipModule
+  MatTooltipModule,
+  MatStepperModule,
+  MatRadioModule
 ];

src/app/models/qemu/qemu-binary.ts

@@ -0,0 +1,4 @@
+export class QemuBinary {
+    path: string;
+    version: string;
+}

src/app/models/templates/qemu-template.ts

@@ -0,0 +1,44 @@
+export class QemuTemplate {
+    adapter_type: string;
+    adapters: number;
+    bios_image: string;
+    boot_priority: string;
+    builtin: boolean;
+    category: string;
+    cdrom_image: string;
+    compute_id: string;
+    console_auto_start: boolean;
+    console_type: string;
+    cpu_throttling: number;
+    cpus: number;
+    custom_adapters?: (null)[] | null;
+    default_name_format: string;
+    first_port_name: string;
+    hda_disk_image: string;
+    hda_disk_interface: string;
+    hdb_disk_image: string;
+    hdb_disk_interface: string;
+    hdc_disk_image: string;
+    hdc_disk_interface: string;
+    hdd_disk_image: string;
+    hdd_disk_interface: string;
+    initrd: string;
+    kernel_command_line: string;
+    kernel_image: string;
+    legacy_networking: boolean;
+    linked_clone: boolean;
+    mac_address: string;
+    name: string;
+    on_close: string;
+    options: string;
+    platform: string;
+    port_name_format: string;
+    port_segment_size: number;
+    process_priority: string;
+    qemu_path: string;
+    ram: number;
+    symbol: string;
+    template_id: string;
+    template_type: string;
+    usage: string;
+}

src/app/services/qemu.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from "@angular/core";
+import { HttpServer } from './http-server.service';
+import { Observable } from 'rxjs';
+import { QemuTemplate } from '../models/templates/qemu-template';
+import { Server } from '../models/server';
+import { QemuBinary } from '../models/qemu/qemu-binary';
+
+@Injectable()
+export class QemuService {
+    constructor(private httpServer: HttpServer) {}
+
+    getTemplates(server: Server): Observable<QemuTemplate[]> {
+        return this.httpServer.get<QemuTemplate[]>(server, '/templates') as Observable<QemuTemplate[]>;
+    }
+
+    getBinaries(server: Server): Observable<QemuBinary[]> {
+        return this.httpServer.get<QemuBinary[]>(server, '/computes/local/qemu/binaries') as Observable<QemuBinary[]>;
+    }
+}

src/app/services/server-settings.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from "@angular/core";
 import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { ServerSettings } from '../models/serverSettings';
-import { QemuSettings } from '../models/settings/qemu';
+import { QemuSettings } from '../models/settings/qemu-settings';
 
 @Injectable()
 export class ServerSettingsService {

src/app/services/template.service.ts

@@ -5,6 +5,7 @@ import { Server } from '../models/server';
 import { HttpServer } from './http-server.service';
 import { Template } from '../models/template';
 import { Observable } from 'rxjs';
+import { QemuTemplate } from '../models/templates/qemu-template';
 
 @Injectable()
 export class TemplateService {