mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-02-20 17:52:46 +00:00
Merge pull request #309 from GNS3/Rewriting-custom-adapters-component
Rewriting custom adapters component
This commit is contained in:
ziajka
GitHub
commit
b195ee52b1
@ -165,6 +165,7 @@ import { SearchFilter } from './filters/searchFilter.pipe';
|
||||
import { RecentlyOpenedProjectService } from './services/recentlyOpenedProject.service';
|
||||
import { ServerManagementService } from './services/server-management.service';
|
||||
import { DeleteActionComponent } from './components/project-map/context-menu/actions/delete-action/delete-action.component';
|
||||
import { CustomAdaptersComponent } from './components/preferences/common/custom-adapters/custom-adapters.component';
|
||||
|
||||
if (environment.production) {
|
||||
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
|
||||
@ -267,7 +268,8 @@ if (environment.production) {
|
||||
CopyDockerTemplateComponent,
|
||||
EmptyTemplatesListComponent,
|
||||
SymbolsMenuComponent,
|
||||
SearchFilter
|
||||
SearchFilter,
|
||||
CustomAdaptersComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="content" class="configurator">
|
||||
<div class="default-header">
|
||||
<div class="row">
|
||||
<h1 class="col">Custom adapters configuration</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="default-content">
|
||||
<div class="container mat-elevation-z8">
|
||||
<table class="table" mat-table [dataSource]="adapters">
|
||||
<ng-container matColumnDef="adapter_number">
|
||||
<th mat-header-cell *matHeaderCellDef> Adapter number </th>
|
||||
<td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="port_name">
|
||||
<th mat-header-cell *matHeaderCellDef> Port name </th>
|
||||
<td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="adapter_type">
|
||||
<th mat-header-cell *matHeaderCellDef> Adapter type </th>
|
||||
<td mat-cell *matCellDef="let element; let i = index;">
|
||||
<mat-select placeholder="Type" [(ngModel)]="adapters[i].adapter_type">
|
||||
<mat-option *ngFor="let type of networkTypes" [value]="type[0]">
|
||||
{{type[1]}} ({{type[0]}})
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="buttons-bar">
|
||||
<button mat-button (click)="cancelConfigureCustomAdapters()">Cancel</button>
|
||||
<button mat-raised-button color="primary" (click)="configureCustomAdapters()">Apply</button><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,47 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MatCheckboxModule, MatIconModule, MatToolbarModule, MatMenuModule, MatTableModule } from '@angular/material';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import { CustomAdaptersComponent } from './custom-adapters.component';
|
||||
|
||||
describe('Custom adapters component', () => {
|
||||
let component: CustomAdaptersComponent;
|
||||
let fixture: ComponentFixture<CustomAdaptersComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [MatTableModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
|
||||
declarations: [
|
||||
CustomAdaptersComponent
|
||||
],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CustomAdaptersComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should emit event when apply clicked', () => {
|
||||
spyOn(component.saveConfigurationEmitter, 'emit');
|
||||
|
||||
component.configureCustomAdapters();
|
||||
|
||||
expect(component.saveConfigurationEmitter.emit).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should emit event when cancel clicked', () => {
|
||||
spyOn(component.closeConfiguratorEmitter, 'emit');
|
||||
|
||||
component.cancelConfigureCustomAdapters();
|
||||
|
||||
expect(component.closeConfiguratorEmitter.emit).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,26 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-custom-adapters',
|
||||
templateUrl: './custom-adapters.component.html',
|
||||
styleUrls: ['./custom-adapters.component.scss', '../../preferences.component.scss']
|
||||
})
|
||||
export class CustomAdaptersComponent {
|
||||
@Input() networkTypes = [];
|
||||
@Input() displayedColumns: string[] = [];
|
||||
@Output() closeConfiguratorEmitter = new EventEmitter<boolean>();
|
||||
@Output() saveConfigurationEmitter = new EventEmitter<CustomAdapter[]>();
|
||||
|
||||
public adapters: CustomAdapter[];
|
||||
public numberOfAdapters: number;
|
||||
|
||||
cancelConfigureCustomAdapters(){
|
||||
this.closeConfiguratorEmitter.emit(false);
|
||||
}
|
||||
|
||||
configureCustomAdapters(){
|
||||
this.saveConfigurationEmitter.emit(this.adapters);
|
||||
}
|
||||
}
|
||||
@ -198,7 +198,7 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button mat-button class="configButton" (click)="configureCustomAdapters()">Configure custom adapters</button><br/>
|
||||
<button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">Configure custom adapters</button><br/>
|
||||
<mat-checkbox [(ngModel)]="qemuTemplate.legacy_networking">
|
||||
Use the legacy networking mode
|
||||
</mat-checkbox>
|
||||
@ -326,44 +326,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" class="configurator" *ngIf="isConfiguratorOpened">
|
||||
<div class="default-header">
|
||||
<div class="row">
|
||||
<h1 class="col">Custom adapters configuration</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="default-content" *ngIf="qemuTemplate">
|
||||
<div class="container mat-elevation-z8">
|
||||
<table class="table" mat-table [dataSource]="adapters">
|
||||
<ng-container matColumnDef="adapter_number">
|
||||
<th mat-header-cell *matHeaderCellDef> Adapter number </th>
|
||||
<td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="port_name">
|
||||
<th mat-header-cell *matHeaderCellDef> Port name </th>
|
||||
<td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="adapter_type">
|
||||
<th mat-header-cell *matHeaderCellDef> Adapter type </th>
|
||||
<td mat-cell *matCellDef="let element; let i = index;">
|
||||
<mat-select placeholder="Type" [(ngModel)]="adapters[i].adapter_type">
|
||||
<mat-option *ngFor="let type of networkTypes" [value]="type[0]">
|
||||
{{type[1]}} ({{type[0]}})
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="buttons-bar">
|
||||
<button mat-button (click)="cancelConfigureCustomAdapters()">Cancel</button>
|
||||
<button mat-raised-button color="primary" (click)="configureCustomAdapters()">Apply</button><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<app-symbols-menu *ngIf="isSymbolSelectionOpened && qemuTemplate" [server]="server" [symbol]="qemuTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
|
||||
<app-custom-adapters
|
||||
[hidden]="!(isConfiguratorOpened && qemuTemplate)"
|
||||
#customAdaptersConfigurator
|
||||
[networkTypes]="networkTypes"
|
||||
[displayedColumns]="displayedColumns"
|
||||
(closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
|
||||
(saveConfigurationEmitter)="saveCustomAdapters($event)"
|
||||
></app-custom-adapters>
|
||||
<app-symbols-menu
|
||||
*ngIf="isSymbolSelectionOpened && qemuTemplate"
|
||||
[server]="server"
|
||||
[symbol]="qemuTemplate.symbol"
|
||||
(symbolChangedEmitter)="symbolChanged($event)"
|
||||
></app-symbols-menu>
|
||||
|
||||
@ -79,9 +79,59 @@ describe('QemuVmTemplateDetailsComponent', () => {
|
||||
component.generalSettingsForm.controls['templateName'].setValue('template name');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('default name');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('symbol');
|
||||
component.qemuTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as QemuTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
expect(mockedQemuService.saveTemplate).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not call save template when template name is empty', () => {
|
||||
spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
|
||||
component.generalSettingsForm.controls['templateName'].setValue('');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('default name');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('symbol');
|
||||
component.qemuTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as QemuTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
expect(mockedQemuService.saveTemplate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
|
||||
it('should not call save template when default name is empty', () => {
|
||||
spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
|
||||
component.generalSettingsForm.controls['templateName'].setValue('template name');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('symbol');
|
||||
component.qemuTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as QemuTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
expect(mockedQemuService.saveTemplate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call save template when symbol is empty', () => {
|
||||
spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
|
||||
component.generalSettingsForm.controls['templateName'].setValue('template name');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('default name');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('');
|
||||
component.qemuTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as QemuTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
expect(mockedQemuService.saveTemplate).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component, OnInit, ViewChildren, ViewChild, QueryList } from "@angular/core";
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ServerService } from '../../../../services/server.service';
|
||||
import { QemuService } from '../../../../services/qemu.service';
|
||||
@ -9,6 +9,7 @@ import { ToasterService } from '../../../../services/toaster.service';
|
||||
import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
|
||||
import { QemuConfigurationService } from '../../../../services/qemu-configuration.service';
|
||||
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
|
||||
import { CustomAdaptersComponent } from '../../common/custom-adapters/custom-adapters.component';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -19,9 +20,7 @@ import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'
|
||||
export class QemuVmTemplateDetailsComponent implements OnInit {
|
||||
server: Server;
|
||||
qemuTemplate: QemuTemplate;
|
||||
|
||||
isSymbolSelectionOpened: boolean = false;
|
||||
|
||||
consoleTypes: string[] = [];
|
||||
diskInterfaces: string[] = [];
|
||||
networkTypes = [];
|
||||
@ -32,11 +31,12 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
|
||||
binaries: QemuBinary[] = [];
|
||||
activateCpuThrottling: boolean = true;
|
||||
isConfiguratorOpened: boolean = false;
|
||||
adapters: CustomAdapter[] = [];
|
||||
displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type'];
|
||||
|
||||
generalSettingsForm: FormGroup;
|
||||
|
||||
@ViewChild("customAdaptersConfigurator")
|
||||
customAdaptersConfigurator: CustomAdaptersComponent;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private serverService: ServerService,
|
||||
@ -62,22 +62,11 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
|
||||
this.getConfiguration();
|
||||
this.qemuService.getTemplate(this.server, template_id).subscribe((qemuTemplate: QemuTemplate) => {
|
||||
this.qemuTemplate = qemuTemplate;
|
||||
this.fillCustomAdapters();
|
||||
|
||||
this.qemuService.getBinaries(server).subscribe((qemuBinaries: QemuBinary[]) => {
|
||||
this.binaries = qemuBinaries;
|
||||
});
|
||||
|
||||
for(let i=0; i<this.qemuTemplate.adapters; i++){
|
||||
let adapter = this.qemuTemplate.custom_adapters.find(elem => elem.adapter_number === i);
|
||||
if (adapter) {
|
||||
this.adapters.push(adapter);
|
||||
} else {
|
||||
this.adapters.push({
|
||||
adapter_number: i,
|
||||
adapter_type: this.qemuTemplate.adapter_type
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -108,13 +97,41 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
|
||||
this.qemuTemplate.bios_image = event.target.files[0].name;
|
||||
}
|
||||
|
||||
cancelConfigureCustomAdapters(){
|
||||
this.isConfiguratorOpened = !this.isConfiguratorOpened;
|
||||
setCustomAdaptersConfiguratorState(state: boolean) {
|
||||
this.isConfiguratorOpened = state;
|
||||
|
||||
if (state) {
|
||||
this.fillCustomAdapters();
|
||||
this.customAdaptersConfigurator.numberOfAdapters = this.qemuTemplate.adapters;
|
||||
this.customAdaptersConfigurator.adapters = [];
|
||||
this.qemuTemplate.custom_adapters.forEach((adapter: CustomAdapter) => {
|
||||
this.customAdaptersConfigurator.adapters.push({
|
||||
adapter_number: adapter.adapter_number,
|
||||
adapter_type: adapter.adapter_type
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
configureCustomAdapters(){
|
||||
this.isConfiguratorOpened = !this.isConfiguratorOpened;
|
||||
this.qemuTemplate.custom_adapters = this.adapters;
|
||||
saveCustomAdapters(adapters: CustomAdapter[]){
|
||||
this.setCustomAdaptersConfiguratorState(false);
|
||||
this.qemuTemplate.custom_adapters = adapters;
|
||||
}
|
||||
|
||||
fillCustomAdapters() {
|
||||
let copyOfAdapters = this.qemuTemplate.custom_adapters ? this.qemuTemplate.custom_adapters : [];
|
||||
this.qemuTemplate.custom_adapters = [];
|
||||
|
||||
for(let i=0; i<this.qemuTemplate.adapters; i++){
|
||||
if (copyOfAdapters[i]) {
|
||||
this.qemuTemplate.custom_adapters.push(copyOfAdapters[i]);
|
||||
} else {
|
||||
this.qemuTemplate.custom_adapters.push({
|
||||
adapter_number: i,
|
||||
adapter_type: 'e1000'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
goBack() {
|
||||
@ -128,6 +145,7 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
|
||||
if (!this.activateCpuThrottling){
|
||||
this.qemuTemplate.cpu_throttling = 0;
|
||||
}
|
||||
this.fillCustomAdapters();
|
||||
|
||||
this.qemuService.saveTemplate(this.server, this.qemuTemplate).subscribe((savedTemplate: QemuTemplate) => {
|
||||
this.toasterService.success("Changes saved");
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
<button mat-button class="configButton" (click)="configureCustomAdapters()">Configure custom adapters</button><br/>
|
||||
<button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">Configure custom adapters</button><br/>
|
||||
<mat-checkbox [(ngModel)]="virtualBoxTemplate.use_any_adapter">
|
||||
Allow GNS3 to use any configured VirtualBox adapter
|
||||
</mat-checkbox>
|
||||
@ -107,44 +107,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" class="configurator" *ngIf="isConfiguratorOpened">
|
||||
<div class="default-header">
|
||||
<div class="row">
|
||||
<h1 class="col">Custom adapters configuration</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="default-content" *ngIf="virtualBoxTemplate">
|
||||
<div class="container mat-elevation-z8">
|
||||
<table class="table" mat-table [dataSource]="adapters">
|
||||
<ng-container matColumnDef="adapter_number">
|
||||
<th mat-header-cell *matHeaderCellDef> Adapter number </th>
|
||||
<td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="port_name">
|
||||
<th mat-header-cell *matHeaderCellDef> Port name </th>
|
||||
<td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="adapter_type">
|
||||
<th mat-header-cell *matHeaderCellDef> Adapter type </th>
|
||||
<td mat-cell *matCellDef="let element; let i = index;">
|
||||
<mat-select placeholder="Type" [(ngModel)]="adapters[i].adapter_type">
|
||||
<mat-option *ngFor="let type of networkTypes" [value]="type">
|
||||
{{type}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="buttons-bar">
|
||||
<button mat-button (click)="cancelConfigureCustomAdapters()">Cancel</button>
|
||||
<button mat-raised-button color="primary" (click)="configureCustomAdapters()">Apply</button><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<app-symbols-menu *ngIf="isSymbolSelectionOpened && virtualBoxTemplate" [server]="server" [symbol]="virtualBoxTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
|
||||
<app-custom-adapters
|
||||
[hidden]="!(isConfiguratorOpened && virtualBoxTemplate)"
|
||||
#customAdaptersConfigurator
|
||||
[networkTypes]="networkTypes"
|
||||
[displayedColumns]="displayedColumns"
|
||||
(closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
|
||||
(saveConfigurationEmitter)="saveCustomAdapters($event)"
|
||||
></app-custom-adapters>
|
||||
<app-symbols-menu
|
||||
*ngIf="isSymbolSelectionOpened && virtualBoxTemplate"
|
||||
[server]="server"
|
||||
[symbol]="virtualBoxTemplate.symbol"
|
||||
(symbolChangedEmitter)="symbolChanged($event)"
|
||||
></app-symbols-menu>
|
||||
|
||||
@ -68,9 +68,58 @@ describe('VirtualBoxTemplateDetailsComponent', () => {
|
||||
|
||||
it('should call save template', () => {
|
||||
spyOn(mockedVirtualBoxService, 'saveTemplate').and.returnValue(of({} as VirtualBoxTemplate));
|
||||
component.generalSettingsForm.controls['templateName'].setValue('template name');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('default name');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('symbol');
|
||||
component.generalSettingsForm.controls['ram'].setValue('256');
|
||||
component.networkForm.controls['adapters'].setValue('1');
|
||||
component.networkForm.controls['nameFormat'].setValue('{}');
|
||||
component.networkForm.controls['size'].setValue('256');
|
||||
component.virtualBoxTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as VirtualBoxTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
expect(mockedVirtualBoxService.saveTemplate).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not call save template when general settings are not filled', () => {
|
||||
spyOn(mockedVirtualBoxService, 'saveTemplate').and.returnValue(of({} as VirtualBoxTemplate));
|
||||
component.generalSettingsForm.controls['templateName'].setValue('');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('default name');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('symbol');
|
||||
component.generalSettingsForm.controls['ram'].setValue('256');
|
||||
component.networkForm.controls['adapters'].setValue('1');
|
||||
component.networkForm.controls['nameFormat'].setValue('{}');
|
||||
component.networkForm.controls['size'].setValue('256');
|
||||
component.virtualBoxTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as VirtualBoxTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
expect(mockedVirtualBoxService.saveTemplate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not call save template when network settings are not filled', () => {
|
||||
spyOn(mockedVirtualBoxService, 'saveTemplate').and.returnValue(of({} as VirtualBoxTemplate));
|
||||
component.generalSettingsForm.controls['templateName'].setValue('template name');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('default name');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('symbol');
|
||||
component.generalSettingsForm.controls['ram'].setValue('256');
|
||||
component.networkForm.controls['adapters'].setValue('');
|
||||
component.networkForm.controls['nameFormat'].setValue('{}');
|
||||
component.networkForm.controls['size'].setValue('256');
|
||||
component.virtualBoxTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as VirtualBoxTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
expect(mockedVirtualBoxService.saveTemplate).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component, OnInit, ViewChild } from "@angular/core";
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ServerService } from '../../../../services/server.service';
|
||||
import { Server } from '../../../../models/server';
|
||||
@ -8,6 +8,7 @@ import { VirtualBoxService } from '../../../../services/virtual-box.service';
|
||||
import { VirtualBoxTemplate } from '../../../../models/templates/virtualbox-template';
|
||||
import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
|
||||
import { VirtualBoxConfigurationService } from '../../../../services/virtual-box-configuration.service';
|
||||
import { CustomAdaptersComponent } from '../../common/custom-adapters/custom-adapters.component';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -18,20 +19,19 @@ import { VirtualBoxConfigurationService } from '../../../../services/virtual-box
|
||||
export class VirtualBoxTemplateDetailsComponent implements OnInit {
|
||||
server: Server;
|
||||
virtualBoxTemplate: VirtualBoxTemplate;
|
||||
|
||||
isSymbolSelectionOpened: boolean = false;
|
||||
|
||||
consoleTypes: string[] = [];
|
||||
onCloseOptions = [];
|
||||
categories = [];
|
||||
networkTypes = [];
|
||||
adapters: CustomAdapter[] = [];
|
||||
displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type'];
|
||||
isConfiguratorOpened: boolean = false;
|
||||
|
||||
generalSettingsForm: FormGroup;
|
||||
networkForm: FormGroup
|
||||
|
||||
@ViewChild("customAdaptersConfigurator")
|
||||
customAdaptersConfigurator: CustomAdaptersComponent;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private serverService: ServerService,
|
||||
@ -64,18 +64,7 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
|
||||
this.getConfiguration();
|
||||
this.virtualBoxService.getTemplate(this.server, template_id).subscribe((virtualBoxTemplate: VirtualBoxTemplate) => {
|
||||
this.virtualBoxTemplate = virtualBoxTemplate;
|
||||
|
||||
for(let i=0; i<this.virtualBoxTemplate.adapters; i++){
|
||||
let adapter = this.virtualBoxTemplate.custom_adapters.find(elem => elem.adapter_number === i);
|
||||
if (adapter) {
|
||||
this.adapters.push(adapter);
|
||||
} else {
|
||||
this.adapters.push({
|
||||
adapter_number: i,
|
||||
adapter_type: this.virtualBoxTemplate.adapter_type
|
||||
});
|
||||
}
|
||||
}
|
||||
this.fillCustomAdapters();
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -87,13 +76,41 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
|
||||
this.networkTypes = this.virtualBoxConfigurationService.getNetworkTypes();
|
||||
}
|
||||
|
||||
configureCustomAdapters(){
|
||||
this.isConfiguratorOpened = !this.isConfiguratorOpened;
|
||||
this.virtualBoxTemplate.custom_adapters = this.adapters;
|
||||
setCustomAdaptersConfiguratorState(state: boolean) {
|
||||
this.isConfiguratorOpened = state;
|
||||
|
||||
if (state) {
|
||||
this.fillCustomAdapters();
|
||||
this.customAdaptersConfigurator.numberOfAdapters = this.virtualBoxTemplate.adapters;
|
||||
this.customAdaptersConfigurator.adapters = [];
|
||||
this.virtualBoxTemplate.custom_adapters.forEach((adapter: CustomAdapter) => {
|
||||
this.customAdaptersConfigurator.adapters.push({
|
||||
adapter_number: adapter.adapter_number,
|
||||
adapter_type: adapter.adapter_type
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
cancelConfigureCustomAdapters(){
|
||||
this.isConfiguratorOpened = !this.isConfiguratorOpened;
|
||||
saveCustomAdapters(adapters: CustomAdapter[]){
|
||||
this.setCustomAdaptersConfiguratorState(false);
|
||||
this.virtualBoxTemplate.custom_adapters = adapters;
|
||||
}
|
||||
|
||||
fillCustomAdapters() {
|
||||
let copyOfAdapters = this.virtualBoxTemplate.custom_adapters ? this.virtualBoxTemplate.custom_adapters : [];
|
||||
this.virtualBoxTemplate.custom_adapters = [];
|
||||
|
||||
for(let i=0; i<this.virtualBoxTemplate.adapters; i++){
|
||||
if (copyOfAdapters[i]) {
|
||||
this.virtualBoxTemplate.custom_adapters.push(copyOfAdapters[i]);
|
||||
} else {
|
||||
this.virtualBoxTemplate.custom_adapters.push({
|
||||
adapter_number: i,
|
||||
adapter_type: 'e1000'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
goBack() {
|
||||
@ -101,9 +118,15 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
|
||||
}
|
||||
|
||||
onSave() {
|
||||
this.virtualBoxService.saveTemplate(this.server, this.virtualBoxTemplate).subscribe((virtualBoxTemplate: VirtualBoxTemplate) => {
|
||||
this.toasterService.success("Changes saved");
|
||||
});
|
||||
if (this.generalSettingsForm.invalid || this.networkForm.invalid) {
|
||||
this.toasterService.error(`Fill all required fields`);
|
||||
} else {
|
||||
this.fillCustomAdapters();
|
||||
|
||||
this.virtualBoxService.saveTemplate(this.server, this.virtualBoxTemplate).subscribe((virtualBoxTemplate: VirtualBoxTemplate) => {
|
||||
this.toasterService.success("Changes saved");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
chooseSymbol() {
|
||||
|
||||
@ -107,7 +107,7 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button mat-button class="configButton" (click)="configureCustomAdapters()">Configure custom adapters</button><br/>
|
||||
<button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">Configure custom adapters</button><br/>
|
||||
<mat-checkbox [(ngModel)]="vmwareTemplate.use_any_adapter">
|
||||
Allow GNS3 to override non custom VMware adapter
|
||||
</mat-checkbox>
|
||||
@ -129,44 +129,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" class="configurator" *ngIf="isConfiguratorOpened">
|
||||
<div class="default-header">
|
||||
<div class="row">
|
||||
<h1 class="col">Custom adapters configuration</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="default-content" *ngIf="vmwareTemplate">
|
||||
<div class="container mat-elevation-z8">
|
||||
<table class="table" mat-table [dataSource]="adapters">
|
||||
<ng-container matColumnDef="adapter_number">
|
||||
<th mat-header-cell *matHeaderCellDef> Adapter number </th>
|
||||
<td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="port_name">
|
||||
<th mat-header-cell *matHeaderCellDef> Port name </th>
|
||||
<td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="adapter_type">
|
||||
<th mat-header-cell *matHeaderCellDef> Adapter type </th>
|
||||
<td mat-cell *matCellDef="let element; let i = index;">
|
||||
<mat-select placeholder="Type" [(ngModel)]="adapters[i].adapter_type">
|
||||
<mat-option *ngFor="let type of networkTypes" [value]="type">
|
||||
{{type}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="buttons-bar">
|
||||
<button mat-button (click)="cancelConfigureCustomAdapters()">Cancel</button>
|
||||
<button mat-raised-button color="primary" (click)="configureCustomAdapters()">Apply</button><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<app-symbols-menu *ngIf="isSymbolSelectionOpened && vmwareTemplate" [server]="server" [symbol]="vmwareTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
|
||||
<app-custom-adapters
|
||||
[hidden]="!(isConfiguratorOpened && vmwareTemplate)"
|
||||
#customAdaptersConfigurator
|
||||
[networkTypes]="networkTypes"
|
||||
[displayedColumns]="displayedColumns"
|
||||
(closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
|
||||
(saveConfigurationEmitter)="saveCustomAdapters($event)"
|
||||
></app-custom-adapters>
|
||||
<app-symbols-menu
|
||||
*ngIf="isSymbolSelectionOpened && vmwareTemplate"
|
||||
[server]="server"
|
||||
[symbol]="vmwareTemplate.symbol"
|
||||
(symbolChangedEmitter)="symbolChanged($event)"
|
||||
></app-symbols-menu>
|
||||
|
||||
@ -71,6 +71,10 @@ describe('VmwareTemplateDetailsComponent', () => {
|
||||
component.generalSettingsForm.controls['templateName'].setValue('template name');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('default name');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('symbol');
|
||||
component.vmwareTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as VmwareTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
@ -82,6 +86,10 @@ describe('VmwareTemplateDetailsComponent', () => {
|
||||
component.generalSettingsForm.controls['templateName'].setValue('');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('default name');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('symbol');
|
||||
component.vmwareTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as VmwareTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
@ -93,6 +101,10 @@ describe('VmwareTemplateDetailsComponent', () => {
|
||||
component.generalSettingsForm.controls['templateName'].setValue('template name');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('symbol');
|
||||
component.vmwareTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as VmwareTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
@ -104,6 +116,10 @@ describe('VmwareTemplateDetailsComponent', () => {
|
||||
component.generalSettingsForm.controls['templateName'].setValue('template name');
|
||||
component.generalSettingsForm.controls['defaultName'].setValue('default name');
|
||||
component.generalSettingsForm.controls['symbol'].setValue('');
|
||||
component.vmwareTemplate = {
|
||||
adapters: 0,
|
||||
custom_adapters: []
|
||||
} as VmwareTemplate;
|
||||
|
||||
component.onSave();
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component, OnInit, ViewChild } from "@angular/core";
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ServerService } from '../../../../services/server.service';
|
||||
import { Server } from '../../../../models/server';
|
||||
@ -8,6 +8,7 @@ import { VmwareTemplate } from '../../../../models/templates/vmware-template';
|
||||
import { VmwareService } from '../../../../services/vmware.service';
|
||||
import { VmwareConfigurationService } from '../../../../services/vmware-configuration.service';
|
||||
import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
|
||||
import { CustomAdaptersComponent } from '../../common/custom-adapters/custom-adapters.component';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -19,17 +20,17 @@ export class VmwareTemplateDetailsComponent implements OnInit {
|
||||
server: Server;
|
||||
vmwareTemplate: VmwareTemplate;
|
||||
generalSettingsForm: FormGroup;
|
||||
|
||||
adapters: CustomAdapter[] = [];
|
||||
displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type'];
|
||||
isConfiguratorOpened: boolean = false;
|
||||
isSymbolSelectionOpened: boolean = false;
|
||||
|
||||
consoleTypes: string[] = [];
|
||||
categories = [];
|
||||
onCloseOptions = [];
|
||||
networkTypes = [];
|
||||
|
||||
@ViewChild("customAdaptersConfigurator")
|
||||
customAdaptersConfigurator: CustomAdaptersComponent;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private serverService: ServerService,
|
||||
@ -55,6 +56,7 @@ export class VmwareTemplateDetailsComponent implements OnInit {
|
||||
this.getConfiguration();
|
||||
this.vmwareService.getTemplate(this.server, template_id).subscribe((vmwareTemplate: VmwareTemplate) => {
|
||||
this.vmwareTemplate = vmwareTemplate;
|
||||
this.fillCustomAdapters();
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -74,37 +76,49 @@ export class VmwareTemplateDetailsComponent implements OnInit {
|
||||
if (this.generalSettingsForm.invalid) {
|
||||
this.toasterService.error(`Fill all required fields`);
|
||||
} else {
|
||||
this.fillCustomAdapters();
|
||||
|
||||
this.vmwareService.saveTemplate(this.server, this.vmwareTemplate).subscribe((vmwareTemplate: VmwareTemplate) => {
|
||||
this.toasterService.success("Changes saved");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
cancelConfigureCustomAdapters(){
|
||||
this.isConfiguratorOpened = !this.isConfiguratorOpened;
|
||||
setCustomAdaptersConfiguratorState(state: boolean) {
|
||||
this.isConfiguratorOpened = state;
|
||||
|
||||
if (state) {
|
||||
this.fillCustomAdapters();
|
||||
this.customAdaptersConfigurator.numberOfAdapters = this.vmwareTemplate.adapters;
|
||||
this.customAdaptersConfigurator.adapters = [];
|
||||
this.vmwareTemplate.custom_adapters.forEach((adapter: CustomAdapter) => {
|
||||
this.customAdaptersConfigurator.adapters.push({
|
||||
adapter_number: adapter.adapter_number,
|
||||
adapter_type: adapter.adapter_type
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
configureCustomAdapters() {
|
||||
this.isConfiguratorOpened = !this.isConfiguratorOpened;
|
||||
this.adapters = [];
|
||||
saveCustomAdapters(adapters: CustomAdapter[]){
|
||||
this.setCustomAdaptersConfiguratorState(false);
|
||||
this.vmwareTemplate.custom_adapters = adapters;
|
||||
}
|
||||
|
||||
let adapters: CustomAdapter[] = [];
|
||||
for (let i=0; i<this.vmwareTemplate.adapters; i++){
|
||||
if (this.vmwareTemplate.custom_adapters[i]) {
|
||||
adapters.push(this.vmwareTemplate.custom_adapters[i]);
|
||||
fillCustomAdapters() {
|
||||
let copyOfAdapters = this.vmwareTemplate.custom_adapters ? this.vmwareTemplate.custom_adapters : [];
|
||||
this.vmwareTemplate.custom_adapters = [];
|
||||
|
||||
for(let i=0; i<this.vmwareTemplate.adapters; i++){
|
||||
if (copyOfAdapters[i]) {
|
||||
this.vmwareTemplate.custom_adapters.push(copyOfAdapters[i]);
|
||||
} else {
|
||||
adapters.push({
|
||||
this.vmwareTemplate.custom_adapters.push({
|
||||
adapter_number: i,
|
||||
adapter_type: 'e1000'
|
||||
});
|
||||
}
|
||||
}
|
||||
this.adapters = adapters;
|
||||
}
|
||||
|
||||
saveCustomAdapters() {
|
||||
this.isConfiguratorOpened = !this.isConfiguratorOpened;
|
||||
this.vmwareTemplate.custom_adapters = this.adapters;
|
||||
}
|
||||
|
||||
chooseSymbol() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user