Move out snapshots from project map

angular.json

@@ -151,7 +151,7 @@
       }
     },
     "gns3-web-ui-e2e": {
-      "root": "",
+      "root": "e2e",
       "sourceRoot": "e2e",
       "projectType": "application",
       "architect": {

src/app/app.module.ts

@@ -52,7 +52,7 @@ import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.
 import { ProgressDialogComponent } from './common/progress-dialog/progress-dialog.component';
 import { AppComponent } from './app.component';
 
-import { CreateSnapshotDialogComponent, ProjectMapComponent } from './components/project-map/project-map.component';
+import { ProjectMapComponent } from './components/project-map/project-map.component';
 import { ServersComponent, AddServerDialogComponent } from './components/servers/servers.component';
 import { NodeContextMenuComponent } from './components/project-map/node-context-menu/node-context-menu.component';
 import { StartNodeActionComponent } from './components/project-map/node-context-menu/actions/start-node-action/start-node-action.component';
@@ -84,6 +84,9 @@ import { environment } from "../environments/environment";
 import { RavenState } from "./common/error-handlers/raven-state-communicator";
 import { ServerDiscoveryComponent } from "./components/servers/server-discovery/server-discovery.component";
 import { ServerDatabase } from './services/server.database';
+import { CreateSnapshotDialogComponent } from './components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component';
+import { SnapshotsComponent } from './components/snapshots/snapshots.component';
+import { SnapshotMenuItemComponent } from './components/snapshots/snapshot-menu-item/snapshot-menu-item.component';
 
 
 if (environment.production) {
@@ -105,6 +108,8 @@ if (environment.production) {
     ServersComponent,
     AddServerDialogComponent,
     CreateSnapshotDialogComponent,
+    SnapshotMenuItemComponent,
+    SnapshotsComponent,
     ProjectsComponent,
     DefaultLayoutComponent,
     ProgressDialogComponent,

src/app/components/project-map/create-snapshot-dialog.html

@@ -1,10 +0,0 @@
-<h1 mat-dialog-title>Create snapshot</h1>
-<div mat-dialog-content>
-  <mat-form-field>
-    <input matInput tabindex="1" [(ngModel)]="snapshot.name" placeholder="Name">
-  </mat-form-field>
-</div>
-<div mat-dialog-actions>
-  <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
-  <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
-</div>

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

@@ -46,9 +46,10 @@
       </mat-toolbar-row>
 
       <mat-toolbar-row *ngIf="!readonly" >
-        <button mat-icon-button (click)="createSnapshotModal()">
-          <mat-icon>snooze</mat-icon>
-        </button>
+        <app-snapshot-menu-item
+          [server]="server"
+          [project]="project">
+        </app-snapshot-menu-item>
       </mat-toolbar-row>
 
       <mat-toolbar-row *ngIf="!readonly" >

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

@@ -1,4 +1,4 @@
-import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 
 import { Observable, Subject, Subscription, from } from 'rxjs';
@@ -13,11 +13,6 @@ import { MapComponent } from "../../cartography/components/map/map.component";
 import { ServerService } from "../../services/server.service";
 import { ProjectService } from '../../services/project.service';
 import { Server } from "../../models/server";
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from "@angular/material";
-import { SnapshotService } from "../../services/snapshot.service";
-import { Snapshot } from "../../models/snapshot";
-import { ProgressDialogService } from "../../common/progress-dialog/progress-dialog.service";
-import { ProgressDialogComponent } from "../../common/progress-dialog/progress-dialog.component";
 import { Drawing } from "../../cartography/models/drawing";
 import { NodeContextMenuComponent } from "./node-context-menu/node-context-menu.component";
 import { Appliance } from "../../models/appliance";
@@ -26,14 +21,12 @@ import { Symbol } from "../../models/symbol";
 import { NodeSelectInterfaceComponent } from "./node-select-interface/node-select-interface.component";
 import { Port } from "../../models/port";
 import { LinkService } from "../../services/link.service";
-import { ToasterService } from '../../services/toaster.service';
 import { NodesDataSource } from "../../cartography/datasources/nodes-datasource";
 import { LinksDataSource } from "../../cartography/datasources/links-datasource";
 import { ProjectWebServiceHandler } from "../../handlers/project-web-service-handler";
 import { SelectionManager } from "../../cartography/managers/selection-manager";
 import { InRectangleHelper } from "../../cartography/helpers/in-rectangle-helper";
 import { DrawingsDataSource } from "../../cartography/datasources/drawings-datasource";
-import { SettingsService } from "../../services/settings.service";
 import { ProgressService } from "../../common/progress/progress.service";
 
 
@@ -71,15 +64,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
               private serverService: ServerService,
               private projectService: ProjectService,
               private symbolService: SymbolService,
-              private snapshotService: SnapshotService,
               private nodeService: NodeService,
               private linkService: LinkService,
-              private dialog: MatDialog,
-              private progressDialogService: ProgressDialogService,
               private progressService: ProgressService,
-              private toaster: ToasterService,
               private projectWebServiceHandler: ProjectWebServiceHandler,
-              private settingsService: SettingsService,
               protected nodesDataSource: NodesDataSource,
               protected linksDataSource: LinksDataSource,
               protected drawingsDataSource: DrawingsDataSource,
@@ -250,35 +238,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       });
   }
 
-  public createSnapshotModal() {
-    const dialogRef = this.dialog.open(CreateSnapshotDialogComponent, {
-      width: '250px',
-    });
-
-    dialogRef.afterClosed().subscribe(snapshot => {
-      if (snapshot) {
-        const creation = this.snapshotService.create(this.server, this.project.project_id, snapshot);
-
-        const progress = this.progressDialogService.open();
-
-        const subscription = creation.subscribe((created_snapshot: Snapshot) => {
-          this.toaster.success(`Snapshot '${snapshot.name}' has been created.`);
-          progress.close();
-        }, (response) => {
-          const error = response.json();
-          this.toaster.error(`Cannot create snapshot: ${error.message}`);
-          progress.close();
-        });
-
-        progress.afterClosed().subscribe((result) => {
-          if (result === ProgressDialogComponent.CANCELLED) {
-            subscription.unsubscribe();
-          }
-        });
-      }
-    });
-  }
-
   public toggleDrawLineMode() {
     this.drawLineMode = !this.drawLineMode;
     if (!this.drawLineMode) {
@@ -347,27 +306,3 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
 }
-
-
-@Component({
-  selector: 'app-create-snapshot-dialog',
-  templateUrl: 'create-snapshot-dialog.html',
-})
-export class CreateSnapshotDialogComponent {
-  snapshot: Snapshot = new Snapshot();
-
-  constructor(
-    public dialogRef: MatDialogRef<CreateSnapshotDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any) {
-  }
-
-  onAddClick(): void {
-    this.dialogRef.close(this.snapshot);
-  }
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
-}
-

src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.html

@@ -0,0 +1,10 @@
+<h1 mat-dialog-title>Create snapshot</h1>
+<div mat-dialog-content>
+  <mat-form-field>
+    <input matInput tabindex="1" [(ngModel)]="snapshot.name" placeholder="Name">
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
+  <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
+</div>

src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateSnapshotDialogComponent } from './create-snapshot-dialog.component';
+
+describe('CreateSnapshotDialogComponent', () => {
+  let component: CreateSnapshotDialogComponent;
+  let fixture: ComponentFixture<CreateSnapshotDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateSnapshotDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateSnapshotDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.ts

@@ -0,0 +1,26 @@
+import { Component, Inject } from '@angular/core';
+import { Snapshot } from '../../../models/snapshot';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-create-snapshot-dialog',
+  templateUrl: './create-snapshot-dialog.component.html',
+  styleUrls: ['./create-snapshot-dialog.component.scss']
+})
+export class CreateSnapshotDialogComponent {
+
+  snapshot: Snapshot = new Snapshot();
+
+  constructor(
+    public dialogRef: MatDialogRef<CreateSnapshotDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+  onAddClick(): void {
+    this.dialogRef.close(this.snapshot);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.html

@@ -0,0 +1,3 @@
+<button mat-icon-button (click)="createSnapshotModal()">
+    <mat-icon>snooze</mat-icon>
+</button>

src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SnapshotMenuItemComponent } from './snapshot-menu-item.component';
+
+describe('SnapshotMenuItemComponent', () => {
+  let component: SnapshotMenuItemComponent;
+  let fixture: ComponentFixture<SnapshotMenuItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SnapshotMenuItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SnapshotMenuItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material';
+
+import { CreateSnapshotDialogComponent } from '../create-snapshot-dialog/create-snapshot-dialog.component';
+import { SnapshotService } from '../../../services/snapshot.service';
+import { ProgressDialogService } from '../../../common/progress-dialog/progress-dialog.service';
+import { ToasterService } from '../../../services/toaster.service';
+import { ProgressDialogComponent } from '../../../common/progress-dialog/progress-dialog.component';
+import { Project } from '../../../models/project';
+import { Server } from '../../../models/server';
+import { Snapshot } from '../../../models/snapshot';
+
+@Component({
+  selector: 'app-snapshot-menu-item',
+  templateUrl: './snapshot-menu-item.component.html',
+  styleUrls: ['./snapshot-menu-item.component.scss']
+})
+export class SnapshotMenuItemComponent implements OnInit {
+  @Input('project') project: Project;
+  @Input('server') server: Server;
+
+  constructor(
+    private dialog: MatDialog,
+    private snapshotService: SnapshotService,
+    private progressDialogService: ProgressDialogService,
+    private toaster: ToasterService
+  ) { }
+
+  ngOnInit() {}
+
+  public createSnapshotModal() {
+    const dialogRef = this.dialog.open(CreateSnapshotDialogComponent, {
+      width: '250px',
+    });
+
+    dialogRef.afterClosed().subscribe(snapshot => {
+      if (snapshot) {
+        const creation = this.snapshotService.create(this.server, this.project.project_id, snapshot);
+
+        const progress = this.progressDialogService.open();
+
+        const subscription = creation.subscribe((created_snapshot: Snapshot) => {
+          this.toaster.success(`Snapshot '${snapshot.name}' has been created.`);
+          progress.close();
+        }, (response) => {
+          const error = response.json();
+          this.toaster.error(`Cannot create snapshot: ${error.message}`);
+          progress.close();
+        });
+
+        progress.afterClosed().subscribe((result) => {
+          if (result === ProgressDialogComponent.CANCELLED) {
+            subscription.unsubscribe();
+          }
+        });
+      }
+    });
+  }
+
+}

src/app/components/snapshots/snapshots.component.html

@@ -0,0 +1,3 @@
+<p>
+  snapshots works!
+</p>

src/app/components/snapshots/snapshots.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SnapshotsComponent } from './snapshots.component';
+
+describe('SnapshotsComponent', () => {
+  let component: SnapshotsComponent;
+  let fixture: ComponentFixture<SnapshotsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SnapshotsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SnapshotsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/snapshots/snapshots.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-snapshots',
+  templateUrl: './snapshots.component.html',
+  styleUrls: ['./snapshots.component.scss']
+})
+export class SnapshotsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}