Merge branch 'master' into Some-issues-with-projects-that-don't-exist

package.json

@@ -65,12 +65,14 @@
     "ini": "^1.3.5",
     "material-design-icons": "^3.0.1",
     "ng2-file-upload": "^1.3.0",
+    "ngx-device-detector": "^1.3.16",
     "ngx-electron": "^2.1.1",
     "node-fetch": "^2.6.0",
     "notosans-fontface": "^1.1.0",
     "raven-js": "^3.27.2",
     "rxjs": "^6.5.3",
     "rxjs-compat": "^6.5.3",
+    "save-html-as-image": "^1.2.0",
     "save-svg-as-png": "^1.4.14",
     "svg-crowbar": "^0.2.4",
     "tree-kill": "^1.2.1",

src/app/app.module.ts

@@ -250,6 +250,8 @@ import { AlignHorizontallyActionComponent } from './components/project-map/conte
 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 { NotificationService } from './services/notification.service';
+import { DeviceDetectorModule } from 'ngx-device-detector';
+import { ConfigDialogComponent } from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -421,7 +423,8 @@ if (environment.production) {
     PageNotFoundComponent,
     AlignHorizontallyActionComponent,
     AlignVerticallyActionComponent,
-    ConfirmationBottomSheetComponent
+    ConfirmationBottomSheetComponent,
+    ConfigDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -440,7 +443,8 @@ if (environment.production) {
     ResizableModule,
     DragAndDropModule,
     DragDropModule,
-    MATERIAL_IMPORTS
+    MATERIAL_IMPORTS,
+    DeviceDetectorModule.forRoot()
   ],
   providers: [
     SettingsService,
@@ -546,7 +550,8 @@ if (environment.production) {
     ChooseNameDialogComponent,
     NavigationDialogComponent,
     ScreenshotDialogComponent,
-    ConfirmationBottomSheetComponent
+    ConfirmationBottomSheetComponent,
+    ConfigDialogComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/cartography/components/d3-map/d3-map.component.html

@@ -1,4 +1,4 @@
-<svg #svg class="map" preserveAspectRatio="none" movingCanvas zoomingCanvas>
+<svg id="map" #svg class="map" preserveAspectRatio="none" movingCanvas zoomingCanvas>
   <filter id="grayscale"><feColorMatrix id="feGrayscale" type="saturate" values="0" /></filter>
   <defs>
     <pattern id="gridDrawing" attr.width="{{project.drawing_grid_size}}" attr.height="{{project.drawing_grid_size}}" patternUnits="userSpaceOnUse">

src/app/components/adbutler/adbutler.component.ts

@@ -28,7 +28,7 @@ export class AdbutlerComponent implements OnInit {
           this.htmlCode = response['placements'].placement_1.body;
           this.ad.nativeElement.insertAdjacentHTML('beforeend', this.htmlCode);
         },
-        error => this.toasterService.error(error)
+        error => {}
       );
   }
 }

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) => {
+        if (this.node.node_type === 'vpcs') {
-            this.downloadByHtmlTag(config);
+            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) {

src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.html

@@ -1,4 +1,10 @@
-<button mat-menu-item (click)="importConfig()">
+<input
+    type="file"
+    accept=".txt, .vpc"
+    class="non-visible"
+    #fileInput
+    (change)="importConfig($event)"/>
+<button mat-menu-item (click)="triggerClick()">
     <mat-icon>call_received</mat-icon>
     <span>Import config</span>
 </button>

src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.scss

@@ -0,0 +1,3 @@
+.non-visible {
+    display: none;
+}

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() {
+    triggerClick() {
-        //needs implementation
+        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);
     }
 }

src/app/components/project-map/context-menu/context-menu.component.html

@@ -59,14 +59,14 @@
       [project]="project"
       [node]="nodes[0]"
     ></app-edit-config-action>
-    <app-export-config-action *ngIf="nodes.length===1 && nodes[0].node_type==='vpcs'"
+    <app-export-config-action *ngIf="nodes.length===1 && (nodes[0].node_type==='vpcs' || nodes[0].node_type==='iou' || nodes[0].node_type==='dynamips')"
       [server]="server"
       [node]="nodes[0]"
     ></app-export-config-action>
-    <!-- <app-import-config-action *ngIf="nodes.length===1"
+    <app-import-config-action *ngIf="nodes.length===1 && (nodes[0].node_type==='vpcs' || nodes[0].node_type==='iou' || nodes[0].node_type==='dynamips')"
       [server]="server"
       [node]="nodes[0]"
-    ></app-import-config-action> -->
+    ></app-import-config-action>
     <app-move-layer-up-action
       *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length)"
       [server]="server"

src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.html

@@ -0,0 +1,16 @@
+<h1 mat-dialog-title>Choose configuration file</h1>
+
+<div class="modal-form-container">
+    <div class="container">
+        <div>
+            <button mat-raised-button color="primary" (click)="close('startup-config')">
+                startup configuration
+            </button>
+        </div>
+        <div>
+            <button mat-raised-button color="primary" (click)="close('private-config')">
+                private configuration
+            </button>
+        </div>
+    </div>
+</div>

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;
+}

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<ConfigDialogComponent>,
+    ) {}
+
+    close(fileType: string) {
+        this.dialogRef.close(fileType);
+    }
+}

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

@@ -11,6 +11,7 @@ import downloadSvg from 'svg-crowbar';
 import { ElectronService } from 'ngx-electron';
 import { MatDialog } from '@angular/material';
 import { ScreenshotDialogComponent, Screenshot } from '../screenshot-dialog/screenshot-dialog.component';
+import { saveAsPng, saveAsJpeg } from 'save-html-as-image';
 
 
 @Component({

src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.html

@@ -1,9 +1,9 @@
 <h1 mat-dialog-title>Take a screenshot</h1>
 
-<!-- <mat-radio-group class="radio-group" aria-label="Sorting">
+<mat-radio-group class="radio-group" aria-label="Sorting">
     <mat-radio-button value="1" (click)="setFiletype('svg')" checked>SVG</mat-radio-button>
     <mat-radio-button [disabled]="!isPngAvailable" value="2" (click)="setFiletype('png')">PNG</mat-radio-button>
-</mat-radio-group> -->
+</mat-radio-group>
 
 <form [formGroup]="nameForm" class="name-form">
   <mat-form-field class="name-form">

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

@@ -3,6 +3,7 @@ import { MatDialogRef } from '@angular/material';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { ToasterService } from '../../../services/toaster.service';
 import { ElectronService } from 'ngx-electron';
+import { DeviceDetectorService } from 'ngx-device-detector';
 
 
 @Component({
@@ -19,13 +20,13 @@ export class ScreenshotDialogComponent implements OnInit {
     public dialogRef: MatDialogRef<ScreenshotDialogComponent>,
     private toasterService: ToasterService,
     private formBuilder: FormBuilder,
-    private electronService: ElectronService
+    private electronService: ElectronService,
+    private deviceService: DeviceDetectorService
   ) {
     this.nameForm = this.formBuilder.group({
       screenshotName: new FormControl(null, [Validators.required])
     });
-
+    this.isPngAvailable = this.electronService.isWindows || (this.deviceService.getDeviceInfo().os==='Windows');
-    this.isPngAvailable = this.electronService.isWindows;
   }
 
   ngOnInit() {}