From fd95c2d43c26d7795b23d917fa6ccce9ba93123c Mon Sep 17 00:00:00 2001 From: Rajnikant Date: Tue, 7 Jun 2022 08:58:51 +0530 Subject: [PATCH 01/13] I added export portable project dialog box --- src/app/app.module.ts | 2 + .../export-portable-project.component.html | 58 +++++++++++++++++++ .../export-portable-project.component.scss | 17 ++++++ .../export-portable-project.component.spec.ts | 25 ++++++++ .../export-portable-project.component.ts | 19 ++++++ .../project-map/project-map.component.ts | 46 ++++++++++----- 6 files changed, 154 insertions(+), 13 deletions(-) create mode 100644 src/app/components/export-portable-project/export-portable-project.component.html create mode 100644 src/app/components/export-portable-project/export-portable-project.component.scss create mode 100644 src/app/components/export-portable-project/export-portable-project.component.spec.ts create mode 100644 src/app/components/export-portable-project/export-portable-project.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c907b644..7a7f01be 100644 --- a/src/app/app.module.ts +++ b/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'; @NgModule({ declarations: [ @@ -472,6 +473,7 @@ import { UploadingProcessbarComponent } from './common/uploading-processbar/uplo AddImageDialogComponent, DeleteAllImageFilesDialogComponent, UploadingProcessbarComponent, + ExportPortableProjectComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/export-portable-project/export-portable-project.component.html b/src/app/components/export-portable-project/export-portable-project.component.html new file mode 100644 index 00000000..61ca59f3 --- /dev/null +++ b/src/app/components/export-portable-project/export-portable-project.component.html @@ -0,0 +1,58 @@ +
+
+

Export Project

+
+
+ +
+
+ +

Please select the location, whether to include base images or not and the compression type.

+ +
+
+
Path:
+
+
+
+
+
Compression:
+
+
+
+
+
Compression level:
+
+
+
+
+
+
+ Include base images +
+
+
+
+
+
+ Include snapshots +
+
+
+
+
+
+ Reset MAC addresses +
+
+
+
+ +
+ + + + +
diff --git a/src/app/components/export-portable-project/export-portable-project.component.scss b/src/app/components/export-portable-project/export-portable-project.component.scss new file mode 100644 index 00000000..ac18267e --- /dev/null +++ b/src/app/components/export-portable-project/export-portable-project.component.scss @@ -0,0 +1,17 @@ +.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; + } \ No newline at end of file diff --git a/src/app/components/export-portable-project/export-portable-project.component.spec.ts b/src/app/components/export-portable-project/export-portable-project.component.spec.ts new file mode 100644 index 00000000..7d359b4b --- /dev/null +++ b/src/app/components/export-portable-project/export-portable-project.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ExportPortableProjectComponent } from './export-portable-project.component'; + +describe('ExportPortableProjectComponent', () => { + let component: ExportPortableProjectComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ExportPortableProjectComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ExportPortableProjectComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts new file mode 100644 index 00000000..92ede715 --- /dev/null +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit } from '@angular/core'; +import { MatDialogRef } from '@angular/material/dialog'; + +@Component({ + selector: 'app-export-portable-project', + templateUrl: './export-portable-project.component.html', + styleUrls: ['./export-portable-project.component.scss'] +}) +export class ExportPortableProjectComponent implements OnInit { + + constructor( + public dialogRef: MatDialogRef, + + ) { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index df7936f1..2eec2b50 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/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); @@ -986,9 +994,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: this.server, + }); + + dialogRef.afterClosed().subscribe((isAddes: boolean) => {}); + } public uploadImageFile(event) { this.readImageFile(event.target); @@ -1058,7 +1078,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; From 5c1ce1a5ab6fdd0fd0bc6af20be19e09733e9d74 Mon Sep 17 00:00:00 2001 From: Rajnikant Date: Fri, 10 Jun 2022 19:20:02 +0530 Subject: [PATCH 02/13] I complete export project UI and bind export portable project API --- .../export-portable-project.component.html | 149 ++++++++++++------ .../export-portable-project.component.scss | 46 ++++-- .../export-portable-project.component.ts | 81 +++++++++- src/app/services/project.service.ts | 31 +++- 4 files changed, 239 insertions(+), 68 deletions(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.html b/src/app/components/export-portable-project/export-portable-project.component.html index 61ca59f3..db403a80 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.html +++ b/src/app/components/export-portable-project/export-portable-project.component.html @@ -1,58 +1,105 @@ -
-
-

Export Project

+
+
+
+

Export Project

+
+
+ +
-
- -
-
-

Please select the location, whether to include base images or not and the compression type.

- -
-
-
Path:
-
-
-
-
-
Compression:
-
-
-
-
-
Compression level:
-
-
-
-
-
-
- Include base images -
+

+ Please select the location, whether to include base images or not and the compression
type. +

+ + +
+
+
+
Path:
+
+
+ + + +
+
+ + +
+
+
+
Compression:
+
+ + + {{ + compressionValue.name + }} + + +
+
+
+
Compression level:
+
+ + + {{ + compressionLevel + }} + + +
+
+
+
+
+ Include base images +
+
+
+
+
+
+ Include snapshots +
+
+
+
+
+
+ Reset MAC addresses +
+
+
-
-
- Include snapshots -
+
+
+ +
+
+
+
+ + + +
-
-
-
- Reset MAC addresses -
-
-
-
- -
- - - - -
+ diff --git a/src/app/components/export-portable-project/export-portable-project.component.scss b/src/app/components/export-portable-project/export-portable-project.component.scss index ac18267e..3f427895 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.scss +++ b/src/app/components/export-portable-project/export-portable-project.component.scss @@ -1,17 +1,39 @@ .mat-dialog-title { - margin: 0 0 0px; - display: block; + margin: 0 0 0px; + display: block; } .mat-dialog-container { - padding: 14px 14px 5px 14px !important; + padding: 14px 14px 5px 14px !important; } .checkBox-section { - display: flex; - align-content: center; - align-items: center; - height: 35px; - } - - .checkBox-margin { - margin: 0 10px; - } \ No newline at end of file + 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; +} diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts index 92ede715..3de50e39 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -1,19 +1,92 @@ +import { Inject } from '@angular/core'; import { Component, OnInit } from '@angular/core'; -import { MatDialogRef } from '@angular/material/dialog'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { Server } from '../../models/server'; +import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload'; +import { ProjectService } from '../../services/project.service'; +import { ToasterService } from '../../services/toaster.service'; @Component({ selector: 'app-export-portable-project', templateUrl: './export-portable-project.component.html', - styleUrls: ['./export-portable-project.component.scss'] + styleUrls: ['./export-portable-project.component.scss'], }) export class ExportPortableProjectComponent implements OnInit { + uploader: FileUploader; + export_project_form: FormGroup; + chosenImage: string = ''; + compression_methods: any = []; + compression_level: any = []; + compression_filter_value: any = []; + server: Server; constructor( public dialogRef: MatDialogRef, - - ) { } + @Inject(MAT_DIALOG_DATA) public data: any, + private toasterService: ToasterService, + private projectService: ProjectService, + private _fb: FormBuilder + ) {} ngOnInit(): void { + this.server = this.data; + + this.formControls(); + this.compression_methods = this.projectService.getCompression(); + this.compression_level = this.projectService.getCompressionLevel(); + this.uploader = new FileUploader({}); + + this.uploader.onAfterAddingFile = (file) => { + file.withCredentials = false; + }; + this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => { + this.toasterService.error('An error occured: ' + response); + }; + this.uploader.onSuccessItem = ( + item: FileItem, + response: string, + status: number, + headers: ParsedResponseHeaders + ) => { + this.toasterService.success('Image uploaded'); + }; + + this.uploader.onProgressItem = (progress: any) => {}; + + this.selectCompression({ value: this.compression_methods[4] }); + this.export_project_form.get('compression').setValue(this.compression_methods[4]); + } + formControls() { + this.export_project_form = this._fb.group({ + file_path: ['', Validators.required], + compression: ['', Validators.required], + compression_level: ['', Validators.required], + include_base_image: [false, Validators.required], + include_snapshots: [false, Validators.required], + reset_mac_address: [false, Validators.required], + }); + this.export_project_form.valueChanges.subscribe(() => {}); + } + + uploadImageFile(event) {} + + selectCompression(event) { + console.log(event); + 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.projectService.exportPortableProject(this.server,this.export_project_form.value).subscribe((res)=>{ + + }) + console.log(this.export_project_form.value); + } } diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 3367adba..335a7215 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -12,8 +12,27 @@ import { SettingsService } from './settings.service'; @Injectable() export class ProjectService { - public projectListSubject = new Subject(); + compression_methods: any = [ + { id: 1, value: 'none', name: 'None' }, + { id: 2, value: 'zip compression (deflate)', name: 'Zip compression (deflate)' }, + { id: 3, value: 'bzip2 compression', name: 'Bzip2 compression' }, + { id: 4, value: 'lzma compression', name: 'Lzma compression' }, + { id: 5, value: 'zstandard compression', name: 'Zstandard compression' }, + ]; + compression_level_default_value: any = [ + { id: 1, name: 'none', value: 'None', selectionValues: ['None'] }, + { id: 2, name: 'zip compression (deflate)', value: 6, selectionValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }, + { id: 3, name: 'bzip2 compression', value: 9, selectionValues: [1, 2, 3, 4, 5, 6, 7, 8, 9] }, + { id: 4, name: 'lzma compression', value: 'None', selectionValues: ['None'] }, + { + id: 5, + name: 'zstandard compression', + 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(); constructor( private httpServer: HttpServer, private settingsService: SettingsService, @@ -109,4 +128,14 @@ export class ProjectService { } return false; } + + getCompression = () => { + return this.compression_methods; + }; + getCompressionLevel = () => { + return this.compression_level_default_value; + }; + exportPortableProject(server:Server,formData:any={}) { + return this.httpServer.get(server,`projects/${formData.file_path}/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}`) + } } From 06ed79ec7826eb1408054de33f6062b1ac4b08a1 Mon Sep 17 00:00:00 2001 From: Rajnikant Date: Mon, 13 Jun 2022 12:11:49 +0530 Subject: [PATCH 03/13] Add compression methods short form according to API endpoint and resolve build error --- .../export-portable-project.component.html | 4 ++-- .../export-portable-project.component.ts | 17 ++++++++--------- .../project-map/project-map.component.ts | 2 +- src/app/services/project.service.ts | 18 +++++++++--------- 4 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.html b/src/app/components/export-portable-project/export-portable-project.component.html index db403a80..1a67e7af 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.html +++ b/src/app/components/export-portable-project/export-portable-project.component.html @@ -38,7 +38,7 @@ ng2FileSelect [uploader]="uploader" /> - +
@@ -46,7 +46,7 @@
- {{ + {{ compressionValue.name }} diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts index 3de50e39..6046bd31 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -1,9 +1,8 @@ -import { Inject } from '@angular/core'; -import { Component, OnInit } from '@angular/core'; +import { Component, Inject, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; -import { Server } from '../../models/server'; import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload'; +import { Server } from '../../models/server'; import { ProjectService } from '../../services/project.service'; import { ToasterService } from '../../services/toaster.service'; @@ -56,7 +55,6 @@ export class ExportPortableProjectComponent implements OnInit { this.selectCompression({ value: this.compression_methods[4] }); this.export_project_form.get('compression').setValue(this.compression_methods[4]); - } formControls() { @@ -74,7 +72,6 @@ export class ExportPortableProjectComponent implements OnInit { uploadImageFile(event) {} selectCompression(event) { - console.log(event); this.compression_level.map((_) => { if (event.value.value === _.name) { this.export_project_form.get('compression_level').setValue(_.value); @@ -84,9 +81,11 @@ export class ExportPortableProjectComponent implements OnInit { } exportPortableProject() { - this.projectService.exportPortableProject(this.server,this.export_project_form.value).subscribe((res)=>{ - - }) - console.log(this.export_project_form.value); + let response + this.export_project_form.value.compression = this.export_project_form.value.compression.value; + this.projectService.exportPortableProject(this.server, this.export_project_form.value) + .subscribe((res) => { + response = res + }); } } diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 2eec2b50..8ee412c8 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -12,7 +12,7 @@ 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 { 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'; diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 335a7215..9555d62c 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -14,19 +14,19 @@ import { SettingsService } from './settings.service'; export class ProjectService { compression_methods: any = [ { id: 1, value: 'none', name: 'None' }, - { id: 2, value: 'zip compression (deflate)', name: 'Zip compression (deflate)' }, - { id: 3, value: 'bzip2 compression', name: 'Bzip2 compression' }, - { id: 4, value: 'lzma compression', name: 'Lzma compression' }, - { id: 5, value: 'zstandard compression', name: 'Zstandard compression' }, + { 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: 'None', selectionValues: ['None'] }, - { id: 2, name: 'zip compression (deflate)', value: 6, selectionValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }, - { id: 3, name: 'bzip2 compression', value: 9, selectionValues: [1, 2, 3, 4, 5, 6, 7, 8, 9] }, - { id: 4, name: 'lzma compression', value: 'None', selectionValues: ['None'] }, + { 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: 'None', selectionValues: ['None'] }, { id: 5, - name: 'zstandard compression', + 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], }, @@ -136,6 +136,6 @@ export class ProjectService { return this.compression_level_default_value; }; exportPortableProject(server:Server,formData:any={}) { - return this.httpServer.get(server,`projects/${formData.file_path}/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}`) + return this.httpServer.get(server,`/projects/${formData.file_path}/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}`) } } From 50f6cd2191f6f894a93082f510909a3f331d7eab Mon Sep 17 00:00:00 2001 From: Rajnikant Date: Mon, 13 Jun 2022 16:28:44 +0530 Subject: [PATCH 04/13] Write a unit test case for export project dialog box. --- .../export-portable-project.component.spec.ts | 42 +++++++++++++++++-- .../export-portable-project.component.ts | 32 +++++++------- .../project-map/project-map.component.spec.ts | 6 ++- src/app/services/project.service.spec.ts | 9 ++++ src/app/services/project.service.ts | 4 +- 5 files changed, 70 insertions(+), 23 deletions(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.spec.ts b/src/app/components/export-portable-project/export-portable-project.component.spec.ts index 7d359b4b..c7b6bc75 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.spec.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.spec.ts @@ -1,16 +1,45 @@ +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; + let mockedToasterService = new MockedToasterService(); + let mockedProjectService = new MockedProjectService(); beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ExportPortableProjectComponent ] - }) - .compileComponents(); + 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(() => { @@ -20,6 +49,11 @@ describe('ExportPortableProjectComponent', () => { }); 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(); }); }); diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts index 6046bd31..96268f54 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -19,6 +19,7 @@ export class ExportPortableProjectComponent implements OnInit { compression_level: any = []; compression_filter_value: any = []; server: Server; + index: number = 4; constructor( public dialogRef: MatDialogRef, @@ -28,10 +29,9 @@ export class ExportPortableProjectComponent implements OnInit { private _fb: FormBuilder ) {} - ngOnInit(): void { + async ngOnInit() { this.server = this.data; - - this.formControls(); + await this.formControls(); this.compression_methods = this.projectService.getCompression(); this.compression_level = this.projectService.getCompressionLevel(); this.uploader = new FileUploader({}); @@ -52,9 +52,8 @@ export class ExportPortableProjectComponent implements OnInit { }; this.uploader.onProgressItem = (progress: any) => {}; - - this.selectCompression({ value: this.compression_methods[4] }); - this.export_project_form.get('compression').setValue(this.compression_methods[4]); + this.selectCompression({ value: this.compression_methods[this.index] }); + this.export_project_form.get('compression').setValue(this.compression_methods[this.index]); } formControls() { @@ -72,20 +71,21 @@ export class ExportPortableProjectComponent implements OnInit { uploadImageFile(event) {} selectCompression(event) { - this.compression_level.map((_) => { - if (event.value.value === _.name) { - this.export_project_form.get('compression_level').setValue(_.value); - this.compression_filter_value = _.selectionValues; - } - }); + 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() { - let response + let response; this.export_project_form.value.compression = this.export_project_form.value.compression.value; - this.projectService.exportPortableProject(this.server, this.export_project_form.value) - .subscribe((res) => { - response = res + this.projectService.exportPortableProject(this.server, this.export_project_form.value).subscribe((res) => { + response = res; }); } } diff --git a/src/app/components/project-map/project-map.component.spec.ts b/src/app/components/project-map/project-map.component.spec.ts index dfeb4814..686e0f34 100644 --- a/src/app/components/project-map/project-map.component.spec.ts +++ b/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], diff --git a/src/app/services/project.service.spec.ts b/src/app/services/project.service.spec.ts index 41071e7a..d3719f07 100644 --- a/src/app/services/project.service.spec.ts +++ b/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', () => { diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 9555d62c..067556d4 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -129,10 +129,10 @@ export class ProjectService { return false; } - getCompression = () => { + getCompression() { return this.compression_methods; }; - getCompressionLevel = () => { + getCompressionLevel() { return this.compression_level_default_value; }; exportPortableProject(server:Server,formData:any={}) { From 3d0e94257f45c70f4abc95799742812e5b164236 Mon Sep 17 00:00:00 2001 From: Rajnikant Lodhi Date: Mon, 13 Jun 2022 16:40:17 +0530 Subject: [PATCH 05/13] . --- .../export-portable-project.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.spec.ts b/src/app/components/export-portable-project/export-portable-project.component.spec.ts index c7b6bc75..169f9689 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.spec.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.spec.ts @@ -30,7 +30,7 @@ describe('ExportPortableProjectComponent', () => { MatCheckboxModule, MatFormFieldModule, MatInputModule, - BrowserAnimationsModule + BrowserAnimationsModule, ], providers: [ { provide: MatDialogRef, useValue: {} }, From be831aaf156f349437fe9069a00a3b27b151d9a0 Mon Sep 17 00:00:00 2001 From: Rajnikant Lodhi Date: Fri, 17 Jun 2022 13:06:42 +0530 Subject: [PATCH 06/13] Complete export portable project settings and modified the unit test case --- .../export-portable-project.component.html | 24 +--------------- .../export-portable-project.component.ts | 28 ++++++++++++++----- .../project-map/project-map.component.ts | 2 +- src/app/services/project.service.ts | 4 +-- 4 files changed, 25 insertions(+), 33 deletions(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.html b/src/app/components/export-portable-project/export-portable-project.component.html index 1a67e7af..77609159 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.html +++ b/src/app/components/export-portable-project/export-portable-project.component.html @@ -1,5 +1,5 @@
@@ -19,28 +19,6 @@
-
-
-
Path:
-
-
- - - -
-
- - -
-
Compression:
diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts index 96268f54..b59202ea 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -2,6 +2,7 @@ import { Component, Inject, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload'; +import { Project } from '../../models/project'; import { Server } from '../../models/server'; import { ProjectService } from '../../services/project.service'; import { ToasterService } from '../../services/toaster.service'; @@ -19,18 +20,22 @@ export class ExportPortableProjectComponent implements OnInit { compression_level: any = []; compression_filter_value: any = []; server: Server; + project: Project; index: number = 4; + fileName: string; constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any, private toasterService: ToasterService, private projectService: ProjectService, - private _fb: FormBuilder + private _fb: FormBuilder, ) {} async ngOnInit() { - this.server = this.data; + this.server = this.data.serverDetails; + this.project = this.data.projectDetails; + this.fileName = this.project.name + '.zip'; await this.formControls(); this.compression_methods = this.projectService.getCompression(); this.compression_level = this.projectService.getCompressionLevel(); @@ -58,7 +63,6 @@ export class ExportPortableProjectComponent implements OnInit { formControls() { this.export_project_form = this._fb.group({ - file_path: ['', Validators.required], compression: ['', Validators.required], compression_level: ['', Validators.required], include_base_image: [false, Validators.required], @@ -83,9 +87,19 @@ export class ExportPortableProjectComponent implements OnInit { exportPortableProject() { let response; - this.export_project_form.value.compression = this.export_project_form.value.compression.value; - this.projectService.exportPortableProject(this.server, this.export_project_form.value).subscribe((res) => { - response = res; - }); + this.export_project_form.value.compression = this.export_project_form.value.compression.value ?? 'zstd'; + this.projectService + .exportPortableProject(this.server, this.project.project_id, this.export_project_form.value) + .subscribe((res) => { + response = res; + const url = window.URL.createObjectURL(new Blob([response])); + const link = document.createElement('a'); + link.href = url; + link.setAttribute('download', this.fileName); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + this.dialogRef.close() + }); } } diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 8ee412c8..e34699a2 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -1004,7 +1004,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { maxHeight: '850px', autoFocus: false, disableClose: true, - data: this.server, + data: {serverDetails:this.server,projectDetails:this.project}, }); dialogRef.afterClosed().subscribe((isAddes: boolean) => {}); diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 067556d4..c2f42a64 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -135,7 +135,7 @@ export class ProjectService { getCompressionLevel() { return this.compression_level_default_value; }; - exportPortableProject(server:Server,formData:any={}) { - return this.httpServer.get(server,`/projects/${formData.file_path}/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}`) + exportPortableProject(server:Server, project_id: string,formData:any={}) { + return this.httpServer.getBlob(server,`/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}`) } } From 06852d94d7c41d8a442ab91a64b51dd73a338f77 Mon Sep 17 00:00:00 2001 From: Rajnikant Lodhi Date: Fri, 17 Jun 2022 14:54:54 +0530 Subject: [PATCH 07/13] Resolve cosmetic issues --- .../export-portable-project.component.html | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.html b/src/app/components/export-portable-project/export-portable-project.component.html index 77609159..074d3780 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.html +++ b/src/app/components/export-portable-project/export-portable-project.component.html @@ -12,10 +12,6 @@
- -

- Please select the location, whether to include base images or not and the compression
type. -

@@ -67,15 +63,9 @@
-
-
- -
-
-
+
- - +
From 59667e3a90238e7173bc021552ec043bdfe8b5d6 Mon Sep 17 00:00:00 2001 From: Rajnikant Lodhi Date: Fri, 17 Jun 2022 19:55:24 +0530 Subject: [PATCH 08/13] Resolve both issues like: 1.Selecting "none" or "lzma" compression type shouldn't pass a compression level of "None". 2.The export window waits for the project to be downloaded when exporting a large project with images --- .../export-portable-project.component.html | 4 ++-- .../export-portable-project.component.ts | 18 +++++++++++------- src/app/services/project.service.ts | 13 +++++++++---- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.html b/src/app/components/export-portable-project/export-portable-project.component.html index 074d3780..ee121de3 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.html +++ b/src/app/components/export-portable-project/export-portable-project.component.html @@ -31,7 +31,7 @@
Compression level:
- + {{ compressionLevel }} @@ -65,7 +65,7 @@
- +
diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts index b59202ea..72932e63 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -2,6 +2,8 @@ import { Component, Inject, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload'; +import { Observable, of } from 'rxjs'; +import { catchError } from 'rxjs/operators'; import { Project } from '../../models/project'; import { Server } from '../../models/server'; import { ProjectService } from '../../services/project.service'; @@ -23,6 +25,7 @@ export class ExportPortableProjectComponent implements OnInit { project: Project; index: number = 4; fileName: string; + isExport:boolean = false constructor( public dialogRef: MatDialogRef, @@ -64,7 +67,7 @@ export class ExportPortableProjectComponent implements OnInit { formControls() { this.export_project_form = this._fb.group({ compression: ['', Validators.required], - compression_level: ['', Validators.required], + compression_level: [''], include_base_image: [false, Validators.required], include_snapshots: [false, Validators.required], reset_mac_address: [false, Validators.required], @@ -86,20 +89,21 @@ export class ExportPortableProjectComponent implements OnInit { } exportPortableProject() { - let response; + this.isExport = true this.export_project_form.value.compression = this.export_project_form.value.compression.value ?? 'zstd'; - this.projectService + const object = this.projectService .exportPortableProject(this.server, this.project.project_id, this.export_project_form.value) - .subscribe((res) => { - response = res; - const url = window.URL.createObjectURL(new Blob([response])); + .pipe(catchError((error) => of(error))); + object.subscribe((res)=>{ + const url = window.URL.createObjectURL(new Blob([res])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', this.fileName); document.body.appendChild(link); link.click(); document.body.removeChild(link); + this.isExport = false this.dialogRef.close() - }); + }) } } diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index c2f42a64..3104a85e 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -20,10 +20,10 @@ export class ProjectService { { id: 5, value: 'zstd', name: 'Zstandard compression' }, ]; compression_level_default_value: any = [ - { id: 1, name: 'none', value: 'None', selectionValues: ['None'] }, + { 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: 'None', selectionValues: ['None'] }, + { id: 4, name: 'lzma', value: ' ', selectionValues: [] }, { id: 5, name: 'zstd', @@ -136,6 +136,11 @@ export class ProjectService { return this.compression_level_default_value; }; exportPortableProject(server:Server, project_id: string,formData:any={}) { - return this.httpServer.getBlob(server,`/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}`) + if (formData.compression_level != null && formData.compression_level !='') { + return this.httpServer.getBlob(server,`/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}`) + } else { + return this.httpServer.getBlob(server,`/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}`) + + } } -} +} \ No newline at end of file From 335ea23b6b1278099060318e28b8c9c986a2f598 Mon Sep 17 00:00:00 2001 From: Rajnikant Lodhi Date: Tue, 21 Jun 2022 12:05:31 +0530 Subject: [PATCH 09/13] Resolve issue of waiting for the download to be finished and removed unused code --- .../export-portable-project.component.ts | 59 +++++++------------ 1 file changed, 21 insertions(+), 38 deletions(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts index 72932e63..d022a17d 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -1,8 +1,7 @@ import { Component, Inject, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; -import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload'; -import { Observable, of } from 'rxjs'; +import { of } from 'rxjs'; import { catchError } from 'rxjs/operators'; import { Project } from '../../models/project'; import { Server } from '../../models/server'; @@ -15,7 +14,6 @@ import { ToasterService } from '../../services/toaster.service'; styleUrls: ['./export-portable-project.component.scss'], }) export class ExportPortableProjectComponent implements OnInit { - uploader: FileUploader; export_project_form: FormGroup; chosenImage: string = ''; compression_methods: any = []; @@ -25,14 +23,14 @@ export class ExportPortableProjectComponent implements OnInit { project: Project; index: number = 4; fileName: string; - isExport:boolean = false + isExport: boolean = false; constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any, private toasterService: ToasterService, private projectService: ProjectService, - private _fb: FormBuilder, + private _fb: FormBuilder ) {} async ngOnInit() { @@ -42,24 +40,6 @@ export class ExportPortableProjectComponent implements OnInit { await this.formControls(); this.compression_methods = this.projectService.getCompression(); this.compression_level = this.projectService.getCompressionLevel(); - this.uploader = new FileUploader({}); - - this.uploader.onAfterAddingFile = (file) => { - file.withCredentials = false; - }; - this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => { - this.toasterService.error('An error occured: ' + response); - }; - this.uploader.onSuccessItem = ( - item: FileItem, - response: string, - status: number, - headers: ParsedResponseHeaders - ) => { - this.toasterService.success('Image uploaded'); - }; - - this.uploader.onProgressItem = (progress: any) => {}; this.selectCompression({ value: this.compression_methods[this.index] }); this.export_project_form.get('compression').setValue(this.compression_methods[this.index]); } @@ -75,8 +55,6 @@ export class ExportPortableProjectComponent implements OnInit { this.export_project_form.valueChanges.subscribe(() => {}); } - uploadImageFile(event) {} - selectCompression(event) { if (this.compression_level.length > 0) { this.compression_level.map((_) => { @@ -89,21 +67,26 @@ export class ExportPortableProjectComponent implements OnInit { } exportPortableProject() { - this.isExport = true + this.isExport = true; this.export_project_form.value.compression = this.export_project_form.value.compression.value ?? 'zstd'; - const object = this.projectService + const object = this.projectService .exportPortableProject(this.server, this.project.project_id, this.export_project_form.value) .pipe(catchError((error) => of(error))); - object.subscribe((res)=>{ - const url = window.URL.createObjectURL(new Blob([res])); - const link = document.createElement('a'); - link.href = url; - link.setAttribute('download', this.fileName); - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - this.isExport = false - this.dialogRef.close() - }) + object.subscribe((res) => { + const url = window.URL.createObjectURL(new Blob([res])); + const link = document.createElement('a'); + link.href = url; + link.setAttribute('download', this.fileName); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + console.log(document.cookie.search(this.fileName)); + this.isExport = false; + setTimeout(() => { + this.dialogRef.close(); + }, 9000); + }); + } + } From b032c884675fc93a204a8b190f268ae34b1cc0b8 Mon Sep 17 00:00:00 2001 From: Rajnikant Lodhi Date: Wed, 22 Jun 2022 14:08:26 +0530 Subject: [PATCH 10/13] Closed export prject window without waiting --- .../export-portable-project.component.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts index d022a17d..2a934f9d 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -68,6 +68,7 @@ export class ExportPortableProjectComponent implements OnInit { exportPortableProject() { this.isExport = true; + this.dialogRef.close(); this.export_project_form.value.compression = this.export_project_form.value.compression.value ?? 'zstd'; const object = this.projectService .exportPortableProject(this.server, this.project.project_id, this.export_project_form.value) @@ -82,11 +83,9 @@ export class ExportPortableProjectComponent implements OnInit { document.body.removeChild(link); console.log(document.cookie.search(this.fileName)); this.isExport = false; - setTimeout(() => { - this.dialogRef.close(); - }, 9000); + // setTimeout(() => { + // this.dialogRef.close(); + // }, 8000); }); - } - } From 5fbb4108ddd057f24bc904288b05fe969c580111 Mon Sep 17 00:00:00 2001 From: Rajnikant Lodhi Date: Thu, 23 Jun 2022 10:09:32 +0530 Subject: [PATCH 11/13] Change File name like .gns3project --- .../export-portable-project.component.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts index 2a934f9d..82ce1bb1 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -36,7 +36,7 @@ export class ExportPortableProjectComponent implements OnInit { async ngOnInit() { this.server = this.data.serverDetails; this.project = this.data.projectDetails; - this.fileName = this.project.name + '.zip'; + this.fileName = this.project.name + '.gns3project'; await this.formControls(); this.compression_methods = this.projectService.getCompression(); this.compression_level = this.projectService.getCompressionLevel(); @@ -68,7 +68,6 @@ export class ExportPortableProjectComponent implements OnInit { exportPortableProject() { this.isExport = true; - this.dialogRef.close(); this.export_project_form.value.compression = this.export_project_form.value.compression.value ?? 'zstd'; const object = this.projectService .exportPortableProject(this.server, this.project.project_id, this.export_project_form.value) @@ -83,9 +82,9 @@ export class ExportPortableProjectComponent implements OnInit { document.body.removeChild(link); console.log(document.cookie.search(this.fileName)); this.isExport = false; - // setTimeout(() => { - // this.dialogRef.close(); - // }, 8000); + setTimeout(() => { + this.dialogRef.close(); + }); }); } } From 7398c07c6bb4ddf0afdede502f11f6acd6775715 Mon Sep 17 00:00:00 2001 From: Rajnikant Lodhi Date: Mon, 4 Jul 2022 11:51:40 +0530 Subject: [PATCH 12/13] getpath of export project --- src/app/services/project.service.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 3104a85e..1b63557d 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -135,11 +135,19 @@ export class ProjectService { getCompressionLevel() { return this.compression_level_default_value; }; + exportPortableProject(server:Server, project_id: string,formData:any={}) { if (formData.compression_level != null && formData.compression_level !='') { return this.httpServer.getBlob(server,`/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}`) } else { return this.httpServer.getBlob(server,`/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}`) + } + } + 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}`; + } 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}`; } } From 5cc45a39ca8234fcf234983ba0227386998d106f Mon Sep 17 00:00:00 2001 From: Rajnikant Lodhi Date: Tue, 12 Jul 2022 11:02:15 +0530 Subject: [PATCH 13/13] Add window.location.assign() for file downloading. --- .../export-portable-project.component.html | 2 +- .../export-portable-project.component.ts | 23 ++----------------- src/app/services/project.service.ts | 12 +++------- 3 files changed, 6 insertions(+), 31 deletions(-) diff --git a/src/app/components/export-portable-project/export-portable-project.component.html b/src/app/components/export-portable-project/export-portable-project.component.html index ee121de3..f232dba0 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.html +++ b/src/app/components/export-portable-project/export-portable-project.component.html @@ -7,7 +7,7 @@

Export Project

-
diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts index 82ce1bb1..b4f05311 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -1,12 +1,9 @@ import { Component, Inject, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; -import { of } from 'rxjs'; -import { catchError } from 'rxjs/operators'; import { Project } from '../../models/project'; import { Server } from '../../models/server'; import { ProjectService } from '../../services/project.service'; -import { ToasterService } from '../../services/toaster.service'; @Component({ selector: 'app-export-portable-project', @@ -28,7 +25,6 @@ export class ExportPortableProjectComponent implements OnInit { constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any, - private toasterService: ToasterService, private projectService: ProjectService, private _fb: FormBuilder ) {} @@ -69,22 +65,7 @@ export class ExportPortableProjectComponent implements OnInit { exportPortableProject() { this.isExport = true; this.export_project_form.value.compression = this.export_project_form.value.compression.value ?? 'zstd'; - const object = this.projectService - .exportPortableProject(this.server, this.project.project_id, this.export_project_form.value) - .pipe(catchError((error) => of(error))); - object.subscribe((res) => { - const url = window.URL.createObjectURL(new Blob([res])); - const link = document.createElement('a'); - link.href = url; - link.setAttribute('download', this.fileName); - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - console.log(document.cookie.search(this.fileName)); - this.isExport = false; - setTimeout(() => { - this.dialogRef.close(); - }); - }); + window.location.assign(this.projectService.getexportPortableProjectPath(this.server, this.project.project_id, this.export_project_form.value)) + this.dialogRef.close(); } } diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 1b63557d..9e356ad1 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -136,18 +136,12 @@ export class ProjectService { return this.compression_level_default_value; }; - exportPortableProject(server:Server, project_id: string,formData:any={}) { - if (formData.compression_level != null && formData.compression_level !='') { - return this.httpServer.getBlob(server,`/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}`) - } else { - return this.httpServer.getBlob(server,`/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}`) - } - } + 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}`; + 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}`; + 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}`; } }