diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f6452a5a..d702ab43 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -249,6 +249,7 @@ import { PageNotFoundComponent } from './components/page-not-found/page-not-foun import { AlignHorizontallyActionComponent } from './components/project-map/context-menu/actions/align-horizontally/align-horizontally.component'; import { AlignVerticallyActionComponent } from './components/project-map/context-menu/actions/align_vertically/align-vertically.component'; import { ConfirmationBottomSheetComponent } from './components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component'; +import { ConfigDialogComponent } from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component'; if (environment.production) { Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', { @@ -420,7 +421,8 @@ if (environment.production) { PageNotFoundComponent, AlignHorizontallyActionComponent, AlignVerticallyActionComponent, - ConfirmationBottomSheetComponent + ConfirmationBottomSheetComponent, + ConfigDialogComponent ], imports: [ BrowserModule, @@ -544,7 +546,8 @@ if (environment.production) { ChooseNameDialogComponent, NavigationDialogComponent, ScreenshotDialogComponent, - ConfirmationBottomSheetComponent + ConfirmationBottomSheetComponent, + ConfigDialogComponent ], bootstrap: [AppComponent] }) diff --git a/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts b/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts index 204a6ee1..edc77de2 100644 --- a/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts +++ b/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts @@ -2,6 +2,8 @@ import { Component, Input } from '@angular/core'; import { Node } from '../../../../../cartography/models/node'; import { NodeService } from '../../../../../services/node.service'; import { Server } from '../../../../../models/server'; +import { MatDialog } from '@angular/material'; +import { ConfigDialogComponent } from '../../dialogs/config-dialog/config-dialog.component'; @Component({ selector: 'app-export-config-action', @@ -12,13 +14,33 @@ export class ExportConfigActionComponent { @Input() node: Node; constructor( - private nodeService: NodeService + private nodeService: NodeService, + private dialog: MatDialog ) {} exportConfig() { - this.nodeService.getStartupConfiguration(this.server, this.node).subscribe((config: any) => { - this.downloadByHtmlTag(config); - }); + if (this.node.node_type === 'vpcs') { + this.nodeService.getStartupConfiguration(this.server, this.node).subscribe((config: any) => { + this.downloadByHtmlTag(config); + }); + } else { + const dialogRef = this.dialog.open(ConfigDialogComponent, { + width: '500px', + autoFocus: false + }); + let instance = dialogRef.componentInstance; + dialogRef.afterClosed().subscribe((configType: string) => { + if (configType === 'startup-config') { + this.nodeService.getStartupConfiguration(this.server, this.node).subscribe((config: any) => { + this.downloadByHtmlTag(config); + }); + } else if (configType === 'private-config') { + this.nodeService.getPrivateConfiguration(this.server, this.node).subscribe((config: any) => { + this.downloadByHtmlTag(config); + }); + } + }); + } } private downloadByHtmlTag(config: string) { diff --git a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.html b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.html index a8cc1358..6325dabc 100644 --- a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.html +++ b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.html @@ -1,4 +1,10 @@ - diff --git a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.scss b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.scss new file mode 100644 index 00000000..0f602793 --- /dev/null +++ b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.scss @@ -0,0 +1,3 @@ +.non-visible { + display: none; +} diff --git a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts index 5adba173..830d02ee 100644 --- a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts +++ b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts @@ -1,19 +1,64 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, ViewChild, ElementRef } from '@angular/core'; import { Node } from '../../../../../cartography/models/node'; import { NodeService } from '../../../../../services/node.service'; import { Server } from '../../../../../models/server'; +import { ToasterService } from '../../../../../services/toaster.service'; +import { MatDialog } from '@angular/material'; +import { ConfigDialogComponent } from '../../dialogs/config-dialog/config-dialog.component'; @Component({ selector: 'app-import-config-action', - templateUrl: './import-config-action.component.html' + templateUrl: './import-config-action.component.html', + styleUrls: ['./import-config-action.component.scss'] }) export class ImportConfigActionComponent { @Input() server: Server; @Input() node: Node; + @ViewChild('fileInput', {static: false}) fileInput: ElementRef; + configType: string; - constructor() {} + constructor( + private nodeService: NodeService, + private toasterService: ToasterService, + private dialog: MatDialog + ) {} - importConfig() { - //needs implementation + triggerClick() { + if (this.node.node_type !== 'vpcs') { + const dialogRef = this.dialog.open(ConfigDialogComponent, { + width: '500px', + autoFocus: false + }); + let instance = dialogRef.componentInstance; + dialogRef.afterClosed().subscribe((configType: string) => { + this.configType = configType; + this.fileInput.nativeElement.click(); + }); + } else { + this.configType = 'startup-config'; + this.fileInput.nativeElement.click(); + } + } + + importConfig(event) { + let file: File = event.target.files[0]; + let fileReader: FileReader = new FileReader(); + fileReader.onload = (e) => { + let content: string | ArrayBuffer = fileReader.result; + if (typeof content !== 'string'){ + content = content.toString(); + } + + if (this.configType === 'startup-config') { + this.nodeService.saveConfiguration(this.server, this.node, content).subscribe(() => { + this.toasterService.success(`Configuration for node ${this.node.name} imported.`); + }); + } else if (this.configType === 'private-config') { + this.nodeService.savePrivateConfiguration(this.server, this.node, content).subscribe(() => { + this.toasterService.success(`Configuration for node ${this.node.name} imported.`); + }); + } + }; + fileReader.readAsText(file); } } diff --git a/src/app/components/project-map/context-menu/context-menu.component.html b/src/app/components/project-map/context-menu/context-menu.component.html index 397b7bf7..d696b14d 100644 --- a/src/app/components/project-map/context-menu/context-menu.component.html +++ b/src/app/components/project-map/context-menu/context-menu.component.html @@ -59,14 +59,14 @@ [project]="project" [node]="nodes[0]" > - - + > Choose configuration file + + diff --git a/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.scss b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.scss new file mode 100644 index 00000000..655685b5 --- /dev/null +++ b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.scss @@ -0,0 +1,5 @@ +.container { + width: 100%; + display: flex; + justify-content: space-between; +} diff --git a/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.spec.ts b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.ts b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.ts new file mode 100644 index 00000000..e156e5d1 --- /dev/null +++ b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.ts @@ -0,0 +1,17 @@ +import { Component, Input } from '@angular/core'; +import { MatDialogRef } from '@angular/material'; + +@Component({ + selector: 'app-config-dialog', + templateUrl: './config-dialog.component.html', + styleUrls: ['./config-dialog.component.scss'] +}) +export class ConfigDialogComponent { + constructor( + public dialogRef: MatDialogRef, + ) {} + + close(fileType: string) { + this.dialogRef.close(fileType); + } +}