Support for adding IOS images

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

@@ -8,12 +8,24 @@
         <div class="container mat-elevation-z8">
             <mat-vertical-stepper [linear]="true">
                 <mat-step label="IOS image">
+                    <input
+                        type="file"
+                        accept=".bin, .image"
+                        class="non-visible"
+                        #file
+                        (change)="addImage($event)"
+                        ng2FileSelect
+                        [uploader]="uploader"/>
+                    <button mat-raised-button color="primary" (click)="file.click()">Click to add image</button> or create from existing one
                     <form [formGroup]="iosImageForm">
                         <mat-form-field class="form-field">
-                            <input 
-                                matInput type="text" 
-                                formControlName="imageName"
-                                placeholder="IOS image"/>
+                            <mat-select 
+                                placeholder="Image" 
+                                formControlName="imageName">
+                                <mat-option *ngFor="let image of iosImages" [value]="image.filename">
+                                    {{image.filename}}
+                                </mat-option>
+                            </mat-select>
                         </mat-form-field>
                     </form>
                 </mat-step>

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

@@ -0,0 +1,3 @@
+.non-visible {
+    display: none;
+}

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

@@ -9,7 +9,9 @@ import { IosService } from '../../../../services/ios.service';
 import { v4 as uuid } from 'uuid';
 import { TemplateMocksService } from '../../../../services/template-mocks.service';
 import { IosConfigurationService } from '../../../../services/ios-configuration.service';
-
+import { IosImage } from '../../../../models/images/ios-image';
+import { FileUploader, FileItem, ParsedResponseHeaders } from 'ng2-file-upload';
+import { ServerResponse } from '../../../../models/serverResponse';
 
 @Component({
     selector: 'app-add-ios-template',
@@ -28,6 +30,7 @@ export class AddIosTemplateComponent implements OnInit {
     networkAdaptersForTemplate: string[] = [];
     networkModulesForTemplate: string[] = [];
 
+    iosImages: IosImage[] = [];
     platforms: string[] = [];
     platformsWithEtherSwitchRouterOption = {};
     platformsWithChassis = {};
@@ -39,6 +42,7 @@ export class AddIosTemplateComponent implements OnInit {
     networkModules = {};
 
     ciscoUrl: string = "https://cfn.cloudapps.cisco.com/ITDIT/CFN/jsp/SearchBySoftware.jsp";
+    uploader: FileUploader;
 
     constructor(
         private route: ActivatedRoute,
@@ -67,11 +71,32 @@ export class AddIosTemplateComponent implements OnInit {
         });
     }
 
-    ngOnInit(){
+    ngOnInit() {
+        this.uploader = new FileUploader({});
+        this.uploader.onAfterAddingFile = file => {
+            file.withCredentials = false;
+        };
+        this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
+            console.log(response);
+            this.toasterService.error('An error occured: ' + response);
+        };
+        this.uploader.onSuccessItem = (
+            item: FileItem,
+            response: string,
+            status: number,
+            headers: ParsedResponseHeaders
+        ) => {
+            this.toasterService.success('Image uploaded');
+        };
+
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
 
+            this.iosService.getImages(this.server).subscribe((images: IosImage[]) => {
+                this.iosImages = images;
+            });
+
             this.templateMocksService.getIosTemplate().subscribe((iosTemplate: IosTemplate) => {
                 this.iosTemplate = iosTemplate;
 
@@ -87,6 +112,18 @@ export class AddIosTemplateComponent implements OnInit {
         });
     }
 
+    addImage(event): void {
+        let name = event.target.files[0].name.split('-')[0];
+        this.iosNameForm.controls['templateName'].setValue(name);
+        let fileName = event.target.files[0].name;
+
+        const url = this.iosService.getImagePath(fileName);
+        this.uploader.queue.forEach(elem => (elem.url = url));
+
+        const itemToUpload = this.uploader.queue[0];
+        this.uploader.uploadItem(itemToUpload);
+    }
+
     addTemplate() {
         if (!this.iosImageForm.invalid && !this.iosNameForm.invalid && !this.iosMemoryForm.invalid) {
             this.iosTemplate.template_id = uuid();

src/app/models/images/ios-image.ts

@@ -0,0 +1,6 @@
+export interface IosImage {
+    filename: string;
+    filesize: number;
+    md5sum: string;
+    path: string;
+}

src/app/services/ios.service.ts

@@ -3,11 +3,20 @@ import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { Observable } from 'rxjs';
 import { IosTemplate } from '../models/templates/ios-template';
+import { IosImage } from '../models/images/ios-image';
 
 @Injectable()
 export class IosService {
     constructor(private httpServer: HttpServer) {}
 
+    getImages(server: Server): Observable<IosImage[]> {
+        return this.httpServer.get<IosImage[]>(server, '/compute/dynamips/images') as Observable<IosImage[]>;
+    } 
+
+    getImagePath(filename: string): string {
+        return `/compute/dynamips/images/${filename}`;
+    }
+
     getTemplates(server: Server): Observable<IosTemplate[]> {
         return this.httpServer.get<IosTemplate[]>(server, '/templates') as Observable<IosTemplate[]>;
     }