ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-21 02:01:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixes after review #2

Browse Source
This commit is contained in:
Piotr Pekala 2019-02-18 02:16:50 -08:00
parent 30ede76507
commit aec31c5fbc
27 changed files with 361 additions and 429 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html
View File

@ -124,7 +124,7 @@
</mat-accordion>
<div class="buttons-bar">
<button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
<button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
<button mat-raised-button color="primary" (click)="onSave()">Save</button>
</div>
</div>
</div>

47
src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html
View File

@ -27,27 +27,29 @@
formControlName="templateName"
placeholder="Name"/>
</mat-form-field>
<mat-form-field class="form-field">
<mat-select
placeholder="Platform"
(selectionChange)="onPlatformChosen($event)"
formControlName="platform"
[(ngModel)]="iosTemplate.platform">
<mat-option *ngFor="let platform of platforms" [value]="platform">
{{platform}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field" *ngIf="chassis[iosTemplate.platform]">
<mat-select
placeholder="Chassis"
(selectionChange)="onChassisChosen($event)"
formControlName="chassis"
[(ngModel)]="iosTemplate.chassis">
<mat-option *ngFor="let chassis of chassis[iosTemplate.platform]" [value]="chassis">
{{chassis}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
<mat-form-field class="form-field">
<mat-select
placeholder="Platform"
(selectionChange)="onPlatformChosen($event)"
[(ngModel)]="iosTemplate.platform">
<mat-option *ngFor="let platform of platforms" [value]="platform">
{{platform}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field" *ngIf="chassis[iosTemplate.platform]">
<mat-select
placeholder="Chassis"
(selectionChange)="onChassisChosen($event)"
[(ngModel)]="iosTemplate.chassis">
<mat-option *ngFor="let chassis of chassis[iosTemplate.platform]" [value]="chassis">
{{chassis}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox
*ngIf="platformsWithEtherSwitchRouterOption[iosTemplate.platform]"
[(ngModel)]="isEtherSwitchRouter">
@ -119,9 +121,12 @@
[(ngModel)]="iosTemplate.idlepc"
placeholder="Idle-PC"/>
</mat-form-field>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Add template</button></div>
</mat-step>
</mat-vertical-stepper>
</div>
<div class="buttons-bar">
<button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
<button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
</div>
</div>
</div>

3
src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.scss
View File

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

12
src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
View File

@ -14,7 +14,7 @@ import { IosConfigurationService } from '../../../../services/ios-configuration.
@Component({
selector: 'app-add-ios-template',
templateUrl: './add-ios-template.component.html',
styleUrls: ['./add-ios-template.component.scss']
styleUrls: ['./add-ios-template.component.scss', '../../preferences.component.scss']
})
export class AddIosTemplateComponent implements OnInit {
server: Server;
@ -57,7 +57,9 @@ export class AddIosTemplateComponent implements OnInit {
});
this.iosNameForm = this.formBuilder.group({
templateName: new FormControl(null, [Validators.required])
templateName: new FormControl(null, [Validators.required]),
platform: new FormControl(null, [Validators.required]),
chassis: new FormControl(null, [Validators.required])
});
this.iosMemoryForm = this.formBuilder.group({
@ -98,7 +100,7 @@ export class AddIosTemplateComponent implements OnInit {
if (this.networkModulesForTemplate.length>0) this.completeModulesData();
this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => {
this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
this.goBack();
});
} else {
this.toasterService.error(`Fill all required fields`);
@ -142,6 +144,10 @@ export class AddIosTemplateComponent implements OnInit {
if (this.networkModulesForTemplate[2]) this.iosTemplate.wic2 = this.networkModulesForTemplate[2];
}
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
}
onPlatformChosen() {
this.iosTemplate.chassis = '';
this.networkAdaptersForTemplate = [];

23
src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.html
View File

@ -5,15 +5,20 @@
</div>
</div>
<div class="default-content">
<div class="container mat-elevation-z8">
<mat-form-field class="form-field">
<input
matInput type="text"
[(ngModel)]="templateName"
placeholder="Name"
ngDefaultControl/>
</mat-form-field><br/>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button></div>
<mat-card class="matCard">
<form [formGroup]="formGroup">
<mat-form-field class="form-field">
<input
matInput type="text"
[(ngModel)]="templateName"
placeholder="Name"
formControlName="templateName"/>
</mat-form-field>
</form>
</mat-card>
<div class="buttons-bar">
<button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
<button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button>
</div>
</div>
</div>

30
src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.scss
View File

@ -1,30 +0,0 @@
.form-field {
width: 100%;
}
.radio-button {
width: 50%;
padding-top: 20px;
padding-bottom: 30px;
}
.radio-group {
margin-bottom: 20px;
}
.buttons-bar {
padding-top: 20px;
}
.nonvisible {
display: none;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-left: 2%;
width: 80%;
}

21
src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.ts
View File

@ -6,25 +6,32 @@ import { ToasterService } from '../../../../services/toaster.service';
import { v4 as uuid } from 'uuid';
import { IosTemplate } from '../../../../models/templates/ios-template';
import { IosService } from '../../../../services/ios.service';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-copy-ios-template',
templateUrl: './copy-ios-template.component.html',
styleUrls: ['./copy-ios-template.component.scss']
styleUrls: ['./copy-ios-template.component.scss', '../../preferences.component.scss']
})
export class CopyIosTemplateComponent implements OnInit {
server: Server;
templateName: string = '';
iosTemplate: IosTemplate;
formGroup: FormGroup;
constructor(
private route: ActivatedRoute,
private serverService: ServerService,
private iosService: IosService,
private toasterService: ToasterService,
private router: Router
) {}
private router: Router,
private formBuilder: FormBuilder
) {
this.formGroup = this.formBuilder.group({
templateName: new FormControl('', Validators.required)
});
}
ngOnInit() {
const server_id = this.route.snapshot.paramMap.get("server_id");
@ -40,13 +47,17 @@ export class CopyIosTemplateComponent implements OnInit {
});
}
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
}
addTemplate() {
if (this.templateName) {
if (!this.formGroup.invalid) {
this.iosTemplate.template_id = uuid();
this.iosTemplate.name = this.templateName;
this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => {
this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
this.goBack();
});
} else {
this.toasterService.error(`Fill all required fields`);

145
src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html
View File

@ -12,34 +12,36 @@
General settings
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iosTemplate.name" placeholder="Template name">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iosTemplate.default_name_format" placeholder="Default name format">
</mat-form-field>
<mat-label>Platform - {{iosTemplate.platform}}</mat-label><br/><br/>
<mat-label>Chassis - {{iosTemplate.chassis}}</mat-label><br/><br/>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iosTemplate.symbol" placeholder="Symbol">
</mat-form-field>
<button mat-raised-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
<mat-form-field class="row">
<mat-select placeholder="Category" [(ngModel)]="iosTemplate.category">
<mat-option *ngFor="let category of categories" [value]="category[1]">
{{category[0]}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iosTemplate.image" placeholder="IOS image path">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iosTemplate.startup_config" placeholder="Initial startup-config">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iosTemplate.private_config" placeholder="Initial private-config">
</mat-form-field>
<form [formGroup]="generalSettingsForm">
<mat-form-field class="form-field">
<input matInput type="text" formControlName="templateName" [(ngModel)]="iosTemplate.name" placeholder="Template name">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput type="text" formControlName="defaultName" [(ngModel)]="iosTemplate.default_name_format" placeholder="Default name format">
</mat-form-field>
<mat-label>Platform - {{iosTemplate.platform}}</mat-label><br/><br/>
<mat-label>Chassis - {{iosTemplate.chassis}}</mat-label><br/><br/>
<mat-form-field class="form-field">
<input matInput type="text" formControlName="symbol" [(ngModel)]="iosTemplate.symbol" placeholder="Symbol">
</mat-form-field>
<button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
<mat-form-field class="form-field">
<mat-select [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="iosTemplate.category">
<mat-option *ngFor="let category of categories" [value]="category[1]">
{{category[0]}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<input matInput type="text" formControlName="path" [(ngModel)]="iosTemplate.image" placeholder="IOS image path">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput type="text" formControlName="initialConfig" [(ngModel)]="iosTemplate.startup_config" placeholder="Initial startup-config">
</mat-form-field>
<mat-form-field class="form-field">
<input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="iosTemplate.private_config" placeholder="Initial private-config">
</mat-form-field>
</form>
<mat-form-field class="select">
<mat-select placeholder="Console type" [(ngModel)]="iosTemplate.console_type">
<mat-option *ngFor="let type of consoleTypes" [value]="type">
@ -57,21 +59,23 @@
Memories and disks
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field class="row">
<input matInput type="number" [(ngModel)]="iosTemplate.ram" placeholder="RAM size">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="number" [(ngModel)]="iosTemplate.nvram" placeholder="NVRAM size">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="number" [(ngModel)]="iosTemplate.iomem" placeholder="I/O memory">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="number" [(ngModel)]="iosTemplate.disk0" placeholder="PCMCIA disk0">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="number" [(ngModel)]="iosTemplate.disk1" placeholder="PCMCIA disk1">
</mat-form-field>
<form [formGroup]="memoryForm">
<mat-form-field class="form-field">
<input matInput type="number" formControlName="ram" [(ngModel)]="iosTemplate.ram" placeholder="RAM size">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput type="number" formControlName="nvram" [(ngModel)]="iosTemplate.nvram" placeholder="NVRAM size">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput type="number" formControlName="iomemory" [(ngModel)]="iosTemplate.iomem" placeholder="I/O memory">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput type="number" formControlName="disk0" [(ngModel)]="iosTemplate.disk0" placeholder="PCMCIA disk0">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput type="number" formControlName="disk1" [(ngModel)]="iosTemplate.disk1" placeholder="PCMCIA disk1">
</mat-form-field>
</form>
<mat-checkbox [(ngModel)]="iosTemplate.auto_delete_disks">
Automatically delete NVRAM and disk files
</mat-checkbox>
@ -147,24 +151,26 @@
Advanced
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iosTemplate.system_id" placeholder="System ID">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iosTemplate.mac_addr" placeholder="Base MAC">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iosTemplate.idlepc" placeholder="Idle-PC">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="number" [(ngModel)]="iosTemplate.idlemax" placeholder="Idlemax">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="number" [(ngModel)]="iosTemplate.idlesleep" placeholder="Idlesleep">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="number" [(ngModel)]="iosTemplate.exec_area" placeholder="Exec area">
</mat-form-field>
<form [formGroup]="advancedForm">
<mat-form-field class="form-field">
<input matInput formControlName="systemId" type="text" [(ngModel)]="iosTemplate.system_id" placeholder="System ID">
</mat-form-field>
<mat-form-field class="form-field">
<input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="iosTemplate.mac_addr" placeholder="Base MAC">
</mat-form-field>
<mat-form-field class="form-field">
<input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="iosTemplate.idlepc" placeholder="Idle-PC">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="idlemax" type="number" [(ngModel)]="iosTemplate.idlemax" placeholder="Idlemax">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="idlesleep" type="number" [(ngModel)]="iosTemplate.idlesleep" placeholder="Idlesleep">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="execarea" type="number" [(ngModel)]="iosTemplate.exec_area" placeholder="Exec area">
</mat-form-field>
</form>
<mat-checkbox [(ngModel)]="iosTemplate.mmap">
Enable mmap support
</mat-checkbox><br/><br/>
@ -178,22 +184,15 @@
Usage
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field class="row">
<mat-form-field class="form-field">
<textarea matInput type="text" [(ngModel)]="iosTemplate.usage"></textarea>
</mat-form-field>
</mat-expansion-panel>
</mat-accordion>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="onSave()">Save</button></div>
</div>
</div>
<div class="content" class="configurator" *ngIf="isSymbolSelectionOpened">
<div class="default-header">
<div class="row">
<h1 class="col">Symbol selection</h1>
<button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
<div class="buttons-bar">
<button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
<button mat-raised-button color="primary" (click)="onSave()">Save</button>
</div>
</div>
<div class="default-content">
<app-symbols [server]="server" [symbol]="iosTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
</div>
</div>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && iosTemplate" [server]="server" [symbol]="iosTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>

22
src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.scss
View File

@ -1,22 +0,0 @@
.row {
width: 100%;
margin-left: 0px;
}
.select {
width: 100%;
}
.top-button {
height: 36px;
margin-top: 22px
}
.shadowed {
display: none;
transition: 0.25s;
}
.symbolSelectionButton {
width: 100%;
}

55
src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { ServerService } from '../../../../services/server.service';
import { Server } from '../../../../models/server';
import { ToasterService } from '../../../../services/toaster.service';
@ -12,7 +12,7 @@ import { IosConfigurationService } from '../../../../services/ios-configuration.
@Component({
selector: 'app-ios-template-details',
templateUrl: './ios-template-details.component.html',
styleUrls: ['./ios-template-details.component.scss']
styleUrls: ['./ios-template-details.component.scss', '../../preferences.component.scss']
})
export class IosTemplateDetailsComponent implements OnInit {
server: Server;
@ -22,6 +22,7 @@ export class IosTemplateDetailsComponent implements OnInit {
networkAdaptersForTemplate: string[] = [];
platforms: string[] = [];
consoleTypes: string[] = [];
platformsWithEtherSwitchRouterOption = {};
platformsWithChassis = {};
chassis = {};
@ -31,14 +32,42 @@ export class IosTemplateDetailsComponent implements OnInit {
networkAdaptersForPlatform = {};
networkModules = {};
generalSettingsForm: FormGroup;
memoryForm: FormGroup;
advancedForm: FormGroup;
constructor(
private route: ActivatedRoute,
private serverService: ServerService,
private iosService: IosService,
private toasterService: ToasterService,
private formBuilder: FormBuilder,
private iosConfigurationService: IosConfigurationService
) {}
private iosConfigurationService: IosConfigurationService,
private router: Router
) {
this.generalSettingsForm = this.formBuilder.group({
templateName: new FormControl('', Validators.required),
defaultName: new FormControl('', Validators.required),
symbol: new FormControl('', Validators.required),
path: new FormControl('', Validators.required),
initialConfig: new FormControl('', Validators.required)
});
this.memoryForm = this.formBuilder.group({
ram: new FormControl('', Validators.required),
nvram: new FormControl('', Validators.required),
iomemory: new FormControl('', Validators.required),
disk0: new FormControl('', Validators.required),
disk1: new FormControl('', Validators.required),
});
this.advancedForm = this.formBuilder.group({
systemId: new FormControl('', Validators.required),
idlemax: new FormControl('', Validators.required),
idlesleep: new FormControl('', Validators.required),
execarea: new FormControl('', Validators.required),
});
}
ngOnInit() {
const server_id = this.route.snapshot.paramMap.get("server_id");
@ -64,6 +93,7 @@ export class IosTemplateDetailsComponent implements OnInit {
this.platformsWithChassis = this.iosConfigurationService.getPlatformsWithChassis();
this.chassis = this.iosConfigurationService.getChassis();
this.defaultRam = this.iosConfigurationService.getDefaultRamSettings();
this.consoleTypes = this.iosConfigurationService.getConsoleTypes();
}
fillAdaptersData() {
@ -89,11 +119,19 @@ export class IosTemplateDetailsComponent implements OnInit {
}
onSave() {
this.completeAdaptersData();
if (this.generalSettingsForm.invalid || this.memoryForm.invalid || this.advancedForm.invalid) {
this.toasterService.error(`Fill all required fields`);
} else {
this.completeAdaptersData();
this.iosService.saveTemplate(this.server, this.iosTemplate).subscribe((iosTemplate: IosTemplate) => {
this.toasterService.success("Changes saved");
});
this.iosService.saveTemplate(this.server, this.iosTemplate).subscribe((iosTemplate: IosTemplate) => {
this.toasterService.success("Changes saved");
});
}
}
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
}
chooseSymbol() {
@ -101,6 +139,7 @@ export class IosTemplateDetailsComponent implements OnInit {
}
symbolChanged(chosenSymbol: string) {
this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
this.iosTemplate.symbol = chosenSymbol;
}
}

7
src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html
View File

@ -2,6 +2,7 @@
<div class="default-header">
<div class="row">
<h1 class="col">IOS routers templates</h1>
<button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
<button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/dynamips/templates/addtemplate" mat-raised-button color="primary">Add IOS router template</button>
</div>
</div>
@ -9,8 +10,8 @@
<div class="default-content" *ngIf="iosTemplates.length">
<div class="container mat-elevation-z8">
<mat-nav-list *ngIf="server">
<mat-list-item *ngFor='let template of iosTemplates'>
<span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
<div class="list-item" *ngFor='let template of iosTemplates'>
<mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
<button mat-icon-button class="menu-button" [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
@ -22,7 +23,7 @@
<mat-icon>content_copy</mat-icon><span>Copy</span>
</button>
</mat-menu>
</mat-list-item>
</div>
</mat-nav-list>
</div>
</div>

12
src/app/components/preferences/dynamips/ios-templates/ios-templates.component.scss
View File

@ -1,12 +0,0 @@
.top-button {
height: 36px;
margin-top: 22px
}
.name {
width: 95%;
}
.menu-button {
width: 5%;
}

5
src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts
View File

@ -1,8 +1,7 @@
import { Component, OnInit, ViewChild } from "@angular/core";
import { Server } from '../../../../models/server';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { ServerService } from '../../../../services/server.service';
import { switchMap } from 'rxjs/operators';
import { IosService } from '../../../../services/ios.service';
import { IosTemplate } from '../../../../models/templates/ios-template';
import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
@ -12,7 +11,7 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
@Component({
selector: 'app-ios-templates',
templateUrl: './ios-templates.component.html',
styleUrls: ['./ios-templates.component.scss']
styleUrls: ['./ios-templates.component.scss', '../../preferences.component.scss']
})
export class IosTemplatesComponent implements OnInit {
server: Server;

7
src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html
View File

@ -9,7 +9,7 @@
<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>
<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-group>
</mat-step>
@ -65,9 +65,12 @@
</mat-form-field>
</div>
</form>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Add template</button></div>
</mat-step>
</mat-vertical-stepper>
</div>
<div class="buttons-bar">
<button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
<button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
</div>
</div>
</div>

30
src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.scss
View File

@ -1,30 +0,0 @@
.form-field {
width: 100%;
}
.radio-button {
width: 50%;
padding-top: 20px;
padding-bottom: 30px;
}
.radio-group {
margin-bottom: 20px;
}
.buttons-bar {
padding-top: 20px;
}
.nonvisible {
display: none;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-left: 2%;
width: 80%;
}

10
src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
View File

@ -13,7 +13,7 @@ import { IouService } from '../../../../services/iou.service';
@Component({
selector: 'app-add-iou-template',
templateUrl: './add-iou-template.component.html',
styleUrls: ['./add-iou-template.component.scss']
styleUrls: ['./add-iou-template.component.scss', '../../preferences.component.scss']
})
export class AddIouTemplateComponent implements OnInit {
server: Server;
@ -75,12 +75,16 @@ export class AddIouTemplateComponent implements OnInit {
this.iouTemplate.path = event.target.files[0].name;
}
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
}
addTemplate() {
if (!this.templateNameForm.invalid && !this.imageForm.invalid) {
if (!this.templateNameForm.invalid && ((this.newImageSelected && !this.imageForm.invalid) || (!this.newImageSelected && this.iouTemplate.path))) {
this.iouTemplate.template_id = uuid();
this.iouService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
this.goBack();
});
} else {
this.toasterService.error(`Fill all required fields`);

23
src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.html
View File

@ -5,15 +5,20 @@
</div>
</div>
<div class="default-content">
<div class="container mat-elevation-z8">
<mat-form-field class="form-field">
<input
matInput type="text"
[(ngModel)]="templateName"
placeholder="Name"
ngDefaultControl/>
</mat-form-field><br/>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button></div>
<mat-card class="matCard">
<form [formGroup]="templateNameForm">
<mat-form-field class="form-field">
<input
matInput type="text"
[(ngModel)]="templateName"
placeholder="Name"
formControlName="templateName"/>
</mat-form-field>
</form>
</mat-card>
<div class="buttons-bar">
<button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
<button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button>
</div>
</div>
</div>

30
src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.scss
View File

@ -1,30 +0,0 @@
.form-field {
width: 100%;
}
.radio-button {
width: 50%;
padding-top: 20px;
padding-bottom: 30px;
}
.radio-group {
margin-bottom: 20px;
}
.buttons-bar {
padding-top: 20px;
}
.nonvisible {
display: none;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-left: 2%;
width: 80%;
}

23
src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.ts
View File

@ -1,30 +1,37 @@
import { Component, OnInit } from "@angular/core";
import { Server } from '../../../../models/server';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { ServerService } from '../../../../services/server.service';
import { ToasterService } from '../../../../services/toaster.service';
import { v4 as uuid } from 'uuid';
import { IouTemplate } from '../../../../models/templates/iou-template';
import { IouService } from '../../../../services/iou.service';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-copy-iou-template',
templateUrl: './copy-iou-template.component.html',
styleUrls: ['./copy-iou-template.component.scss']
styleUrls: ['./copy-iou-template.component.scss', '../../preferences.component.scss']
})
export class CopyIouTemplateComponent implements OnInit {
server: Server;
templateName: string = '';
iouTemplate: IouTemplate;
templateNameForm: FormGroup;
constructor(
private route: ActivatedRoute,
private serverService: ServerService,
private qemuService: IouService,
private toasterService: ToasterService,
private router: Router
) {}
private router: Router,
private formBuilder: FormBuilder
) {
this.templateNameForm = this.formBuilder.group({
templateName: new FormControl('', Validators.required)
});
}
ngOnInit() {
const server_id = this.route.snapshot.paramMap.get("server_id");
@ -40,13 +47,17 @@ export class CopyIouTemplateComponent implements OnInit {
});
}
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
}
addTemplate() {
if (this.templateName) {
if (!this.templateNameForm.invalid) {
this.iouTemplate.template_id = uuid();
this.iouTemplate.name = this.templateName;
this.qemuService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
this.goBack();
});
} else {
this.toasterService.error(`Fill all required fields`);

112
src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html
View File

@ -1,6 +1,6 @@
<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
<div class="default-header">
<div class="row">
<div class="form-field">
<h1 class="col">IOU device configuration</h1>
</div>
</div>
@ -12,44 +12,47 @@
General settings
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iouTemplate.name" placeholder="Template name">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iouTemplate.default_name_format" placeholder="Default name format">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iouTemplate.symbol" placeholder="Symbol">
<form [formGroup]="generalSettingsForm">
<mat-form-field class="form-field">
<input matInput formControlName="templateName" type="text" [(ngModel)]="iouTemplate.name" placeholder="Template name">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="defaultName" type="text" [(ngModel)]="iouTemplate.default_name_format" placeholder="Default name format">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="symbol" type="text" [(ngModel)]="iouTemplate.symbol" placeholder="Symbol">
</mat-form-field>
<button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
<mat-form-field class="form-field">
<mat-select [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="iouTemplate.category">
<mat-option *ngFor="let category of categories" [value]="category[1]">
{{category[0]}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
<mat-form-field class="row">
<mat-select placeholder="Category" [(ngModel)]="iouTemplate.category">
<mat-option *ngFor="let category of categories" [value]="category[1]">
{{category[0]}}
</mat-option>
</mat-select>
</mat-form-field>
<input
type="file"
accept=".bin"
#file
class="nonvisible"
(change)="uploadImageFile($event)"
ngDefaultControl/>
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
<mat-form-field class="file-name-form-field">
<input
matInput
type="text"
[(ngModel)]="iouTemplate.path"
placeholder="IOU image path"/>
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iouTemplate.startup_config" placeholder="Startup config">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="iouTemplate.private_config" placeholder="Private config">
</mat-form-field>
type="file"
accept=".bin"
#file
class="nonvisible"
(change)="uploadImageFile($event)"
ngDefaultControl/>
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
<mat-form-field class="file-name-form-field">
<input
matInput
formControlName="path"
type="text"
[(ngModel)]="iouTemplate.path"
placeholder="IOU image path"/>
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="initialConfig" type="text" [(ngModel)]="iouTemplate.startup_config" placeholder="Startup config">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="iouTemplate.private_config" placeholder="Private config">
</mat-form-field>
</form>
<mat-form-field class="select">
<mat-select placeholder="Console type" [(ngModel)]="iouTemplate.console_type">
<mat-option *ngFor="let type of consoleTypes" [value]="type">
@ -66,10 +69,10 @@
<mat-checkbox [(ngModel)]="defaultSettings">
Use default IOU values for memories
</mat-checkbox>
<mat-form-field class="row" *ngIf="!defaultSettings">
<mat-form-field class="form-field" *ngIf="!defaultSettings">
<input matInput type="number" [(ngModel)]="iouTemplate.ram" placeholder="RAM size">
</mat-form-field>
<mat-form-field class="row" *ngIf="!defaultSettings">
<mat-form-field class="form-field" *ngIf="!defaultSettings">
<input matInput type="number" [(ngModel)]="iouTemplate.nvram" placeholder="NVRAM size">
</mat-form-field>
</mat-expansion-panel>
@ -79,12 +82,14 @@
Network
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field class="row">
<input matInput type="number" [(ngModel)]="iouTemplate.ethernet_adapters" placeholder="Ethernet adapters">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="number" [(ngModel)]="iouTemplate.serial_adapters" placeholder="Serial adapters">
</mat-form-field>
<form [formGroup]="networkForm">
<mat-form-field class="form-field">
<input matInput formControlName="ethernetAdapters" type="number" [(ngModel)]="iouTemplate.ethernet_adapters" placeholder="Ethernet adapters">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="serialAdapters" type="number" [(ngModel)]="iouTemplate.serial_adapters" placeholder="Serial adapters">
</mat-form-field>
</form>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
@ -92,22 +97,15 @@
Usage
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field class="row">
<mat-form-field class="form-field">
<textarea matInput type="text" [(ngModel)]="iouTemplate.usage"></textarea>
</mat-form-field>
</mat-expansion-panel>
</mat-accordion>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="onSave()">Save</button></div>
</div>
</div>
<div class="content" class="configurator" *ngIf="isSymbolSelectionOpened">
<div class="default-header">
<div class="row">
<h1 class="col">Symbol selection</h1>
<button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
<div class="buttons-bar">
<button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
<button mat-raised-button color="primary" (click)="onSave()">Save</button>
</div>
</div>
<div class="default-content">
<app-symbols [server]="server" [symbol]="iouTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
</div>
</div>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && iouTemplate" [server]="server" [symbol]="iouTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>

72
src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.scss
View File

@ -1,72 +0,0 @@
.row {
width: 100%;
margin-left: 0px;
}
.select {
width: 100%;
}
.nonvisible {
display: none;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-right: 2%;
width: 80%;
}
.configButton {
width: 100%;
margin-bottom: 10px;
}
.configHideButton {
margin-left: 80%;
width: 20%;
margin-bottom: 10px;
}
.shadowed {
display: none;
transition: 0.25s;
}
.top-button {
height: 36px;
margin-top: 22px
}
.symbolSelectionButton {
width: 100%;
}
.nonshadowed {
opacity: 0;
transition: 0.25s;
}
th {
border: 0px!important;
}
th.mat-header-cell {
padding-bottom: 15px;
}
td.mat-cell {
padding-top: 15px;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-left: 2%;
width: 80%;
}

43
src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.ts
View File

@ -1,18 +1,18 @@
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, ParamMap } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { ServerService } from '../../../../services/server.service';
import { Server } from '../../../../models/server';
import { ToasterService } from '../../../../services/toaster.service';
import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
import { IouTemplate } from '../../../../models/templates/iou-template';
import { IouService } from '../../../../services/iou.service';
import { IouConfigurationService } from '../../../../services/iou-configuration.service';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-iou-template-details',
templateUrl: './iou-template-details.component.html',
styleUrls: ['./iou-template-details.component.scss']
styleUrls: ['./iou-template-details.component.scss', '../../preferences.component.scss']
})
export class IouTemplateDetailsComponent implements OnInit {
server: Server;
@ -25,13 +25,31 @@ export class IouTemplateDetailsComponent implements OnInit {
consoleResolutions: string[] = [];
categories = [];
generalSettingsForm: FormGroup;
networkForm: FormGroup;
constructor(
private route: ActivatedRoute,
private serverService: ServerService,
private iouService: IouService,
private toasterService: ToasterService,
private configurationService: IouConfigurationService
){}
private configurationService: IouConfigurationService,
private router: Router,
private formBuilder: FormBuilder
){
this.generalSettingsForm = this.formBuilder.group({
templateName: new FormControl('', Validators.required),
defaultName: new FormControl('', Validators.required),
symbol: new FormControl('', Validators.required),
path: new FormControl('', Validators.required),
initialConfig: new FormControl('', Validators.required)
});
this.networkForm = this.formBuilder.group({
ethernetAdapters: new FormControl('', Validators.required),
serialAdapters: new FormControl('', Validators.required)
});
}
ngOnInit(){
const server_id = this.route.snapshot.paramMap.get("server_id");
@ -51,10 +69,18 @@ export class IouTemplateDetailsComponent implements OnInit {
this.categories = this.configurationService.getCategories();
}
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
}
onSave(){
this.iouService.saveTemplate(this.server, this.iouTemplate).subscribe((savedTemplate: IouTemplate) => {
this.toasterService.success("Changes saved");
});
if (this.generalSettingsForm.invalid || this.networkForm.invalid) {
this.toasterService.error(`Fill all required fields`);
} else {
this.iouService.saveTemplate(this.server, this.iouTemplate).subscribe(() => {
this.toasterService.success("Changes saved");
});
}
}
uploadImageFile(event) {
@ -66,6 +92,7 @@ export class IouTemplateDetailsComponent implements OnInit {
}
symbolChanged(chosenSymbol: string) {
this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
this.iouTemplate.symbol = chosenSymbol;
}
}

7
src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html
View File

@ -2,6 +2,7 @@
<div class="default-header">
<div class="row">
<h1 class="col">IOU devices templates</h1>
<button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
<button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/iou/addtemplate" mat-raised-button color="primary">Add IOU device template</button>
</div>
</div>
@ -9,8 +10,8 @@
<div class="default-content" *ngIf="iouTemplates.length">
<div class="container mat-elevation-z8">
<mat-nav-list *ngIf="server">
<mat-list-item *ngFor='let template of iouTemplates'>
<span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
<div class="list-item" *ngFor='let template of iouTemplates'>
<mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
<button mat-icon-button class="menu-button" [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
@ -22,7 +23,7 @@
<mat-icon>content_copy</mat-icon><span>Copy</span>
</button>
</mat-menu>
</mat-list-item>
</div>
</mat-nav-list>
</div>
</div>

12
src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.scss
View File

@ -1,12 +0,0 @@
.top-button {
height: 36px;
margin-top: 22px
}
.name {
width: 95%;
}
.menu-button {
width: 5%;
}

7
src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.ts
View File

@ -1,17 +1,16 @@
import { Component, OnInit, ViewChild } from "@angular/core";
import { Server } from '../../../../models/server';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { ServerService } from '../../../../services/server.service';
import { switchMap } from 'rxjs/operators';
import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
import { IouTemplate } from '../../../../models/templates/iou-template';
import { IouService } from '../../../../services/iou.service';
@Component({
selector: 'app-iou-templates',
templateUrl: './iou-templates.component.html',
styleUrls: ['./iou-templates.component.scss']
styleUrls: ['./iou-templates.component.scss', '../../preferences.component.scss']
})
export class IouTemplatesComponent implements OnInit {
server: Server;

26
src/app/components/preferences/preferences.component.scss
View File

@ -27,6 +27,10 @@
transition: 0.25s;
}
.nonvisible {
display: none;
}
.symbolSelectionButton {
width: 100%;
}
@ -44,6 +48,10 @@
outline: none;
}
.menu-button {
width: 10%;
}
th {
border: 0px!important;
}
@ -55,3 +63,21 @@ th.mat-header-cell {
td.mat-cell {
padding-top: 15px;
}
.radio-button {
width: 50%;
padding-top: 20px;
}
.radio-group {
margin-bottom: 20px;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-left: 2%;
width: 80%;
}

4
src/app/services/ios-configuration.service.ts
View File

@ -41,6 +41,10 @@ export class IosConfigurationService {
"C7200-IO-GE-E"
];
getConsoleTypes() {
return ['telnet', 'none'];
}
getDefaultRamSettings() {
return {
"c1700": 160,