diff --git a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html index aa7112c1..27bab968 100644 --- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html +++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html @@ -103,14 +103,60 @@ [uploader]="uploader"/> + +
+ + +
- - Done + + {{secondActionTitle}} -
- - -
+ +
+ Server type
+ + Install the appliance locally + Install the appliance on the GNS3 VM + +
+
+ Qemu binary
+ + + {{binary.path}} + + +
+
+ Install required files + + +
+
+ {{image.filename}} +
+
+ + +
+
+
+
+
+ +
+ +
+ + +
diff --git a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss index 361c88d0..f2f9b3c3 100644 --- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss +++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss @@ -37,3 +37,26 @@ .element-row.expanded { border-bottom-color: transparent; } + +.list-item { + display: flex; + justify-content: space-between; + width: 100%; +} + +.button { + margin-left: 10px; +} + +.create-button { + width: 100%; +} + +.radio-button { + width: 50%; + padding-top: 20px; +} + +.selection-group { + padding-bottom: 20px; +} diff --git a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts index 2bdc8cb5..dc678ef4 100644 --- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts +++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core'; -import { MatDialogRef, Sort, MatTableDataSource, MatPaginator, MatDialog } from '@angular/material'; +import { MatDialogRef, Sort, MatTableDataSource, MatPaginator, MatDialog, MatStepper, MatSelectionList, MatSelectionListChange } from '@angular/material'; import { Server } from '../../../models/server'; import { Node } from '../../../cartography/models/node'; import { Project } from '../../../models/project'; @@ -9,6 +9,8 @@ import { animate, state, style, transition, trigger } from '@angular/animations' import { FileUploader, FileItem, ParsedResponseHeaders } from 'ng2-file-upload'; import { ToasterService } from '../../../services/toaster.service'; import { ApplianceInfoDialogComponent } from './appliance-info-dialog/appliance-info-dialog.component'; +import { QemuBinary } from '../../../models/qemu/qemu-binary'; +import { QemuService } from '../../../services/qemu.service'; @Component({ selector: 'app-new-template-dialog', @@ -30,10 +32,19 @@ export class NewTemplateDialogComponent implements OnInit { public action: string = 'install'; public actionTitle: string = 'Install appliance from server'; + public secondActionTitle: string = 'Appliance settings'; public searchText: string = ''; public allAppliances: Appliance[] = []; public appliances: Appliance[] = []; + public applianceToInstall: Appliance; + public selectedImages: any[]; + + private isGns3VmChosen = true; + private isLocalComputerChosen = false; + + public qemuBinaries: QemuBinary[] = []; + public selectedBinary: QemuBinary; public categories: string[] = ['all categories', 'router', 'multilayer_switch', 'guest', 'firewall']; public category: string = 'all categories'; @@ -42,12 +53,14 @@ export class NewTemplateDialogComponent implements OnInit { public dataSource: MatTableDataSource; @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; + @ViewChild('stepper', {static: true}) stepper: MatStepper; constructor( public dialogRef: MatDialogRef, private applianceService: ApplianceService, private changeDetector: ChangeDetectorRef, private toasterService: ToasterService, + private qemuService: QemuService, public dialog: MatDialog ) {} @@ -65,6 +78,10 @@ export class NewTemplateDialogComponent implements OnInit { this.dataSource.paginator = this.paginator; }); + this.qemuService.getBinaries(this.server).subscribe((binaries) => { + this.qemuBinaries = binaries; + }); + this.uploader = new FileUploader({}); this.uploader.onAfterAddingFile = file => { file.withCredentials = false; @@ -130,6 +147,16 @@ export class NewTemplateDialogComponent implements OnInit { } } + setServerType(serverType: string) { + if (serverType === 'gns3 vm') { + this.isGns3VmChosen = true; + this.isLocalComputerChosen = false; + } else { + this.isGns3VmChosen = false; + this.isLocalComputerChosen = true; + } + } + sortData(sort: Sort) { if (!sort.active || sort.direction === '') return; @@ -150,17 +177,24 @@ export class NewTemplateDialogComponent implements OnInit { this.dialogRef.close(); } - install(object: any) { - console.log(object); + install(object: Appliance) { + this.applianceToInstall = object; + setTimeout(() => { + this.stepper.next(); + }, 100); } - showInfo(object: any) { + showInfo(object: Appliance) { let dialogRef = this.dialog.open(ApplianceInfoDialogComponent, { width: '250px', data: {appliance: object} }); dialogRef.componentInstance.appliance = object; } + + create() { + + } } function compareNames(a: string, b: string, isAsc: boolean) {