Adding templates of IOS routers

renderer.js

@@ -1,3 +1,11 @@
 // This file is required by the index.html file and will
 // be executed in the renderer process for that window.
 // All of the Node.js APIs are available in this process.
+
+let shell = require('electron').shell
+document.addEventListener('click', function (event) {
+    if (event.target.tagName === 'A' && event.target.href.startsWith('http')) {
+        event.preventDefault()
+        shell.openExternal(event.target.href)
+    }
+})

src/app/app-routing.module.ts

@@ -34,6 +34,8 @@ import { EthernetSwitchesTemplateDetailsComponent } from './components/preferenc
 import { DynamipsPreferencesComponent } from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component';
 import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
 import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
+import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component';
+import { AddIosTemplateComponent } from './components/preferences/dynamips/add-ios-template/add-ios-template.component';
 
 const routes: Routes = [
   {
@@ -64,8 +66,8 @@ const routes: Routes = [
 
       //{ path: 'server/:server_id/preferences/dynamips', component: DynamipsPreferencesComponent },
       { path: 'server/:server_id/preferences/dynamips/templates', component: IosTemplatesComponent },
-      { path: 'server/:server_id/preferences/dynamips/templates/addtemplate', component: IosTemplatesComponent },
+      { path: 'server/:server_id/preferences/dynamips/templates/addtemplate', component: AddIosTemplateComponent },
-      { path: 'server/:server_id/preferences/dynamips/templates/:template_id', component: IosTemplatesComponent },
+      { path: 'server/:server_id/preferences/dynamips/templates/:template_id', component: IosTemplateDetailsComponent },
 
       // { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
       { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },

src/app/app.module.ts

@@ -130,6 +130,8 @@ import { SymbolsComponent } from './components/preferences/common/symbols/symbol
 import { InstalledSoftwareService } from './services/installed-software.service';
 import { ExternalSoftwareDefinitionService } from './services/external-software-definition.service';
 import { PlatformService } from './services/platform.service';
+import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component';
+import { AddIosTemplateComponent } from './components/preferences/dynamips/add-ios-template/add-ios-template.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -210,6 +212,8 @@ if (environment.production) {
     EthernetSwitchesTemplateDetailsComponent,
     DynamipsPreferencesComponent,
     IosTemplatesComponent,
+    IosTemplateDetailsComponent,
+    AddIosTemplateComponent,
     SymbolsComponent
   ],
   imports: [

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

@@ -0,0 +1,127 @@
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">New IOS router</h1>
+        </div>
+    </div>
+    <div class="default-content" *ngIf="iosTemplate">
+        <div class="container mat-elevation-z8">
+            <mat-vertical-stepper [linear]="true">
+                <mat-step label="IOS image">
+                    <form [formGroup]="iosImageForm">
+                        <mat-form-field class="form-field">
+                            <input 
+                                matInput type="text" 
+                                [(ngModel)]="iosTemplate.image" 
+                                formControlName="imageName"
+                                placeholder="IOS image"/>
+                        </mat-form-field>
+                    </form>
+                </mat-step>
+                <mat-step label="Name and platform">
+                    <form [formGroup]="iosNameForm">
+                        <mat-form-field class="form-field">
+                            <input 
+                                matInput type="text" 
+                                [(ngModel)]="iosTemplate.name" 
+                                formControlName="templateName"
+                                placeholder="Name"/>
+                        </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">
+                        This is an EtherSwitch router
+                    </mat-checkbox>
+                </mat-step>
+                <mat-step label="Memory">
+                    <form [formGroup]="iosMemoryForm">
+                        <mat-form-field class="form-field">
+                            <input 
+                                matInput type="number" 
+                                [(ngModel)]="iosTemplate.ram" 
+                                formControlName="memory"
+                                value="defaultRam[iosTemplate.platform]"
+                                placeholder="Default RAM"/>
+                        </mat-form-field>
+                        <mat-label>
+                            <a href="{{ciscoUrl}}">Check for minimum and maximum RAM requirement</a>
+                        </mat-label>
+                    </form>
+                </mat-step>
+                <mat-step label="Network adapters">
+                    <div *ngIf="iosTemplate.chassis && chassis[iosTemplate.platform]">
+                        <div *ngFor="let index of [0,1,2,3,4,5,6,7]">
+                            <mat-select 
+                                placeholder="Slot {{index}}" 
+                                [(ngModel)]="networkAdaptersForTemplate[index]"
+                                [ngModelOptions]="{standalone: true}"
+                                *ngIf="networkAdapters[iosTemplate.chassis][index]">
+                                <mat-option *ngFor="let option of networkAdapters[iosTemplate.chassis][index]" [value]="option">
+                                    {{option}}
+                                </mat-option>
+                            </mat-select> 
+                        </div>
+                    </div>
+                    <div *ngIf="iosTemplate.platform && !chassis[iosTemplate.platform]">
+                        <div *ngFor="let index of [0,1,2,3,4,5,6,7]">
+                            <mat-select 
+                                placeholder="Slot {{index}}" 
+                                [(ngModel)]="networkAdaptersForTemplate[index]"
+                                [ngModelOptions]="{standalone: true}"
+                                *ngIf="networkAdaptersForPlatform[iosTemplate.platform][index]">
+                                <mat-option *ngFor="let option of networkAdaptersForPlatform[iosTemplate.platform][index]" [value]="option">
+                                    {{option}}
+                                </mat-option>
+                            </mat-select> 
+                        </div>
+                    </div>
+                </mat-step>
+                <mat-step label="WIC modules">
+                    <div *ngIf="iosTemplate.platform && networkModules[iosTemplate.platform]">
+                        <div *ngFor="let index of [0,1,2,3,4,5,6,7]">
+                            <mat-select 
+                                placeholder="WIC {{index}}" 
+                                [(ngModel)]="networkModulesForTemplate[index]"
+                                [ngModelOptions]="{standalone: true}"
+                                *ngIf="networkModules[iosTemplate.platform][index]">
+                                <mat-option *ngFor="let option of networkModules[iosTemplate.platform][index]" [value]="option">
+                                    {{option}}
+                                </mat-option>
+                            </mat-select> 
+                        </div>
+                    </div>
+                </mat-step>
+                <mat-step label="Idle-PC">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="text" 
+                            [(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>
+</div>

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

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

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

@@ -0,0 +1,330 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { Server } from '../../../../models/server';
+import { ToasterService } from '../../../../services/toaster.service';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { IosTemplate } from '../../../../models/templates/ios-template';
+import { IosService } from '../../../../services/ios.service';
+import { v4 as uuid } from 'uuid';
+import { TemplateMocksService } from '../../../../services/template-mocks.service';
+
+
+@Component({
+    selector: 'app-add-ios-template',
+    templateUrl: './add-ios-template.component.html',
+    styleUrls: ['./add-ios-template.component.scss']
+})
+export class AddIosTemplateComponent implements OnInit {
+    server: Server;
+    iosTemplate: IosTemplate;
+    isEtherSwitchRouter: boolean = false;
+
+    iosImageForm: FormGroup;
+    iosNameForm: FormGroup;
+    iosMemoryForm: FormGroup;
+
+    networkAdaptersForTemplate: string[] = [];
+    networkModulesForTemplate: string[] = [];
+
+    platforms: string[] = ["c1700", "c2600", "c2691", "c3725", "c3745", "c3600", "c7200"];
+    platformsWithEtherSwitchRouterOption = {
+        "c1700": false, 
+        "c2600": true, 
+        "c2691": true, 
+        "c3725": true, 
+        "c3745": true, 
+        "c3600": true, 
+        "c7200": false
+    };
+    platformsWithChassis = {
+        "c1700": true, 
+        "c2600": true, 
+        "c2691": false, 
+        "c3725": false, 
+        "c3745": false, 
+        "c3600": true, 
+        "c7200": false
+    };
+    chassis = {
+        "c1700": ["1720", "1721", "1750", "1751", "1760"],
+        "c2600": ["2610", "2611", "2620", "2621", "2610XM", "2611XM", "2620XM", "2621XM", "2650XM", "2651XM"],
+        "c3600": ["3620", "3640", "3660"]
+    };
+    defaultRam = {
+        "c1700": 160,
+        "c2600": 160,
+        "c2691": 192,
+        "c3600": 192,
+        "c3725": 128,
+        "c3745": 256,
+        "c7200": 512
+    };
+    defaultNvram = {
+        "c1700": 128,
+        "c2600": 128,
+        "c2691": 256,
+        "c3600": 256,
+        "c3725": 256,
+        "c3745": 256,
+        "c7200": 512
+    };
+    ciscoUrl: string = "https://cfn.cloudapps.cisco.com/ITDIT/CFN/jsp/SearchBySoftware.jsp";
+    
+    c1700_wics = ["WIC-1T", "WIC-2T", "WIC-1ENET"];
+    c2600_wics = ["WIC-1T", "WIC-2T"];
+    c3700_wics = ["WIC-1T", "WIC-2T"];
+
+    c2600_nms = [
+        "NM-1FE-TX",
+        "NM-1E",
+        "NM-4E",
+        "NM-16ESW"
+    ];
+    c3600_nms = [
+        "NM-1FE-TX",
+        "NM-1E",
+        "NM-4E",
+        "NM-16ESW",
+        "NM-4T"
+    ];
+    c3700_nms = [
+        "NM-1FE-TX",
+        "NM-4T",
+        "NM-16ESW",
+    ];
+    c7200_pas = [
+        "PA-A1",
+        "PA-FE-TX",
+        "PA-2FE-TX",
+        "PA-GE",
+        "PA-4T+",
+        "PA-8T",
+        "PA-4E",
+        "PA-8E",
+        "PA-POS-OC3",
+    ];
+    c7200_io = [
+        "C7200-IO-FE",
+        "C7200-IO-2FE",
+        "C7200-IO-GE-E"
+    ];
+
+    networkAdapters = {
+        "1720": {
+            0: ["C1700-MB-1FE"]
+        },
+        "1721": {
+            0: ["C1700-MB-1FE"]
+        },
+        "1750": {
+            0: ["C1700-MB-1FE"]
+        },
+        "1751": {
+            0: ["C1700-MB-1FE"],
+            1: ["C1700-MB-WIC1"]
+        },
+        "1760": {
+            0: ["C1700-MB-1FE"],
+            1: ["C1700-MB-WIC1"]
+        },
+        "2610": {
+            0: ["C2600-MB-1E"],
+            1: this.c2600_nms
+        }, 
+        "2611": {
+            0: ["C2600-MB-2E"],
+            1: this.c2600_nms
+        }, 
+        "2620": {
+            0: ["C2600-MB-1FE"],
+            1: this.c2600_nms
+        }, 
+        "2621": {
+            0: ["C2600-MB-2FE"],
+            1: this.c2600_nms
+        }, 
+        "2610XM": {
+            0: ["C2600-MB-1FE"],
+            1: this.c2600_nms
+        }, 
+        "2611XM": {
+            0: ["C2600-MB-2FE"],
+            1: this.c2600_nms
+        }, 
+        "2620XM": {
+            0: ["C2600-MB-1FE"],
+            1: this.c2600_nms
+        }, 
+        "2621XM": {
+            0: ["C2600-MB-2FE"],
+            1: this.c2600_nms
+        }, 
+        "2650XM": {
+            0: ["C2600-MB-1FE"],
+            1: this.c2600_nms
+        }, 
+        "2651XM": {
+            0: ["C2600-MB-2FE"],
+            1: this.c2600_nms
+        }, 
+        "3620": {
+            0: this.c3600_nms,
+            1: this.c3600_nms
+        }, 
+        "3640": {
+            0: this.c3600_nms,
+            1: this.c3600_nms,
+            2: this.c3600_nms,
+            3: this.c3600_nms
+        }, 
+        "3660": {
+            0: ["Leopard-2FE"],
+            1: this.c3600_nms,
+            2: this.c3600_nms,
+            3: this.c3600_nms,
+            4: this.c3600_nms,
+            5: this.c3600_nms,
+            6: this.c3600_nms,
+            7: this.c3600_nms
+        }
+    };
+    networkAdaptersForPlatform = {
+        "c2691": {
+            0: ["GT96100-FE"],
+            1: this.c3700_nms
+        },
+        "c3725": {
+            0: ["GT96100-FE"],
+            1:  this.c3700_nms,
+            2:  this.c3700_nms,
+            3:  this.c3700_nms
+        },
+        "c3745": {
+            0: ["GT96100-FE"],
+            1: this.c3700_nms,
+            2: this.c3700_nms,
+            3: this.c3700_nms,
+            4: this.c3700_nms,
+            5: this.c3700_nms
+        },
+        "c7200": {
+            0: this.c7200_io,
+            1: this.c7200_pas,
+            2: this.c7200_pas,
+            3: this.c7200_pas,
+            4: this.c7200_pas,
+            5: this.c7200_pas,
+            6: this.c7200_pas,
+            7: this.c7200_pas
+        }
+    };
+    networkModules = {
+        "c1700": {
+            0: this.c1700_wics,
+            1: this.c1700_wics
+        },
+        "c2600": {
+            0: this.c2600_wics,
+            1: this.c2600_wics,
+            2: this.c2600_wics
+        },
+        "c2691": {
+            0: this.c3700_wics,
+            1: this.c3700_wics,
+            2: this.c3700_wics
+        },
+        "c3725": {
+            0: this.c3700_wics,
+            1: this.c3700_wics,
+            2: this.c3700_wics
+        },
+        "c3745": {
+            0: this.c3700_wics,
+            1: this.c3700_wics,
+            2: this.c3700_wics
+        }
+    };
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private iosService: IosService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder,
+        private router: Router,
+        private templateMocksService: TemplateMocksService
+    ) {
+        this.iosTemplate = new IosTemplate();
+
+        this.iosImageForm = this.formBuilder.group({
+            imageName: new FormControl(null, [Validators.required])
+        });
+
+        this.iosNameForm = this.formBuilder.group({
+            templateName: new FormControl(null, [Validators.required])
+        });
+
+        this.iosMemoryForm = this.formBuilder.group({
+            memory: new FormControl(null, [Validators.required])
+        });
+    }
+
+    ngOnInit(){
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+
+            this.templateMocksService.getIosTemplate().subscribe((iosTemplate: IosTemplate) => {
+                this.iosTemplate = iosTemplate;
+            });
+        });
+    }
+
+    addTemplate() {
+        if (!this.iosImageForm.invalid) {
+            this.iosTemplate.template_id = uuid();
+
+            if (this.isEtherSwitchRouter) {
+                this.iosTemplate.symbol = ":/symbols/multilayer_switch.svg";
+                this.iosTemplate.category = "switch";
+            }
+
+            if (this.networkAdaptersForTemplate.length>0) this.completeAdaptersData();
+            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']);
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields`);
+        }
+    }
+
+    completeAdaptersData() {
+        if (this.networkAdaptersForTemplate[0]) this.iosTemplate.slot0 = this.networkAdaptersForTemplate[0];
+        if (this.networkAdaptersForTemplate[1]) this.iosTemplate.slot1 = this.networkAdaptersForTemplate[1];
+        if (this.networkAdaptersForTemplate[2]) this.iosTemplate.slot2 = this.networkAdaptersForTemplate[2];
+        if (this.networkAdaptersForTemplate[3]) this.iosTemplate.slot3 = this.networkAdaptersForTemplate[3];
+        if (this.networkAdaptersForTemplate[4]) this.iosTemplate.slot4 = this.networkAdaptersForTemplate[4];
+        if (this.networkAdaptersForTemplate[5]) this.iosTemplate.slot5 = this.networkAdaptersForTemplate[5];
+        if (this.networkAdaptersForTemplate[6]) this.iosTemplate.slot6 = this.networkAdaptersForTemplate[6];
+        if (this.networkAdaptersForTemplate[7]) this.iosTemplate.slot7 = this.networkAdaptersForTemplate[7];
+    }
+
+    completeModulesData() {
+        if (this.networkModulesForTemplate[0]) this.iosTemplate.wic0 = this.networkModulesForTemplate[0];
+        if (this.networkModulesForTemplate[1]) this.iosTemplate.wic1 = this.networkModulesForTemplate[1];
+        if (this.networkModulesForTemplate[2]) this.iosTemplate.wic2 = this.networkModulesForTemplate[2];
+    }
+
+    onPlatformChosen() {
+        this.iosTemplate.chassis = '';
+        this.networkAdaptersForTemplate = [];
+        this.networkModulesForTemplate = [];
+    }
+
+    onChassisChosen() {
+        this.networkAdaptersForTemplate = [];
+    }
+}

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

@@ -0,0 +1,141 @@
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Dynamips IOS Router configuration</h1>
+        </div>
+    </div>
+    <div class="default-content" *ngIf="iosTemplate">
+        <mat-accordion>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        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>
+                <mat-form-field class="select">
+                    <mat-select placeholder="Console type" [(ngModel)]="iosTemplate.console_type">
+                        <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                            {{type}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-checkbox [(ngModel)]="iosTemplate.console_auto_start">
+                    Auto start console
+                </mat-checkbox>
+            </mat-expansion-panel>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        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>
+                <mat-checkbox [(ngModel)]="iosTemplate.auto_delete_disks">
+                    Automatically delete NVRAM and disk files
+                </mat-checkbox>
+            </mat-expansion-panel>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Slots
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+            </mat-expansion-panel>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        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>
+                <mat-checkbox [(ngModel)]="iosTemplate.mmap">
+                    Enable mmap support
+                </mat-checkbox><br/><br/>
+                <mat-checkbox [(ngModel)]="iosTemplate.sparsemem">
+                    Enable sparse memory supoport
+                </mat-checkbox>
+            </mat-expansion-panel>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Usage
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <mat-form-field class="row">
+                    <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>
+    </div>
+    <div class="default-content">
+        <app-symbols [server]="server" [symbol]="iosTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+    </div>
+</div>

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

@@ -0,0 +1,22 @@
+.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%;
+}

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

@@ -0,0 +1,63 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { Server } from '../../../../models/server';
+import { ToasterService } from '../../../../services/toaster.service';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { IosTemplate } from '../../../../models/templates/ios-template';
+import { IosService } from '../../../../services/ios.service';
+
+
+@Component({
+    selector: 'app-ios-template-details',
+    templateUrl: './ios-template-details.component.html',
+    styleUrls: ['./ios-template-details.component.scss']
+})
+export class IosTemplateDetailsComponent implements OnInit {
+    server: Server;
+    iosTemplate: IosTemplate;
+
+    isSymbolSelectionOpened: boolean = false;
+
+    consoleTypes: string[] = ['telnet', 'none'];
+    categories = [["Default", "guest"],
+                    ["Routers", "router"],
+                    ["Switches", "switch"],
+                    ["End devices", "end_device"],
+                    ["Security devices", "security_device"]];
+    isConfiguratorOpened: boolean = false;
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private iosService: IosService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder
+    ) {}
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        const template_id = this.route.snapshot.paramMap.get("template_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+
+            this.iosService.getTemplate(this.server, template_id).subscribe((iosTemplate: IosTemplate) => {
+                this.iosTemplate = iosTemplate;
+            });
+        });
+    }
+
+    onSave() {
+        this.iosService.saveTemplate(this.server, this.iosTemplate).subscribe((iosTemplate: IosTemplate) => {
+            this.toasterService.success("Changes saved");
+        });
+    }
+
+    chooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    }
+
+    symbolChanged(chosenSymbol: string) {
+        this.iosTemplate.symbol = chosenSymbol;
+    }
+}

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

@@ -2,7 +2,7 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">IOS routers templates</h1>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/dynamips/addtemplate" mat-raised-button color="primary">Add IOS router template</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>
     <div class="default-content">

src/app/models/templates/ios-template.ts

@@ -1,4 +1,4 @@
-export interface IosTemplate {
+export class IosTemplate {
     auto_delete_disks: boolean;
     builtin: boolean;
     category: string;
@@ -22,7 +22,14 @@ export interface IosTemplate {
     platform: string;
     private_config: string;
     ram: number;
-    slot0: string;
+    slot0?: string;
+    slot1?: string;
+    slot2?: string;
+    slot3?: string;
+    slot4?: string;
+    slot5?: string;
+    slot6?: string;
+    slot7?: string;
     sparsemem: boolean;
     startup_config: string;
     symbol: string;
@@ -30,6 +37,7 @@ export interface IosTemplate {
     template_id: string;
     template_type: string;
     usage: string;
-    wic0: string;
+    wic0?: string;
-    wic1: string;
+    wic1?: string;
+    wic2?: string;
 }

src/app/services/template-mocks.service.ts

@@ -162,7 +162,7 @@ export class TemplateMocksService {
             auto_delete_disks: true,
             builtin: false,
             category: 'router',
-            chassis: '1720',
+            chassis: '',
             compute_id: 'local',
             console_auto_start: false,
             console_type: 'telnet',
@@ -182,16 +182,13 @@ export class TemplateMocksService {
             platform: '',
             private_config: '',
             ram: 128,
-            slot0: '',
             sparsemem: true,
             startup_config: '',
             symbol: ':/symbols/router.svg',
             system_id: 'FTX0945W0MY',
             template_id: '',
             template_type: 'dynamips',
-            usage: '',
+            usage: ''
-            wic0: '',
-            wic1: ''
         }
 
         return of(template);