Server type in template preferences

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">

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({
@@ -20,6 +22,10 @@ export class CloudNodesAddTemplateComponent implements OnInit {
     templateName: string = '';
     formGroup: FormGroup;
 
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
+    
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
@@ -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,7 +45,21 @@ 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() {
@@ -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();

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">

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({
@@ -20,6 +22,10 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
     templateName: string = '';
     formGroup: FormGroup;
 
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
+    
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
@@ -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,7 +46,21 @@ 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() {
@@ -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({

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">

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({
@@ -20,6 +22,10 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
     templateName: string = '';
     formGroup: FormGroup;
 
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
+    
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
@@ -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({

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">

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"

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,7 +114,21 @@ 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() {
@@ -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();
             });

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="1" (click)="setServerType('local')" checked>Run this IOU device on your local computer</mat-radio-button>
-                        <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 [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">

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'];
@@ -28,6 +29,10 @@ export class AddIouTemplateComponent implements OnInit {
     templateNameForm: FormGroup;
     imageForm: FormGroup;
 
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
+    
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
@@ -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();

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">

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({
@@ -34,6 +36,10 @@ export class AddQemuVmTemplateComponent implements OnInit {
     memoryForm: FormGroup;
     diskForm: FormGroup;
 
+    isGns3VmAvailable: boolean = false;
+    isGns3VmChosen: boolean = false;
+    isLocalComputerChosen: boolean = true;
+    
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
@@ -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,7 +84,21 @@ 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) {
@@ -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();