Merge pull request #1331 from GNS3/enhancement/1323

Enhancement/1323

src/app/app.module.ts

@@ -278,6 +278,7 @@ import { ImageManagerComponent } from './components/image-manager/image-manager.
 import { AddImageDialogComponent } from './components/image-manager/add-image-dialog/add-image-dialog.component';
 import { DeleteAllImageFilesDialogComponent } from './components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component';
 import { UploadingProcessbarComponent } from './common/uploading-processbar/uploading-processbar.component';
+import { ExportPortableProjectComponent } from './components/export-portable-project/export-portable-project.component';
 import { NodesMenuConfirmationDialogComponent } from './components/project-map/nodes-menu/nodes-menu-confirmation-dialog/nodes-menu-confirmation-dialog.component';
 
 @NgModule({
@@ -473,6 +474,7 @@ import { NodesMenuConfirmationDialogComponent } from './components/project-map/n
     AddImageDialogComponent,
     DeleteAllImageFilesDialogComponent,
     UploadingProcessbarComponent,
+    ExportPortableProjectComponent,
     NodesMenuConfirmationDialogComponent,
   ],
   imports: [

src/app/components/export-portable-project/export-portable-project.component.html

@@ -0,0 +1,73 @@
+<form
+  [formGroup]="export_project_form" *ngIf="export_project_form"
+  (ngSubmit)="export_project_form.valid && exportPortableProject()"
+>
+  <div class="row">
+    <div class="col-md-10">
+      <h1 mat-dialog-title>Export Project</h1>
+    </div>
+    <div class="col-md-2 txt-align">
+      <button mat-button type="button" class="close-btn" (click)="dialogRef.close()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+  </div>
+  <mat-divider></mat-divider>
+
+  <div class="mat-data">
+    <div class="row">
+      <div class="col-md-4 col-data">Compression:</div>
+      <div class="col-md-8">
+        <mat-form-field class="input-full-width">
+          <mat-select formControlName="compression" (selectionChange)="selectCompression($event)" required>
+            <mat-option *ngFor="let compressionValue of compression_methods" [value]="compressionValue">{{
+              compressionValue.name
+            }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-4 col-data">Compression level:</div>
+      <div class="col-md-8">
+        <mat-form-field class="input-full-width">
+          <mat-select formControlName="compression_level">
+            <mat-option *ngFor="let compressionLevel of compression_filter_value" [value]="compressionLevel">{{
+              compressionLevel
+            }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12 checkbox-row">
+        <section  class="checkBox-section">
+          <mat-checkbox formControlName="include_base_image" class="checkBox-margin"> Include base images </mat-checkbox>
+        </section>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12 checkbox-row">
+        <section class="checkBox-section" >
+          <mat-checkbox class="checkBox-margin" formControlName="include_snapshots"> Include snapshots </mat-checkbox>
+        </section>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12 checkbox-row">
+        <section class="checkBox-section">
+          <mat-checkbox  formControlName="reset_mac_address" class="checkBox-margin"> Reset MAC addresses</mat-checkbox>
+        </section>
+      </div>
+    </div>
+  </div>
+  <mat-divider></mat-divider>
+  <div class="row">
+    <div class="col-md-12">
+      <div mat-dialog-actions align="end">
+        <button mat-button type="submit" [disabled]="isExport" cdkFocusInitial>Export</button>
+        <button type="button" mat-button (click)="dialogRef.close()" cdkFocusInitial>Cancel</button>
+      </div>
+    </div>
+  </div>
+</form>

src/app/components/export-portable-project/export-portable-project.component.scss

@@ -0,0 +1,39 @@
+.mat-dialog-title {
+  margin: 0 0 0px;
+  display: block;
+}
+.mat-dialog-container {
+  padding: 14px 14px 5px 14px !important;
+}
+.checkBox-section {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  height: 35px;
+}
+
+.checkBox-margin {
+  margin: 0 10px;
+}
+.txt-align {
+  text-align: end;
+}
+.close-btn {
+  margin: 0 0 20px 40px;
+}
+.mat-data {
+  margin: 15px 0 15px 0;
+}
+
+
+.input-full-width {
+  width: 100%;
+}
+.col-data {
+  text-align: left;
+  align-self: self-end;
+  margin-bottom: 20px;
+}
+.checkbox-row{
+  margin-top: 5px 0 5px 0;
+}

src/app/components/export-portable-project/export-portable-project.component.spec.ts

@@ -0,0 +1,59 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ProjectService } from '../../services/project.service';
+import { MockedProjectService } from '../../services/project.service.spec';
+import { ToasterService } from '../../services/toaster.service';
+import { MockedToasterService } from '../../services/toaster.service.spec';
+import { ExportPortableProjectComponent } from './export-portable-project.component';
+
+describe('ExportPortableProjectComponent', () => {
+  let component: ExportPortableProjectComponent;
+  let fixture: ComponentFixture<ExportPortableProjectComponent>;
+  let mockedToasterService = new MockedToasterService();
+  let mockedProjectService = new MockedProjectService();
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ExportPortableProjectComponent],
+      imports: [
+        MatDialogModule,
+        ReactiveFormsModule,
+        FormsModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatInputModule,
+        BrowserAnimationsModule,
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: ProjectService, useValue: mockedProjectService },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExportPortableProjectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    let compression_methods_Value = mockedProjectService.getCompression;
+    let compression_level_value = mockedProjectService.getCompressionLevel;
+    component.compression_methods = compression_methods_Value[4];
+    component.compression_level = compression_level_value;
+    component.selectCompression(component.compression_methods);
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/export-portable-project/export-portable-project.component.ts

@@ -0,0 +1,71 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Project } from '../../models/project';
+import { Server } from '../../models/server';
+import { ProjectService } from '../../services/project.service';
+
+@Component({
+  selector: 'app-export-portable-project',
+  templateUrl: './export-portable-project.component.html',
+  styleUrls: ['./export-portable-project.component.scss'],
+})
+export class ExportPortableProjectComponent implements OnInit {
+  export_project_form: FormGroup;
+  chosenImage: string = '';
+  compression_methods: any = [];
+  compression_level: any = [];
+  compression_filter_value: any = [];
+  server: Server;
+  project: Project;
+  index: number = 4;
+  fileName: string;
+  isExport: boolean = false;
+
+  constructor(
+    public dialogRef: MatDialogRef<ExportPortableProjectComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private projectService: ProjectService,
+    private _fb: FormBuilder
+  ) {}
+
+  async ngOnInit() {
+    this.server = this.data.serverDetails;
+    this.project = this.data.projectDetails;
+    this.fileName = this.project.name + '.gns3project';
+    await this.formControls();
+    this.compression_methods = this.projectService.getCompression();
+    this.compression_level = this.projectService.getCompressionLevel();
+    this.selectCompression({ value: this.compression_methods[this.index] });
+    this.export_project_form.get('compression').setValue(this.compression_methods[this.index]);
+  }
+
+  formControls() {
+    this.export_project_form = this._fb.group({
+      compression: ['', Validators.required],
+      compression_level: [''],
+      include_base_image: [false, Validators.required],
+      include_snapshots: [false, Validators.required],
+      reset_mac_address: [false, Validators.required],
+    });
+    this.export_project_form.valueChanges.subscribe(() => {});
+  }
+
+  selectCompression(event) {
+    if (this.compression_level.length > 0) {
+      this.compression_level.map((_) => {
+        if (event.value.value === _.name) {
+          this.export_project_form.get('compression_level').setValue(_.value);
+          this.compression_filter_value = _.selectionValues;
+        }
+      });
+    }
+  }
+
+  exportPortableProject() {
+    this.isExport = true;
+    this.export_project_form.value.compression = this.export_project_form.value.compression.value ?? 'zstd';
+     window.location.assign(this.projectService.getexportPortableProjectPath(this.server, this.project.project_id, this.export_project_form.value))
+     this.dialogRef.close();
+  }
+}

src/app/components/project-map/project-map.component.spec.ts

@@ -3,7 +3,7 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import {  ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -319,6 +319,10 @@ xdescribe('ProjectMapComponent', () => {
         { provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource },
         { provide: MapSettingsService, useClass: MapSettingsService },
         { provide: NotificationService },
+        { provide: MatDialogRef, useValue: {}},
+        { provide: MAT_DIALOG_DATA, useValue: {}},
+
+
       ],
       declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
       schemas: [NO_ERRORS_SCHEMA],

src/app/components/project-map/project-map.component.ts

@@ -1,12 +1,22 @@
-import { ChangeDetectorRef, Component, ComponentFactoryResolver, ComponentRef, Injector, OnDestroy, OnInit, SimpleChange, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ComponentRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ViewEncapsulation,
+} from '@angular/core';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { MatDialog } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ExportPortableProjectComponent } from '../../components/export-portable-project/export-portable-project.component';
 import { environment } from 'environments/environment';
 import * as Mousetrap from 'mousetrap';
 import { from, Observable, Subscription } from 'rxjs';
-import { map, mergeMap, takeUntil } from 'rxjs/operators';
+import { map, mergeMap } from 'rxjs/operators';
 import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
 import { MapDrawingToDrawingConverter } from '../../cartography/converters/map/map-drawing-to-drawing-converter';
 import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter';
@@ -126,7 +136,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   @ViewChild(ContextMenuComponent) contextMenu: ContextMenuComponent;
   @ViewChild(D3MapComponent) mapChild: D3MapComponent;
   @ViewChild(ProjectMapMenuComponent) projectMapMenuComponent: ProjectMapMenuComponent;
-  @ViewChild('topologySummaryContainer', {read: ViewContainerRef}) topologySummaryContainer: ViewContainerRef;
+  @ViewChild('topologySummaryContainer', { read: ViewContainerRef }) topologySummaryContainer: ViewContainerRef;
 
   private projectMapSubscription: Subscription = new Subscription();
 
@@ -177,13 +187,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private nodeConsoleService: NodeConsoleService,
     private symbolService: SymbolService,
     private cd: ChangeDetectorRef,
-    // private cfr: ComponentFactoryResolver, 
+    // private cfr: ComponentFactoryResolver,
     // private injector: Injector,
     private viewContainerRef: ViewContainerRef
   ) {}
 
-
-
   // constructor(private viewContainerRef: ViewContainerRef) {}
   // createMyComponent() {this.viewContainerRef.createComponent(MyComponent);}
 
@@ -228,19 +236,19 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   async lazyLoadTopologySummary() {
     if (this.isTopologySummaryVisible) {
-      const {TopologySummaryComponent} = await import('../topology-summary/topology-summary.component');
-      this.instance =   this.viewContainerRef.createComponent(TopologySummaryComponent)
+      const { TopologySummaryComponent } = await import('../topology-summary/topology-summary.component');
+      this.instance = this.viewContainerRef.createComponent(TopologySummaryComponent);
 
       // const componentFactory = this.cfr.resolveComponentFactory(TopologySummaryComponent);
       // this.instance = this.topologySummaryContainer.createComponent(componentFactory, null, this.injector);
       this.instance.instance.server = this.server;
       this.instance.instance.project = this.project;
     } else if (this.instance) {
-      if (this.instance.instance)  {
+      if (this.instance.instance) {
         this.instance.instance.ngOnDestroy();
         this.instance.destroy();
       }
-    } 
+    }
   }
 
   addSubscriptions() {
@@ -339,7 +347,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
             if (!project) this.router.navigate(['/servers']);
 
             this.projectService.open(this.server, this.project.project_id);
-            this.title.setTitle(this.project.name); 
+            this.title.setTitle(this.project.name);
             this.isInterfaceLabelVisible = this.mapSettingsService.showInterfaceLabels;
             this.toggleShowTopologySummary(this.mapSettingsService.isTopologySummaryVisible);
 
@@ -987,9 +995,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     ) {
       this.toasterService.error('Project with running nodes cannot be exported.');
     } else {
-      location.assign(this.projectService.getExportPath(this.server, this.project));
+      // location.assign(this.projectService.getExportPath(this.server, this.project));
+      this.exportPortableProjectDialog();
     }
   }
+  exportPortableProjectDialog() {
+    const dialogRef = this.dialog.open(ExportPortableProjectComponent, {
+      width: '700px',
+      maxHeight: '850px',
+      autoFocus: false,
+      disableClose: true,
+      data: {serverDetails:this.server,projectDetails:this.project},
+    });
+
+    dialogRef.afterClosed().subscribe((isAddes: boolean) => {});
+  }
 
   public uploadImageFile(event) {
     this.readImageFile(event.target);
@@ -1059,7 +1079,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       width: '600px',
       height: '650px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;

src/app/services/project.service.spec.ts

@@ -49,6 +49,15 @@ export class MockedProjectService {
   getStatistics(server: Server, project_id: string) {
     return of({});
   }
+  exportPortableProject(server: Server, formData:{}) {
+    return of({});
+  }
+  getCompression() {
+    return of([]);
+  }
+  getCompressionLevel() {
+    return of([]);
+  }
 }
 
 describe('ProjectService', () => {

src/app/services/project.service.ts

@@ -12,8 +12,27 @@ import { SettingsService } from './settings.service';
 
 @Injectable()
 export class ProjectService {
-  public projectListSubject = new Subject<boolean>();
+  compression_methods: any = [
+    { id: 1, value: 'none', name: 'None' },
+    { id: 2, value: 'zip', name: 'Zip compression (deflate)' },
+    { id: 3, value: 'bzip2', name: 'Bzip2 compression' },
+    { id: 4, value: 'lzma', name: 'Lzma compression' },
+    { id: 5, value: 'zstd', name: 'Zstandard compression' },
+  ];
+  compression_level_default_value: any = [
+    { id: 1, name: 'none', value: '', selectionValues: [] },
+    { id: 2, name: 'zip', value: 6, selectionValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
+    { id: 3, name: 'bzip2', value: 9, selectionValues: [1, 2, 3, 4, 5, 6, 7, 8, 9] },
+    { id: 4, name: 'lzma', value: ' ', selectionValues: [] },
+    {
+      id: 5,
+      name: 'zstd',
+      value: 3,
+      selectionValues: [1, 2, 3, 4, 5, 6, 7, 8, 9.1, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
+    },
+  ];
 
+  public projectListSubject = new Subject<boolean>();
   constructor(
     private httpServer: HttpServer,
     private settingsService: SettingsService,
@@ -109,4 +128,21 @@ export class ProjectService {
     }
     return false;
   }
-}
+
+  getCompression() {
+    return this.compression_methods;
+  };
+  getCompressionLevel() {
+    return this.compression_level_default_value;
+  };
+
+
+  getexportPortableProjectPath(server:Server, project_id: string,formData:any={}) {
+    if (formData.compression_level != null && formData.compression_level !='') {
+      return `${server.protocol}//${server.host}:${server.port}/${environment.current_version}/projects/${project_id}/export?include_snapshots=${formData.include_snapshots}&include_images=${formData.include_base_image}&reset_mac_addresses=${formData.reset_mac_address}&compression=${formData.compression}&compression_level=${formData.compression_level}&token=${server.authToken}`;
+    } else {
+      return `${server.protocol}//${server.host}:${server.port}/${environment.current_version}/projects/${project_id}/export?include_snapshots=${formData.include_snapshots}&include_images=${formData.include_base_image}&reset_mac_addresses=${formData.reset_mac_address}&compression=${formData.compression}&token=${server.authToken}`;
+
+    }
+  }
+}