ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-21 22:07:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Support for managing GNS3 VM preferences enabled

Browse Source
This commit is contained in:
Piotr Pekala 2019-11-20 05:26:09 -08:00
parent 95d0645506
commit de3938d5e0
4 changed files with 37 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/components/preferences/gns3vm/gns3vm.component.html
View File

@ -10,19 +10,23 @@
Enable the GNS3 VM
</mat-checkbox>
<mat-form-field class="select">
<mat-select [ngModelOptions]="{standalone: true}" placeholder="Virtualization engine" [(ngModel)]="gns3vm.engine">
<mat-select (selectionChange)="changeVmEngine($event)" [ngModelOptions]="{standalone: true}" placeholder="Virtualization engine" [(ngModel)]="gns3vm.engine">
<mat-option *ngFor="let engine of vmEngines" [value]="engine.engine_id">
{{engine.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="gns3vm.headless">
<mat-form-field class="select">
<mat-select [ngModelOptions]="{standalone: true}" placeholder="VM name" [(ngModel)]="gns3vm.vmname">
<mat-option *ngFor="let vm of vms" [value]="vm.vmname">
{{vm.vmname}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="gns3vm.engine === 'virtualbox' || gns3vm.engine === 'vmware'" [ngModelOptions]="{standalone: true}" [(ngModel)]="gns3vm.headless">
Run the VM in headless mode
</mat-checkbox>
<form [formGroup]="vmForm">
<mat-form-field class="form-field">
<input matInput formControlName="vmname" type="text" placeholder="VM name">
</mat-form-field>
<form *ngIf="gns3vm.engine !== 'remote'" [formGroup]="vmForm">
<mat-form-field class="form-field">
<input matInput formControlName="ram" type="number" placeholder="RAM">
</mat-form-field>
@ -30,10 +34,10 @@
<input matInput formControlName="vcpus" type="number" placeholder="vCPUs">
</mat-form-field>
</form>
<mat-radio-group aria-label="Actions when closing GNS3" class="radio-selection">
<mat-radio-button value="1" (click)="setCloseAction('keep')" checked>keep the GNS3 VM running</mat-radio-button>
<mat-radio-button value="2" (click)="setCloseAction('suspend')">suspend the GNS3 VM</mat-radio-button>
<mat-radio-button value="3" (click)="setCloseAction('stop')">stop the GNS3 VM</mat-radio-button>
<mat-radio-group *ngIf="gns3vm.engine !== 'remote'" [(ngModel)]="gns3vm.when_exit" aria-label="Actions when closing GNS3" class="radio-selection">
<mat-radio-button value="keep" (click)="setCloseAction('keep')">keep the GNS3 VM running</mat-radio-button>
<mat-radio-button value="suspend" (click)="setCloseAction('suspend')">suspend the GNS3 VM</mat-radio-button>
<mat-radio-button value="stop" (click)="setCloseAction('stop')">stop the GNS3 VM</mat-radio-button>
</mat-radio-group>
</mat-card>
<div class="buttons-bar">

5
src/app/components/preferences/gns3vm/gns3vm.component.scss
View File

@ -5,3 +5,8 @@
.select {
width: 100%;
}
.radio-selection {
display: flex;
justify-content: space-between;
}

20
src/app/components/preferences/gns3vm/gns3vm.component.ts
View File

@ -7,6 +7,7 @@ import { ServerService } from '../../../services/server.service';
import { Gns3vmEngine } from '../../../models/gns3vm/gns3vmEngine';
import { FormBuilder, FormControl, Validators, FormGroup } from '@angular/forms';
import { ToasterService } from '../../../services/toaster.service';
import { VM } from '../../../models/gns3vm/vm';
@Component({
@ -18,6 +19,7 @@ export class Gns3vmComponent implements OnInit {
public server: Server;
public gns3vm: Gns3vm;
public vmEngines: Gns3vmEngine[];
public vms: VM[] = [];
public vmForm: FormGroup;
constructor(
@ -29,7 +31,6 @@ export class Gns3vmComponent implements OnInit {
private toasterService: ToasterService
) {
this.vmForm = this.formBuilder.group({
vmname: new FormControl(null, [Validators.required]),
ram: new FormControl(null, [Validators.required]),
vcpus: new FormControl(null, [Validators.required])
});
@ -41,12 +42,14 @@ export class Gns3vmComponent implements OnInit {
this.server = server;
this.gns3vmService.getGns3vm(this.server).subscribe((vm: Gns3vm) => {
this.gns3vm = vm;
this.vmForm.controls['vmname'].setValue(this.gns3vm.vmname);
this.vmForm.controls['ram'].setValue(this.gns3vm.ram);
this.vmForm.controls['vcpus'].setValue(this.gns3vm.vcpus);
this.gns3vmService.getGns3vmEngines(this.server).subscribe((vmEngines: Gns3vmEngine[]) => {
this.vmEngines = vmEngines;
});
this.gns3vmService.getVms(this.server, this.gns3vm.engine).subscribe((vms: VM[]) => {
this.vms = vms;
});
});
});
}
@ -59,15 +62,24 @@ export class Gns3vmComponent implements OnInit {
this.gns3vm.when_exit = action;
}
changeVmEngine(event) {
this.gns3vmService.getVms(this.server, event.value).subscribe(
(vms: VM[]) => {
this.vms = vms;
},
error => {}
);
}
save() {
if (this.vmForm.valid) {
this.gns3vm.vmname = this.vmForm.get('vmname').value;
if ((this.vmForm.valid && this.gns3vm.vmname) || (this.gns3vm.engine==='remote' && this.gns3vm.vmname)) {
this.gns3vm.ram = this.vmForm.get('ram').value;
this.gns3vm.vcpus= this.vmForm.get('vcpus').value;
this.gns3vmService.updateGns3vm(this.server, this.gns3vm).subscribe(() => {
this.toasterService.success('GNS3 VM updated.');
});
this.goBack();
} else {
this.toasterService.error('Fill all required fields with correct values.');
}

4
src/app/services/gns3vm.service.ts
View File

@ -22,7 +22,7 @@ export class Gns3vmService {
return this.httpServer.get<Gns3vmEngine[]>(server, '/gns3vm/engines') as Observable<Gns3vmEngine[]>;
}
getVms(server: Server, engine: Gns3vmEngine): Observable<VM[]> {
return this.httpServer.get<VM[]>(server, `/gns3vm/engines/${engine.engine_id}/vms`)
getVms(server: Server, engine: string): Observable<VM[]> {
return this.httpServer.get<VM[]>(server, `/gns3vm/engines/${engine}/vms`)
}
}