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) {