From c684577c57bf203bf8ed2b77f9088a3f79e85141 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Fri, 8 May 2020 17:01:51 +0200
Subject: [PATCH] Server type in template preferences

---
 .../cloud-nodes-add-template.component.html   |  5 ++++
 .../cloud-nodes-add-template.component.ts     | 24 +++++++++++++++++-
 .../ethernet-hubs-add-template.component.html |  5 ++++
 .../ethernet-hubs-add-template.component.ts   | 24 +++++++++++++++++-
 ...ernet-switches-add-template.component.html |  5 ++++
 ...thernet-switches-add-template.component.ts | 24 +++++++++++++++++-
 .../add-docker-template.component.html        |  3 ++-
 .../add-ios-template.component.html           |  7 ++++++
 .../add-ios-template.component.ts             | 25 ++++++++++++++++++-
 .../add-iou-template.component.html           |  4 +--
 .../add-iou-template.component.ts             | 21 +++++++++++++---
 .../add-qemu-vm-template.component.html       |  7 ++++++
 .../add-qemu-vm-template.component.ts         | 24 +++++++++++++++++-
 13 files changed, 166 insertions(+), 12 deletions(-)

diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html
index ffa1a4f7..e9ece63c 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html
@@ -6,6 +6,11 @@
     </div>
     <div class="default-content">
         <mat-card class="matCard">
+            <mat-radio-group class="radio-group">
+                <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run the cloud node on your local computer</mat-radio-button>
+                <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run the cloud node on the GNS3 VM</mat-radio-button>
+            </mat-radio-group>
+
             <form [formGroup]="formGroup">
                 <mat-form-field class="form-field">
                     <input formControlName="templateName" matInput type="text" placeholder="Template name">
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
index d1709375..05a4592a 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
@@ -8,6 +8,8 @@ import { TemplateMocksService } from '../../../../../services/template-mocks.ser
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { CloudTemplate } from '../../../../../models/templates/cloud-template';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { ComputeService } from '../../../../../services/compute.service';
+import { Compute } from '../../../../../models/compute';
 
 
 @Component({
@@ -19,6 +21,10 @@ export class CloudNodesAddTemplateComponent implements OnInit {
     server: Server;
     templateName: string = '';
     formGroup: FormGroup;
+
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
     
     constructor(
         private route: ActivatedRoute,
@@ -27,7 +33,8 @@ export class CloudNodesAddTemplateComponent implements OnInit {
         private router: Router,
         private toasterService: ToasterService,
         private templateMocksService: TemplateMocksService,
-        private formBuilder: FormBuilder
+        private formBuilder: FormBuilder,
+        private computeService: ComputeService
     ) {
         this.formGroup = this.formBuilder.group({
             templateName: new FormControl('', Validators.required)
@@ -38,9 +45,23 @@ export class CloudNodesAddTemplateComponent implements OnInit {
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
+
+            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+            });
         });
     }
 
+    setServerType(serverType: string) {
+        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+            this.isGns3VmChosen = true;
+            this.isLocalComputerChosen = false;
+        } else {
+            this.isGns3VmChosen = false;
+            this.isLocalComputerChosen = true;
+        }
+    }
+
     goBack() {
         this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
     }
@@ -55,6 +76,7 @@ export class CloudNodesAddTemplateComponent implements OnInit {
 
             cloudTemplate.template_id = uuid();
             cloudTemplate.name = this.formGroup.get('templateName').value;
+            cloudTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
 
             this.builtInTemplatesService.addTemplate(this.server, cloudTemplate).subscribe((cloudNodeTemplate) => {
                 this.goBack();
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html
index 76ad4d00..dc590d73 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html
@@ -6,6 +6,11 @@
     </div>
     <div class="default-content">
         <mat-card class="matCard">
+            <mat-radio-group class="radio-group">
+                <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run the Ethernet Hub on your local computer</mat-radio-button>
+                <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run the Ethernet Hub on the GNS3 VM</mat-radio-button>
+            </mat-radio-group>
+
             <form [formGroup]="formGroup">
                 <mat-form-field class="form-field">
                     <input formControlName="templateName" matInput type="text" placeholder="Template name">
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
index 751d9a06..e9a2885a 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
@@ -8,6 +8,8 @@ import { TemplateMocksService } from '../../../../../services/template-mocks.ser
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hub-template';
 import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
+import { ComputeService } from '../../../../../services/compute.service';
+import { Compute } from '../../../../../models/compute';
 
 
 @Component({
@@ -19,6 +21,10 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
     server: Server;
     templateName: string = '';
     formGroup: FormGroup;
+
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
     
     constructor(
         private route: ActivatedRoute,
@@ -27,7 +33,8 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
         private router: Router,
         private toasterService: ToasterService,
         private templateMocksService: TemplateMocksService,
-        private formBuilder: FormBuilder 
+        private formBuilder: FormBuilder,
+        private computeService: ComputeService
     ) {
         this.formGroup = this.formBuilder.group({
             templateName: new FormControl('', Validators.required),
@@ -39,9 +46,23 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
+
+            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+            });
         });
     }
 
+    setServerType(serverType: string) {
+        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+            this.isGns3VmChosen = true;
+            this.isLocalComputerChosen = false;
+        } else {
+            this.isGns3VmChosen = false;
+            this.isLocalComputerChosen = true;
+        }
+    }
+
     goBack() {
         this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
     }
@@ -56,6 +77,7 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
 
             ethernetHubTemplate.template_id = uuid();
             ethernetHubTemplate.name = this.formGroup.get('templateName').value;
+            ethernetHubTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
 
             for(let i=0; i<this.formGroup.get('numberOfPorts').value; i++){
                 ethernetHubTemplate.ports_mapping.push({
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
index 1f0cb609..c0f21c20 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
@@ -6,6 +6,11 @@
     </div>
     <div class="default-content">
         <mat-card class="matCard">
+            <mat-radio-group class="radio-group">
+                <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run the Ethernet switch on your local computer</mat-radio-button>
+                <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run the Ethernet switch on the GNS3 VM</mat-radio-button>
+            </mat-radio-group>
+            
             <form [formGroup]="formGroup">
                 <mat-form-field class="form-field">
                     <input formControlName="templateName" matInput type="text" placeholder="Template name">
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
index b019965c..9ea693c3 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
@@ -8,6 +8,8 @@ import { TemplateMocksService } from '../../../../../services/template-mocks.ser
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { ComputeService } from '../../../../../services/compute.service';
+import { Compute } from '../../../../../models/compute';
 
 
 @Component({
@@ -19,6 +21,10 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
     server: Server;
     templateName: string = '';
     formGroup: FormGroup;
+
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
     
     constructor(
         private route: ActivatedRoute,
@@ -27,7 +33,8 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
         private router: Router,
         private toasterService: ToasterService,
         private templateMocksService: TemplateMocksService,
-        private formBuilder: FormBuilder
+        private formBuilder: FormBuilder,
+        private computeService: ComputeService
     ) {
         this.formGroup = this.formBuilder.group({
             templateName: new FormControl('', Validators.required),
@@ -39,6 +46,10 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
+
+            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+            });
         });
     }
 
@@ -46,6 +57,16 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
         this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
     }
 
+    setServerType(serverType: string) {
+        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+            this.isGns3VmChosen = true;
+            this.isLocalComputerChosen = false;
+        } else {
+            this.isGns3VmChosen = false;
+            this.isLocalComputerChosen = true;
+        }
+    }
+
     addTemplate() {
         if (!this.formGroup.invalid) {
             let ethernetSwitchTemplate: EthernetSwitchTemplate;
@@ -56,6 +77,7 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
 
             ethernetSwitchTemplate.template_id = uuid();
             ethernetSwitchTemplate.name = this.formGroup.get('templateName').value;
+            ethernetSwitchTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
 
             for(let i=0; i<this.formGroup.get('numberOfPorts').value; i++){
                 ethernetSwitchTemplate.ports_mapping.push({
diff --git a/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.html b/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.html
index f5319e3f..710e14db 100644
--- a/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.html
+++ b/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.html
@@ -10,7 +10,8 @@
                 <mat-step label="Server type">
                     <mat-radio-group class="radio-group">
                         <!-- <mat-radio-button class="radio-button" value="1" (click)="setServerType('remote computer')">Run this Docker container on a remote computer</mat-radio-button> -->
-                        <mat-radio-button class="radio-button" value="2" (click)="setServerType('gns3 vm')" checked>Run this Docker container on the GNS3 VM</mat-radio-button>
+                        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run this Docker container on your local computer</mat-radio-button>
+                        <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run this Docker container on the GNS3 VM</mat-radio-button>
                     </mat-radio-group>
                 </mat-step>
                 <mat-step label="Docker Virtual Machine">
diff --git a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html
index 95cc87b0..d65543c3 100644
--- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html
+++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html
@@ -7,6 +7,13 @@
     <div class="default-content" *ngIf="iosTemplate">
         <div class="container mat-elevation-z8">
             <mat-vertical-stepper [linear]="true">
+                <mat-step label="Server type">
+                    <mat-radio-group class="radio-group">
+                        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run this IOS router on your local computer</mat-radio-button>
+                        <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run this IOS router on the GNS3 VM</mat-radio-button>
+                    </mat-radio-group>
+                </mat-step>
+
                 <mat-step label="IOS image">
                     <input
                         type="file"
diff --git a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
index 1e8674e6..a63c2afa 100644
--- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
+++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
@@ -12,6 +12,8 @@ import { IosConfigurationService } from '../../../../services/ios-configuration.
 import { IosImage } from '../../../../models/images/ios-image';
 import { FileUploader, FileItem, ParsedResponseHeaders } from 'ng2-file-upload';
 import { ServerResponse } from '../../../../models/serverResponse';
+import { ComputeService } from '../../../../services/compute.service';
+import { Compute } from '../../../../models/compute';
 
 @Component({
     selector: 'app-add-ios-template',
@@ -44,6 +46,10 @@ export class AddIosTemplateComponent implements OnInit {
     ciscoUrl: string = "https://cfn.cloudapps.cisco.com/ITDIT/CFN/jsp/SearchBySoftware.jsp";
     uploader: FileUploader;
 
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
+
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
@@ -52,7 +58,8 @@ export class AddIosTemplateComponent implements OnInit {
         private formBuilder: FormBuilder,
         private router: Router,
         private templateMocksService: TemplateMocksService,
-        private iosConfigurationService: IosConfigurationService
+        private iosConfigurationService: IosConfigurationService,
+        private computeService: ComputeService
     ) {
         this.iosTemplate = new IosTemplate();
 
@@ -107,9 +114,23 @@ export class AddIosTemplateComponent implements OnInit {
                 this.chassis = this.iosConfigurationService.getChassis();
                 this.defaultRam = this.iosConfigurationService.getDefaultRamSettings();
             });
+
+            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+            });
         });
     }
 
+    setServerType(serverType: string) {
+        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+            this.isGns3VmChosen = true;
+            this.isLocalComputerChosen = false;
+        } else {
+            this.isGns3VmChosen = false;
+            this.isLocalComputerChosen = true;
+        }
+    }
+
     getImages() {
         this.iosService.getImages(this.server).subscribe((images: IosImage[]) => {
             this.iosImages = images;
@@ -146,6 +167,8 @@ export class AddIosTemplateComponent implements OnInit {
             if (this.networkAdaptersForTemplate.length>0) this.completeAdaptersData();
             if (this.networkModulesForTemplate.length>0) this.completeModulesData();
 
+            this.iosTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
+
             this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => {
                 this.goBack();
             });
diff --git a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html
index 9ce3423e..eebc77ec 100644
--- a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html
+++ b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html
@@ -9,8 +9,8 @@
             <mat-vertical-stepper [linear]="true">
                 <mat-step label="Server type">
                     <mat-radio-group class="radio-group">
-                        <mat-radio-button class="radio-button" value="1" (click)="setServerType('remote computer')">Run this IOU device on a remote computer</mat-radio-button><br/>
-                        <mat-radio-button class="radio-button" value="2" (click)="setServerType('gns3 vm')" checked>Run this IOU device on the GNS3 VM</mat-radio-button>
+                        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run this IOU device on your local computer</mat-radio-button>
+                        <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run this IOU device on the GNS3 VM</mat-radio-button>
                     </mat-radio-group>
                 </mat-step>
                 <mat-step label="Name">
diff --git a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
index 012528b5..7ada01d0 100644
--- a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
+++ b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
@@ -8,6 +8,8 @@ import { v4 as uuid } from 'uuid';
 import { TemplateMocksService } from '../../../../services/template-mocks.service';
 import { IouTemplate } from '../../../../models/templates/iou-template';
 import { IouService } from '../../../../services/iou.service';
+import { ComputeService } from '../../../../services/compute.service';
+import { Compute } from '../../../../models/compute';
 
 
 @Component({
@@ -18,7 +20,6 @@ import { IouService } from '../../../../services/iou.service';
 export class AddIouTemplateComponent implements OnInit {
     server: Server;
     iouTemplate: IouTemplate;
-    isGns3VmChosen: boolean = false;
     isRemoteComputerChosen: boolean = false;
     newImageSelected: boolean = false;
     types: string[] = ['L2 image', 'L3 image'];
@@ -27,6 +28,10 @@ export class AddIouTemplateComponent implements OnInit {
 
     templateNameForm: FormGroup;
     imageForm: FormGroup;
+
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
     
     constructor(
         private route: ActivatedRoute,
@@ -35,7 +40,8 @@ export class AddIouTemplateComponent implements OnInit {
         private toasterService: ToasterService,
         private router: Router,
         private formBuilder: FormBuilder,
-        private templateMocksService: TemplateMocksService
+        private templateMocksService: TemplateMocksService,
+        private computeService: ComputeService
     ) {
         this.iouTemplate = new IouTemplate();
 
@@ -56,14 +62,20 @@ export class AddIouTemplateComponent implements OnInit {
             this.templateMocksService.getIouTemplate().subscribe((iouTemplate: IouTemplate) => {
                 this.iouTemplate = iouTemplate;
             })
+
+            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+            });
         });
     }
 
     setServerType(serverType: string) {
-        if (serverType === 'gns3 vm') {
+        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
             this.isGns3VmChosen = true;
+            this.isLocalComputerChosen = false;
         } else {
-            this.isRemoteComputerChosen = true;
+            this.isGns3VmChosen = false;
+            this.isLocalComputerChosen = true;
         }
     }
 
@@ -84,6 +96,7 @@ export class AddIouTemplateComponent implements OnInit {
             this.iouTemplate.template_id = uuid();
             this.iouTemplate.name = this.templateNameForm.get("templateName").value;
             this.iouTemplate.path = this.imageForm.get("imageName").value;
+            this.iouTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
 
             this.iouService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
                 this.goBack();
diff --git a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html
index 45124d5b..2026ff3d 100644
--- a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html
+++ b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html
@@ -7,6 +7,13 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-vertical-stepper [linear]="true">
+                <mat-step label="Server type">
+                    <mat-radio-group class="radio-group">
+                        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run this QEMU VM on your local computer</mat-radio-button>
+                        <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run this QEMU VM on the GNS3 VM</mat-radio-button>
+                    </mat-radio-group>
+                </mat-step>
+
                 <mat-step label="QEMU VM Name">
                     <form [formGroup]="nameForm">
                         <mat-form-field class="form-field">
diff --git a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
index 8f147ca3..95faf1ef 100644
--- a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
+++ b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
@@ -11,6 +11,8 @@ import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'
 import { v4 as uuid } from 'uuid';
 import { TemplateMocksService } from '../../../../services/template-mocks.service';
 import { QemuConfigurationService } from '../../../../services/qemu-configuration.service';
+import { ComputeService } from '../../../../services/compute.service';
+import { Compute } from '../../../../models/compute';
 
 
 @Component({
@@ -33,6 +35,10 @@ export class AddQemuVmTemplateComponent implements OnInit {
     nameForm: FormGroup;
     memoryForm: FormGroup;
     diskForm: FormGroup;
+
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
     
     constructor(
         private route: ActivatedRoute,
@@ -42,7 +48,8 @@ export class AddQemuVmTemplateComponent implements OnInit {
         private router: Router,
         private formBuilder: FormBuilder,
         private templateMocksService: TemplateMocksService,
-        private configurationService: QemuConfigurationService
+        private configurationService: QemuConfigurationService,
+        private computeService: ComputeService
     ) {
         this.qemuTemplate = new QemuTemplate();
 
@@ -77,9 +84,23 @@ export class AddQemuVmTemplateComponent implements OnInit {
             });
 
             this.consoleTypes = this.configurationService.getConsoleTypes();
+
+            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+            });
         });
     }
 
+    setServerType(serverType: string) {
+        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+            this.isGns3VmChosen = true;
+            this.isLocalComputerChosen = false;
+        } else {
+            this.isGns3VmChosen = false;
+            this.isLocalComputerChosen = true;
+        }
+    }
+
     setDiskImage(value: string) {
         this.newImageSelected = value === "newImage";
     }
@@ -103,6 +124,7 @@ export class AddQemuVmTemplateComponent implements OnInit {
             }
             this.qemuTemplate.template_id = uuid();
             this.qemuTemplate.name = this.nameForm.get("templateName").value;
+            this.qemuTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
 
             this.qemuService.addTemplate(this.server, this.qemuTemplate).subscribe((template: QemuTemplate) => {
                 this.goBack();